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

package/es/bc/zlist/Constants.js

@@ -7,6 +7,4 @@ 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_REORDER = 'ZLIST#RECORD_REORDER';
-export const ZLIST_RECORD_REORDER_FAILED = 'ZLIST#RECORD_REORDER_FAILED';
+export const ZLIST_RECORD_DELETE_FAILED = 'ZLIST#RECORD_DELETE_FAILED';

package/es/bc/zrecord/Constants.js

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

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

@@ -45,22 +45,6 @@ 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,8 +22,4 @@ _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,22 +308,6 @@ 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,15 +1,6 @@
 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,
@@ -128,32 +119,6 @@ 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/library/dot/components/table-list/frameworks/ui/TableListView.js

@@ -1,4 +1,4 @@
-import React, { useRef } from 'react';
+import React 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,9 +7,7 @@ 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";
-import { useTableRowReorder } from "../hooks/useTableRowReorder";
-import { SortableContainer } from 'react-sortable-hoc'; // @ts-ignore
+import handleScroll from "./handlers/HandleScroll"; // @ts-ignore
 
 import style from "./css/TableList.module.css";
 
@@ -18,7 +16,6 @@ function TableListView(_ref2, _ref) {
     state,
     helpers
   } = _ref2;
-  const TableRef = useRef(null);
   const {
     dispatch
   } = helpers;
@@ -26,7 +23,6 @@ function TableListView(_ref2, _ref) {
     data,
     isLoading,
     resizerState,
-    reOrderConfig,
     selectionConfig,
     isFlexibleColumns,
     rowCursor,
@@ -49,23 +45,16 @@ 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,
@@ -74,12 +63,9 @@ function TableListView(_ref2, _ref) {
     rowActionsColumnWidth,
     dispatch
   }), renderBody({
-    TableRef,
-    dispatch,
     headers,
     rows,
     isFlexibleColumns,
-    reOrderConfig,
     selectionConfig,
     isKeyboardControlsEnabled,
     rowCursor,
@@ -101,7 +87,6 @@ function renderHeader(_ref3) {
   let {
     headers,
     resizerState,
-    reOrderConfig,
     selectionConfig,
     selection,
     isKeyboardControlsEnabled,
@@ -111,7 +96,6 @@ function renderHeader(_ref3) {
     dispatch
   } = _ref3;
   return /*#__PURE__*/React.createElement(Header, {
-    isReorderEnabled: reOrderConfig.isEnabled,
     isSelectionEnabled: selectionConfig.isEnabled,
     isResizerEnabled: resizerState.isEnabled,
     isKeyboardControlsEnabled: isKeyboardControlsEnabled,
@@ -127,26 +111,11 @@ 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,
@@ -154,48 +123,18 @@ function renderBody(_ref4) {
     rowActionsColumnWidth,
     hasRows
   } = _ref4;
-  const {
-    rowData,
-    dropIndicator,
-    handleSortStart,
-    handleSortEnd,
-    handleSortOver,
-    getHelperDimensions
-  } = useTableRowReorder({
-    rows,
-    TableRef,
-    dispatch
-  });
-
-  if (!hasRows) {
-    return null;
-  }
-
-  return /*#__PURE__*/React.createElement(SortableTableContainer, {
+  return /*#__PURE__*/React.createElement(Body, {
     hasRows: hasRows,
-    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
+    isFlexibleColumns: isFlexibleColumns
   }, /*#__PURE__*/React.createElement(Rows, {
     headers: headers,
-    rows: rowData,
+    rows: rows,
     isFlexibleColumns: isFlexibleColumns,
-    isReorderEnabled: reOrderConfig.isEnabled,
     isSelectionEnabled: selectionConfig.isEnabled,
     rowCursor: rowCursor,
     hasRowActions: hasRowActions,
     rowActionsColumnWidth: rowActionsColumnWidth,
-    isKeyboardControlsEnabled: isKeyboardControlsEnabled,
-    dropIndicator: dropIndicator
+    isKeyboardControlsEnabled: isKeyboardControlsEnabled
   }));
 }
 

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

@@ -1,47 +1,36 @@
 .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) 
 }
@@ -49,141 +38,9 @@
 .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,6 +1,5 @@
 import React from 'react';
-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 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 {
@@ -13,11 +12,9 @@ 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,
@@ -38,33 +35,18 @@ function Header(_ref2) {
 
   return /*#__PURE__*/React.createElement(TableHeader, {
     $flag_isColumnsFlexible: isFlexibleColumns,
-    $flag_padding: !isSelectionEnabled && !isReorderEnabled,
+    $flag_padding: !isSelectionEnabled,
     $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)));
+  }, /*#__PURE__*/React.createElement(TableHeaderRow, null, rendermassAction(isSelectionEnabled, actions), renderHeaders(headers, currentlyResizingColumn, isResizerEnabled, isFlexibleColumns, dispatch), renderActionColumn(hasRowActions, rowActionsColumnWidth), renderResizerExtraSpace(isCurrentlyResizing, resizerExtraWidth)));
 }
 
-function rendermassAction(isSelectionEnabled, isReorderEnabled, isKeyboardControlsEnabled, actions) {
+function rendermassAction(isSelectionEnabled, 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,

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

@@ -1,34 +1,24 @@
 import React from 'react';
 import Row from "./row/Row";
-import { SortableElement } from 'react-sortable-hoc';
-const SortableRow = SortableElement(props => /*#__PURE__*/React.createElement(Row, { ...props
-}));
 
-const Rows = _ref => {
+function Rows(_ref) {
   let {
     headers,
     rows,
     isFlexibleColumns,
-    isReorderEnabled,
     isSelectionEnabled,
     rowCursor,
     hasRowActions,
     rowActionsColumnWidth,
-    isKeyboardControlsEnabled,
-    dropIndicator
+    isKeyboardControlsEnabled
   } = _ref;
-  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)
-    });
-  });
-};
+  return rows.map((row, index) => /*#__PURE__*/React.createElement(Row, {
+    key: index,
+    ...getRowProps(row, headers, isFlexibleColumns, isSelectionEnabled, rowCursor, hasRowActions, rowActionsColumnWidth, isKeyboardControlsEnabled)
+  }));
+}
 
-function getRowProps(row, headers, isFlexibleColumns, isReorderEnabled, isSelectionEnabled, rowCursor, hasRowActions, rowActionsColumnWidth, isKeyboardControlsEnabled, isDroppable, dropPosition) {
+function getRowProps(row, headers, isFlexibleColumns, isSelectionEnabled, rowCursor, hasRowActions, rowActionsColumnWidth, isKeyboardControlsEnabled) {
   const {
     id,
     columns,
@@ -48,14 +38,11 @@ function getRowProps(row, headers, isFlexibleColumns, isReorderEnabled, isSelect
     isFocussed,
     selectionTooltip,
     isFlexibleColumns,
-    isReorderEnabled,
     isSelectionEnabled,
     cursor: rowCursor,
     hasActions: hasRowActions,
     isKeyboardControlsEnabled,
-    rowActionsColumnWidth,
-    isDroppable,
-    dropPosition
+    rowActionsColumnWidth
   };
 }
 

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

@@ -2,13 +2,10 @@ 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;
 
@@ -16,28 +13,14 @@ function MassAction(_ref) {
     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, {
+    return /*#__PURE__*/React.createElement(TableHeadFirstNode, null, /*#__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, {
+  return /*#__PURE__*/React.createElement(TableHeadFirstNode, null, /*#__PURE__*/React.createElement(ActionEventMediator, {
     actions: actions
   }));
 }