@zohodesk/library-platform 1.1.3 → 1.1.6-temp-1

package/es/library/dot/components/table-list/frameworks/hooks/useTableRowReorder.js

@@ -0,0 +1,105 @@
+import { useCallback } from 'react';
+import TableListEventConstants from "../../../../../../cc/table-list/Constants";
+import { useRowData } from "./useRowData";
+import { useDropIndicator } from "./useDropIndicator";
+import { reorderArray, setTableInteractionClass, adjustHelperElementPosition, getDropIndicator } from "../utils/reOrder"; // @ts-ignore
+
+import style from "./../ui/css/TableList.module.css";
+export function useTableRowReorder(_ref) {
+  let {
+    rows,
+    TableRef,
+    dispatch
+  } = _ref;
+  const [rowData, setRowData] = useRowData(rows);
+  const [dropIndicator, setDropIndicator] = useDropIndicator();
+  const {
+    TABLE_LIST_ROW_DRAG_START,
+    TABLE_LIST_ROW_DRAG_END
+  } = TableListEventConstants;
+
+  const handleSortStart = _ref2 => {
+    let {
+      index
+    } = _ref2;
+    setTableInteractionClass(TableRef, style.preventTextSelection, true);
+    setTableInteractionClass(TableRef, style.preventPointerEvents, true);
+    adjustHelperElementPosition(TableRef, getHelperClass());
+    dispatch({
+      type: TABLE_LIST_ROW_DRAG_START,
+      payload: {
+        index
+      }
+    });
+  };
+
+  const handleSortEnd = _ref3 => {
+    let {
+      oldIndex,
+      newIndex
+    } = _ref3;
+    setTableInteractionClass(TableRef, style.preventTextSelection, false);
+    setTableInteractionClass(TableRef, style.preventPointerEvents, false);
+    let arr = reorderArray(rowData, oldIndex, newIndex);
+    setRowData(arr);
+    setDropIndicator({
+      index: null,
+      position: ''
+    });
+    dispatch({
+      type: TABLE_LIST_ROW_DRAG_END,
+      payload: {
+        oldIndex,
+        newIndex
+      }
+    });
+  };
+
+  const handleSortOver = _ref4 => {
+    let {
+      index,
+      oldIndex,
+      newIndex
+    } = _ref4;
+    const dropIndicatorData = getDropIndicator({
+      index,
+      oldIndex,
+      newIndex,
+      rowsLength: rows.length
+    });
+    setDropIndicator({
+      index: dropIndicatorData.index,
+      position: dropIndicatorData.position
+    });
+  };
+
+  const getHelperDimensions = useCallback(_ref5 => {
+    let {
+      node
+    } = _ref5;
+    return {
+      height: node.offsetHeight,
+      width: TableRef.current.offsetWidth
+    };
+  }, [TableRef]);
+  const getHelperContainer = useCallback(() => {
+    return TableRef.current;
+  }, [TableRef]);
+
+  const getHelperClass = () => {
+    return style.dragging;
+  };
+
+  return {
+    rowData,
+    dropIndicator,
+    handleSortStart,
+    handleSortEnd,
+    handleSortOver,
+    getHelperDimensions,
+    setRowData,
+    setDropIndicator,
+    getHelperContainer,
+    getHelperClass
+  };
+}

package/es/library/dot/components/table-list/frameworks/ui/TableListView.js

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useRef } from 'react';
 import Table from '@zohodesk-private/desk-components/es/table/Table/Table';
 import Header from "./sub-components/Header";
 import Body from "./sub-components/Body";
@@ -7,7 +7,10 @@ import NoData from "./sub-components/NoData";
 import ErrorState from "./sub-components/ErrorState";
 import Loading from "./sub-components/Loading";
 import ColumnResizingLine from "./sub-components/ColumnResizingLine";
