shopee-ui-react 0.0.1-security → 2.10.49

package/es/components/cascader/hook/index.js

@@ -0,0 +1,296 @@
+import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
+import { useState, useCallback, useEffect, useRef } from 'react';
+import { isSelectFinished, getOptionsByValue } from '../utils/helper';
+
+var getDisplayValue = function getDisplayValue(params) {
+  var _ref = params || {},
+      value = _ref.value,
+      options = _ref.options,
+      format = _ref.format,
+      separator = _ref.separator;
+
+  if (!value || !options || options.length === 0) return '';
+  var selectedOptions = getOptionsByValue(options, value);
+
+  if (format) {
+    return format(selectedOptions);
+  }
+
+  var newValue = selectedOptions.map(function (option) {
+    return option.label;
+  }).join(separator);
+  return newValue;
+};
+
+export function useSelect(params) {
+  var value = params.value,
+      defaultValue = params.defaultValue,
+      changeOnSelect = params.changeOnSelect,
+      options = params.options,
+      onChange = params.onChange,
+      trigger = params.trigger,
+      format = params.format,
+      _params$separator = params.separator,
+      separator = _params$separator === void 0 ? '/' : _params$separator,
+      multiple = params.multiple;
+
+  var _useState = useState(value || defaultValue || []),
+      _useState2 = _slicedToArray(_useState, 2),
+      currentSelected = _useState2[0],
+      setCurrentSelected = _useState2[1];
+
+  var preValueRef = useRef(currentSelected); // multiple时, 当前点击的路径对应的value
+
+  var _useState3 = useState([]),
+      _useState4 = _slicedToArray(_useState3, 2),
+      currentClicked = _useState4[0],
+      setCurrentClicked = _useState4[1];
+
+  var _useState5 = useState(false),
+      _useState6 = _slicedToArray(_useState5, 2),
+      needToCheckFinish = _useState6[0],
+      setNeedToCheckFinish = _useState6[1];
+
+  var _useState7 = useState(getDisplayValue({
+    value: value,
+    options: options,
+    format: format,
+    separator: separator
+  })),
+      _useState8 = _slicedToArray(_useState7, 2),
+      displayValue = _useState8[0],
+      setDisplayValue = _useState8[1];
+
+  var updateDisplayValue = function updateDisplayValue(val) {
+    var newValue = getDisplayValue({
+      value: val,
+      options: options,
+      format: format,
+      separator: separator
+    });
+    setDisplayValue(newValue);
+  };
+
+  var emitCurrentSelect = useCallback(function (selectedValue) {
+    // emit change only when match below conditions:
+    // 1. changeOnSelect is true
+    // 2. in multiple mode
+    // 3. only root nodes are selected in single mode
+    // 4. selections are cleared
+    if (changeOnSelect || multiple || isSelectFinished(options, selectedValue) || selectedValue.length === 0) {
+      preValueRef.current = selectedValue;
+      updateDisplayValue(selectedValue);
+
+      if (onChange) {
+        onChange(selectedValue);
+      }
+    } // no need to listen updateDisplayValue
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+
+  }, [changeOnSelect, options, onChange]);
+
+  var resetSingleCurrentSelected = function resetSingleCurrentSelected() {
+    var optionArr = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];
+    var newCurrentSelected = currentSelected.slice();
+
+    if (optionArr.length === 0) {
+      newCurrentSelected = [];
+    } else {
+      optionArr.forEach(function (item) {
+        if (newCurrentSelected[item.level]) {
+          // reset selected value
+          newCurrentSelected = newCurrentSelected.filter(function (_, innerIndex) {
+            return innerIndex <= item.level;
+          });
+          newCurrentSelected.splice(item.level, 1, item.value);
+        } else {
+          // add current value to selected value
+          newCurrentSelected[item.level] = item.value;
+        }
+      });
+    }
+
+    setCurrentSelected(newCurrentSelected);
+    emitCurrentSelect(newCurrentSelected);
+  };
+
+  var resetMultiCurrentSelected = function resetMultiCurrentSelected(optionArr) {
+    var newCurrentSelected = currentSelected.slice();
+
+    var checkFunc = function checkFunc(optionItem, action) {
+      var itemValue = optionItem.value,
+          disabled = optionItem.disabled,
+          children = optionItem.children;
+
+      if (action === 'check' && !newCurrentSelected.includes(itemValue) && !disabled) {
+        newCurrentSelected.push(itemValue);
+      } else if (action === 'cancel') {
+        var aimIndex = newCurrentSelected.findIndex(function (item) {
+          return item === itemValue;
+        });
+
+        if (aimIndex >= 0) {
+          newCurrentSelected.splice(aimIndex, 1);
+        }
+      }
+
+      if (children && children.length) {
+        children.forEach(function (item) {
+          return checkFunc(item, action);
+        });
+      }
+    }; // 下至：点击某个节点，该节点一下所有子孙节点均选中或取消选中
+
+
+    var runDownFunc = function runDownFunc(optionItem) {
+      var itemValue = optionItem.value,
+          children = optionItem.children;
+      var action;
+
+      if (newCurrentSelected.includes(itemValue) || children && children.length && children.find(function (item) {
+        return newCurrentSelected.includes(item.value);
+      })) {
+        action = 'cancel';
+      } else {
+        action = 'check';
+      }
+
+      checkFunc(optionItem, action);
+    };
+    /**
+     * 上至：
+     * 1.从叶子节点开始，如果当前节点是最后一个子节点（代表前面的子节点已经处理完）
+     * 2.如果父节点的所有子节点都被选中且该父节点之前没被选中，则该父节点需被自动选中
+     * 3.如果父节点的子节点没有被全部选中且该父节点之前被选中，则该父节点需被自动取消选中
+    */
+
+
+    var runUpFunc = function runUpFunc(currentOptionItem, parentOptionItem) {
+      var isLastChildren = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : false;
+      var currentChildren = currentOptionItem.children;
+
+      if (currentChildren && currentChildren.length > 0) {
+        var lastChildIndex = currentChildren.length - 1;
+        currentChildren.forEach(function (tmp, index) {
+          return runUpFunc(tmp, currentOptionItem, index === lastChildIndex);
+        });
+      }
+
+      if (parentOptionItem && isLastChildren) {
+        var parentValue = parentOptionItem.value,
+            parentChildren = parentOptionItem.children;
+        var parentIndex = newCurrentSelected.findIndex(function (tmp) {
+          return tmp === parentValue;
+        });
+        var parentChildrenValue = (parentChildren || []).map(function (tmp) {
+          return tmp.value;
+        });
+
+        if (parentIndex < 0 && parentChildrenValue.every(function (tmp) {
+          return newCurrentSelected.includes(tmp);
+        })) {
+          newCurrentSelected.push(parentValue);
+        } else if (parentIndex >= 0 && parentChildrenValue.some(function (tmp) {
+          return !newCurrentSelected.includes(tmp);
+        })) {
+          newCurrentSelected.splice(parentIndex, 1);
+        }
+      }
+    };
+
+    if (optionArr.length === 0) {
+      newCurrentSelected = [];
+    } else {
+      var lastOptionIndex = options.length - 1;
+      optionArr.forEach(function (item) {
+        runDownFunc(item);
+        options.forEach(function (subItem, index) {
+          return runUpFunc(subItem, null, index === lastOptionIndex);
+        });
+      });
+    }
+
+    setCurrentSelected(newCurrentSelected);
+    emitCurrentSelect(newCurrentSelected);
+  };
+
+  var resetCurrentSelected = function resetCurrentSelected(optionArr) {
+    if (multiple) {
+      resetMultiCurrentSelected(optionArr);
+    } else {
+      resetSingleCurrentSelected(optionArr);
+    }
+  };
+
+  var resetCurrentClicked = function resetCurrentClicked() {
+    var newVal = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];
+    setCurrentClicked(newVal);
+  };
+
+  useEffect(function () {
+    if (value && currentSelected !== value) {
+      setCurrentSelected(value);
+      emitCurrentSelect(value);
+    } // Only want to watch value
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+
+  }, [value]);
+
+  var onMenuItemSelect = function onMenuItemSelect(optionArr) {
+    if (!optionArr || !optionArr.length) return; // 单选hover即选中
+
+    var isSingleSelect = !multiple && trigger === optionArr[0].trigger; // 多选hover只是展开，必须click 多选框才可选中
+
+    var isMultiSelect = multiple && optionArr[0].trigger === 'click';
+
+    if (isSingleSelect || isMultiSelect) {
+      resetCurrentSelected(optionArr);
+    } // Only hide cascader when on click and finished selection
+
+
+    if (optionArr[0].trigger === 'click') {
+      setNeedToCheckFinish(true);
+    }
+  };
+  /**
+   * 点击节点展开子节点：存储操作变量 currentClicked
+   * */
+
+
+  var onMenuItemClick = function onMenuItemClick(option) {
+    var newCurrentClicked = currentClicked.slice();
+    var aimItem = newCurrentClicked[option.level];
+
+    if (aimItem) {
+      newCurrentClicked.splice(option.level);
+
+      if (aimItem !== option.value) {
+        newCurrentClicked[option.level] = option.value;
+      }
+    } else {
+      newCurrentClicked[option.level] = option.value;
+    }
+
+    setCurrentClicked(newCurrentClicked);
+  };
+
+  var restoreToLatestSelection = function restoreToLatestSelection() {
+    if (preValueRef.current !== currentSelected) {
+      setCurrentSelected(preValueRef.current);
+    }
+  };
+
+  return {
+    currentSelected: currentSelected,
+    currentClicked: currentClicked,
+    needToCheckFinish: needToCheckFinish,
+    setNeedToCheckFinish: setNeedToCheckFinish,
+    displayValue: displayValue,
+    emitCurrentSelect: emitCurrentSelect,
+    onMenuItemSelect: onMenuItemSelect,
+    onMenuItemClick: onMenuItemClick,
+    resetCurrentSelected: resetCurrentSelected,
+    resetCurrentClicked: resetCurrentClicked,
+    restoreToLatestSelection: restoreToLatestSelection
+  };
+}

