Skip to content

Commit

Permalink
Akmal / chore: migrate data-table-constants to typescript (#33)
Browse files Browse the repository at this point in the history 
* chore: migrate data-table-constants to typescript

* fix: refactor types
  • Loading branch information
@akmal-deriv
akmal-deriv authored Jan 16, 2023
1 parent 03a7ba6 commit b9963f4
Show file tree
Hide file tree
Showing 2 changed files with 80 additions and 52 deletions.
2 changes: 1 addition & 1 deletion packages/components/src/components/label/label.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,7 @@ const available_sizes = ['regular', 'large'] as const;

type TLabel = {
mode: typeof available_modes[number];
size: typeof available_sizes[number];
size?: typeof available_sizes[number];
className?: string;
};

Expand Down
130 changes: 79 additions & 51 deletions ...rts/src/Constants/data-table-constants.js → ...ts/src/Constants/data-table-constants.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,34 +11,58 @@ import IndicativeCell from '../Components/indicative-cell.jsx';
import MarketSymbolIconRow from '../Components/market-symbol-icon-row.jsx';
import ProfitLossCell from '../Components/profit_loss_cell.jsx';
import CurrencyWrapper from '../Components/currency-wrapper';
import { ITransformer } from 'mobx-utils';

const getModeFromValue = key => {
const map = {
buy: 'success',
deposit: 'success',
hold: 'warn',
release: 'success',
sell: 'danger',
withdrawal: 'info',
default: 'default',
adjustment: 'adjustment',
transfer: 'transfer',
};
const map = {
buy: 'success',
deposit: 'success',
hold: 'warn',
release: 'success',
sell: 'danger',
withdrawal: 'info',
default: 'default',
adjustment: 'adjustment',
transfer: 'transfer',
} as const;

if (Object.keys(map).find(x => x === key)) {
return map[key];
}
type TKeys = keyof typeof map;

return map.default;
const getModeFromValue = (key: TKeys) => map[key] || map.default;

type TCellContentProps = {
cell_value: TKeys;
passthrough: any;
row_obj: any;
is_footer: boolean;
};

type THeaderProps = {
title: React.ReactNode;
};

type TColumnTemplateType = {
key?: string;
title?: React.ReactNode;
col_index?: string;
renderCellContent?: (props: TCellContentProps) => React.ReactNode;
renderHeader?: (props: THeaderProps) => React.ReactNode;
};

type TMultiplierOpenPositionstemplateProps = {
currency: string;
onClickCancel: () => void;
onClickSell: () => void;
getPositionById: (id: string) => ITransformer<any, any>;
server_time: moment.Moment;
};

/* eslint-disable react/display-name, react/prop-types */
export const getStatementTableColumnsTemplate = currency => [
export const getStatementTableColumnsTemplate = (currency: string): TColumnTemplateType[] => [
{
key: 'icon',
title: isMobile() ? '' : localize('Type'),
col_index: 'icon',
renderCellContent: ({ cell_value, passthrough, row_obj }) => {
renderCellContent: ({ cell_value, passthrough, row_obj }: TCellContentProps) => {
const icon = passthrough.isTopUp(row_obj) ? 'icCashierTopUp' : null;
return (
<MarketSymbolIconRow action={cell_value} icon={icon} key={row_obj.transaction_id} payload={row_obj} />
Expand All @@ -48,7 +72,7 @@ export const getStatementTableColumnsTemplate = currency => [
{
title: localize('Ref. ID'),
col_index: 'refid',
renderCellContent: ({ cell_value, row_obj }) => {
renderCellContent: ({ cell_value, row_obj }: TCellContentProps) => {
return (
<Popover
alignment={'top'}
Expand All @@ -67,15 +91,15 @@ export const getStatementTableColumnsTemplate = currency => [
{
title: localize('Transaction time'),
col_index: 'date',
renderCellContent: ({ cell_value }) => {
renderCellContent: ({ cell_value }: TCellContentProps) => {
return <span>{cell_value} GMT</span>;
},
},
{
key: 'mode',
title: localize('Transaction'),
col_index: 'action_type',
renderCellContent: ({ cell_value, passthrough, row_obj }) => (
renderCellContent: ({ cell_value, passthrough, row_obj }: TCellContentProps) => (
<Label mode={getModeFromValue(cell_value)}>
{(passthrough.isTopUp(row_obj) && localize('Top up')) || row_obj.action}
</Label>
Expand All @@ -84,7 +108,7 @@ export const getStatementTableColumnsTemplate = currency => [
{
title: localize('Credit/Debit'),
col_index: 'amount',
renderCellContent: ({ cell_value }) => (
renderCellContent: ({ cell_value }: TCellContentProps) => (
<div className={`amount--${getProfitOrLoss(cell_value)}`}>
<Money has_sign amount={cell_value.replace(/[,]+/g, '')} currency={currency} />
</div>
Expand All @@ -93,15 +117,17 @@ export const getStatementTableColumnsTemplate = currency => [
{
title: localize('Balance'),
col_index: 'balance',
renderCellContent: ({ cell_value }) => <Money amount={cell_value.replace(/[,]+/g, '')} currency={currency} />,
renderCellContent: ({ cell_value }: TCellContentProps) => (
<Money amount={cell_value.replace(/[,]+/g, '')} currency={currency} />
),
},
];
export const getProfitTableColumnsTemplate = (currency, items_count) => [
export const getProfitTableColumnsTemplate = (currency: string, items_count: number): TColumnTemplateType[] => [
{
key: 'icon',
title: isMobile() ? '' : localize('Type'),
col_index: 'action_type',
renderCellContent: ({ cell_value, row_obj, is_footer }) => {
renderCellContent: ({ cell_value, row_obj, is_footer }: TCellContentProps) => {
if (is_footer) {
return localize('Profit/loss on the last {{item_count}} contracts', { item_count: items_count });
}
Expand All @@ -115,21 +141,21 @@ export const getProfitTableColumnsTemplate = (currency, items_count) => [
{
title: localize('Currency'),
col_index: 'currency',
renderCellContent: ({ is_footer }) =>
renderCellContent: ({ is_footer }: TCellContentProps) =>
is_footer ? '' : <CurrencyWrapper currency={getCurrencyDisplayCode(currency)} />,
},
{
title: localize('Buy time'),
col_index: 'purchase_time',
renderCellContent: ({ cell_value, is_footer }) => {
renderCellContent: ({ cell_value, is_footer }: TCellContentProps) => {
if (is_footer) return '';
return <span>{cell_value} GMT</span>;
},
},
{
title: localize('Buy price'),
col_index: 'buy_price',
renderCellContent: ({ cell_value, is_footer }) => {
renderCellContent: ({ cell_value, is_footer }: TCellContentProps) => {
if (is_footer) return '';

return <Money amount={cell_value} currency={currency} />;
Expand All @@ -138,16 +164,16 @@ export const getProfitTableColumnsTemplate = (currency, items_count) => [
{
title: localize('Sell time'),
col_index: 'sell_time',
renderHeader: ({ title }) => <span>{title}</span>,
renderCellContent: ({ cell_value, is_footer }) => {
renderHeader: ({ title }: THeaderProps) => <span>{title}</span>,
renderCellContent: ({ cell_value, is_footer }: TCellContentProps) => {
if (is_footer) return '';
return <span>{cell_value} GMT</span>;
},
},
{
title: localize('Sell price'),
col_index: 'sell_price',
renderCellContent: ({ cell_value, is_footer }) => {
renderCellContent: ({ cell_value, is_footer }: TCellContentProps) => {
if (is_footer) return '';

return <Money amount={cell_value} currency={currency} />;
Expand All @@ -156,18 +182,18 @@ export const getProfitTableColumnsTemplate = (currency, items_count) => [
{
title: localize('Profit / Loss'),
col_index: 'profit_loss',
renderCellContent: ({ cell_value }) => (
renderCellContent: ({ cell_value }: TCellContentProps) => (
<ProfitLossCell value={cell_value}>
<Money has_sign amount={cell_value.replace(/[,]+/g, '')} currency={currency} />
</ProfitLossCell>
),
},
];
export const getOpenPositionsColumnsTemplate = currency => [
export const getOpenPositionsColumnsTemplate = (currency: string): TColumnTemplateType[] => [
{
title: isMobile() ? '' : localize('Type'),
col_index: 'type',
renderCellContent: ({ cell_value, row_obj, is_footer }) => {
renderCellContent: ({ cell_value, row_obj, is_footer }: TCellContentProps) => {
if (is_footer) return localize('Total');

return <MarketSymbolIconRow action={cell_value} key={row_obj.id} payload={row_obj.contract_info} />;
Expand All @@ -180,25 +206,25 @@ export const getOpenPositionsColumnsTemplate = currency => [
{
title: localize('Currency'),
col_index: 'currency',
renderCellContent: ({ row_obj }) => (
renderCellContent: ({ row_obj }: TCellContentProps) => (
<CurrencyWrapper currency={getCurrencyDisplayCode(row_obj.contract_info?.currency)} />
),
},
{
title: localize('Buy price'),
col_index: 'purchase',
renderCellContent: ({ cell_value }) => <Money amount={cell_value} currency={currency} />,
renderCellContent: ({ cell_value }: TCellContentProps) => <Money amount={cell_value} currency={currency} />,
},
{
title: localize('Payout limit'),
col_index: 'payout',
renderCellContent: ({ cell_value }) =>
renderCellContent: ({ cell_value }: TCellContentProps) =>
cell_value ? <Money amount={cell_value} currency={currency} /> : <span>-</span>,
},
{
title: localize('Indicative profit/loss'),
col_index: 'profit',
renderCellContent: ({ row_obj }) => {
renderCellContent: ({ row_obj }: TCellContentProps) => {
if (!row_obj.profit_loss && (!row_obj.contract_info || !row_obj.contract_info.profit)) return;
const profit = row_obj.profit_loss || row_obj.contract_info.profit;
// eslint-disable-next-line consistent-return
Expand All @@ -220,7 +246,7 @@ export const getOpenPositionsColumnsTemplate = currency => [
{
title: localize('Indicative price'),
col_index: 'indicative',
renderCellContent: ({ cell_value, row_obj, is_footer }) => (
renderCellContent: ({ cell_value, row_obj, is_footer }: TCellContentProps) => (
<IndicativeCell
amount={+cell_value}
currency={currency}
Expand All @@ -233,7 +259,9 @@ export const getOpenPositionsColumnsTemplate = currency => [
{
title: localize('Remaining time'),
col_index: 'id',
renderCellContent: ({ row_obj }) => <ProgressSliderStream contract_info={row_obj.contract_info} />,
renderCellContent: ({ row_obj }: TCellContentProps) => (
<ProgressSliderStream contract_info={row_obj.contract_info} />
),
},
];

Expand All @@ -243,11 +271,11 @@ export const getMultiplierOpenPositionsColumnsTemplate = ({
onClickSell,
getPositionById,
server_time,
}) => [
}: TMultiplierOpenPositionstemplateProps): TColumnTemplateType[] => [
{
title: isMobile() ? '' : localize('Type'),
col_index: 'type',
renderCellContent: ({ cell_value, row_obj, is_footer }) => {
renderCellContent: ({ cell_value, row_obj, is_footer }: TCellContentProps) => {
if (is_footer) return localize('Total');

return (
Expand All @@ -263,20 +291,20 @@ export const getMultiplierOpenPositionsColumnsTemplate = ({
{
title: localize('Multiplier'),
col_index: 'multiplier',
renderCellContent: ({ row_obj }) =>
renderCellContent: ({ row_obj }: TCellContentProps) =>
row_obj.contract_info && row_obj.contract_info.multiplier ? `x${row_obj.contract_info.multiplier}` : '',
},
{
title: localize('Currency'),
col_index: 'currency',
renderCellContent: ({ row_obj }) => (
renderCellContent: ({ row_obj }: TCellContentProps) => (
<CurrencyWrapper currency={getCurrencyDisplayCode(row_obj.contract_info?.currency)} />
),
},
{
title: localize('Stake'),
col_index: 'buy_price',
renderCellContent: ({ row_obj }) => {
renderCellContent: ({ row_obj }: TCellContentProps) => {
if (row_obj.contract_info) {
const { ask_price: cancellation_price = 0 } = row_obj.contract_info.cancellation || {};
return <Money amount={row_obj.contract_info.buy_price - cancellation_price} currency={currency} />;
Expand All @@ -287,7 +315,7 @@ export const getMultiplierOpenPositionsColumnsTemplate = ({
{
title: localize('Deal cancel. fee'),
col_index: 'cancellation',
renderCellContent: ({ row_obj }) => {
renderCellContent: ({ row_obj }: TCellContentProps) => {
if (!row_obj.contract_info || !row_obj.contract_info.underlying) return '-';

if (!shouldShowCancellation(row_obj.contract_info.underlying)) return localize('N/A');
Expand All @@ -305,12 +333,12 @@ export const getMultiplierOpenPositionsColumnsTemplate = ({
<Localize i18n_default_text='Buy price' />
),
col_index: 'purchase',
renderCellContent: ({ cell_value }) => <Money amount={cell_value} currency={currency} />,
renderCellContent: ({ cell_value }: TCellContentProps) => <Money amount={cell_value} currency={currency} />,
},
{
title: <Localize i18n_default_text='Take profit<0 />Stop loss' components={[<br key={0} />]} />,
col_index: 'limit_order',
renderCellContent: ({ row_obj, is_footer }) => {
renderCellContent: ({ row_obj, is_footer }: TCellContentProps) => {
if (is_footer) {
return '';
}
Expand Down Expand Up @@ -339,7 +367,7 @@ export const getMultiplierOpenPositionsColumnsTemplate = ({
{
title: localize('Current stake'),
col_index: 'bid_price',
renderCellContent: ({ row_obj, is_footer }) => {
renderCellContent: ({ row_obj, is_footer }: TCellContentProps) => {
if (is_footer) {
return '';
}
Expand All @@ -366,7 +394,7 @@ export const getMultiplierOpenPositionsColumnsTemplate = ({
<Localize i18n_default_text='Total<0 />profit/loss' components={[<br key={0} />]} />
),
col_index: 'profit',
renderCellContent: ({ row_obj }) => {
renderCellContent: ({ row_obj }: TCellContentProps) => {
if (!row_obj.contract_info || !row_obj.contract_info.profit) return null;
const total_profit = getTotalProfit(row_obj.contract_info);
// eslint-disable-next-line consistent-return
Expand All @@ -388,7 +416,7 @@ export const getMultiplierOpenPositionsColumnsTemplate = ({
{
title: localize('Action'),
col_index: 'action',
renderCellContent: ({ row_obj, is_footer }) => {
renderCellContent: ({ row_obj, is_footer }: TCellContentProps) => {
if (is_footer) {
return <div className='open-positions__row-action' />;
}
Expand Down

0 comments on commit b9963f4

Please sign in to comment.