@kdcloudjs/kdesign 1.7.4 → 1.7.6

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

@@ -15,7 +15,7 @@ import { ChromePicker } from 'react-color';
 import devWarning from '../_utils/devwarning';
 import useOnClickOutside from './utils/hooks/useOnClickOutside';
 var ColorPickerPanel = function ColorPickerPanel(props) {
-  var _context;
+  var _classNames, _context;
   var setCorrectColorValue = props.setCorrectColorValue,
     setInputColorValue = props.setInputColorValue,
     setAlpha = props.setAlpha,
@@ -52,7 +52,7 @@ var ColorPickerPanel = function ColorPickerPanel(props) {
     locale = _useContext.locale;
   var colorPickerPrefixCls = getPrefixCls(prefixCls, 'color-picker');
   var panelCls = classNames("".concat(colorPickerPrefixCls, "-panel"));
-  var panelChromePickerCls = classNames("".concat(colorPickerPrefixCls, "-panel-chrome"));
+  var panelChromePickerCls = classNames("".concat(colorPickerPrefixCls, "-panel-chrome"), (_classNames = {}, _defineProperty(_classNames, "".concat(colorPickerPrefixCls, "-panel-chrome-no-box"), !(showColorPickerBox === null || showColorPickerBox === void 0 ? void 0 : showColorPickerBox.showBox)), _defineProperty(_classNames, "".concat(colorPickerPrefixCls, "-panel-chrome-no-hue"), !(showColorPickerBox === null || showColorPickerBox === void 0 ? void 0 : showColorPickerBox.showHue)), _defineProperty(_classNames, "".concat(colorPickerPrefixCls, "-panel-chrome-no-opacity"), !(showColorPickerBox === null || showColorPickerBox === void 0 ? void 0 : showColorPickerBox.showOpacity)), _classNames));
   var panelFollowThemeCls = classNames("".concat(colorPickerPrefixCls, "-panel-switch"));
   var panelInputCls = classNames("".concat(colorPickerPrefixCls, "-panel-input"), _defineProperty({}, "".concat(colorPickerPrefixCls, "-panel-input-no-recommend"), !showPresetColor));
   var transparentCls = classNames("".concat(colorPickerPrefixCls, "-panel-transparent"));
@@ -96,19 +96,16 @@ var ColorPickerPanel = function ColorPickerPanel(props) {
     if (value === undefined) {
       setAlphaNoVerifyVal(e.target.value);
       if (regPercentage.test(val)) {
-        console.log(1);
         formatArr = colorFormat(correctColorValue, +val.replace('%', '') / 100, 'all', true);
         outValue = formatArr[valOfCorrespondingType(currentColorType)].value;
         setPanelState(formatArr, outValue, outValue, +val.replace('%', '') / 100);
         setClickedColorIndex(highlightPresetColorIndex(formatArr[0].value, presetColorToHEX(presetColor || systemPresetColor)));
       } else if (regDot.test(val)) {
-        console.log(2);
         formatArr = colorFormat(correctColorValue, +val, 'all', true);
         outValue = formatArr[valOfCorrespondingType(currentColorType)].value;
         setPanelState(formatArr, outValue, outValue, strFixed(val, 2));
         setClickedColorIndex(highlightPresetColorIndex(formatArr[0].value, presetColorToHEX(presetColor || systemPresetColor)));
       } else {
-        console.log(3);
         formatArr = colorFormat(correctColorValue, 1, 'all', true);
         outValue = formatArr[valOfCorrespondingType(currentColorType)].value;
         setPanelState(formatArr, outValue, outValue, 1);
@@ -178,7 +175,7 @@ var ColorPickerPanel = function ColorPickerPanel(props) {
   return /*#__PURE__*/React.createElement("div", {
     className: panelCls,
     ref: panelClsRef
-  }, showColorPickerBox && /*#__PURE__*/React.createElement(ChromePicker, {
+  }, /*#__PURE__*/React.createElement(ChromePicker, {
     className: panelChromePickerCls,
     color: colTypeArr[2].value,
     onChange: handleChromeChange

package/es/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/es/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;

package/es/color-picker/style/index.less

@@ -5,253 +5,300 @@
 @color-picker-prefix-cls: ~'@{kd-prefix}-color-picker';
 
 .@{color-picker-prefix-cls}-container {
-    position: relative;
-
-    .@{color-picker-prefix-cls}-input {
-        width: @color-picker-input-sizing-width;
-        height: @color-picker-input-sizing-height;
-        border-bottom: 1px solid rgba(217, 217, 217, 1);
-        font-size: @color-picker-input-font-size;
-    }
-
-    .@{color-picker-prefix-cls}-icon-container {
-        position: absolute;
-        top: 3px;
-        right: 6px;
-        cursor: pointer;
-
-        .@{color-picker-prefix-cls}-icon {
-            width: @color-picker-input-suffix-sizing-width;
-            height: @color-picker-input-suffix-sizing-height;
-            border: 1px solid rgba(0, 0, 0, 0.05);
-            border-radius: 2px;
-            line-height: 18px;
-            text-align: center;
-            color: @bg;
-
-            &-underline {
-                margin-right: -6px;
-            }
-
-            &-up {
-                .kdicon-arrow-down {
-                    transform: rotate(180deg);
-                    transition: transform @transition-duration-quickly ease-in-out;
-                }
-            }
+  position: relative;
+
+  .@{color-picker-prefix-cls}-input {
+    width: @color-picker-input-sizing-width;
+    height: @color-picker-input-sizing-height;
+    border-bottom: 1px solid rgba(217, 217, 217, 1);
+    font-size: @color-picker-input-font-size;
+  }
+
+  .@{color-picker-prefix-cls}-icon-container {
+    position: absolute;
+    top: 3px;
+    right: 6px;
+    cursor: pointer;
+
+    .@{color-picker-prefix-cls}-icon {
+      width: @color-picker-input-suffix-sizing-width;
+      height: @color-picker-input-suffix-sizing-height;
+      border: 1px solid rgba(0, 0, 0, 0.05);
+      border-radius: 2px;
+      line-height: 18px;
+      text-align: center;
+      color: @bg;
+
+      &-underline {
+        margin-right: -6px;
+      }
+
+      &-up {
+        .kdicon-arrow-down {
+          transform: rotate(180deg);
+          transition: transform @transition-duration-quickly ease-in-out;
+        }
+      }
 
-            &-down {
-                .kdicon-arrow-down {
-                    transform: rotate(0deg);
-                    transition: transform @transition-duration-quickly ease-in-out;
-                }
-            }
+      &-down {
+        .kdicon-arrow-down {
+          transform: rotate(0deg);
+          transition: transform @transition-duration-quickly ease-in-out;
         }
+      }
     }
+  }
 
 }
 
 .@{color-picker-prefix-cls}-pop {
 
-    &.topLeft.hidden,
-    &.bottomLeft.hidden,
-    &.topRight.hidden,
-    &.bottomRight.hidden {
-        opacity: 0;
-        visibility: hidden;
-        transition: all calc(@transition-duration - 0.1s) @ease;
-    }
+  &.topLeft.hidden,
+  &.bottomLeft.hidden,
+  &.topRight.hidden,
+  &.bottomRight.hidden {
+    opacity: 0;
+    visibility: hidden;
+    transition: all calc(@transition-duration - 0.1s) @ease;
+  }
+
+  .@{color-picker-prefix-cls}-panel {
+    box-sizing: border-box;
+    width: @color-picker-panel-sizing-width;
+    padding: 4px 12px 16px;
+    background: #FFFFFF;
+    box-shadow: 0 4px 12px 0 rgba(0, 0, 0, 0.15);
+    border-radius: 2px;
+    transform-origin: top left;
+    z-index: @color-picker-panel-z-index;
+
+    &-chrome {
+      width: 278px !important;
+      margin-top: 12px;
+      box-shadow: none !important;
+
+      &>div:last-child {
+        padding: 9px 0 4px !important;
+
+        .flexbox-fix:first-child {
+          display: flex;
+          flex-direction: row-reverse;
+
+          &>div:first-child {
+            &>div {
+              width: 28px !important;
+              height: 28px !important;
+              border-radius: 50% !important;
+              margin-top: -1px !important;
+              margin-left: 4px !important;
+            }
+          }
 
-    .@{color-picker-prefix-cls}-panel {
-        box-sizing: border-box;
-        width: @color-picker-panel-sizing-width;
-        padding: 4px 12px 16px;
-        background: #FFFFFF;
-        box-shadow: 0 4px 12px 0 rgba(0, 0, 0, 0.15);
-        border-radius: 2px;
-        transform-origin: top left;
-        z-index: @color-picker-panel-z-index;
+          &>div:last-child {
 
-        &-chrome {
-            width: 278px !important;
-            margin-top: 12px;
-            box-shadow: none !important;
+            .hue-horizontal {
+              width: 240px !important;
+              height: 12px !important;
+              border-radius: 6px !important;
+              padding: unset !important;
+
+              &>div>div {
+                margin-top: 1px;
+              }
+            }
 
             &>div:last-child {
-                padding: 9px 0 4px !important;
-
-                .flexbox-fix:first-child {
-                    display: flex;
-                    flex-direction: row-reverse;
-
-                    &>div:first-child {
-                        &>div {
-                            width: 28px !important;
-                            height: 28px !important;
-                            border-radius: 50% !important;
-                            margin-top: -1px !important;
-                            margin-left: 4px !important;
-                        }
-                    }
-
-                    &>div:last-child {
-
-                        .hue-horizontal {
-                            width: 240px !important;
-                            height: 12px !important;
-                            border-radius: 6px !important;
-                            padding: unset !important;
-
-                            &>div>div {
-                                margin-top: 1px;
-                            }
-                        }
-
-                        &>div:last-child {
-                            &>div {
-                                width: 240px !important;
-                                height: 12px !important;
-                                margin: unset;
-
-                                &>div:first-child {
-                                    border-radius: 6px !important;
-                                }
-
-                                &>div:nth-child(2) {
-                                    border-radius: 6px !important;
-                                }
-
-                                &>div:last-child {
-                                    margin: unset !important;
-
-                                    &>div>div {
-                                        margin-top: 1px;
-                                    }
-                                }
-                            }
-                        }
-                    }
+              &>div {
+                width: 240px !important;
+                height: 12px !important;
+                margin: unset;
 
+                &>div:first-child {
+                  border-radius: 6px !important;
                 }
 
-                .flexbox-fix:last-child {
-                    display: none !important;
+                &>div:nth-child(2) {
+                  border-radius: 6px !important;
+                }
+
+                &>div:last-child {
+                  margin: unset !important;
+
+                  &>div>div {
+                    margin-top: 1px;
+                  }
                 }
+              }
             }
+          }
 
         }
 
-        &-switch {
-            margin: 12px 0 0;
-            font-size: 12px;
-            color: #666666;
-            letter-spacing: 0;
-            line-height: 16px;
-            font-weight: 400;
-
-            span {
-                vertical-align: middle;
-                margin-right: 9px;
-            }
+        .flexbox-fix:last-child {
+          display: none !important;
+        }
+      }
+
+      &-no-box {
+        &>div:first-child {
+          display: none;
         }
+      }
 
-        &-input {
-            display: inline-block;
-            position: relative;
-            margin-top: 12px;
-            font-size: @color-picker-panel-select-font-size;
+      &-no-hue {
+        &>div:last-child {
+          .flexbox-fix:first-child {
+            &>div:last-child {
+              &>div:first-child {
+                display: none;
+              }
 
-            &-no-recommend {
-                margin-bottom: 8px;
+              &>div:last-child {
+                margin-top: 8px;
+              }
             }
+          }
+        }
+      }
 
-            .@{kd-prefix}-select {
-
-                &.bottomLeft,
-                &.topLeft {
-                    position: absolute;
-                    width: 60px !important;
-                    background: #FFFFFF;
-                    right: 0;
-                    left: unset !important;
-                    box-shadow: 0 4px 10px 0 rgba(0, 0, 0, 0.20);
-                    border-radius: 2px;
-                }
+      &-no-opacity {
+        &>div:last-child {
+          .flexbox-fix:first-child {
+            &>div:last-child {
+              &>div:last-child {
+                display: none;
+              }
 
-                .@{kd-prefix}-select-dropdown {
-                    .@{kd-prefix}-select-item-option {
-                        display: flex;
-                        justify-content: center;
-                        min-width: unset;
-                    }
-                }
+              &>div:first-child {
+                margin-top: 8px;
+              }
             }
+          }
+        }
+      }
+    }
 
-            .@{kd-prefix}-select-bordered {
-                border-radius: 2px;
-                width: @color-picker-panel-select-sizing-width;
-                height: @color-picker-panel-select-sizing-height;
-                min-height: 28px;
-                margin-top: -2px;
+    .@{color-picker-prefix-cls}-panel-chrome-no-box.@{color-picker-prefix-cls}-panel-chrome-no-hue.@{color-picker-prefix-cls}-panel-chrome-no-opacity {
+      display: none;
+    }
 
-                .@{kd-prefix}-select-placeholder {
-                    left: 8px;
-                }
-            }
+    .@{color-picker-prefix-cls}-panel-chrome-no-hue.@{color-picker-prefix-cls}-panel-chrome-no-opacity {
+      &>div:last-child {
+        display: none;
+      }
+    }
 
-            .active-option {
-                background-color: #E3EBFF;
-            }
+    &-switch {
+      margin: 12px 0 0;
+      font-size: 12px;
+      color: #666666;
+      letter-spacing: 0;
+      line-height: 16px;
+      font-weight: 400;
+
+      span {
+        vertical-align: middle;
+        margin-right: 9px;
+      }
+    }
+
+    &-input {
+      display: inline-block;
+      position: relative;
+      margin-top: 12px;
+      font-size: @color-picker-panel-select-font-size;
+
+      &-no-recommend {
+        margin-bottom: 8px;
+      }
+
+      .@{kd-prefix}-select {
+
+        &.bottomLeft,
+        &.topLeft {
+          position: absolute;
+          width: 60px !important;
+          background: #FFFFFF;
+          right: 0;
+          left: unset !important;
+          box-shadow: 0 4px 10px 0 rgba(0, 0, 0, 0.20);
+          border-radius: 2px;
         }
 
-        &-transparent {
-            width: 60px;
-            height: 28px;
-            margin-left: 8px;
-            text-align: center;
-            font-size: @color-picker-panel-alpha-font-size;
+        .@{kd-prefix}-select-dropdown {
+          .@{kd-prefix}-select-item-option {
+            display: flex;
+            justify-content: center;
+            min-width: unset;
+          }
         }
+      }
 
-        &-colorDivContainer {
-            display: grid;
-            grid-template-columns: repeat(12, 1fr);
-            grid-column-gap: 8px;
-            grid-row-gap: 8px;
-            margin-top: 12px;
-
-            li {
-                position: relative;
-                box-sizing: border-box;
-                width: @color-picker-panel-preset-sizing-width;
-                height: @color-picker-panel-preset-sizing-height;
-                border: 1px solid rgba(0, 0, 0, 0.05);
-                border-radius: 2px;
-                list-style: none;
-                cursor: pointer;
-
-                .square {
-                    display: none;
-                    position: absolute;
-                    box-sizing: inherit;
-                    top: -3px;
-                    left: -3px;
-                    width: calc(@color-picker-panel-preset-sizing-width + 4px);
-                    height: calc(@color-picker-panel-preset-sizing-height + 4px);
-                    border: 1px solid rgba(178, 178, 176, 1);
-                    border-radius: 4px;
-
-                    &-click {
-                        display: block;
-                        box-shadow: 0 0 0 1px #e5e5e5 !important;
-                    }
-                }
+      .@{kd-prefix}-select-bordered {
+        border-radius: 2px;
+        width: @color-picker-panel-select-sizing-width;
+        height: @color-picker-panel-select-sizing-height;
+        min-height: 28px;
+        margin-top: -2px;
 
-                &:hover {
-                    .square {
-                        display: block;
-                    }
-                }
-            }
+        .@{kd-prefix}-select-placeholder {
+          left: 8px;
         }
+      }
+
+      .active-option {
+        background-color: #E3EBFF;
+      }
+    }
+
+    &-transparent {
+      width: 60px;
+      height: 28px;
+      margin-left: 8px;
+      text-align: center;
+      font-size: @color-picker-panel-alpha-font-size;
+    }
+
+    &-colorDivContainer {
+      display: grid;
+      grid-template-columns: repeat(12, 1fr);
+      grid-column-gap: 8px;
+      grid-row-gap: 8px;
+      margin-top: 12px;
+
+      li {
+        position: relative;
+        box-sizing: border-box;
+        width: @color-picker-panel-preset-sizing-width;
+        height: @color-picker-panel-preset-sizing-height;
+        border: 1px solid rgba(0, 0, 0, 0.05);
+        border-radius: 2px;
+        list-style: none;
+        cursor: pointer;
+
+        .square {
+          display: none;
+          position: absolute;
+          box-sizing: inherit;
+          top: -3px;
+          left: -3px;
+          width: calc(@color-picker-panel-preset-sizing-width + 4px);
+          height: calc(@color-picker-panel-preset-sizing-height + 4px);
+          border: 1px solid rgba(178, 178, 176, 1);
+          border-radius: 4px;
+
+          &-click {
+            display: block;
+            box-shadow: 0 0 0 1px #e5e5e5 !important;
+          }
+        }
+
+        &:hover {
+          .square {
+            display: block;
+          }
+        }
+      }
     }
-}
+  }
+}

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

@@ -71,6 +71,11 @@ declare const compDefaultProps: {
         placeholder: string;
         showColorTransfer: boolean;
         showPresetColor: boolean;
+        showColorPickerBox: {
+            showBox: boolean;
+            showHue: boolean;
+            showOpacity: boolean;
+        };
     };
     Checkbox: {
         defaultChecked: boolean;

package/es/config-provider/compDefaultProps.js

@@ -75,7 +75,12 @@ var compDefaultProps = {
     },
     placeholder: '#',
     showColorTransfer: true,
-    showPresetColor: true
+    showPresetColor: true,
+    showColorPickerBox: {
+      showBox: false,
+      showHue: false,
+      showOpacity: false
+    }
   },
   Checkbox: {
     defaultChecked: false,

package/es/dropdown/dropdown.js

@@ -52,7 +52,9 @@ var Dropdown = /*#__PURE__*/React.forwardRef(function (props, ref) {
     selectedKey = _React$useState4[0],
     setSelectedKey = _React$useState4[1];
   React.useEffect(function () {
-    setSelectedKey(props.selectedKey);
+    if (typeof props.selectedKey !== 'undefined') {
+      setSelectedKey(props.selectedKey);
+    }
   }, [props.selectedKey]);
   var menuSelectable = ((_b = menu.props) === null || _b === void 0 ? void 0 : _b.selectable) === undefined ? selectable : (_c = menu.props) === null || _c === void 0 ? void 0 : _c.selectable;
   var handleItemClick = function handleItemClick(e) {

package/es/form/Field.js

@@ -289,6 +289,7 @@ var Field = function Field(props) {
   }, _mapInstanceProperty(childrenArray).call(childrenArray, function (child, index) {
     var keys = mergeProps(_extends(_extends({}, generateEventHandler(handleValueValidate, validateTrigger)), {
       key: index,
+      status: typeof validateMessage !== 'undefined' ? 'error' : undefined,
       id: customizeHtmlFor ? undefined : htmlFor
     }), child);
     return child ? /*#__PURE__*/React.cloneElement(child, keys) : child;

package/es/input/ClearableLabeledInput.d.ts

@@ -22,6 +22,7 @@ interface ClearableInputProps {
     addonAfter?: React.ReactNode;
     numberMark?: React.ReactNode;
     inputCount?: React.ReactNode;
+    status?: 'error';
 }
 declare const ClearableInput: React.FC<ClearableInputProps>;
 export default ClearableInput;