@kdcloudjs/kdesign 1.7.35 → 1.7.37

package/es/tree/treeHooks.d.ts

@@ -1,9 +1,9 @@
-import { TreeNodeData, KeysDataType } from './tree';
+import { TreeNodeData, KeysDataType, SearchStatus } from './tree';
 import React from 'react';
 export declare const useViewportHeight: (height: number, listRef: React.RefObject<HTMLElement>) => number[];
 export declare const useVisibleDataMemo: (virtual: boolean, filterData: TreeNodeData[], viewportHeight: number, estimatedItemSize: number, start: number) => TreeNodeData[][];
 export declare const usePlantomHeightEffect: (plantomRef: React.RefObject<HTMLElement>, filterData: TreeNodeData[], estimatedItemSize: number) => void;
 export declare const useChecked: (checkStrictly: boolean, checkedKeysProps: string[], defaultCheckedKeys: string[], _flattenAllData: any[], _maxLevel: number, checkable: boolean, keysData: KeysDataType) => readonly [string[], string[], React.Dispatch<React.SetStateAction<string[]>>, React.Dispatch<React.SetStateAction<string[]>>];
-export declare const useExpand: (flattenAllData: any[], expandedKeysProps: string[], defaultExpandedKeys: string[], defaultExpandAll: boolean, defaultExpandRoot: boolean, defaultExpandParent: boolean, scrollKey: string, isInit: boolean, filterTreeNode: FunctionConstructor, isSearching: boolean, keysData: KeysDataType, searchExpandedKeys: string[]) => readonly [string[], React.Dispatch<React.SetStateAction<string[]>>];
+export declare const useExpand: (flattenAllData: any[], expandedKeysProps: string[], defaultExpandedKeys: string[], defaultExpandAll: boolean, defaultExpandRoot: boolean, defaultExpandParent: boolean, scrollKey: string, isInit: boolean, filterTreeNode: FunctionConstructor, isSearching: boolean, keysData: KeysDataType, searchStatus: SearchStatus) => readonly [string[], React.Dispatch<React.SetStateAction<string[]>>];
 export declare const useScrollToKey: (scrollKey: string, index: number, estimatedItemSize: number, scrollRef: any, viewportHeight: number, treeNodePrefixCls: string) => void;
 export declare const useSelect: (selectedKeysProps: string[], defaultSelectedKeys: string[]) => readonly [string[], React.Dispatch<React.SetStateAction<string[]>>];

package/es/tree/treeHooks.js

@@ -1,7 +1,7 @@
 import _slicedToArray from "@babel/runtime-corejs3/helpers/slicedToArray";
 import _sliceInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/slice";
 import _concatInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/concat";
-import React, { useEffect, useState } from 'react';
+import React, { useEffect, useState, useRef } from 'react';
 import { getInitCheckededKeys, getDataCheckededStateStrictly, getInitExpandedKeys, getPos, getAllParentKeys } from './utils/treeUtils';
 export var useViewportHeight = function useViewportHeight(height, listRef) {
   var _React$useState = React.useState(0),
@@ -59,22 +59,22 @@ export var useChecked = function useChecked(checkStrictly, checkedKeysProps, def
   }, [nextHalfCheckedKeys]);
   return [checkedKeys, halfCheckedKeys, setCheckedKeys, setHalfCheckedKeys];
 };
