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

package/README.md

@@ -17,7 +17,7 @@ npm install @zohodesk/library-platform
 To create a Table Connected component, you can use the `TableConnectedFactory`. Here is a simple example:
 
 ```javascript
-import TableConnectedFactory from '@zohodesk/library-platform/TableConnectedFactory';
+import {TableConnectedFactory} from '@zohodesk/library-platform';
 
 const myTableComponent = TableConnectedFactory.create({
   name: 'MyTableComponent',
@@ -37,7 +37,7 @@ You can create custom components using the `createCustomComponent` function. Thi
 #### Example
 
 ```javascript
-import createCustomComponent from '@zohodesk/library-platform/createCustomComponent';
+import {createCustomComponent} from '@zohodesk/library-platform';
 
 const MyCustomComponent = createCustomComponent({
   name: 'MyCustomComponent',
@@ -55,7 +55,7 @@ The `ComponentRegistry` class is a singleton that allows you to register and ret
 #### Example
 
 ```javascript
-import ComponentRegistry from '@zohodesk/library-platform/ComponentRegistry';
+import {ComponentRegistry} from '@zohodesk/library-platform';
 
 // Register a component
 ComponentRegistry.register('MyComponent', myComponentInstance);

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

@@ -308,6 +308,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,32 @@ 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"
+      }
+    }
   }
 };
 export default TableRowProperties;

package/es/index.js

@@ -2,10 +2,11 @@ import * as _CC from "./cc";
 export { _CC as CC };
 import * as _BC from "./bc";
 export { _BC as BC };
-export { TableConnectedFactory } from "./desk-frameworks";
+export { TableConnectedFactory, FormConnectedFactory } from "./platform/components";
 export { ComponentRegistry, createCustomComponent } from "./library";
 export { default as TableFieldComponents } from "./library/dot/legacy-to-new-arch/table-field-components";
 import * as _Components from "./library/dot/legacy-to-new-arch";
 export { _Components as Components };
-export { sdk } from "./platform/sdk/frameworks/Sdk";
-export { sdkRegistry } from "./platform/sdk/frameworks/SdkRegistry";
+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";

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,93 @@
+import { useCallback } from 'react';
+import TableListEventConstants from "../../../../../../cc/table-list/Constants";
+import { useRowData } from "./useRowData";
+import { useDropIndicator } from "./useDropIndicator";
+import { reorderArray, setTableUserSelect, 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;
+    setTableUserSelect(TableRef, 'none');
+    adjustHelperElementPosition(TableRef, style.dragging);
+    dispatch({
+      type: TABLE_LIST_ROW_DRAG_START,
+      payload: {
+        index
+      }
+    });
+  };
+
+  const handleSortEnd = _ref3 => {
+    let {
+      oldIndex,
+      newIndex
+    } = _ref3;
+    setTableUserSelect(TableRef, '');
+    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]);
+  return {
+    rowData,
+    dropIndicator,
+    handleSortStart,
+    handleSortEnd,
+    handleSortOver,
+    getHelperDimensions,
+    setRowData,
+    setDropIndicator
+  };
+}

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,6 +26,7 @@ function TableListView(_ref2, _ref) {
     data,
     isLoading,
     resizerState,
+    reOrderConfig,
     selectionConfig,
     isFlexibleColumns,
     rowCursor,
@@ -45,16 +49,23 @@ 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,
@@ -63,9 +74,12 @@ function TableListView(_ref2, _ref) {
     rowActionsColumnWidth,
     dispatch
   }), renderBody({
+    TableRef,
+    dispatch,
     headers,
     rows,
     isFlexibleColumns,
+    reOrderConfig,
     selectionConfig,
     isKeyboardControlsEnabled,
     rowCursor,
@@ -87,6 +101,7 @@ function renderHeader(_ref3) {
   let {
     headers,
     resizerState,
+    reOrderConfig,
     selectionConfig,
     selection,
     isKeyboardControlsEnabled,
@@ -96,6 +111,7 @@ function renderHeader(_ref3) {
     dispatch
   } = _ref3;
   return /*#__PURE__*/React.createElement(Header, {
+    isReorderEnabled: reOrderConfig.isEnabled,
     isSelectionEnabled: selectionConfig.isEnabled,
     isResizerEnabled: resizerState.isEnabled,
     isKeyboardControlsEnabled: isKeyboardControlsEnabled,
@@ -111,11 +127,26 @@ 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,
+    reOrderConfig,
     selectionConfig,
     isKeyboardControlsEnabled,
     rowCursor,
@@ -123,18 +154,48 @@ function renderBody(_ref4) {
     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,
-    isKeyboardControlsEnabled: isKeyboardControlsEnabled
+    isKeyboardControlsEnabled: isKeyboardControlsEnabled,
+    dropIndicator: dropIndicator
   }));
 }
 

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

@@ -1,36 +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 {
+
+.headerWithActions,
+.fieldWithActions {
     gap: var(--zd_size6) 
 }
+
 .actions {
     gap: var(--zd_size8) 
 }
@@ -38,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 {
@@ -12,9 +13,11 @@ 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,
     actions,
     isKeyboardControlsEnabled,
@@ -35,18 +38,33 @@ function Header(_ref2) {
 
   return /*#__PURE__*/React.createElement(TableHeader, {
     $flag_isColumnsFlexible: isFlexibleColumns,
-    $flag_padding: !isSelectionEnabled,
+    $flag_padding: !isSelectionEnabled && !isReorderEnabled,
     $flag_hasHighlighter: isKeyboardControlsEnabled
-  }, /*#__PURE__*/React.createElement(TableHeaderRow, null, rendermassAction(isSelectionEnabled, actions), renderHeaders(headers, currentlyResizingColumn, isResizerEnabled, isFlexibleColumns, dispatch), renderActionColumn(hasRowActions, rowActionsColumnWidth), renderResizerExtraSpace(isCurrentlyResizing, resizerExtraWidth)));
+  }, /*#__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 rendermassAction(isSelectionEnabled, actions) {
+function rendermassAction(isSelectionEnabled, isReorderEnabled, isKeyboardControlsEnabled, actions) {
   return /*#__PURE__*/React.createElement(MassAction, {
     isSelectionEnabled: isSelectionEnabled,
+    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,