@kdcloudjs/kdesign 1.0.2

package/es/cascader/cascader.js

@@ -0,0 +1,265 @@
+import _toConsumableArray from "@babel/runtime-corejs3/helpers/toConsumableArray";
+import _extends from "@babel/runtime-corejs3/helpers/extends";
+import _slicedToArray from "@babel/runtime-corejs3/helpers/slicedToArray";
+import _includesInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/includes";
+import _mapInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/map";
+import _spliceInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/splice";
+import _sliceInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/slice";
+import * as React from 'react';
+import classNames from 'classnames';
+import { tuple } from '../_utils/type';
+import { getCompProps } from '../_utils';
+import { ConfigContext } from '../config-provider';
+import usePopper from '../_utils/usePopper';
+import Input from '../input';
+import Icon from '../icon';
+import Empty from '../empty';
+export var PopupPlacement = tuple('topLeft', 'topRight', 'bottomLeft', 'bottomRight');
+var Cascader = /*#__PURE__*/React.forwardRef(function (props, ref) {
+  var _React$useContext = React.useContext(ConfigContext),
+      getPrefixCls = _React$useContext.getPrefixCls,
+      pkgPrefixCls = _React$useContext.prefixCls,
+      userDefaultProps = _React$useContext.compDefaultProps; // 属性需要合并一遍用户定义的默认属性
+
+
+  var allProps = getCompProps('Cascader', userDefaultProps, props);
+  var style = allProps.style,
+      options = allProps.options,
+      children = allProps.children,
+      loadData = allProps.loadData,
+      className = allProps.className,
+      fieldNames = allProps.fieldNames,
+      placeholder = allProps.placeholder,
+      defaultValue = allProps.defaultValue,
+      displayRender = allProps.displayRender,
+      expandTrigger = allProps.expandTrigger,
+      changeOnSelect = allProps.changeOnSelect,
+      dropdownRender = allProps.dropdownRender,
+      notFoundContent = allProps.notFoundContent,
+      getPopupContainer = allProps.getPopupContainer,
+      defaultPopupVisible = allProps.defaultPopupVisible,
+      onPopupVisibleChange = allProps.onPopupVisibleChange,
+      customPrefixcls = allProps.prefixCls; // className前缀
+
+  var prefixCls = getPrefixCls(pkgPrefixCls, 'cascader', customPrefixcls);
+  var pickerRef = React.useRef();
+  var triggerRef = React.useRef();
+  var mergeRef = ref || pickerRef;
+
+  var _React$useState = React.useState(!!props.popupVisible || defaultPopupVisible),
+      _React$useState2 = _slicedToArray(_React$useState, 2),
+      visible = _React$useState2[0],
+      setVisible = _React$useState2[1];
+
+  React.useEffect(function () {
+    setVisible(!!props.popupVisible);
+  }, [props.popupVisible]);
+
+  var _React$useState3 = React.useState([options]),
+      _React$useState4 = _slicedToArray(_React$useState3, 2),
+      menus = _React$useState4[0],
+      setMenus = _React$useState4[1];
+
+  var _React$useState5 = React.useState([]),
+      _React$useState6 = _slicedToArray(_React$useState5, 2),
+      currentOptions = _React$useState6[0],
+      setCurrentOptions = _React$useState6[1];
+
+  var _React$useState7 = React.useState([]),
+      _React$useState8 = _slicedToArray(_React$useState7, 2),
+      selectedOptions = _React$useState8[0],
+      setSelectedOptions = _React$useState8[1];
+
+  var _React$useState9 = React.useState(props.value || defaultValue || []),
+      _React$useState10 = _slicedToArray(_React$useState9, 2),
+      value = _React$useState10[0],
+      setValue = _React$useState10[1];
+
+  React.useEffect(function () {
+    props.value && setValue(props.value);
+  }, [props.value]);
+  React.useEffect(function () {
+    if (value && (options === null || options === void 0 ? void 0 : options.length) > 0) {
+      var _currentOptions = [];
+      var _menus = [options];
+
+      var scanOptions = function scanOptions(options) {
+        options.forEach(function (option) {
+          var _a;
+
+          if (_includesInstanceProperty(value).call(value, String(option[fieldNames.value]))) {
+            _currentOptions.push(option);
+
+            if ((_a = option[fieldNames.children]) === null || _a === void 0 ? void 0 : _a.length) {
+              _menus.push(option[fieldNames.children]);
+
+              scanOptions(option[fieldNames.children]);
+            }
+          }
+        });
+      };
+
+      scanOptions(options);
+      setMenus(_menus);
+      setCurrentOptions(_currentOptions);
+    }
+  }, [options, value, selectedOptions, fieldNames]);
+  React.useEffect(function () {
+    var _a;
+
+    if (allProps.autoFocus) {
+      (_a = mergeRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+    }
+  }, [allProps.autoFocus, mergeRef]);
+
+  var labels = _mapInstanceProperty(currentOptions).call(currentOptions, function (_ref) {
+    var label = _ref[fieldNames.label];
+    return label;
+  });
+
+  var allowClear = allProps.allowClear && value.length > 0;
+  var locatorProps = {
+    style: style,
+    tabIndex: 0,
+    className: classNames("".concat(prefixCls, "-picker"), className, {
+      expand: visible,
+      allowClear: allowClear,
+      disabled: props.disabled
+    })
+  };
+
+  var handleClear = function handleClear() {
+    setValue([]);
+  };
+
+  var inputProps = {
+    value: value,
+    placeholder: placeholder,
+    readOnly: true,
+    disabled: props.disabled,
+    className: classNames("".concat(prefixCls, "-picker-input"), {
+      expand: visible
+    }),
+    suffix: props.suffixIcon || /*#__PURE__*/React.createElement(Icon, {
+      type: "arrow-down",
+      className: classNames({
+        expand: visible
+      })
+    })
+  };
+
+  if (props.bordered) {
+    inputProps.borderType = 'bordered';
+  }
+
+  var cascaderLocator = /*#__PURE__*/React.createElement("span", _extends({}, locatorProps, {
+    ref: mergeRef
+  }), React.Children.count(children) === 1 && children.type ? /*#__PURE__*/React.cloneElement(children, {
+    ref: triggerRef
+  }) : /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("span", {
+    ref: triggerRef
+  }, /*#__PURE__*/React.createElement(Input, _extends({}, inputProps)), /*#__PURE__*/React.createElement("span", {
+    className: "".concat(prefixCls, "-picker-label")
+  }, (labels === null || labels === void 0 ? void 0 : labels.length) ? displayRender(labels, currentOptions) : '')), allowClear && /*#__PURE__*/React.createElement(Icon, {
+    type: "close",
+    className: "".concat(prefixCls, "-picker-close"),
+    onClick: handleClear
+  })));
+
+  var onExpend = function onExpend(index, opt, opts) {
+    _spliceInstanceProperty(selectedOptions).call(selectedOptions, index, selectedOptions.length - index, opt);
+
+    setSelectedOptions(selectedOptions);
+
+    var newMenus = _toConsumableArray(menus);
+
+    if ((opts === null || opts === void 0 ? void 0 : opts.length) || opt.isLeaf === false) {
+      _spliceInstanceProperty(newMenus).call(newMenus, index + 1, newMenus.length - index + 1, opts);
+    }
+
+    if (!(opts === null || opts === void 0 ? void 0 : opts.length) && opt.isLeaf !== false || changeOnSelect) {
+      onChange(selectedOptions);
+    }
+
+    !(opts === null || opts === void 0 ? void 0 : opts.length) && opt.isLeaf !== false && setVisible(false);
+    setMenus(newMenus);
+    loadData && opt.isLeaf === false && !(opts === null || opts === void 0 ? void 0 : opts.length) && loadData(selectedOptions);
+  };
+
+  var onChange = function onChange(selectedOptions) {
+    var selectedValue = _mapInstanceProperty(selectedOptions).call(selectedOptions, function (_ref2) {
+      var value = _ref2[fieldNames.value];
+      return value;
+    });
+
+    setCurrentOptions(selectedOptions);
+    props.value === undefined && setValue(selectedValue);
+    props.onChange && props.onChange(selectedValue, selectedOptions);
+  };
+
+  var onVisibleChange = function onVisibleChange(visible) {
+    setVisible(visible);
+    onPopupVisibleChange && onPopupVisibleChange(visible);
+    visible && setSelectedOptions(_sliceInstanceProperty(currentOptions).call(currentOptions, 0));
+  };
+
+  var cascaderMenus = /*#__PURE__*/React.createElement(React.Fragment, null, (options === null || options === void 0 ? void 0 : options.length) ? (menus === null || menus === void 0 ? void 0 : menus.length) && _mapInstanceProperty(menus).call(menus, function (opts, index) {
+    return /*#__PURE__*/React.createElement("ul", {
+      key: index,
+      className: "".concat(prefixCls, "-menu")
+    }, (opts === null || opts === void 0 ? void 0 : opts.length) && _mapInstanceProperty(opts).call(opts, function (opt) {
+      var isLeaf = opt.isLeaf,
+          loading = opt.loading,
+          value = opt[fieldNames.value],
+          label = opt[fieldNames.label],
+          children = opt[fieldNames.children];
+      var expendEvent = expandTrigger === 'click' || !(children && children.length) ? 'onClick' : 'onMouseEnter';
+      var optionProps = {
+        role: 'menuitem',
+        className: classNames("".concat(prefixCls, "-menu-item"), {
+          disabled: opt.disabled,
+          last: !(children === null || children === void 0 ? void 0 : children.length) && isLeaf !== false,
+          selected: selectedOptions[index] && selectedOptions[index][fieldNames.value] === value
+        })
+      };
+
+      if (!opt.disabled) {
+        optionProps[expendEvent] = onExpend.bind(null, index, opt, children);
+      }
+
+      return /*#__PURE__*/React.createElement("li", _extends({
+        key: value
+      }, optionProps, {
+        title: label
+      }), /*#__PURE__*/React.createElement("span", {
+        className: "".concat(prefixCls, "-menu-item-label")
+      }, label), loading ? /*#__PURE__*/React.createElement(Icon, {
+        type: "loadding-circle",
+        spin: true
+      }) : ((children === null || children === void 0 ? void 0 : children.length) || isLeaf === false) && (props.expandIcon || /*#__PURE__*/React.createElement(Icon, {
+        type: "arrow-right"
+      })));
+    }));
+  }) : /*#__PURE__*/React.createElement(Empty, {
+    description: notFoundContent
+  }));
+  var cascaderPopper = dropdownRender(cascaderMenus);
+
+  var popperProps = _extends(_extends({}, allProps), {
+    gap: 1,
+    visible: visible,
+    onVisibleChange: onVisibleChange,
+    trigger: 'click',
+    getPopupContainer: getPopupContainer,
+    prefixCls: "".concat(prefixCls, "-menus"),
+    placement: allProps.popupPlacement,
+    popperClassName: allProps.popupClassName,
+    getTriggerElement: function getTriggerElement() {
+      return triggerRef.current;
+    }
+  });
+
+  return usePopper(cascaderLocator, cascaderPopper, popperProps);
+});
+Cascader.displayName = 'Cascader';
+export default Cascader;