package/es/components/cascader/index.d.ts

@@ -0,0 +1,8 @@
+import Cascader from './Cascader';
+import CascaderPanel from './CascaderPanel';
+declare type InternalCascaderType = typeof Cascader;
+interface CascaderInterface extends InternalCascaderType {
+    Panel: typeof CascaderPanel;
+}
+declare const CascaderExport: CascaderInterface;
+export default CascaderExport;

package/es/components/cascader/index.js

@@ -0,0 +1,5 @@
+import Cascader from './Cascader';
+import CascaderPanel from './CascaderPanel';
+var CascaderExport = Cascader;
+CascaderExport.Panel = CascaderPanel;
+export default CascaderExport;

package/es/components/cascader/types.d.ts

@@ -0,0 +1,205 @@
+import React from 'react';
+import { TooltipPlacement } from '../tooltip';
+declare type Size = 'large' | 'normal' | 'small';
+declare type MaxLine = 1 | 2 | 3;
+export declare type FilterDataNode = CascaderMenuListItem[][] | CascaderMenuListItem[] | CascaderMenuListItem | CascaderOption[] | CascaderOption;
+export interface CascaderOption {
+    value: string | number;
+    label: string;
+    labels?: string[];
+    disabled?: boolean;
+    children?: CascaderOption[];
+}
+export interface CascaderOptionExtend extends CascaderOption {
+    level?: number;
+    trigger?: CascadeTrigger;
+}
+export declare type CascadeTrigger = 'click' | 'hover';
+export declare type CascadeCheckTrigger = 'check' | 'cancel';
+export declare type CascaderProps = {
+    /**
+     * Custom prefix of class
+     */
+    prefixCls?: string;
+    /**
+     * The value of cascader
+     */
+    value?: CascaderOption['value'][];
+    /**
+     * the default value of cascader
+     */
+    defaultValue?: CascaderOption['value'][];
+    /**
+     * The change event of cascader
+     */
+    onChange?: (selectedValue: CascaderOption['value'][]) => void;
+    /**
+     * The placement of cascader
+     */
+    placement?: TooltipPlacement;
+    /**
+     * The options of cascader
+     */
+    options: CascaderOption[];
+    /**
+     * Option separator
+     */
+    separator?: string;
+    /**
+     * The function to format select options, it will override separator if exist
+     */
+    format?: (options: CascaderOption[]) => string;
+    /**
+     * Whether cascader is clearable
+     */
+    clearable?: boolean;
+    /**
+     * The placeholder of cascader
+     */
+    placeholder?: string;
+    /**
+     * The way subset spreading
+     */
+    trigger?: CascadeTrigger;
+    /**
+     * The size of cascader
+     */
+    size?: Size;
+    /**
+     * whether emit change when each level selected, only valid when trigger is click
+     */
+    changeOnSelect?: boolean;
+    /**
+     * Whether the cascader is disabled
+     */
+    disabled?: boolean;
+    /**
+     * The max-height of cascader
+     */
+    maxHeight?: number;
+    /**
+     * The max-width of cascader menu
+     */
+    menuMaxWidth?: number;
+    /**
+     * The maximum number of rows a menu item can show
+     */
+    maxLine?: MaxLine;
+    /**
+     * Whether the cascader is multiple
+     */
+    multiple?: boolean;
+    /** Customized classname */
+    className?: string;
+    /**
+     * The additional className of popup overlay
+     */
+    dropdownClassName?: string;
+    /** Whether the cascader is filterable */
+    filterable?: boolean;
+    /** The empty text of no data */
+    emptyText?: string;
+    /** Ref of outter wrapper */
+    wrapperRef?: React.MutableRefObject<HTMLDivElement>;
+    /** Set visible of cascader popup */
+    open?: boolean;
+    /** children */
+    children?: React.ReactNode;
+    /** The DOM container of the tip, the default behavior is to create a div element in body */
+    getPopupContainer?: (node: HTMLElement) => HTMLElement;
+    /** Callback when popup shown or hidden */
+    onDropdownVisibleChange?: (value: boolean) => void;
+};
+export interface CascaderMenuListItem extends CascaderOption {
+    active: boolean;
+    disabled: boolean;
+}
+export interface ItemSelectParams {
+    value: CascaderOption['value'];
+    label: CascaderOption['label'];
+    level: number;
+    trigger: 'hover' | 'click';
+    children?: CascaderOption[];
+}
+export interface CascaderMenuProps {
+    prefixCls: string;
+    trigger: 'hover' | 'click';
+    lists: CascaderMenuListItem[][];
+    onItemSelect: (param: ItemSelectParams[]) => void;
+    onItemClick?: (param: CascaderOptionExtend) => void;
+    selected: CascaderOption['value'][];
+    clicked?: CascaderOption['value'][];
+    maxHeight?: number;
+    maxWidth?: number;
+    sectionIndex?: number;
+    menuStyle?: React.CSSProperties;
+    multiple?: boolean;
+    checkable?: boolean;
+}
+export interface CascaderPanelProps {
+    /**
+     * prefix of classname
+     */
+    prefixCls?: string;
+    /**
+     * the value of cascader
+     */
+    value?: CascaderOption['value'][];
+    /**
+     * the default value of cascader
+     */
+    defaultValue?: CascaderOption['value'][];
+    /**
+     * the change event of cascader
+     */
+    onChange?: (selectedValue: CascaderOption['value'][]) => void;
+    /**
+     * the options of cascader
+     */
+    options: CascaderOption[];
+    /**
+     * the way subset spreading
+     */
+    trigger?: CascadeTrigger;
+    /**
+     * the function to format select options, it will override separator if exist
+     */
+    format?: (options: CascaderOption[]) => string;
+    /**
+     * option separator
+     */
+    separator?: string;
+    /**
+     * customized class name
+     */
+    className?: string;
+    /**
+     * limit of show
+     */
+    maxShowLimit?: number;
+    /**
+     * the max-height of cascader
+     */
+    maxHeight?: number;
+    /**
+     * the max-width of menu
+     */
+    menuMaxWidth?: number;
+    /**
+     * whether should be changed when select
+     */
+    changeOnSelect?: boolean;
+    /** children */
+    children?: React.ReactNode;
+}
+export declare type FilterPanelProps = {
+    multiple: boolean;
+    searchKey: string;
+    lists: CascaderMenuListItem[][];
+    prefixCls: string;
+    selectedValue: CascaderOption['value'][];
+    emptyText?: string;
+    sectionIndex?: number;
+    onItemSelect: (param: ItemSelectParams[]) => void;
+};
+export {};