-export var useExpand = function useExpand(flattenAllData, expandedKeysProps, defaultExpandedKeys, defaultExpandAll, defaultExpandRoot, defaultExpandParent, scrollKey, isInit, filterTreeNode, isSearching, keysData, searchExpandedKeys) {
+export var useExpand = function useExpand(flattenAllData, expandedKeysProps, defaultExpandedKeys, defaultExpandAll, defaultExpandRoot, defaultExpandParent, scrollKey, isInit, filterTreeNode, isSearching, keysData, searchStatus) {
   var expandScrollkeys = [];
   if (scrollKey) {
     var pos = getPos(flattenAllData, scrollKey);
     expandScrollkeys = getAllParentKeys(flattenAllData, pos);
   }
   var initialExpandedKeys = React.useMemo(function () {
-    return getInitExpandedKeys(flattenAllData, expandedKeysProps, defaultExpandedKeys, defaultExpandAll, defaultExpandRoot, defaultExpandParent, expandScrollkeys, filterTreeNode, isSearching, keysData, searchExpandedKeys, isInit);
-  }, [flattenAllData, expandedKeysProps, defaultExpandedKeys, defaultExpandAll, defaultExpandRoot, defaultExpandParent, scrollKey, filterTreeNode, isSearching, keysData, searchExpandedKeys, isInit]);
+    return getInitExpandedKeys(flattenAllData, expandedKeysProps, defaultExpandedKeys, defaultExpandAll, defaultExpandRoot, defaultExpandParent, expandScrollkeys, filterTreeNode, isSearching, keysData, isInit, searchStatus);
+  }, [flattenAllData, expandedKeysProps, defaultExpandedKeys, defaultExpandAll, defaultExpandRoot, defaultExpandParent, scrollKey, filterTreeNode, isSearching, keysData, isInit, searchStatus]);
   var _React$useState7 = React.useState(initialExpandedKeys),
     _React$useState8 = _slicedToArray(_React$useState7, 2),
     expandedKeys = _React$useState8[0],
     setExpandedKeys = _React$useState8[1];
   React.useEffect(function () {
     setExpandedKeys(initialExpandedKeys);
-  }, [flattenAllData, expandedKeysProps, searchExpandedKeys, defaultExpandAll, defaultExpandedKeys, defaultExpandRoot, defaultExpandParent, scrollKey]);
+  }, [flattenAllData, expandedKeysProps, defaultExpandAll, defaultExpandedKeys, defaultExpandRoot, defaultExpandParent, scrollKey, searchStatus]);
   return [expandedKeys, setExpandedKeys];
 };
 export var useScrollToKey = function useScrollToKey(scrollKey, index, estimatedItemSize, scrollRef, viewportHeight, treeNodePrefixCls) {
@@ -115,8 +115,13 @@ export var useSelect = function useSelect(selectedKeysProps, defaultSelectedKeys
     _useState2 = _slicedToArray(_useState, 2),
     selectedKeys = _useState2[0],
     setSelectedKeys = _useState2[1];
+  var mounting = useRef(true);
   useEffect(function () {
-    selectedKeysProps && setSelectedKeys(selectedKeysProps);
+    if (mounting.current) {
+      mounting.current = false;
+      return;
+    }
+    setSelectedKeys(selectedKeysProps);
   }, [selectedKeysProps]);
   return [selectedKeys, setSelectedKeys];
 };

package/es/tree/treeNode.d.ts

@@ -10,9 +10,8 @@ export interface TreeNodeProps {
     draggable?: boolean;
     disableCheckbox?: boolean;
     icon?: React.ReactNode | ((props: any) => React.ReactNode);
-    showLine?: boolean | {
-        showLeafIcon: boolean;
-    };
+    isActiveLine?: boolean;
+    activeLevel?: number;
     showIcon?: boolean;
     selected?: boolean;
     style?: Map<string, string>;

package/es/tree/treeNode.js

@@ -41,7 +41,8 @@ var TreeNode = /*#__PURE__*/React.forwardRef(function (props) {
     hasChildNode = TreeNodeProps.hasChildNode,
     expand = TreeNodeProps.expand,
     title = TreeNodeProps.title,
-    showLine = TreeNodeProps.showLine,
+    isActiveLine = TreeNodeProps.isActiveLine,
+    activeLevel = TreeNodeProps.activeLevel,
     showIcon = TreeNodeProps.showIcon,
     selected = TreeNodeProps.selected,
     setDragNode = TreeNodeProps.setDragNode,
@@ -62,7 +63,7 @@ var TreeNode = /*#__PURE__*/React.forwardRef(function (props) {
     onDragEnd = TreeNodeProps.onDragEnd,
     onDrop = TreeNodeProps.onDrop,
     onSelect = TreeNodeProps.onSelect,
-    others = __rest(TreeNodeProps, ["nodeKey", "prefixCls", "selectable", "checkable", "className", "icon", "switcherIcon", "disabled", "draggable", "pos", "checked", "level", "getDragNode", "hasChildNode", "expand", "title", "showLine", "showIcon", "selected", "setDragNode", "style", "indeterminate", "estimatedItemSize", "dragOver", "dropPosition", "expandOnClickNode", "onlyExpandOnClickIcon", "loading", "onExpand", "onCheck", "onDragStart", "onDragOver", "onDragLeave", "onDragEnter", "onDragEnd", "onDrop", "onSelect"]);
+    others = __rest(TreeNodeProps, ["nodeKey", "prefixCls", "selectable", "checkable", "className", "icon", "switcherIcon", "disabled", "draggable", "pos", "checked", "level", "getDragNode", "hasChildNode", "expand", "title", "isActiveLine", "activeLevel", "showIcon", "selected", "setDragNode", "style", "indeterminate", "estimatedItemSize", "dragOver", "dropPosition", "expandOnClickNode", "onlyExpandOnClickIcon", "loading", "onExpand", "onCheck", "onDragStart", "onDragOver", "onDragLeave", "onDragEnter", "onDragEnd", "onDrop", "onSelect"]);
   var nodeData = React.useMemo(function () {
     return _extends({
       selectable: selectable,
@@ -133,12 +134,11 @@ var TreeNode = /*#__PURE__*/React.forwardRef(function (props) {
     return icon;
   };
   var indent = function indent() {
-    var _classNames;
     var indentArr = [];
-    var className = classNames((_classNames = {}, _defineProperty(_classNames, "".concat(treeNodePrefixCls, "-indent"), true), _defineProperty(_classNames, "".concat(treeNodePrefixCls, "-indent-line"), !!showLine), _classNames));
     for (var i = 0; i < level; i++) {
+      var _classNames;
       indentArr.push( /*#__PURE__*/React.createElement("span", {
-        className: className,
+        className: classNames((_classNames = {}, _defineProperty(_classNames, "".concat(treeNodePrefixCls, "-indent"), true), _defineProperty(_classNames, "".concat(treeNodePrefixCls, "-indent-active"), !!isActiveLine && i === activeLevel), _classNames)),
         key: i,
         style: {
           height: "".concat(estimatedItemSize)
@@ -244,6 +244,7 @@ var TreeNode = /*#__PURE__*/React.forwardRef(function (props) {
   }, [expandOnClickNode, handleExpandIconClick, handleSelect, onlyExpandOnClickIcon]);
   var handleDragStart = React.useCallback(function (e) {
     if (!draggable) return;
+    e.target.classList.add("".concat(treeNodePrefixCls, "-dragging"));
     setDragNode(nodeData);
     onDragStart && onDragStart(e, props);
   }, [draggable, setDragNode, nodeData, onDragStart, props]);

package/es/tree/utils/treeUtils.d.ts

@@ -1,4 +1,4 @@
-import { TreeNodeData, KeysDataType } from '../tree';
+import { TreeNodeData, KeysDataType, SearchStatus } from '../tree';
 /**
  * 打平所有数组，并添加pos位置信息，
  * 方便根据expandKeys等计算节点的expand，checkedKeys计算节点checked状态
@@ -60,6 +60,6 @@ export declare const getDataCheckededStateStrictly: (checkedKeys: string[]) => {
 };
 export declare const delKey: (prevKeys: string[], delKeys: string[]) => never[] & string[];
 export declare const getAllNodeKeys: (data: any[]) => string[];
-export declare const getInitExpandedKeys: (data: any[], expandedKeys: string[], defaultExpandedKeys: string[], defaultExpandAll: boolean, defaultExpandRoot: boolean, defaultExpandParent: boolean, expandScrollkeys: string[] | undefined, filterTreeNode: FunctionConstructor, isSearching: boolean, keysData: KeysDataType, searchExpandedKeys: string[], isInit: boolean) => string[];
+export declare const getInitExpandedKeys: (data: any[], expandedKeys: string[], defaultExpandedKeys: string[], defaultExpandAll: boolean, defaultExpandRoot: boolean, defaultExpandParent: boolean, expandScrollkeys: string[] | undefined, filterTreeNode: FunctionConstructor, isSearching: boolean, keysData: KeysDataType, isInit: boolean, searchStatus: SearchStatus) => string[];
 export declare const getExpandedKeys: (expandedKeys: string[], expandScrollkeys?: string[]) => string[];
 export declare const calcDropPosition: (event: React.MouseEvent, dropNode: HTMLElement) => 0 | 1 | -1;

package/es/tree/utils/treeUtils.js

@@ -583,8 +583,8 @@ export var getInitExpandedKeys = function getInitExpandedKeys(data, expandedKeys
   var filterTreeNode = arguments.length > 7 ? arguments[7] : undefined;
   var isSearching = arguments.length > 8 ? arguments[8] : undefined;
   var keysData = arguments.length > 9 ? arguments[9] : undefined;
-  var searchExpandedKeys = arguments.length > 10 ? arguments[10] : undefined;
-  var isInit = arguments.length > 11 ? arguments[11] : undefined;
+  var isInit = arguments.length > 10 ? arguments[10] : undefined;
+  var searchStatus = arguments.length > 11 ? arguments[11] : undefined;
   var keys = (expandedKeys === null || expandedKeys === void 0 ? void 0 : _concatInstanceProperty(expandedKeys).call(expandedKeys, expandScrollkeys)) || (defaultExpandedKeys === null || defaultExpandedKeys === void 0 ? void 0 : _concatInstanceProperty(defaultExpandedKeys).call(defaultExpandedKeys, expandScrollkeys)) || [];
   if (isInit) {
     if (defaultExpandAll) {
@@ -605,11 +605,10 @@ export var getInitExpandedKeys = function getInitExpandedKeys(data, expandedKeys
       }
     }
   }
-  if (isSearching) {
-    var _context6;
-    keys = _concatInstanceProperty(_context6 = []).call(_context6, _toConsumableArray(searchExpandedKeys), _toConsumableArray(getAllFilterKeys(data, filterTreeNode, keysData).filterExpandKeys));
+  if (isSearching && searchStatus === 'SEARCH_START') {
+    keys = _toConsumableArray(getAllFilterKeys(data, filterTreeNode, keysData).filterExpandKeys);
   }
-  return _Array$from(new _Set(_toConsumableArray(keys)));
+  return keys;
 };
 export var getExpandedKeys = function getExpandedKeys(expandedKeys) {
   var expandScrollkeys = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : [];

package/es/tree-select/interface.d.ts

@@ -56,6 +56,7 @@ export interface ITreeSelectProps<T extends TreeSelectValue> extends AbstractSel
     defaultValue?: T;
     mode?: Mode;
     autoFocus?: boolean;
+    status?: 'error';
     onlyExpandOnClickIcon?: boolean;
     onChange?: (value: T, treeNode: TreeNodeData) => void;
     onSelect?: (value: T extends (infer I)[] ? I : T, { checked, node, event }: any) => void;

package/es/tree-select/style/index.css

@@ -163,7 +163,7 @@
 .kd-tree-select-icon-clear:hover {
   color: var(--kd-c-tree-select-color-border-hover, var(--kd-g-color-theme, #5582f3));
 }
-.kd-tree-select-focused {
+.kd-tree-select-focused:not(.kd-tree-select-error) {
   border-color: var(--kd-c-tree-select-color-border-foucs, var(--kd-g-color-theme, #5582f3)) !important;
 }
 .kd-tree-select-placeholder {
@@ -181,7 +181,7 @@
 .kd-tree-select-underline {
   border-bottom: 1px solid var(--kd-c-tree-select-color-border, var(--kd-g-color-input, #999));
 }
-.kd-tree-select-underline:hover:not(.kd-tree-select-multiple-disabled):not(.kd-tree-select-single-disabled) {
+.kd-tree-select-underline:hover:not(.kd-tree-select-multiple-disabled):not(.kd-tree-select-single-disabled):not( .kd-tree-select-error) {
   border-bottom: 1px solid var(--kd-c-tree-select-color-border-hover, var(--kd-g-color-theme, #5582f3));
 }
 .kd-tree-select-bordered {
@@ -189,7 +189,7 @@
   padding-left: var(--kd-c-tree-select-bordered-spacing-padding-left, 8px) !important;
   border-radius: var(--kd-c-tree-select-bordered-radius-border, 2px);
 }
-.kd-tree-select-bordered:hover:not(.kd-tree-select-multiple-disabled):not(.kd-tree-select-single-disabled) {
+.kd-tree-select-bordered:hover:not(.kd-tree-select-multiple-disabled):not(.kd-tree-select-single-disabled):not( .kd-tree-select-error) {
   border: 1px solid var(--kd-c-tree-select-color-border-hover, var(--kd-g-color-theme, #5582f3));
 }
 .kd-tree-select-bordered .kd-tree-select-suffix {
@@ -312,7 +312,7 @@
   white-space: nowrap;
   text-overflow: ellipsis;
 }
-.kd-tree-select .kd-tree-select-single-focused {
+.kd-tree-select .kd-tree-select-single-focused:not(.kd-tree-select-error) {
   border-color: var(--kd-c-tree-select-color-border-foucs, var(--kd-g-color-theme, #5582f3)) !important;
 }
 .kd-tree-select .kd-tree-select-single-disabled {
@@ -495,6 +495,9 @@
   color: var(--kd-c-tree-select-footer-color-text-selected, #0e5fd8);
   padding: 0 2px;
 }
+.kd-tree-select-error:not(.kd-tree-select-single-disabled):not(.kd-tree-select-multiple-disabled) {
+  border-color: var(--kd-c-tree-select-color-error, var(--kd-g-color-error, #fb2323));
+}
 .kd-tree-select.topLeft.hidden,
 .kd-tree-select.bottomLeft.hidden,
 .kd-tree-select.topRight.hidden,

package/es/tree-select/style/index.less

@@ -59,7 +59,7 @@
     }
   }
 
-  &-focused {
+  &-focused:not(.@{tree-select-prefix-cls}-error) {
     .focusColor();
   }
   &-placeholder {
@@ -78,7 +78,9 @@
 
   &-underline {
     border-bottom: 1px solid @tree-select-g-color-border;
-    &:hover:not(.@{tree-select-prefix-cls}-multiple-disabled):not(.@{tree-select-prefix-cls}-single-disabled) {
+    &:hover:not(.@{tree-select-prefix-cls}-multiple-disabled):not(.@{tree-select-prefix-cls}-single-disabled):not(
+        .@{tree-select-prefix-cls}-error
+      ) {
       border-bottom: 1px solid @tree-select-g-color-border-hover;
     }
   }
@@ -87,7 +89,9 @@
     border: 1px solid @tree-select-border-g-color-border;
     padding-left: @tree-select-bordered !important;
     border-radius: @tree-select-border-radius-border;
-    &:hover:not(.@{tree-select-prefix-cls}-multiple-disabled):not(.@{tree-select-prefix-cls}-single-disabled) {
+    &:hover:not(.@{tree-select-prefix-cls}-multiple-disabled):not(.@{tree-select-prefix-cls}-single-disabled):not(
+        .@{tree-select-prefix-cls}-error
+      ) {
       border: 1px solid @tree-select-g-color-border-hover;
     }
 
@@ -206,7 +210,7 @@
         .over();
       }
     }
-    &-focused {
+    &-focused:not(.@{tree-select-prefix-cls}-error) {
       .focusColor();
     }
     &-disabled {
@@ -383,6 +387,10 @@
     }
   }
 
+  &-error:not(.@{tree-select-prefix-cls}-single-disabled):not(.@{tree-select-prefix-cls}-multiple-disabled) {
+    border-color: @tree-select-error-color;
+  }
+
   &.topLeft.hidden,
   &.bottomLeft.hidden,
   &.topRight.hidden,

package/es/tree-select/style/token.less

@@ -22,6 +22,7 @@
 @tree-select-single-color-text: var(~'@{tree-select-custom-prefix}-single-color-text', @color-text-primary);
 @tree-select-clear-color: var(~'@{tree-select-custom-prefix}-icon-clear-color-text', #d9d9d9);
 @tree-select-clear-color-hover: var(~'@{tree-select-custom-prefix}-icon-clear-color-text-hover', #999);
+@tree-select-error-color: var(~'@{tree-select-custom-prefix}-color-error', @color-error);
 
 // font
 @tree-select-list-font-size: var(~'@{tree-select-custom-prefix}-dropdown-font-size', 12px); // 下拉列表文字大小

package/es/tree-select/tree-select.js

@@ -98,7 +98,8 @@ var InternalTreeSelect = function InternalTreeSelect(props, ref) {
     onCheck = treeSelectProps.onCheck,
     dropdownRender = treeSelectProps.dropdownRender,
     onlyExpandOnClickIcon = treeSelectProps.onlyExpandOnClickIcon,
-    listHeight = treeSelectProps.listHeight;
+    listHeight = treeSelectProps.listHeight,
+    status = treeSelectProps.status;
   var isMultiple = mode === 'multiple'; // 是否多选
   var _useMergedState = useMergedState(isMultiple ? [] : undefined, {
       value: value,
@@ -154,7 +155,7 @@ var InternalTreeSelect = function InternalTreeSelect(props, ref) {
   // 下拉列表框样式
   var dropDownCls = classNames(dropdownClassName, _defineProperty({}, "".concat(selectPrefixCls, "-dropdown"), true));
   // 多选，单选公共样式
-  var commCls = classNames((_classNames4 = {}, _defineProperty(_classNames4, "".concat(selectPrefixCls, "-bordered"), borderType === 'bordered'), _defineProperty(_classNames4, "".concat(selectPrefixCls, "-underline"), borderType === 'underline'), _defineProperty(_classNames4, "".concat(selectPrefixCls, "-borderless"), borderType === 'none'), _defineProperty(_classNames4, _concatInstanceProperty(_context3 = "".concat(selectPrefixCls, "-size-")).call(_context3, size), size), _defineProperty(_classNames4, "".concat(selectPrefixCls, "-wrapper"), true), _classNames4));
+  var commCls = classNames((_classNames4 = {}, _defineProperty(_classNames4, "".concat(selectPrefixCls, "-bordered"), borderType === 'bordered'), _defineProperty(_classNames4, "".concat(selectPrefixCls, "-underline"), borderType === 'underline'), _defineProperty(_classNames4, "".concat(selectPrefixCls, "-borderless"), borderType === 'none'), _defineProperty(_classNames4, _concatInstanceProperty(_context3 = "".concat(selectPrefixCls, "-size-")).call(_context3, size), size), _defineProperty(_classNames4, "".concat(selectPrefixCls, "-wrapper"), true), _defineProperty(_classNames4, "".concat(selectPrefixCls, "-error"), status === 'error'), _classNames4));
   useEffect(function () {
     var arr = [];
     if (isMultiple) {
@@ -353,6 +354,9 @@ var InternalTreeSelect = function InternalTreeSelect(props, ref) {
       (_a = searchRef.current) === null || _a === void 0 ? void 0 : _a.focus();
     }
   }, [showSearch, autoFocus, disabled]);
+  useEffect(function () {
+    setSelectedKeys(initValue);
+  }, [initValue]);
   // 渲染下拉列表框
   var renderContent = function renderContent() {
     var dropDownStyle = _extends({

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

@@ -201,7 +201,7 @@ var InternalSelect = function InternalSelect(props, ref) {
     if (disabled) return null;
     var suffixIcon = selectProps.suffixIcon;
     var arrowIconCls = (0, _classnames.default)((_classNames4 = {}, (0, _defineProperty2.default)(_classNames4, "".concat(selectPrefixCls, "-icon-arrow"), true), (0, _defineProperty2.default)(_classNames4, "".concat(selectPrefixCls, "-icon-arrow-up"), optionShow), (0, _defineProperty2.default)(_classNames4, "".concat(selectPrefixCls, "-icon-arrow-down"), !optionShow), (0, _defineProperty2.default)(_classNames4, "".concat(selectPrefixCls, "-icon-arrow-focus"), optionShow), _classNames4));
-    var iconShow = allowClear && !disabled && ((initValue !== null && initValue !== void 0 ? initValue : '') !== '' || searchValue);
+    var iconShow = allowClear && !disabled && (initValue !== null && initValue !== void 0 ? initValue : '') !== '';
     return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, iconShow && /*#__PURE__*/_react.default.createElement("span", {
       onClick: handleReset,
       onMouseDown: function onMouseDown(e) {

package/lib/clipboard/clipboard.d.ts

@@ -0,0 +1,21 @@
+import React from 'react';
+export declare const ClipboardActions: ["copy", "cut"];
+export declare type ClipboardAction = typeof ClipboardActions[number];
+export declare const ClipboardSizes: ["large", "middle", "small"];
+export declare type ClipboardSize = typeof ClipboardSizes[number];
+export interface IClipboardProps {
+    action?: ClipboardAction;
+    content?: string;
+    children?: React.ReactNode;
+    className?: string;
+    disabled?: boolean;
+    icon?: React.ReactNode | false;
+    prefixCls?: string;
+    size?: ClipboardSize;
+    style?: Record<string, unknown>;
+    target?: () => HTMLElement | string;
+    onError?: (error: Error) => void;
+    onSuccess?: (content: string) => void;
+}
+declare const Clipboard: React.ForwardRefExoticComponent<IClipboardProps & React.RefAttributes<unknown>>;
+export default Clipboard;

package/lib/clipboard/clipboard.js

@@ -0,0 +1,121 @@
+"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 = exports.ClipboardSizes = exports.ClipboardActions = void 0;
+var _extends2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/extends"));
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/defineProperty"));
+var _getOwnPropertySymbols = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-symbols"));
+var _concat = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/concat"));
+var _classnames = _interopRequireDefault(require("classnames"));
+var _react = _interopRequireWildcard(require("react"));
+var _utils = require("../_utils");
+var _devwarning = _interopRequireDefault(require("../_utils/devwarning"));
+var _type = require("../_utils/type");
+var _ConfigContext = _interopRequireDefault(require("../config-provider/ConfigContext"));
+var _icon = _interopRequireDefault(require("../icon"));
+var _util = require("./util");
+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 __rest = void 0 && (void 0).__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 _getOwnPropertySymbols.default === "function") for (var i = 0, p = (0, _getOwnPropertySymbols.default)(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;
+};
+var ClipboardActions = (0, _type.tuple)('copy', 'cut');
+exports.ClipboardActions = ClipboardActions;
+var ClipboardSizes = (0, _type.tuple)('large', 'middle', 'small');
+exports.ClipboardSizes = ClipboardSizes;
+var InternalClipboard = function InternalClipboard(props, ref) {
+  var _context, _classNames;
+  var _useContext = (0, _react.useContext)(_ConfigContext.default),
+    getPrefixCls = _useContext.getPrefixCls,
+    prefixCls = _useContext.prefixCls,
+    userDefaultProps = _useContext.compDefaultProps;
+  // 剪贴板参数，合并了系统默认参数、用户定义组件统一参数及组件传参
+  var clipboardProps = (0, _utils.getCompProps)('Clipboard', userDefaultProps, props);
+  var className = clipboardProps.className,
+    customPrefixcls = clipboardProps.prefixCls,
+    action = clipboardProps.action,
+    content = clipboardProps.content,
+    children = clipboardProps.children,
+    disabled = clipboardProps.disabled,
+    icon = clipboardProps.icon,
+    size = clipboardProps.size,
+    target = clipboardProps.target,
+    onError = clipboardProps.onError,
+    onSuccess = clipboardProps.onSuccess,
+    others = __rest(clipboardProps, ["className", "prefixCls", "action", "content", "children", "disabled", "icon", "size", "target", "onError", "onSuccess"]);
+  (0, _devwarning.default)(ClipboardActions.indexOf(action) === -1, 'clipboard', "cannot found clipboard action '".concat(action, "'"));
+  (0, _devwarning.default)(ClipboardSizes.indexOf(size) === -1, 'clipboard', "cannot found clipboard size '".concat(size, "'"));
+  // 剪贴板样式前缀
+  var clipboardPrefixCls = getPrefixCls(prefixCls, 'clipboard', customPrefixcls);
+  var clipboardClass = (0, _classnames.default)(clipboardPrefixCls, className, (_classNames = {}, (0, _defineProperty2.default)(_classNames, (0, _concat.default)(_context = "".concat(clipboardPrefixCls, "-size-")).call(_context, size), size), (0, _defineProperty2.default)(_classNames, "".concat(clipboardPrefixCls, "-icon-only"), !children && children !== 0 && icon !== null), _classNames));
+  // ref
+  var clipboardRef = ref || /*#__PURE__*/_react.default.createRef();
+  // 如果没有传 icon，则使用默认图标
+  // 如果 icon 传 null，则不使用图标
+  var iconNode = icon || (icon === undefined ? /*#__PURE__*/_react.default.createElement(_icon.default, {
+    type: "copy-code"
+  }) : null);
+  // 如果传的 children 为 string，则将 children 包装成块标签
+  var childrenNode = typeof children === 'string' ? /*#__PURE__*/_react.default.createElement("span", null, children) : children;
+  /**
+   * 剪贴板 click 事件处理
+   */
+  var handleClick = (0, _react.useCallback)(function () {
+    if (disabled) {
+      // 禁用状态不触发点击事件
+      return;
+    }
+    var selectedText;
+    try {
+      if (content) {
+        // 如果传了 content，则直接复制 content
+        selectedText = (0, _util.onClipboardCopy)(content);
+      } else {
+        var targetElement = typeof target === 'string' ? document.querySelector(target) : target();
+        if (!targetElement) {
+          // 没有获取到元素，抛出异常
+          throw new Error("target element '".concat(target, "' does not exist"));
+        } else {
+          if (action === 'copy' && targetElement.hasAttribute('disabled')) {
+            // 复制被置为 disabled 的元素，抛出异常
+            throw new Error("invalid \"target\" attribute of element '".concat(targetElement, "'. Please use \"readonly\" instead of \"disabled\" attribute"));
+          }
+          if (action === 'cut' && (targetElement.hasAttribute('readonly') || targetElement.hasAttribute('disabled'))) {
+            // 剪切被置为 readonly 或 disabled 的元素，抛出异常
+            throw new Error("invalid \"target\" attribute of element '".concat(targetElement, "'. You can't cut text from elements with \"readonly\" or \"disabled\" attributes"));
+          }
+        }
+        // 对 targetElement 的值进行复制或剪切
+        selectedText = action === 'copy' ? (0, _util.onClipboardCopy)(targetElement) : (0, _util.onClipboardCut)(targetElement);
+      }
+    } catch (error) {
+      // 触发失败的回调
+      onError === null || onError === void 0 ? void 0 : onError(error);
+      // 退出处理器
+      return;
+    }
+    // 触发成功的回调
+    onSuccess === null || onSuccess === void 0 ? void 0 : onSuccess(selectedText);
+  }, [action, content, disabled, onError, onSuccess, target]);
+  return /*#__PURE__*/_react.default.createElement("div", (0, _extends2.default)({
+    className: clipboardClass,
+    disabled: disabled,
+    onClick: handleClick,
+    ref: clipboardRef
+  }, others), iconNode, childrenNode);
+};
+var Clipboard = /*#__PURE__*/_react.default.forwardRef(InternalClipboard);
+Clipboard.displayName = 'Clipboard';
+var _default = Clipboard;
+exports.default = _default;

package/lib/clipboard/index.d.ts

@@ -0,0 +1,4 @@
+/// <reference types="react" />
+declare const Clipboard: import("react").ForwardRefExoticComponent<import("./clipboard").IClipboardProps & import("react").RefAttributes<unknown>>;
+export { ClipboardAction, IClipboardProps } from './clipboard';
+export default Clipboard;

package/lib/clipboard/index.js

@@ -0,0 +1,11 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _clipboard = _interopRequireDefault(require("./clipboard"));
+var Clipboard = _clipboard.default;
+var _default = Clipboard;
+exports.default = _default;

package/lib/clipboard/style/css.js

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