package/es/cascader/index.d.ts

@@ -0,0 +1,3 @@
+import Cascader from './cascader';
+export * from './cascader';
+export default Cascader;

package/es/cascader/index.js

@@ -0,0 +1,3 @@
+import Cascader from './cascader';
+export * from './cascader';
+export default Cascader;

package/es/cascader/style/css.js

@@ -0,0 +1,2 @@
+import '../../style/index.css';
+import './index.css';

package/es/cascader/style/index.css

@@ -0,0 +1,260 @@
+/* -----------  color  ——————---- start */
+/* -----------  color  ——————---- end */
+/* -----------  motion  ——————---- start */
+/* -----------  motion  ——————---- end */
+/* -----------  transition  ——————---- start */
+/* -----------  transition  ——————---- end */
+/* -----------  font  ——————---- start */
+/* -----------  font  ——————---- end */
+/* -----------  zIndex  ——————---- start */
+/*
+    普通组件内部自身层级应设置在0-100间
+*/
+/* -----------  zIndex  ——————---- end */
+/* -----------  Button  ——————---- start */
+/* -----------  Button  ——————---- end */
+/* -----------  Collapse  ——————---- start */
+/* -----------  Collapse  ——————---- end */
+/* -----------  Card  ——————---- start */
+/* -----------  Card  ——————---- end */
+/* -----------  Carousel  ——————---- start */
+/* -----------  Carousel  ——————---- end */
+/* -----------  Cascader  ——————---- start */
+/* -----------  Cascader  ——————---- end */
+/* -----------  Switch  ——————---- start */
+/* -----------  Switch  ——————---- end */
+/* -----------  Input  ——————---- start */
+/* -----------  Input  ——————---- end */
+/* -----------  InputNumber  ——————---- start */
+/* -----------  InputNumber  ——————---- end */
+/* -----------  checkbox  ——————---- start */
+/* -----------  checkbox  ——————---- start */
+/* -----------  checkbox  ——————---- end */
+/* -----------  Radio  ——————---- start */
+/* -----------  Radio  ——————---- end */
+/* -----------  icon  ——————---- start */
+/* -----------  icon  ——————---- end */
+/* -----------  Popconfirm  ——————---- start */
+/* -----------  Popconfirm  ——————---- end */
+/* -----------  Progress  ——————---- start */
+/* -----------  Progress  ——————---- end */
+/* -----------  Pagination  ——————---- start */
+/* -----------  Pagination  ——————---- end */
+/* -----------  Timeline  ——————---- start */
+/* -----------  Timeline  ——————---- end */
+/* -----------  Tabs  ——————---- start */
+/* -----------  Tabs  ——————---- end */
+/* -----------  Select  ——————---- start */
+/* -----------  Select  ——————---- end */
+/* -----------  Rate  ——————---- start */
+/* -----------  Rate  ——————---- end */
+/* -----------  Dropdown  ——————---- start */
+/* -----------  Dropdown  ——————---- end */
+/* -----------  Tooltip  ——————---- start */
+/* -----------  Tooltip  ——————---- end */
+/* -----------  Transfer  ——————---- start */
+/* -----------  Transfer  ——————---- end */
+/* -----------  DatePicker  ——————---- start */
+/* -----------  DatePicker  ——————---- end */
+/* -----------  Tree  ——————---- start */
+/* -----------  Tree  ——————---- end */
+/* -----------  Alert  ——————---- start */
+/* -----------  Alert  ——————---- end */
+/* -----------  Split-Panel ——————---- start */
+/* -----------  Split-Panel ——————---- end */
+/* -----------  Modal  ——————---- start */
+/* -----------  Modal  ——————---- end */
+/* -----------  Steps  ——————---- start */
+/* -----------  Steps  ——————---- end */
+/* -----------  Form  ——————---- start */
+/* -----------  Form  ——————---- end */
+/* -----------  Tag ——————---- start */
+/* -----------  Tag ——————---- end */
+/* -----------  Menu  ——————---- start */
+/* -----------  Menu  ——————---- end */
+/* -----------  notice  ——————---- start */
+/* -----------  message  ——————---- end */
+/* -----------  Spin  ——————---- start */
+/* -----------  Spin  ——————---- end */
+/* -----------  Spin  ——————---- start */
+/* -----------  Spin  ——————---- end */
+/* -----------  Layout  ——————---- start */
+/* -----------  Layout  ——————---- end */
+/* -----------  Typography  ——————---- start */
+/* -----------  Typography  ——————---- start */
+/* -----------  Search  ——————---- start */
+/* -----------  Search  ——————---- start */
+/* -----------  Badge  ——————---- start */
+/* -----------  Badge  ——————---- end */
+/* -----------  Anchor  ——————---- start */
+/* -----------  Anchor  ——————---- end */
+/* -----------  Avatar  ——————---- start */
+/* -----------  Avatar  ——————---- end */
+/* -----------  AdvancedSelector  ——————---- start */
+/* -----------  AdvancedSelector  ——————---- end */
+/* 多行显示省略号 */
+/* 单行显示省略号 */
+/** 浮层箭头样式 **/
+.kd-cascader-picker {
+  position: relative;
+  display: inline-block;
+  outline: none;
+  cursor: pointer;
+}
+.kd-cascader-picker:focus > .kd-cascader-picker-input {
+  border-color: #5582f3;
+}
+.kd-cascader-picker:focus > .kd-cascader-picker-input .kd-input-suffix,
+.kd-cascader-picker:focus > .kd-cascader-picker-input i[class*="kdicon"] {
+  color: #5582f3;
+}
+.kd-cascader-picker:hover > .kd-cascader-picker-input .kd-input-suffix,
+.kd-cascader-picker:hover > .kd-cascader-picker-input i[class*="kdicon"] {
+  color: #5582f3;
+}
+.kd-cascader-picker.disabled .kd-cascader-picker-input {
+  cursor: not-allowed;
+  border-color: #d9d9d9;
+}
+.kd-cascader-picker.disabled .kd-cascader-picker-input .kd-input-suffix,
+.kd-cascader-picker.disabled .kd-cascader-picker-input i[class*="kdicon"] {
+  color: #b2b2b2;
+}
+.kd-cascader-picker-label {
+  -webkit-box-sizing: border-box;
+          box-sizing: border-box;
+  position: absolute;
+  top: 50%;
+  left: 0;
+  width: 100%;
+  height: 20px;
+  padding: 0 24px 0 9px;
+  line-height: 20px;
+  -webkit-transform: translateY(-50%);
+          transform: translateY(-50%);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+.kd-cascader-picker-input {
+  background-color: transparent !important;
+  -webkit-transition: all 0.2s;
+  transition: all 0.2s;
+}
+.kd-cascader-picker-input > input {
+  color: transparent !important;
+  cursor: pointer;
+}
+.kd-cascader-picker-input.expand {
+  border-color: #5582f3;
+}
+.kd-cascader-picker-input.expand i[class*="kdicon"] {
+  color: #5582f3;
+  -webkit-transform: rotate(180deg);
+          transform: rotate(180deg);
+}
+.kd-cascader-picker-input .kd-input-suffix,
+.kd-cascader-picker-input i[class*="kdicon"] {
+  -webkit-transition: all 0.2s;
+  transition: all 0.2s;
+}
+.kd-cascader-picker.allowClear:hover > .kd-cascader-picker-close {
+  opacity: 1;
+  visibility: visible;
+  -webkit-transition: all 0.2s;
+  transition: all 0.2s;
+  -webkit-transform: scale(1) translateY(-50%);
+          transform: scale(1) translateY(-50%);
+}
+.kd-cascader-picker.allowClear:hover .kd-input-suffix {
+  opacity: 0;
+  visibility: hidden;
+  -webkit-transition: all 0.1s;
+  transition: all 0.1s;
+}
+.kd-cascader-picker-close {
+  position: absolute;
+  top: 50%;
+  right: 9px;
+  opacity: 0;
+  cursor: pointer;
+  visibility: hidden;
+  color: #5582f3;
+  -webkit-transition: all 0.1s;
+  transition: all 0.1s;
+  -webkit-transform-origin: 50% 50%;
+          transform-origin: 50% 50%;
+  -webkit-transform: scale(0.9) translateY(-50%);
+          transform: scale(0.9) translateY(-50%);
+}
+.kd-cascader-menus {
+  -webkit-box-sizing: border-box;
+          box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+  font-variant: tabular-nums;
+  list-style: none;
+  -webkit-font-feature-settings: 'tnum';
+          font-feature-settings: 'tnum';
+  color: #212121;
+  border-radius: 2px;
+  font-size: 12px;
+  background-color: #fff;
+  -webkit-box-shadow: 0 1px 6px 0 rgba(0, 0, 0, 0.3);
+          box-shadow: 0 1px 6px 0 rgba(0, 0, 0, 0.3);
+  opacity: 1;
+  visibility: visible;
+  z-index: 1050;
+}
+.kd-cascader-menus.hidden {
+  opacity: 0;
+  visibility: hidden;
+}
+.kd-cascader-menus .kd-cascader-menu {
+  display: inline-table;
+  height: 196px;
+  min-width: 116px;
+  margin: 0;
+  padding: 0;
+  overflow-y: auto;
+}
+.kd-cascader-menus .kd-cascader-menu:not(:first-child) {
+  border-left: 1px solid #d9d9d9;
+}
+.kd-cascader-menus .kd-cascader-menu-item {
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-pack: justify;
+      -ms-flex-pack: justify;
+          justify-content: space-between;
+  padding: 0 12px;
+  height: 32px;
+  line-height: 32px;
+  cursor: pointer;
+}
+.kd-cascader-menus .kd-cascader-menu-item:not(.disabled, .selected):hover {
+  background-color: #f5f5f5;
+  -webkit-transition: all calc(0.3s - 0.1s) cubic-bezier(0.4, 0, 0.6, 1);
+  transition: all calc(0.3s - 0.1s) cubic-bezier(0.4, 0, 0.6, 1);
+}
+.kd-cascader-menus .kd-cascader-menu-item.disabled {
+  color: #b2b2b2;
+  cursor: not-allowed;
+}
+.kd-cascader-menus .kd-cascader-menu-item.selected {
+  color: #5582f3;
+  background-color: #f2f9ff;
+}
+.kd-cascader-menus .kd-cascader-menu-item-label {
+  width: 72px;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+.kd-cascader-menus .kd-cascader-menu-item.last .kd-cascader-menu-item-label {
+  width: 92px;
+}
+.kd-cascader-menus .kd-empty {
+  padding: 10px 0 20px;
+}

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

@@ -0,0 +1,2 @@
+import '../../style/index.less';
+import './index.less';

package/es/cascader/style/index.js

@@ -0,0 +1,2 @@
+import '../../style/index.less';
+import './index.less';