diff --git a/src/components/AccountSummary/AccountSummary.js b/src/components/AccountSummary/AccountSummary.js index af394e26a..659759c77 100644 --- a/src/components/AccountSummary/AccountSummary.js +++ b/src/components/AccountSummary/AccountSummary.js @@ -112,6 +112,7 @@ class AccountSummary extends PureComponent { /> )} +
{ )} -
- -
+
diff --git a/src/components/ConcentrationRisk/_ConcentrationRisk.scss b/src/components/ConcentrationRisk/_ConcentrationRisk.scss index a7f049456..e13126d6c 100644 --- a/src/components/ConcentrationRisk/_ConcentrationRisk.scss +++ b/src/components/ConcentrationRisk/_ConcentrationRisk.scss @@ -1,18 +1,13 @@ .concentration-risk-data { - width: 100%; display: flex; - &-table { - width: 50%; - margin-right: 100px; - - .data-table-container { - flex: 0 0 400px; - height: fit-content; - } + .bitfinex-table { + height: fit-content; + flex: 0 0 400px; } &-chart { + width: 100%; margin-left: 15px; .recharts-wrapper { @@ -28,19 +23,12 @@ } } -@media screen and (max-width: 1020px) { +@media screen and (max-width: 850px) { .concentration-risk-data { flex-wrap: wrap; - flex-direction: column; - align-items: center; - &-table { - width: 100%; - margin-right: 0; - - .bitfinex-table { - margin: 0 auto 25px auto; - } + .bitfinex-table { + margin: 0 auto 25px auto; } &-chart { diff --git a/src/components/Snapshots/TickersSnapshot/TickersSnapshot.js b/src/components/Snapshots/TickersSnapshot/TickersSnapshot.js index 7050f6f22..590cf51e4 100644 --- a/src/components/Snapshots/TickersSnapshot/TickersSnapshot.js +++ b/src/components/Snapshots/TickersSnapshot/TickersSnapshot.js @@ -30,7 +30,7 @@ const TickersSnapshot = ({ }) return ( -
+ <>
{t('positions.title')}
@@ -47,7 +47,7 @@ const TickersSnapshot = ({ />
-
+ ) } diff --git a/src/components/Snapshots/_Snapshots.scss b/src/components/Snapshots/_Snapshots.scss deleted file mode 100644 index 8ad58bf62..000000000 --- a/src/components/Snapshots/_Snapshots.scss +++ /dev/null @@ -1,26 +0,0 @@ -.tickers { - .tables-row { - display: flex; - flex-wrap: wrap; - flex-direction: row; - justify-content: space-between; - - &-item { - width: 49%; - margin-right: 0; - min-width: 300px; - } - } -} - -@media screen and (max-width: 1020px) { - .tickers { - .tables-row { - flex-direction: column; - - &-item { - width: 100% - } - } - } -} diff --git a/src/components/Wallets/Wallets.data.js b/src/components/Wallets/Wallets.data.js index 73b607919..6540b3f12 100644 --- a/src/components/Wallets/Wallets.data.js +++ b/src/components/Wallets/Wallets.data.js @@ -40,36 +40,34 @@ const WalletsData = ({ }) return ( -
-
-
-
{t('wallets.header.exchange')}
- -
-
-
{t('wallets.header.margin')}
- -
-
-
{t('wallets.header.funding')}
- -
-
-
{t('wallets.header.capital-raise')}
- -
+
+
+
{t('wallets.header.exchange')}
+ +
+
+
{t('wallets.header.margin')}
+ +
+
+
{t('wallets.header.funding')}
+ +
+
+
{t('wallets.header.capital-raise')}
+
) diff --git a/src/components/Wallets/_Wallets.scss b/src/components/Wallets/_Wallets.scss deleted file mode 100644 index c7df9bed8..000000000 --- a/src/components/Wallets/_Wallets.scss +++ /dev/null @@ -1,24 +0,0 @@ -.wallets { - .tables-row { - display: flex; - flex-wrap: wrap; - justify-content: space-between; - - &-item { - width: 49%; - margin-right: 0; - } - } -} - -@media screen and (max-width: 1020px) { - .wallets { - .tables-row { - flex-direction: column; - - &-item { - width: 100% - } - } - } -} diff --git a/src/styles/index.scss b/src/styles/index.scss index 566dd8c67..95bec7b5d 100644 --- a/src/styles/index.scss +++ b/src/styles/index.scss @@ -20,9 +20,7 @@ @import "components/Status/_Status.scss"; @import "components/SubAccounts/_SubAccounts.scss"; @import "components/TaxReport/_TaxReport.scss"; -@import "components/Wallets/_Wallets.scss"; @import "components/WeightedAverages/_WeightedAverages.scss"; -@import "components/Snapshots/_Snapshots.scss"; @import "components/TimeFrameDialog/_TimeFrameDialog.scss"; @import "components/GoToRangeDialog/_GoToRangeDialog.scss"; @import "components/ExtraInfoDialog/_ExtraInfoDialog.scss"; @@ -125,7 +123,7 @@ input[type=number] { .data-table-wrapper { display: flex; flex-direction: column; - max-width: 100%; + max-width: fit-content; } @media screen and (max-width: 770px) { diff --git a/src/ui/Charts/Chart/Chart.js b/src/ui/Charts/Chart/Chart.js index 4ae80fb66..ddfd0d1ad 100644 --- a/src/ui/Charts/Chart/Chart.js +++ b/src/ui/Charts/Chart/Chart.js @@ -110,8 +110,7 @@ class Chart extends React.PureComponent { const { t, data, - width, - height, + aspect, className, showLegend, isSumUpEnabled, @@ -132,10 +131,7 @@ class Chart extends React.PureComponent { return (
- + ({ + device: getDevice(state), + tableScroll: getTableScroll(state), +}) + +const mapDispatchToProps = { + showColumnsSum, + setColumnsWidth, +} + +export default compose( + connect(mapStateToProps, mapDispatchToProps), + withTranslation('translations'), +)(DataTable) diff --git a/src/ui/DataTable/DataTable.js b/src/ui/DataTable/DataTable.js index 3d10a39a1..664f07794 100644 --- a/src/ui/DataTable/DataTable.js +++ b/src/ui/DataTable/DataTable.js @@ -1,12 +1,4 @@ -import React, { - memo, - useRef, - useMemo, - useState, - useEffect, -} from 'react' -import { useTranslation } from 'react-i18next' -import { useDispatch, useSelector } from 'react-redux' +import React, { PureComponent } from 'react' import PropTypes from 'prop-types' import classNames from 'classnames' import { Menu } from '@blueprintjs/core' @@ -22,106 +14,88 @@ import { isEqual } from '@bitfinex/lib-js-util-base' import { getRowsConfig, getCellNoData, - DEFAULT_CONTAINER_WIDTH, - getCalculatedColumnWidths, singleColumnSelectedCheck, columnHasNumericValueCheck, } from 'utils/columns' import DEVICES from 'var/devices' -import { getDevice } from 'state/ui/selectors' import queryConstants from 'state/query/constants' -import { getTableScroll } from 'state/base/selectors' -import { showColumnsSum } from 'state/columns/actions' -import { updateErrorStatus } from 'state/status/actions' import CollapsedTable from 'ui/CollapsedTable/CollapsedTable' -const DataTable = ({ - numRows, - section, - isNoData, - isLoading, - className, - tableColumns, - defaultRowHeight, -}) => { - const { t } = useTranslation() - const dispatch = useDispatch() - const containerRef = useRef(null) - const device = useSelector(getDevice) - const tableScroll = useSelector(getTableScroll) - const [sumValue, setSumValue] = useState(null) - const [containerWidth, setContainerWidth] = useState(0) - const [selectedColumns, setSelectedColumns] = useState({}) - - useEffect(() => { +class DataTable extends PureComponent { + state = { + sumValue: null, + } + + selectedColumns = {} + + componentDidUpdate() { + const { showColumnsSum } = this.props + const { sumValue } = this.state + if (!_isNull(sumValue)) { - dispatch(showColumnsSum(sumValue)) - setSumValue(null) + showColumnsSum(sumValue) + this.clearSumValue() } - }, [dispatch, sumValue]) + } - useEffect(() => { - const onScreenSizeChanged = () => { - setContainerWidth(containerRef?.current?.offsetWidth ?? DEFAULT_CONTAINER_WIDTH) - } - onScreenSizeChanged() - window.addEventListener('resize', onScreenSizeChanged) + getCellData = (rowIndex, columnIndex) => { + const { tableColumns } = this.props - return () => { - window.removeEventListener('resize', onScreenSizeChanged) - } - }, []) + return tableColumns[columnIndex].copyText(rowIndex) + } - const columnWidths = useMemo( - () => getCalculatedColumnWidths(tableColumns, containerWidth), - [tableColumns, containerWidth], - ) + getCellSum = (rowIndex, columnIndex) => { + const { tableColumns } = this.props + const { isNumericValue } = tableColumns[columnIndex] + + if (isNumericValue) { + const colValue = +tableColumns[columnIndex].copyText(rowIndex) + this.setState(state => ({ + sumValue: state.sumValue + colValue, + })) + } + } - const getCellData = (rowIndex, columnIndex) => tableColumns[columnIndex]?.copyText(rowIndex) + clearSumValue = () => { + this.setState({ sumValue: null }) + } - const renderBodyContextMenu = (context) => { + renderBodyContextMenu = (context) => { + const { t, tableColumns } = this.props const isSingleColumnSelected = singleColumnSelectedCheck(context) const hasNumericValue = columnHasNumericValueCheck(context, tableColumns) const shouldShowSum = isSingleColumnSelected && hasNumericValue - let sum = 0 - - const getCellSum = (rowIndex, columnIndex) => { - const { isNumericValue } = tableColumns[columnIndex] - if (isNumericValue) { - const colValue = +tableColumns[columnIndex].copyText(rowIndex) - sum += colValue - setSumValue(sum) - } - } return ( {shouldShowSum && ( )} ) } - const onSelection = (selection) => { + onSelection = (selection) => { const isWholeColumnSelected = selection.find(({ rows }) => !rows) + if (!isWholeColumnSelected) { - setSelectedColumns({}) + this.selectedColumns = {} return } - const selectedCols = selection.reduce((acc, sel) => { + this.selectedColumns = selection.reduce((acc, sel) => { const { cols } = sel const [start, end] = cols + let cur = start while (cur <= end) { @@ -131,24 +105,26 @@ const DataTable = ({ return acc }, {}) - setSelectedColumns(selectedCols) } - const onCopy = () => { + onCopy = () => { + const { tableColumns, t } = this.props + navigator.clipboard.readText().then((text) => { const columnHeaders = [] - const selectedCols = _keys(selectedColumns).sort() - const start = +selectedCols[0] - const end = +selectedCols[selectedCols.length - 1] + const selectedColumns = _keys(this.selectedColumns).sort() + const start = +selectedColumns[0] + const end = +selectedColumns[selectedColumns.length - 1] let cur = start while (cur <= end) { - if (selectedColumns[cur]) { + if (this.selectedColumns[cur]) { const columnName = t(tableColumns[cur].name) columnHeaders.push(columnName) } else { columnHeaders.push('') } + cur += 1 } @@ -158,69 +134,107 @@ const DataTable = ({ const headersText = `${columnHeaders.join('\t')}${newLineChar}` navigator.clipboard.writeText(`${headersText}${text}`).catch((err) => { - dispatch(updateErrorStatus(err)) + // eslint-disable-next-line no-console + console.error(err) }) }).catch((err) => { - dispatch(updateErrorStatus(err)) + // eslint-disable-next-line no-console + console.error(err) }) } - const getCellClipboardData = (row, col) => tableColumns[col].copyText(row) + getCellClipboardData = (row, col) => { + const { tableColumns } = this.props - const columns = tableColumns - if (isNoData && !isLoading) { - const noDataTitle = isEqual(section, queryConstants.MENU_TICKERS) - ? t('column.noHistory') - : t('column.noResults') - columns[0].renderer = () => getCellNoData(noDataTitle) + return tableColumns[col].copyText(row) } - if (device === DEVICES.PHONE && columns.length >= 2) { - return + onColumnWidthChanged = (index, width) => { + const { section, tableColumns, setColumnsWidth } = this.props + + if (section) { + const updatedColumn = { + ...tableColumns[index], + width, + } + tableColumns[index] = updatedColumn + setColumnsWidth({ section, tableColumns }) + } } - return ( -
+ render() { + const { + t, + device, + numRows, + section, + isNoData, + isLoading, + className, + tableScroll, + tableColumns, + defaultRowHeight, + } = this.props + const columnWidths = tableColumns.map(column => column.width) + + if (isNoData && !isLoading) { + const noDataTitle = isEqual(section, queryConstants.MENU_TICKERS) + ? t('column.noHistory') + : t('column.noResults') + tableColumns[0].renderer = () => getCellNoData(noDataTitle) + } + + if (device === DEVICES.PHONE && tableColumns.length >= 2) { + return + } + + return ( - {columns.map(column => ( + {tableColumns.map(column => ( ))}
-
- ) + ) + } } +const TABLE_COLUMNS_PROPS = PropTypes.shape({ + id: PropTypes.string.isRequired, + name: PropTypes.string, + nameStr: PropTypes.string, + renderer: PropTypes.func.isRequired, + copyText: PropTypes.func.isRequired, + width: PropTypes.number, + isNumericValue: PropTypes.bool, +}) + DataTable.propTypes = { className: PropTypes.string, section: PropTypes.string, numRows: PropTypes.number.isRequired, - tableColumns: PropTypes.arrayOf(PropTypes.shape({ - id: PropTypes.string.isRequired, - name: PropTypes.string, - nameStr: PropTypes.string, - renderer: PropTypes.func.isRequired, - copyText: PropTypes.func.isRequired, - isNumericValue: PropTypes.bool, - })).isRequired, + tableColumns: PropTypes.arrayOf(TABLE_COLUMNS_PROPS).isRequired, + device: PropTypes.string.isRequired, + t: PropTypes.func.isRequired, + setColumnsWidth: PropTypes.func.isRequired, + showColumnsSum: PropTypes.func.isRequired, + tableScroll: PropTypes.bool.isRequired, defaultRowHeight: PropTypes.number, isNoData: PropTypes.bool, isLoading: PropTypes.bool, @@ -234,4 +248,4 @@ DataTable.defaultProps = { defaultRowHeight: 26, } -export default memo(DataTable) +export default DataTable diff --git a/src/ui/DataTable/_DataTable.scss b/src/ui/DataTable/_DataTable.scss index bc08582b2..5eafff30a 100644 --- a/src/ui/DataTable/_DataTable.scss +++ b/src/ui/DataTable/_DataTable.scss @@ -1,9 +1,3 @@ -.data-table-container { - width: 100%; - display: flex; - flex-direction: column; -} - .bitfinex-table { width: fit-content; min-height: unset; diff --git a/src/ui/DataTable/index.js b/src/ui/DataTable/index.js index cefbf971f..ff496e83e 100644 --- a/src/ui/DataTable/index.js +++ b/src/ui/DataTable/index.js @@ -1 +1,3 @@ -export { default } from './DataTable' +import DataTable from './DataTable.container' + +export default DataTable diff --git a/src/utils/columns.js b/src/utils/columns.js index b2dc65d1a..7ec81cbb8 100644 --- a/src/utils/columns.js +++ b/src/utils/columns.js @@ -612,26 +612,6 @@ export const formatSumUpValue = value => { return parseFloat(value).toFixed(8).replace(/\d(?=(\d{3})+\.)/g, '$&,') } -export const MIN_COLUMN_WIDTH = 100 - -export const DEFAULT_CONTAINER_WIDTH = 1000 - -export const getCalculatedColumnWidths = (columns, containerWidth) => { - if (columns.length === 0) { - return [] - } - - const avgWidth = Math.floor(containerWidth / columns.length) - if (avgWidth < MIN_COLUMN_WIDTH) { - return _map(columns, () => MIN_COLUMN_WIDTH) - } - - const columnWidths = _map(columns, () => avgWidth) - columnWidths[0] = containerWidth - ((columns.length - 1) * avgWidth) - - return columnWidths -} - export default { COLUMN_WIDTHS, pickColumnsWidth, @@ -643,5 +623,4 @@ export default { columnHasNumericValueCheck, formatSumUpValue, getTooltipContent, - getCalculatedColumnWidths, }