@oanda/labs-widget-common 1.0.205 → 1.0.207

package/src/components/TableWidget/ColumnRenderer.tsx

@@ -93,6 +93,28 @@ export const ColumnRenderer = ({
         <span>{record.low}</span>
       </TableCell>
     ),
+    [DataRecordType.SYMBOL]: () => (
+      <TableCell
+        key={DataRecordType.SYMBOL}
+        isError={isError}
+        isLoading={isLoading}
+        loaderSize={LoaderSize.md}
+        type="textCentered"
+      >
+        <span>{record.instrument}</span>
+      </TableCell>
+    ),
+    [DataRecordType.TRADE_MODE]: () => (
+      <TableCell
+        key={DataRecordType.TRADE_MODE}
+        additionalPaddingRight={true}
+        isError={isError}
+        isLoading={isLoading}
+        loaderSize={LoaderSize.sm}
+      >
+        <span>{'Long Only'}</span>
+      </TableCell>
+    ),
   };
 
   return activeColumns.map((item) => (

package/src/components/TableWidget/DataRecordRow.tsx

@@ -15,6 +15,7 @@ export interface DataRecordRowProps {
   target: EventTarget | null;
   isScrolled?: boolean;
   toolTipId: string;
+  instrumentColumnWidth?: string;
   activeColumns: DataRecordType[];
 }
 
@@ -27,6 +28,7 @@ export const DataRecordRow = ({
   isScrolled,
   toolTipId,
   activeColumns,
+  instrumentColumnWidth,
 }: DataRecordRowProps) => {
   const { isDark } = useLayoutProvider();
 
@@ -47,6 +49,7 @@ export const DataRecordRow = ({
         isLoading={isLoading}
         isScrolled={isScrolled}
         tooltipId={toolTipId}
+        width={instrumentColumnWidth}
       />
       <ColumnRenderer
         activeColumns={activeColumns}

package/src/components/TableWidget/TableWidget.tsx

@@ -33,6 +33,7 @@ interface TableWidgetProps<TTabs> {
   pageNumber: number;
   count: number;
   viewType?: 'table' | 'cards';
+  instrumentColumnWidth?: string;
 }
 
 export const TableWidget = <TTabs,>({
@@ -51,6 +52,7 @@ export const TableWidget = <TTabs,>({
   pageNumber,
   count,
   viewType,
+  instrumentColumnWidth,
 }: TableWidgetProps<TTabs>) => {
   const { lang } = useLocale();
   const { size } = useLayoutProvider();
@@ -79,6 +81,7 @@ export const TableWidget = <TTabs,>({
                 key={`row_${index}`}
                 activeColumns={activeColumns}
                 hasBackgroundColor={index % 2 === 0}
+                instrumentColumnWidth={instrumentColumnWidth}
                 isChartLoading={isChartLoading}
                 isLoading={isLoading}
                 isScrolled={isScrolled}

package/src/components/TableWidget/index.ts

@@ -1 +1,2 @@
 export * from './TableWidget';
+export * from './utils';

package/src/components/TableWidget/utils.ts

@@ -1,12 +1,18 @@
 import { DataRecordType } from '../../types';
-import type { HeaderColumns } from '../Table';
+import type { HeaderColumns, HeaderConfigType } from '../Table';
 
 export const getTableRowIndex = () => ({});
 
 export const getHeaderConfig = (
   activeColumns: DataRecordType[],
-  headerConfig: Record<DataRecordType, HeaderColumns>
-): HeaderColumns[] =>
-  [DataRecordType.INSTRUMENT, ...activeColumns].map(
-    (item) => headerConfig[item]
-  );
+  headerConfig: HeaderConfigType
+): HeaderColumns[] => {
+  const columns: DataRecordType[] = [
+    DataRecordType.INSTRUMENT,
+    ...activeColumns,
+  ];
+
+  return columns
+    .map((item) => headerConfig[item])
+    .filter((headerCell) => headerCell !== undefined);
+};

package/src/hooks/useLiveRatesQuery.ts

@@ -5,18 +5,20 @@ import type {
   LiveRatesTargetHookReturnObject,
 } from '../types';
 
-export const useLiveRatesQuery = (): LiveRatesTargetHookReturnObject => {
-  const { target, source } = useLiveRatesProvider();
+export const useLiveRatesQuery = (
+  skip?: boolean
+): LiveRatesTargetHookReturnObject => {
+  const liveRates = useLiveRatesProvider(skip);
 
   const setQuery = (query: LiveRatesProviderQuery) => {
-    target?.dispatchEvent(
+    liveRates?.target?.dispatchEvent(
       new CustomEvent(SET_QUERY_EVENT_NAME, { detail: query })
     );
   };
 
   const closeQuery = () => {
-    source?.close();
+    liveRates?.source?.close();
   };
 
-  return { target, setQuery, closeQuery };
+  return { target: liveRates?.target || null, setQuery, closeQuery };
 };

package/src/providers/LiveRates/LiveRatesContext.tsx

@@ -12,9 +12,13 @@ export const LiveRatesContext =
 
 LiveRatesContext.displayName = 'LiveRatesContext';
 
-export const useLiveRatesProvider = () => {
+export const useLiveRatesProvider = (skip?: boolean) => {
   const liveRates = useContext(LiveRatesContext);
 
+  if (skip) {
+    return null;
+  }
+
   if (!liveRates) {
     throw new Error('Hook used outside of LiveRatesContextProvider');
   }

package/src/types/dataTypes.ts

@@ -37,4 +37,6 @@ export enum DataRecordType {
   SENTIMENT = 'sentiment',
   LOW = 'low',
   HIGH = 'high',
+  SYMBOL = 'symbol',
+  TRADE_MODE = 'tradeMode',
 }

package/test/components/Table/Table.test.tsx

@@ -21,10 +21,10 @@ const records = [
 ];
 
 const config = [
-  { displayName: 'Column 1', additionalStyles: '' },
-  { displayName: 'Column 2', additionalStyles: '' },
-  { displayName: 'Column 3', additionalStyles: '' },
-  { displayName: 'Column 4', additionalStyles: '' },
+  { displayName: 'Column 1', additionalStyles: {} },
+  { displayName: 'Column 2', additionalStyles: {} },
+  { displayName: 'Column 3', additionalStyles: {} },
+  { displayName: 'Column 4', additionalStyles: {} },
 ];
 
 const renderRow = (record: any) => (