@elliemae/ds-shuttle 3.0.0-next.2 → 3.0.0-next.3

package/cjs/DSShuttle.js

@@ -1,223 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-var _jsx = require('@babel/runtime/helpers/jsx');
-require('core-js/modules/web.dom-collections.iterator.js');
-require('react');
-var lodash = require('lodash');
-var reactDesc = require('react-desc');
-var dsTruncatedTooltipText = require('@elliemae/ds-truncated-tooltip-text');
-var ShuttleImpl = require('./ShuttleImpl.js');
-var utils = require('./utils.js');
-
-function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
-
-var _jsx__default = /*#__PURE__*/_interopDefaultLegacy(_jsx);
-
-const noop = () => {};
-
-const DSShuttle = _ref => {
-  let {
-    containerProps = {},
-    idField = 'id',
-    parentIdField = 'parent',
-    showIcons = true,
-    items = [],
-    selectedItems = undefined,
-    // if defined it becomes controlled (v1)
-    // TODO make `nonSelectedItems` the default controlled behavior (v2)
-    nonSelectedItems = undefined,
-    onSearch = noop,
-    onSearchOpen = noop,
-    onSearchClose = noop,
-    onDrillDown = noop,
-    onDrillDownTarget = noop,
-    onTargetSortEnd = noop,
-    setGetStatus = noop,
-    targetSortable = true,
-    sourceEmptyMessage = 'No Items Found',
-    sourceRootTitle = 'Category',
-    targetEmptyMessage = 'No Items Selected',
-    targetRootTitle = 'Selected Items',
-    composeSourceItemProps = () => ({}),
-    composeTargetItemProps = () => ({}),
-    onAddToTarget = noop,
-    onAddCheckedItems = noop,
-    onRemoveFromTarget = noop,
-    onRemoveAllFromTarget = noop,
-    onChange = noop,
-    renderSourceCounter = noop,
-    renderTargetCounter = noop,
-    sourceClearItemsText = 'CLEAR ALL',
-    targetClearItemsText = 'CLEAR ALL',
-    searchPlaceholder = 'Search field ID, name, etc.',
-    loadingSource = false,
-    loadingTarget = false,
-    onGetMoreItems = () => null,
-    hasNextPage = false,
-    moreItemsLoading
-  } = _ref;
-  return /*#__PURE__*/_jsx__default["default"](dsTruncatedTooltipText.TooltipTextProvider, {}, void 0, /*#__PURE__*/_jsx__default["default"](ShuttleImpl, {
-    composeSourceItemProps: composeSourceItemProps,
-    composeTargetItemProps: composeTargetItemProps,
-    containerProps: containerProps,
-    idField: idField,
-    items: items,
-    onAddCheckedItems: onAddCheckedItems,
-    onAddToTarget: onAddToTarget,
-    onChange: onChange,
-    onDrillDown: onDrillDown,
-    nonSelectedItems: nonSelectedItems,
-    onDrillDownTarget: onDrillDownTarget,
-    onRemoveAllFromTarget: onRemoveAllFromTarget,
-    onRemoveFromTarget: onRemoveFromTarget,
-    onSearch: onSearch,
-    onSearchClose: onSearchClose,
-    onSearchOpen: onSearchOpen,
-    onTargetSortEnd: onTargetSortEnd,
-    parentIdField: parentIdField,
-    renderSourceCounter: renderSourceCounter,
-    renderTargetCounter: renderTargetCounter,
-    searchPlaceholder: searchPlaceholder,
-    selectedItems: selectedItems,
-    setGetStatus: setGetStatus,
-    showIcons: showIcons,
-    sourceClearItemsText: sourceClearItemsText,
-    sourceEmptyMessage: sourceEmptyMessage,
-    sourceRootTitle: sourceRootTitle,
-    targetClearItemsText: targetClearItemsText,
-    targetEmptyMessage: targetEmptyMessage,
-    targetRootTitle: targetRootTitle,
-    targetSortable: targetSortable,
-    loadingSource: loadingSource,
-    loadingTarget: loadingTarget,
-    onGetMoreItems: lodash.debounce(function () {
-      onGetMoreItems(...arguments);
-    }, 500),
-    moreItemsLoading: moreItemsLoading,
-    hasNextPage: hasNextPage
-  }));
-};
-
-const props = {
-  /** inject props to shuttle wrapper */
-  containerProps: reactDesc.PropTypes.object.description('inject props to shuttle wrapper'),
-
-  /** The identifier field for the item object */
-  idField: reactDesc.PropTypes.string.description('The identifier field for the item object'),
-
-  /** The parent identifier field for the item object */
-  parentIdField: reactDesc.PropTypes.string.description('The parent identifier field for the item object'),
-
-  /** Whether to show the icons or not */
-  showIcons: reactDesc.PropTypes.string.description('Whether to show the icons or not'),
-
-  /** List of items */
-  items: reactDesc.PropTypes.arrayOf(reactDesc.PropTypes.shape({
-    disableDrillDown: reactDesc.PropTypes.bool,
-    icon: reactDesc.PropTypes.element,
-    name: reactDesc.PropTypes.string,
-    readOnly: reactDesc.PropTypes.bool,
-    description: reactDesc.PropTypes.string
-  })).description('list of items'),
-
-  /** Array of item ids that are selected. If passed the component behaves as controlled */
-  selectedItems: reactDesc.PropTypes.arrayOf(reactDesc.PropTypes.string).description('Array of item ids that are selected. If passed the component behaves as controlled'),
-
-  /** Array of item ids that aren't selected. Should include ALL non selected items, even those not rendered */
-  nonSelectedItems: reactDesc.PropTypes.arrayOf(reactDesc.PropTypes.string).description("Array of item ids that aren't selected.. Should include ALL non selected items, even those not rendered"),
-
-  /** Handler on search */
-  onSearch: reactDesc.PropTypes.func.description('Handler on search'),
-
-  /** Handler when the searchbox is visible */
-  onSearchOpen: reactDesc.PropTypes.func.description('Handler when the searchbox is visible'),
-
-  /** Handler when the searchbox is not visible */
-  onSearchClose: reactDesc.PropTypes.func.description('Handler when the searchbox is not visible'),
-
-  /** Source handler when a user navigates to a level down on the nested structure. First param: item drilled. Second param: direction ("up" | "down")  */
-  onDrillDown: reactDesc.PropTypes.func.description('Source handler when a user navigates to a level down on the nested structure. First param: item drilled. Second param: direction ("up" | "down")'),
-
-  /** Target handler when a user navigates to a level down on the nested structure. First param: item drilled. Second param: direction ("up" | "down") */
-  onDrillDownTarget: reactDesc.PropTypes.func.description('Target handler when a user navigates to a level down on the nested structure. First param: item drilled. Second param: direction ("up" | "down")'),
-
-  /** Target handler when user stops dragging an item */
-  onTargetSortEnd: reactDesc.PropTypes.func.description('Target handler when user stops dragging an item'),
-
-  /** Callback function that gets more items for Infinite Scroll */
-  onGetMoreItems: reactDesc.PropTypes.func.description('Callback function that gets more items for Infinite Scroll'),
-
-  /** Wheter there are mor items loading for Infinite Scroll */
-  moreItemsLoading: reactDesc.PropTypes.bool.description('Wheter there are mor items loading for Infinite Scroll'),
-
-  /** Wheter there is a next page for Infinite Scroll, controls when to trigger onGetMoreItems */
-  hasNextPage: reactDesc.PropTypes.bool.description('Wheter there is a next page for Infinite Scroll, controls when to trigger onGetMoreItems'),
-
-  /** Function that takes as a parameter an internal getter for the state */
-  setGetStatus: reactDesc.PropTypes.func.description('Function that takes as a parameter an internal getter for the state'),
-
-  /** Whether the target can be sortable with DnD */
-  targetSortable: reactDesc.PropTypes.bool.description('Whether the target can be sortable with DnD'),
-
-  /** Handler when the searchbox is visible */
-  sourceRootTitle: reactDesc.PropTypes.string.description('Handler when the searchbox is visible'),
-
-  /** Source text when there is no items */
-  sourceEmptyMessage: reactDesc.PropTypes.string.description('Source text when there is no items'),
-
-  /** Target text when there is no items */
-  targetEmptyMessage: reactDesc.PropTypes.string.description('Target text when there is no items'),
-
-  /** Target text for the first hierarchy item */
-  targetRootTitle: reactDesc.PropTypes.string.description('Target text for the first hierarchy item'),
-
-  /** Function that allow to compose the item props in the source */
-  composeSourceItemProps: reactDesc.PropTypes.func.description('Function that allow to compose the item props in the source'),
-
-  /** Function that allow to compose the item props in the target */
-  composeTargetItemProps: reactDesc.PropTypes.func.description('Function that allow to compose the item props in the target'),
-
-  /** Handler when a users moves an item to the target */
-  onAddToTarget: reactDesc.PropTypes.func.description('Handler when a users moves an item to the target'),
-
-  /** Handler when a users moves all the 'checked' items to the target */
-  onAddCheckedItems: reactDesc.PropTypes.func.description("Handler when a users moves all the 'checked' items to the target"),
-
-  /** Handler when a user removes an item from the target */
-  onRemoveFromTarget: reactDesc.PropTypes.func.description('Handler when a user removes an item from the target'),
-
-  /** Handler when a user removes all the items from the target */
-  onRemoveAllFromTarget: reactDesc.PropTypes.func.description('Handler when a user removes all the items from the target'),
-
-  /** Handler for every change on the state */
-  onChange: reactDesc.PropTypes.func.description('Handler for every change on the state'),
-
-  /** Function that returns an element for the source counter */
-  renderSourceCounter: reactDesc.PropTypes.func.description('Function that returns an element for the source counter'),
-
-  /** Function that returns an element for the target counter */
-  renderTargetCounter: reactDesc.PropTypes.func.description('Function that returns an element for the target counter'),
-
-  /** Source text for the clear items button */
-  sourceClearItemsText: reactDesc.PropTypes.string.description('Source text for the clear items button'),
-
-  /** Target text for the clear items button */
-  targetClearItemsText: reactDesc.PropTypes.string.description('Target text for the clear items button'),
-
-  /** Searchbox placeholder */
-  searchPlaceholder: reactDesc.PropTypes.string.description('Searchbox placeholder'),
-
-  /** Displays loading indicator on source section */
-  loadingSource: reactDesc.PropTypes.bool.description('Displays loading indicator on source section'),
-
-  /** Displays loading indicator on target section */
-  loadingTarget: reactDesc.PropTypes.bool.description('Displays loading indicator on target section')
-};
-const DSShuttleWithSchema = reactDesc.describe(DSShuttle);
-DSShuttleWithSchema.propTypes = props;
-
-exports.utils = utils;
-exports.DSShuttleWithSchema = DSShuttleWithSchema;
-exports["default"] = DSShuttle;