-import handleScroll from "./handlers/HandleScroll"; // @ts-ignore
+import handleScroll from "./handlers/HandleScroll";
+import { useTableRowReorder } from "../hooks/useTableRowReorder";
+import { SortableContainer } from 'react-sortable-hoc';
+import getTableListClassName from "../utils/getTableListClassName"; // @ts-ignore
 
 import style from "./css/TableList.module.css";
 
@@ -16,13 +19,16 @@ function TableListView(_ref2, _ref) {
     state,
     helpers
   } = _ref2;
+  const TableRef = useRef(null);
   const {
     dispatch
   } = helpers;
   const {
     data,
     isLoading,
+    isReOrderLoading,
     resizerState,
+    reOrderConfig,
     selectionConfig,
     isFlexibleColumns,
     rowCursor,
@@ -45,17 +51,26 @@ function TableListView(_ref2, _ref) {
   const isDataEmpty = !hasRows && !isLoading && !isError; // TODO: derive from state.properties
 
   const isKeyboardControlsEnabled = keyboardControlsConfig.isEnabled;
+  const isReorderEnabled = reOrderConfig.isEnabled;
+  const isSelectionEnabled = selectionConfig.isEnabled;
+  const className = getTableListClassName({
+    isKeyboardControlsEnabled,
+    isReorderEnabled,
+    isSelectionEnabled
+  });
   return /*#__PURE__*/React.createElement("div", {
-    className: style.wrapper,
+    className: `${style.wrapper} ${style[className]}`,
     ref: _ref
   }, /*#__PURE__*/React.createElement(Table, {
+    ref: TableRef,
     $event_onScroll: e => handleScroll(dispatch, {
       scrollEvent: e
     })
   }, renderHeader({
     headers,
     resizerState,
-    selectionConfig,
+    isReorderEnabled,
+    isSelectionEnabled,
     selection,
     isKeyboardControlsEnabled,
     isFlexibleColumns,
@@ -63,15 +78,19 @@ function TableListView(_ref2, _ref) {
     rowActionsColumnWidth,
     dispatch
   }), renderBody({
+    TableRef,
+    dispatch,
     headers,
     rows,
     isFlexibleColumns,
-    selectionConfig,
+    isReorderEnabled,
+    isSelectionEnabled,
     isKeyboardControlsEnabled,
     rowCursor,
     hasRowActions,
     rowActionsColumnWidth,
-    hasRows
+    hasRows,
+    isReOrderLoading
   }), /*#__PURE__*/React.createElement(NoData, {
     isDataEmpty: isDataEmpty,
     emptyStateUiType: emptyStateUiType
@@ -87,7 +106,8 @@ function renderHeader(_ref3) {
   let {
     headers,
     resizerState,
-    selectionConfig,
+    isReorderEnabled,
+    isSelectionEnabled,
     selection,
     isKeyboardControlsEnabled,
     isFlexibleColumns,
@@ -96,7 +116,8 @@ function renderHeader(_ref3) {
     dispatch
   } = _ref3;
   return /*#__PURE__*/React.createElement(Header, {
-    isSelectionEnabled: selectionConfig.isEnabled,
+    isReorderEnabled: isReorderEnabled,
+    isSelectionEnabled: isSelectionEnabled,
     isResizerEnabled: resizerState.isEnabled,
     isKeyboardControlsEnabled: isKeyboardControlsEnabled,
     currentlyResizingColumn: resizerState.currentlyResizingColumn,
@@ -111,30 +132,79 @@ function renderHeader(_ref3) {
   });
 }
 
+const SortableTableContainer = SortableContainer(props => {
+  const {
+    hasRows,
+    isFlexibleColumns,
+    children
+  } = props;
+  return /*#__PURE__*/React.createElement(Body, {
+    hasRows: hasRows,
+    isFlexibleColumns: isFlexibleColumns
+  }, children);
+});
+
 function renderBody(_ref4) {
   let {
+    TableRef,
+    dispatch,
     headers,
     rows,
     isFlexibleColumns,
-    selectionConfig,
+    isReorderEnabled,
+    isSelectionEnabled,
     isKeyboardControlsEnabled,
     rowCursor,
     hasRowActions,
     rowActionsColumnWidth,
-    hasRows
+    hasRows,
+    isReOrderLoading
   } = _ref4;
-  return /*#__PURE__*/React.createElement(Body, {
+  const {
+    rowData,
+    dropIndicator,
+    handleSortStart,
+    handleSortEnd,
+    handleSortOver,
+    getHelperDimensions,
+    getHelperContainer,
+    getHelperClass
+  } = useTableRowReorder({
+    rows,
+    TableRef,
+    dispatch
+  });
+
+  if (!hasRows) {
+    return null;
+  }
+
+  return /*#__PURE__*/React.createElement(SortableTableContainer, {
     hasRows: hasRows,
-    isFlexibleColumns: isFlexibleColumns
+    isFlexibleColumns: isFlexibleColumns,
+    helperClass: getHelperClass(),
+    useDragHandle: true,
+    helperContainer: getHelperContainer,
+    onSortStart: handleSortStart,
+    onSortEnd: handleSortEnd,
+    onSortOver: handleSortOver,
+    getHelperDimensions: getHelperDimensions,
+    axis: "y",
+    lockAxis: "y",
+    lockToContainerEdges: true,
+    distance: 1
   }, /*#__PURE__*/React.createElement(Rows, {
     headers: headers,
-    rows: rows,
+    rows: rowData,
     isFlexibleColumns: isFlexibleColumns,
-    isSelectionEnabled: selectionConfig.isEnabled,
+    isReorderEnabled: isReorderEnabled,
+    isSelectionEnabled: isSelectionEnabled,
     rowCursor: rowCursor,
     hasRowActions: hasRowActions,
     rowActionsColumnWidth: rowActionsColumnWidth,
-    isKeyboardControlsEnabled: isKeyboardControlsEnabled
+    isKeyboardControlsEnabled: isKeyboardControlsEnabled,
+    dropIndicator: dropIndicator,
+    isReOrderLoading: isReOrderLoading
   }));
 }
 

package/es/library/dot/components/table-list/frameworks/ui/css/TableList.module.css

@@ -1,36 +1,151 @@
+/* Default: no special styles */
+.tableListRow {
+    /*  */
+}
+
+/* Keyboard + Reorder + Selection */
+.tableListRow-kbdReorderSelection {
+    --local-tableList-selectionColumn-width: 56px;
+    --local-tableList-selectionColumn-left: 24px;
+    --local-tableList-reorder-left: 8px;
+}
+
+/* Keyboard + Reorder, no Selection */
+.tableListRow-kbdReorder {
+    --local-tableList-reorder-left: 8px;
+}
+
+/* Keyboard + Selection, no Reorder */
+.tableListRow-kbdSelection {
+    --local-tableList-row-paddingLeft: 8px;
+    --local-tableList-selectionColumn-width: 72px;
+    --local-tableList-selectionColumn-left: 8px;
+    --local-tableList-selectionColumn-paddingRight: 8px;
+    --local-tableList-selectionColumn-justifyContent: center;
+}
+
+/* Keyboard only */
+.tableListRow-kbd {
+    /*  */
+}
+
+/* Reorder + Selection, no Keyboard */
+.tableListRow-reorderSelection {
+    --local-tableList-selectionColumn-width: 56px;
+    --local-tableList-selectionColumn-left: 24px;
+    --local-tableList-selectionColumn-paddingRight: 16px;
+    --local-tableList-reorder-paddingLeft: 8px;
+}
+
+/* Reorder only */
+.tableListRow-reorder {
+    --local-tableList-reorder-paddingLeft: 8px;
+}
+
+/* Selection only */
+.tableListRow-selection {
+    --local-tableList-selectionColumn-justifyContent: center;
+}
+
+/* Default: no special styles */
+.tableListHeader {
+    /*  */
+}
+
+/* Keyboard + Reorder + Selection */
+.tableListHeader-kbdReorderSelection {
+    --local-tableList-reorderHeader-paddingRight: 8px;
+    --local-tableList-massActionHeader-left: 24px;
+    --local-tableList-reorderHeader-left: 8px;
+    --local-tableList-reorderHeader-width: 16px;
+
+    --local-tableList-massActionHeader-left: 24px;
+    --local-tableList-massActionHeader-paddingRight: 24px;
+    --local-tableList-massActionHeader-width: 56px;
+}
+
+/* Keyboard + Reorder, no Selection */
+.tableListHeader-kbdReorder {
+    --local-tableList-reorderHeader-left: 8px;
+    --local-tableList-reorderHeader-paddingRight: 8px;
+    --local-tableList-reorderHeader-width: 16px;
+}
+
+/* Reorder only */
+.tableListHeader-reorder {
+    --local-tableList-reorderHeader-width: 24px;
+}
+
+/* Keyboard + Selection, no Reorder */
+.tableListHeader-kbdSelection {
+    --local-tableList-header-paddingLeft: 8px;
+    --local-tableList-massActionHeader-left: 8px;
+    --local-tableList-massActionHeader-paddingRight: 8px;
+    --local-tableList-massActionHeader-width: 72px;
+}
+
+/* Keyboard only */
+.tableListHeader-kbd {
+    --local-tableList-header-paddingLeft: 24px;
+}
+
+/* Reorder + Selection, no Keyboard */
+.tableListHeader-reorderSelection {
+    --local-tableList-reorderHeader-width: 24px;
+    --local-tableList-massActionHeader-left: 24px;
+    --local-tableList-massActionHeader-paddingRight: 24px;
+    --local-tableList-massActionHeader-width: 56px;
+}
+
+/* Selection only */
+.tableListHeader-selection {
+    /*  */
+}
+
 .loader {
     padding: var(--zd_size40) 0 
 }
+
 .wrapper {
     height: 100% ;
     width: 100% ;
     position: relative
 }
+
 .resizerSpace {
     width: calc(var(--local_table_resizer_extra_space, 0) * var(--zd_size1));
     flex-shrink: 0
 }
+
 .contentWrapper {
     composes: sticky from '~@zohodesk/components/es/common/common.module.css';
 }
+
 [dir=ltr] .contentWrapper {
     left: 0 ;
 }
+
 [dir=rtl] .contentWrapper {
     right: 0 ;
 }
+
 .initialLoading {
     height: calc(100% - (var(--zd_size100)))
 }
+
 .emptyContent {
     padding: var(--zd_size160) 0 var(--zd_size60) 
 }
+
 .errorContent {
     padding: var(--zd_size60) 0 
 }
-.headerWithActions, .fieldWithActions {
+
+.headerWithActions,
+.fieldWithActions {
     gap: var(--zd_size6) 
 }
+
 .actions {
     gap: var(--zd_size8) 
 }
@@ -38,9 +153,133 @@
 .rowCursor_default {
     cursor: default
 }
+
 .rowCursor_pointer {
     cursor: pointer
 }
+
 .rowCursor_not-allowed {
     cursor: not-allowed
+}
+
+.preventTextSelection {
+    -webkit-user-select: none;
+    -moz-user-select: none;
+    -ms-user-select: none;
+    user-select: none;
+}
+
+.preventPointerEvents {
+    pointer-events: none;
+}
+
+.dragging {
+    overflow: hidden;
+    box-shadow: var(--local_tablelist_box_shadow);
+}
+
+:global(.GLOBAL_ZDDC_tableList).dragging .dragHandleContainer {
+    /* css:theme-validation:ignore */
+    color: var(--local_drag_handle_hover_color);
+    background-color: var(--local_drag_handle_dragging_bg);
+}
+
+:global(.GLOBAL_ZDDC_tableList).dragging .dragHandleContainer,
+:global(.GLOBAL_ZDDC_tableList:hover) .dragHandleContainer,
+:global(.GLOBAL_ZDDC_tableList:focus-within) .dragHandleContainer {
+    visibility: visible;
+    opacity: 1;
+}
+
+.dragHandleContainer {
+    opacity: 0;
+    visibility: hidden;
+}
+
+.dragHandleWrapper {
+    align-self: stretch;
+    composes: sticky from '~@zohodesk/components/es/common/common.module.css';
+    z-index: 1;
+    /* css:theme-validation:ignore */
+    background-color: var(--local_tablelist_bg);
+}
+
+[dir=ltr] .dragHandleWrapper {
+    left: var(--local-tableList-reorder-left, 0);
+    padding: 0 var(--local-tableList-reorder-paddingRight, 0) 0 var(--local-tableList-reorder-paddingLeft, 0);
+}
+
+[dir=rtl] .dragHandleWrapper {
+    right: var(--local-tableList-reorder-left, 0);
+    padding: 0 var(--local-tableList-reorder-paddingLeft, 0) 0 var(--local-tableList-reorder-paddingRight, 0);
+}
+
+.rowDropIndicator {
+    width: 100% ;
+    height: var(--zd_size2) ;
+    /* css:theme-validation:ignore */
+    position: absolute;
+    z-index: 2;
+    background-color: var(--local_tablelist_reorder_placeholderline_bg);
+}
+
+.dropIndicatorTop {
+    top: 0 ;
+}
+
+.dropIndicatorBottom {
+    bottom: calc( var(--zd_size3) * -1 ) ;
+}
+
+.row {
+    --local_padding_left: var(--local-tableList-row-paddingLeft);
+}
+
+.tableListSelectContainer {
+    --local_column_width: var(--local-tableList-selectionColumn-width);
+    justify-content: var(--local-tableList-selectionColumn-justifyContent, start);
+}
+
+[dir=ltr] .tableListSelectContainer {
+    left: var(--local-tableList-selectionColumn-left, 0);
+    padding-left: var(--local-tableList-selectionColumn-paddingLeft, 0);
+    padding-right: var(--local-tableList-selectionColumn-paddingRight, 0);
+}
+
+[dir=rtl] .tableListSelectContainer {
+    right: var(--local-tableList-selectionColumn-left, 0);
+    padding-right: var(--local-tableList-selectionColumn-paddingLeft, 0);
+    padding-left: var(--local-tableList-selectionColumn-paddingRight, 0);
+}
+
+.header {
+    --local_padding_left: var(--local-tableList-header-paddingLeft);
+}
+
+.reOrderHeader {
+    --local_column_width: var(--local-tableList-reorderHeader-width);
+}
+
+[dir=ltr] .reOrderHeader {
+    left: var(--local-tableList-reorderHeader-left, 0);
+    padding-right: var(--local-tableList-reorderHeader-paddingRight, 0);
+}
+
+[dir=rtl] .reOrderHeader {
+    right: var(--local-tableList-reorderHeader-left, 0);
+    padding-left: var(--local-tableList-reorderHeader-paddingRight, 0);
+}
+
+.massActionHeader {
+    --local_column_width: var(--local-tableList-massActionHeader-width);
+}
+
+[dir=ltr] .massActionHeader {
+    left: var(--local-tableList-massActionHeader-left, 0);
+    padding-right: var(--local-tableList-massActionHeader-paddingRight, 0);
+}
+
+[dir=rtl] .massActionHeader {
+    right: var(--local-tableList-massActionHeader-left, 0);
+    padding-left: var(--local-tableList-massActionHeader-paddingRight, 0);
 }

package/es/library/dot/components/table-list/frameworks/ui/sub-components/Header.js

@@ -1,20 +1,18 @@
 import React from 'react';
-import TableHeader from '@zohodesk-private/desk-components/es/table/TableHeader/TableHeader'; // import TableHeaderRow from '@zohodesk-private/desk-components/es/table/TableHeader/TableHeaderRow';
-
-const TableHeaderRow = _ref => {
-  let {
-    children
-  } = _ref;
-  return /*#__PURE__*/React.createElement(React.Fragment, null, children);
-};
-
+import TableHeader from '@zohodesk-private/desk-components/es/table/TableHeader/TableHeader';
+import TableHeadFirstNode from '@zohodesk-private/desk-components/es/table/TableHeadFirstNode/TableHeadFirstNode';
+import TableHeaderRow from '@zohodesk-private/desk-components/es/table/TableHeader/TableHeaderRow';
 import MassAction from "./header/MassAction";
 import Headers from "./header/Headers";
 import ActionColumn from "./header/ActionColumn";
 import ResizerExtraSpace from "./header/ResizerExtraSpace";
+import getHeaderClasses from "./../../utils/getHeaderClasses"; // @ts-ignore
 
-function Header(_ref2) {
+import style from "./../css/TableList.module.css";
+
+function Header(_ref) {
   let {
+    isReorderEnabled,
     isSelectionEnabled,
     actions,
     isKeyboardControlsEnabled,
@@ -27,17 +25,25 @@ function Header(_ref2) {
     rowActionsColumnWidth,
     headers,
     dispatch
-  } = _ref2;
+  } = _ref;
 
   if (headers.length <= 0) {
     return null;
   }
 
+  const headerClasses = getHeaderClasses({
+    isReorderEnabled,
+    isSelectionEnabled,
+    isKeyboardControlsEnabled
+  });
   return /*#__PURE__*/React.createElement(TableHeader, {
     $flag_isColumnsFlexible: isFlexibleColumns,
-    $flag_padding: !isSelectionEnabled,
-    $flag_hasHighlighter: isKeyboardControlsEnabled
-  }, /*#__PURE__*/React.createElement(TableHeaderRow, null, rendermassAction(isSelectionEnabled, actions), renderHeaders(headers, currentlyResizingColumn, isResizerEnabled, isFlexibleColumns, dispatch), renderActionColumn(hasRowActions, rowActionsColumnWidth), renderResizerExtraSpace(isCurrentlyResizing, resizerExtraWidth)));
+    $flag_padding: !isSelectionEnabled && !isReorderEnabled,
+    $flag_hasHighlighter: isKeyboardControlsEnabled,
+    customStyle: {
+      tableHeader: `${style.header} ${style[headerClasses]}`
+    }
+  }, /*#__PURE__*/React.createElement(TableHeaderRow, null, renderReOrderColumn(isReorderEnabled), rendermassAction(isSelectionEnabled, actions), renderHeaders(headers, currentlyResizingColumn, isResizerEnabled, isFlexibleColumns, dispatch), renderActionColumn(hasRowActions, rowActionsColumnWidth), renderResizerExtraSpace(isCurrentlyResizing, resizerExtraWidth)));
 }
 
 function rendermassAction(isSelectionEnabled, actions) {
@@ -47,6 +53,18 @@ function rendermassAction(isSelectionEnabled, actions) {
   });
 }
 
+function renderReOrderColumn(isReorderEnabled) {
+  if (!isReorderEnabled) {
+    return null;
+  }
+
+  return /*#__PURE__*/React.createElement(TableHeadFirstNode, {
+    customStyle: {
+      container: style.reOrderHeader
+    }
+  }, /*#__PURE__*/React.createElement(React.Fragment, null));
+}
+
 function renderHeaders(headers, currentlyResizingColumn, isResizerEnabled, isFlexibleColumns, dispatch) {
   return /*#__PURE__*/React.createElement(Headers, {
     headers: headers,