package/es/components/cascader/utils/helper.d.ts

@@ -0,0 +1,31 @@
+import { CascaderProps, CascaderOption, CascaderMenuListItem } from '../types';
+/**
+ * get children of current selected options
+ */
+export declare const getChildrenOfCurrentSelected: (currentOptions: CascaderOption[], selected: CascaderProps['value']) => CascaderOption[];
+/**
+ * check whether selection should be finished
+ * @param options options
+ * @param selected selected values
+ */
+export declare const isSelectFinished: (options: CascaderOption[], selected: CascaderProps['value']) => boolean;
+export declare const getOptionsByValue: (options?: CascaderOption[], selected?: CascaderOption['value'][]) => CascaderOption[];
+/**
+ * get current actived option
+ */
+export declare const getOptionByIndex: (options: CascaderOption[], selected: any[], hoverLevel: number, hoverIndex: number) => CascaderOption;
+/**
+ *  get hover index by selected option and hover level
+ */
+export declare const getHoverIndexByOption: (defaultOptions: CascaderOption[], selected: CascaderProps['value'], hoverLevel: number) => number;
+/**
+ * check whether specific option is disabled
+ * @param option cascader option
+ */
+export declare const isOptionDisabled: (option: CascaderOption) => boolean;
+export declare const getMenuLists: ({ options, hoverLevel, hoverIndex, currentSelected, }: {
+    options: any;
+    hoverLevel: any;
+    hoverIndex: any;
+    currentSelected: any;
+}) => CascaderMenuListItem[][];