@kdcloudjs/kdesign 1.0.2

package/lib/city-picker/utils/grouping.js

@@ -0,0 +1,35 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = grouping;
+
+/**
+ * 进行分组
+ * @param groups 组别
+ * @param nums 每组个数
+ * @returns 分组结果
+ */
+function grouping() {
+  var groups = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];
+  var nums = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 4;
+  if (groups.length === 0 || nums <= 1) return groups;
+  var result = [];
+  var str = '';
+
+  for (var i = 0; i < groups.length; i++) {
+    if (str.length === nums) {
+      result.push(str);
+      str = '';
+    }
+
+    str += groups[i];
+
+    if (i === groups.length - 1) {
+      result.push(str);
+    }
+  }
+
+  return result;
+}

package/lib/collapse/collapse.d.ts

@@ -0,0 +1,20 @@
+import React from 'react';
+import { PanelProps } from './panel';
+export declare const IconPositionTypes: ["left", "right"];
+export declare type IconPositionType = typeof IconPositionTypes[number];
+export declare type keyType = string[] | string | number[] | number | NONE_KEY_TYPE;
+export declare type NONE_KEY_TYPE = undefined;
+export interface CollapseProps {
+    accordion?: boolean;
+    activeKey?: keyType;
+    bordered?: boolean;
+    defaultActiveKey?: string[] | string | number[] | number;
+    expandIcon?: React.ReactNode | ((props: PanelProps) => React.ReactNode);
+    expandIconPosition?: IconPositionType;
+    onChange?: () => void;
+    style?: React.CSSProperties;
+    className?: string;
+    children?: React.ReactNode;
+}
+declare const InternalCollapse: React.ForwardRefExoticComponent<CollapseProps & React.RefAttributes<unknown>>;
+export default InternalCollapse;

package/lib/collapse/collapse.js

