@oanda/labs-widget-common 1.0.206 → 1.0.208
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +1636 -0
- package/dist/main/components/Table/TableCell.js +3 -1
- package/dist/main/components/Table/TableCell.js.map +1 -1
- package/dist/main/components/Table/TableHeader.js +24 -11
- package/dist/main/components/Table/TableHeader.js.map +1 -1
- package/dist/main/components/Table/columns/InstrumentColumn.js +9 -4
- package/dist/main/components/Table/columns/InstrumentColumn.js.map +1 -1
- package/dist/main/components/Table/types.js.map +1 -1
- package/dist/main/components/TableWidget/ColumnRenderer.js +15 -1
- package/dist/main/components/TableWidget/ColumnRenderer.js.map +1 -1
- package/dist/main/components/TableWidget/DataRecordRow.js +4 -2
- package/dist/main/components/TableWidget/DataRecordRow.js.map +1 -1
- package/dist/main/components/TableWidget/TableWidget.js +3 -1
- package/dist/main/components/TableWidget/TableWidget.js.map +1 -1
- package/dist/main/components/TableWidget/index.js +11 -0
- package/dist/main/components/TableWidget/index.js.map +1 -1
- package/dist/main/components/TableWidget/utils.js +4 -1
- package/dist/main/components/TableWidget/utils.js.map +1 -1
- package/dist/main/hooks/useLiveRatesQuery.js +5 -8
- package/dist/main/hooks/useLiveRatesQuery.js.map +1 -1
- package/dist/main/hooks/useVisibleLiveDataRecord.js +3 -1
- package/dist/main/hooks/useVisibleLiveDataRecord.js.map +1 -1
- package/dist/main/providers/LiveRates/LiveRatesContext.js +4 -1
- package/dist/main/providers/LiveRates/LiveRatesContext.js.map +1 -1
- package/dist/main/types/dataTypes.js +2 -0
- package/dist/main/types/dataTypes.js.map +1 -1
- package/dist/module/components/Table/TableCell.js +3 -1
- package/dist/module/components/Table/TableCell.js.map +1 -1
- package/dist/module/components/Table/TableHeader.js +24 -11
- package/dist/module/components/Table/TableHeader.js.map +1 -1
- package/dist/module/components/Table/columns/InstrumentColumn.js +9 -4
- package/dist/module/components/Table/columns/InstrumentColumn.js.map +1 -1
- package/dist/module/components/Table/types.js.map +1 -1
- package/dist/module/components/TableWidget/ColumnRenderer.js +15 -1
- package/dist/module/components/TableWidget/ColumnRenderer.js.map +1 -1
- package/dist/module/components/TableWidget/DataRecordRow.js +4 -2
- package/dist/module/components/TableWidget/DataRecordRow.js.map +1 -1
- package/dist/module/components/TableWidget/TableWidget.js +3 -1
- package/dist/module/components/TableWidget/TableWidget.js.map +1 -1
- package/dist/module/components/TableWidget/index.js +1 -0
- package/dist/module/components/TableWidget/index.js.map +1 -1
- package/dist/module/components/TableWidget/utils.js +4 -1
- package/dist/module/components/TableWidget/utils.js.map +1 -1
- package/dist/module/hooks/useLiveRatesQuery.js +5 -8
- package/dist/module/hooks/useLiveRatesQuery.js.map +1 -1
- package/dist/module/hooks/useVisibleLiveDataRecord.js +3 -1
- package/dist/module/hooks/useVisibleLiveDataRecord.js.map +1 -1
- package/dist/module/providers/LiveRates/LiveRatesContext.js +4 -1
- package/dist/module/providers/LiveRates/LiveRatesContext.js.map +1 -1
- package/dist/module/types/dataTypes.js +2 -0
- package/dist/module/types/dataTypes.js.map +1 -1
- package/dist/types/components/Table/columns/InstrumentColumn.d.ts +3 -2
- package/dist/types/components/Table/types.d.ts +11 -3
- package/dist/types/components/TableWidget/DataRecordRow.d.ts +2 -1
- package/dist/types/components/TableWidget/TableWidget.d.ts +2 -1
- package/dist/types/components/TableWidget/index.d.ts +1 -0
- package/dist/types/components/TableWidget/utils.d.ts +2 -2
- package/dist/types/hooks/useLiveRatesQuery.d.ts +1 -1
- package/dist/types/providers/LiveRates/LiveRatesContext.d.ts +1 -1
- package/dist/types/types/dataTypes.d.ts +4 -1
- package/package.json +2 -2
- package/src/components/Table/TableCell.tsx +2 -0
- package/src/components/Table/TableHeader.tsx +36 -20
- package/src/components/Table/columns/InstrumentColumn.tsx +10 -4
- package/src/components/Table/types.ts +13 -3
- package/src/components/TableWidget/ColumnRenderer.tsx +22 -0
- package/src/components/TableWidget/DataRecordRow.tsx +3 -0
- package/src/components/TableWidget/TableWidget.tsx +3 -0
- package/src/components/TableWidget/index.ts +1 -0
- package/src/components/TableWidget/utils.ts +12 -6
- package/src/hooks/useLiveRatesQuery.ts +7 -5
- package/src/hooks/useVisibleLiveDataRecord.ts +2 -0
- package/src/providers/LiveRates/LiveRatesContext.tsx +5 -1
- package/src/types/dataTypes.ts +3 -0
- package/test/components/Table/Table.test.tsx +4 -4
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"TableHeader.js","names":["useLocale","
|
|
1
|
+
{"version":3,"file":"TableHeader.js","names":["useLocale","React","useLayoutProvider","cn","TableHeader","_ref","columns","isScrolled","isError","isDark","lang","createElement","className","map","_ref2","index","displayName","additionalStyles","align","minWidth","paddingRight","key","style"],"sources":["../../../../src/components/Table/TableHeader.tsx"],"sourcesContent":["import { useLocale } from '@oanda/mono-i18n';\nimport React from 'react';\n\nimport { useLayoutProvider } from '../../providers';\nimport { cn } from '../../tailwind';\nimport type { TableHeaderProps } from './types';\n\nconst TableHeader = ({ columns, isScrolled, isError }: TableHeaderProps) => {\n const { isDark } = useLayoutProvider();\n const { lang } = useLocale();\n\n return (\n <thead data-testid=\"table-header\">\n <tr className=\"lw-h-11 lw-bg-bg-primary lw-text-text-primary\">\n {columns.map(\n (\n {\n displayName,\n additionalStyles: { align, minWidth, paddingRight },\n },\n index\n ) => (\n <th\n key={`table-header-${displayName}`}\n className={cn(\n 'lw-px-3 lw-py-0 lw-font-sans lw-text-sm lw-tracking-normal lw-font-semibold',\n {\n 'lw-sticky lw-left-0 lw-pr-3': !isError && index === 0,\n 'lw-bg-whiteWithShadow':\n !isDark && !isError && isScrolled && index === 0,\n 'lw-bg-bg-primary':\n isDark && !isError && isScrolled && index === 0,\n }\n )}\n >\n <div\n className={cn(\n align === 'right' && 'lw-text-right',\n align === 'left' && 'lw-text-left',\n align === 'center' && 'lw-text-center',\n paddingRight && 'lw-pr-4'\n )}\n style={{ minWidth }}\n >\n {lang(displayName)}\n </div>\n </th>\n )\n )}\n </tr>\n </thead>\n );\n};\n\nexport { TableHeader };\n"],"mappings":"AAAA,SAASA,SAAS,QAAQ,kBAAkB;AAC5C,OAAOC,KAAK,MAAM,OAAO;AAEzB,SAASC,iBAAiB,QAAQ,iBAAiB;AACnD,SAASC,EAAE,QAAQ,gBAAgB;AAGnC,MAAMC,WAAW,GAAGC,IAAA,IAAwD;EAAA,IAAvD;IAAEC,OAAO;IAAEC,UAAU;IAAEC;EAA0B,CAAC,GAAAH,IAAA;EACrE,MAAM;IAAEI;EAAO,CAAC,GAAGP,iBAAiB,CAAC,CAAC;EACtC,MAAM;IAAEQ;EAAK,CAAC,GAAGV,SAAS,CAAC,CAAC;EAE5B,OACEC,KAAA,CAAAU,aAAA;IAAO,eAAY;EAAc,GAC/BV,KAAA,CAAAU,aAAA;IAAIC,SAAS,EAAC;EAA+C,GAC1DN,OAAO,CAACO,GAAG,CACV,CAAAC,KAAA,EAKEC,KAAK;IAAA,IAJL;MACEC,WAAW;MACXC,gBAAgB,EAAE;QAAEC,KAAK;QAAEC,QAAQ;QAAEC;MAAa;IACpD,CAAC,GAAAN,KAAA;IAAA,OAGDb,KAAA,CAAAU,aAAA;MACEU,GAAG,EAAE,gBAAgBL,WAAW,EAAG;MACnCJ,SAAS,EAAET,EAAE,CACX,6EAA6E,EAC7E;QACE,6BAA6B,EAAE,CAACK,OAAO,IAAIO,KAAK,KAAK,CAAC;QACtD,uBAAuB,EACrB,CAACN,MAAM,IAAI,CAACD,OAAO,IAAID,UAAU,IAAIQ,KAAK,KAAK,CAAC;QAClD,kBAAkB,EAChBN,MAAM,IAAI,CAACD,OAAO,IAAID,UAAU,IAAIQ,KAAK,KAAK;MAClD,CACF;IAAE,GAEFd,KAAA,CAAAU,aAAA;MACEC,SAAS,EAAET,EAAE,CACXe,KAAK,KAAK,OAAO,IAAI,eAAe,EACpCA,KAAK,KAAK,MAAM,IAAI,cAAc,EAClCA,KAAK,KAAK,QAAQ,IAAI,gBAAgB,EACtCE,YAAY,IAAI,SAClB,CAAE;MACFE,KAAK,EAAE;QAAEH;MAAS;IAAE,GAEnBT,IAAI,CAACM,WAAW,CACd,CACH,CAAC;EAAA,CAET,CACE,CACC,CAAC;AAEZ,CAAC;AAED,SAASZ,WAAW","ignoreList":[]}
|
|
@@ -7,18 +7,23 @@ export const InstrumentColumn = _ref => {
|
|
|
7
7
|
let {
|
|
8
8
|
isDark,
|
|
9
9
|
isScrolled,
|
|
10
|
-
tooltipId,
|
|
11
10
|
isLoading,
|
|
12
|
-
displayName
|
|
11
|
+
displayName,
|
|
12
|
+
width,
|
|
13
|
+
tooltipId
|
|
13
14
|
} = _ref;
|
|
14
15
|
return React.createElement(TableCell, {
|
|
15
16
|
key: DataRecordType.INSTRUMENT,
|
|
16
|
-
classNames: cn('lw-font-bold', {
|
|
17
|
+
classNames: cn('lw-font-bold lw-overflow-hidden', {
|
|
17
18
|
'[&>*:first-child]:lw-border-r [&>*:first-child]:lw-border-border-primary': isDark && isScrolled
|
|
18
19
|
}),
|
|
19
20
|
isLoading: isLoading,
|
|
20
21
|
type: "text"
|
|
21
|
-
}, React.createElement(
|
|
22
|
+
}, width ? React.createElement("div", {
|
|
23
|
+
style: {
|
|
24
|
+
maxWidth: width
|
|
25
|
+
}
|
|
26
|
+
}, displayName) : React.createElement(Truncate, {
|
|
22
27
|
maxWidth: 130,
|
|
23
28
|
text: displayName,
|
|
24
29
|
tooltipId: tooltipId
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"InstrumentColumn.js","names":["React","cn","DataRecordType","Truncate","TableCell","InstrumentColumn","_ref","isDark","isScrolled","
|
|
1
|
+
{"version":3,"file":"InstrumentColumn.js","names":["React","cn","DataRecordType","Truncate","TableCell","InstrumentColumn","_ref","isDark","isScrolled","isLoading","displayName","width","tooltipId","createElement","key","INSTRUMENT","classNames","type","style","maxWidth","text"],"sources":["../../../../../src/components/Table/columns/InstrumentColumn.tsx"],"sourcesContent":["import React from 'react';\n\nimport { cn } from '../../../tailwind';\nimport { DataRecordType } from '../../../types';\nimport { Truncate } from '../../Truncate';\nimport { TableCell } from '../TableCell';\n\ninterface InstrumentColumnProps {\n displayName: string;\n isLoading: boolean;\n isDark?: boolean;\n isScrolled?: boolean;\n width?: string;\n tooltipId: string;\n}\n\nexport const InstrumentColumn = ({\n isDark,\n isScrolled,\n isLoading,\n displayName,\n width,\n tooltipId,\n}: InstrumentColumnProps) => (\n <TableCell\n key={DataRecordType.INSTRUMENT}\n classNames={cn('lw-font-bold lw-overflow-hidden', {\n '[&>*:first-child]:lw-border-r [&>*:first-child]:lw-border-border-primary':\n isDark && isScrolled,\n })}\n isLoading={isLoading}\n type=\"text\"\n >\n {width ? (\n <div style={{ maxWidth: width }}>{displayName}</div>\n ) : (\n <Truncate maxWidth={130} text={displayName} tooltipId={tooltipId} />\n )}\n </TableCell>\n);\n"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AAEzB,SAASC,EAAE,QAAQ,mBAAmB;AACtC,SAASC,cAAc,QAAQ,gBAAgB;AAC/C,SAASC,QAAQ,QAAQ,gBAAgB;AACzC,SAASC,SAAS,QAAQ,cAAc;AAWxC,OAAO,MAAMC,gBAAgB,GAAGC,IAAA;EAAA,IAAC;IAC/BC,MAAM;IACNC,UAAU;IACVC,SAAS;IACTC,WAAW;IACXC,KAAK;IACLC;EACqB,CAAC,GAAAN,IAAA;EAAA,OACtBN,KAAA,CAAAa,aAAA,CAACT,SAAS;IACRU,GAAG,EAAEZ,cAAc,CAACa,UAAW;IAC/BC,UAAU,EAAEf,EAAE,CAAC,iCAAiC,EAAE;MAChD,0EAA0E,EACxEM,MAAM,IAAIC;IACd,CAAC,CAAE;IACHC,SAAS,EAAEA,SAAU;IACrBQ,IAAI,EAAC;EAAM,GAEVN,KAAK,GACJX,KAAA,CAAAa,aAAA;IAAKK,KAAK,EAAE;MAAEC,QAAQ,EAAER;IAAM;EAAE,GAAED,WAAiB,CAAC,GAEpDV,KAAA,CAAAa,aAAA,CAACV,QAAQ;IAACgB,QAAQ,EAAE,GAAI;IAACC,IAAI,EAAEV,WAAY;IAACE,SAAS,EAAEA;EAAU,CAAE,CAE5D,CAAC;AAAA,CACb","ignoreList":[]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"types.js","names":[],"sources":["../../../../src/components/Table/types.ts"],"sourcesContent":["import type { LoaderSize } from '@oanda/labs-widget-common';\n\nexport interface HeaderColumns {\n displayName: string;\n additionalStyles:
|
|
1
|
+
{"version":3,"file":"types.js","names":[],"sources":["../../../../src/components/Table/types.ts"],"sourcesContent":["import type { DataRecordType, LoaderSize } from '@oanda/labs-widget-common';\n\nexport interface HeaderColumnsAdditionalStyles {\n align?: 'left' | 'right' | 'center';\n minWidth?: string;\n paddingRight?: boolean;\n}\n\nexport interface HeaderColumns {\n displayName: string;\n additionalStyles: HeaderColumnsAdditionalStyles;\n}\n\nexport interface TableProps<T> {\n emptyRowsCount?: number;\n isError?: boolean;\n records: T[];\n headerConfig: HeaderColumns[];\n renderRow: (record: T, index: number, isScrolled: boolean) => React.ReactNode;\n}\n\nexport interface TableRowProps {\n hasBackgroundColor: boolean;\n isScrolled?: boolean;\n children?: React.ReactNode;\n}\n\nexport interface TableCellProps {\n children: React.ReactNode;\n isLoading?: boolean;\n isError?: boolean;\n type?: 'text' | 'textCentered' | 'number';\n loaderSize?: LoaderSize;\n classNames?: string;\n additionalPaddingRight?: boolean;\n}\n\nexport interface TableHeaderProps {\n columns: HeaderColumns[];\n isScrolled: boolean;\n isError: boolean;\n}\n\nexport type HeaderConfigType = {\n [Key in DataRecordType]?: HeaderColumns;\n};\n"],"mappings":"","ignoreList":[]}
|
|
@@ -58,7 +58,21 @@ export const ColumnRenderer = _ref => {
|
|
|
58
58
|
isError: isError,
|
|
59
59
|
isLoading: isLoading || record.low === undefined,
|
|
60
60
|
loaderSize: LoaderSize.sm
|
|
61
|
-
}, React.createElement("span", null, record.low))
|
|
61
|
+
}, React.createElement("span", null, record.low)),
|
|
62
|
+
[DataRecordType.SYMBOL]: () => React.createElement(TableCell, {
|
|
63
|
+
key: DataRecordType.SYMBOL,
|
|
64
|
+
isError: isError,
|
|
65
|
+
isLoading: isLoading,
|
|
66
|
+
loaderSize: LoaderSize.md,
|
|
67
|
+
type: "textCentered"
|
|
68
|
+
}, React.createElement("span", null, record.instrument)),
|
|
69
|
+
[DataRecordType.TRADE_MODE]: () => React.createElement(TableCell, {
|
|
70
|
+
key: DataRecordType.TRADE_MODE,
|
|
71
|
+
additionalPaddingRight: true,
|
|
72
|
+
isError: isError,
|
|
73
|
+
isLoading: isLoading,
|
|
74
|
+
loaderSize: LoaderSize.sm
|
|
75
|
+
}, React.createElement("span", null, record.tradeMode))
|
|
62
76
|
};
|
|
63
77
|
return activeColumns.map(item => React.createElement(React.Fragment, {
|
|
64
78
|
key: item
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ColumnRenderer.js","names":["React","DataRecordType","LoaderSize","ChartColumn","DailyChangeColumn","PriceColumn","SentimentColumn","SpreadColumn","TableCell","ColumnRenderer","_ref","record","isLoading","isChartLoading","isError","activeColumns","chart","allColumns","SELL","createElement","column","displayPrecision","price","sell","priceMovement","sellPriceMovement","BUY","buy","buyPriceMovement","DAILY_CHANGE","dailyPercentChange","CHART","percentChange","SPREAD","value","spread","SENTIMENT","sentiment","HIGH","key","high","undefined","loaderSize","sm","LOW","low","map","item","Fragment"],"sources":["../../../../src/components/TableWidget/ColumnRenderer.tsx"],"sourcesContent":["import React from 'react';\n\nimport { type DataRecord, DataRecordType } from '../../types';\nimport { LoaderSize } from '../Loader';\nimport {\n ChartColumn,\n DailyChangeColumn,\n PriceColumn,\n SentimentColumn,\n SpreadColumn,\n TableCell,\n} from '../Table';\n\ninterface ColumnRendererProps {\n record: DataRecord;\n chart?: number[];\n isLoading: boolean;\n isChartLoading?: boolean;\n isError: boolean;\n activeColumns: DataRecordType[];\n}\n\nexport const ColumnRenderer = ({\n record,\n isLoading,\n isChartLoading,\n isError,\n activeColumns,\n chart,\n}: ColumnRendererProps) => {\n const allColumns: Partial<Record<DataRecordType, () => JSX.Element>> = {\n [DataRecordType.SELL]: () => (\n <PriceColumn\n column={DataRecordType.SELL}\n displayPrecision={record.displayPrecision}\n isError={isError}\n isLoading={isLoading}\n price={record.sell}\n priceMovement={record.sellPriceMovement}\n />\n ),\n [DataRecordType.BUY]: () => (\n <PriceColumn\n column={DataRecordType.BUY}\n displayPrecision={record.displayPrecision}\n isError={isError}\n isLoading={isLoading}\n price={record.buy}\n priceMovement={record.buyPriceMovement}\n />\n ),\n [DataRecordType.DAILY_CHANGE]: () => (\n <DailyChangeColumn\n dailyPercentChange={record.dailyPercentChange}\n isError={isError}\n isLoading={isLoading}\n />\n ),\n [DataRecordType.CHART]: () => (\n <ChartColumn\n chart={chart ?? []}\n isLoading={!!isChartLoading}\n percentChange={record.dailyPercentChange}\n />\n ),\n [DataRecordType.SPREAD]: () => (\n <SpreadColumn\n isError={isError}\n isLoading={isLoading}\n value={record.spread}\n />\n ),\n [DataRecordType.SENTIMENT]: () => (\n <SentimentColumn isLoading={isLoading} sentiment={record.sentiment} />\n ),\n [DataRecordType.HIGH]: () => (\n <TableCell\n key={DataRecordType.SPREAD}\n isError={isError}\n isLoading={isLoading || record.high === undefined}\n loaderSize={LoaderSize.sm}\n >\n <span>{record.high}</span>\n </TableCell>\n ),\n [DataRecordType.LOW]: () => (\n <TableCell\n key={DataRecordType.LOW}\n isError={isError}\n isLoading={isLoading || record.low === undefined}\n loaderSize={LoaderSize.sm}\n >\n <span>{record.low}</span>\n </TableCell>\n ),\n };\n\n return activeColumns.map((item) => (\n <React.Fragment key={item}>{allColumns[item]?.() ?? null}</React.Fragment>\n ));\n};\n"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AAEzB,SAA0BC,cAAc,QAAQ,aAAa;AAC7D,SAASC,UAAU,QAAQ,WAAW;AACtC,SACEC,WAAW,EACXC,iBAAiB,EACjBC,WAAW,EACXC,eAAe,EACfC,YAAY,EACZC,SAAS,QACJ,UAAU;AAWjB,OAAO,MAAMC,cAAc,GAAGC,IAAA,IAOH;EAAA,IAPI;IAC7BC,MAAM;IACNC,SAAS;IACTC,cAAc;IACdC,OAAO;IACPC,aAAa;IACbC;EACmB,CAAC,GAAAN,IAAA;EACpB,MAAMO,UAA8D,GAAG;IACrE,CAAChB,cAAc,CAACiB,IAAI,GAAG,MACrBlB,KAAA,CAAAmB,aAAA,CAACd,WAAW;MACVe,MAAM,EAAEnB,cAAc,CAACiB,IAAK;MAC5BG,gBAAgB,EAAEV,MAAM,CAACU,gBAAiB;MAC1CP,OAAO,EAAEA,OAAQ;MACjBF,SAAS,EAAEA,SAAU;MACrBU,KAAK,EAAEX,MAAM,CAACY,IAAK;MACnBC,aAAa,EAAEb,MAAM,CAACc;IAAkB,CACzC,CACF;IACD,CAACxB,cAAc,CAACyB,GAAG,GAAG,MACpB1B,KAAA,CAAAmB,aAAA,CAACd,WAAW;MACVe,MAAM,EAAEnB,cAAc,CAACyB,GAAI;MAC3BL,gBAAgB,EAAEV,MAAM,CAACU,gBAAiB;MAC1CP,OAAO,EAAEA,OAAQ;MACjBF,SAAS,EAAEA,SAAU;MACrBU,KAAK,EAAEX,MAAM,CAACgB,GAAI;MAClBH,aAAa,EAAEb,MAAM,CAACiB;IAAiB,CACxC,CACF;IACD,CAAC3B,cAAc,CAAC4B,YAAY,GAAG,MAC7B7B,KAAA,CAAAmB,aAAA,CAACf,iBAAiB;MAChB0B,kBAAkB,EAAEnB,MAAM,CAACmB,kBAAmB;MAC9ChB,OAAO,EAAEA,OAAQ;MACjBF,SAAS,EAAEA;IAAU,CACtB,CACF;IACD,CAACX,cAAc,CAAC8B,KAAK,GAAG,MACtB/B,KAAA,CAAAmB,aAAA,CAAChB,WAAW;MACVa,KAAK,EAAEA,KAAK,IAAI,EAAG;MACnBJ,SAAS,EAAE,CAAC,CAACC,cAAe;MAC5BmB,aAAa,EAAErB,MAAM,CAACmB;IAAmB,CAC1C,CACF;IACD,CAAC7B,cAAc,CAACgC,MAAM,GAAG,MACvBjC,KAAA,CAAAmB,aAAA,CAACZ,YAAY;MACXO,OAAO,EAAEA,OAAQ;MACjBF,SAAS,EAAEA,SAAU;MACrBsB,KAAK,EAAEvB,MAAM,CAACwB;IAAO,CACtB,CACF;IACD,CAAClC,cAAc,CAACmC,SAAS,GAAG,MAC1BpC,KAAA,CAAAmB,aAAA,CAACb,eAAe;MAACM,SAAS,EAAEA,SAAU;MAACyB,SAAS,EAAE1B,MAAM,CAAC0B;IAAU,CAAE,CACtE;IACD,CAACpC,cAAc,CAACqC,IAAI,GAAG,MACrBtC,KAAA,CAAAmB,aAAA,CAACX,SAAS;MACR+B,GAAG,EAAEtC,cAAc,CAACgC,MAAO;MAC3BnB,OAAO,EAAEA,OAAQ;MACjBF,SAAS,EAAEA,SAAS,IAAID,MAAM,CAAC6B,IAAI,KAAKC,SAAU;MAClDC,UAAU,EAAExC,UAAU,CAACyC;IAAG,GAE1B3C,KAAA,CAAAmB,aAAA,eAAOR,MAAM,CAAC6B,IAAW,CAChB,CACZ;IACD,CAACvC,cAAc,CAAC2C,GAAG,GAAG,MACpB5C,KAAA,CAAAmB,aAAA,CAACX,SAAS;MACR+B,GAAG,EAAEtC,cAAc,CAAC2C,GAAI;MACxB9B,OAAO,EAAEA,OAAQ;MACjBF,SAAS,EAAEA,SAAS,IAAID,MAAM,CAACkC,GAAG,KAAKJ,SAAU;MACjDC,UAAU,EAAExC,UAAU,CAACyC;IAAG,GAE1B3C,KAAA,CAAAmB,aAAA,eAAOR,MAAM,CAACkC,GAAU,CACf;EAEf,CAAC;EAED,
|
|
1
|
+
{"version":3,"file":"ColumnRenderer.js","names":["React","DataRecordType","LoaderSize","ChartColumn","DailyChangeColumn","PriceColumn","SentimentColumn","SpreadColumn","TableCell","ColumnRenderer","_ref","record","isLoading","isChartLoading","isError","activeColumns","chart","allColumns","SELL","createElement","column","displayPrecision","price","sell","priceMovement","sellPriceMovement","BUY","buy","buyPriceMovement","DAILY_CHANGE","dailyPercentChange","CHART","percentChange","SPREAD","value","spread","SENTIMENT","sentiment","HIGH","key","high","undefined","loaderSize","sm","LOW","low","SYMBOL","md","type","instrument","TRADE_MODE","additionalPaddingRight","tradeMode","map","item","Fragment"],"sources":["../../../../src/components/TableWidget/ColumnRenderer.tsx"],"sourcesContent":["import React from 'react';\n\nimport { type DataRecord, DataRecordType } from '../../types';\nimport { LoaderSize } from '../Loader';\nimport {\n ChartColumn,\n DailyChangeColumn,\n PriceColumn,\n SentimentColumn,\n SpreadColumn,\n TableCell,\n} from '../Table';\n\ninterface ColumnRendererProps {\n record: DataRecord;\n chart?: number[];\n isLoading: boolean;\n isChartLoading?: boolean;\n isError: boolean;\n activeColumns: DataRecordType[];\n}\n\nexport const ColumnRenderer = ({\n record,\n isLoading,\n isChartLoading,\n isError,\n activeColumns,\n chart,\n}: ColumnRendererProps) => {\n const allColumns: Partial<Record<DataRecordType, () => JSX.Element>> = {\n [DataRecordType.SELL]: () => (\n <PriceColumn\n column={DataRecordType.SELL}\n displayPrecision={record.displayPrecision}\n isError={isError}\n isLoading={isLoading}\n price={record.sell}\n priceMovement={record.sellPriceMovement}\n />\n ),\n [DataRecordType.BUY]: () => (\n <PriceColumn\n column={DataRecordType.BUY}\n displayPrecision={record.displayPrecision}\n isError={isError}\n isLoading={isLoading}\n price={record.buy}\n priceMovement={record.buyPriceMovement}\n />\n ),\n [DataRecordType.DAILY_CHANGE]: () => (\n <DailyChangeColumn\n dailyPercentChange={record.dailyPercentChange}\n isError={isError}\n isLoading={isLoading}\n />\n ),\n [DataRecordType.CHART]: () => (\n <ChartColumn\n chart={chart ?? []}\n isLoading={!!isChartLoading}\n percentChange={record.dailyPercentChange}\n />\n ),\n [DataRecordType.SPREAD]: () => (\n <SpreadColumn\n isError={isError}\n isLoading={isLoading}\n value={record.spread}\n />\n ),\n [DataRecordType.SENTIMENT]: () => (\n <SentimentColumn isLoading={isLoading} sentiment={record.sentiment} />\n ),\n [DataRecordType.HIGH]: () => (\n <TableCell\n key={DataRecordType.SPREAD}\n isError={isError}\n isLoading={isLoading || record.high === undefined}\n loaderSize={LoaderSize.sm}\n >\n <span>{record.high}</span>\n </TableCell>\n ),\n [DataRecordType.LOW]: () => (\n <TableCell\n key={DataRecordType.LOW}\n isError={isError}\n isLoading={isLoading || record.low === undefined}\n loaderSize={LoaderSize.sm}\n >\n <span>{record.low}</span>\n </TableCell>\n ),\n [DataRecordType.SYMBOL]: () => (\n <TableCell\n key={DataRecordType.SYMBOL}\n isError={isError}\n isLoading={isLoading}\n loaderSize={LoaderSize.md}\n type=\"textCentered\"\n >\n <span>{record.instrument}</span>\n </TableCell>\n ),\n [DataRecordType.TRADE_MODE]: () => (\n <TableCell\n key={DataRecordType.TRADE_MODE}\n additionalPaddingRight={true}\n isError={isError}\n isLoading={isLoading}\n loaderSize={LoaderSize.sm}\n >\n <span>{record.tradeMode}</span>\n </TableCell>\n ),\n };\n\n return activeColumns.map((item) => (\n <React.Fragment key={item}>{allColumns[item]?.() ?? null}</React.Fragment>\n ));\n};\n"],"mappings":"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","ignoreList":[]}
|
|
@@ -13,7 +13,8 @@ export const DataRecordRow = _ref => {
|
|
|
13
13
|
target,
|
|
14
14
|
isScrolled,
|
|
15
15
|
toolTipId,
|
|
16
|
-
activeColumns
|
|
16
|
+
activeColumns,
|
|
17
|
+
instrumentColumnWidth
|
|
17
18
|
} = _ref;
|
|
18
19
|
const {
|
|
19
20
|
isDark
|
|
@@ -32,7 +33,8 @@ export const DataRecordRow = _ref => {
|
|
|
32
33
|
isDark: isDark,
|
|
33
34
|
isLoading: isLoading,
|
|
34
35
|
isScrolled: isScrolled,
|
|
35
|
-
tooltipId: toolTipId
|
|
36
|
+
tooltipId: toolTipId,
|
|
37
|
+
width: instrumentColumnWidth
|
|
36
38
|
}), React.createElement(ColumnRenderer, {
|
|
37
39
|
activeColumns: activeColumns,
|
|
38
40
|
chart: record.chart,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"DataRecordRow.js","names":["React","useVisibleLiveDataRecord","useLayoutProvider","InstrumentColumn","TableRow","ColumnRenderer","DataRecordRow","_ref","record","isLoading","isChartLoading","hasBackgroundColor","target","isScrolled","toolTipId","activeColumns","isDark","updatedRecord","error","ref","instrument","createElement","displayName","tooltipId","chart","isError"],"sources":["../../../../src/components/TableWidget/DataRecordRow.tsx"],"sourcesContent":["import React from 'react';\n\nimport { useVisibleLiveDataRecord } from '../../hooks';\nimport { useLayoutProvider } from '../../providers';\nimport type { DataRecord, DataRecordType } from '../../types';\nimport { InstrumentColumn } from '../Table/columns';\nimport { TableRow } from '../Table/TableRow';\nimport { ColumnRenderer } from './ColumnRenderer';\n\nexport interface DataRecordRowProps {\n isLoading: boolean;\n isChartLoading?: boolean;\n record: DataRecord;\n hasBackgroundColor: boolean;\n target: EventTarget | null;\n isScrolled?: boolean;\n toolTipId: string;\n activeColumns: DataRecordType[];\n}\n\nexport const DataRecordRow = ({\n record,\n isLoading,\n isChartLoading,\n hasBackgroundColor,\n target,\n isScrolled,\n toolTipId,\n activeColumns,\n}: DataRecordRowProps) => {\n const { isDark } = useLayoutProvider();\n\n const { updatedRecord, error, ref } = useVisibleLiveDataRecord(\n record,\n record.instrument ? target : null\n );\n\n return (\n <TableRow\n ref={ref}\n hasBackgroundColor={hasBackgroundColor}\n isScrolled={isScrolled}\n >\n <InstrumentColumn\n displayName={record.displayName}\n isDark={isDark}\n isLoading={isLoading}\n isScrolled={isScrolled}\n tooltipId={toolTipId}\n />\n <ColumnRenderer\n activeColumns={activeColumns}\n chart={record.chart}\n isChartLoading={isChartLoading}\n isError={!!error}\n isLoading={isLoading}\n record={updatedRecord}\n />\n </TableRow>\n );\n};\n"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AAEzB,SAASC,wBAAwB,QAAQ,aAAa;AACtD,SAASC,iBAAiB,QAAQ,iBAAiB;AAEnD,SAASC,gBAAgB,QAAQ,kBAAkB;AACnD,SAASC,QAAQ,QAAQ,mBAAmB;AAC5C,SAASC,cAAc,QAAQ,kBAAkB;
|
|
1
|
+
{"version":3,"file":"DataRecordRow.js","names":["React","useVisibleLiveDataRecord","useLayoutProvider","InstrumentColumn","TableRow","ColumnRenderer","DataRecordRow","_ref","record","isLoading","isChartLoading","hasBackgroundColor","target","isScrolled","toolTipId","activeColumns","instrumentColumnWidth","isDark","updatedRecord","error","ref","instrument","createElement","displayName","tooltipId","width","chart","isError"],"sources":["../../../../src/components/TableWidget/DataRecordRow.tsx"],"sourcesContent":["import React from 'react';\n\nimport { useVisibleLiveDataRecord } from '../../hooks';\nimport { useLayoutProvider } from '../../providers';\nimport type { DataRecord, DataRecordType } from '../../types';\nimport { InstrumentColumn } from '../Table/columns';\nimport { TableRow } from '../Table/TableRow';\nimport { ColumnRenderer } from './ColumnRenderer';\n\nexport interface DataRecordRowProps {\n isLoading: boolean;\n isChartLoading?: boolean;\n record: DataRecord;\n hasBackgroundColor: boolean;\n target: EventTarget | null;\n isScrolled?: boolean;\n toolTipId: string;\n instrumentColumnWidth?: string;\n activeColumns: DataRecordType[];\n}\n\nexport const DataRecordRow = ({\n record,\n isLoading,\n isChartLoading,\n hasBackgroundColor,\n target,\n isScrolled,\n toolTipId,\n activeColumns,\n instrumentColumnWidth,\n}: DataRecordRowProps) => {\n const { isDark } = useLayoutProvider();\n\n const { updatedRecord, error, ref } = useVisibleLiveDataRecord(\n record,\n record.instrument ? target : null\n );\n\n return (\n <TableRow\n ref={ref}\n hasBackgroundColor={hasBackgroundColor}\n isScrolled={isScrolled}\n >\n <InstrumentColumn\n displayName={record.displayName}\n isDark={isDark}\n isLoading={isLoading}\n isScrolled={isScrolled}\n tooltipId={toolTipId}\n width={instrumentColumnWidth}\n />\n <ColumnRenderer\n activeColumns={activeColumns}\n chart={record.chart}\n isChartLoading={isChartLoading}\n isError={!!error}\n isLoading={isLoading}\n record={updatedRecord}\n />\n </TableRow>\n );\n};\n"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AAEzB,SAASC,wBAAwB,QAAQ,aAAa;AACtD,SAASC,iBAAiB,QAAQ,iBAAiB;AAEnD,SAASC,gBAAgB,QAAQ,kBAAkB;AACnD,SAASC,QAAQ,QAAQ,mBAAmB;AAC5C,SAASC,cAAc,QAAQ,kBAAkB;AAcjD,OAAO,MAAMC,aAAa,GAAGC,IAAA,IAUH;EAAA,IAVI;IAC5BC,MAAM;IACNC,SAAS;IACTC,cAAc;IACdC,kBAAkB;IAClBC,MAAM;IACNC,UAAU;IACVC,SAAS;IACTC,aAAa;IACbC;EACkB,CAAC,GAAAT,IAAA;EACnB,MAAM;IAAEU;EAAO,CAAC,GAAGf,iBAAiB,CAAC,CAAC;EAEtC,MAAM;IAAEgB,aAAa;IAAEC,KAAK;IAAEC;EAAI,CAAC,GAAGnB,wBAAwB,CAC5DO,MAAM,EACNA,MAAM,CAACa,UAAU,GAAGT,MAAM,GAAG,IAC/B,CAAC;EAED,OACEZ,KAAA,CAAAsB,aAAA,CAAClB,QAAQ;IACPgB,GAAG,EAAEA,GAAI;IACTT,kBAAkB,EAAEA,kBAAmB;IACvCE,UAAU,EAAEA;EAAW,GAEvBb,KAAA,CAAAsB,aAAA,CAACnB,gBAAgB;IACfoB,WAAW,EAAEf,MAAM,CAACe,WAAY;IAChCN,MAAM,EAAEA,MAAO;IACfR,SAAS,EAAEA,SAAU;IACrBI,UAAU,EAAEA,UAAW;IACvBW,SAAS,EAAEV,SAAU;IACrBW,KAAK,EAAET;EAAsB,CAC9B,CAAC,EACFhB,KAAA,CAAAsB,aAAA,CAACjB,cAAc;IACbU,aAAa,EAAEA,aAAc;IAC7BW,KAAK,EAAElB,MAAM,CAACkB,KAAM;IACpBhB,cAAc,EAAEA,cAAe;IAC/BiB,OAAO,EAAE,CAAC,CAACR,KAAM;IACjBV,SAAS,EAAEA,SAAU;IACrBD,MAAM,EAAEU;EAAc,CACvB,CACO,CAAC;AAEf,CAAC","ignoreList":[]}
|
|
@@ -25,7 +25,8 @@ export const TableWidget = _ref => {
|
|
|
25
25
|
timestamp,
|
|
26
26
|
pageNumber,
|
|
27
27
|
count,
|
|
28
|
-
viewType
|
|
28
|
+
viewType,
|
|
29
|
+
instrumentColumnWidth
|
|
29
30
|
} = _ref;
|
|
30
31
|
const {
|
|
31
32
|
lang
|
|
@@ -51,6 +52,7 @@ export const TableWidget = _ref => {
|
|
|
51
52
|
key: `row_${index}`,
|
|
52
53
|
activeColumns: activeColumns,
|
|
53
54
|
hasBackgroundColor: index % 2 === 0,
|
|
55
|
+
instrumentColumnWidth: instrumentColumnWidth,
|
|
54
56
|
isChartLoading: isChartLoading,
|
|
55
57
|
isLoading: isLoading,
|
|
56
58
|
isScrolled: isScrolled,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"TableWidget.js","names":["useLocale","React","useLayoutProvider","cn","Size","LastUpdated","Table","Tooltip","CardRecordRow","Cards","DataRecordRow","TableWidget","_ref","testId","toolTipId","PaginationComponent","hasError","TabsComponent","headerColumns","records","target","isLoading","isChartLoading","activeColumns","timestamp","pageNumber","count","viewType","lang","size","isDesktop","DESKTOP","isTable","createElement","className","headerConfig","isError","renderRow","record","index","isScrolled","key","hasBackgroundColor","renderCard","_ref2","idx","isLast","tooltipId","startIndex","id","labelCallback"],"sources":["../../../../src/components/TableWidget/TableWidget.tsx"],"sourcesContent":["import { useLocale } from '@oanda/mono-i18n';\nimport type { ReactElement } from 'react';\nimport React from 'react';\n\nimport { useLayoutProvider } from '../../providers';\nimport { cn } from '../../tailwind';\nimport type { DataRecord, DataRecordType } from '../../types';\nimport { Size } from '../../types';\nimport { LastUpdated } from '../LastUpdated';\nimport type { Pagination, PaginationProps } from '../Pagination';\nimport type { HeaderColumns } from '../Table';\nimport { Table } from '../Table';\nimport type { Tabs } from '../Tabs';\nimport type { TabsProps } from '../Tabs/types';\nimport { Tooltip } from '../Tooltip';\nimport { CardRecordRow } from './CardRecordRow';\nimport { Cards } from './Cards';\nimport { DataRecordRow } from './DataRecordRow';\n\ninterface TableWidgetProps<TTabs> {\n testId: string;\n toolTipId: string;\n hasError?: boolean;\n TabsComponent?: ReactElement<TabsProps<TTabs>, typeof Tabs<TTabs>>;\n PaginationComponent?: ReactElement<PaginationProps, typeof Pagination>;\n headerColumns: HeaderColumns[];\n records: DataRecord[];\n target: EventTarget | null;\n isLoading: boolean;\n isChartLoading?: boolean;\n activeColumns: DataRecordType[];\n timestamp?: string;\n pageNumber: number;\n count: number;\n viewType?: 'table' | 'cards';\n}\n\nexport const TableWidget = <TTabs,>({\n testId,\n toolTipId,\n PaginationComponent,\n hasError,\n TabsComponent,\n headerColumns,\n records,\n target,\n isLoading,\n isChartLoading,\n activeColumns,\n timestamp,\n pageNumber,\n count,\n viewType,\n}: TableWidgetProps<TTabs>) => {\n const { lang } = useLocale();\n const { size } = useLayoutProvider();\n const isDesktop = size === Size.DESKTOP;\n const isTable = viewType ? viewType === 'table' : isDesktop;\n\n if (!size) {\n return null;\n }\n\n return (\n <div\n className=\"lw-relative lw-text-sm lw-tracking-normal lw-text-text-primary\"\n data-testid={testId}\n >\n {TabsComponent}\n\n {isTable ? (\n <div className=\"lw-border lw-border-solid lw-border-border-primary\">\n <Table<DataRecord>\n headerConfig={headerColumns}\n isError={hasError}\n records={records}\n renderRow={(record, index, isScrolled) => (\n <DataRecordRow\n key={`row_${index}`}\n activeColumns={activeColumns}\n hasBackgroundColor={index % 2 === 0}\n isChartLoading={isChartLoading}\n isLoading={isLoading}\n isScrolled={isScrolled}\n record={record}\n target={target}\n toolTipId={toolTipId}\n />\n )}\n />\n </div>\n ) : (\n <Cards\n isError={hasError}\n records={records}\n renderCard={({ record, idx, isLast }) => (\n <CardRecordRow\n activeColumns={activeColumns}\n index={idx}\n isChartLoading={isChartLoading}\n isLast={isLast}\n isLoading={isLoading}\n record={record}\n target={target}\n tooltipId={toolTipId}\n />\n )}\n startIndex={pageNumber * count}\n />\n )}\n\n {PaginationComponent && !hasError && (\n <div\n className={cn('lw-border-solid lw-border-border-primary', {\n 'lw-border-x lw-border-b': isDesktop,\n })}\n >\n {PaginationComponent}\n </div>\n )}\n\n <Tooltip id={toolTipId} />\n\n {!hasError && timestamp && (\n <div className=\"lw-mt-2 lw-h-8\">\n <LastUpdated labelCallback={lang} timestamp={timestamp} />\n </div>\n )}\n </div>\n );\n};\n"],"mappings":"AAAA,SAASA,SAAS,QAAQ,kBAAkB;AAE5C,OAAOC,KAAK,MAAM,OAAO;AAEzB,SAASC,iBAAiB,QAAQ,iBAAiB;AACnD,SAASC,EAAE,QAAQ,gBAAgB;AAEnC,SAASC,IAAI,QAAQ,aAAa;AAClC,SAASC,WAAW,QAAQ,gBAAgB;AAG5C,SAASC,KAAK,QAAQ,UAAU;AAGhC,SAASC,OAAO,QAAQ,YAAY;AACpC,SAASC,aAAa,QAAQ,iBAAiB;AAC/C,SAASC,KAAK,QAAQ,SAAS;AAC/B,SAASC,aAAa,QAAQ,iBAAiB;
|
|
1
|
+
{"version":3,"file":"TableWidget.js","names":["useLocale","React","useLayoutProvider","cn","Size","LastUpdated","Table","Tooltip","CardRecordRow","Cards","DataRecordRow","TableWidget","_ref","testId","toolTipId","PaginationComponent","hasError","TabsComponent","headerColumns","records","target","isLoading","isChartLoading","activeColumns","timestamp","pageNumber","count","viewType","instrumentColumnWidth","lang","size","isDesktop","DESKTOP","isTable","createElement","className","headerConfig","isError","renderRow","record","index","isScrolled","key","hasBackgroundColor","renderCard","_ref2","idx","isLast","tooltipId","startIndex","id","labelCallback"],"sources":["../../../../src/components/TableWidget/TableWidget.tsx"],"sourcesContent":["import { useLocale } from '@oanda/mono-i18n';\nimport type { ReactElement } from 'react';\nimport React from 'react';\n\nimport { useLayoutProvider } from '../../providers';\nimport { cn } from '../../tailwind';\nimport type { DataRecord, DataRecordType } from '../../types';\nimport { Size } from '../../types';\nimport { LastUpdated } from '../LastUpdated';\nimport type { Pagination, PaginationProps } from '../Pagination';\nimport type { HeaderColumns } from '../Table';\nimport { Table } from '../Table';\nimport type { Tabs } from '../Tabs';\nimport type { TabsProps } from '../Tabs/types';\nimport { Tooltip } from '../Tooltip';\nimport { CardRecordRow } from './CardRecordRow';\nimport { Cards } from './Cards';\nimport { DataRecordRow } from './DataRecordRow';\n\ninterface TableWidgetProps<TTabs> {\n testId: string;\n toolTipId: string;\n hasError?: boolean;\n TabsComponent?: ReactElement<TabsProps<TTabs>, typeof Tabs<TTabs>>;\n PaginationComponent?: ReactElement<PaginationProps, typeof Pagination>;\n headerColumns: HeaderColumns[];\n records: DataRecord[];\n target: EventTarget | null;\n isLoading: boolean;\n isChartLoading?: boolean;\n activeColumns: DataRecordType[];\n timestamp?: string;\n pageNumber: number;\n count: number;\n viewType?: 'table' | 'cards';\n instrumentColumnWidth?: string;\n}\n\nexport const TableWidget = <TTabs,>({\n testId,\n toolTipId,\n PaginationComponent,\n hasError,\n TabsComponent,\n headerColumns,\n records,\n target,\n isLoading,\n isChartLoading,\n activeColumns,\n timestamp,\n pageNumber,\n count,\n viewType,\n instrumentColumnWidth,\n}: TableWidgetProps<TTabs>) => {\n const { lang } = useLocale();\n const { size } = useLayoutProvider();\n const isDesktop = size === Size.DESKTOP;\n const isTable = viewType ? viewType === 'table' : isDesktop;\n\n if (!size) {\n return null;\n }\n\n return (\n <div\n className=\"lw-relative lw-text-sm lw-tracking-normal lw-text-text-primary\"\n data-testid={testId}\n >\n {TabsComponent}\n\n {isTable ? (\n <div className=\"lw-border lw-border-solid lw-border-border-primary\">\n <Table<DataRecord>\n headerConfig={headerColumns}\n isError={hasError}\n records={records}\n renderRow={(record, index, isScrolled) => (\n <DataRecordRow\n key={`row_${index}`}\n activeColumns={activeColumns}\n hasBackgroundColor={index % 2 === 0}\n instrumentColumnWidth={instrumentColumnWidth}\n isChartLoading={isChartLoading}\n isLoading={isLoading}\n isScrolled={isScrolled}\n record={record}\n target={target}\n toolTipId={toolTipId}\n />\n )}\n />\n </div>\n ) : (\n <Cards\n isError={hasError}\n records={records}\n renderCard={({ record, idx, isLast }) => (\n <CardRecordRow\n activeColumns={activeColumns}\n index={idx}\n isChartLoading={isChartLoading}\n isLast={isLast}\n isLoading={isLoading}\n record={record}\n target={target}\n tooltipId={toolTipId}\n />\n )}\n startIndex={pageNumber * count}\n />\n )}\n\n {PaginationComponent && !hasError && (\n <div\n className={cn('lw-border-solid lw-border-border-primary', {\n 'lw-border-x lw-border-b': isDesktop,\n })}\n >\n {PaginationComponent}\n </div>\n )}\n\n <Tooltip id={toolTipId} />\n\n {!hasError && timestamp && (\n <div className=\"lw-mt-2 lw-h-8\">\n <LastUpdated labelCallback={lang} timestamp={timestamp} />\n </div>\n )}\n </div>\n );\n};\n"],"mappings":"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","ignoreList":[]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","names":[],"sources":["../../../../src/components/TableWidget/index.ts"],"sourcesContent":["export * from './TableWidget';\n"],"mappings":"AAAA,cAAc,eAAe","ignoreList":[]}
|
|
1
|
+
{"version":3,"file":"index.js","names":[],"sources":["../../../../src/components/TableWidget/index.ts"],"sourcesContent":["export * from './TableWidget';\nexport * from './utils';\n"],"mappings":"AAAA,cAAc,eAAe;AAC7B,cAAc,SAAS","ignoreList":[]}
|
|
@@ -1,4 +1,7 @@
|
|
|
1
1
|
import { DataRecordType } from '../../types';
|
|
2
2
|
export const getTableRowIndex = () => ({});
|
|
3
|
-
export const getHeaderConfig = (activeColumns, headerConfig) =>
|
|
3
|
+
export const getHeaderConfig = (activeColumns, headerConfig) => {
|
|
4
|
+
const columns = [DataRecordType.INSTRUMENT, ...activeColumns];
|
|
5
|
+
return columns.map(item => headerConfig[item]).filter(headerCell => headerCell !== undefined);
|
|
6
|
+
};
|
|
4
7
|
//# sourceMappingURL=utils.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"utils.js","names":["DataRecordType","getTableRowIndex","getHeaderConfig","activeColumns","headerConfig","INSTRUMENT","map","item"],"sources":["../../../../src/components/TableWidget/utils.ts"],"sourcesContent":["import { DataRecordType } from '../../types';\nimport type { HeaderColumns } from '../Table';\n\nexport const getTableRowIndex = () => ({});\n\nexport const getHeaderConfig = (\n activeColumns: DataRecordType[],\n headerConfig:
|
|
1
|
+
{"version":3,"file":"utils.js","names":["DataRecordType","getTableRowIndex","getHeaderConfig","activeColumns","headerConfig","columns","INSTRUMENT","map","item","filter","headerCell","undefined"],"sources":["../../../../src/components/TableWidget/utils.ts"],"sourcesContent":["import { DataRecordType } from '../../types';\nimport type { HeaderColumns, HeaderConfigType } from '../Table';\n\nexport const getTableRowIndex = () => ({});\n\nexport const getHeaderConfig = (\n activeColumns: DataRecordType[],\n headerConfig: HeaderConfigType\n): HeaderColumns[] => {\n const columns: DataRecordType[] = [\n DataRecordType.INSTRUMENT,\n ...activeColumns,\n ];\n\n return columns\n .map((item) => headerConfig[item])\n .filter((headerCell) => headerCell !== undefined);\n};\n"],"mappings":"AAAA,SAASA,cAAc,QAAQ,aAAa;AAG5C,OAAO,MAAMC,gBAAgB,GAAGA,CAAA,MAAO,CAAC,CAAC,CAAC;AAE1C,OAAO,MAAMC,eAAe,GAAGA,CAC7BC,aAA+B,EAC/BC,YAA8B,KACV;EACpB,MAAMC,OAAyB,GAAG,CAChCL,cAAc,CAACM,UAAU,EACzB,GAAGH,aAAa,CACjB;EAED,OAAOE,OAAO,CACXE,GAAG,CAAEC,IAAI,IAAKJ,YAAY,CAACI,IAAI,CAAC,CAAC,CACjCC,MAAM,CAAEC,UAAU,IAAKA,UAAU,KAAKC,SAAS,CAAC;AACrD,CAAC","ignoreList":[]}
|
|
@@ -1,20 +1,17 @@
|
|
|
1
1
|
import { SET_QUERY_EVENT_NAME } from '../constants';
|
|
2
2
|
import { useLiveRatesProvider } from '../providers';
|
|
3
|
-
export const useLiveRatesQuery =
|
|
4
|
-
const
|
|
5
|
-
target,
|
|
6
|
-
source
|
|
7
|
-
} = useLiveRatesProvider();
|
|
3
|
+
export const useLiveRatesQuery = skip => {
|
|
4
|
+
const liveRates = useLiveRatesProvider(skip);
|
|
8
5
|
const setQuery = query => {
|
|
9
|
-
target?.dispatchEvent(new CustomEvent(SET_QUERY_EVENT_NAME, {
|
|
6
|
+
liveRates?.target?.dispatchEvent(new CustomEvent(SET_QUERY_EVENT_NAME, {
|
|
10
7
|
detail: query
|
|
11
8
|
}));
|
|
12
9
|
};
|
|
13
10
|
const closeQuery = () => {
|
|
14
|
-
source?.close();
|
|
11
|
+
liveRates?.source?.close();
|
|
15
12
|
};
|
|
16
13
|
return {
|
|
17
|
-
target,
|
|
14
|
+
target: liveRates?.target || null,
|
|
18
15
|
setQuery,
|
|
19
16
|
closeQuery
|
|
20
17
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useLiveRatesQuery.js","names":["SET_QUERY_EVENT_NAME","useLiveRatesProvider","useLiveRatesQuery","
|
|
1
|
+
{"version":3,"file":"useLiveRatesQuery.js","names":["SET_QUERY_EVENT_NAME","useLiveRatesProvider","useLiveRatesQuery","skip","liveRates","setQuery","query","target","dispatchEvent","CustomEvent","detail","closeQuery","source","close"],"sources":["../../../src/hooks/useLiveRatesQuery.ts"],"sourcesContent":["import { SET_QUERY_EVENT_NAME } from '../constants';\nimport { useLiveRatesProvider } from '../providers';\nimport type {\n LiveRatesProviderQuery,\n LiveRatesTargetHookReturnObject,\n} from '../types';\n\nexport const useLiveRatesQuery = (\n skip?: boolean\n): LiveRatesTargetHookReturnObject => {\n const liveRates = useLiveRatesProvider(skip);\n\n const setQuery = (query: LiveRatesProviderQuery) => {\n liveRates?.target?.dispatchEvent(\n new CustomEvent(SET_QUERY_EVENT_NAME, { detail: query })\n );\n };\n\n const closeQuery = () => {\n liveRates?.source?.close();\n };\n\n return { target: liveRates?.target || null, setQuery, closeQuery };\n};\n"],"mappings":"AAAA,SAASA,oBAAoB,QAAQ,cAAc;AACnD,SAASC,oBAAoB,QAAQ,cAAc;AAMnD,OAAO,MAAMC,iBAAiB,GAC5BC,IAAc,IACsB;EACpC,MAAMC,SAAS,GAAGH,oBAAoB,CAACE,IAAI,CAAC;EAE5C,MAAME,QAAQ,GAAIC,KAA6B,IAAK;IAClDF,SAAS,EAAEG,MAAM,EAAEC,aAAa,CAC9B,IAAIC,WAAW,CAACT,oBAAoB,EAAE;MAAEU,MAAM,EAAEJ;IAAM,CAAC,CACzD,CAAC;EACH,CAAC;EAED,MAAMK,UAAU,GAAGA,CAAA,KAAM;IACvBP,SAAS,EAAEQ,MAAM,EAAEC,KAAK,CAAC,CAAC;EAC5B,CAAC;EAED,OAAO;IAAEN,MAAM,EAAEH,SAAS,EAAEG,MAAM,IAAI,IAAI;IAAEF,QAAQ;IAAEM;EAAW,CAAC;AACpE,CAAC","ignoreList":[]}
|
|
@@ -5,7 +5,8 @@ export const useVisibleLiveDataRecord = (record, target) => {
|
|
|
5
5
|
const [updatedRecord, setUpdatedRecord] = useState({
|
|
6
6
|
displayName: record.displayName,
|
|
7
7
|
instrument: record.instrument,
|
|
8
|
-
sentiment: record.sentiment
|
|
8
|
+
sentiment: record.sentiment,
|
|
9
|
+
tradeMode: record.tradeMode
|
|
9
10
|
});
|
|
10
11
|
const [error, setError] = useState(null);
|
|
11
12
|
const entry = useIntersectionObserver();
|
|
@@ -20,6 +21,7 @@ export const useVisibleLiveDataRecord = (record, target) => {
|
|
|
20
21
|
displayName: record.displayName,
|
|
21
22
|
instrument: record.instrument,
|
|
22
23
|
sentiment: record.sentiment,
|
|
24
|
+
tradeMode: record.tradeMode,
|
|
23
25
|
buy: update?.ask,
|
|
24
26
|
sell: update?.bid,
|
|
25
27
|
buyPriceMovement: update?.askPriceMovement,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useVisibleLiveDataRecord.js","names":["useEffect","useState","useIntersectionObserver","useLiveRatesMessage","useVisibleLiveDataRecord","record","target","updatedRecord","setUpdatedRecord","displayName","instrument","sentiment","error","setError","entry","isVisible","isIntersecting","update","liveRatesError","buy","ask","sell","bid","buyPriceMovement","askPriceMovement","sellPriceMovement","bidPriceMovement","dailyPercentChange","dailyPercentChangeFromOpen","spread","displayPrecision","high","low","ref"],"sources":["../../../src/hooks/useVisibleLiveDataRecord.ts"],"sourcesContent":["import { useEffect, useState } from 'react';\nimport { useIntersectionObserver } from 'usehooks-ts';\n\nimport type { DataRecord, EmptyRecord, LiveRatesErrorMessage } from '../types';\nimport { useLiveRatesMessage } from './useLiveRatesMessage';\n\nexport const useVisibleLiveDataRecord = (\n record: DataRecord | EmptyRecord,\n target: EventTarget | null\n) => {\n const [updatedRecord, setUpdatedRecord] = useState<DataRecord>({\n displayName: record.displayName,\n instrument: record.instrument,\n sentiment: record.sentiment,\n });\n\n const [error, setError] = useState<LiveRatesErrorMessage | null>(null);\n const entry = useIntersectionObserver();\n const isVisible = !!entry?.isIntersecting;\n\n const { update, error: liveRatesError } = useLiveRatesMessage(\n record.instrument,\n target\n );\n\n useEffect(() => {\n if (isVisible) {\n setUpdatedRecord({\n displayName: record.displayName,\n instrument: record.instrument,\n sentiment: record.sentiment,\n buy: update?.ask,\n sell: update?.bid,\n buyPriceMovement: update?.askPriceMovement,\n sellPriceMovement: update?.bidPriceMovement,\n dailyPercentChange: update?.dailyPercentChangeFromOpen,\n spread: update?.spread,\n displayPrecision: update?.displayPrecision,\n high: update?.high,\n low: update?.low,\n });\n setError(liveRatesError);\n }\n }, [update, record, isVisible, liveRatesError]);\n\n return {\n updatedRecord,\n error,\n ref: entry.ref,\n };\n};\n"],"mappings":"AAAA,SAASA,SAAS,EAAEC,QAAQ,QAAQ,OAAO;AAC3C,SAASC,uBAAuB,QAAQ,aAAa;AAGrD,SAASC,mBAAmB,QAAQ,uBAAuB;AAE3D,OAAO,MAAMC,wBAAwB,GAAGA,CACtCC,MAAgC,EAChCC,MAA0B,KACvB;EACH,MAAM,CAACC,aAAa,EAAEC,gBAAgB,CAAC,GAAGP,QAAQ,CAAa;IAC7DQ,WAAW,EAAEJ,MAAM,CAACI,WAAW;IAC/BC,UAAU,EAAEL,MAAM,CAACK,UAAU;IAC7BC,SAAS,EAAEN,MAAM,CAACM;EACpB,CAAC,CAAC;EAEF,MAAM,CAACC,KAAK,EAAEC,QAAQ,CAAC,
|
|
1
|
+
{"version":3,"file":"useVisibleLiveDataRecord.js","names":["useEffect","useState","useIntersectionObserver","useLiveRatesMessage","useVisibleLiveDataRecord","record","target","updatedRecord","setUpdatedRecord","displayName","instrument","sentiment","tradeMode","error","setError","entry","isVisible","isIntersecting","update","liveRatesError","buy","ask","sell","bid","buyPriceMovement","askPriceMovement","sellPriceMovement","bidPriceMovement","dailyPercentChange","dailyPercentChangeFromOpen","spread","displayPrecision","high","low","ref"],"sources":["../../../src/hooks/useVisibleLiveDataRecord.ts"],"sourcesContent":["import { useEffect, useState } from 'react';\nimport { useIntersectionObserver } from 'usehooks-ts';\n\nimport type { DataRecord, EmptyRecord, LiveRatesErrorMessage } from '../types';\nimport { useLiveRatesMessage } from './useLiveRatesMessage';\n\nexport const useVisibleLiveDataRecord = (\n record: DataRecord | EmptyRecord,\n target: EventTarget | null\n) => {\n const [updatedRecord, setUpdatedRecord] = useState<DataRecord>({\n displayName: record.displayName,\n instrument: record.instrument,\n sentiment: record.sentiment,\n tradeMode: record.tradeMode,\n });\n\n const [error, setError] = useState<LiveRatesErrorMessage | null>(null);\n const entry = useIntersectionObserver();\n const isVisible = !!entry?.isIntersecting;\n\n const { update, error: liveRatesError } = useLiveRatesMessage(\n record.instrument,\n target\n );\n\n useEffect(() => {\n if (isVisible) {\n setUpdatedRecord({\n displayName: record.displayName,\n instrument: record.instrument,\n sentiment: record.sentiment,\n tradeMode: record.tradeMode,\n buy: update?.ask,\n sell: update?.bid,\n buyPriceMovement: update?.askPriceMovement,\n sellPriceMovement: update?.bidPriceMovement,\n dailyPercentChange: update?.dailyPercentChangeFromOpen,\n spread: update?.spread,\n displayPrecision: update?.displayPrecision,\n high: update?.high,\n low: update?.low,\n });\n setError(liveRatesError);\n }\n }, [update, record, isVisible, liveRatesError]);\n\n return {\n updatedRecord,\n error,\n ref: entry.ref,\n };\n};\n"],"mappings":"AAAA,SAASA,SAAS,EAAEC,QAAQ,QAAQ,OAAO;AAC3C,SAASC,uBAAuB,QAAQ,aAAa;AAGrD,SAASC,mBAAmB,QAAQ,uBAAuB;AAE3D,OAAO,MAAMC,wBAAwB,GAAGA,CACtCC,MAAgC,EAChCC,MAA0B,KACvB;EACH,MAAM,CAACC,aAAa,EAAEC,gBAAgB,CAAC,GAAGP,QAAQ,CAAa;IAC7DQ,WAAW,EAAEJ,MAAM,CAACI,WAAW;IAC/BC,UAAU,EAAEL,MAAM,CAACK,UAAU;IAC7BC,SAAS,EAAEN,MAAM,CAACM,SAAS;IAC3BC,SAAS,EAAEP,MAAM,CAACO;EACpB,CAAC,CAAC;EAEF,MAAM,CAACC,KAAK,EAAEC,QAAQ,CAAC,GAAGb,QAAQ,CAA+B,IAAI,CAAC;EACtE,MAAMc,KAAK,GAAGb,uBAAuB,CAAC,CAAC;EACvC,MAAMc,SAAS,GAAG,CAAC,CAACD,KAAK,EAAEE,cAAc;EAEzC,MAAM;IAAEC,MAAM;IAAEL,KAAK,EAAEM;EAAe,CAAC,GAAGhB,mBAAmB,CAC3DE,MAAM,CAACK,UAAU,EACjBJ,MACF,CAAC;EAEDN,SAAS,CAAC,MAAM;IACd,IAAIgB,SAAS,EAAE;MACbR,gBAAgB,CAAC;QACfC,WAAW,EAAEJ,MAAM,CAACI,WAAW;QAC/BC,UAAU,EAAEL,MAAM,CAACK,UAAU;QAC7BC,SAAS,EAAEN,MAAM,CAACM,SAAS;QAC3BC,SAAS,EAAEP,MAAM,CAACO,SAAS;QAC3BQ,GAAG,EAAEF,MAAM,EAAEG,GAAG;QAChBC,IAAI,EAAEJ,MAAM,EAAEK,GAAG;QACjBC,gBAAgB,EAAEN,MAAM,EAAEO,gBAAgB;QAC1CC,iBAAiB,EAAER,MAAM,EAAES,gBAAgB;QAC3CC,kBAAkB,EAAEV,MAAM,EAAEW,0BAA0B;QACtDC,MAAM,EAAEZ,MAAM,EAAEY,MAAM;QACtBC,gBAAgB,EAAEb,MAAM,EAAEa,gBAAgB;QAC1CC,IAAI,EAAEd,MAAM,EAAEc,IAAI;QAClBC,GAAG,EAAEf,MAAM,EAAEe;MACf,CAAC,CAAC;MACFnB,QAAQ,CAACK,cAAc,CAAC;IAC1B;EACF,CAAC,EAAE,CAACD,MAAM,EAAEb,MAAM,EAAEW,SAAS,EAAEG,cAAc,CAAC,CAAC;EAE/C,OAAO;IACLZ,aAAa;IACbM,KAAK;IACLqB,GAAG,EAAEnB,KAAK,CAACmB;EACb,CAAC;AACH,CAAC","ignoreList":[]}
|
|
@@ -1,8 +1,11 @@
|
|
|
1
1
|
import { createContext, useContext } from 'react';
|
|
2
2
|
export const LiveRatesContext = createContext(undefined);
|
|
3
3
|
LiveRatesContext.displayName = 'LiveRatesContext';
|
|
4
|
-
export const useLiveRatesProvider =
|
|
4
|
+
export const useLiveRatesProvider = skip => {
|
|
5
5
|
const liveRates = useContext(LiveRatesContext);
|
|
6
|
+
if (skip) {
|
|
7
|
+
return null;
|
|
8
|
+
}
|
|
6
9
|
if (!liveRates) {
|
|
7
10
|
throw new Error('Hook used outside of LiveRatesContextProvider');
|
|
8
11
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"LiveRatesContext.js","names":["createContext","useContext","LiveRatesContext","undefined","displayName","useLiveRatesProvider","liveRates","Error"],"sources":["../../../../src/providers/LiveRates/LiveRatesContext.tsx"],"sourcesContent":["import { createContext, useContext } from 'react';\n\nimport type { Nullable, Voidable } from '../../types';\n\ninterface LiveRatesContextValue {\n target: Nullable<EventTarget>;\n source: Voidable<EventSource>;\n}\n\nexport const LiveRatesContext =\n createContext<Voidable<LiveRatesContextValue>>(undefined);\n\nLiveRatesContext.displayName = 'LiveRatesContext';\n\nexport const useLiveRatesProvider = () => {\n const liveRates = useContext(LiveRatesContext);\n\n if (!liveRates) {\n throw new Error('Hook used outside of LiveRatesContextProvider');\n }\n\n return liveRates;\n};\n"],"mappings":"AAAA,SAASA,aAAa,EAAEC,UAAU,QAAQ,OAAO;AASjD,OAAO,MAAMC,gBAAgB,GAC3BF,aAAa,CAAkCG,SAAS,CAAC;AAE3DD,gBAAgB,CAACE,WAAW,GAAG,kBAAkB;AAEjD,OAAO,MAAMC,oBAAoB,
|
|
1
|
+
{"version":3,"file":"LiveRatesContext.js","names":["createContext","useContext","LiveRatesContext","undefined","displayName","useLiveRatesProvider","skip","liveRates","Error"],"sources":["../../../../src/providers/LiveRates/LiveRatesContext.tsx"],"sourcesContent":["import { createContext, useContext } from 'react';\n\nimport type { Nullable, Voidable } from '../../types';\n\ninterface LiveRatesContextValue {\n target: Nullable<EventTarget>;\n source: Voidable<EventSource>;\n}\n\nexport const LiveRatesContext =\n createContext<Voidable<LiveRatesContextValue>>(undefined);\n\nLiveRatesContext.displayName = 'LiveRatesContext';\n\nexport const useLiveRatesProvider = (skip?: boolean) => {\n const liveRates = useContext(LiveRatesContext);\n\n if (skip) {\n return null;\n }\n\n if (!liveRates) {\n throw new Error('Hook used outside of LiveRatesContextProvider');\n }\n\n return liveRates;\n};\n"],"mappings":"AAAA,SAASA,aAAa,EAAEC,UAAU,QAAQ,OAAO;AASjD,OAAO,MAAMC,gBAAgB,GAC3BF,aAAa,CAAkCG,SAAS,CAAC;AAE3DD,gBAAgB,CAACE,WAAW,GAAG,kBAAkB;AAEjD,OAAO,MAAMC,oBAAoB,GAAIC,IAAc,IAAK;EACtD,MAAMC,SAAS,GAAGN,UAAU,CAACC,gBAAgB,CAAC;EAE9C,IAAII,IAAI,EAAE;IACR,OAAO,IAAI;EACb;EAEA,IAAI,CAACC,SAAS,EAAE;IACd,MAAM,IAAIC,KAAK,CAAC,+CAA+C,CAAC;EAClE;EAEA,OAAOD,SAAS;AAClB,CAAC","ignoreList":[]}
|
|
@@ -8,6 +8,8 @@ export let DataRecordType = function (DataRecordType) {
|
|
|
8
8
|
DataRecordType["SENTIMENT"] = "sentiment";
|
|
9
9
|
DataRecordType["LOW"] = "low";
|
|
10
10
|
DataRecordType["HIGH"] = "high";
|
|
11
|
+
DataRecordType["SYMBOL"] = "symbol";
|
|
12
|
+
DataRecordType["TRADE_MODE"] = "tradeMode";
|
|
11
13
|
return DataRecordType;
|
|
12
14
|
}({});
|
|
13
15
|
//# sourceMappingURL=dataTypes.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"dataTypes.js","names":["DataRecordType"],"sources":["../../../src/types/dataTypes.ts"],"sourcesContent":["/* eslint-disable @typescript-eslint/no-explicit-any */\nexport interface DataRecord {\n [key: string]: string | number | SentimentValue | undefined | number[];\n instrument: string;\n displayName: string;\n buy?: number;\n sell?: number;\n spread?: number;\n sentiment?: SentimentValue;\n sellPriceMovement?: number;\n buyPriceMovement?: number;\n dailyPercentChange?: string;\n displayPrecision?: number;\n chart?: number[];\n high?: number;\n low?: number;\n}\n\nexport interface SentimentValue {\n shortPercent: number;\n longPercent: number;\n}\n\nexport type EmptyRecord = Record<string, never>;\n\nexport interface QueryVariables {\n [key: string]: any;\n}\n\nexport enum DataRecordType {\n INSTRUMENT = 'instrument',\n SELL = 'sell',\n BUY = 'buy',\n DAILY_CHANGE = 'dailyChange',\n CHART = 'chart',\n SPREAD = 'spread',\n SENTIMENT = 'sentiment',\n LOW = 'low',\n HIGH = 'high',\n}\n"],"mappings":"
|
|
1
|
+
{"version":3,"file":"dataTypes.js","names":["DataRecordType"],"sources":["../../../src/types/dataTypes.ts"],"sourcesContent":["/* eslint-disable @typescript-eslint/no-explicit-any */\nexport interface DataRecord {\n [key: string]: string | number | SentimentValue | undefined | number[];\n instrument: string;\n displayName: string;\n buy?: number;\n sell?: number;\n spread?: number;\n sentiment?: SentimentValue;\n sellPriceMovement?: number;\n buyPriceMovement?: number;\n dailyPercentChange?: string;\n displayPrecision?: number;\n chart?: number[];\n high?: number;\n low?: number;\n tradeMode?: string;\n}\n\nexport interface SentimentValue {\n shortPercent: number;\n longPercent: number;\n}\n\nexport type EmptyRecord = Record<string, never>;\n\nexport interface QueryVariables {\n [key: string]: any;\n}\n\nexport enum DataRecordType {\n INSTRUMENT = 'instrument',\n SELL = 'sell',\n BUY = 'buy',\n DAILY_CHANGE = 'dailyChange',\n CHART = 'chart',\n SPREAD = 'spread',\n SENTIMENT = 'sentiment',\n LOW = 'low',\n HIGH = 'high',\n SYMBOL = 'symbol',\n TRADE_MODE = 'tradeMode',\n}\n"],"mappings":"AA8BA,WAAYA,cAAc,aAAdA,cAAc;EAAdA,cAAc;EAAdA,cAAc;EAAdA,cAAc;EAAdA,cAAc;EAAdA,cAAc;EAAdA,cAAc;EAAdA,cAAc;EAAdA,cAAc;EAAdA,cAAc;EAAdA,cAAc;EAAdA,cAAc;EAAA,OAAdA,cAAc;AAAA","ignoreList":[]}
|
|
@@ -1,10 +1,11 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
2
|
interface InstrumentColumnProps {
|
|
3
3
|
displayName: string;
|
|
4
|
-
tooltipId: string;
|
|
5
4
|
isLoading: boolean;
|
|
6
5
|
isDark?: boolean;
|
|
7
6
|
isScrolled?: boolean;
|
|
7
|
+
width?: string;
|
|
8
|
+
tooltipId: string;
|
|
8
9
|
}
|
|
9
|
-
export declare const InstrumentColumn: ({ isDark, isScrolled,
|
|
10
|
+
export declare const InstrumentColumn: ({ isDark, isScrolled, isLoading, displayName, width, tooltipId, }: InstrumentColumnProps) => React.JSX.Element;
|
|
10
11
|
export {};
|
|
@@ -1,7 +1,12 @@
|
|
|
1
|
-
import type { LoaderSize } from '@oanda/labs-widget-common';
|
|
1
|
+
import type { DataRecordType, LoaderSize } from '@oanda/labs-widget-common';
|
|
2
|
+
export interface HeaderColumnsAdditionalStyles {
|
|
3
|
+
align?: 'left' | 'right' | 'center';
|
|
4
|
+
minWidth?: string;
|
|
5
|
+
paddingRight?: boolean;
|
|
6
|
+
}
|
|
2
7
|
export interface HeaderColumns {
|
|
3
8
|
displayName: string;
|
|
4
|
-
additionalStyles:
|
|
9
|
+
additionalStyles: HeaderColumnsAdditionalStyles;
|
|
5
10
|
}
|
|
6
11
|
export interface TableProps<T> {
|
|
7
12
|
emptyRowsCount?: number;
|
|
@@ -19,7 +24,7 @@ export interface TableCellProps {
|
|
|
19
24
|
children: React.ReactNode;
|
|
20
25
|
isLoading?: boolean;
|
|
21
26
|
isError?: boolean;
|
|
22
|
-
type?: 'text' | 'number';
|
|
27
|
+
type?: 'text' | 'textCentered' | 'number';
|
|
23
28
|
loaderSize?: LoaderSize;
|
|
24
29
|
classNames?: string;
|
|
25
30
|
additionalPaddingRight?: boolean;
|
|
@@ -29,3 +34,6 @@ export interface TableHeaderProps {
|
|
|
29
34
|
isScrolled: boolean;
|
|
30
35
|
isError: boolean;
|
|
31
36
|
}
|
|
37
|
+
export type HeaderConfigType = {
|
|
38
|
+
[Key in DataRecordType]?: HeaderColumns;
|
|
39
|
+
};
|
|
@@ -8,6 +8,7 @@ export interface DataRecordRowProps {
|
|
|
8
8
|
target: EventTarget | null;
|
|
9
9
|
isScrolled?: boolean;
|
|
10
10
|
toolTipId: string;
|
|
11
|
+
instrumentColumnWidth?: string;
|
|
11
12
|
activeColumns: DataRecordType[];
|
|
12
13
|
}
|
|
13
|
-
export declare const DataRecordRow: ({ record, isLoading, isChartLoading, hasBackgroundColor, target, isScrolled, toolTipId, activeColumns, }: DataRecordRowProps) => React.JSX.Element;
|
|
14
|
+
export declare const DataRecordRow: ({ record, isLoading, isChartLoading, hasBackgroundColor, target, isScrolled, toolTipId, activeColumns, instrumentColumnWidth, }: DataRecordRowProps) => React.JSX.Element;
|
|
@@ -21,6 +21,7 @@ interface TableWidgetProps<TTabs> {
|
|
|
21
21
|
pageNumber: number;
|
|
22
22
|
count: number;
|
|
23
23
|
viewType?: 'table' | 'cards';
|
|
24
|
+
instrumentColumnWidth?: string;
|
|
24
25
|
}
|
|
25
|
-
export declare const TableWidget: <TTabs>({ testId, toolTipId, PaginationComponent, hasError, TabsComponent, headerColumns, records, target, isLoading, isChartLoading, activeColumns, timestamp, pageNumber, count, viewType, }: TableWidgetProps<TTabs>) => React.JSX.Element | null;
|
|
26
|
+
export declare const TableWidget: <TTabs>({ testId, toolTipId, PaginationComponent, hasError, TabsComponent, headerColumns, records, target, isLoading, isChartLoading, activeColumns, timestamp, pageNumber, count, viewType, instrumentColumnWidth, }: TableWidgetProps<TTabs>) => React.JSX.Element | null;
|
|
26
27
|
export {};
|
|
@@ -1,4 +1,4 @@
|
|
|
1
1
|
import { DataRecordType } from '../../types';
|
|
2
|
-
import type { HeaderColumns } from '../Table';
|
|
2
|
+
import type { HeaderColumns, HeaderConfigType } from '../Table';
|
|
3
3
|
export declare const getTableRowIndex: () => {};
|
|
4
|
-
export declare const getHeaderConfig: (activeColumns: DataRecordType[], headerConfig:
|
|
4
|
+
export declare const getHeaderConfig: (activeColumns: DataRecordType[], headerConfig: HeaderConfigType) => HeaderColumns[];
|
|
@@ -1,2 +1,2 @@
|
|
|
1
1
|
import type { LiveRatesTargetHookReturnObject } from '../types';
|
|
2
|
-
export declare const useLiveRatesQuery: () => LiveRatesTargetHookReturnObject;
|
|
2
|
+
export declare const useLiveRatesQuery: (skip?: boolean) => LiveRatesTargetHookReturnObject;
|
|
@@ -4,5 +4,5 @@ interface LiveRatesContextValue {
|
|
|
4
4
|
source: Voidable<EventSource>;
|
|
5
5
|
}
|
|
6
6
|
export declare const LiveRatesContext: import("react").Context<Voidable<LiveRatesContextValue>>;
|
|
7
|
-
export declare const useLiveRatesProvider: () => LiveRatesContextValue;
|
|
7
|
+
export declare const useLiveRatesProvider: (skip?: boolean) => LiveRatesContextValue | null;
|
|
8
8
|
export {};
|
|
@@ -13,6 +13,7 @@ export interface DataRecord {
|
|
|
13
13
|
chart?: number[];
|
|
14
14
|
high?: number;
|
|
15
15
|
low?: number;
|
|
16
|
+
tradeMode?: string;
|
|
16
17
|
}
|
|
17
18
|
export interface SentimentValue {
|
|
18
19
|
shortPercent: number;
|
|
@@ -31,5 +32,7 @@ export declare enum DataRecordType {
|
|
|
31
32
|
SPREAD = "spread",
|
|
32
33
|
SENTIMENT = "sentiment",
|
|
33
34
|
LOW = "low",
|
|
34
|
-
HIGH = "high"
|
|
35
|
+
HIGH = "high",
|
|
36
|
+
SYMBOL = "symbol",
|
|
37
|
+
TRADE_MODE = "tradeMode"
|
|
35
38
|
}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@oanda/labs-widget-common",
|
|
3
|
-
"version": "1.0.
|
|
3
|
+
"version": "1.0.208",
|
|
4
4
|
"description": "Labs Widget Common",
|
|
5
5
|
"main": "dist/main/index.js",
|
|
6
6
|
"module": "dist/module/index.js",
|
|
@@ -21,5 +21,5 @@
|
|
|
21
21
|
"tailwind-merge": "2.2.2",
|
|
22
22
|
"usehooks-ts": "3.0.2"
|
|
23
23
|
},
|
|
24
|
-
"gitHead": "
|
|
24
|
+
"gitHead": "5ac438aecc3ec1cc9e02e6c68e7cf3bf1e6eadd4"
|
|
25
25
|
}
|
|
@@ -18,6 +18,7 @@ const TableCell = ({
|
|
|
18
18
|
className={classnames(`lw-h-[inherit] lw-p-0 lw-font-sans ${classNames}`, {
|
|
19
19
|
'lw-text-right': type === 'number',
|
|
20
20
|
'lw-text-left': type === 'text',
|
|
21
|
+
'lw-text-center': type === 'textCentered',
|
|
21
22
|
})}
|
|
22
23
|
data-testid="table-cell"
|
|
23
24
|
>
|
|
@@ -27,6 +28,7 @@ const TableCell = ({
|
|
|
27
28
|
{
|
|
28
29
|
'lw-justify-end': type === 'number',
|
|
29
30
|
'lw-justify-start': type === 'text',
|
|
31
|
+
'lw-justify-center': type === 'textCentered',
|
|
30
32
|
'lw-pr-7': additionalPaddingRight && !isLoading,
|
|
31
33
|
'lw-pr-3': !additionalPaddingRight || isLoading,
|
|
32
34
|
}
|
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
import { useLocale } from '@oanda/mono-i18n';
|
|
2
|
-
import classNames from 'classnames';
|
|
3
2
|
import React from 'react';
|
|
4
3
|
|
|
5
4
|
import { useLayoutProvider } from '../../providers';
|
|
5
|
+
import { cn } from '../../tailwind';
|
|
6
6
|
import type { TableHeaderProps } from './types';
|
|
7
7
|
|
|
8
8
|
const TableHeader = ({ columns, isScrolled, isError }: TableHeaderProps) => {
|
|
@@ -12,25 +12,41 @@ const TableHeader = ({ columns, isScrolled, isError }: TableHeaderProps) => {
|
|
|
12
12
|
return (
|
|
13
13
|
<thead data-testid="table-header">
|
|
14
14
|
<tr className="lw-h-11 lw-bg-bg-primary lw-text-text-primary">
|
|
15
|
-
{columns.map(
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
15
|
+
{columns.map(
|
|
16
|
+
(
|
|
17
|
+
{
|
|
18
|
+
displayName,
|
|
19
|
+
additionalStyles: { align, minWidth, paddingRight },
|
|
20
|
+
},
|
|
21
|
+
index
|
|
22
|
+
) => (
|
|
23
|
+
<th
|
|
24
|
+
key={`table-header-${displayName}`}
|
|
25
|
+
className={cn(
|
|
26
|
+
'lw-px-3 lw-py-0 lw-font-sans lw-text-sm lw-tracking-normal lw-font-semibold',
|
|
27
|
+
{
|
|
28
|
+
'lw-sticky lw-left-0 lw-pr-3': !isError && index === 0,
|
|
29
|
+
'lw-bg-whiteWithShadow':
|
|
30
|
+
!isDark && !isError && isScrolled && index === 0,
|
|
31
|
+
'lw-bg-bg-primary':
|
|
32
|
+
isDark && !isError && isScrolled && index === 0,
|
|
33
|
+
}
|
|
34
|
+
)}
|
|
35
|
+
>
|
|
36
|
+
<div
|
|
37
|
+
className={cn(
|
|
38
|
+
align === 'right' && 'lw-text-right',
|
|
39
|
+
align === 'left' && 'lw-text-left',
|
|
40
|
+
align === 'center' && 'lw-text-center',
|
|
41
|
+
paddingRight && 'lw-pr-4'
|
|
42
|
+
)}
|
|
43
|
+
style={{ minWidth }}
|
|
44
|
+
>
|
|
45
|
+
{lang(displayName)}
|
|
46
|
+
</div>
|
|
47
|
+
</th>
|
|
48
|
+
)
|
|
49
|
+
)}
|
|
34
50
|
</tr>
|
|
35
51
|
</thead>
|
|
36
52
|
);
|