@kdcloudjs/kdesign 1.6.22 → 1.6.23

package/es/cascader/style/index.less

@@ -16,14 +16,14 @@
     border-color: @cascader-active-color;
 
     .@{kd-prefix}-input-suffix,
-    i[class*="kdicon"] {
+    i[class*='kdicon'] {
       color: @cascader-active-color;
     }
   }
 
   &:hover > &-input {
     .@{kd-prefix}-input-suffix,
-    i[class*="kdicon"] {
+    i[class*='kdicon'] {
       color: @cascader-active-color;
     }
   }
@@ -34,7 +34,7 @@
       border-color: @color-border-strong;
 
       .@{kd-prefix}-input-suffix,
-      i[class*="kdicon"] {
+      i[class*='kdicon'] {
         color: @cascader-disabled-color;
       }
     }
@@ -65,14 +65,14 @@
     &.expand {
       border-color: @cascader-active-color;
 
-      i[class*="kdicon"] {
+      i[class*='kdicon'] {
         color: @cascader-active-color;
         transform: rotate(180deg);
       }
     }
 
     .@{kd-prefix}-input-suffix,
-    i[class*="kdicon"] {
+    i[class*='kdicon'] {
       transition: all 0.2s;
     }
   }
@@ -142,6 +142,7 @@
     &-item {
       display: flex;
       justify-content: space-between;
+      align-items: center;
       padding: 0 @cascader-menu-item-padding-horizontal;
       line-height: @cascader-menu-item-height;
       cursor: pointer;
@@ -169,6 +170,10 @@
       &.last .@{cascader-menu-prefix-cls}-item-label {
         width: 92px;
       }
+
+      .@{kd-prefix}-cascader-checkbox {
+        margin-right: 5px;
+      }
     }
   }
 
@@ -176,3 +181,115 @@
     padding: 10px 0 20px;
   }
 }
+
+.@{kd-prefix}-cascader {
+  &-bordered {
+    border: 1px solid #d9d9d9;
+    padding-left: 8px !important;
+    border-radius: 2px;
+  }
+
+  &-multiple {
+    padding: 1px 28px 1px 0;
+    transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
+    width: 100%;
+    min-height: 30px;
+    max-height: 100px;
+    color: #212121;
+    display: flex;
+    cursor: pointer;
+    box-sizing: border-box;
+    overflow-y: auto;
+    overflow-x: hidden;
+    position: relative;
+    border-bottom: 1px solid #d9d9d9;
+  }
+
+  &-multiple-wrapper {
+    display: flex;
+    align-items: center;
+    flex-wrap: wrap;
+    width: 100%;
+  }
+
+  &-placeholder {
+    position: absolute;
+    color: @select-placeholder-color;
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+  }
+
+  &-suffix {
+    right: 0;
+    position: absolute;
+    display: flex;
+    flex: 0;
+    flex-wrap: wrap;
+    align-items: center;
+    justify-content: center;
+    margin-left: 8px;
+  }
+
+  &-selection-tag {
+    max-width: 100%;
+  }
+
+  &-multiple:hover &-icon-clear {
+    opacity: 1;
+  }
+
+  &-icon {
+    &-arrow {
+      display: inline-flex;
+      align-items: center;
+      vertical-align: middle;
+      &-up {
+        transform: rotate(180deg);
+        transition: transform calc(@transition-duration - 0.1s) @ease;
+      }
+
+      &-down {
+        transform: rotate(0deg);
+        transition: transform calc(@transition-duration - 0.1s) @ease;
+      }
+
+      &-focus {
+        color: @cascader-g-color-border-foucs;
+      }
+    }
+
+    &-clear {
+      opacity: 0;
+      z-index: 1;
+      position: absolute;
+      background: #fff;
+      transition: opacity 0.15s ease;
+      color: @cascader-clear-color;
+      &:hover {
+        color: @cascader-clear-color-hover;
+      }
+    }
+  }
+  &-tag {
+    &-describe {
+      font-size: 12px;
+      height: 20px;
+      line-height: 18px;
+      margin: 2px 8px 2px 0;
+      user-select: none;
+
+      &-content {
+        display: inline-flex;
+        align-items: center;
+        vertical-align: middle;
+        padding: 0 7px;
+        overflow: hidden;
+        white-space: nowrap;
+        text-overflow: ellipsis;
+        border: 1px solid #ccc;
+        color: #212121;
+      }
+    }
+  }
+}

package/es/cascader/style/token.less

