@kdcloudjs/kdesign 1.7.4 → 1.7.6

package/es/input/ClearableLabeledInput.js

@@ -28,7 +28,8 @@ var ClearableInput = function ClearableInput(props) {
     focused = props.focused,
     numberMark = props.numberMark,
     inputCount = props.inputCount,
-    count = props.count;
+    count = props.count,
+    status = props.status;
   var _useState = useState(false),
     _useState2 = _slicedToArray(_useState, 2),
     isMouseEnter = _useState2[0],
@@ -80,7 +81,7 @@ var ClearableInput = function ClearableInput(props) {
       className: "".concat(prefixCls, "-prefix"),
       onMouseDown: mouseDownHandle
     }, prefix) : null;
-    var inputWrapperClasses = classNames((_classNames2 = {}, _defineProperty(_classNames2, "".concat(prefixCls, "-wrapper"), true), _defineProperty(_classNames2, "".concat(prefixCls, "-wrapper-focused"), focused && !disabled), _defineProperty(_classNames2, "".concat(prefixCls, "-wrapper-disabled"), disabled), _defineProperty(_classNames2, _concatInstanceProperty(_context = "".concat(prefixCls, "-wrapper-size-")).call(_context, size), size), _defineProperty(_classNames2, "".concat(prefixCls, "-wrapper-borderless"), borderType === 'none'), _defineProperty(_classNames2, "".concat(prefixCls, "-wrapper-underline"), borderType === 'underline'), _classNames2), _defineProperty({}, className, className && !addonBefore && !addonAfter));
+    var inputWrapperClasses = classNames((_classNames2 = {}, _defineProperty(_classNames2, "".concat(prefixCls, "-wrapper"), true), _defineProperty(_classNames2, "".concat(prefixCls, "-wrapper-focused"), focused && !disabled), _defineProperty(_classNames2, _concatInstanceProperty(_context = "".concat(prefixCls, "-wrapper-size-")).call(_context, size), size), _defineProperty(_classNames2, "".concat(prefixCls, "-wrapper-borderless"), borderType === 'none'), _defineProperty(_classNames2, "".concat(prefixCls, "-wrapper-underline"), borderType === 'underline'), _defineProperty(_classNames2, "".concat(prefixCls, "-error"), status === 'error'), _defineProperty(_classNames2, "".concat(prefixCls, "-wrapper-disabled"), disabled), _classNames2), _defineProperty({}, className, className && !addonBefore && !addonAfter));
     return /*#__PURE__*/React.createElement("span", {
       className: inputWrapperClasses,
       style: style,
@@ -95,7 +96,7 @@ var ClearableInput = function ClearableInput(props) {
     if (!addonBefore && !addonAfter && !count) {
       return originElement;
     }
-    var addonClassName = classNames("".concat(prefixCls, "-group-addon"), (_classNames4 = {}, _defineProperty(_classNames4, "".concat(prefixCls, "-group-addon-borderless"), borderType === 'none'), _defineProperty(_classNames4, "".concat(prefixCls, "-group-addon-underline"), borderType === 'underline'), _defineProperty(_classNames4, "".concat(prefixCls, "-group-addon-disabled"), disabled), _classNames4));
+    var addonClassName = classNames("".concat(prefixCls, "-group-addon"), (_classNames4 = {}, _defineProperty(_classNames4, "".concat(prefixCls, "-group-addon-borderless"), borderType === 'none'), _defineProperty(_classNames4, "".concat(prefixCls, "-group-addon-underline"), borderType === 'underline'), _defineProperty(_classNames4, "".concat(prefixCls, "-error"), status === 'error'), _defineProperty(_classNames4, "".concat(prefixCls, "-group-addon-disabled"), disabled), _classNames4));
     var addonBeforeNode = addonBefore ? /*#__PURE__*/React.createElement("span", {
       className: addonClassName
     }, addonBefore) : null;

package/es/input/TextArea.d.ts

@@ -14,6 +14,7 @@ export interface textAreaProps extends React.TextareaHTMLAttributes<HTMLInputEle
     style?: Record<string, unknown>;
     size?: InputSiteType;
     autoSize?: AutoSizeType | boolean;
+    status?: 'error';
 }
 export interface AutoSizeType {
     minRows?: number;

package/es/input/TextArea.js

@@ -51,7 +51,8 @@ var InternalTextarea = function InternalTextarea(props, ref) {
     placeholder = textAreaProps.placeholder,
     style = textAreaProps.style,
     size = textAreaProps.size,
-    others = __rest(textAreaProps, ["value", "allowClear", "borderType", "defaultValue", "count", "countPosition", "autoSize", "className", "prefixCls", "canResize", "maxLength", "disabled", "onBlur", "onFocus", "onChange", "placeholder", "style", "size"]);
+    status = textAreaProps.status,
+    others = __rest(textAreaProps, ["value", "allowClear", "borderType", "defaultValue", "count", "countPosition", "autoSize", "className", "prefixCls", "canResize", "maxLength", "disabled", "onBlur", "onFocus", "onChange", "placeholder", "style", "size", "status"]);
   var textAreaPrefixCls = getPrefixCls(prefixCls, 'input', customPrefixcls); // TextArea样式前缀
   devWarning(BorderTypes.indexOf(borderType) === -1, 'textarea', "cannot found textarea borderType '".concat(borderType, "'"));
   var _useMergedState = useMergedState('', {
@@ -172,7 +173,7 @@ var InternalTextarea = function InternalTextarea(props, ref) {
       ref: textareaRef,
       disabled: disabled,
       style: _extends({}, textareaStyles, hadCount || !!allowClear ? otherStyles : style),
-      className: classNames("".concat(prefixCls, "-textarea"), (_classNames2 = {}, _defineProperty(_classNames2, _concatInstanceProperty(_context = "".concat(prefixCls, "-size-")).call(_context, size), size), _defineProperty(_classNames2, "".concat(prefixCls, "-borderless"), borderType === 'none'), _defineProperty(_classNames2, "".concat(prefixCls, "-underline"), borderType === 'underline'), _defineProperty(_classNames2, "".concat(prefixCls, "-disabled"), disabled), _defineProperty(_classNames2, "".concat(prefixCls, "-no-resize"), canResize !== true), _defineProperty(_classNames2, "".concat(prefixCls, "-allowClear-spacing"), !!allowClear), _classNames2), _defineProperty({}, className, className && !allowClear && !hadCount)),
+      className: classNames("".concat(prefixCls, "-textarea"), (_classNames2 = {}, _defineProperty(_classNames2, _concatInstanceProperty(_context = "".concat(prefixCls, "-size-")).call(_context, size), size), _defineProperty(_classNames2, "".concat(prefixCls, "-borderless"), borderType === 'none'), _defineProperty(_classNames2, "".concat(prefixCls, "-underline"), borderType === 'underline'), _defineProperty(_classNames2, "".concat(prefixCls, "-no-resize"), canResize !== true), _defineProperty(_classNames2, "".concat(prefixCls, "-allowClear-spacing"), !!allowClear), _defineProperty(_classNames2, "".concat(prefixCls, "-error"), status === 'error'), _defineProperty(_classNames2, "".concat(prefixCls, "-disabled"), disabled), _classNames2), _defineProperty({}, className, className && !allowClear && !hadCount)),
       onChange: handleChange,
       onFocus: !disabled ? handleFocus : undefined,
       onBlur: !disabled ? handleBlur : undefined,

package/es/input/input.d.ts

@@ -22,6 +22,7 @@ export interface InputProps extends Omit<React.InputHTMLAttributes<HTMLInputElem
     value?: any;
     readonly?: 'readonly';
     count?: boolean;
+    status?: 'error';
 }
 declare const Input: React.ForwardRefExoticComponent<InputProps & React.RefAttributes<unknown>>;
 export default Input;

package/es/input/input.js

@@ -49,7 +49,8 @@ var InternalInput = function InternalInput(props, ref) {
     className = inputProps.className,
     maxLength = inputProps.maxLength,
     count = inputProps.count,
-    others = __rest(inputProps, ["type", "size", "disabled", "onPressEnter", "borderType", "prefixCls", "onFocus", "onBlur", "onChange", "placeholderTobeValue", "defaultValue", "value", "className", "maxLength", "count"]);
+    status = inputProps.status,
+    others = __rest(inputProps, ["type", "size", "disabled", "onPressEnter", "borderType", "prefixCls", "onFocus", "onBlur", "onChange", "placeholderTobeValue", "defaultValue", "value", "className", "maxLength", "count", "status"]);
   devWarning(InputSiteTypes.indexOf(size) === -1, 'input', "cannot found input size '".concat(size, "'"));
   devWarning(BorderTypes.indexOf(borderType) === -1, 'input', "cannot found input borderType '".concat(borderType, "'"));
   var _useMergedState = useMergedState('', {
@@ -72,7 +73,7 @@ var InternalInput = function InternalInput(props, ref) {
   var inputPrefixCls = getPrefixCls(prefixCls, 'input', customPrefixcls); // 按钮样式前缀
   var addonBefore = others.addonBefore,
     addonAfter = others.addonAfter;
-  var inputClasses = classNames(inputPrefixCls, (_classNames = {}, _defineProperty(_classNames, _concatInstanceProperty(_context = "".concat(inputPrefixCls, "-size-")).call(_context, size), size), _defineProperty(_classNames, "".concat(inputPrefixCls, "-borderless"), borderType === 'none'), _defineProperty(_classNames, "".concat(inputPrefixCls, "-underline"), borderType === 'underline'), _defineProperty(_classNames, "".concat(inputPrefixCls, "-disabled"), disabled), _classNames), _defineProperty({}, className, className && !hasPrefixSuffix(inputProps) && !addonBefore && !addonAfter));
+  var inputClasses = classNames(inputPrefixCls, (_classNames = {}, _defineProperty(_classNames, _concatInstanceProperty(_context = "".concat(inputPrefixCls, "-size-")).call(_context, size), size), _defineProperty(_classNames, "".concat(inputPrefixCls, "-borderless"), borderType === 'none'), _defineProperty(_classNames, "".concat(inputPrefixCls, "-underline"), borderType === 'underline'), _defineProperty(_classNames, "".concat(inputPrefixCls, "-error"), status === 'error'), _defineProperty(_classNames, "".concat(inputPrefixCls, "-disabled"), disabled), _classNames), _defineProperty({}, className, className && !hasPrefixSuffix(inputProps) && !addonBefore && !addonAfter));
   var handleFocus = function handleFocus(event) {
     setFocused(true);
     onFocus && onFocus(event);

package/es/input/style/index.css

@@ -146,10 +146,10 @@ textarea {
           box-shadow: none;
   outline: none;
 }
-.kd-input:not(.kd-input-disabled):hover {
+.kd-input:not(.kd-input-disabled):not(.kd-input-error):hover {
   border-color: var(--kd-c-input-color-border-focused, var(--kd-g-color-theme, #5582f3));
 }
-.kd-input:not(.kd-input-disabled):focus {
+.kd-input:not(.kd-input-disabled):not(.kd-input-error):focus {
   color: #212121;
   border-color: var(--kd-c-input-color-border-focused, var(--kd-g-color-theme, #5582f3));
 }
@@ -193,10 +193,10 @@ textarea {
           box-shadow: none;
   outline: none;
 }
-.kd-input-textarea:not(.kd-input-disabled):hover {
+.kd-input-textarea:not(.kd-input-disabled):not(.kd-input-error):hover {
   border-color: var(--kd-c-input-color-border-focused, var(--kd-g-color-theme, #5582f3));
 }
-.kd-input-textarea:not(.kd-input-disabled):focus {
+.kd-input-textarea:not(.kd-input-disabled):not(.kd-input-error):focus {
   color: #212121;
   border-color: var(--kd-c-input-color-border-focused, var(--kd-g-color-theme, #5582f3));
 }
@@ -300,10 +300,10 @@ textarea {
           box-shadow: none;
   outline: none;
 }
-.kd-input-wrapper:not(.kd-input-wrapper-disabled):hover {
+.kd-input-wrapper:not(.kd-input-wrapper-disabled):not(.kd-input-error):hover {
   border-color: var(--kd-c-input-color-border-focused, var(--kd-g-color-theme, #5582f3));
 }
-.kd-input-wrapper:not(.kd-input-wrapper-disabled):focus {
+.kd-input-wrapper:not(.kd-input-wrapper-disabled):not(.kd-input-error):focus {
   color: #212121;
   border-color: var(--kd-c-input-color-border-focused, var(--kd-g-color-theme, #5582f3));
 }
@@ -363,7 +363,7 @@ textarea {
   border-radius: 0 !important;
   padding-left: 0;
 }
-.kd-input-wrapper-focused {
+.kd-input-wrapper-focused:not(.kd-input-error) {
   border-color: var(--kd-c-input-color-border-focused, var(--kd-g-color-theme, #5582f3));
 }
 .kd-input-wrapper-disabled {
@@ -408,10 +408,10 @@ textarea {
           box-shadow: none;
   outline: none;
 }
-.kd-input-wrapper-textarea:not(.kd-input-disabled):hover {
+.kd-input-wrapper-textarea:not(.kd-input-disabled):not(.kd-input-error):hover {
   border-color: var(--kd-c-input-color-border-focused, var(--kd-g-color-theme, #5582f3));
 }
-.kd-input-wrapper-textarea:not(.kd-input-disabled):focus {
+.kd-input-wrapper-textarea:not(.kd-input-disabled):not(.kd-input-error):focus {
   color: #212121;
   border-color: var(--kd-c-input-color-border-focused, var(--kd-g-color-theme, #5582f3));
 }
@@ -537,3 +537,6 @@ textarea {
 .kd-input-input-mark-inner {
   color: var(--kd-c-input-placeholder-color-text, var(--kd-g-color-text-placeholder, #ccc));
 }
+.kd-input-error:not(.kd-input-disabled):not(.kd-input-wrapper-disabled):not(.kd-input-group-addon-disabled) {
+  border-color: var(--kd-c-input-color-error, var(--kd-g-color-error, #fb2323));
+}

package/es/input/style/index.less

@@ -152,7 +152,7 @@ textarea {
       .underline;
     }
 
-    &-focused {
+    &-focused:not(.@{input-prefix-cls}-error) {
       border-color: @input-border-color-focused;
     }
 
@@ -308,4 +308,8 @@ textarea {
   &-input-mark-inner {
     color: @input-placeholder-color-inner;
   }
+
+  &-error:not(.@{input-prefix-cls}-disabled):not(.@{input-prefix-cls}-wrapper-disabled):not(.@{input-prefix-cls}-group-addon-disabled) {
+    border-color: @input-error-color;
+  }
 }

package/es/input/style/mixin.less

@@ -1,8 +1,11 @@
+@import '../../style/themes/index';
 @import './token.less';
+@input-prefix-cls: ~'@{kd-prefix}-input';
 
 // 输入框默认样式Mixins
 .input(@prefix) {
   @disabled-prefix-cls: ~'@{prefix}-disabled';
+  @error-prefix-cls: ~'@{input-prefix-cls}-error';
   width: 100%;
   min-width: 0;
   border: @input-border-width-inner solid @input-border-color-disabled-inner;
@@ -29,10 +32,10 @@
     box-shadow: none;
     outline: none;
   }
-  &:not(.@{disabled-prefix-cls}):hover {
+  &:not(.@{disabled-prefix-cls}):not(.@{error-prefix-cls}):hover {
     border-color: @input-border-color-focused;
   }
-  &:not(.@{disabled-prefix-cls}):focus {
+  &:not(.@{disabled-prefix-cls}):not(.@{error-prefix-cls}):focus {
     color: @input-focus-color;
     border-color: @input-border-color-focused;
   }

package/es/input/style/token.less

@@ -21,6 +21,7 @@
 );
 @input-color-disabled-inner: var(~'@{input-prefix}-color-disabled', @color-disabled);
 @input-affix-color: var(~'@{input-prefix}-affix-color-text', #666);
+@input-error-color: var(~'@{input-prefix}-color-error', @color-error);
 
 // font
 @input-small-font-size-inner: var(~'@{input-prefix}-font-size-small', @font-size-small);

package/es/tree/tree.d.ts

@@ -40,6 +40,7 @@ export interface TreeProps {
     estimatedItemSize?: number;
     expandOnClickNode?: boolean;
     onlyExpandOnClickIcon?: boolean;
+    showIcon?: boolean;
 }
 export declare type TreeNodeData = {
     checkable?: boolean;

package/es/tree/treeHooks.js

@@ -74,7 +74,7 @@ export var useExpand = function useExpand(flattenAllData, expandedKeysProps, def
     setExpandedKeys = _React$useState8[1];
   React.useEffect(function () {
     setExpandedKeys(initialExpandedKeys);
-  }, [flattenAllData, expandedKeysProps, searchExpandedKeys, defaultExpandAll, defaultExpandedKeys, defaultExpandRoot, defaultExpandParent]);
+  }, [flattenAllData, expandedKeysProps, searchExpandedKeys, defaultExpandAll, defaultExpandedKeys, defaultExpandRoot, defaultExpandParent, scrollKey]);
   return [expandedKeys, setExpandedKeys];
 };
 export var useScrollToKey = function useScrollToKey(scrollKey, index, estimatedItemSize, scrollRef, viewportHeight, treeNodePrefixCls) {

package/lib/color-picker/color-picker-panel.js

@@ -28,7 +28,7 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
 /* eslint-disable */
 
 var ColorPickerPanel = function ColorPickerPanel(props) {
-  var _context;
+  var _classNames, _context;
   var setCorrectColorValue = props.setCorrectColorValue,
     setInputColorValue = props.setInputColorValue,
     setAlpha = props.setAlpha,
@@ -65,7 +65,7 @@ var ColorPickerPanel = function ColorPickerPanel(props) {
     locale = _useContext.locale;
   var colorPickerPrefixCls = getPrefixCls(prefixCls, 'color-picker');
   var panelCls = (0, _classnames.default)("".concat(colorPickerPrefixCls, "-panel"));
-  var panelChromePickerCls = (0, _classnames.default)("".concat(colorPickerPrefixCls, "-panel-chrome"));
+  var panelChromePickerCls = (0, _classnames.default)("".concat(colorPickerPrefixCls, "-panel-chrome"), (_classNames = {}, (0, _defineProperty2.default)(_classNames, "".concat(colorPickerPrefixCls, "-panel-chrome-no-box"), !(showColorPickerBox === null || showColorPickerBox === void 0 ? void 0 : showColorPickerBox.showBox)), (0, _defineProperty2.default)(_classNames, "".concat(colorPickerPrefixCls, "-panel-chrome-no-hue"), !(showColorPickerBox === null || showColorPickerBox === void 0 ? void 0 : showColorPickerBox.showHue)), (0, _defineProperty2.default)(_classNames, "".concat(colorPickerPrefixCls, "-panel-chrome-no-opacity"), !(showColorPickerBox === null || showColorPickerBox === void 0 ? void 0 : showColorPickerBox.showOpacity)), _classNames));
   var panelFollowThemeCls = (0, _classnames.default)("".concat(colorPickerPrefixCls, "-panel-switch"));
   var panelInputCls = (0, _classnames.default)("".concat(colorPickerPrefixCls, "-panel-input"), (0, _defineProperty2.default)({}, "".concat(colorPickerPrefixCls, "-panel-input-no-recommend"), !showPresetColor));
   var transparentCls = (0, _classnames.default)("".concat(colorPickerPrefixCls, "-panel-transparent"));
@@ -109,19 +109,16 @@ var ColorPickerPanel = function ColorPickerPanel(props) {
     if (value === undefined) {
       setAlphaNoVerifyVal(e.target.value);
       if (regPercentage.test(val)) {
-        console.log(1);
         formatArr = (0, _colorFormat.colorFormat)(correctColorValue, +val.replace('%', '') / 100, 'all', true);
         outValue = formatArr[(0, _colorFormat.valOfCorrespondingType)(currentColorType)].value;
         setPanelState(formatArr, outValue, outValue, +val.replace('%', '') / 100);
         setClickedColorIndex((0, _colorFormat.highlightPresetColorIndex)(formatArr[0].value, (0, _colorFormat.presetColorToHEX)(presetColor || _systemPresetColor.systemPresetColor)));
       } else if (regDot.test(val)) {
-        console.log(2);
         formatArr = (0, _colorFormat.colorFormat)(correctColorValue, +val, 'all', true);
         outValue = formatArr[(0, _colorFormat.valOfCorrespondingType)(currentColorType)].value;
         setPanelState(formatArr, outValue, outValue, (0, _colorFormat.strFixed)(val, 2));
         setClickedColorIndex((0, _colorFormat.highlightPresetColorIndex)(formatArr[0].value, (0, _colorFormat.presetColorToHEX)(presetColor || _systemPresetColor.systemPresetColor)));
       } else {
-        console.log(3);
         formatArr = (0, _colorFormat.colorFormat)(correctColorValue, 1, 'all', true);
         outValue = formatArr[(0, _colorFormat.valOfCorrespondingType)(currentColorType)].value;
         setPanelState(formatArr, outValue, outValue, 1);
@@ -191,7 +188,7 @@ var ColorPickerPanel = function ColorPickerPanel(props) {
   return /*#__PURE__*/_react.default.createElement("div", {
     className: panelCls,
     ref: panelClsRef
-  }, showColorPickerBox && /*#__PURE__*/_react.default.createElement(_reactColor.ChromePicker, {
+  }, /*#__PURE__*/_react.default.createElement(_reactColor.ChromePicker, {
     className: panelChromePickerCls,
     color: colTypeArr[2].value,
     onChange: handleChromeChange

package/lib/color-picker/interface.d.ts

@@ -26,7 +26,11 @@ export interface IColorPickerProps extends PopperProps {
     showPresetColor: boolean;
     placeholder: string;
     presetColor: string[];
-    showColorPickerBox: boolean;
+    showColorPickerBox: {
+        showBox: boolean;
+        showHue: boolean;
+        showOpacity: boolean;
+    };
     defaultOpen: boolean;
     onChange: (inputValue: string, formatColorArr: Array<IColorTypesObj>) => void;
 }
@@ -49,7 +53,11 @@ export interface IColorPickerPanelProps {
     showSwitch?: boolean;
     showColorTransfer?: boolean;
     showPresetColor?: boolean;
-    showColorPickerBox?: boolean;
+    showColorPickerBox?: {
+        showBox?: boolean;
+        showHue?: boolean;
+        showOpacity?: boolean;
+    };
     value: string;
     setCurrentColorType: (currentColorType: IColorTypesObj['type']) => void;
     setColTypeArr: (colTypeArr: Array<IColorTypesObj>) => void;

package/lib/color-picker/style/index.css

@@ -222,6 +222,27 @@
 .kd-color-picker-pop .kd-color-picker-panel-chrome > div:last-child .flexbox-fix:last-child {
   display: none !important;
 }
+.kd-color-picker-pop .kd-color-picker-panel-chrome-no-box > div:first-child {
+  display: none;
+}
+.kd-color-picker-pop .kd-color-picker-panel-chrome-no-hue > div:last-child .flexbox-fix:first-child > div:last-child > div:first-child {
+  display: none;
+}
+.kd-color-picker-pop .kd-color-picker-panel-chrome-no-hue > div:last-child .flexbox-fix:first-child > div:last-child > div:last-child {
+  margin-top: 8px;
+}
+.kd-color-picker-pop .kd-color-picker-panel-chrome-no-opacity > div:last-child .flexbox-fix:first-child > div:last-child > div:last-child {
+  display: none;
+}
+.kd-color-picker-pop .kd-color-picker-panel-chrome-no-opacity > div:last-child .flexbox-fix:first-child > div:last-child > div:first-child {
+  margin-top: 8px;
+}
+.kd-color-picker-pop .kd-color-picker-panel .kd-color-picker-panel-chrome-no-box.kd-color-picker-panel-chrome-no-hue.kd-color-picker-panel-chrome-no-opacity {
+  display: none;
+}
+.kd-color-picker-pop .kd-color-picker-panel .kd-color-picker-panel-chrome-no-hue.kd-color-picker-panel-chrome-no-opacity > div:last-child {
+  display: none;
+}
 .kd-color-picker-pop .kd-color-picker-panel-switch {
   margin: 12px 0 0;
   font-size: 12px;