@zohodesk/library-platform 1.1.2 → 1.1.3-exp.2

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,9 @@ 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'; // @ts-ignore
 
 import style from "./css/TableList.module.css";
 
@@ -16,6 +18,7 @@ function TableListView(_ref2, _ref) {
     state,
     helpers
   } = _ref2;
+  const TableRef = useRef(null);
   const {
     dispatch
   } = helpers;
@@ -23,10 +26,12 @@ function TableListView(_ref2, _ref) {
     data,
     isLoading,
     resizerState,
+    reOrderConfig,
     selectionConfig,
     isFlexibleColumns,
     rowCursor,
     rowActionsConfig,
+    keyboardControlsConfig,
     selection,
     emptyStateUiType,
     isError
@@ -43,27 +48,40 @@ function TableListView(_ref2, _ref) {
 
   const isDataEmpty = !hasRows && !isLoading && !isError; // TODO: derive from state.properties
 
+  const isKeyboardControlsEnabled = keyboardControlsConfig.isEnabled;
+
+  const getTableRef = ref => {
+    TableRef.current = ref;
+  };
+
   return /*#__PURE__*/React.createElement("div", {
     className: style.wrapper,
     ref: _ref
   }, /*#__PURE__*/React.createElement(Table, {
+    ref: getTableRef,
     $event_onScroll: e => handleScroll(dispatch, {
       scrollEvent: e
     })
   }, renderHeader({
     headers,
     resizerState,
+    reOrderConfig,
     selectionConfig,
     selection,
+    isKeyboardControlsEnabled,
     isFlexibleColumns,
     hasRowActions,
     rowActionsColumnWidth,
     dispatch
   }), renderBody({
+    TableRef,
+    dispatch,
     headers,
     rows,
     isFlexibleColumns,
+    reOrderConfig,
     selectionConfig,
+    isKeyboardControlsEnabled,
     rowCursor,
     hasRowActions,
     rowActionsColumnWidth,
@@ -83,51 +101,101 @@ function renderHeader(_ref3) {
   let {
     headers,
     resizerState,
+    reOrderConfig,
     selectionConfig,
     selection,
+    isKeyboardControlsEnabled,
     isFlexibleColumns,
     hasRowActions,
     rowActionsColumnWidth,
     dispatch
   } = _ref3;
   return /*#__PURE__*/React.createElement(Header, {
+    isReorderEnabled: reOrderConfig.isEnabled,
     isSelectionEnabled: selectionConfig.isEnabled,
-    isSelectAllEnabled: selectionConfig.isSelectAllEnabled,
-    hasAllSelected: selection.hasAllSelected,
     isResizerEnabled: resizerState.isEnabled,
+    isKeyboardControlsEnabled: isKeyboardControlsEnabled,
     currentlyResizingColumn: resizerState.currentlyResizingColumn,
     isCurrentlyResizing: resizerState.isCurrentlyResizing,
     resizerExtraWidth: resizerState.extraWidth,
     isFlexibleColumns: isFlexibleColumns,
     hasRowActions: hasRowActions,
     rowActionsColumnWidth: rowActionsColumnWidth,
+    actions: selection.actions,
     headers: headers,
     dispatch: dispatch
   });
 }
 
+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,
+    reOrderConfig,
     selectionConfig,
+    isKeyboardControlsEnabled,
     rowCursor,
     hasRowActions,
     rowActionsColumnWidth,
     hasRows
   } = _ref4;
-  return /*#__PURE__*/React.createElement(Body, {
+  const {
+    rowData,
+    dropIndicator,
+    handleSortStart,
+    handleSortEnd,
+    handleSortOver,
+    getHelperDimensions
+  } = useTableRowReorder({
+    rows,
+    TableRef,
+    dispatch
+  });
+
+  if (!hasRows) {
+    return null;
+  }
+
+  return /*#__PURE__*/React.createElement(SortableTableContainer, {
     hasRows: hasRows,
-    isFlexibleColumns: isFlexibleColumns
+    isFlexibleColumns: isFlexibleColumns,
+    helperClass: `${style.dragging}`,
+    useDragHandle: true,
+    helperContainer: () => TableRef.current,
+    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,
+    isReorderEnabled: reOrderConfig.isEnabled,
     isSelectionEnabled: selectionConfig.isEnabled,
     rowCursor: rowCursor,
     hasRowActions: hasRowActions,
-    rowActionsColumnWidth: rowActionsColumnWidth
+    rowActionsColumnWidth: rowActionsColumnWidth,
+    isKeyboardControlsEnabled: isKeyboardControlsEnabled,
+    dropIndicator: dropIndicator
   }));
 }
 

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

@@ -1,33 +1,47 @@
 .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 {
+    gap: var(--zd_size6) 
+}
+
 .actions {
     gap: var(--zd_size8) 
 }
@@ -35,9 +49,141 @@
 .rowCursor_default {
     cursor: default
 }
+
 .rowCursor_pointer {
     cursor: pointer
 }
+
 .rowCursor_not-allowed {
     cursor: not-allowed
-}
+}
+
+.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 */
+    padding: 0 ;
+    background-color: var(--local_tablelist_bg);
+}
+
+[dir=ltr] .dragHandleWrapper {
+    left: 0 ;
+}
+
+[dir=rtl] .dragHandleWrapper {
+    right: 0 ;
+}
+
+.rowDropIndicator {
+    width: 100% ;
+    height: var(--zd_size2) ;
+    /* css:theme-validation:ignore */
+    position: absolute;
+    z-index: 2;
+    background-color: var(--local_tablelist_drop_highlight_bg);
+}
+
+.dropIndicatorTop {
+    top: 0 ;
+}
+
+.dropIndicatorBottom {
+    bottom: calc( var(--zd_size3) * -1 ) ;
+}
+
+[dir=ltr] .offsetLeft0 {
+    left: 0  !important;
+}
+
+[dir=rtl] .offsetLeft0 {
+    right: 0  !important;
+}
+
+[dir=ltr] .offsetLeft8 {
+    left: var(--zd_size8)  !important;
+}
+
+[dir=rtl] .offsetLeft8 {
+    right: var(--zd_size8)  !important;
+}
+
+[dir=ltr] .offsetLeft24 {
+    left: var(--zd_size24)  !important;
+}
+
+[dir=rtl] .offsetLeft24 {
+    right: var(--zd_size24)  !important;
+}
+
+[dir=ltr] .paddingLeft0 {
+    padding-left: 0 ;
+}
+
+[dir=rtl] .paddingLeft0 {
+    padding-right: 0 ;
+}
+
+[dir=ltr] .paddingLeft8 {
+    padding-left: var(--zd_size8)  !important;
+}
+
+[dir=rtl] .paddingLeft8 {
+    padding-right: var(--zd_size8)  !important;
+}
+
+[dir=ltr] .paddingLeft16 {
+    padding-left: var(--zd_size16)  !important;
+}
+
+[dir=rtl] .paddingLeft16 {
+    padding-right: var(--zd_size16)  !important;
+}
+
+[dir=ltr] .paddingRight8 {
+    padding-right: var(--zd_size8)  !important;
+}
+
+[dir=rtl] .paddingRight8 {
+    padding-left: var(--zd_size8)  !important;
+}
+
+[dir=ltr] .paddingRight16 {
+    padding-right: var(--zd_size16)  !important;
+}
+
+[dir=rtl] .paddingRight16 {
+    padding-left: var(--zd_size16)  !important;
+}
+
+[dir=ltr] .paddingRight24 {
+    padding-right: var(--zd_size24)  !important;
+}
+
+[dir=rtl] .paddingRight24 {
+    padding-left: var(--zd_size24)  !important;
+}
+

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 {
@@ -8,16 +9,18 @@ const TableHeaderRow = _ref => {
   return /*#__PURE__*/React.createElement(React.Fragment, null, children);
 };
 
-import SelectAll from "./header/SelectAll";
+import MassAction from "./header/MassAction";
 import Headers from "./header/Headers";
 import ActionColumn from "./header/ActionColumn";
 import ResizerExtraSpace from "./header/ResizerExtraSpace";
+import style from "./../../ui/css/TableList.module.css";
 
 function Header(_ref2) {
   let {
+    isReorderEnabled,
     isSelectionEnabled,
-    isSelectAllEnabled,
-    hasAllSelected,
+    actions,
+    isKeyboardControlsEnabled,
     isResizerEnabled,
     currentlyResizingColumn,
     isCurrentlyResizing,
@@ -35,19 +38,33 @@ function Header(_ref2) {
 
   return /*#__PURE__*/React.createElement(TableHeader, {
     $flag_isColumnsFlexible: isFlexibleColumns,
-    $flag_padding: !isSelectionEnabled
-  }, /*#__PURE__*/React.createElement(TableHeaderRow, null, renderSelectAll(isSelectionEnabled, isSelectAllEnabled, hasAllSelected, dispatch), renderHeaders(headers, currentlyResizingColumn, isResizerEnabled, isFlexibleColumns, dispatch), renderActionColumn(hasRowActions, rowActionsColumnWidth), renderResizerExtraSpace(isCurrentlyResizing, resizerExtraWidth)));
+    $flag_padding: !isSelectionEnabled && !isReorderEnabled,
+    $flag_hasHighlighter: isKeyboardControlsEnabled
+  }, /*#__PURE__*/React.createElement(TableHeaderRow, null, renderReOrderColumn(isSelectionEnabled, isReorderEnabled, isKeyboardControlsEnabled), rendermassAction(isSelectionEnabled, isReorderEnabled, isKeyboardControlsEnabled, actions), renderHeaders(headers, currentlyResizingColumn, isResizerEnabled, isFlexibleColumns, dispatch), renderActionColumn(hasRowActions, rowActionsColumnWidth), renderResizerExtraSpace(isCurrentlyResizing, resizerExtraWidth)));
 }
 
-function renderSelectAll(isSelectionEnabled, isSelectAllEnabled, hasAllSelected, dispatch) {
-  return /*#__PURE__*/React.createElement(SelectAll, {
+function rendermassAction(isSelectionEnabled, isReorderEnabled, isKeyboardControlsEnabled, actions) {
+  return /*#__PURE__*/React.createElement(MassAction, {
     isSelectionEnabled: isSelectionEnabled,
-    isSelectAllEnabled: isSelectAllEnabled,
-    hasAllSelected: hasAllSelected,
-    dispatch: dispatch
+    isReorderEnabled: isReorderEnabled,
+    isKeyboardControlsEnabled: isKeyboardControlsEnabled,
+    actions: actions
   });
 }
 
+function renderReOrderColumn(isSelectionEnabled, isReorderEnabled, isKeyboardControlsEnabled) {
+  if (isReorderEnabled) {
+    return /*#__PURE__*/React.createElement(TableHeadFirstNode, {
+      customStyle: {
+        container: isKeyboardControlsEnabled && isSelectionEnabled ? style.paddingRight16 : isKeyboardControlsEnabled ? `${style.offsetLeft8} ${style.paddingRight8}` : style.offsetLeft0
+      },
+      $customProps_container: {
+        $data_width: 24
+      }
+    }, /*#__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,28 +1,40 @@
 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
+    rowActionsColumnWidth,
+    isKeyboardControlsEnabled,
+    dropIndicator
   } = _ref;
-  return rows.map((row, index) => /*#__PURE__*/React.createElement(Row, {
-    key: index,
-    ...getRowProps(row, headers, isFlexibleColumns, isSelectionEnabled, rowCursor, hasRowActions, rowActionsColumnWidth)
-  }));
-}
+  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,
+      ...getRowProps(row, headers, isFlexibleColumns, isReorderEnabled, isSelectionEnabled, rowCursor, hasRowActions, rowActionsColumnWidth, isKeyboardControlsEnabled, isDroppable, dropPosition)
+    });
+  });
+};
 
-function getRowProps(row, headers, isFlexibleColumns, isSelectionEnabled, rowCursor, hasRowActions, rowActionsColumnWidth) {
+function getRowProps(row, headers, isFlexibleColumns, isReorderEnabled, isSelectionEnabled, rowCursor, hasRowActions, rowActionsColumnWidth, isKeyboardControlsEnabled, isDroppable, dropPosition) {
   const {
     id,
     columns,
     isSelected,
     isSelectable,
+    isFocussed,
     selectionTooltip,
     rowActionLocation
   } = row;
@@ -33,12 +45,17 @@ function getRowProps(row, headers, isFlexibleColumns, isSelectionEnabled, rowCur
     rowActionLocation,
     isSelected,
     isSelectable,
+    isFocussed,
     selectionTooltip,
     isFlexibleColumns,
+    isReorderEnabled,
     isSelectionEnabled,
     cursor: rowCursor,
     hasActions: hasRowActions,
-    rowActionsColumnWidth
+    isKeyboardControlsEnabled,
+    rowActionsColumnWidth,
+    isDroppable,
+    dropPosition
   };
 }
 

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

@@ -4,7 +4,9 @@ import TableHeading from '@zohodesk-private/desk-components/es/table/TableHeadin
 import { AlignmentOfFlex } from "../../../../../../../../cc/table-list/data-types/Header";
 import ActionEventMediator from "../../../../../../../../platform/client-actions/components/action-event-mediator/frameworks/ui/ActionEventMediator";
 import { ActionViewGap } from "../../../../../../../../platform/client-actions/components/interfaces/ActionViewModel";
-import ColumnResizer from "./ColumnResizer";
+import ColumnResizer from "./ColumnResizer"; // @ts-ignore
+
+import style from "./../../css/TableList.module.css";
 
 function HeaderData(_ref) {
   let {
@@ -39,7 +41,10 @@ function HeaderData(_ref) {
         $ui_displayMode: 'flex',
         $ui_alignItems: 'center',
         $ui_justifyContent: AlignmentOfFlex[alignment]
-      } : null
+      } : null,
+      customStyle: hasActions ? {
+        tableHead: style.headerWithActions
+      } : undefined
     }, /*#__PURE__*/React.createElement(TableHeading, {
       $i18n_text: text
     }), hasActions ? /*#__PURE__*/React.createElement(ActionEventMediator, {

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

@@ -0,0 +1,45 @@
+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 "./../../../ui/css/TableList.module.css";
+
+function MassAction(_ref) {
+  let {
+    isSelectionEnabled,
+    isReorderEnabled,
+    isKeyboardControlsEnabled,
+    actions
+  } = _ref;
+
+  if (!isSelectionEnabled) {
+    return null;
+  }
+
+  const customPropsContainer = isReorderEnabled && isSelectionEnabled ? {
+    $data_width: 56
+  } : {};
+
+  if (!actions || actions.length === 0) {
+    return /*#__PURE__*/React.createElement(TableHeadFirstNode, {
+      customStyle: {
+        container: isReorderEnabled && isSelectionEnabled ? `${style.offsetLeft24} ${style.paddingRight24}` : isKeyboardControlsEnabled && isSelectionEnabled ? `${style.offsetLeft8} ${style.paddingRight16}` : isKeyboardControlsEnabled ? style.offsetLeft8 : style.offsetLeft0
+      },
+      $customProps_container: customPropsContainer
+    }, /*#__PURE__*/React.createElement(TableHeading, {
+      $i18n_text: "M/A",
+      $i18n_tooltip: "Mass Action"
+    }));
+  }
+
+  return /*#__PURE__*/React.createElement(TableHeadFirstNode, {
+    customStyle: {
+      container: isReorderEnabled && isSelectionEnabled ? `${style.offsetLeft24} ${style.paddingRight24}` : isKeyboardControlsEnabled && isSelectionEnabled ? `${style.offsetLeft8} ${style.paddingRight16}` : isKeyboardControlsEnabled ? style.offsetLeft8 : style.offsetLeft0
+    },
+    $customProps_container: customPropsContainer
+  }, /*#__PURE__*/React.createElement(ActionEventMediator, {
+    actions: actions
+  }));
+}
+
+export default MassAction;