@kdcloudjs/kdesign 1.6.26 → 1.6.28

package/lib/input/ClearableLabeledInput.d.ts

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

package/lib/input/ClearableLabeledInput.js

@@ -35,7 +35,7 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
 var ClearableInputType = (0, _type.tuple)('input', 'text');
 
 function hasPrefixSuffix(props) {
-  return !!(props.prefix || props.suffix || props.allowClear);
+  return !!(props.prefix || props.suffix || props.allowClear || !!props.inputCount);
 }
 
 var ClearableInput = function ClearableInput(props) {
@@ -55,7 +55,8 @@ var ClearableInput = function ClearableInput(props) {
       addonBefore = props.addonBefore,
       addonAfter = props.addonAfter,
       focused = props.focused,
-      numberMark = props.numberMark;
+      numberMark = props.numberMark,
+      inputCount = props.inputCount;
 
   var _useState = (0, _react.useState)(false),
       _useState2 = (0, _slicedToArray2.default)(_useState, 2),
@@ -88,10 +89,14 @@ var ClearableInput = function ClearableInput(props) {
   };
 
   var renderSuffix = function renderSuffix() {
-    if (suffix || !disabled && !!allowClear) {
+    if (suffix || !disabled && !!allowClear || inputCount) {
       return /*#__PURE__*/_react.default.createElement("span", {
         className: "".concat(prefixCls, "-suffix")
-      }, renderClearIcon(), suffix);
+      }, renderClearIcon(), inputCount && /*#__PURE__*/_react.default.createElement("span", {
+        style: {
+          marginRight: suffix ? 9 : 0
+        }
+      }, inputCount), /*#__PURE__*/_react.default.createElement("span", null, suffix));
     }
 
     return null;

package/lib/input/TextArea.js

@@ -110,8 +110,13 @@ var InternalTextarea = function InternalTextarea(props, ref) {
 
   var _useState3 = (0, _react.useState)(false),
       _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
-      showNumberMark = _useState4[0],
-      setShowNumberMark = _useState4[1];
+      focused = _useState4[0],
+      setFocused = _useState4[1];
+
+  var _useState5 = (0, _react.useState)(false),
+      _useState6 = (0, _slicedToArray2.default)(_useState5, 2),
+      showNumberMark = _useState6[0],
+      setShowNumberMark = _useState6[1];
 
   var resizeTextarea = (0, _react.useCallback)(function () {
     if (!autoSize || !textareaRef.current) {
@@ -144,12 +149,12 @@ var InternalTextarea = function InternalTextarea(props, ref) {
   };
 
   var handleFocus = function handleFocus(e) {
-    !showNumberMark && setShowNumberMark(true);
+    setFocused(true);
     onFocus && onFocus(e);
   };
 
   var handleBlur = function handleBlur(e) {
-    // showNumberMark && setShowNumberMark(false)
+    setFocused(false);
     onBlur && onBlur(e);
   };
 
@@ -195,6 +200,15 @@ var InternalTextarea = function InternalTextarea(props, ref) {
       setValue(propsValue);
     }
   }, [propsValue, setValue]);
+  (0, _react.useEffect)(function () {
+    if (focused && !showNumberMark) {
+      setShowNumberMark(true);
+    }
+
+    if (!focused && showNumberMark) {
+      setShowNumberMark(false);
+    }
+  }, [focused]);
 
   var renderTextArea = function renderTextArea(prefixCls) {
     var _context, _classNames2, _context2;

package/lib/input/input.d.ts

@@ -21,6 +21,7 @@ export interface InputProps extends Omit<React.InputHTMLAttributes<HTMLInputElem
     onPressEnter?: (_: string, event: React.KeyboardEvent) => void;
     value?: any;
     readonly?: 'readonly';
+    count?: boolean;
 }
 declare const Input: React.ForwardRefExoticComponent<InputProps & React.RefAttributes<unknown>>;
 export default Input;

package/lib/input/input.js

@@ -93,7 +93,9 @@ var InternalInput = function InternalInput(props, ref) {
       defaultValue = inputProps.defaultValue,
       propsValue = inputProps.value,
       className = inputProps.className,
-      others = __rest(inputProps, ["type", "size", "disabled", "onPressEnter", "borderType", "prefixCls", "onFocus", "onBlur", "onChange", "placeholderTobeValue", "defaultValue", "value", "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"]);
 
   (0, _devwarning.default)(InputSiteTypes.indexOf(size) === -1, 'input', "cannot found input size '".concat(size, "'"));
   (0, _devwarning.default)(BorderTypes.indexOf(borderType) === -1, 'input', "cannot found input borderType '".concat(borderType, "'"));
@@ -111,6 +113,11 @@ var InternalInput = function InternalInput(props, ref) {
       focused = _useState2[0],
       setFocused = _useState2[1];
 
+  var _useState3 = (0, _react.useState)(true),
+      _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
+      showNumberMark = _useState4[0],
+      setShowNumberMark = _useState4[1];
+
   var thisInputRef = (0, _react.useRef)();
   var inputRef = ref || thisInputRef;
   var inputPrefixCls = getPrefixCls(prefixCls, 'input', customPrefixcls); // 按钮样式前缀
@@ -118,18 +125,21 @@ var InternalInput = function InternalInput(props, ref) {
   var addonBefore = others.addonBefore,
       addonAfter = others.addonAfter;
   var inputClasses = (0, _classnames.default)(inputPrefixCls, (_classNames = {}, (0, _defineProperty2.default)(_classNames, (0, _concat.default)(_context = "".concat(inputPrefixCls, "-size-")).call(_context, size), size), (0, _defineProperty2.default)(_classNames, "".concat(inputPrefixCls, "-borderless"), borderType === 'none'), (0, _defineProperty2.default)(_classNames, "".concat(inputPrefixCls, "-underline"), borderType === 'underline'), (0, _defineProperty2.default)(_classNames, "".concat(inputPrefixCls, "-disabled"), disabled), _classNames), (0, _defineProperty2.default)({}, className, className && !(0, _ClearableLabeledInput.hasPrefixSuffix)(inputProps) && !addonBefore && !addonAfter));
-  var handleFocus = (0, _react.useCallback)(function (event) {
+
+  var handleFocus = function handleFocus(event) {
     setFocused(true);
     onFocus && onFocus(event);
-  }, [onFocus]);
-  var handleBlur = (0, _react.useCallback)(function (event) {
+  };
+
+  var handleBlur = function handleBlur(event) {
     setFocused(false);
     onBlur && onBlur(event);
-  }, [onBlur]);
-  var handleChange = (0, _react.useCallback)(function (event) {
+  };
+
+  var handleChange = function handleChange(event) {
     propsValue === undefined && setValue(event.target.value);
     onChange && onChange(event);
-  }, [onChange]);
+  };
 
   var handleReset = function handleReset() {
     setValue('');
@@ -164,13 +174,30 @@ var InternalInput = function InternalInput(props, ref) {
   delete inputDomProps.addonBefore;
   delete inputDomProps.className;
 
+  var renderCount = function renderCount() {
+    var enteredLength = value ? value.length : 0;
+
+    if (maxLength !== undefined && enteredLength >= maxLength) {
+      enteredLength = maxLength;
+    }
+
+    if (count && showNumberMark && !disabled) {
+      return /*#__PURE__*/_react.default.createElement("div", {
+        className: (0, _classnames.default)("".concat(inputPrefixCls, "-input-mark-inner"))
+      }, enteredLength, maxLength !== undefined ? "/".concat(maxLength) : null);
+    }
+
+    return null;
+  };
+
   var renderInput = function renderInput() {
     return /*#__PURE__*/_react.default.createElement("input", (0, _extends2.default)({
       ref: inputRef,
       type: type,
       disabled: disabled,
       className: inputClasses,
-      value: fixControlledValue(value)
+      value: fixControlledValue(value),
+      maxLength: maxLength
     }, inputDomProps, {
       onFocus: handleFocus,
       onBlur: handleBlur,
@@ -179,13 +206,23 @@ var InternalInput = function InternalInput(props, ref) {
     }));
   };
 
+  (0, _react.useEffect)(function () {
+    if (focused && !showNumberMark) {
+      setShowNumberMark(true);
+    }
+
+    if (!focused && showNumberMark) {
+      setShowNumberMark(false);
+    }
+  }, [focused]);
   return /*#__PURE__*/_react.default.createElement(_ClearableLabeledInput.default, (0, _extends2.default)({}, inputProps, {
     handleReset: handleReset,
     value: value,
     inputType: "input",
     prefixCls: inputPrefixCls,
     element: renderInput(),
-    focused: focused
+    focused: focused,
+    inputCount: renderCount()
   }));
 };
 

package/lib/input/style/index.css

@@ -532,3 +532,6 @@ textarea {
 .kd-input-allowClear-spacing {
   padding-right: 20px;
 }
+.kd-input-input-mark-inner {
+  color: var(--kd-c-input-placeholder-color-text, var(--kd-g-color-text-placeholder, #ccc));
+}

package/lib/input/style/index.less

@@ -15,20 +15,25 @@ textarea {
   overflow: auto;
   resize: vertical;
 }
+
 .@{input-prefix-cls} {
   .input(@input-prefix-cls);
+
   transition: border-color @transition-duration-inner;
+
   &-countWrapper {
     position: relative;
     display: inline-block;
     width: 100%;
   }
+
   &-textarea {
     .input(@input-prefix-cls);
     transition: border-color @transition-duration-inner;
     max-width: 100%;
     height: auto;
     vertical-align: bottom;
+
     &-mark {
       position: absolute;
       right: 0;
@@ -39,48 +44,59 @@ textarea {
       line-height: 18px;
       background-color: #fff;
     }
+
     &-mark-inner {
       top: auto;
       bottom: 5px;
       right: 8px;
     }
   }
+
   &-no-resize {
     resize: none;
   }
+
   &-borderless {
     border: 0;
     padding-left: 0 !important;
+
     &:focus {
       border: 0;
     }
   }
+
   &-underline {
     border: none;
     border-bottom: 1px solid @input-color-border;
     border-radius: 0;
     padding-left: 0 !important;
   }
+
   &-disabled {
     background-color: @input-background-color-disabled-inner;
     border-color: @input-border-color-disabled-inner;
     color: @input-affix-color;
     cursor: not-allowed;
   }
+
   &-underline&-disabled {
     color: @input-color-disabled-inner;
     background-color: @input-background-color-inner;
     border-color: @input-underline-border-color-disabled-inner;
   }
+
   &-size-small {
     .input-size(@input-small-height-inner, @input-small-font-size-inner, @input-small-padding-vertical-inner, @input-small-padding-horizontal-inner);
   }
+
   &-size-middle {
     .input-size(@input-middle-height-inner, @input-middle-font-size-inner, @input-small-padding-vertical-inner, @input-small-padding-horizontal-inner);
   }
+
   &-size-large {
     .input-size(@input-large-height-inner, @input-large-font-size-inner, @input-small-padding-vertical-inner, @input-small-padding-horizontal-inner);
   }
+
   &-wrapper {
     padding-left: @input-wrapper-padding-left !important;
     .input(@wrapper-prefix-cls);
@@ -90,11 +106,13 @@ textarea {
     padding-top: 0 !important;
     padding-bottom: 0 !important;
     overflow: hidden;
+
     .@{input-prefix-cls} {
       border: none;
       padding-left: @input-padding-left;
       padding-right: 0;
       height: 100%;
+
       &-suffix,
       &-prefix {
         display: flex;
@@ -104,25 +122,32 @@ textarea {
         word-break: keep-all;
         color: @input-affix-color;
       }
+
       &-suffix {
         margin-left: 4px;
       }
+
       &-prefix {
         margin-right: 4px;
       }
     }
+
     &-size-small {
       .input-size(@input-small-height-inner, @input-small-font-size-inner, @input-small-padding-vertical-inner, @input-small-padding-horizontal-inner);
     }
+
     &-size-middle {
       .input-size(@input-middle-height-inner, @input-middle-font-size-inner, @input-small-padding-vertical-inner, @input-middle-padding-horizontal-inner);
     }
+
     &-size-large {
       .input-size(@input-large-height-inner, @input-large-font-size-inner, @input-small-padding-vertical-inner, @input-large-padding-horizontal-inner);
     }
+
     &-borderless {
       .border-less;
     }
+
     &-underline {
       .underline;
     }
@@ -142,12 +167,14 @@ textarea {
       }
     }
   }
+
   &-wrapper-textarea {
     .input(@input-prefix-cls);
     border: none !important;
     padding: 0 !important;
     position: relative;
     display: inline-block;
+
     .@{input-prefix-cls} {
       &-textarea-clear-icon {
         position: absolute;
@@ -157,13 +184,16 @@ textarea {
       }
     }
   }
+
   &-clear-icon,
   &-textarea-clear-icon {
     .input-clear-icon;
   }
+
   &-clear-icon-hidden {
     visibility: hidden;
   }
+
   &-clear-icon-rightSpace {
     margin-right: 4px;
   }
@@ -173,6 +203,7 @@ textarea {
     width: 100%;
     text-align: start;
     vertical-align: top;
+
     .@{input-prefix-cls} {
       &-group {
         box-sizing: border-box;
@@ -189,19 +220,23 @@ textarea {
         width: 100%;
         border-collapse: separate;
         border-spacing: 0;
+
         & > .@{input-prefix-cls}-wrapper {
           &:not(:first-child):not(:last-child) {
             border-radius: 0;
           }
+
           &:first-child:not(:last-child) {
             border-top-right-radius: 0;
             border-bottom-right-radius: 0;
           }
+
           &:not(:first-child):last-child {
             border-top-left-radius: 0;
             border-bottom-left-radius: 0;
           }
         }
+
         .@{input-prefix-cls}-group-addon {
           position: relative;
           color: @input-affix-color;
@@ -216,11 +251,13 @@ textarea {
           display: flex;
           align-items: center;
           height: @input-middle-height-inner;
+
           &:first-child {
             border-top-right-radius: 0;
             border-bottom-right-radius: 0;
             border-right: none;
           }
+
           &:last-child {
             border-top-left-radius: 0;
             border-bottom-left-radius: 0;
@@ -230,9 +267,11 @@ textarea {
           &-borderless {
             .border-less;
           }
+
           &-underline {
             .underline;
           }
+
           &-disabled {
             background-color: @input-background-color-disabled-inner;
             border-color: @input-border-color-disabled-inner;
@@ -241,16 +280,19 @@ textarea {
           }
         }
       }
+
       &-group-size-small {
         .@{input-prefix-cls}-group-addon {
           height: @input-small-height-inner;
         }
       }
+
       &-group-middle-small {
         .@{input-prefix-cls}-group-addon {
           height: @input-middle-height-inner;
         }
       }
+
       &-group-large-small {
         .@{input-prefix-cls}-group-addon {
           height: @input-large-height-inner;
@@ -258,7 +300,12 @@ textarea {
       }
     }
   }
+
   &-allowClear-spacing {
     padding-right: 20px;
   }
+
+  &-input-mark-inner {
+    color: @input-placeholder-color-inner;
+  }
 }

package/lib/input-number/inputNumber.d.ts

@@ -22,6 +22,7 @@ export interface InputNumberProps extends InputProps {
     stepOption?: StepOption;
     stepperrref?: any;
     formatter?: (value: string | undefined) => string;
+    numberMode?: boolean;
 }
 declare const InputNumber: React.ForwardRefExoticComponent<InputNumberProps & React.RefAttributes<unknown>>;
 export default InputNumber;

package/lib/input-number/inputNumber.js

@@ -84,15 +84,16 @@ var InternalInputNumber = function InternalInputNumber(props, ref) {
       minMark = inputNumberProps.minMark,
       max = inputNumberProps.max,
       maxMark = inputNumberProps.maxMark,
+      numberMode = inputNumberProps.numberMode,
       prefix = inputNumberProps.prefix,
       suffix = inputNumberProps.suffix,
       formatter = inputNumberProps.formatter,
       className = inputNumberProps.className,
-      others = __rest(inputNumberProps, ["value", "defaultValue", "mustInScope", "decimalLength", "mustInPrecisionScope", "digitLength", "onChange", "symbol", "zeroShow", "showDecimalTailZero", "code", "roundMethod", "mask", "stepOption", "min", "minMark", "max", "maxMark", "prefix", "suffix", "formatter", "className"]);
+      others = __rest(inputNumberProps, ["value", "defaultValue", "mustInScope", "decimalLength", "mustInPrecisionScope", "digitLength", "onChange", "symbol", "zeroShow", "showDecimalTailZero", "code", "roundMethod", "mask", "stepOption", "min", "minMark", "max", "maxMark", "numberMode", "prefix", "suffix", "formatter", "className"]);
 
   var initVal = value === undefined ? defaultValue : value;
 
-  var _useState = (0, _react.useState)((0, _numberUtil.serialization)(initVal || '')),
+  var _useState = (0, _react.useState)((0, _numberUtil.serialization)(initVal !== undefined ? initVal + '' : '')),
       _useState2 = (0, _slicedToArray2.default)(_useState, 2),
       inputValue = _useState2[0],
       setInputValue = _useState2[1];
@@ -160,7 +161,7 @@ var InternalInputNumber = function InternalInputNumber(props, ref) {
     }
 
     value === undefined && setInputValue(legalNumber);
-    onChange && onChange(handleEventAttachValue(event, legalNumber));
+    onChange && onChange(handleEventAttachValue(event, numberMode ? Number(legalNumber) : legalNumber));
   };
 
   var handleFocus = function handleFocus(event) {

package/lib/pagination/pagination.d.ts

@@ -4,6 +4,15 @@ export declare const PageTypes: ["basic", "bill", "simple", "less", "nicety"];
 export declare const TotalTypes: ["page", "row", "all"];
 export declare type pageType = typeof PageTypes[number];
 export declare type totalType = typeof TotalTypes[number];
+export interface IIcons {
+    first: React.ReactElement;
+    last: React.ReactElement;
+    prev: React.ReactElement;
+    next: React.ReactElement;
+    down: React.ReactElement;
+    jumpPrev: React.ReactElement;
+    jumpNext: React.ReactElement;
+}
 export interface IPaginationProps {
     total?: number;
     current?: number;
@@ -27,6 +36,7 @@ export interface IPaginationProps {
         goButton?: React.ReactNode;
     };
     onShowSizeChange?: (current: number, size: number) => void;
+    icons?: Partial<IIcons>;
 }
 declare const Pagination: React.FC<IPaginationProps>;
 export default Pagination;