@@ -0,0 +1,188 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.IconPositionTypes = void 0;
+
+var _includes = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/includes"));
+
+var _filter = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/filter"));
+
+var _concat = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/concat"));
+
+var _map = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/map"));
+
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/defineProperty"));
+
+var _extends2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/extends"));
+
+var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/toConsumableArray"));
+
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/slicedToArray"));
+
+var _react = _interopRequireDefault(require("react"));
+
+var _ConfigContext = _interopRequireDefault(require("../config-provider/ConfigContext"));
+
+var _utils = require("../_utils");
+
+var _classnames = _interopRequireDefault(require("classnames"));
+
+var _type = require("../_utils/type");
+
+var _isArray = _interopRequireDefault(require("lodash/isArray"));
+
+var _isBoolean = _interopRequireDefault(require("lodash/isBoolean"));
+
+var _devwarning = _interopRequireDefault(require("../_utils/devwarning"));
+
+var IconPositionTypes = (0, _type.tuple)('left', 'right');
+exports.IconPositionTypes = IconPositionTypes;
+var NONE_KEY = undefined;
+
+var InternalCollapse = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
+  var _React$useContext = _react.default.useContext(_ConfigContext.default),
+      getPrefixCls = _React$useContext.getPrefixCls,
+      prefixCls = _React$useContext.prefixCls,
+      userDefaultProps = _React$useContext.compDefaultProps;
+
+  var _getCompProps = (0, _utils.getCompProps)('Collapse', userDefaultProps, props),
+      accordion = _getCompProps.accordion,
+      activeKey = _getCompProps.activeKey,
+      bordered = _getCompProps.bordered,
+      defaultActiveKey = _getCompProps.defaultActiveKey,
+      expandIcon = _getCompProps.expandIcon,
+      expandIconPosition = _getCompProps.expandIconPosition,
+      onChange = _getCompProps.onChange,
+      style = _getCompProps.style,
+      className = _getCompProps.className,
+      children = _getCompProps.children,
+      customPrefixcls = _getCompProps.prefixCls;
+
+  var CollapsePrefixCls = getPrefixCls(prefixCls, 'collapse', customPrefixcls); // 样式前缀
+
+  var getDefaultActivePanelKey = function getDefaultActivePanelKey() {
+    // const _defaultActiveKey =
+    //   defaultActiveKey !== NONE_KEY
+    //     ? defaultActiveKey
+    //     : React.Children.map(children, (item, index) => {
+    //         if (index === 0) return item.props?.panelKey
+    //       })
+    // return isBoolean(activeKey) ? activeKey : _defaultActiveKey
+    return (0, _isBoolean.default)(activeKey) ? activeKey : defaultActiveKey;
+  };
+
+  var _React$useState = _react.default.useState(getDefaultActivePanelKey()),
+      _React$useState2 = (0, _slicedToArray2.default)(_React$useState, 2),
+      activePanelKey = _React$useState2[0],
+      setActivePanelKey = _React$useState2[1];
+
+  var getPanelExpand = function getPanelExpand(panelKey, accordion, activeKey) {
+    var _activeKey = getActiveKey(accordion, activeKey);
+
+    return isInclude(_activeKey, panelKey);
+  };
+
+  var getActiveKey = function getActiveKey(accordion, activeKey) {
+    var _activeKey = activeKey;
+
+    if (accordion) {
+      if ((0, _isArray.default)(activeKey)) {
+        _activeKey = activeKey[0]; // accordion 模式下默认第一个元素
+      }
+    }
+
+    return _activeKey;
+  };
+
+  var isInclude = function isInclude(activePanelKey, key) {
+    if ((0, _isArray.default)(activePanelKey)) {
+      return (0, _includes.default)(activePanelKey).call(activePanelKey, key) || (0, _includes.default)(activePanelKey).call(activePanelKey, String(key));
+    } else {
+      return String(activePanelKey) === String(key);
+    }
+  };
+
+  var getRemoveKey = function getRemoveKey(key) {
+    if ((0, _isArray.default)(activePanelKey)) {
+      return (0, _filter.default)(activePanelKey).call(activePanelKey, function (element) {
+        return element !== key;
+      });
+    }
+
+    return NONE_KEY;
+  };
+
+  var getAddKey = function getAddKey(key) {
+    if ((0, _isArray.default)(activePanelKey)) {
+      var _context;
+
+      return (0, _concat.default)(_context = []).call(_context, (0, _toConsumableArray2.default)(activePanelKey), [key]);
+    }
+
+    return activePanelKey ? [activePanelKey, key] : key;
+  };
+
+  var getNewActiveKey = function getNewActiveKey(key) {
+    if (isInclude(activePanelKey, key)) {
+      if (accordion) {
+        return NONE_KEY;
+      }
+
+      return getRemoveKey(key);
+    } else {
+      if (accordion) {
+        return key;
+      }
+
+      return getAddKey(key);
+    }
+  };
+
+  var onPanelChange = _react.default.useCallback(function (key) {
+    key = getNewActiveKey(key);
+    setActivePanelKey(key);
+    onChange && onChange();
+  }, [onChange, activePanelKey, accordion]);
+
+  var renderPanel = function renderPanel() {
+    var _context2;
+
+    return (0, _map.default)(_context2 = _react.default.Children).call(_context2, children, function (item) {
+      var _a, _b, _c;
+
+      if (((_a = item === null || item === void 0 ? void 0 : item.type) === null || _a === void 0 ? void 0 : _a.displayName) !== 'Panel') {
+        (0, _devwarning.default)(true, 'Collapse', 'children必须为Collapse.Panel');
+        return item;
+      }
+
+      var expand = getPanelExpand((_b = item.props) === null || _b === void 0 ? void 0 : _b.panelKey, accordion, activePanelKey);
+      var defaultExpand = getPanelExpand((_c = item.props) === null || _c === void 0 ? void 0 : _c.panelKey, accordion, defaultActiveKey);
+      return /*#__PURE__*/_react.default.cloneElement(item, (0, _extends2.default)({
+        expandIcon: expandIcon,
+        expandIconPosition: expandIconPosition,
+        onChange: onPanelChange,
+        bordered: bordered,
+        expand: expand,
+        defaultExpand: defaultExpand
+      }, item.props));
+    });
+  };
+
+  var rootClassName = (0, _classnames.default)(className, (0, _defineProperty2.default)({}, "".concat(CollapsePrefixCls), true));
+
+  var collapseRef = ref || /*#__PURE__*/_react.default.createRef();
+
+  return /*#__PURE__*/_react.default.createElement("div", {
+    className: rootClassName,
+    style: style,
+    ref: collapseRef
+  }, renderPanel());
+});
+
+InternalCollapse.displayName = 'Collapse';
+var _default = InternalCollapse;
+exports.default = _default;

