acud 0.0.60

package/es/cascader/Cascader.js

@@ -0,0 +1,641 @@
+import _toConsumableArray from "@babel/runtime/helpers/esm/toConsumableArray";
+import _classCallCheck from "@babel/runtime/helpers/esm/classCallCheck";
+import _createClass from "@babel/runtime/helpers/esm/createClass";
+import _inherits from "@babel/runtime/helpers/esm/inherits";
+import _createSuper from "@babel/runtime/helpers/esm/createSuper";
+import _extends from "@babel/runtime/helpers/esm/extends";
+
+var __rest = this && this.__rest || function (s, e) {
+  var t = {};
+
+  for (var p in s) {
+    if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0) t[p] = s[p];
+  }
+
+  if (s != null && typeof Object.getOwnPropertySymbols === "function") for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+    if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i])) t[p[i]] = s[p[i]];
+  }
+  return t;
+};
+
+import * as React from 'react';
+import isEmpty from 'lodash/isEmpty'; // eslint-disable-next-line no-duplicate-imports
+
+import Trigger from 'rc-trigger';
+import KeyCode from "rc-util/es/KeyCode";
+import arrayTreeFilter from 'array-tree-filter';
+import { isEqualArrays, isIncludeArray } from './utils';
+import Menus from './Menus';
+import BUILT_IN_PLACEMENTS from './placements';
+
+var getFieldNames = function getFieldNames(_ref) {
+  var fieldNames = _ref.fieldNames;
+  return fieldNames;
+};
+
+var getFilledFieldNames = function getFilledFieldNames(props) {
+  var fieldNames = getFieldNames(props) || {};
+  var names = {
+    children: fieldNames.children || 'children',
+    label: fieldNames.label || 'label',
+    value: fieldNames.value || 'value'
+  };
+  return names;
+};
+
+var flattenTree = function flattenTree(options, props) {
+  var ancestor = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : [];
+  var names = getFilledFieldNames(props);
+  var flattenOptions = [];
+  var childrenName = names.children;
+  options.forEach(function (option) {
+    var path = ancestor.concat(option);
+
+    if (props.changeOnSelect || !option[childrenName] || !option[childrenName].length) {
+      flattenOptions.push(path);
+    }
+
+    if (option[childrenName]) {
+      flattenOptions = flattenOptions.concat(flattenTree(option[childrenName], props, path));
+    }
+  });
+  return flattenOptions;
+};
+
+var getEnableOptions = function getEnableOptions(options) {
+  var enabledOptions = [];
+
+  if (options && options.length) {
+    options.forEach(function (option) {
+      var disabled = option.disabled,
+          children = option.children;
+
+      if (disabled) {
+        return;
+      }
+
+      if (children && children.length) {
+        var enabledChilren = getEnableOptions(children);
+        enabledOptions.push(_extends(_extends({}, option), {
+          children: enabledChilren
+        }));
+        return;
+      }
+
+      enabledOptions.push(option);
+    });
+  }
+
+  return enabledOptions;
+};
+
+var Cascader = /*#__PURE__*/function (_React$Component) {
+  _inherits(Cascader, _React$Component);
+
+  var _super = _createSuper(Cascader);
+
+  function Cascader(props) {
+    var _this;
+
+    _classCallCheck(this, Cascader);
+
+    _this = _super.call(this, props);
+
+    _this.setPopupVisible = function (popupVisible) {
+      var value = _this.state.value;
+
+      if (!('popupVisible' in _this.props)) {
+        _this.setState({
+          popupVisible: popupVisible
+        });
+      } // sync activeValue with value when panel open
+
+
+      if (popupVisible && !_this.state.popupVisible && !isEmpty(value) && _this.props.mode !== 'multiple') {
+        _this.setState({
+          activeValue: value
+        });
+      }
+
+      _this.setState({
+        hoveredValue: []
+      });
+
+      _this.props.onPopupVisibleChange(popupVisible);
+    };
+
+    _this.handleChange = function (options, _ref2, e) {
+      var visible = _ref2.visible;
+
+      if (e.type !== 'keydown' || e.keyCode === KeyCode.ENTER) {
+        _this.props.onChange(options.map(function (o) {
+          return o[_this.getFieldName('value')];
+        }), options);
+
+        _this.setPopupVisible(visible);
+      }
+    };
+
+    _this.handlePopupVisibleChange = function (popupVisible) {
+      _this.setPopupVisible(popupVisible);
+    };
+
+    _this.handleMenuSelect = function (targetOption, menuIndex, e) {
+      // Keep focused state for keyboard support
+      var triggerNode = _this.trigger.getRootDomNode();
+
+      if (triggerNode && triggerNode.focus) {
+        triggerNode.focus();
+      }
+
+      var _this$props = _this.props,
+          changeOnSelect = _this$props.changeOnSelect,
+          loadData = _this$props.loadData,
+          expandTrigger = _this$props.expandTrigger;
+
+      if (!targetOption || targetOption.disabled) {
+        return;
+      }
+
+      var activeValue = _this.state.activeValue;
+      activeValue = activeValue.slice(0, menuIndex + 1);
+      activeValue[menuIndex] = targetOption[_this.getFieldName('value')];
+
+      var activeOptions = _this.getActiveOptions(activeValue);
+
+      if (targetOption.isLeaf === false && !targetOption[_this.getFieldName('children')] && loadData) {
+        if (changeOnSelect) {
+          _this.handleChange(activeOptions, {
+            visible: true
+          }, e);
+        }
+
+        _this.setState({
+          activeValue: activeValue
+        });
+
+        loadData(activeOptions);
+        return;
+      }
+
+      var newState = {};
+
+      if (!targetOption[_this.getFieldName('children')] || !targetOption[_this.getFieldName('children')].length) {
+        if (_this.props.mode !== 'multiple') {
+          _this.handleChange(activeOptions, {
+            visible: false
+          }, e); // set value to activeValue when select leaf option
+
+
+          newState.value = activeValue; // add e.type judgement to prevent `onChange` being triggered by mouseEnter
+        }
+      } else if (changeOnSelect && (e.type === 'click' || e.type === 'keydown')) {
+        if (expandTrigger === 'hover') {
+          _this.handleChange(activeOptions, {
+            visible: false
+          }, e);
+        } else {
+          _this.handleChange(activeOptions, {
+            visible: true
+          }, e);
+        } // set value to activeValue on every select
+
+
+        newState.value = activeValue;
+      }
+
+      newState.activeValue = activeValue; //  not change the value by keyboard
+
+      if ('value' in _this.props || e.type === 'keydown' && e.keyCode !== KeyCode.ENTER) {
+        delete newState.value;
+      }
+
+      newState.hoveredValue = activeValue;
+
+      _this.setState(newState);
+    };
+
+    _this.handleMenuMultiSelect = function (targetOption, _menuIndex, optionKey, e) {
+      var checked = e.target.checked;
+
+      var targetOptionChildren = targetOption[_this.getFieldName('children')];
+
+      var value = _this.state.value;
+      var keyword = _this.props.keyword;
+      var newValue = []; // 1、当前有子级：将除disabled外的所有子级全部push进value
+
+      if (targetOptionChildren && targetOptionChildren.length) {
+        var enableChildren = getEnableOptions(targetOptionChildren);
+        var flattenOptions = flattenTree(enableChildren, _this.props);
+        var childrenValue = flattenOptions.map(function (option) {
+          return [].concat(_toConsumableArray(optionKey), _toConsumableArray(option.map(function (o) {
+            return o[_this.getFieldName('value')];
+          })));
+        });
+        newValue = checked ? [].concat(_toConsumableArray(value), _toConsumableArray(childrenValue)) : value.filter(function (valueItem) {
+          return !isIncludeArray(childrenValue, valueItem);
+        });
+      } // 2、当前是最后一级：直接push进value
+      else {
+        if (checked) {
+          newValue = keyword ? [].concat(_toConsumableArray(value), _toConsumableArray(optionKey)) : [].concat(_toConsumableArray(value), [optionKey]);
+        } else {
+          newValue = value.filter(function (valueItem) {
+            return !isEqualArrays(valueItem, keyword ? optionKey[0] : optionKey);
+          });
+        }
+      } // 3、对newValue进行排序
+      // const totalValues = this.getTotalValues();
+      // let newSortedValue = [];
+      // totalValues.forEach(value => {
+      //     if (isIncludeArray(newValue, value)) {
+      //         newSortedValue.push(value);
+      //     }
+      // });
+      // 先取消排序
+
+
+      var newSortedValue = newValue;
+      var newSortedSelectOptions = newSortedValue.map(function (valueItem) {
+        return _this.getActiveOptions(valueItem);
+      });
+
+      _this.props.onChange(newSortedValue, newSortedSelectOptions);
+
+      _this.setState({
+        value: newSortedValue
+      });
+    };
+
+    _this.handleMenuMultiSelectAll = function (e) {
+      var checked = e.target.checked;
+      var value = _this.state.value;
+
+      var disabledValues = _this.getDisabledValues();
+
+      if (checked) {
+        var enableValues = _this.getEnableValues();
+
+        var disabledInValue = value.filter(function (valueItem) {
+          return isIncludeArray(disabledValues, valueItem);
+        });
+        var newValue = [].concat(_toConsumableArray(enableValues), _toConsumableArray(disabledInValue));
+        var newSelectOptions = newValue.map(function (valueItem) {
+          return arrayTreeFilter(_this.props.options || [], function (o, level) {
+            return o[_this.getFieldName('value')] === valueItem[level];
+          }, {
+            childrenKeyName: _this.getFieldName('children')
+          });
+        });
+
+        _this.props.onChange(newValue, newSelectOptions);
+
+        _this.setState({
+          value: newValue,
+          activeValue: []
+        });
+
+        _this.setPopupVisible(false);
+      } else {
+        var _newValue = value.filter(function (valueItem) {
+          return isIncludeArray(disabledValues, valueItem);
+        });
+
+        var _newSelectOptions = _newValue.map(function (valueItem) {
+          return _this.getActiveOptions(valueItem);
+        });
+
+        _this.props.onChange(_newValue, _newSelectOptions);
+
+        _this.setState({
+          value: _newValue,
+          activeValue: []
+        });
+      }
+    };
+
+    _this.handleActiveValueSet = function (activeValue) {
+      _this.setState(function (prevState) {
+        return _extends(_extends({}, prevState), {
+          activeValue: activeValue
+        });
+      });
+    };
+
+    _this.handleItemDoubleClick = function () {
+      var changeOnSelect = _this.props.changeOnSelect;
+
+      if (changeOnSelect) {
+        _this.setPopupVisible(false);
+      }
+    };
+
+    _this.handleKeyDown = function (e) {
+      var children = _this.props.children; // Don't bind keyboard support when children specify the onKeyDown
+
+      if (children && children.props.onKeyDown) {
+        children.props.onKeyDown(e);
+        return;
+      }
+
+      var activeValue = _toConsumableArray(_this.state.activeValue);
+
+      var currentLevel = activeValue.length - 1 < 0 ? 0 : activeValue.length - 1;
+
+      var currentOptions = _this.getCurrentLevelOptions();
+
+      var currentIndex = currentOptions.map(function (o) {
+        return o[_this.getFieldName('value')];
+      }).indexOf(activeValue[currentLevel]);
+
+      if (e.keyCode !== KeyCode.DOWN && e.keyCode !== KeyCode.UP && e.keyCode !== KeyCode.LEFT && e.keyCode !== KeyCode.RIGHT && e.keyCode !== KeyCode.ENTER && e.keyCode !== KeyCode.SPACE && e.keyCode !== KeyCode.BACKSPACE && e.keyCode !== KeyCode.ESC && e.keyCode !== KeyCode.TAB) {
+        return;
+      } // Press any keys above to reopen menu
+
+
+      if (!_this.state.popupVisible && e.keyCode !== KeyCode.BACKSPACE && e.keyCode !== KeyCode.LEFT && e.keyCode !== KeyCode.RIGHT && e.keyCode !== KeyCode.ESC && e.keyCode !== KeyCode.TAB) {
+        _this.setPopupVisible(true);
+
+        if (_this.props.onKeyDown) {
+          _this.props.onKeyDown(e);
+        }
+
+        return;
+      }
+
+      if (e.keyCode === KeyCode.DOWN || e.keyCode === KeyCode.UP) {
+        e.preventDefault();
+        var nextIndex = currentIndex;
+
+        if (nextIndex !== -1) {
+          if (e.keyCode === KeyCode.DOWN) {
+            nextIndex += 1;
+            nextIndex = nextIndex >= currentOptions.length ? 0 : nextIndex;
+          } else {
+            nextIndex -= 1;
+            nextIndex = nextIndex < 0 ? currentOptions.length - 1 : nextIndex;
+          }
+        } else {
+          nextIndex = 0;
+        }
+
+        activeValue[currentLevel] = currentOptions[nextIndex][_this.getFieldName('value')];
+      } else if (e.keyCode === KeyCode.LEFT || e.keyCode === KeyCode.BACKSPACE) {
+        e.preventDefault();
+        activeValue.splice(activeValue.length - 1, 1);
+      } else if (e.keyCode === KeyCode.RIGHT) {
+        e.preventDefault();
+
+        if (currentOptions[currentIndex] && currentOptions[currentIndex][_this.getFieldName('children')]) {
+          activeValue.push(currentOptions[currentIndex][_this.getFieldName('children')][0][_this.getFieldName('value')]);
+        }
+      } else if (e.keyCode === KeyCode.ESC || e.keyCode === KeyCode.TAB) {
+        _this.setPopupVisible(false);
+
+        if (_this.props.onKeyDown) {
+          _this.props.onKeyDown(e);
+        }
+
+        return;
+      }
+
+      if (!activeValue || activeValue.length === 0) {
+        _this.setPopupVisible(false);
+      }
+
+      var activeOptions = _this.getActiveOptions(activeValue);
+
+      var targetOption = activeOptions[activeOptions.length - 1];
+
+      _this.handleMenuSelect(targetOption, activeOptions.length - 1, e);
+
+      if (_this.props.onKeyDown) {
+        _this.props.onKeyDown(e);
+      }
+    };
+
+    _this.saveTrigger = function (node) {
+      _this.trigger = node;
+    };
+
+    var initialValue = [];
+
+    if ('value' in props) {
+      initialValue = props.value || [];
+    } else if ('defaultValue' in props) {
+      initialValue = props.defaultValue || [];
+    }
+
+    _this.state = {
+      popupVisible: props.popupVisible,
+      activeValue: props.initialActiveValue || initialValue,
+      hoveredValue: [],
+      value: initialValue,
+      prevProps: props
+    };
+    _this.defaultFieldNames = {
+      label: 'label',
+      value: 'value',
+      children: 'children'
+    };
+    return _this;
+  }
+
+  _createClass(Cascader, [{
+    key: "getPopupDOMNode",
+    value: function getPopupDOMNode() {
+      return this.trigger.getPopupDomNode();
+    }
+  }, {
+    key: "getFieldName",
+    value: function getFieldName(name) {
+      return this.props.fieldNames[name] || this.defaultFieldNames[name];
+    }
+  }, {
+    key: "getFieldNames",
+    value: function getFieldNames() {
+      return this.props.fieldNames;
+    }
+  }, {
+    key: "getActiveOptions",
+    value: function getActiveOptions(activeValue) {
+      var _this2 = this;
+
+      return arrayTreeFilter(this.props.options || [], function (o, level) {
+        return o[_this2.getFieldName('value')] === activeValue[level];
+      }, {
+        childrenKeyName: this.getFieldName('children')
+      });
+    }
+  }, {
+    key: "getCurrentLevelOptions",
+    value: function getCurrentLevelOptions() {
+      var _this$props$options = this.props.options,
+          options = _this$props$options === void 0 ? [] : _this$props$options;
+      var _this$state$activeVal = this.state.activeValue,
+          activeValue = _this$state$activeVal === void 0 ? [] : _this$state$activeVal;
+      var result = this.getActiveOptions(activeValue);
+
+      if (result[result.length - 2]) {
+        return result[result.length - 2][this.getFieldName('children')];
+      }
+
+      return _toConsumableArray(options).filter(function (o) {
+        return !o.disabled;
+      });
+    }
+  }, {
+    key: "getTotalValues",
+    value: function getTotalValues() {
+      var _this3 = this;
+
+      var _this$props2 = this.props,
+          options = _this$props2.options,
+          keyword = _this$props2.keyword;
+      var flattenOptions = flattenTree(options, this.props);
+      return flattenOptions.map(function (option) {
+        return option.map(function (o) {
+          var value = o[_this3.getFieldName('value')];
+
+          return keyword ? value[0] : value;
+        });
+      });
+    }
+  }, {
+    key: "getEnableValues",
+    value: function getEnableValues(options) {
+      var _this4 = this;
+
+      var enableOptions = getEnableOptions(options || this.props.options);
+      var flattenOptions = flattenTree(enableOptions, this.props);
+      return flattenOptions.map(function (option) {
+        return option.map(function (o) {
+          return o[_this4.getFieldName('value')];
+        });
+      });
+    }
+  }, {
+    key: "getDisabledValues",
+    value: function getDisabledValues() {
+      var _this5 = this;
+
+      var flattenOptions = flattenTree(this.props.options, this.props);
+      var disabledOptions = flattenOptions.filter(function (options) {
+        return options.some(function (option) {
+          return option.disabled;
+        });
+      });
+      return disabledOptions.map(function (options) {
+        return options.map(function (o) {
+          return o[_this5.getFieldName('value')];
+        });
+      });
+    }
+  }, {
+    key: "render",
+    value: function render() {
+      var _a = this.props,
+          prefixCls = _a.prefixCls,
+          transitionName = _a.transitionName,
+          popupClassName = _a.popupClassName,
+          _a$options = _a.options,
+          options = _a$options === void 0 ? [] : _a$options,
+          disabled = _a.disabled,
+          builtinPlacements = _a.builtinPlacements,
+          popupPlacement = _a.popupPlacement,
+          children = _a.children,
+          dropdownRender = _a.dropdownRender,
+          restProps = __rest(_a, ["prefixCls", "transitionName", "popupClassName", "options", "disabled", "builtinPlacements", "popupPlacement", "children", "dropdownRender"]); // Did not show popup when there is no options
+
+
+      var menus = /*#__PURE__*/React.createElement("div", null);
+      var emptyMenuClassName = '';
+
+      if (options && options.length > 0) {
+        menus = /*#__PURE__*/React.createElement(Menus, _extends({}, this.props, {
+          fieldNames: this.getFieldNames(),
+          defaultFieldNames: this.defaultFieldNames,
+          visible: this.state.popupVisible,
+          activeValue: this.state.activeValue,
+          hoveredValue: this.state.hoveredValue,
+          enableValues: this.getEnableValues(),
+          getEnableValues: this.getEnableValues,
+          onActiveValueSet: this.handleActiveValueSet,
+          onSelect: this.handleMenuSelect,
+          onMultiSelect: this.handleMenuMultiSelect,
+          onMultiSelectAll: this.handleMenuMultiSelectAll,
+          onItemDoubleClick: this.handleItemDoubleClick
+        }));
+      } else {
+        emptyMenuClassName = " ".concat(prefixCls, "-menus-empty");
+      }
+
+      var popupNode = menus;
+
+      if (dropdownRender) {
+        popupNode = dropdownRender(menus);
+      }
+
+      return /*#__PURE__*/React.createElement(Trigger, _extends({
+        ref: this.saveTrigger
+      }, restProps, {
+        popupPlacement: popupPlacement,
+        builtinPlacements: builtinPlacements,
+        popupTransitionName: transitionName,
+        action: disabled ? [] : ['click'],
+        popupVisible: disabled ? false : this.state.popupVisible,
+        onPopupVisibleChange: this.handlePopupVisibleChange,
+        prefixCls: "".concat(prefixCls, "-menus"),
+        popupClassName: popupClassName + emptyMenuClassName,
+        popup: popupNode
+      }), /*#__PURE__*/React.cloneElement(children, {
+        onKeyDown: this.handleKeyDown,
+        tabIndex: disabled ? undefined : 0
+      }));
+    }
+  }], [{
+    key: "getDerivedStateFromProps",
+    value: function getDerivedStateFromProps(nextProps, prevState) {
+      var _prevState$prevProps = prevState.prevProps,
+          prevProps = _prevState$prevProps === void 0 ? {} : _prevState$prevProps;
+      var newState = {
+        prevProps: nextProps
+      };
+
+      if ('value' in nextProps && !isEqualArrays(prevProps.value, nextProps.value)) {
+        newState.value = nextProps.value || []; // allow activeValue diff from value
+
+        if (!('loadData' in nextProps) && nextProps.mode !== 'multiple') {
+          newState.activeValue = nextProps.value || [];
+        }
+      }
+
+      if ('popupVisible' in nextProps) {
+        newState.popupVisible = nextProps.popupVisible;
+      }
+
+      return newState;
+    }
+  }]);
+
+  return Cascader;
+}(React.Component);
+
+Cascader.defaultProps = {
+  onChange: function onChange() {},
+  onPopupVisibleChange: function onPopupVisibleChange() {},
+  disabled: false,
+  transitionName: '',
+  prefixCls: 'rc-cascader',
+  popupClassName: '',
+  popupPlacement: 'bottomLeft',
+  builtinPlacements: BUILT_IN_PLACEMENTS,
+  expandTrigger: 'hover',
+  fieldNames: {
+    label: 'label',
+    value: 'value',
+    children: 'children'
+  },
+  expandIcon: '>'
+};
+export default Cascader;

package/es/cascader/MenuItem.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+import type { CascaderOption } from './Cascader';
+export interface MenuItemProps {
+    option: CascaderOption;
+    label?: string | React.ReactNode;
+    onMouseEnter?: any;
+}
+declare const MenuItem: (props: any) => JSX.Element;
+export default MenuItem;