@elliemae/ds-shuttle 2.2.0-alpha.4 → 3.0.0-next.2

package/esm/ShuttleContainer.js

@@ -1,27 +1,43 @@
-import * as React from "react";
-import { useContext, useMemo } from "react";
-import {
-  isFunction,
-  compose,
-  uniqBy,
-  values,
-  sortBy
-} from "@elliemae/ds-utilities";
-import { withProviders } from "./withProviders";
-import {
-  prepareItems,
-  getActiveIdFromHierarchy,
-  filterItemsByHierarchy,
-  getItemsById
-} from "./helper";
-import { SearchState } from "./SearchState";
-import { ShuttleState } from "./ShuttleState";
+import _defineProperty from '@babel/runtime/helpers/esm/defineProperty';
+import _objectWithoutProperties from '@babel/runtime/helpers/esm/objectWithoutProperties';
+import 'core-js/modules/esnext.async-iterator.filter.js';
+import 'core-js/modules/esnext.iterator.constructor.js';
+import 'core-js/modules/esnext.iterator.filter.js';
+import 'core-js/modules/esnext.async-iterator.for-each.js';
+import 'core-js/modules/esnext.iterator.for-each.js';
+import { useContext, useMemo } from 'react';
+import { compose, sortBy, uniqBy, values, isFunction } from '@elliemae/ds-utilities';
+import withProviders from './withProviders.js';
+import { filterItemsByHierarchy, getActiveIdFromHierarchy, prepareItems, getItemsById } from './helper.js';
+import SearchState from './SearchState.js';
+import useShuttleState from './ShuttleState.js';
+
+const _excluded = ["state"];
+
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+
 function filterItemsByTerm(items, term) {
-  return items.filter((item) => item.name.toLowerCase().indexOf(String(term).toLowerCase()) !== -1 || String(item.id).indexOf(String(term).toLowerCase()) !== -1);
+  return items.filter(item => item.name.toLowerCase().indexOf(String(term).toLowerCase()) !== -1 || String(item.id).indexOf(String(term).toLowerCase()) !== -1);
 }
