@zohodesk/library-platform 1.1.3-exp.3 → 1.1.3-exp.4

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,5 +1,6 @@
 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';
+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';
 
 const TableHeaderRow = _ref => {
   let {
@@ -12,9 +13,12 @@ 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";
+import style from "./../css/TableList.module.css";
 
 function Header(_ref2) {
   let {
+    isReorderEnabled,
     isSelectionEnabled,
     actions,
     isKeyboardControlsEnabled,
@@ -33,11 +37,19 @@ function Header(_ref2) {
     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 +59,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,

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

@@ -1,24 +1,36 @@
 import React from 'react';
 import Row from "./row/Row";
+import { SortableElement } from 'react-sortable-hoc';
+const SortableRow = SortableElement(props => /*#__PURE__*/React.createElement(Row, { ...props
+}));
 
-function Rows(_ref) {
+const Rows = _ref => {
   let {
     headers,
     rows,
     isFlexibleColumns,
+    isReorderEnabled,
     isSelectionEnabled,
     rowCursor,
     hasRowActions,
     rowActionsColumnWidth,
-    isKeyboardControlsEnabled
+    isKeyboardControlsEnabled,
+    dropIndicator,
+    isReOrderLoading
   } = _ref;
-  return rows.map((row, index) => /*#__PURE__*/React.createElement(Row, {
-    key: index,
-    ...getRowProps(row, headers, isFlexibleColumns, isSelectionEnabled, rowCursor, hasRowActions, rowActionsColumnWidth, isKeyboardControlsEnabled)
-  }));
-}
+  return rows.map((row, index) => {
+    const isDroppable = dropIndicator.index !== null ? dropIndicator.index === index ? true : false : false;
+    const dropPosition = dropIndicator.position;
+    return /*#__PURE__*/React.createElement(SortableRow, {
+      key: `${row.id}`,
+      index: index,
+      disabled: isReOrderLoading,
+      ...getRowProps(row, headers, isFlexibleColumns, isReorderEnabled, isSelectionEnabled, rowCursor, hasRowActions, rowActionsColumnWidth, isKeyboardControlsEnabled, isDroppable, dropPosition, isReOrderLoading)
+    });
+  });
+};
 
-function getRowProps(row, headers, isFlexibleColumns, isSelectionEnabled, rowCursor, hasRowActions, rowActionsColumnWidth, isKeyboardControlsEnabled) {
+function getRowProps(row, headers, isFlexibleColumns, isReorderEnabled, isSelectionEnabled, rowCursor, hasRowActions, rowActionsColumnWidth, isKeyboardControlsEnabled, isDroppable, dropPosition, isReOrderLoading) {
   const {
     id,
     columns,
@@ -38,11 +50,15 @@ function getRowProps(row, headers, isFlexibleColumns, isSelectionEnabled, rowCur
     isFocussed,
     selectionTooltip,
     isFlexibleColumns,
+    isReorderEnabled,
     isSelectionEnabled,
     cursor: rowCursor,
     hasActions: hasRowActions,
     isKeyboardControlsEnabled,
-    rowActionsColumnWidth
+    rowActionsColumnWidth,
+    isDroppable,
+    dropPosition,
+    isReOrderLoading
   };
 }
 

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

@@ -2,6 +2,7 @@ import React from 'react';
 import TableHeadFirstNode from '@zohodesk-private/desk-components/es/table/TableHeadFirstNode/TableHeadFirstNode';
 import TableHeading from '@zohodesk-private/desk-components/es/table/TableHeading/TableHeading';
 import ActionEventMediator from "../../../../../../../../platform/client-actions/components/action-event-mediator/frameworks/ui/ActionEventMediator";
+import style from "./../../css/TableList.module.css";
 
 function MassAction(_ref) {
   let {
@@ -14,13 +15,21 @@ function MassAction(_ref) {
   }
 
   if (!actions || actions.length === 0) {
-    return /*#__PURE__*/React.createElement(TableHeadFirstNode, null, /*#__PURE__*/React.createElement(TableHeading, {
+    return /*#__PURE__*/React.createElement(TableHeadFirstNode, {
+      customStyle: {
+        container: style.massActionHeader
+      }
+    }, /*#__PURE__*/React.createElement(TableHeading, {
       $i18n_text: "M/A",
       $i18n_tooltip: "Mass Action"
     }));
   }
 
-  return /*#__PURE__*/React.createElement(TableHeadFirstNode, null, /*#__PURE__*/React.createElement(ActionEventMediator, {
+  return /*#__PURE__*/React.createElement(TableHeadFirstNode, {
+    customStyle: {
+      container: style.massActionHeader
+    }
+  }, /*#__PURE__*/React.createElement(ActionEventMediator, {
     actions: actions
   }));
 }