@kdcloudjs/kdesign 1.8.29 → 1.8.31

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

@@ -98,13 +98,13 @@
     box-sizing: border-box;
     width: @color-picker-panel-sizing-width;
     padding: 4px 12px 16px;
-    background: #FFFFFF;
+    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 {
+    & > div {
       margin-top: 12px;
     }
 
@@ -174,15 +174,15 @@
       width: 278px !important;
       box-shadow: none !important;
 
-      &>div:last-child {
+      & > div:last-child {
         padding: 9px 0 4px !important;
 
         .flexbox-fix:first-child {
           display: flex;
           flex-direction: row-reverse;
 
-          &>div:first-child {
-            &>div {
+          & > div:first-child {
+            & > div {
               width: 28px !important;
               height: 28px !important;
               border-radius: 50% !important;
@@ -191,44 +191,42 @@
             }
           }
 
-          &>div:last-child {
-
+          & > div:last-child {
             .hue-horizontal {
               width: 240px !important;
               height: 12px !important;
               border-radius: 6px !important;
               padding: unset !important;
 
-              &>div>div {
+              & > div > div {
                 margin-top: 1px;
               }
             }
 
-            &>div:last-child {
-              &>div {
+            & > div:last-child {
+              & > div {
                 width: 240px !important;
                 height: 12px !important;
                 margin: unset;
 
-                &>div:first-child {
+                & > div:first-child {
                   border-radius: 6px !important;
                 }
 
-                &>div:nth-child(2) {
+                & > div:nth-child(2) {
                   border-radius: 6px !important;
                 }
 
-                &>div:last-child {
+                & > div:last-child {
                   margin: unset !important;
 
-                  &>div>div {
+                  & > div > div {
                     margin-top: 1px;
                   }
                 }
               }
             }
           }
-
         }
 
         .flexbox-fix:last-child {
@@ -237,20 +235,20 @@
       }
 
       &-no-box {
-        &>div:first-child {
+        & > div:first-child {
           display: none;
         }
       }
 
       &-no-hue {
-        &>div:last-child {
+        & > div:last-child {
           .flexbox-fix:first-child {
-            &>div:last-child {
-              &>div:first-child {
+            & > div:last-child {
+              & > div:first-child {
                 display: none;
               }
 
-              &>div:last-child {
+              & > div:last-child {
                 margin-top: 8px;
               }
             }
@@ -259,14 +257,14 @@
       }
 
       &-no-opacity {
-        &>div:last-child {
+        & > div:last-child {
           .flexbox-fix:first-child {
-            &>div:last-child {
-              &>div:last-child {
+            & > div:last-child {
+              & > div:last-child {
                 display: none;
               }
 
-              &>div:first-child {
+              & > div:first-child {
                 margin-top: 8px;
               }
             }
@@ -280,7 +278,7 @@
     }
 
     .@{color-picker-prefix-cls}-panel-chrome-no-hue.@{color-picker-prefix-cls}-panel-chrome-no-opacity {
-      &>div:last-child {
+      & > div:last-child {
         display: none;
       }
     }
@@ -334,10 +332,10 @@
             position: absolute;
             width: 64px !important;
             min-width: unset !important;
-            background: #FFFFFF;
+            background: #ffffff;
             right: 0;
             left: unset !important;
-            box-shadow: 0 4px 10px 0 rgba(0, 0, 0, 0.20);
+            box-shadow: 0 4px 10px 0 rgba(0, 0, 0, 0.2);
             border-radius: 2px;
           }
 
@@ -441,7 +439,7 @@
               margin-right: 0;
             }
 
-            &:nth-child(-n+12) {
+            &:nth-child(-n + 12) {
               margin-top: 0;
             }
           }
@@ -510,7 +508,7 @@
               margin-right: 0;
             }
 
-            &:nth-child(-n+12) {
+            &:nth-child(-n + 12) {
               margin-top: 0;
             }
           }
@@ -553,3 +551,150 @@
     }
   }
 }
+
+.@{color-picker-prefix-cls}-rtl {
+  direction: rtl;
+  .@{color-picker-prefix-cls}-input {
+    .@{kd-prefix}-input-prefix {
+      margin-right: auto;
+      margin-left: 3px;
+    }
+  }
+  &.@{color-picker-prefix-cls}-pop {
+    .@{color-picker-prefix-cls}-panel {
+      transform-origin: top left;
+      &-clear {
+        &-box {
+          margin-left: 4px;
+        }
+      }
+      &-switch {
+        span {
+          vertical-align: middle;
+          margin-right: 9px;
+        }
+      }
+
+      &-container {
+        display: flex;
+        flex-wrap: nowrap;
+
+        &-select {
+          margin-left: 8px;
+          margin-right: 0;
+          .@{kd-prefix}-select-bordered {
+            border-radius: 2px;
+            width: @color-picker-panel-select-sizing-width;
+            height: @color-picker-panel-select-sizing-height;
+            min-height: 28px;
+            padding: 0 28px 0 0;
+          }
+
+          .active-option {
+            background-color: @color-picker-panel-option-color-background;
+          }
+        }
+
+        &-input {
+          height: 28px;
+          flex: 1 1 auto;
+          padding: 0 8px;
+        }
+
+        &-input-group {
+          display: flex;
+          align-items: center;
+
+          &-item {
+            height: 28px;
+            flex: 1;
+
+            &.active {
+              z-index: 2;
+            }
+
+            &:first-child {
+              border-top-right-radius: 0;
+              border-bottom-right-radius: 0;
+              z-index: 1;
+            }
+
+            &:nth-child(2) {
+              margin-right: -1px;
+              margin-left: -1px;
+              border-radius: 0;
+
+              &:hover {
+                z-index: 1;
+              }
+            }
+
+            &:last-child {
+              border-top-left-radius: 0;
+              border-bottom-left-radius: 0;
+            }
+          }
+        }
+
+        &-transparent {
+          flex: 0 0 54px;
+          height: 28px;
+          margin-right: 8px;
+          margin-left: 0;
+          padding: 0;
+          text-align: center;
+          font-size: @color-picker-panel-alpha-font-size;
+        }
+      }
+
+      &-historical-color-box {
+        &-title {
+          font-size: 12px;
+          color: #666666;
+          line-height: 18px;
+          font-weight: 400;
+          margin-bottom: 8px;
+        }
+
+        &-container {
+          display: grid;
+          grid-template-columns: repeat(12, 1fr);
+          grid-column-gap: 8px;
+          grid-row-gap: 8px;
+
+          &-ie11 {
+            display: flex;
+            flex-wrap: wrap;
+
+            li {
+              margin-right: 8px;
+              margin-top: 8px;
+
+              &:nth-child(12n) {
+                margin-right: 0;
+              }
+
+              &:nth-child(-n + 12) {
+                margin-top: 0;
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+  .@{color-picker-prefix-cls}-panel {
+    &-chrome {
+      & > div:last-child {
+        .flexbox-fix:first-child {
+          & > div:first-child {
+            & > div {
+              margin-right: 4px !important;
+              margin-left: 0 !important;
+            }
+          }
+        }
+      }
+    }
+  }
+}

package/lib/config-provider/ConfigContext.d.ts

@@ -1,5 +1,7 @@
 /// <reference types="react" />
 import { LocaleConfigType, CompLangMsgParams, ComponentType } from '../locale';
+export declare const DirectionTypes: ["ltr", "rtl"];
+export declare type DirectionType = typeof DirectionTypes[number];
 interface IntlUniversal {
     getCompLangMsg: (compLangMsgParams: CompLangMsgParams, customGetLangMsg?: (componentName: string, labelName: string, params: any) => any) => any;
     getLangMsg: (componentName: ComponentType | string, labelName: string, params?: any) => string | React.ReactNode[];
@@ -10,6 +12,7 @@ export interface IConfigProps {
     prefixCls?: string;
     localeConfig?: LocaleConfigType;
     locale?: IntlUniversal;
+    direction?: DirectionType;
 }
 export interface IContextConfigProps {
     getPrefixCls?: (configPrefixCls?: string, suffixCls?: string, customizePrefixCls?: string) => string;
@@ -17,6 +20,7 @@ export interface IContextConfigProps {
     prefixCls?: string;
     localeConfig?: LocaleConfigType;
     locale: IntlUniversal;
+    direction?: DirectionType;
 }
 declare const ConfigContext: import("react").Context<IContextConfigProps>;
 export default ConfigContext;

package/lib/config-provider/ConfigContext.js

@@ -4,9 +4,12 @@ var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequ
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = void 0;
+exports.default = exports.DirectionTypes = void 0;
 var _react = require("react");
 var _defaultConfig = _interopRequireDefault(require("./defaultConfig"));
+var _type = require("../_utils/type");
+var DirectionTypes = (0, _type.tuple)('ltr', 'rtl');
+exports.DirectionTypes = DirectionTypes;
 var ConfigContext = (0, _react.createContext)(_defaultConfig.default);
 var _default = ConfigContext;
 exports.default = _default;

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

@@ -351,7 +351,6 @@ declare const compDefaultProps: {
         disabled: boolean;
         draggable: boolean;
         virtual: boolean;
-        switcherIcon: () => JSX.Element;
         estimatedItemSize: number;
         expandOnClickNode: boolean;
         expandOnFilterNode: boolean;

package/lib/config-provider/compDefaultProps.js

@@ -365,11 +365,6 @@ var compDefaultProps = {
     disabled: false,
     draggable: false,
     virtual: true,
-    switcherIcon: function switcherIcon() {
-      return React.createElement(_index.Icon, {
-        type: "arrow-right-solid"
-      });
-    },
     estimatedItemSize: 32,
     expandOnClickNode: true,
     expandOnFilterNode: false

package/lib/config-provider/defaultConfig.d.ts

@@ -6,5 +6,6 @@ declare const defaultConfig: {
         getLangMsg: (componentName: string, labelName: string, params?: any) => string | import("react").ReactNode[];
         getCompLangMsg: (compLangMsgParams: import("../locale").CompLangMsgParams, customGetLangMsg?: ((componentName: string, labelName: string, params: any) => any) | undefined, localeDate?: any) => any;
     };
+    direction: "ltr" | "rtl";
 };
 export default defaultConfig;

package/lib/config-provider/defaultConfig.js

@@ -19,7 +19,8 @@ var defaultConfig = {
   locale: {
     getLangMsg: _locale.getLangMsg,
     getCompLangMsg: _locale.getCompLangMsg
-  }
+  },
+  direction: 'ltr'
 };
 var _default = defaultConfig;
 exports.default = _default;

package/lib/dropdown/dropdown.js

@@ -33,7 +33,8 @@ var Dropdown = React.forwardRef(function (props, ref) {
   var _React$useContext = React.useContext(_ConfigContext.default),
     getPrefixCls = _React$useContext.getPrefixCls,
     pkgPrefixCls = _React$useContext.prefixCls,
-    userDefaultProps = _React$useContext.compDefaultProps;
+    userDefaultProps = _React$useContext.compDefaultProps,
+    direction = _React$useContext.direction;
   var allProps = (0, _utils.getCompProps)('Dropdown', userDefaultProps, props);
   var menu = allProps.menu,
     disabled = allProps.disabled,
@@ -144,7 +145,8 @@ var Dropdown = React.forwardRef(function (props, ref) {
     popperStyle: innerAnimation ? popperStyle : (0, _extends2.default)({
       animation: 'none'
     }, popperStyle),
-    onVisibleChange: handleVisibleChange
+    onVisibleChange: handleVisibleChange,
+    placement: direction === 'rtl' ? 'bottomRight' : 'bottomLeft'
   });
   return (0, _usePopper.default)(child, menuElement, popperProps);
 });

package/lib/dropdown/menu.js

@@ -30,7 +30,8 @@ var Menu = React.forwardRef(function (props, ref) {
   var _React$useContext = React.useContext(_configProvider.ConfigContext),
     getPrefixCls = _React$useContext.getPrefixCls,
     pkgPrefixCls = _React$useContext.prefixCls,
-    userDefaultProps = _React$useContext.compDefaultProps;
+    userDefaultProps = _React$useContext.compDefaultProps,
+    direction = _React$useContext.direction;
   var _a = (0, _utils.getCompProps)('DropdownMenu', userDefaultProps, props),
     customPrefixcls = _a.prefixCls,
     children = _a.children,
@@ -39,6 +40,7 @@ var Menu = React.forwardRef(function (props, ref) {
     className = _a.className,
     restProps = __rest(_a, ["prefixCls", "children", "selectable", "selectedKey", "className"]);
   var prefixCls = getPrefixCls(pkgPrefixCls, 'dropdown-menu', customPrefixcls);
+  var rtlCls = direction === 'rtl' ? "".concat(prefixCls, "-rtl") : null;
   var cloneItem = function cloneItem(item, index) {
     if (!React.isValidElement(item)) {
       return item;
@@ -52,7 +54,7 @@ var Menu = React.forwardRef(function (props, ref) {
     });
   };
   return React.createElement("ul", (0, _extends2.default)({
-    className: (0, _classnames.default)(prefixCls, className),
+    className: (0, _classnames.default)(prefixCls, rtlCls, className),
     role: "menu"
   }, restProps, {
     ref: ref

package/lib/dropdown/style/index.css

@@ -267,3 +267,6 @@
   -webkit-line-clamp: 2;
   -webkit-box-orient: vertical;
 }
+.kd-dropdown .kd-dropdown-menu-rtl {
+  direction: rtl;
+}

package/lib/dropdown/style/index.less

@@ -110,4 +110,8 @@
       }
     }
   }
+
+  .@{dropdown-prefix-cls}-menu-rtl {
+    direction: rtl;
+  }
 }

package/lib/image/preview.js

@@ -29,7 +29,8 @@ var Preview = function Preview(props) {
     getPrefixCls = _React$useContext.getPrefixCls,
     pkgPrefixCls = _React$useContext.prefixCls,
     userDefaultProps = _React$useContext.compDefaultProps,
-    locale = _React$useContext.locale;
+    locale = _React$useContext.locale,
+    direction = _React$useContext.direction;
   var allProps = (0, _utils.getCompProps)('Image', userDefaultProps, props);
   var imageLangMsg = locale.getCompLangMsg({
     componentName: 'Image'
@@ -46,6 +47,7 @@ var Preview = function Preview(props) {
     operations = allProps.operations,
     customPrefixcls = allProps.prefixCls;
   var prefixCls = getPrefixCls(pkgPrefixCls, 'image', customPrefixcls);
+  var rtlCls = direction === 'rtl' ? "".concat(prefixCls, "-rtl") : null;
   var _React$useState = React.useState(visible),
     _React$useState2 = (0, _slicedToArray2.default)(_React$useState, 2),
     show = _React$useState2[0],
@@ -118,7 +120,7 @@ var Preview = function Preview(props) {
     }
   };
   var peviewContainer = React.createElement("div", {
-    className: (0, _classnames.default)("".concat(prefixCls, "-preview"), props.className, {
+    className: (0, _classnames.default)("".concat(prefixCls, "-preview"), rtlCls, props.className, {
       show: show
     }),
     style: (0, _extends2.default)({}, props.style)
@@ -136,7 +138,7 @@ var Preview = function Preview(props) {
   }, React.createElement("img", (0, _extends2.default)({}, previewImgProps)))), React.createElement("div", {
     className: "".concat(prefixCls, "-preview-action")
   }, props.type !== 'upload' && length && React.createElement(_icon.default, {
-    type: "arrow-left",
+    type: direction === 'rtl' ? 'arrow-right' : 'arrow-left',
     className: (0, _classnames.default)({
       disabled: current <= 0
     }),
@@ -154,7 +156,7 @@ var Preview = function Preview(props) {
     }),
     onClick: handleZoomIn
   }), props.type !== 'upload' && operations, props.type !== 'upload' && length && React.createElement(_icon.default, {
-    type: "arrow-right",
+    type: direction === 'rtl' ? 'arrow-left' : 'arrow-right',
     className: (0, _classnames.default)({
       disabled: current >= length - 1
     }),

package/lib/image/style/index.css

@@ -331,3 +331,14 @@
   margin-right: 2px;
   font-size: 18px;
 }
+.kd-image-rtl {
+  direction: rtl;
+}
+.kd-image-rtl .kd-image-preview-close {
+  left: 18px;
+  right: auto;
+}
+.kd-image-rtl .kd-image-preview-action i:not(:first-child) {
+  margin-right: 20px;
+  margin-left: 0;
+}

package/lib/image/style/index.less

@@ -44,7 +44,7 @@
     transition: all 0.2s ease-out;
     background-color: @image-action-background-color;
 
-    >* {
+    > * {
       color: @image-icon-color;
       cursor: pointer;
       display: inline-block;
@@ -67,14 +67,14 @@
   opacity: 0;
   transform: scale(0.15);
   visibility: hidden;
-  transition: all 0.2s cubic-bezier(0.4,0,1,0.6);
+  transition: all 0.2s cubic-bezier(0.4, 0, 1, 0.6);
   -webkit-overflow-scrolling: touch;
 
   &.show {
     opacity: 1;
     transform: scale(1);
     visibility: visible;
-    transition: all 0.2s cubic-bezier(0,.4,.4,1);
+    transition: all 0.2s cubic-bezier(0, 0.4, 0.4, 1);
   }
 
   &-mask {
@@ -208,7 +208,7 @@
       position: absolute;
       right: 40px;
 
-      >* {
+      > * {
         display: inline-block;
         margin-left: 20px;
         cursor: pointer;
@@ -221,3 +221,19 @@
     }
   }
 }
+
+.@{image-prefix-cls}-rtl {
+  direction: rtl;
+  .@{image-preview-prefix-cls}-close {
+    left: 18px;
+    right: auto;
+  }
+  .@{image-preview-prefix-cls}-action {
+    i {
+      &:not(:first-child) {
+        margin-right: 20px;
+        margin-left: 0;
+      }
+    }
+  }
+}

package/lib/input/ClearableLabeledInput.d.ts

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

package/lib/input/ClearableLabeledInput.js

@@ -42,12 +42,14 @@ var ClearableInput = function ClearableInput(props) {
     numberMark = props.numberMark,
     inputCount = props.inputCount,
     count = props.count,
-    status = props.status;
+    status = props.status,
+    direction = props.direction;
   var fixRef = (0, _react.useRef)(null);
   var _useState = (0, _react.useState)(false),
     _useState2 = (0, _slicedToArray2.default)(_useState, 2),
     isMouseEnter = _useState2[0],
     setIsMouseEnter = _useState2[1];
+  var rtlCls = direction === 'rtl' ? "".concat(prefixCls, "-rtl") : null;
   var mouseEnterHandle = function mouseEnterHandle() {
     setIsMouseEnter(true);
   };
@@ -101,7 +103,7 @@ var ClearableInput = function ClearableInput(props) {
       className: "".concat(prefixCls, "-prefix"),
       onMouseDown: mouseDownHandle
     }, prefix) : null;
-    var inputWrapperClasses = (0, _classnames.default)((_classNames2 = {}, (0, _defineProperty2.default)(_classNames2, "".concat(prefixCls, "-wrapper"), true), (0, _defineProperty2.default)(_classNames2, "".concat(prefixCls, "-wrapper-focused"), focused && !disabled), (0, _defineProperty2.default)(_classNames2, (0, _concat.default)(_context = "".concat(prefixCls, "-wrapper-size-")).call(_context, size), size), (0, _defineProperty2.default)(_classNames2, "".concat(prefixCls, "-wrapper-borderless"), borderType === 'none'), (0, _defineProperty2.default)(_classNames2, "".concat(prefixCls, "-wrapper-underline"), borderType === 'underline'), (0, _defineProperty2.default)(_classNames2, "".concat(prefixCls, "-error"), status === 'error'), (0, _defineProperty2.default)(_classNames2, "".concat(prefixCls, "-wrapper-disabled"), disabled), _classNames2), (0, _defineProperty2.default)({}, className, className && !addonBefore && !addonAfter));
+    var inputWrapperClasses = (0, _classnames.default)(rtlCls, (_classNames2 = {}, (0, _defineProperty2.default)(_classNames2, "".concat(prefixCls, "-wrapper"), true), (0, _defineProperty2.default)(_classNames2, "".concat(prefixCls, "-wrapper-focused"), focused && !disabled), (0, _defineProperty2.default)(_classNames2, (0, _concat.default)(_context = "".concat(prefixCls, "-wrapper-size-")).call(_context, size), size), (0, _defineProperty2.default)(_classNames2, "".concat(prefixCls, "-wrapper-borderless"), borderType === 'none'), (0, _defineProperty2.default)(_classNames2, "".concat(prefixCls, "-wrapper-underline"), borderType === 'underline'), (0, _defineProperty2.default)(_classNames2, "".concat(prefixCls, "-error"), status === 'error'), (0, _defineProperty2.default)(_classNames2, "".concat(prefixCls, "-wrapper-disabled"), disabled), _classNames2), (0, _defineProperty2.default)({}, className, className && !addonBefore && !addonAfter));
     return _react.default.createElement("span", {
       className: inputWrapperClasses,
       ref: fixRef,
@@ -125,7 +127,7 @@ var ClearableInput = function ClearableInput(props) {
     var addonAfterNode = addonAfter ? _react.default.createElement("span", {
       className: addonClassName
     }, addonAfter) : null;
-    var inputGroupClasses = (0, _classnames.default)(className, (_classNames5 = {}, (0, _defineProperty2.default)(_classNames5, "".concat(prefixCls, "-group"), true), (0, _defineProperty2.default)(_classNames5, (0, _concat.default)(_context2 = "".concat(prefixCls, "-group-size-")).call(_context2, size), size), _classNames5));
+    var inputGroupClasses = (0, _classnames.default)(className, rtlCls, (_classNames5 = {}, (0, _defineProperty2.default)(_classNames5, "".concat(prefixCls, "-group"), true), (0, _defineProperty2.default)(_classNames5, (0, _concat.default)(_context2 = "".concat(prefixCls, "-group-size-")).call(_context2, size), size), _classNames5));
     return _react.default.createElement("span", {
       className: "".concat(prefixCls, "-group-wrapper")
     }, _react.default.createElement("span", {
@@ -159,7 +161,7 @@ var ClearableInput = function ClearableInput(props) {
         delete wrapperStyle[key];
       }
     }
-    var textAreaWrapperClasses = (0, _classnames.default)(className, (0, _defineProperty2.default)({}, "".concat(prefixCls, "-wrapper-textarea"), true));
+    var textAreaWrapperClasses = (0, _classnames.default)(className, rtlCls, (0, _defineProperty2.default)({}, "".concat(prefixCls, "-wrapper-textarea"), true));
     return _react.default.createElement("span", {
       className: textAreaWrapperClasses,
       style: wrapperStyle,