-function ShuttleContainer({ items = [], children }) {
-  const { state: shuttleState, ...handlers } = useContext(ShuttleState.Context);
-  const { state: searchState } = useContext(SearchState.Context);
+
+function ShuttleContainer(_ref) {
+  let {
+    items = [],
+    children
+  } = _ref;
+
+  const _useContext = useContext(useShuttleState.Context),
+        {
+    state: shuttleState
+  } = _useContext,
+        handlers = _objectWithoutProperties(_useContext, _excluded);
+
+  const {
+    state: searchState
+  } = useContext(SearchState.Context);
+
   const {
     movedItems,
     hierarchy,
@@ -35,11 +51,12 @@ function ShuttleContainer({ items = [], children }) {
     moveCheckedItems,
     moveItem,
     navigate
-  } = { ...shuttleState, ...searchState, ...handlers };
-  const sourceItems = useMemo(() => compose((items2) => items2.filter((item) => !movedItems[item.id]), (items2) => searchTerm && searching ? filterItemsByTerm(items2, searchTerm) : items2, (items2) => filterItemsByHierarchy(items2, getActiveIdFromHierarchy(hierarchy).id), (items2) => prepareItems(items2))(items), [items, searchTerm, searching, hierarchy, movedItems]);
+  } = _objectSpread(_objectSpread(_objectSpread({}, shuttleState), searchState), handlers);
+
+  const sourceItems = useMemo(() => compose(items => items.filter(item => !movedItems[item.id]), items => searchTerm && searching ? filterItemsByTerm(items, searchTerm) : items, items => filterItemsByHierarchy(items, getActiveIdFromHierarchy(hierarchy).id), items => prepareItems(items))(items), [items, searchTerm, searching, hierarchy, movedItems]);
   const targetItems = useMemo(() => {
     const hierarchyId = getActiveIdFromHierarchy(hierarchyDest).id;
-    return compose((items2) => sortBy(items2, ["name"]), (items2) => hierarchyId ? filterItemsByHierarchy(items2, hierarchyId).filter((item) => !movedItems[item.id]) : uniqBy(values(movedItems), "id"))(items);
+    return compose(items => sortBy(items, ['name']), items => hierarchyId ? filterItemsByHierarchy(items, hierarchyId).filter(item => !movedItems[item.id]) : uniqBy(values(movedItems), 'id'))(items);
   }, [items, searching, hierarchyDest, movedItems]);
   return isFunction(children) && children({
     checkedItems,
@@ -49,16 +66,15 @@ function ShuttleContainer({ items = [], children }) {
     onClearCheckedItems: resetCheckedItems,
     onClearMovedItems: resetMovedItems,
     onMoveCheckedItems: () => moveCheckedItems(getItemsById(checkedItems, items)),
-    onMoveItemToSource: (item) => moveItem(item, false),
-    onMoveItemToTarget: (item) => moveItem(item, true),
-    onNavigateOnSourceTo: (item) => navigate(item, false),
-    onNavigateOnTargetTo: (item) => navigate(item, true),
+    onMoveItemToSource: item => moveItem(item, false),
+    onMoveItemToTarget: item => moveItem(item, true),
+    onNavigateOnSourceTo: item => navigate(item, false),
+    onNavigateOnTargetTo: item => navigate(item, true),
     sourceItems,
     targetItems
   });
 }
-var ShuttleContainer_default = withProviders(ShuttleContainer);
-export {
-  ShuttleContainer_default as default
-};
-//# sourceMappingURL=ShuttleContainer.js.map
+
+var ShuttleContainer$1 = withProviders(ShuttleContainer);
+
+export { ShuttleContainer$1 as default };

package/esm/ShuttleImpl.js

@@ -1,132 +1,222 @@
-import * as React from "react";
-import React2, { Component } from "react";
-import { compose, arrayMove } from "@elliemae/ds-utilities";
-import { withProviders } from "./withProviders";
-import {
-  addToTarget,
-  navigateTo,
-  resetCheckedItems,
-  resetMovedItems,
-  toggleItemSelection,
-  removeFromTarget
-} from "./Shuttle.actions";
-import {
-  getActiveIdFromHierarchy,
-  filterBySearch,
-  getItemsById,
-  pipe,
-  getChildrenFromParent,
-  filterMovedItems
-} from "./helper";
-import { ShuttleRenderer } from "./ShuttleRenderer";
-import { SearchState } from "./SearchState";
-import { updateShuttleStateFromProps } from "./updateShuttleStateFromProps";
+import _defineProperty from '@babel/runtime/helpers/esm/defineProperty';
+import _objectWithoutProperties from '@babel/runtime/helpers/esm/objectWithoutProperties';
+import 'core-js/modules/esnext.async-iterator.filter.js';
+import 'core-js/modules/esnext.iterator.constructor.js';
+import 'core-js/modules/esnext.iterator.filter.js';
+import 'core-js/modules/esnext.async-iterator.some.js';
+import 'core-js/modules/esnext.iterator.some.js';
+import 'core-js/modules/esnext.async-iterator.map.js';
+import 'core-js/modules/esnext.iterator.map.js';
+import 'core-js/modules/web.dom-collections.iterator.js';
+import 'core-js/modules/esnext.async-iterator.find.js';
+import 'core-js/modules/esnext.iterator.find.js';
+import 'core-js/modules/esnext.async-iterator.for-each.js';
+import 'core-js/modules/esnext.iterator.for-each.js';
+import { Component } from 'react';
+import { arrayMove, compose } from '@elliemae/ds-utilities';
+import withProviders from './withProviders.js';
+import { navigateTo, resetCheckedItems, resetMovedItems, addToTarget, removeFromTarget, toggleItemSelection } from './Shuttle.actions.js';
+import { pipe, getItemsById, getActiveIdFromHierarchy, filterBySearch, filterMovedItems, getChildrenFromParent } from './helper.js';
+import ShuttleRenderer from './ShuttleRenderer.js';
+import SearchState from './SearchState.js';
+import updateShuttleStateFromProps from './updateShuttleStateFromProps.js';
+import { jsx } from 'react/jsx-runtime';
+
+const _excluded = ["idField", "nonSelectedItems", "moreItemsLoading"];
+
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+
 class ShuttleImpl extends Component {
   constructor(props) {
     super(props);
+
     this.getState = () => {
-      const { movedItems } = this.state;
+      const {
+        movedItems
+      } = this.state;
       return Object.keys(movedItems);
     };
+
     this.state = {
       prevProps: {},
       preparedItems: [],
       checkedItems: [],
-      hierarchy: [{ name: props.sourceRootTitle, id: null }],
-      hierarchyDest: [{ name: props.targetRootTitle, id: null }],
+      // left breadcrumb
+      hierarchy: [{
+        name: props.sourceRootTitle,
+        id: null
+      }],
+      // right breadcrumb
+      hierarchyDest: [{
+        name: props.targetRootTitle,
+        id: null
+      }],
       movedItems: [],
       sourceItems: [],
       targetItems: []
     };
-    this.moveCheckedItems = this.moveCheckedItems.bind(this);
+    this.toggleItemSelection = this.toggleItemSelection.bind(this);
+    this.resetCheckedItems = this.resetCheckedItems.bind(this);
     this.resetMovedItems = this.resetMovedItems.bind(this);
+    this.moveCheckedItems = this.moveCheckedItems.bind(this);
+    this.handleTargetSortEnd = this.handleTargetSortEnd.bind(this);
   }
+
   static getDerivedStateFromProps(nextProps, prevState) {
     return updateShuttleStateFromProps(nextProps, prevState);
   }
+
   componentDidMount() {
-    const { setGetStatus } = this.props;
+    const {
+      setGetStatus
+    } = this.props;
     setGetStatus(this.getState);
   }
+
   handleChange() {
-    const { onChange } = this.props;
-    const { movedItems } = this.state;
+    const {
+      onChange
+    } = this.props;
+    const {
+      movedItems
+    } = this.state;
     onChange(Object.keys(movedItems));
   }
+
   navigate(item, dest, direction) {
-    const { onDrillDown, onDrillDownTarget } = this.props;
-    if (!dest)
-      onDrillDown(item, direction);
-    if (dest)
-      onDrillDownTarget(item, direction);
-    const { reset: resetSearchState } = this.context;
+    const {
+      onDrillDown,
+      onDrillDownTarget
+    } = this.props;
+    if (!dest) onDrillDown(item, direction);
+    if (dest) onDrillDownTarget(item, direction);
+    const {
+      reset: resetSearchState
+    } = this.context;
     resetSearchState();
     this.setState(pipe([navigateTo(item, dest), resetCheckedItems()]));
   }
+
   resetCheckedItems() {
     this.setState(resetCheckedItems());
   }
+
   resetMovedItems() {
-    const { selectedItems, onRemoveAllFromTarget } = this.props;
+    const {
+      selectedItems,
+      onRemoveAllFromTarget
+    } = this.props;
+
     if (!selectedItems) {
-      this.setState(pipe([navigateTo({ id: null }, true), resetMovedItems()]), () => {
+      this.setState(pipe([navigateTo({
+        id: null
+      }, true), resetMovedItems()]), () => {
         this.handleChange();
       });
     } else {
-      this.setState(pipe([navigateTo({ id: null }, true)]));
+      this.setState(pipe([navigateTo({
+        id: null
+      }, true)]));
     }
+
     onRemoveAllFromTarget();
   }
+
   addToTarget(item) {
-    const { selectedItems, onAddToTarget } = this.props;
+    const {
+      selectedItems,
+      onAddToTarget
+    } = this.props;
+
     if (!selectedItems) {
       this.setState(pipe([addToTarget(item), resetCheckedItems()]), () => {
         this.handleChange();
       });
     }
+
     onAddToTarget(item);
   }
+
   removeFromTarget(item) {
-    const { selectedItems, onRemoveFromTarget } = this.props;
+    const {
+      selectedItems,
+      onRemoveFromTarget
+    } = this.props;
+
     if (!selectedItems) {
       this.setState(pipe([removeFromTarget(item)]), () => {
         this.handleChange();
       });
     }
+
     onRemoveFromTarget(item);
   }
+
   toggleItemSelection(item) {
     this.setState(toggleItemSelection(item.id));
   }
+
   moveCheckedItems() {
-    const { onAddCheckedItems, selectedItems, nonSelectedItems } = this.props;
-    const { checkedItems, preparedItems } = this.state;
+    const {
+      onAddCheckedItems,
+      selectedItems,
+      nonSelectedItems
+    } = this.props;
+    const {
+      checkedItems,
+      preparedItems
+    } = this.state;
     const isControlledV2 = !!selectedItems && !!nonSelectedItems;
-    const checked = isControlledV2 ? nonSelectedItems.filter((item) => checkedItems.some((check) => check === item)) : checkedItems;
+    const checked = isControlledV2 ? nonSelectedItems.filter(item => checkedItems.some(check => check === item)) : checkedItems;
     const items = getItemsById(checked, preparedItems);
-    const actions = !selectedItems ? items.map((item) => addToTarget(item)) : [];
+    const actions = !selectedItems ? items.map(item => addToTarget(item)) : [];
     this.setState(pipe([...actions, resetCheckedItems()]), () => {
       this.handleChange();
     });
     onAddCheckedItems(items);
   }
-  handleTargetSortEnd({ sourceItem, targetItem }) {
-    const { idField, onTargetSortEnd } = this.props;
-    const { targetItems, hierarchyDest, movedItems } = this.state;
+
+  handleTargetSortEnd(_ref) {
+    let {
+      sourceItem,
+      targetItem
+    } = _ref;
+    const {
+      idField,
+      onTargetSortEnd
+    } = this.props;
+    const {
+      targetItems,
+      hierarchyDest,
+      movedItems
+    } = this.state;
     const hierarchyId = getActiveIdFromHierarchy(hierarchyDest).id;
     const collection = !hierarchyId ? movedItems : targetItems;
-    const oldIndex = collection.findIndex((tItem) => tItem[idField] === sourceItem[idField]);
-    const newIndex = collection.findIndex((tItem) => tItem[idField] === targetItem[idField]);
+    const oldIndex = collection.findIndex(tItem => tItem[idField] === sourceItem[idField]);
+    const newIndex = collection.findIndex(tItem => tItem[idField] === targetItem[idField]);
     const sortedMovedItems = !hierarchyId ? arrayMove(movedItems, oldIndex, newIndex) : movedItems;
     const sortedItems = hierarchyId ? arrayMove(targetItems, oldIndex, newIndex) : targetItems;
     this.setState({
       targetItems: sortedItems,
       movedItems: sortedMovedItems
     });
-    onTargetSortEnd({ sourceItem, targetItem });
+    onTargetSortEnd({
+      sourceItem,
+      targetItem
+    });
   }
+
   render() {
-    const { idField, nonSelectedItems, moreItemsLoading, ...rest } = this.props;
+    const _this$props = this.props,
+          {
+      idField,
+      nonSelectedItems,
+      moreItemsLoading
+    } = _this$props,
+          rest = _objectWithoutProperties(_this$props, _excluded);
+
     const {
       hierarchy,
       hierarchyDest,
@@ -136,64 +226,79 @@ class ShuttleImpl extends Component {
       targetItems
     } = this.state;
     const {
-      state: { searchTerm, searching }
+      state: {
+        searchTerm,
+        searching
+      }
     } = this.context;
+
     const handleControlledSourceItms = () => {
-      const { id } = getActiveIdFromHierarchy(hierarchy);
+      const {
+        id
+      } = getActiveIdFromHierarchy(hierarchy);
+
       if (id) {
-        return filterBySearch(searchTerm, searching)(getChildrenFromParent(id)(nonSelectedItems.map((it) => items.find((itt) => itt.id === it))));
+        return filterBySearch(searchTerm, searching)(getChildrenFromParent(id)(nonSelectedItems.map(it => items.find(itt => itt.id === it))));
       }
-      return filterBySearch(searchTerm, searching)(items.filter((it) => nonSelectedItems.some((itt) => itt === it.id && !nonSelectedItems.some((ittt) => ittt === it.parent))));
+
+      return filterBySearch(searchTerm, searching)(items.filter(it => nonSelectedItems.some(itt => itt === it.id && !nonSelectedItems.some(ittt => ittt === it.parent))));
     };
-    let composedSourceItems;
+
+    let composedSourceItems; // controlled V2 TODO make it default controlled behavior
+
     if (nonSelectedItems) {
       composedSourceItems = handleControlledSourceItms();
     } else {
       composedSourceItems = compose(filterBySearch(searchTerm, searching), filterMovedItems(movedItems), getChildrenFromParent(getActiveIdFromHierarchy(hierarchy).id))(items);
     }
+
     const handleControlledTargetItms = () => {
-      const { id } = getActiveIdFromHierarchy(hierarchyDest);
+      const {
+        id
+      } = getActiveIdFromHierarchy(hierarchyDest);
+
       if (id) {
-        return getChildrenFromParent(getActiveIdFromHierarchy(hierarchyDest).id)(this.props.selectedItems.map((it) => items.find((itt) => itt.id === it)));
+        return getChildrenFromParent(getActiveIdFromHierarchy(hierarchyDest).id)(this.props.selectedItems.map(it => items.find(itt => itt.id === it)));
       }
-      return targetItems.filter((it) => this.props.selectedItems.some((itt) => itt === it.id && !this.props.selectedItems.some((ittt) => ittt === it.parent)));
+
+      return targetItems.filter(it => this.props.selectedItems.some(itt => itt === it.id && !this.props.selectedItems.some(ittt => ittt === it.parent)));
     };
-    let composedTargetItems;
+
+    let composedTargetItems; // controlled V2 TODO make it default controlled behavior
+
     if (nonSelectedItems) {
       composedTargetItems = handleControlledTargetItms();
     } else {
-      composedTargetItems = compose((tItems) => {
+      composedTargetItems = compose(tItems => {
         const hierarchyId = getActiveIdFromHierarchy(hierarchyDest).id;
         return hierarchyId ? compose(filterMovedItems(movedItems), getChildrenFromParent(hierarchyId))(tItems) : movedItems;
       })(targetItems);
     }
-    return /* @__PURE__ */ React2.createElement(ShuttleRenderer, {
-      ...rest,
-      moreItemsLoading,
-      checkedItems,
-      hierarchy,
-      hierarchyDest,
+
+    return /*#__PURE__*/jsx(ShuttleRenderer, _objectSpread(_objectSpread({}, rest), {}, {
+      moreItemsLoading: moreItemsLoading,
+      checkedItems: checkedItems,
+      hierarchy: hierarchy,
+      hierarchyDest: hierarchyDest,
       onCheckItem: this.toggleItemSelection,
       onClearCheckedItems: this.resetCheckedItems,
       onClearMovedItems: this.resetMovedItems,
       onItemCheck: this.toggleItemSelection,
       onMoveCheckedItems: this.moveCheckedItems,
-      onMoveItemToSource: (item) => this.removeFromTarget(item, false),
-      onMoveItemToTarget: (item) => this.addToTarget(item, true),
+      onMoveItemToSource: item => this.removeFromTarget(item, false),
+      onMoveItemToTarget: item => this.addToTarget(item, true),
       onNavigateOnSourceTo: (item, direction) => this.navigate(item, false, direction),
       onNavigateOnTargetTo: (item, direction) => this.navigate(item, true, direction),
       onSourceSortEnd: () => null,
       onTargetSortEnd: this.handleTargetSortEnd,
       sourceItems: composedSourceItems,
       targetItems: composedTargetItems
-    });
+    }));
   }
+
 }
+
 ShuttleImpl.contextType = SearchState.Context;
-const ShuttleImplHoc = withProviders(ShuttleImpl);
-var ShuttleImpl_default = ShuttleImplHoc;
-export {
-  ShuttleImplHoc as ShuttleImpl,
-  ShuttleImpl_default as default
-};
-//# sourceMappingURL=ShuttleImpl.js.map
+var ShuttleImpl$1 = withProviders(ShuttleImpl);
+
+export { ShuttleImpl$1 as default };