package/cjs/SearchState.js

@@ -1,41 +0,0 @@
-'use strict';
-
-require('core-js/modules/web.dom-collections.iterator.js');
-var react = require('react');
-var createContainer = require('constate');
-
-function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
-
-var createContainer__default = /*#__PURE__*/_interopDefaultLegacy(createContainer);
-
-function useSearchState() {
-  const [searchTerm, setSearchTerm] = react.useState('');
-  const [searching, setSearchBoxVisibility] = react.useState(false); // todo: create a hook for Visibility behavior
-
-  function toggleSearchBox(userVisible) {
-    if (userVisible !== undefined) {
-      setSearchBoxVisibility(userVisible);
-    } else {
-      setSearchBoxVisibility(!searching);
-    }
-  }
-
-  function reset() {
-    setSearchTerm('');
-    setSearchBoxVisibility(false);
-  }
-
-  return {
-    state: {
-      searchTerm,
-      searching
-    },
-    setSearchTerm,
-    toggleSearchBox,
-    reset
-  };
-}
-
-var SearchState = createContainer__default["default"](useSearchState, value => [value.state]);
-
-module.exports = SearchState;

package/cjs/Shuttle.actions.js

@@ -1,137 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-var _defineProperty = require('@babel/runtime/helpers/defineProperty');
-require('core-js/modules/web.dom-collections.iterator.js');
-require('core-js/modules/esnext.async-iterator.filter.js');
-require('core-js/modules/esnext.iterator.constructor.js');
-require('core-js/modules/esnext.iterator.filter.js');
-require('core-js/modules/esnext.async-iterator.for-each.js');
-require('core-js/modules/esnext.iterator.for-each.js');
-var dsUtilities = require('@elliemae/ds-utilities');
-var helper = require('./helper.js');
-var utils = require('./utils.js');
-
-function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
-
-var _defineProperty__default = /*#__PURE__*/_interopDefaultLegacy(_defineProperty);
-
-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__default["default"](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 toggleItemSelection(itemId) {
-  return state => _objectSpread(_objectSpread({}, state), {}, {
-    checkedItems: dsUtilities.addOrRemove(state.checkedItems, itemId)
-  });
-}
-function navigateTo(item, dest) {
-  const hierarchyType = helper.getHierarchyTypeName(dest);
-  return state => {
-    const indexInHierarchy = state[hierarchyType].findIndex(hItem => hItem.id === item.id);
-    const hierarchy = state[hierarchyType];
-    return _objectSpread(_objectSpread({}, state), {}, {
-      [hierarchyType]: indexInHierarchy !== -1 ? hierarchy.slice(0, indexInHierarchy + 1) : [...hierarchy, item]
-    });
-  };
-}
-function moveItem(item) {
-  return state => {
-    const movedItems = helper.toggleInObject(state.movedItems, item.id, item);
-    return _objectSpread(_objectSpread({}, state), {}, {
-      movedItems
-    });
-  };
-}
-const defaultOptions = {
-  parentField: 'parent',
-  idField: 'id',
-  op: hasMoved => !hasMoved
-}; // todo: optimize this
-
-function getItemDeep(_ref) {
-  let {
-    collection,
-    id,
-    options
-  } = _ref;
-
-  const {
-    idField
-  } = _objectSpread(_objectSpread({}, defaultOptions), options);
-
-  const itemIndex = collection.findIndex(fItem => fItem[idField] === id); // get item with nested children
-
-  const item = collection[itemIndex];
-  const children = item !== null && item !== void 0 && item.hasChildren ? dsUtilities.compose(utils.getChildren({
-    index: itemIndex
-  }))(collection) || [] : [];
-  return {
-    item,
-    children
-  };
-}
-
-function addToTarget(itemToAdd, collection) {
-  return (state, _ref2) => {
-    let {
-      idField
-    } = _ref2;
-    const items = collection || state.preparedItems;
-    const {
-      item,
-      children
-    } = getItemDeep({
-      collection: items,
-      id: itemToAdd[idField]
-    });
-    return _objectSpread(_objectSpread({}, state), {}, {
-      movedItems: [...state.movedItems, item],
-      targetItems: [...state.targetItems, item, ...children]
-    });
-  };
-} // todo: optimize this
-
-function removeFromTarget(itemToRemove) {
-  return (state, _ref3) => {
-    let {
-      idField
-    } = _ref3;
-    let targetItems = dsUtilities.cloneDeep(state.targetItems);
-    const itemIndex = targetItems.findIndex(fItem => fItem.id === itemToRemove.id);
-    const item = targetItems[itemIndex];
-    const children = item !== null && item !== void 0 && item.hasChildren ? dsUtilities.compose(helper.filterMovedItems(state.movedItems), utils.getChildren({
-      index: itemIndex
-    }))(targetItems) || [] : [];
-    targetItems.splice(itemIndex, 1);
-
-    if (item !== null && item !== void 0 && item.hasChildren && children.length) {
-      const childrenHash = dsUtilities.hashArray(children, 'id');
-      targetItems = targetItems.filter(i => !childrenHash[i.id]);
-    }
-
-    return _objectSpread(_objectSpread({}, state), {}, {
-      movedItems: state.movedItems.filter(mItem => mItem[idField] !== itemToRemove[idField]),
-      targetItems
-    });
-  };
-}
-function resetCheckedItems() {
-  return state => _objectSpread(_objectSpread({}, state), {}, {
-    checkedItems: []
-  });
-}
-function resetMovedItems() {
-  return state => _objectSpread(_objectSpread({}, state), {}, {
-    movedItems: [],
-    targetItems: []
-  });
-}
-
-exports.addToTarget = addToTarget;
-exports.moveItem = moveItem;
-exports.navigateTo = navigateTo;
-exports.removeFromTarget = removeFromTarget;
-exports.resetCheckedItems = resetCheckedItems;
-exports.resetMovedItems = resetMovedItems;
-exports.toggleItemSelection = toggleItemSelection;

package/cjs/ShuttleContainer.js

@@ -1,87 +0,0 @@
-'use strict';
-
-var _defineProperty = require('@babel/runtime/helpers/defineProperty');
-var _objectWithoutProperties = require('@babel/runtime/helpers/objectWithoutProperties');
-require('core-js/modules/esnext.async-iterator.filter.js');
-require('core-js/modules/esnext.iterator.constructor.js');
-require('core-js/modules/esnext.iterator.filter.js');
-require('core-js/modules/esnext.async-iterator.for-each.js');
-require('core-js/modules/esnext.iterator.for-each.js');
-var react = require('react');
-var dsUtilities = require('@elliemae/ds-utilities');
-var withProviders = require('./withProviders.js');
-var helper = require('./helper.js');
-var SearchState = require('./SearchState.js');
-var ShuttleState = require('./ShuttleState.js');
-
-function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
-
-var _defineProperty__default = /*#__PURE__*/_interopDefaultLegacy(_defineProperty);
-var _objectWithoutProperties__default = /*#__PURE__*/_interopDefaultLegacy(_objectWithoutProperties);
-
-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__default["default"](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);
-}
-
-function ShuttleContainer(_ref) {
-  let {
-    items = [],
-    children
-  } = _ref;
-
-  const _useContext = react.useContext(ShuttleState.Context),
-        {
-    state: shuttleState
-  } = _useContext,
-        handlers = _objectWithoutProperties__default["default"](_useContext, _excluded);
-
-  const {
-    state: searchState
-  } = react.useContext(SearchState.Context);
-
-  const {
-    movedItems,
-    hierarchy,
-    hierarchyDest,
-    checkedItems,
-    searchTerm,
-    searching,
-    toggleItemSelection,
-    resetCheckedItems,
-    resetMovedItems,
-    moveCheckedItems,
-    moveItem,
-    navigate
-  } = _objectSpread(_objectSpread(_objectSpread({}, shuttleState), searchState), handlers);
-
-  const sourceItems = react.useMemo(() => dsUtilities.compose(items => items.filter(item => !movedItems[item.id]), items => searchTerm && searching ? filterItemsByTerm(items, searchTerm) : items, items => helper.filterItemsByHierarchy(items, helper.getActiveIdFromHierarchy(hierarchy).id), items => helper.prepareItems(items))(items), [items, searchTerm, searching, hierarchy, movedItems]);
-  const targetItems = react.useMemo(() => {
-    const hierarchyId = helper.getActiveIdFromHierarchy(hierarchyDest).id;
-    return dsUtilities.compose(items => dsUtilities.sortBy(items, ['name']), items => hierarchyId ? helper.filterItemsByHierarchy(items, hierarchyId).filter(item => !movedItems[item.id]) : dsUtilities.uniqBy(dsUtilities.values(movedItems), 'id'))(items);
-  }, [items, searching, hierarchyDest, movedItems]);
-  return dsUtilities.isFunction(children) && children({
-    checkedItems,
-    hierarchy,
-    hierarchyDest,
-    onCheckItem: toggleItemSelection,
-    onClearCheckedItems: resetCheckedItems,
-    onClearMovedItems: resetMovedItems,
-    onMoveCheckedItems: () => moveCheckedItems(helper.getItemsById(checkedItems, items)),
-    onMoveItemToSource: item => moveItem(item, false),
-    onMoveItemToTarget: item => moveItem(item, true),
-    onNavigateOnSourceTo: item => navigate(item, false),
-    onNavigateOnTargetTo: item => navigate(item, true),
-    sourceItems,
-    targetItems
-  });
-}
-
-var ShuttleContainer$1 = withProviders(ShuttleContainer);
-
-module.exports = ShuttleContainer$1;