diff --git a/src/components/ConcentrationRisk/ConcentrationRisk.columns.js b/src/components/ConcentrationRisk/ConcentrationRisk.columns.js index 37876214a..91b928e2b 100644 --- a/src/components/ConcentrationRisk/ConcentrationRisk.columns.js +++ b/src/components/ConcentrationRisk/ConcentrationRisk.columns.js @@ -1,10 +1,8 @@ -import React from 'react' -import { Cell } from '@blueprintjs/table' - import { fixedFloat } from 'ui/utils' -import { getCellState } from 'utils/columns' +import { getCell, getCellState } from 'utils/columns' export const getColumns = ({ + t, data, isNoData, isLoading, @@ -15,15 +13,9 @@ export const getColumns = ({ className: 'align-left', width: 100, renderer: (rowIndex) => { - if (isLoading || isNoData) { - return getCellState(isLoading, isNoData) - } + if (isLoading || isNoData) return getCellState(isLoading, isNoData) const { currency } = data[rowIndex] - return ( - - {currency} - - ) + return getCell(currency, t) }, copyText: rowIndex => data[rowIndex].currency, }, @@ -32,19 +24,9 @@ export const getColumns = ({ name: 'column.balanceUsd', width: 150, renderer: (rowIndex) => { - if (isLoading || isNoData) { - return getCellState(isLoading, isNoData) - } + if (isLoading || isNoData) return getCellState(isLoading, isNoData) const { balanceUsd } = data[rowIndex] - const fixedBalanceUsd = fixedFloat(balanceUsd) - return ( - - {fixedBalanceUsd} - - ) + return getCell(fixedFloat(balanceUsd), t) }, copyText: rowIndex => fixedFloat(data[rowIndex].balanceUsd), }, @@ -53,19 +35,9 @@ export const getColumns = ({ name: 'column.percent', width: 150, renderer: (rowIndex) => { - if (isLoading || isNoData) { - return getCellState(isLoading, isNoData) - } + if (isLoading || isNoData) return getCellState(isLoading, isNoData) const { percent } = data[rowIndex] - const fixedPercent = fixedFloat(percent) - return ( - - {fixedPercent} - - ) + return getCell(fixedFloat(percent), t) }, copyText: rowIndex => fixedFloat(data[rowIndex].percent), }, diff --git a/src/components/ConcentrationRisk/ConcentrationRisk.js b/src/components/ConcentrationRisk/ConcentrationRisk.js index 4a029f181..b0bd77a9c 100644 --- a/src/components/ConcentrationRisk/ConcentrationRisk.js +++ b/src/components/ConcentrationRisk/ConcentrationRisk.js @@ -138,7 +138,9 @@ class ConcentrationRisk extends PureComponent { const filteredData = entries.filter(entry => entry.balanceUsd) const { tableData, chartData } = this.parseData(filteredData) - const tableColumns = getColumns({ data: tableData, isNoData, isLoading }) + const tableColumns = getColumns({ + data: tableData, isNoData, isLoading, t, + }) let showContent if (isNoData) { diff --git a/src/components/Wallets/Wallets.columns.js b/src/components/Wallets/Wallets.columns.js index c153b8875..0ed7b73ad 100644 --- a/src/components/Wallets/Wallets.columns.js +++ b/src/components/Wallets/Wallets.columns.js @@ -1,84 +1,53 @@ -import React from 'react' -import { Cell } from '@blueprintjs/table' - -import { insertIf, fixedFloat } from 'ui/utils' import { + getCell, + getCellState, COLUMN_WIDTHS, - getCellLoader, - getCellNoData, - getTooltipContent, } from 'utils/columns' import config from 'config' +import { insertIf, fixedFloat } from 'ui/utils' -export default function getColumns(props) { - const { - t, - isNoData, - isLoading, - filteredData, - } = props - - return [ - { - id: 'currency', - name: 'column.currency', - className: 'align-left', - width: 100, - renderer: (rowIndex) => { - if (isLoading) return getCellLoader(14, 72) - if (isNoData) return getCellNoData(t('column.noResults')) - const { currency } = filteredData[rowIndex] - return ( - - {currency} - - ) - }, - copyText: rowIndex => filteredData[rowIndex].currency, +export const getColumns = ({ + t, + isNoData, + isLoading, + filteredData, +}) => [ + { + id: 'currency', + name: 'column.currency', + className: 'align-left', + width: 100, + renderer: (rowIndex) => { + if (isLoading || isNoData) return getCellState(isLoading, isNoData, t('column.noResults')) + const { currency } = filteredData[rowIndex] + return getCell(currency, t) }, + copyText: rowIndex => filteredData[rowIndex].currency, + }, + { + id: 'balance', + name: 'column.balance', + width: COLUMN_WIDTHS.amount, + renderer: (rowIndex) => { + if (isLoading || isNoData) return getCellState(isLoading, isNoData) + const { balance } = filteredData[rowIndex] + return getCell(fixedFloat(balance), t) + }, + isNumericValue: true, + copyText: rowIndex => fixedFloat(filteredData[rowIndex].balance), + }, + ...insertIf(config.showFrameworkMode, ( { - id: 'balance', - name: 'column.balance', - width: COLUMN_WIDTHS.amount, + id: 'balanceUsd', + name: 'column.balanceUsd', + width: COLUMN_WIDTHS.balanceUsd, renderer: (rowIndex) => { - if (isLoading) return getCellLoader(14, 72) - if (isNoData) return getCellNoData() - const { balance } = filteredData[rowIndex] - const fixedBalance = fixedFloat(balance) - return ( - - {fixedBalance} - - ) + if (isLoading || isNoData) return getCellState(isLoading, isNoData) + const { balanceUsd } = filteredData[rowIndex] + return getCell(fixedFloat(balanceUsd), t) }, isNumericValue: true, - copyText: rowIndex => fixedFloat(filteredData[rowIndex].balance), - }, - ...insertIf(config.showFrameworkMode, ( - { - id: 'balanceUsd', - name: 'column.balanceUsd', - width: COLUMN_WIDTHS.balanceUsd, - renderer: (rowIndex) => { - if (isLoading) return getCellLoader(14, 72) - if (isNoData) return getCellNoData() - const { balanceUsd } = filteredData[rowIndex] - const fixedBalanceUsd = fixedFloat(balanceUsd) - return ( - - {fixedBalanceUsd} - - ) - }, - isNumericValue: true, - copyText: rowIndex => fixedFloat(filteredData[rowIndex].balanceUsd), - } - )), - ] -} + copyText: rowIndex => fixedFloat(filteredData[rowIndex].balanceUsd), + } + )), +] diff --git a/src/components/Wallets/Wallets.data.js b/src/components/Wallets/Wallets.data.js index 199a35bad..93105b622 100644 --- a/src/components/Wallets/Wallets.data.js +++ b/src/components/Wallets/Wallets.data.js @@ -5,7 +5,7 @@ import { isEmpty } from '@bitfinex/lib-js-util-base' import DataTable from 'ui/DataTable' -import getColumns from './Wallets.columns' +import { getColumns } from './Wallets.columns' import { WALLETS_ENTRIES_PROPS } from './Wallets.props' import constants from './var' diff --git a/src/components/WeightedAverages/WeightedAverages.columns.js b/src/components/WeightedAverages/WeightedAverages.columns.js index f83bb61d6..fe0aa6ab1 100644 --- a/src/components/WeightedAverages/WeightedAverages.columns.js +++ b/src/components/WeightedAverages/WeightedAverages.columns.js @@ -1,8 +1,5 @@ -import React from 'react' -import { Cell } from '@blueprintjs/table' - import { formatAmount, fixedFloat } from 'ui/utils' -import { getCellState, getColumnWidth, getTooltipContent } from 'utils/columns' +import { getCell, getCellState, getColumnWidth } from 'utils/columns' export const getColumns = ({ t, @@ -18,15 +15,9 @@ export const getColumns = ({ className: 'align-left', width: getColumnWidth('pair', columnsWidth), renderer: (rowIndex) => { - if (isLoading || isNoData) { - return getCellState(isLoading, isNoData) - } + if (isLoading || isNoData) return getCellState(isLoading, isNoData) const { pair } = filteredData[rowIndex] - return ( - - {pair} - - ) + return getCell(pair, t) }, copyText: rowIndex => filteredData[rowIndex].pair, }, @@ -35,19 +26,9 @@ export const getColumns = ({ name: 'column.buyingWeightedPrice', width: getColumnWidth('buyingWeightedPrice', columnsWidth), renderer: (rowIndex) => { - if (isLoading || isNoData) { - return getCellState(isLoading, isNoData) - } + if (isLoading || isNoData) return getCellState(isLoading, isNoData) const { buyingWeightedPrice } = filteredData[rowIndex] - const fixedPrice = fixedFloat(buyingWeightedPrice) - return ( - - {fixedPrice} - - ) + return getCell(fixedFloat(buyingWeightedPrice), t) }, isNumericValue: true, copyText: rowIndex => fixedFloat(filteredData[rowIndex].buyingWeightedPrice), @@ -57,19 +38,9 @@ export const getColumns = ({ name: 'column.buyingAmount', width: getColumnWidth('buyingAmount', columnsWidth), renderer: (rowIndex) => { - if (isLoading || isNoData) { - return getCellState(isLoading, isNoData) - } + if (isLoading || isNoData) return getCellState(isLoading, isNoData) const { buyingAmount } = filteredData[rowIndex] - const tooltip = fixedFloat(buyingAmount) - return ( - - {formatAmount(buyingAmount)} - - ) + return getCell(formatAmount(buyingAmount), t, fixedFloat(buyingAmount)) }, isNumericValue: true, copyText: rowIndex => fixedFloat(filteredData[rowIndex].buyingAmount), @@ -79,19 +50,9 @@ export const getColumns = ({ name: 'column.cost', width: getColumnWidth('cost', columnsWidth), renderer: (rowIndex) => { - if (isLoading || isNoData) { - return getCellState(isLoading, isNoData) - } + if (isLoading || isNoData) return getCellState(isLoading, isNoData) const { cost } = filteredData[rowIndex] - const tooltip = fixedFloat(cost) - return ( - - {formatAmount(cost)} - - ) + return getCell(formatAmount(cost), t, fixedFloat(cost)) }, isNumericValue: true, copyText: rowIndex => fixedFloat(filteredData[rowIndex].cost), @@ -101,19 +62,9 @@ export const getColumns = ({ name: 'column.sellingWeightedPrice', width: getColumnWidth('sellingWeightedPrice', columnsWidth), renderer: (rowIndex) => { - if (isLoading || isNoData) { - return getCellState(isLoading, isNoData) - } + if (isLoading || isNoData) return getCellState(isLoading, isNoData) const { sellingWeightedPrice } = filteredData[rowIndex] - const fixedPrice = fixedFloat(sellingWeightedPrice) - return ( - - {fixedPrice} - - ) + return getCell(fixedFloat(sellingWeightedPrice), t) }, isNumericValue: true, copyText: rowIndex => fixedFloat(filteredData[rowIndex].sellingWeightedPrice), @@ -123,19 +74,9 @@ export const getColumns = ({ name: 'column.sellingAmount', width: getColumnWidth('sellingAmount', columnsWidth), renderer: (rowIndex) => { - if (isLoading || isNoData) { - return getCellState(isLoading, isNoData) - } + if (isLoading || isNoData) return getCellState(isLoading, isNoData) const { sellingAmount } = filteredData[rowIndex] - const tooltip = fixedFloat(sellingAmount) - return ( - - {formatAmount(sellingAmount)} - - ) + return getCell(formatAmount(sellingAmount), t, fixedFloat(sellingAmount)) }, isNumericValue: true, copyText: rowIndex => fixedFloat(filteredData[rowIndex].sellingAmount), @@ -145,19 +86,9 @@ export const getColumns = ({ name: 'column.sale', width: getColumnWidth('sale', columnsWidth), renderer: (rowIndex) => { - if (isLoading || isNoData) { - return getCellState(isLoading, isNoData) - } + if (isLoading || isNoData) return getCellState(isLoading, isNoData) const { sale } = filteredData[rowIndex] - const tooltip = fixedFloat(sale) - return ( - - {formatAmount(sale)} - - ) + return getCell(formatAmount(sale), t, fixedFloat(sale)) }, isNumericValue: true, copyText: rowIndex => fixedFloat(filteredData[rowIndex].sale), @@ -167,19 +98,9 @@ export const getColumns = ({ name: 'column.cumulativeAmount', width: getColumnWidth('cumulativeAmount', columnsWidth), renderer: (rowIndex) => { - if (isLoading || isNoData) { - return getCellState(isLoading, isNoData) - } + if (isLoading || isNoData) return getCellState(isLoading, isNoData) const { cumulativeAmount } = filteredData[rowIndex] - const tooltip = fixedFloat(cumulativeAmount) - return ( - - {formatAmount(cumulativeAmount)} - - ) + return getCell(formatAmount(cumulativeAmount), t, fixedFloat(cumulativeAmount)) }, isNumericValue: true, copyText: rowIndex => fixedFloat(filteredData[rowIndex].cumulativeAmount), @@ -189,15 +110,9 @@ export const getColumns = ({ name: 'column.firstTrade', width: getColumnWidth('firstTradeMts', columnsWidth), renderer: (rowIndex) => { - if (isLoading || isNoData) { - return getCellState(isLoading, isNoData) - } + if (isLoading || isNoData) return getCellState(isLoading, isNoData) const timestamp = getFullTime(filteredData[rowIndex].firstTradeMts) - return ( - - {timestamp} - - ) + return getCell(timestamp, t) }, copyText: rowIndex => getFullTime(filteredData[rowIndex].firstTradeMts), }, @@ -206,15 +121,9 @@ export const getColumns = ({ name: 'column.lastTrade', width: getColumnWidth('lastTradeMts', columnsWidth), renderer: (rowIndex) => { - if (isLoading || isNoData) { - return getCellState(isLoading, isNoData) - } + if (isLoading || isNoData) return getCellState(isLoading, isNoData) const timestamp = getFullTime(filteredData[rowIndex].lastTradeMts) - return ( - - {timestamp} - - ) + return getCell(timestamp, t) }, copyText: rowIndex => getFullTime(filteredData[rowIndex].lastTradeMts), }, diff --git a/src/utils/columns.js b/src/utils/columns.js index 0b69a0396..5e3a52ae1 100644 --- a/src/utils/columns.js +++ b/src/utils/columns.js @@ -241,9 +241,9 @@ export const getCellNoData = (title = '--') => ( ) -export const getCellState = (isLoading, isNoData) => { +export const getCellState = (isLoading, isNoData, noDataTitle) => { if (isLoading) return getCellLoader(14, 72) - if (isNoData) return getCellNoData() + if (isNoData) return getCellNoData(noDataTitle) return null }