package/lib/collapse/index.d.ts

@@ -0,0 +1,10 @@
+/// <reference types="react" />
+import { CollapseProps } from './collapse';
+import Panel from './panel';
+export { PanelProps } from './panel';
+interface CompoundedComponent extends React.ForwardRefExoticComponent<CollapseProps & React.RefAttributes<HTMLElement>> {
+    Panel: typeof Panel;
+}
+declare const Collapse: CompoundedComponent;
+export { Panel };
+export default Collapse;

package/lib/collapse/index.js

@@ -0,0 +1,23 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "Panel", {
+  enumerable: true,
+  get: function get() {
+    return _panel.default;
+  }
+});
+exports.default = void 0;
+
+var _collapse = _interopRequireDefault(require("./collapse"));
+
+var _panel = _interopRequireDefault(require("./panel"));
+
+var Collapse = _collapse.default;
+Collapse.Panel = _panel.default;
+var _default = Collapse;
+exports.default = _default;

package/lib/collapse/panel.d.ts

@@ -0,0 +1,19 @@
+import React from 'react';
+import { IconPositionType, keyType } from './collapse';
+export interface PanelProps {
+    disabled?: boolean;
+    header?: React.ReactNode | ((props: PanelProps) => React.ReactNode);
+    expandIcon?: React.ReactNode | ((props: PanelProps) => React.ReactNode);
+    bordered?: boolean;
+    expandIconPosition?: IconPositionType;
+    onChange?: (key: keyType) => void;
+    extra?: React.ReactNode | ((props: PanelProps) => React.ReactNode);
+    expand?: boolean;
+    defaultExpand?: boolean;
+    children?: React.ReactNode;
+    panelKey?: any;
+    style?: React.CSSProperties;
+    className?: string;
+}
+declare const Panel: React.ForwardRefExoticComponent<PanelProps & React.RefAttributes<unknown>>;
+export default Panel;

package/lib/collapse/panel.js

