From 25e4ff135aa0dea79235b1d1c76bb8e2cf706f36 Mon Sep 17 00:00:00 2001 From: sunilkotiyaibm Date: Fri, 13 Dec 2019 20:14:34 +0530 Subject: [PATCH 1/4] feat(table): 3715-Resize-DataTable-Column #135 --- .../__snapshots__/Dashboard.story.storyshot | 320 +- src/components/DataTable/_data-table.scss | 19 + src/components/Table/TableHead/TableHead.jsx | 35 +- .../Table/__snapshots__/Table.story.storyshot | 2696 ++++++++++++++++- .../__snapshots__/TableCard.story.storyshot | 1068 +++++-- 5 files changed, 3728 insertions(+), 410 deletions(-) diff --git a/src/components/Dashboard/__snapshots__/Dashboard.story.storyshot b/src/components/Dashboard/__snapshots__/Dashboard.story.storyshot index 908738276d..419018919c 100644 --- a/src/components/Dashboard/__snapshots__/Dashboard.story.storyshot +++ b/src/components/Dashboard/__snapshots__/Dashboard.story.storyshot @@ -1047,16 +1047,20 @@ exports[`Storybook Snapshot tests and console checks Storyshots Watson IoT|Dashb > + + + - - - + + + - - - + + ); +}); + +TableHeader.propTypes = { + /** + * Specify an optional className to be applied to the container node + */ + className: PropTypes.string, + + /** + * Pass in children that will be embedded in the table header label + */ + children: PropTypes.node, + + /** + * Specify whether this header is one through which a user can sort the table + */ + isSortable: PropTypes.bool, + + /** + * Specify whether this header is the header by which a table is being sorted + * by + */ + isSortHeader: PropTypes.bool, + + /** + * Hook that is invoked when the header is clicked + */ + onClick: PropTypes.func, + + /** + * Specify the scope of this table header. You can find more info about this + * attribute at the following URL: + * https://developer.mozilla.org/en-US/docs/Web/HTML/Element/th#attr-scope + */ + scope: PropTypes.string, + + /** + * Specify which direction we are currently sorting by, should be one of DESC, + * NONE, or ASC. + */ + sortDirection: PropTypes.oneOf(Object.values(sortStates)), + + /** + * Supply a method to translate internal strings with your i18n tool of + * choice. Translation keys are avabile on the `translationKeys` field for + * this component. + */ + translateWithId: PropTypes.func, +}; + +TableHeader.defaultProps = { + className:'', + children:'', + isSortHeader:false, + isSortable: false, + sortDirection:'', + onClick:'', + scope: 'col', + translateWithId, +}; + +TableHeader.translationKeys = Object.values(translationKeys); + +TableHeader.displayName = 'TableHeader'; + +export default TableHeader; \ No newline at end of file From e4c4b2bc3a234a839db57772e5f779cd9c08b569 Mon Sep 17 00:00:00 2001 From: sunilkotiyaibm Date: Mon, 6 Jan 2020 18:04:21 +0530 Subject: [PATCH 3/4] feat(table): 3715-Resize-DataTable-Column #135 --- src/components/DataTable/_data-table.scss | 7 +-- src/components/Table/TableHead/TableHead.jsx | 48 ++++++++++---------- 2 files changed, 28 insertions(+), 27 deletions(-) diff --git a/src/components/DataTable/_data-table.scss b/src/components/DataTable/_data-table.scss index 6189efd4ce..005f3605ac 100644 --- a/src/components/DataTable/_data-table.scss +++ b/src/components/DataTable/_data-table.scss @@ -103,16 +103,17 @@ html[dir='rtl'] { } .column-resize-wrapper { top: 0; - right: -8px; - width: 10px; + right: -$spacing-01; + width: $spacing-02; cursor: col-resize; height: 100%; z-index: 1; position: absolute; user-select: none; + outline: none; -moz-user-select: none; -webkit-user-select: none; &:hover { - background-color: #34a9db; + background-color: $ui-05; } } diff --git a/src/components/Table/TableHead/TableHead.jsx b/src/components/Table/TableHead/TableHead.jsx index c0b3c13b27..b7bab08d78 100644 --- a/src/components/Table/TableHead/TableHead.jsx +++ b/src/components/Table/TableHead/TableHead.jsx @@ -153,40 +153,39 @@ const TableHead = ({ hasResize, }) => { const filterBarActive = activeBar === 'filter'; - const utilsVar ={ + const headerVars ={ startX: 0, pressed: false, index : 0 } - const [state, setState] = useState({TableHeader:[]}); - const elementsRef = useRef(ordering.map(() => createRef())); + const [columnWidth, setColumnWidth] = useState({}); + const columnRef = useRef(ordering.map(() => createRef())); + useEffect(() => { - const nextWidth = elementsRef.current.map( + const nextWidth = columnRef.current.map( ref => ref.current.getBoundingClientRect().width ); - setState(nextWidth); + setColumnWidth(nextWidth); }, []); - const onMouseMovecallback = (e) => { - if (utilsVar.pressed) { - setState(psd => ({ ...psd, - [utilsVar.index]: state[utilsVar.index] + (e.x - utilsVar.startX), - [utilsVar.index + 1 ]: state[utilsVar.index + 1] - (e.x - utilsVar.startX), - })); - } - }; - const onMouseUpcallback = () => { - if (utilsVar.pressed) { - utilsVar.pressed = false; - } + const onMouseUpcallback = (e) => { + if (headerVars.pressed) { + setColumnWidth(cols => ({ ...cols, + [headerVars.index]: columnWidth[headerVars.index] + (e.x - headerVars.startX), + [headerVars.index + 1 ]: columnWidth[headerVars.index + 1] - (e.x - headerVars.startX), + })); + headerVars.pressed = false; + } + document.removeEventListener('mouseup', onMouseUpcallback, true); } + const onMouseDownCallback = (e, index) =>{ - utilsVar.pressed = true; - utilsVar.startX = e.clientX; - utilsVar.index = index; - document.addEventListener('mousemove', onMouseMovecallback, true); + headerVars.pressed = true; + headerVars.startX = e.clientX; + headerVars.index = index; document.addEventListener('mouseup', onMouseUpcallback, true); } + return ( @@ -218,8 +217,8 @@ const TableHead = ({ data-column={matchingColumnMeta.id} isSortable={matchingColumnMeta.isSortable} isSortHeader={hasSort} - ref={elementsRef.current[i]} - style={{width: state[i]}} + ref={columnRef.current[i]} + style={{width: columnWidth[i]}} onClick={() => { if (matchingColumnMeta.isSortable && onChangeSort) { onChangeSort(matchingColumnMeta.id); @@ -234,8 +233,9 @@ const TableHead = ({ > {matchingColumnMeta.name} {hasResize && i < ordering.length-1 ? ( -
onMouseDownCallback(e,i)} + onMouseUp={(e) => onMouseUpcallback(e,i)} tabIndex="0"/> ): null} From 00ea95343481cae782353926877d82978b0b29b2 Mon Sep 17 00:00:00 2001 From: sunilkotiyaibm Date: Fri, 10 Jan 2020 19:45:48 +0530 Subject: [PATCH 4/4] feat(table): 3715-Resize-DataTable-Column #135 --- src/components/Table/TableHead/TableHead.jsx | 88 +++++++++++--------- 1 file changed, 48 insertions(+), 40 deletions(-) diff --git a/src/components/Table/TableHead/TableHead.jsx b/src/components/Table/TableHead/TableHead.jsx index b7bab08d78..1477459b35 100644 --- a/src/components/Table/TableHead/TableHead.jsx +++ b/src/components/Table/TableHead/TableHead.jsx @@ -1,4 +1,4 @@ -import React,{useRef, useState,useEffect,createRef } from 'react'; +import React, { useState, useEffect, createRef } from 'react'; import PropTypes from 'prop-types'; import { DataTable, Checkbox } from 'carbon-components-react'; import isNil from 'lodash/isNil'; @@ -11,7 +11,7 @@ import { tableTranslateWithId } from '../../../utils/componentUtilityFunctions'; import ColumnHeaderRow from './ColumnHeaderRow/ColumnHeaderRow'; import FilterHeaderRow from './FilterHeaderRow/FilterHeaderRow'; -import TableHeader from "./TableHeader"; +import TableHeader from './TableHeader'; const { TableHead: CarbonTableHead, TableRow, TableExpandHeader } = DataTable; @@ -153,39 +153,49 @@ const TableHead = ({ hasResize, }) => { const filterBarActive = activeBar === 'filter'; - const headerVars ={ - startX: 0, - pressed: false, - index : 0 - } const [columnWidth, setColumnWidth] = useState({}); - const columnRef = useRef(ordering.map(() => createRef())); - + const columnRef = ordering.map(() => createRef()); + const columnVar = { + index: 0, + element: Node, + startX: 0, + }; + const mousemoveCallback = e => { + const leftColumn = columnRef[columnVar.index].current.getBoundingClientRect(); + const rightColumn = columnRef[ + columnVar.index + ].current.nextElementSibling.getBoundingClientRect(); + const mousePosition = e.clientX + columnVar.startX; + if (mousePosition >= 50 && mousePosition <= leftColumn.width + rightColumn.width - 50) { + columnVar.element.style.left = `${mousePosition}px`; + } else { + document.onmousemove = null; + } + }; + const mouseupCallback = () => { + document.onmouseup = null; + document.onmousemove = null; + const resizePosition = columnVar.element.offsetLeft + columnVar.element.clientWidth; + setColumnWidth(psd => ({ + ...psd, + [columnVar.index]: resizePosition, + [columnVar.index + 1]: + columnWidth[columnVar.index + 1] + (columnWidth[columnVar.index] - resizePosition), + })); + }; + const onMouseUpCallback = (e, index) => { + columnVar.element = e.target; + columnVar.index = index; + columnVar.startX = columnVar.element.offsetLeft - e.clientX; + document.onmouseup = mouseupCallback; + document.onmousemove = mousemoveCallback; + }; useEffect(() => { - const nextWidth = columnRef.current.map( - ref => ref.current.getBoundingClientRect().width + const nextWidth = columnRef.map(ref => + ref.current ? ref.current.getBoundingClientRect().width : undefined ); - setColumnWidth(nextWidth); + setColumnWidth(nextWidth); }, []); - - const onMouseUpcallback = (e) => { - if (headerVars.pressed) { - setColumnWidth(cols => ({ ...cols, - [headerVars.index]: columnWidth[headerVars.index] + (e.x - headerVars.startX), - [headerVars.index + 1 ]: columnWidth[headerVars.index + 1] - (e.x - headerVars.startX), - })); - headerVars.pressed = false; - } - document.removeEventListener('mouseup', onMouseUpcallback, true); - } - - const onMouseDownCallback = (e, index) =>{ - headerVars.pressed = true; - headerVars.startX = e.clientX; - headerVars.index = index; - document.addEventListener('mouseup', onMouseUpcallback, true); - } - return ( @@ -205,7 +215,7 @@ const TableHead = ({ ) : null} - {ordering.map((item,i) => { + {ordering.map((item, i) => { const matchingColumnMeta = columns.find(column => column.id === item.columnId); const hasSort = matchingColumnMeta && sort && sort.columnId === matchingColumnMeta.id; const align = @@ -217,8 +227,8 @@ const TableHead = ({ data-column={matchingColumnMeta.id} isSortable={matchingColumnMeta.isSortable} isSortHeader={hasSort} - ref={columnRef.current[i]} - style={{width: columnWidth[i]}} + ref={columnRef[i]} + style={{ width: columnWidth[i] }} onClick={() => { if (matchingColumnMeta.isSortable && onChangeSort) { onChangeSort(matchingColumnMeta.id); @@ -232,12 +242,10 @@ const TableHead = ({ })} > {matchingColumnMeta.name} - {hasResize && i < ordering.length-1 ? ( -
onMouseDownCallback(e,i)} - onMouseUp={(e) => onMouseUpcallback(e,i)} - tabIndex="0"/> - ): null} + {hasResize && i < ordering.length - 1 ? ( + // eslint-disable-next-line jsx-a11y/no-static-element-interactions +
onMouseUpCallback(e, i)} /> + ) : null} ) : null; })}