@@ -20,6 +20,9 @@
 @cascader-selected-bg-color: var(~'@{cascader-prefix}-color-background-selected', @color-background-ongoing);
 @cascader-disabled-color: var(~'@{cascader-prefix}-color-text-disabled', @color-disabled);
 @cascader-clear-color: var(~'@{cascader-prefix}-clear-color-text', #d9d9d9);
+@cascader-g-color-border-foucs: var(~'@{cascader-prefix}-color-border-foucs', @color-theme);
+@cascader-clear-color: var(~'@{cascader-prefix}-icon-clear-color-text', #d9d9d9);
+@cascader-clear-color-hover: var(~'@{cascader-prefix}-icon-clear-color-text-hover', #999);
 
 // font
 @cascader-font-size: var(~'@{cascader-prefix}-font-size', @font-size-small);

package/es/cascader/util.d.ts

@@ -0,0 +1,26 @@
+/// <reference types="react" />
+import { CascaderValueType, CascaderOptionType, KeysDataType } from './cascader';
+export declare const useChecked: (value: CascaderValueType, flattenData: CascaderOptionType[], keysData: KeysDataType, isMultiple: boolean) => never[] | readonly [unknown[], unknown[], import("react").Dispatch<import("react").SetStateAction<unknown[]>>, import("react").Dispatch<import("react").SetStateAction<unknown[]>>];
+export declare const flattenAll: (data: CascaderOptionType[], newTreeData?: CascaderOptionType[]) => {
+    formatData: CascaderOptionType[];
+    keysData: CascaderOptionType;
+    flattenData: CascaderOptionType[];
+};
+export declare const isHalfChecked: (data: any[]) => boolean;
+export declare const ValueSeparator = "__kdm_cascader__";
+export declare const transformValuesToSet: (values: CascaderValueType) => Set<unknown>;
+export declare const valueInSet: (set: Set<any>, value: string[]) => boolean;
+export declare function getChildNodeKeys(node: CascaderOptionType, keysNodeProps: KeysDataType): Set<string>;
+export declare const setNodeCheckedByValue: (initValues: CascaderValueType, flatNodes: CascaderOptionType[], keysNodeProps: KeysDataType) => {
+    checkedKeys: unknown[];
+    halfCheckedKeys: unknown[];
+};
+export declare const getHalfChecked: (halfCheckedKeys: any[], key: string) => boolean;
+export declare const getChecked: (checkedKeys: any[], key: string) => boolean;
+export declare const addKeys: (prevKeys?: any[], newKeys?: any[]) => any[];
+export declare const delKey: (prevKeys: any[], delKeys: any[]) => never[] & any[];
+export declare const getMultipleCheckValue: (_propsValue: CascaderValueType, _option: CascaderOptionType, _checked: boolean, flatNodes: CascaderOptionType[], checkedKeys: []) => any[];
+export declare function getAllCheckedKeys(key: any, checked: boolean, checkedKeys: any[], keysNodeProps: KeysDataType, halfCheckedKeys: any[]): {
+    checkedKeys: any[];
+    halfCheckedKeys: any[];
+};

package/es/cascader/util.js

@@ -0,0 +1,301 @@
+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 _Object$getOwnPropertySymbols from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-symbols";
+import _concatInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/concat";
+import _Set from "@babel/runtime-corejs3/core-js-stable/set";
+import _mapInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/map";
+import _sliceInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/slice";
+import _includesInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/includes";
+import _filterInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/filter";
+import _Array$from from "@babel/runtime-corejs3/core-js-stable/array/from";
+import _spliceInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/splice";
+
+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 { useEffect, useState, useMemo } from 'react';
+import cloneDeep from 'lodash/cloneDeep';
+export var useChecked = function useChecked(value, flattenData, keysData, isMultiple) {
+  var initialCheckedState = useMemo(function () {
+    return setNodeCheckedByValue(value, flattenData, keysData);
+  }, [value, flattenData, keysData]);
+
+  var _useState = useState(initialCheckedState.checkedKeys),
+      _useState2 = _slicedToArray(_useState, 2),
+      checkedKeys = _useState2[0],
+      setCheckedKeys = _useState2[1];
+
+  var _useState3 = useState(initialCheckedState.halfCheckedKeys),
+      _useState4 = _slicedToArray(_useState3, 2),
+      halfCheckedKeys = _useState4[0],
+      setHalfCheckedKeys = _useState4[1];
+
+  useEffect(function () {
+    setCheckedKeys(initialCheckedState.checkedKeys);
+  }, [initialCheckedState.checkedKeys]);
+  useEffect(function () {
+    setHalfCheckedKeys(initialCheckedState.halfCheckedKeys);
+  }, [initialCheckedState.halfCheckedKeys]);
+  if (!isMultiple) return [];
+  return [checkedKeys, halfCheckedKeys, setCheckedKeys, setHalfCheckedKeys];
+};
+export var flattenAll = function flattenAll(data) {
+  var newTreeData = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : [];
+  var keysData = {};
+  var formatData = cloneDeep(data);
+
+  var fn = function fn(data) {
+    var newTreeData = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : [];
+    var parent = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : null;
+    var newParent = cloneDeep(parent);
+
+    if (newParent) {
+      newParent.children = null;
+    }
+
+    data && data.forEach(function (item) {
+      var _context, _context2;
+
+      var children = item.children,
+          label = item.label,
+          value = item.value,
+          others = __rest(item, ["children", "label", "value"]);
+
+      var flattenNode = _extends({
+        label: label,
+        value: value,
+        children: children,
+        parent: newParent,
+        parentKey: (parent === null || parent === void 0 ? void 0 : parent.value) || null,
+        pathKeys: _concatInstanceProperty(_context = []).call(_context, _toConsumableArray((parent === null || parent === void 0 ? void 0 : parent.pathKeys) || []), [value]),
+        _level: parent ? parent._level + 1 : 0
+      }, others);
+
+      item.parent = newParent;
+      item.parentKey = (parent === null || parent === void 0 ? void 0 : parent.value) || null;
+      item.pathKeys = _concatInstanceProperty(_context2 = []).call(_context2, _toConsumableArray((parent === null || parent === void 0 ? void 0 : parent.pathKeys) || []), [value]);
+      item._level = parent ? parent._level + 1 : 0;
+      value && (keysData[value] = flattenNode);
+      newTreeData.push(flattenNode);
+      children && fn(children, newTreeData, flattenNode);
+    });
+    return newTreeData;
+  };
+
+  var flattenData = fn(formatData, newTreeData);
+  return {
+    formatData: formatData,
+    keysData: keysData,
+    flattenData: flattenData
+  };
+};
+export var isHalfChecked = function isHalfChecked(data) {
+  var checkedLen = data.reduce(function (total, prev) {
+    var num = prev._halfChecked ? 0.5 : prev._checked ? 1 : 0;
+    return total + num;
+  }, 0);
+  return checkedLen !== data.length && checkedLen > 0;
+};
+export var ValueSeparator = '__kdm_cascader__';
+export var transformValuesToSet = function transformValuesToSet(values) {
+  var _values = values || [];
+
+  var valuesSet = _values.reduce(function (set, next) {
+    var _context3;
+
+    set.add(_concatInstanceProperty(_context3 = []).call(_context3, next).join(ValueSeparator));
+    return set;
+  }, new _Set());
+
+  return valuesSet;
+};
+export var valueInSet = function valueInSet(set, value) {
+  var _value = value || [];
+
+  return set.has(_value.join(ValueSeparator));
+};
+export function getChildNodeKeys(node, keysNodeProps) {
+  var nodes = new _Set();
+
+  var loop = function loop(children) {
+    _mapInstanceProperty(children).call(children, function (child) {
+      var key = child.value;
+      if (!key) return;
+      var item = keysNodeProps[key];
+
+      if (!item || item.disabled) {
+        return;
+      }
+
+      key && nodes.add(key);
+      loop(item.children || []);
+    });
+  };
+
+  if (node) {
+    loop(node.children || []);
+  }
+
+  return nodes;
+}
+export var setNodeCheckedByValue = function setNodeCheckedByValue(initValues, flatNodes, keysNodeProps) {
+  var _context4, _context5;
+
+  var valuesSet = transformValuesToSet(initValues);
+  var checkedSet = new _Set();
+  var halfCheckedSet = new _Set();
+  var childCheckedKeysSet = new _Set();
+  flatNodes.forEach(function (node) {
+    if (node.pathKeys.some(function (_item, index, arr) {
+      return valueInSet(valuesSet, _sliceInstanceProperty(arr).call(arr, 0, index + 1));
+    })) {
+      checkedSet.add(node.value);
+    }
+  });
+
+  _mapInstanceProperty(_context4 = _toConsumableArray(checkedSet)).call(_context4, function (value) {
+    if (!childCheckedKeysSet.has(value)) {
+      var childKeys = getChildNodeKeys(keysNodeProps[value], keysNodeProps);
+      childKeys.forEach(function (v) {
+        childCheckedKeysSet.add(v);
+      });
+    }
+
+    updateParent(value, keysNodeProps, checkedSet, halfCheckedSet);
+  });
+
+  return {
+    checkedKeys: _toConsumableArray(new _Set(_concatInstanceProperty(_context5 = []).call(_context5, _toConsumableArray(checkedSet), _toConsumableArray(childCheckedKeysSet)))),
+    halfCheckedKeys: _toConsumableArray(halfCheckedSet)
+  };
+};
+
+var updateParent = function updateParent(key, keysNodeProps, allKeys, halfCheckedKeysSet) {
+  var pathKeys = _toConsumableArray(keysNodeProps[key].pathKeys);
+
+  pathKeys.pop();
+  pathKeys.reverse().forEach(function (itemKey) {
+    var parent = keysNodeProps[itemKey];
+
+    if (parent && !parent.disabled) {
+      var total = 0;
+      var number = 0;
+      parent.children.some(function (_ref) {
+        var value = _ref.value;
+        var item = keysNodeProps[value];
+
+        if (!item || item.disabled) {
+          return false;
+        }
+
+        total++;
+
+        if (allKeys.has(value)) {
+          number++;
+        } else if (halfCheckedKeysSet.has(value)) {
+          number += 0.5;
+          return true;
+        }
+      });
+
+      if (!number || number === total) {
+        halfCheckedKeysSet.delete(itemKey);
+      } else {
+        halfCheckedKeysSet.add(itemKey);
+      }
+
+      if (number && number === total) {
+        allKeys.add(itemKey);
+      } else {
+        allKeys.delete(itemKey);
+      }
+    }
+  });
+};
+
+export var getHalfChecked = function getHalfChecked(halfCheckedKeys, key) {
+  return halfCheckedKeys === null || halfCheckedKeys === void 0 ? void 0 : _includesInstanceProperty(halfCheckedKeys).call(halfCheckedKeys, key);
+};
+export var getChecked = function getChecked(checkedKeys, key) {
+  return checkedKeys === null || checkedKeys === void 0 ? void 0 : _includesInstanceProperty(checkedKeys).call(checkedKeys, key);
+};
+
+var getCheckedNodes = function getCheckedNodes(flatNodes, checkedKeys) {
+  return _filterInstanceProperty(flatNodes).call(flatNodes, function (node) {
+    return checkedKeys === null || checkedKeys === void 0 ? void 0 : _includesInstanceProperty(checkedKeys).call(checkedKeys, node.value);
+  });
+};
+
+export var addKeys = function addKeys() {
+  var _context6;
+
+  var prevKeys = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];
+  var newKeys = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : [];
+  return _Array$from(new _Set(_concatInstanceProperty(_context6 = []).call(_context6, _toConsumableArray(prevKeys), _toConsumableArray(newKeys))));
+};
+export var delKey = function delKey(prevKeys, delKeys) {
+  var keys = _extends([], prevKeys);
+
+  delKeys.forEach(function (item) {
+    var index = keys.indexOf(item);
+    index > -1 && _spliceInstanceProperty(keys).call(keys, index, 1);
+  });
+  return keys;
+};
+export var getMultipleCheckValue = function getMultipleCheckValue(_propsValue, _option, _checked, flatNodes, checkedKeys) {
+  var _context7;
+
+  var checkedNodes = getCheckedNodes(flatNodes, checkedKeys);
+
+  var currentValue = _filterInstanceProperty(_context7 = _mapInstanceProperty(checkedNodes).call(checkedNodes, function (node) {
+    return !node.children && node.pathKeys;
+  })).call(_context7, function (node) {
+    return node;
+  });
+
+  return currentValue;
+};
+export function getAllCheckedKeys(key, checked, checkedKeys, keysNodeProps, halfCheckedKeys) {
+  if (!keysNodeProps[key]) {
+    return {
+      checkedKeys: checkedKeys,
+      halfCheckedKeys: halfCheckedKeys
+    };
+  }
+
+  var checkedKeysSet = new _Set(checkedKeys);
+  var halfCheckedKeysSet = new _Set(halfCheckedKeys);
+  var childKeys = getChildNodeKeys(keysNodeProps[key], keysNodeProps);
+  var allKeys = checkedKeysSet;
+
+  if (checked) {
+    allKeys.add(key);
+    halfCheckedKeysSet.delete(key);
+    childKeys.forEach(function (v) {
+      allKeys.add(v);
+    });
+  } else {
+    halfCheckedKeysSet.delete(key);
+    allKeys.delete(key);
+    childKeys.forEach(function (v) {
+      allKeys.delete(v);
+    });
+  }
+
+  updateParent(key, keysNodeProps, checkedKeysSet, halfCheckedKeysSet);
+  return {
+    checkedKeys: _toConsumableArray(allKeys),
+    halfCheckedKeys: _toConsumableArray(halfCheckedKeysSet)
+  };
+}

package/es/config-provider/compDefaultProps.d.ts

@@ -38,6 +38,7 @@ declare const compDefaultProps: {
         intervalTime: number;
     };
     Cascader: {
+        mode: string;
         allowClear: boolean;
         expandTrigger: string;
         notFoundContent: string;

package/es/config-provider/compDefaultProps.js

@@ -40,6 +40,7 @@ var compDefaultProps = {
     intervalTime: 4000
   },
   Cascader: {
+    mode: 'single',
     allowClear: true,
     expandTrigger: 'click',
     notFoundContent: 'No Data',

package/es/stepper/style/index.css

@@ -103,9 +103,16 @@
 /* -----------  zIndex  ——————---- end */
 .kd-inputNumber-stepper {
   width: 100px;
-  --kd-c-input-sizing-height-middle: 28px;
-  --kd-c-input-wrapper-padding-left: 9px;
-  --kd-c-input-padding-left: 0;
+}
+.kd-inputNumber-stepper.kd-input-wrapper {
+  padding-left: var(--kd-c-stepper-padding-left, 9px) !important;
+}
+.kd-inputNumber-stepper.kd-input-wrapper .kd-input {
+  padding-left: var(--kd-c-stepper-input-padding-left, 0px);
+}
+.kd-inputNumber-stepper.kd-input-wrapper-size-middle {
+  height: var(--kd-c-stepper-sizing-height, 28px);
+  line-height: var(--kd-c-stepper-sizing-height, 28px);
 }
 .kd-inputNumber-stepper input {
   text-align: center;

package/es/stepper/style/index.less

@@ -6,9 +6,18 @@
 .@{inputNumber-prefix-cls} {
   width: 100px;
 
-  --kd-c-input-sizing-height-middle: 28px;
-  --kd-c-input-wrapper-padding-left: 9px;
-  --kd-c-input-padding-left: 0;
+  &.@{kd-prefix}-input-wrapper {
+    padding-left: @stepper-input-wrapper-padding-left !important;
+
+    .@{kd-prefix}-input {
+      padding-left: @stepper-input-padding-left;
+    }
+
+    &-size-middle {
+      height: @stepper-middle-height;
+      line-height: @stepper-middle-height;
+    }
+  }
   input {
     text-align: center;
     color: @stepper-input-color;

package/es/stepper/style/token.less

@@ -19,6 +19,9 @@
 @stepper-input-small-sizing-height: var(~'@{stepper-prefix}-input-small-sizing-height', 20px);
 @stepper-input-middle-sizing-height: var(~'@{stepper-prefix}-input-middle-sizing-height', 28px);
 @stepper-input-large-sizing-height: var(~'@{stepper-prefix}-input-large-sizing-height', 36px);
+@stepper-input-wrapper-padding-left: var(~'@{stepper-prefix}-padding-left', 9px);
+@stepper-input-padding-left: var(~'@{stepper-prefix}-input-padding-left', 0px);
+@stepper-middle-height: var(~'@{stepper-prefix}-sizing-height', 28px);
 
 // spacing
 @stepper-input-spacing-padding-horizontal: var(~'@{stepper-prefix}-input-spacing-padding-horizontal', 9px);

package/lib/cascader/cascader.d.ts

@@ -1,7 +1,7 @@
-import * as React from 'react';
+import React from 'react';
 import { PopperProps } from '../_utils/usePopper';
 export interface CascaderOptionType {
-    value?: string | number;
+    value?: string;
     label?: React.ReactNode;
     disabled?: boolean;
     isLeaf?: boolean;
@@ -14,9 +14,12 @@ declare type FieldNames = {
     value: string;
     children: string;
 };
+export declare type KeysDataType = {
+    [key: string]: CascaderOptionType;
+};
 export declare const CascaderPlacement: ["topLeft", "topRight", "bottomLeft", "bottomRight"];
 export declare type CascaderPlacementType = typeof CascaderPlacement[number];
-export declare type CascaderValueType = Array<string | number>;
+export declare type CascaderValueType = (string | string[])[];
 export declare type CascaderExpandTrigger = 'click' | 'hover';
 export interface CascaderProps extends PopperProps {
     id?: string;
@@ -37,6 +40,7 @@ export interface CascaderProps extends PopperProps {
     notFoundContent?: string;
     value?: CascaderValueType;
     children?: React.ReactNode;
+    mode?: 'single' | 'multiple';
     style?: React.CSSProperties;
     suffixIcon?: React.ReactNode;
     expandIcon?: React.ReactNode;