@oanda/labs-instruments-table-widget 1.0.25 → 1.0.27

package/src/InstrumentsTableWidget/config.ts

@@ -1,52 +1,106 @@
-import type { HeaderColumns } from '@oanda/labs-widget-common';
+import type { HeaderConfigType } from '@oanda/labs-widget-common';
 import { DataRecordType } from '@oanda/labs-widget-common';
 
 import { AssetClassName } from '../gql/types/graphql';
 import type { AssetClassLabels } from './components/Filters/types';
 
-type HeaderRecordType =
-  | DataRecordType.INSTRUMENT
-  | DataRecordType.SELL
-  | DataRecordType.BUY
-  | DataRecordType.DAILY_CHANGE
-  | DataRecordType.SPREAD
-  | DataRecordType.HIGH
-  | DataRecordType.LOW;
-
-const headerConfig: Record<
-  HeaderRecordType,
-  { displayName: string; additionalStyles: string }
-> = {
+const normal: HeaderConfigType = {
   [DataRecordType.INSTRUMENT]: {
     displayName: 'instrument',
-    additionalStyles: 'lw-text-left lw-min-w-[130px]',
+    additionalStyles: {
+      align: 'left',
+      minWidth: '200px',
+    },
   },
   [DataRecordType.SELL]: {
     displayName: 'sell',
-    additionalStyles: 'lw-text-right lw-min-w-[75px] lw-pr-4',
+    additionalStyles: {
+      align: 'right',
+      minWidth: '75px',
+      paddingRight: true,
+    },
   },
   [DataRecordType.BUY]: {
     displayName: 'buy',
-    additionalStyles: 'lw-text-right lw-min-w-[75px] lw-pr-4',
+    additionalStyles: {
+      align: 'right',
+      minWidth: '75px',
+      paddingRight: true,
+    },
   },
   [DataRecordType.SPREAD]: {
     displayName: 'spread',
-    additionalStyles: 'lw-text-right lw-min-w-[50px]',
+    additionalStyles: {
+      align: 'right',
+      minWidth: '50px',
+    },
   },
   [DataRecordType.DAILY_CHANGE]: {
     displayName: 'daily_percent_change',
-    additionalStyles: 'lw-text-right lw-min-w-[80px]',
+    additionalStyles: {
+      align: 'right',
+      minWidth: '80px',
+    },
   },
   [DataRecordType.HIGH]: {
     displayName: 'today_high',
-    additionalStyles: 'lw-text-right lw-min-w-[80px]',
+    additionalStyles: {
+      align: 'right',
+      minWidth: '80px',
+    },
   },
   [DataRecordType.LOW]: {
     displayName: 'today_low',
-    additionalStyles: 'lw-text-right lw-min-w-[80px]',
+    additionalStyles: {
+      align: 'right',
+      minWidth: '80px',
+    },
+  },
+  [DataRecordType.TRADE_MODE]: {
+    displayName: 'trade_mode',
+    additionalStyles: {
+      align: 'right',
+      minWidth: '80px',
+      paddingRight: true,
+    },
+  },
+  [DataRecordType.SYMBOL]: {
+    displayName: 'symbol',
+    additionalStyles: {
+      align: 'center',
+      minWidth: '80px',
+    },
+  },
+};
+
+const longInstruments: HeaderConfigType = {
+  ...normal,
+  [DataRecordType.INSTRUMENT]: {
+    displayName: 'instrument',
+    additionalStyles: {
+      align: 'left',
+      minWidth: '250px',
+    },
+  },
+};
+
+const mobile: HeaderConfigType = {
+  ...normal,
+  [DataRecordType.INSTRUMENT]: {
+    displayName: 'instrument',
+    additionalStyles: {
+      align: 'left',
+      minWidth: '150px',
+    },
   },
 };
 
+const headerConfigs = {
+  normal,
+  longInstruments,
+  mobile,
+};
+
 const assetClassLabels: Record<AssetClassLabels, string> = {
   ALL: 'all',
   [AssetClassName.Currency]: 'currency',
@@ -58,15 +112,4 @@ const assetClassLabels: Record<AssetClassLabels, string> = {
   [AssetClassName.Indices]: 'index',
 };
 
-const getHeaderConfig = (activeColumns: DataRecordType[]): HeaderColumns[] => {
-  const columns: HeaderRecordType[] = [
-    DataRecordType.INSTRUMENT,
-    ...activeColumns,
-  ].filter(
-    (item): item is HeaderRecordType => item !== DataRecordType.SENTIMENT
-  );
-
-  return columns.map((item) => headerConfig[item]);
-};
-
-export { assetClassLabels, getHeaderConfig, headerConfig };
+export { assetClassLabels, headerConfigs };

package/src/InstrumentsTableWidget/types.ts

@@ -33,4 +33,5 @@ export interface MainProps {
   isInstrumentSearchEnabled?: boolean;
   recordsPerPage?: number;
   dataSource: InstrumentDataSource;
+  isLiveRatesDisabled?: boolean;
 }

package/src/translations/sources/en.json

@@ -3,6 +3,7 @@
   "asset_class": "Asset class",
   "bond": "Bond",
   "buy": "Buy",
+  "close_only": "Close Only",
   "commodity": "Commodity",
   "crypto": "Crypto",
   "currency": "Currency",
@@ -12,12 +13,16 @@
   "index": "Index",
   "instrument": "Instrument",
   "instrument_name": "Instrument name",
+  "long_only": "Long Only",
   "no_matching_results": "No matching results",
   "pagination_entries_range": "{{firstItemOnPage}}-{{lastItemOnPage}} of {{itemCount}} entries",
   "search": "Search",
   "sell": "Sell",
   "share_cfds": "Share CFDs",
+  "short_only": "Short Only",
   "spread": "Spread",
+  "symbol": "Symbol",
   "today_high": "Today High",
-  "today_low": "Today Low"
+  "today_low": "Today Low",
+  "trade_mode": "Trade Mode"
 }

package/test/Main.test.tsx

@@ -31,6 +31,7 @@ describe('Main component', () => {
               dataSource={InstrumentDataSource.V20}
               division={Division.Oc}
               instruments={['EUR_USD', 'GBP_USD']}
+              recordsPerPage={10}
             />
           </MockLayoutProvider>
         </LiveRatesProvider>