@@ -0,0 +1,188 @@
+"use strict";
+
+var _typeof = require("@babel/runtime-corejs3/helpers/typeof");
+
+var _WeakMap = require("@babel/runtime-corejs3/core-js-stable/weak-map");
+
+var _Object$getOwnPropertyDescriptor = require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptor");
+
+var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/defineProperty"));
+
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/slicedToArray"));
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _classnames = _interopRequireDefault(require("classnames"));
+
+var _ConfigContext = _interopRequireDefault(require("../config-provider/ConfigContext"));
+
+var _utils = require("../_utils");
+
+var _icon = _interopRequireDefault(require("../icon"));
+
+var _isBoolean = _interopRequireDefault(require("lodash/isBoolean"));
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof _WeakMap !== "function") return null; var cacheBabelInterop = new _WeakMap(); var cacheNodeInterop = new _WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && _Object$getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? _Object$getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+var Panel = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
+  var _classNames5, _classNames6, _classNames7;
+
+  var _React$useContext = _react.default.useContext(_ConfigContext.default),
+      getPrefixCls = _React$useContext.getPrefixCls,
+      prefixCls = _React$useContext.prefixCls,
+      userDefaultProps = _React$useContext.compDefaultProps;
+
+  var _getCompProps = (0, _utils.getCompProps)('CollapsePanel', userDefaultProps, props),
+      disabled = _getCompProps.disabled,
+      extra = _getCompProps.extra,
+      header = _getCompProps.header,
+      onChange = _getCompProps.onChange,
+      panelKey = _getCompProps.panelKey,
+      defaultExpand = _getCompProps.defaultExpand,
+      expand = _getCompProps.expand,
+      bordered = _getCompProps.bordered,
+      expandIcon = _getCompProps.expandIcon,
+      expandIconPosition = _getCompProps.expandIconPosition,
+      style = _getCompProps.style,
+      className = _getCompProps.className,
+      children = _getCompProps.children,
+      customPrefixcls = _getCompProps.prefixCls;
+
+  var panelPrefixCls = getPrefixCls(prefixCls, 'collapse-panel', customPrefixcls); // 样式前缀
+
+  var childrenRef = (0, _react.useRef)();
+  var setHeightTimerRef = (0, _react.useRef)(null);
+  var setAutoHeightTimerRef = (0, _react.useRef)(null);
+
+  var _useState = (0, _react.useState)(null),
+      _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+      expandAnimation = _useState2[0],
+      setExpandAnimation = _useState2[1];
+
+  var getExpand = function getExpand() {
+    return (0, _isBoolean.default)(expand) ? expand : defaultExpand;
+  };
+
+  var handleClick = function handleClick() {
+    if (disabled) return;
+    setExpandAnimation(true);
+    onChange && onChange(panelKey);
+  };
+
+  var renderIcon = function renderIcon() {
+    var _classNames;
+
+    var iconClassName = (0, _classnames.default)((_classNames = {}, (0, _defineProperty2.default)(_classNames, "".concat(panelPrefixCls, "-icon"), true), (0, _defineProperty2.default)(_classNames, "".concat(panelPrefixCls, "-animation-expand"), !getExpand()), (0, _defineProperty2.default)(_classNames, "".concat(panelPrefixCls, "-animation-collapse"), getExpand()), (0, _defineProperty2.default)(_classNames, "".concat(panelPrefixCls, "-disabled"), disabled), _classNames));
+    return /*#__PURE__*/_react.default.createElement("span", {
+      className: iconClassName,
+      onClick: handleClick
+    }, expandIcon ? renderReactNode(expandIcon) : /*#__PURE__*/_react.default.createElement(_icon.default, {
+      type: "arrow-right-solid"
+    }));
+  };
+
+  var renderLeft = function renderLeft() {
+    var _classNames2, _classNames3;
+
+    var className = (0, _classnames.default)((_classNames2 = {}, (0, _defineProperty2.default)(_classNames2, "".concat(panelPrefixCls, "-left"), true), (0, _defineProperty2.default)(_classNames2, "".concat(panelPrefixCls, "-disabled"), disabled), _classNames2));
+    var headerClassName = (0, _classnames.default)((_classNames3 = {}, (0, _defineProperty2.default)(_classNames3, "".concat(panelPrefixCls, "-header"), true), (0, _defineProperty2.default)(_classNames3, "".concat(panelPrefixCls, "-disabled"), disabled), _classNames3));
+    return /*#__PURE__*/_react.default.createElement("span", {
+      className: className,
+      onClick: handleClick
+    }, expandIconPosition === 'left' ? renderIcon() : null, header && /*#__PURE__*/_react.default.createElement("span", {
+      className: headerClassName
+    }, renderReactNode(header)));
+  };
+
+  var renderRight = function renderRight() {
+    var _classNames4;
+
+    var className = (0, _classnames.default)((_classNames4 = {}, (0, _defineProperty2.default)(_classNames4, "".concat(panelPrefixCls, "-right"), true), (0, _defineProperty2.default)(_classNames4, "".concat(panelPrefixCls, "-disabled"), disabled), _classNames4));
+    return /*#__PURE__*/_react.default.createElement("span", {
+      className: className
+    }, extra && /*#__PURE__*/_react.default.createElement("span", {
+      className: "".concat(panelPrefixCls, "-extra")
+    }, renderReactNode(extra)), expandIconPosition === 'right' ? renderIcon() : null);
+  };
+
+  var renderReactNode = function renderReactNode(reactNode) {
+    if (typeof reactNode === 'function') {
+      return reactNode();
+    }
+
+    return reactNode;
+  };
+
+  var rootClassName = (0, _classnames.default)(className, (_classNames5 = {}, (0, _defineProperty2.default)(_classNames5, "".concat(panelPrefixCls), true), (0, _defineProperty2.default)(_classNames5, "".concat(panelPrefixCls, "-border"), bordered), (0, _defineProperty2.default)(_classNames5, "".concat(panelPrefixCls, "-opened"), expand), _classNames5));
+  var topClassName = (0, _classnames.default)((_classNames6 = {}, (0, _defineProperty2.default)(_classNames6, "".concat(panelPrefixCls, "-top"), true), (0, _defineProperty2.default)(_classNames6, "".concat(panelPrefixCls, "-disabled"), disabled), (0, _defineProperty2.default)(_classNames6, "".concat(panelPrefixCls, "-top-border"), bordered && expand), _classNames6));
+  var childrenClassName = (0, _classnames.default)((_classNames7 = {}, (0, _defineProperty2.default)(_classNames7, "".concat(panelPrefixCls, "-children"), expand), (0, _defineProperty2.default)(_classNames7, "".concat(panelPrefixCls, "-children-hide"), !expand), _classNames7));
+  var childrenBorderedClassName = (0, _classnames.default)((0, _defineProperty2.default)({}, "".concat(panelPrefixCls, "-children-bordered"), bordered));
+
+  var runExpandAnimation = function runExpandAnimation(element) {
+    element.style.height = '0px';
+    element.style.opacity = '0';
+    setHeightTimerRef.current && clearTimeout(setHeightTimerRef.current);
+    setHeightTimerRef.current = setTimeout(function () {
+      element.style.display = 'block';
+      element.style.opacity = '1';
+      element.style.height = "".concat(element.scrollHeight, "px");
+    }, 10);
+    setAutoHeightTimerRef.current && clearTimeout(setAutoHeightTimerRef.current);
+    setAutoHeightTimerRef.current = setTimeout(function () {
+      element.style.height = 'auto';
+    }, 350);
+  };
+
+  var runCollapseAnimation = function runCollapseAnimation(element) {
+    setAutoHeightTimerRef.current && clearTimeout(setAutoHeightTimerRef.current);
+    element.style.height = "".concat(element.scrollHeight, "px");
+    setAutoHeightTimerRef.current = setTimeout(function () {
+      element.style.height = '0px';
+      element.style.opacity = '0';
+    }, 0);
+  };
+
+  var expandWidthoutAnimation = function expandWidthoutAnimation(element) {
+    element.style.height = 'auto';
+    element.style.opacity = '1';
+  };
+
+  var panelPrefixClsRef = ref || /*#__PURE__*/_react.default.createRef();
+
+  _react.default.useLayoutEffect(function () {
+    if (!childrenRef.current) return;
+
+    if (expandAnimation) {
+      expand ? runExpandAnimation(childrenRef.current) : runCollapseAnimation(childrenRef.current);
+      setExpandAnimation(false);
+    } else if (!expandAnimation) {
+      expand ? expandWidthoutAnimation(childrenRef.current) : runCollapseAnimation(childrenRef.current);
+    }
+  }, [childrenRef.current, expandAnimation, expand]);
+
+  return /*#__PURE__*/_react.default.createElement("div", {
+    className: rootClassName,
+    style: style,
+    ref: panelPrefixClsRef
+  }, /*#__PURE__*/_react.default.createElement("span", {
+    className: topClassName
+  }, renderLeft(), renderRight()), /*#__PURE__*/_react.default.createElement("div", {
+    className: childrenClassName,
+    ref: childrenRef
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: childrenBorderedClassName
+  }, children)));
+});
+
+Panel.displayName = 'Panel';
+var _default = Panel;
+exports.default = _default;

package/lib/collapse/style/css.js

@@ -0,0 +1,5 @@
+"use strict";
+
+require("../../style/index.css");
+
+require("./index.css");