@zohodesk/library-platform 1.1.3 → 1.1.6

package/es/library/dot/components/form/frameworks/ui/FormView.js

@@ -1,7 +1,10 @@
 import React from 'react';
-import FormConstants from "../../../../../../cc/form/Constants";
+import Loader from '@zohodesk/svg/es/v1/Loader/Loader';
 import SectionsWrapper from '@zohodesk-private/desk-components/es/form/SectionsWrapper/SectionsWrapper';
 import Sections from "./sub-components/Sections";
+import FormConstants from "../../../../../../cc/form/Constants"; // @ts-ignore
+
+import style from "./css/Form.module.css";
 
 function FormView(_ref, ref) {
   let {
@@ -24,12 +27,12 @@ function FormView(_ref, ref) {
   };
 
   return /*#__PURE__*/React.createElement("div", {
+    className: style.formWrapper,
     ref: ref
   }, isLoading ?
   /*#__PURE__*/
   // Check for loading state
-  React.createElement("div", null, "Loading...") // Display loading indicator
-  : /*#__PURE__*/React.createElement(SectionsWrapper, null, /*#__PURE__*/React.createElement("button", {
+  React.createElement(Loader, null) : /*#__PURE__*/React.createElement(SectionsWrapper, null, /*#__PURE__*/React.createElement("button", {
     type: "submit",
     onClick: handleSubmit
   }, "Submit"), /*#__PURE__*/React.createElement(Sections, {

package/es/library/dot/components/form/frameworks/ui/css/Form.module.css

@@ -1,3 +1,7 @@
+.formWrapper {
+    height: 100% ;
+}
+
 .fieldWrapper {
     position: relative
 }

package/es/library/dot/components/form-fields/checkbox/frameworks/ui/CheckboxView.js

@@ -37,6 +37,7 @@ function CheckboxView(_ref2, ref) {
   } = state.viewModel;
   const isEditable = !disabled && !readonly;
   return /*#__PURE__*/React.createElement("div", {
+    "data-test-id": "smart_form_field_checkbox",
     ref: ref,
     className: style.fieldWrapper
   }, /*#__PURE__*/React.createElement(FieldController, {

package/es/library/dot/components/form-fields/currency/frameworks/ui/CurrencyView.js

@@ -21,6 +21,7 @@ function CurrencyView(_ref, ref) {
     actions
   } = state.properties;
   return /*#__PURE__*/React.createElement("div", {
+    "data-test-id": "smart_form_field_currency",
     ref: ref,
     className: style.fieldWrapper
   }, /*#__PURE__*/React.createElement(Label, {

package/es/library/dot/components/form-fields/date/frameworks/ui/DateView.js

@@ -20,6 +20,7 @@ function DateView(_ref, ref) {
     required
   } = state.viewModel;
   return /*#__PURE__*/React.createElement("div", {
+    "data-test-id": "smart_form_field_date",
     ref: ref,
     className: style.fieldWrapper
   }, /*#__PURE__*/React.createElement(Label, {

package/es/library/dot/components/form-fields/datetime/frameworks/ui/DateTimeView.js

@@ -20,6 +20,7 @@ function DateView(_ref, ref) {
     required
   } = state.viewModel;
   return /*#__PURE__*/React.createElement("div", {
+    "data-test-id": "smart_form_field_datetime",
     ref: ref,
     className: style.fieldWrapper
   }, /*#__PURE__*/React.createElement(Label, {

package/es/library/dot/components/form-fields/decimal/frameworks/ui/DecimalView.js

@@ -21,6 +21,7 @@ function DecimalView(_ref, ref) {
     required
   } = state.viewModel;
   return /*#__PURE__*/React.createElement("div", {
+    "data-test-id": "smart_form_field_decimal",
     ref: ref,
     className: style.fieldWrapper
   }, /*#__PURE__*/React.createElement(Label, {

package/es/library/dot/components/form-fields/email/frameworks/ui/EmailView.js

@@ -21,6 +21,7 @@ function EmailView(_ref, ref) {
     required
   } = state.properties;
   return /*#__PURE__*/React.createElement("div", {
+    "data-test-id": "smart_form_field_email",
     ref: ref,
     className: style.fieldWrapper
   }, /*#__PURE__*/React.createElement(Label, {

package/es/library/dot/components/form-fields/multi-select/frameworks/ui/MultiSelectView.js

@@ -27,6 +27,7 @@ function MultiSelectView(_ref, ref) {
     actions
   } = state.properties;
   return /*#__PURE__*/React.createElement("div", {
+    "data-test-id": "smart_form_field_multiselect",
     ref: ref,
     className: style.fieldWrapper
   }, /*#__PURE__*/React.createElement(Label, {

package/es/library/dot/components/form-fields/number/frameworks/ui/NumberView.js

@@ -21,6 +21,7 @@ function NumberView(_ref, ref) {
     required
   } = state.viewModel;
   return /*#__PURE__*/React.createElement("div", {
+    "data-test-id": "smart_form_field_number",
     ref: ref,
     className: style.fieldWrapper
   }, /*#__PURE__*/React.createElement(Label, {

package/es/library/dot/components/form-fields/percentage/frameworks/ui/PercentageView.js

@@ -21,6 +21,7 @@ function PercentageView(_ref, ref) {
     required
   } = state.viewModel;
   return /*#__PURE__*/React.createElement("div", {
+    "data-test-id": "smart_form_field_percentage",
     ref: ref,
     className: style.fieldWrapper
   }, /*#__PURE__*/React.createElement(Label, {

package/es/library/dot/components/form-fields/phone/frameworks/ui/PhoneView.js

@@ -21,6 +21,7 @@ function PhoneView(_ref, ref) {
     required
   } = state.viewModel;
   return /*#__PURE__*/React.createElement("div", {
+    "data-test-id": "smart_form_field_phone",
     ref: ref,
     className: style.fieldWrapper
   }, /*#__PURE__*/React.createElement(Label, {

package/es/library/dot/components/form-fields/pick-list/frameworks/ui/PickListView.js

@@ -27,6 +27,7 @@ function PickListView(_ref, ref) {
     actions
   } = state.properties;
   return /*#__PURE__*/React.createElement("div", {
+    "data-test-id": "smart_form_field_picklist",
     ref: ref,
     className: style.fieldWrapper
   }, /*#__PURE__*/React.createElement(Label, {

package/es/library/dot/components/form-fields/textarea/frameworks/ui/TextAreaView.js

@@ -21,6 +21,7 @@ function TextAreaView(_ref, ref) {
     required
   } = state.properties;
   return /*#__PURE__*/React.createElement("div", {
+    "data-test-id": "smart_form_field_textarea",
     ref: ref,
     className: style.fieldWrapper
   }, /*#__PURE__*/React.createElement(Label, {

package/es/library/dot/components/form-fields/textbox/frameworks/ui/TextBoxView.js

@@ -21,6 +21,7 @@ function TextBoxView(_ref, ref) {
     required
   } = state.properties;
   return /*#__PURE__*/React.createElement("div", {
+    "data-test-id": "smart_form_field_textbox",
     ref: ref,
     className: style.fieldWrapper
   }, /*#__PURE__*/React.createElement(Label, {

package/es/library/dot/components/form-fields/url/frameworks/ui/UrlView.js

@@ -21,6 +21,7 @@ function UrlView(_ref, ref) {
     required
   } = state.viewModel;
   return /*#__PURE__*/React.createElement("div", {
+    "data-test-id": "smart_form_field_url",
     ref: ref,
     className: style.fieldWrapper
   }, /*#__PURE__*/React.createElement(Label, {

package/es/library/dot/components/section/frameworks/ui/EventHandlerFactory.js

@@ -4,12 +4,13 @@ import FieldConstants from "../../../../../../cc/fields/field/Constants";
 class EventHandlersFactory {
   static create() {
     return {
+      [FieldConstants.FIELD_FOCUSED]: this.handleFieldFocused,
       [FieldConstants.FIELD_BLURRED]: this.handleFieldBlurred,
       [FieldConstants.FIELD_CHANGED]: this.handleFieldChanged
     };
   }
 
-  static handleFieldBlurred(_ref) {
+  static handleFieldFocused(_ref) {
     let {
       action,
       state,
@@ -22,7 +23,7 @@ class EventHandlersFactory {
       fieldName
     } = action.payload;
     dispatch({
-      type: SectionConstants.SECTION_FIELD_BLURRED,
+      type: SectionConstants.SECTION_FIELD_FOCUSED,
       payload: {
         id,
         fieldName
@@ -31,7 +32,7 @@ class EventHandlersFactory {
     });
   }
 
-  static handleFieldChanged(_ref2) {
+  static handleFieldBlurred(_ref2) {
     let {
       action,
       state,
@@ -40,6 +41,28 @@ class EventHandlersFactory {
     const {
       id
     } = state.properties;
+    const {
+      fieldName
+    } = action.payload;
+    dispatch({
+      type: SectionConstants.SECTION_FIELD_BLURRED,
+      payload: {
+        id,
+        fieldName
+      },
+      metaData: {}
+    });
+  }
+
+  static handleFieldChanged(_ref3) {
+    let {
+      action,
+      state,
+      dispatch
+    } = _ref3;
+    const {
+      id
+    } = state.properties;
     const {
       fieldName,
       value

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,15 @@
+import { useState, useMemo, useRef } from 'react';
+export function useRowData(rows) {
+  const rowRef = useRef(null);
+  useMemo(() => {
+    rowRef.current = rows;
+  }, [rows]);
+  const [, forceUpdate] = useState(rows);
+
+  function setRowData(rows) {
+    rowRef.current = rows;
+    forceUpdate(rows);
+  }
+
+  return [rowRef.current, 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
   }));
 }