@zohodesk/library-platform 1.1.3 → 1.1.6-temp-1

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

@@ -1,24 +1,36 @@
 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,
-    isKeyboardControlsEnabled
+    isKeyboardControlsEnabled,
+    dropIndicator,
+    isReOrderLoading
   } = _ref;
-  return rows.map((row, index) => /*#__PURE__*/React.createElement(Row, {
-    key: index,
-    ...getRowProps(row, headers, isFlexibleColumns, isSelectionEnabled, rowCursor, hasRowActions, rowActionsColumnWidth, isKeyboardControlsEnabled)
-  }));
-}
+  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,
+      disabled: isReOrderLoading,
+      ...getRowProps(row, headers, isFlexibleColumns, isReorderEnabled, isSelectionEnabled, rowCursor, hasRowActions, rowActionsColumnWidth, isKeyboardControlsEnabled, isDroppable, dropPosition, isReOrderLoading)
+    });
+  });
+};
 
-function getRowProps(row, headers, isFlexibleColumns, isSelectionEnabled, rowCursor, hasRowActions, rowActionsColumnWidth, isKeyboardControlsEnabled) {
+function getRowProps(row, headers, isFlexibleColumns, isReorderEnabled, isSelectionEnabled, rowCursor, hasRowActions, rowActionsColumnWidth, isKeyboardControlsEnabled, isDroppable, dropPosition, isReOrderLoading) {
   const {
     id,
     columns,
@@ -38,11 +50,15 @@ function getRowProps(row, headers, isFlexibleColumns, isSelectionEnabled, rowCur
     isFocussed,
     selectionTooltip,
     isFlexibleColumns,
+    isReorderEnabled,
     isSelectionEnabled,
     cursor: rowCursor,
     hasActions: hasRowActions,
     isKeyboardControlsEnabled,
-    rowActionsColumnWidth
+    rowActionsColumnWidth,
+    isDroppable,
+    dropPosition,
+    isReOrderLoading
   };
 }
 

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

@@ -2,6 +2,7 @@ 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 "./../../css/TableList.module.css";
 
 function MassAction(_ref) {
   let {
@@ -14,13 +15,21 @@ function MassAction(_ref) {
   }
 
   if (!actions || actions.length === 0) {
-    return /*#__PURE__*/React.createElement(TableHeadFirstNode, null, /*#__PURE__*/React.createElement(TableHeading, {
+    return /*#__PURE__*/React.createElement(TableHeadFirstNode, {
+      customStyle: {
+        container: style.massActionHeader
+      }
+    }, /*#__PURE__*/React.createElement(TableHeading, {
       $i18n_text: "M/A",
       $i18n_tooltip: "Mass Action"
     }));
   }
 
-  return /*#__PURE__*/React.createElement(TableHeadFirstNode, null, /*#__PURE__*/React.createElement(ActionEventMediator, {
+  return /*#__PURE__*/React.createElement(TableHeadFirstNode, {
+    customStyle: {
+      container: style.massActionHeader
+    }
+  }, /*#__PURE__*/React.createElement(ActionEventMediator, {
     actions: actions
   }));
 }

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

@@ -1,12 +1,14 @@
 import React from 'react';
 import TableRow from '@zohodesk-private/desk-components/es/table/TableList/TableList';
+import DragHandle from '@zohodesk-private/desk-components/es/DragHandle/DragHandle';
 import RowSelection from "./RowSelection";
 import Columns from "./Columns";
 import RowActions from "./RowActions";
 import { createCustomComponent } from "../../../../../../../custom-component";
 import { RowEventHandlersFactory } from "./RowEventHandlersFactory";
 import TableRowProperties from "../../../../../../../../cc/table-list/row/Properties";
-import TableRowConstants from "../../../../../../../../cc/table-list/row/Constants"; // @ts-ignore
+import TableRowConstants from "../../../../../../../../cc/table-list/row/Constants";
+import { SortableHandle } from 'react-sortable-hoc'; // @ts-ignore
 
 import style from "../../css/TableList.module.css";
 
@@ -19,12 +21,16 @@ function RowView(_ref, ref) {
     dispatch
   } = helpers;
   const {
+    isReorderEnabled,
     isSelectionEnabled,
     isSelected,
     isSelectable,
     isKeyboardControlsEnabled,
     isFocussed,
-    selectionTooltip
+    selectionTooltip,
+    isDroppable,
+    dropPosition,
+    isReOrderLoading
   } = state.properties;
   const {
     id,
@@ -43,7 +49,7 @@ function RowView(_ref, ref) {
     key: id,
     ref: ref,
     testId: id,
-    $flag_padding: !isSelectionEnabled,
+    $flag_padding: !isSelectionEnabled && !isReorderEnabled,
     $flag_active: isSelected,
     $flag_hasHighlighter: isKeyboardControlsEnabled,
     $flag_isHighlighted: isFocussed,
@@ -54,9 +60,13 @@ function RowView(_ref, ref) {
       }
     }),
     customStyle: {
+      tableList: isSelectionEnabled || isReorderEnabled ? style.row : '',
       $pointer: style[`rowCursor_${cursor}`]
     }
-  }, renderRowSelection({
+  }, renderReorderer({
+    isReorderEnabled,
+    isReOrderLoading
+  }), renderRowSelection({
     isSelectionEnabled,
     id,
     selectionTooltip,
@@ -71,6 +81,8 @@ function RowView(_ref, ref) {
     columnWidth: rowActionsColumnWidth,
     type,
     actions
+  }), isDroppable && /*#__PURE__*/React.createElement("div", {
+    className: `${style.rowDropIndicator} ${dropPosition === 'downward' && style.dropIndicatorTop} ${dropPosition === 'upward' && style.dropIndicatorBottom}`
   }));
 }
 
@@ -93,24 +105,54 @@ function renderRowSelection(_ref2) {
   });
 }
 
-function renderColumns(_ref3) {
+const DragHandler = SortableHandle(_ref3 => {
+  let {
+    isDisabled
+  } = _ref3;
+  return /*#__PURE__*/React.createElement(DragHandle, {
+    isDisabled: isDisabled,
+    customStyle: {
+      container: style.dragHandleContainer
+    }
+  });
+});
+
+function renderReorderer(_ref4) {
+  let {
+    isReorderEnabled,
+    isReOrderLoading
+  } = _ref4;
+
+  if (!isReorderEnabled) {
+    return null;
+  }
+
+  return /*#__PURE__*/React.createElement("td", {
+    tabIndex: 0,
+    className: style.dragHandleWrapper
+  }, /*#__PURE__*/React.createElement(DragHandler, {
+    isDisabled: isReOrderLoading
+  }));
+}
+
+function renderColumns(_ref5) {
   let {
     columns,
     isFlexibleColumns
-  } = _ref3;
+  } = _ref5;
   return /*#__PURE__*/React.createElement(Columns, {
     data: columns,
     isFlexibleColumns: isFlexibleColumns
   });
 }
 
-function renderRowActions(_ref4) {
+function renderRowActions(_ref6) {
   let {
     hasActions,
     columnWidth,
     actions,
     type
-  } = _ref4;
+  } = _ref6;
   return /*#__PURE__*/React.createElement(RowActions, {
     hasActions: hasActions,
     columnWidth: columnWidth,

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

@@ -1,6 +1,8 @@
 import React from 'react';
 import TableListSelect from '@zohodesk-private/desk-components/es/table/TableListSelect/TableListSelect';
-import { TableListConstants } from "../../../../../../../../cc/table-list";
+import { TableListConstants } from "../../../../../../../../cc/table-list"; // @ts-ignore
+
+import style from "./../../css/TableList.module.css";
 
 function RowSelection(_ref) {
   let {
@@ -20,6 +22,10 @@ function RowSelection(_ref) {
     $data_id: id,
     $i18n_tooltip: tooltip,
     $flag_checked: selected,
+    customStyle: {
+      container: style.tableListSelectContainer
+    },
+    $flag_disabled: !selectable,
     $event_onChange: (_, event) => dispatch({
       type: TableListConstants.TABLE_LIST_TOGGLE_ITEM_SELECTION,
       payload: {

package/es/library/dot/components/table-list/frameworks/utils/getHeaderClasses.js

@@ -0,0 +1,37 @@
+export default function getTableListHeaderClassName(_ref) {
+  let {
+    isKeyboardControlsEnabled,
+    isReorderEnabled,
+    isSelectionEnabled
+  } = _ref;
+
+  if (isKeyboardControlsEnabled && isReorderEnabled && isSelectionEnabled) {
+    return 'tableListHeader-kbdReorderSelection';
+  }
+
+  if (isKeyboardControlsEnabled && isReorderEnabled && !isSelectionEnabled) {
+    return 'tableListHeader-kbdReorder';
+  }
+
+  if (isKeyboardControlsEnabled && isSelectionEnabled && !isReorderEnabled) {
+    return 'tableListHeader-kbdSelection';
+  }
+
+  if (isKeyboardControlsEnabled && !isReorderEnabled && !isSelectionEnabled) {
+    return 'tableListHeader-kbd';
+  }
+
+  if (isReorderEnabled && isSelectionEnabled && !isKeyboardControlsEnabled) {
+    return 'tableListHeader-reorderSelection';
+  }
+
+  if (isReorderEnabled && !isSelectionEnabled && !isKeyboardControlsEnabled) {
+    return 'tableListHeader-reorder';
+  }
+
+  if (isSelectionEnabled && !isReorderEnabled && !isKeyboardControlsEnabled) {
+    return 'tableListHeader-selection';
+  }
+
+  return 'tableListHeader';
+}

package/es/library/dot/components/table-list/frameworks/utils/getTableListClassName.js

@@ -0,0 +1,37 @@
+export default function getTableListClassName(_ref) {
+  let {
+    isKeyboardControlsEnabled,
+    isReorderEnabled,
+    isSelectionEnabled
+  } = _ref;
+
+  if (isKeyboardControlsEnabled && isReorderEnabled && isSelectionEnabled) {
+    return 'tableListRow-kbdReorderSelection';
+  }
+
+  if (isKeyboardControlsEnabled && isReorderEnabled && !isSelectionEnabled) {
+    return 'tableListRow-kbdReorder';
+  }
+
+  if (isKeyboardControlsEnabled && isSelectionEnabled && !isReorderEnabled) {
+    return 'tableListRow-kbdSelection';
+  }
+
+  if (isKeyboardControlsEnabled && !isReorderEnabled && !isSelectionEnabled) {
+    return 'tableListRow-kbd';
+  }
+
+  if (isReorderEnabled && isSelectionEnabled && !isKeyboardControlsEnabled) {
+    return 'tableListRow-reorderSelection';
+  }
+
+  if (isReorderEnabled && !isSelectionEnabled && !isKeyboardControlsEnabled) {
+    return 'tableListRow-reorder';
+  }
+
+  if (isSelectionEnabled && !isReorderEnabled && !isKeyboardControlsEnabled) {
+    return 'tableListRow-selection';
+  }
+
+  return 'tableListRow';
+}

package/es/library/dot/components/table-list/frameworks/utils/reOrder.js

@@ -0,0 +1,90 @@
+function reorderImmutableArray(arr, fromIndex, toIndex) {
+  const start = fromIndex < 0 ? arr.length + fromIndex : fromIndex;
+
+  if (start >= 0 && start < arr.length) {
+    const end = toIndex < 0 ? arr.length + toIndex : toIndex;
+    const [item] = arr.splice(start, 1);
+    arr.splice(end, 0, item);
+  }
+}
+
+export function reorderArray(arr, fromIndex, toIndex) {
+  const copy = [...arr];
+  reorderImmutableArray(copy, fromIndex, toIndex);
+  return copy;
+}
+export function parseCssNumberWithUnit(value) {
+  if (typeof value !== "string") return null;
+  const regex = /^(-?\d+(\.\d+)?)([a-z%]*)$/i;
+  const match = value.trim().match(regex);
+  if (!match) return null;
+  return {
+    number: parseFloat(match[1]),
+    unit: match[3] || ""
+  };
+}
+export function setTableInteractionClass(ref, className, add) {
+  if (ref.current) {
+    if (add && !ref.current.classList.contains(className)) {
+      ref.current.classList.add(className);
+    } else if (!add && ref.current.classList.contains(className)) {
+      ref.current.classList.remove(className);
+    }
+  }
+}
+export function adjustHelperElementPosition(ref, draggingClass) {
+  if (ref.current) {
+    const TableScrollLeft = ref.current.scrollLeft;
+    const helperElement = ref.current.querySelector(`.${draggingClass}`);
+
+    if (helperElement) {
+      const helperLeft = parseCssNumberWithUnit(helperElement.style.left);
+
+      if (helperLeft && helperLeft.unit === 'px') {
+        helperElement.style.left = `${helperLeft.number + TableScrollLeft}px`;
+      }
+
+      helperElement.scrollLeft = TableScrollLeft;
+    }
+  }
+}
+export function getDropIndicator(_ref) {
+  let {
+    index,
+    oldIndex,
+    newIndex,
+    rowsLength
+  } = _ref;
+  const isMovingDown = newIndex > oldIndex;
+  let dropIndex, normalizedDropIndex, dropPosition;
+
+  if (index === newIndex && newIndex === 0) {
+    normalizedDropIndex = 1;
+    dropPosition = 'downward';
+  } else if (index === newIndex && newIndex === rowsLength - 1) {
+    normalizedDropIndex = rowsLength - 2;
+    dropPosition = 'upward';
+  } else {
+    if (isMovingDown) {
+      dropIndex = newIndex < index ? newIndex : newIndex + 1;
+    } else {
+      dropIndex = newIndex <= index ? newIndex - 1 : newIndex;
+    }
+
+    normalizedDropIndex = dropIndex;
+    dropPosition = isMovingDown ? 'downward' : 'upward';
+
+    if (dropIndex < 0) {
+      normalizedDropIndex = 0;
+      dropPosition = 'downward';
+    } else if (dropIndex >= rowsLength) {
+      normalizedDropIndex = rowsLength - 1;
+      dropPosition = 'upward';
+    }
+  }
+
+  return {
+    index: normalizedDropIndex,
+    position: dropPosition
+  };
+}

package/es/library/dot/legacy-to-new-arch/action-icon/frameworks/ui/ActionIconView.js

@@ -1,6 +1,8 @@
 import React from 'react';
 import ActionIcon from '@zohodesk-private/desk-components/es/ActionIcon/ActionIcon';
-import Constants from "../../../../../../cc/action-icon/Constants";
+import Constants from "../../../../../../cc/action-icon/Constants"; // @ts-ignore
+
+import style from "./css/ActionIconView.module.css";
 export default function ActionIconView(_ref, ref) {
   let {
     state,
@@ -8,6 +10,8 @@ export default function ActionIconView(_ref, ref) {
   } = _ref;
   const {
     icon,
+    iconSize,
+    hasPadding,
     label,
     hoverVariant,
     isDisabled
@@ -18,9 +22,14 @@ export default function ActionIconView(_ref, ref) {
   return /*#__PURE__*/React.createElement(ActionIcon, {
     ref: ref,
     $ui_iconName: icon,
+    $ui_size: JSON.stringify(iconSize),
     $ui_hoverVariant: hoverVariant,
     $flag_disabled: isDisabled,
     $i18n_tooltip: label,
+    hasPadding: hasPadding,
+    customStyle: hoverVariant === 'default' ? {
+      icon: style.cursor_default
+    } : undefined,
     $event_onClick: !isDisabled ? () => {
       dispatch({
         type: Constants.ACTION_ICON_CLICKED

package/es/library/dot/legacy-to-new-arch/action-icon/frameworks/ui/css/ActionIconView.module.css

@@ -0,0 +1,3 @@
+.cursor_default {
+    cursor: default
+}

package/es/library/dot/legacy-to-new-arch/button/frameworks/ui/Button.js

@@ -0,0 +1,12 @@
+import { createCustomComponent } from "../../../../../custom-component";
+import ButtonProperties from "../../../../../../cc/button/Properties";
+import ButtonEvents from "../../../../../../cc/button/Events";
+import ButtonView from "./ButtonView";
+let Button = createCustomComponent({
+  name: "Button",
+  View: ButtonView,
+  properties: ButtonProperties,
+  events: ButtonEvents,
+  eventHandlers: {}
+});
+export default Button;

package/es/library/dot/legacy-to-new-arch/button/frameworks/ui/ButtonView.js

@@ -0,0 +1,41 @@
+import React from "react";
+import Button from '@zohodesk/components/es/Button/Button';
+import ButtonConstants from "../../../../../../cc/button/Constants";
+
+function ButtonView(_ref, ref) {
+  let {
+    state,
+    helpers
+  } = _ref;
+  const {
+    dispatch
+  } = helpers;
+  const {
+    text,
+    palette,
+    size,
+    isRounded,
+    isDisabled,
+    id,
+    status,
+    tooltip
+  } = state.properties;
+  return /*#__PURE__*/React.createElement(Button, {
+    getRef: ref,
+    text: text,
+    palette: palette,
+    size: size,
+    isRounded: isRounded,
+    isDisabled: isDisabled,
+    id: id,
+    status: status,
+    tooltip: tooltip,
+    onClick: () => {
+      dispatch({
+        type: ButtonConstants.BUTTON_CLICKED
+      });
+    }
+  });
+}
+
+export default ButtonView;

package/es/library/dot/legacy-to-new-arch/list-item/frameworks/ui/ListItem.js

@@ -0,0 +1,12 @@
+import { createCustomComponent } from "../../../../../custom-component";
+import ListItemProperties from "../../../../../../cc/list-item/Properties";
+import ListItemEvents from "../../../../../../cc/list-item/Events";
+import ListItemView from "./ListItemView";
+let ListItem = createCustomComponent({
+  name: "ListItem",
+  View: ListItemView,
+  properties: ListItemProperties,
+  events: ListItemEvents,
+  eventHandlers: {}
+});
+export default ListItem;

package/es/library/dot/legacy-to-new-arch/list-item/frameworks/ui/ListItemView.js

@@ -0,0 +1,122 @@
+import React from "react";
+import DropDownSeparator from '@zohodesk/components/es/DropDown/DropDownSeparator';
+import ListItem from '@zohodesk/components/es/ListItem/ListItem';
+import ListItemWithAvatar from '@zohodesk/components/es/ListItem/ListItemWithAvatar';
+import ListItemWithIcon from '@zohodesk/components/es/ListItem/ListItemWithIcon';
+import ListItemConstants from "../../../../../../cc/list-item/Constants";
+
+function ListItemView(_ref, ref) {
+  let {
+    state,
+    helpers
+  } = _ref;
+  const {
+    dispatch
+  } = helpers;
+  const {
+    id,
+    isDisabled,
+    isActive,
+    text,
+    secondaryText,
+    size,
+    tooltip,
+    icon,
+    iconSize,
+    imgSrc,
+    imgName,
+    href,
+    target,
+    divider
+  } = state.properties;
+  const isLink = !!href;
+  let listItemElement = null;
+
+  if (!!imgSrc || !!imgName) {
+    listItemElement = /*#__PURE__*/React.createElement(ListItemWithAvatar, {
+      getRef: ref,
+      id: id,
+      isDisabled: isDisabled,
+      autoHover: true,
+      active: isActive,
+      value: text,
+      secondaryValue: secondaryText,
+      size: size,
+      title: tooltip,
+      disableTitle: tooltip,
+      lhsJustifyContent: "start",
+      imgSrc: imgSrc,
+      name: imgName,
+      onClick: () => {
+        dispatch({
+          type: ListItemConstants.LISTITEM_CLICKED,
+          payload: {
+            id
+          }
+        });
+      },
+      customProps: isLink ? {
+        ContainerProps: {
+          isLink,
+          href,
+          target
+        }
+      } : undefined
+    });
+  } else if (!!icon) {
+    listItemElement = /*#__PURE__*/React.createElement(ListItemWithIcon, {
+      getRef: ref,
+      id: id,
+      isDisabled: isDisabled,
+      autoHover: true,
+      active: isActive,
+      value: text,
+      secondaryValue: secondaryText,
+      size: size,
+      title: tooltip,
+      disableTitle: tooltip,
+      lhsJustifyContent: "start",
+      iconName: icon,
+      iconSize: JSON.stringify(iconSize),
+      isLink: isLink,
+      href: href,
+      target: target,
+      onClick: () => {
+        dispatch({
+          type: ListItemConstants.LISTITEM_CLICKED,
+          payload: {
+            id
+          }
+        });
+      }
+    });
+  } else {
+    listItemElement = /*#__PURE__*/React.createElement(ListItem, {
+      getRef: ref,
+      id: id,
+      isDisabled: isDisabled,
+      autoHover: true,
+      active: isActive,
+      value: text,
+      secondaryValue: secondaryText,
+      size: size,
+      title: tooltip,
+      disableTitle: tooltip,
+      isLink: isLink,
+      href: href,
+      target: target,
+      onClick: () => {
+        dispatch({
+          type: ListItemConstants.LISTITEM_CLICKED,
+          payload: {
+            id
+          }
+        });
+      }
+    });
+  }
+
+  return /*#__PURE__*/React.createElement(React.Fragment, null, divider === 'before' && /*#__PURE__*/React.createElement(DropDownSeparator, null), listItemElement, divider === 'after' && /*#__PURE__*/React.createElement(DropDownSeparator, null));
+}
+
+export default ListItemView;

package/es/library/dot/legacy-to-new-arch/more-dropdown/frameworks/ui/MoreDropdown.js

@@ -0,0 +1,12 @@
+import { createCustomComponent } from "../../../../../custom-component";
+import MoreDropdownProperties from "../../../../../../cc/more-dropdown/Properties";
+import MoreDropdownEvents from "../../../../../../cc/more-dropdown/Events";
+import MoreDropdownView from "./MoreDropdownView";
+let MoreDropdown = createCustomComponent({
+  name: "MoreDropdown",
+  View: MoreDropdownView,
+  properties: MoreDropdownProperties,
+  events: MoreDropdownEvents,
+  eventHandlers: {}
+});
+export default MoreDropdown;