@zohodesk/library-platform 1.1.3-exp.3 → 1.1.3-temp-1

package/es/bc/zlist/Constants.js

@@ -7,4 +7,6 @@ export const ZLIST_FETCH_SORTED = 'ZLIST#FETCH_SORTED';
 export const ZLIST_RECORD_UPDATE_SUCCEEDED = 'ZLIST#RECORD_UPDATE_SUCCEEDED';
 export const ZLIST_RECORD_UPDATE_FAILED = 'ZLIST#RECORD_UPDATE_FAILED';
 export const ZLIST_RECORD_DELETE_SUCCEEDED = 'ZLIST#RECORD_DELETE_SUCCEEDED';
-export const ZLIST_RECORD_DELETE_FAILED = 'ZLIST#RECORD_DELETE_FAILED';
+export const ZLIST_RECORD_DELETE_FAILED = 'ZLIST#RECORD_DELETE_FAILED';
+export const ZLIST_RECORD_REORDER = 'ZLIST#RECORD_REORDER';
+export const ZLIST_RECORD_REORDER_FAILED = 'ZLIST#RECORD_REORDER_FAILED';

package/es/bc/zrecord/Constants.js

@@ -27,4 +27,6 @@ _defineProperty(RecordApiActionName, "UPDATE_RECORD", 'updateRecord');
 
 _defineProperty(RecordApiActionName, "GET_CLIENTACTIONS", 'getClientActions');
 
-_defineProperty(RecordApiActionName, "CREATE_RECORD", 'createRecord');
+_defineProperty(RecordApiActionName, "CREATE_RECORD", 'createRecord');
+
+_defineProperty(RecordApiActionName, "GET_REORDERRECORD", 'reorderRecord');

package/es/cc/table-connected/Properties.js

@@ -45,6 +45,22 @@ export default {
       }
     }
   },
+  reOrderConfig: {
+    required: false,
+    defaultValue: {
+      isEnabled: false
+    },
+    typeMetadata: {
+      schema: {
+        type: 'object',
+        properties: {
+          isEnabled: {
+            type: 'boolean'
+          }
+        }
+      }
+    }
+  },
   componentMapping: {
     required: false,
     defaultValue: {

package/es/cc/table-list/Constants.js

@@ -22,4 +22,8 @@ _defineProperty(Constants, "TABLE_LIST_FIELD_CHANGED", 'TABLE_LIST#FIELD_CHANGED
 
 _defineProperty(Constants, "TABLE_LIST_ROW_CLICKED", 'TABLE_LIST#ROW_CLICKED');
 
+_defineProperty(Constants, "TABLE_LIST_ROW_DRAG_START", 'TABLE_LIST#ROW_DRAG_START');
+
+_defineProperty(Constants, "TABLE_LIST_ROW_DRAG_END", 'TABLE_LIST#ROW_DRAG_END');
+
 export default Constants;

package/es/cc/table-list/Properties.js

@@ -18,6 +18,15 @@ import PickListProperties from "../fields/pick-list/Properties";
 import TextProperties from "../fields/text/Properties";
 import UrlProperties from "../fields/url/Properties";
 const TableListProperties = {
+  isReOrderLoading: {
+    required: false,
+    typeMetadata: {
+      schema: {
+        type: 'boolean'
+      }
+    },
+    defaultValue: false
+  },
   isLoading: {
     required: false,
     typeMetadata: {
@@ -308,6 +317,22 @@ const TableListProperties = {
       }
     }
   },
+  reOrderConfig: {
+    required: false,
+    defaultValue: {
+      isEnabled: false
+    },
+    typeMetadata: {
+      schema: {
+        type: 'object',
+        properties: {
+          isEnabled: {
+            type: 'boolean'
+          }
+        }
+      }
+    }
+  },
   ...SelectionConfigProperties
 };
 export default TableListProperties;

package/es/cc/table-list/row/Properties.js

@@ -1,6 +1,15 @@
 import { Width } from "../data-types/Header";
 import RowCursor from "../data-types/RowCursor";
 const TableRowProperties = {
+  isReorderEnabled: {
+    required: false,
+    defaultValue: false,
+    typeMetadata: {
+      schema: {
+        type: 'boolean'
+      }
+    }
+  },
   isSelectionEnabled: {
     required: false,
     defaultValue: false,
@@ -119,6 +128,41 @@ const TableRowProperties = {
         type: 'boolean'
       }
     }
+  },
+  isSorting: {
+    required: false,
+    defaultValue: false,
+    typeMetadata: {
+      schema: {
+        type: 'boolean'
+      }
+    }
+  },
+  isDroppable: {
+    required: false,
+    defaultValue: false,
+    typeMetadata: {
+      schema: {
+        type: 'boolean'
+      }
+    }
+  },
+  dropPosition: {
+    required: false,
+    typeMetadata: {
+      schema: {
+        type: "string"
+      }
+    }
+  },
+  isReOrderLoading: {
+    required: false,
+    defaultValue: false,
+    typeMetadata: {
+      schema: {
+        type: 'boolean'
+      }
+    }
   }
 };
 export default TableRowProperties;

package/es/index.js

@@ -9,4 +9,5 @@ import * as _Components from "./library/dot/legacy-to-new-arch";
 export { _Components as Components };
 export { platformSDK } from "./platform/sdk/frameworks/Sdk";
 export { sdkRegistry } from "./platform/sdk/frameworks/SdkRegistry";
-export { validations as defaultFieldValidations } from "./library/behaviours/field-validation/frameworks/utils/FormBasicValidationAdaptor";
+export { validations as defaultFieldValidations } from "./library/behaviours/field-validation/frameworks/utils/FormBasicValidationAdaptor";
+export { getClientActionsAdapter, fetchClientActions } from "./platform/client-actions/components/action-event-mediator/frameworks/ui/ClientActionsAdapter";

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

@@ -0,0 +1,8 @@
+import { useState } from 'react';
+export function useDropIndicator() {
+  const [dropIndicator, setDropIndicator] = useState({
+    index: null,
+    position: ''
+  });
+  return [dropIndicator, setDropIndicator];
+}

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

@@ -0,0 +1,8 @@
+import { useState, useEffect } from 'react';
+export function useRowData(rows) {
+  const [rowData, setRowData] = useState(rows);
+  useEffect(() => {
+    setRowData(rows);
+  }, [rows]);
+  return [rowData, setRowData];
+}

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
   }));
 }