@kdcloudjs/kdesign 1.0.2

package/es/input/style/index.less

@@ -0,0 +1,238 @@
+@import '../../style/themes/index';
+@import './mixin.less';
+@input-prefix-cls: ~'@{kd-prefix}-input';
+@wrapper-prefix-cls: ~'@{input-prefix-cls}-wrapper';
+textarea {
+	margin: 0;
+	padding: 0;
+    color: inherit;
+    font-size: inherit;
+    font-family: inherit;
+	line-height: inherit;
+	-webkit-appearance: none;
+	overflow: auto;
+    resize: vertical;
+}
+.@{input-prefix-cls} {
+	.input(@input-prefix-cls);
+	transition: border-color @transition-duration;
+	&-countWrapper {
+		position: relative;
+		display: inline-block;
+		width: 100%;
+	}
+	&-textarea {
+		.input(@input-prefix-cls);
+		transition: border-color @transition-duration;
+		max-width: 100%;
+		height: auto;
+		vertical-align: bottom;
+		&-mark{
+			position: absolute;
+			right: 0;
+			top: ~'calc(100% + 1px)';
+			z-index: 1;
+			color: @third-text-color;
+			font-size: @small-font-size;
+		}
+	}
+	&-no-resize {
+		resize: none;
+	}
+	&-borderless {
+		border: 0;
+		padding-left: 0 !important;
+		&:focus{
+			border: 0;
+		}
+	}
+	&-underline {
+		border: none;
+		border-bottom: 1px solid @input-color;
+		border-radius: 0;
+		padding-left: 0 !important;
+	}
+	&-disabled {
+		background-color: @disabled-contain-bg;
+		border-color: @strong-border-color;
+		color: @disabled-color;
+		cursor: not-allowed;
+	}
+	&-underline&-disabled {
+		background-color: @input-background-color;
+		border-color: @strong-border-color;
+	}
+	&-size-small {
+		.input-size(@input-small-height, @input-small-font-size, @input-small-padding-vertical, @input-small-padding-horizontal);
+	}
+	&-size-middle {
+		.input-size(@input-middle-height, @input-middle-font-size, @input-small-padding-vertical, @input-small-padding-horizontal);
+	}
+	&-size-large {
+		.input-size(@input-large-height, @input-large-font-size, @input-small-padding-vertical, @input-small-padding-horizontal);
+	}
+	&-wrapper {
+		.input(@wrapper-prefix-cls);
+		transition: border-color @transition-duration;
+		display: inline-flex;
+		position: relative;
+		padding-top: 0 !important;
+		padding-bottom: 0 !important;
+		overflow: hidden;
+		.@{input-prefix-cls} {
+			border: none;
+			padding-left: 0;
+			padding-right: 0;
+			height: 100%;
+			&-suffix, &-prefix {
+				display: flex;
+				flex: 0;
+				align-items: center;
+				justify-content: center;
+				word-break: keep-all;
+			}
+			&-suffix {
+				margin-left: 4px;
+			}
+			&-prefix {
+				margin-right: 4px;
+			}
+		}
+		&-size-small {
+			.input-size(@input-small-height, @input-small-font-size, @input-small-padding-vertical, @input-small-padding-horizontal);
+		}
+		&-size-middle {
+			.input-size(@input-middle-height, @input-middle-font-size, @input-small-padding-vertical, @input-small-padding-horizontal);
+		}
+		&-size-large {
+			.input-size(@input-large-height, @input-large-font-size, @input-small-padding-vertical, @input-small-padding-horizontal);
+		}
+		&-borderless {
+			.border-less;
+		}
+		&-underline {
+			.underline;
+		}
+		
+		&-focused {
+			border-color: @theme-color;
+		}
+	}
+	&-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;
+				right: 8px;
+				top: -2px;
+			}
+		}
+	}
+	&-clear-icon, &-textarea-clear-icon {
+		.input-clear-icon;
+	}
+	&-clear-icon-hidden {
+		visibility: hidden;
+	}
+	&-clear-icon-rightSpace {
+		margin-right: 4px;
+	}
+
+	&-group-wrapper {
+		display: inline-block;
+		width: 100%;
+		text-align: start;
+		vertical-align: top;
+		.@{input-prefix-cls} {
+			&-group {
+				box-sizing: border-box;
+				margin: 0;
+				padding: 0;
+				color: rgba(0,0,0,.85);
+				font-size: 14px;
+				font-variant: tabular-nums;
+				// line-height: 1.5715;
+				list-style: none;
+				font-feature-settings: "tnum";
+				position: relative;
+				display: flex;
+				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-font-color;
+					padding: 0 9px;
+					font-weight: 400;
+					font-size: 14px;
+					text-align: center;
+					border: 1px solid @strong-border-color;
+					border-radius: @radius-size;
+					white-space: nowrap;
+					box-sizing: border-box;
+					display: flex;
+					align-items: center;
+					height: @input-middle-height;
+					&: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;
+						border-left: none;
+					}
+					
+					&-borderless {
+						.border-less;
+					}
+					&-underline {
+						.underline;
+					}
+					&-disabled {
+						background-color: @disabled-contain-bg;
+						border-color: @strong-border-color;
+						color: @disabled-color;
+						cursor: not-allowed;
+					}
+				}
+			}
+			&-group-size-small {
+				.@{input-prefix-cls}-group-addon {
+					height: @input-small-height;
+				}
+			}
+			&-group-middle-small {
+				.@{input-prefix-cls}-group-addon {
+					height: @input-middle-height;
+				}
+			}
+			&-group-large-small {
+				.@{input-prefix-cls}-group-addon {
+					height: @input-large-height;
+				}
+			}
+		}
+	}
+	&-allowClear-spacing {
+		padding-right: 20px;
+	}
+}

package/es/input/style/mixin.less

@@ -0,0 +1,59 @@
+// 输入框默认样式Mixins
+.input(@prefix) {
+	@disabled-prefix-cls: ~'@{prefix}-disabled';
+	width: 100%;
+	min-width: 0;
+	border: @input-border-width solid @strong-border-color;
+	border-radius: @radius-size;
+	color: @input-font-color;
+	box-sizing: border-box;
+	background-color: @input-background-color;
+	display: inline-block;
+	font-variant: tabular-nums;
+	list-style: none;
+	background-image: none;
+	font-feature-settings: "tnum";
+
+	&::-webkit-input-placeholder {
+		color: @input-placeholder-color !important;
+	}
+	&::-moz-input-placeholder {
+		color: @input-placeholder-color !important;
+	}
+	&::-ms-input-placeholder {
+		color: @input-placeholder-color !important;
+	}
+	&:focus{
+		box-shadow: none;
+		outline: none;
+	}
+	&:not(.@{disabled-prefix-cls}):hover{
+		border-color: @theme-color;
+	}
+	&:not(.@{disabled-prefix-cls}):focus{
+		color: @input-focus-color;
+		border-color: @theme-color;
+	}
+}
+.input-size(@height, @fonSize, @padding-vertical, @padding-horizontal) {
+	height: @height;
+	line-height: @height - (@padding-vertical * 2) - (@input-border-width * 2);
+	font-size: @fonSize;
+	padding: @padding-vertical @padding-horizontal;
+}
+.input-clear-icon() {
+	cursor: pointer;
+	color: @theme-color;
+	i {
+		vertical-align: middle;
+		font-size: 12px !important;
+	}
+}
+.border-less() {
+	border: none !important;
+}
+.underline() {
+	border: none;
+	border-bottom: 1px solid @input-color;
+	border-radius: 0 !important;
+}

package/es/input-number/index.d.ts

@@ -0,0 +1,3 @@
+import InputNumber from './inputNumber';
+export { InputNumberProps } from './inputNumber';
+export default InputNumber;

package/es/input-number/index.js

@@ -0,0 +1,2 @@
+import InputNumber from './inputNumber';
+export default InputNumber;

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

@@ -0,0 +1,26 @@
+import React from 'react';
+import { InputProps } from '../input';
+export declare type StepType = 'embed' | 'base';
+export interface StepOption {
+    type?: StepType;
+    step?: number;
+    stepBtnClassName?: string;
+}
+export interface InputNumberProps extends InputProps {
+    digitLength?: number;
+    decimalLength?: number;
+    zeroShow?: boolean;
+    showDecimalTailZero?: boolean;
+    mask?: string;
+    min?: number;
+    minMark?: string;
+    max?: number;
+    maxMark?: string;
+    symbol?: string;
+    mustInScope?: boolean;
+    mustInPrecisionScope?: boolean;
+    stepOption?: StepOption;
+    stepperrref?: any;
+}
+declare const InputNumber: React.ForwardRefExoticComponent<InputNumberProps & React.RefAttributes<unknown>>;
+export default InputNumber;

package/es/input-number/inputNumber.js

@@ -0,0 +1,350 @@
+import _extends from "@babel/runtime-corejs3/helpers/extends";
+import _slicedToArray from "@babel/runtime-corejs3/helpers/slicedToArray";
+import _Object$getOwnPropertySymbols from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-symbols";
+import _includesInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/includes";
+import _concatInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/concat";
+
+var __rest = this && this.__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 _Object$getOwnPropertySymbols === "function") for (var i = 0, p = _Object$getOwnPropertySymbols(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;
+};
+
+import React, { useContext, useState, useEffect, useRef, useCallback, useImperativeHandle } from 'react';
+import Input from '../input';
+import ConfigContext from '../config-provider/ConfigContext';
+import { getCompProps } from '../_utils';
+import { serialization } from '../_utils/numberUtil';
+import { formatEditNumber, formatNumber } from '../_utils/formatUtil';
+import devWarning from '../_utils/devwarning';
+import Big from 'big.js';
+
+var InternalInputNumber = function InternalInputNumber(props, ref) {
+  var _useContext = useContext(ConfigContext),
+      userDefaultProps = _useContext.compDefaultProps,
+      getPrefixCls = _useContext.getPrefixCls,
+      prefixCls = _useContext.prefixCls;
+
+  var inputNumberProps = getCompProps('InputNumber', userDefaultProps, props);
+
+  var value = inputNumberProps.value,
+      defaultValue = inputNumberProps.defaultValue,
+      mustInScope = inputNumberProps.mustInScope,
+      decimalLength = inputNumberProps.decimalLength,
+      mustInPrecisionScope = inputNumberProps.mustInPrecisionScope,
+      digitLength = inputNumberProps.digitLength,
+      onChange = inputNumberProps.onChange,
+      symbol = inputNumberProps.symbol,
+      zeroShow = inputNumberProps.zeroShow,
+      showDecimalTailZero = inputNumberProps.showDecimalTailZero,
+      code = inputNumberProps.code,
+      roundMethod = inputNumberProps.roundMethod,
+      mask = inputNumberProps.mask,
+      stepOption = inputNumberProps.stepOption,
+      min = inputNumberProps.min,
+      minMark = inputNumberProps.minMark,
+      max = inputNumberProps.max,
+      maxMark = inputNumberProps.maxMark,
+      prefix = inputNumberProps.prefix,
+      suffix = inputNumberProps.suffix,
+      others = __rest(inputNumberProps, ["value", "defaultValue", "mustInScope", "decimalLength", "mustInPrecisionScope", "digitLength", "onChange", "symbol", "zeroShow", "showDecimalTailZero", "code", "roundMethod", "mask", "stepOption", "min", "minMark", "max", "maxMark", "prefix", "suffix"]);
+
+  var initVal = value === undefined ? defaultValue : value;
+
+  var _useState = useState(serialization(initVal || '')),
+      _useState2 = _slicedToArray(_useState, 2),
+      inputValue = _useState2[0],
+      setInputValue = _useState2[1];
+
+  var inputStatus = useRef({
+    isHandleChange: false,
+    inputFocused: false
+  });
+  var inputPrefixCls = getPrefixCls(prefixCls, 'inputNumber', inputNumberProps.prefixCls);
+  var thisInputNumberRef = useRef();
+  var inputNumberRef = ref || thisInputNumberRef;
+  var stepMouseDownDelayTimer = useRef(null);
+  var stepMouseDownIntervalTimer = useRef(null);
+
+  var isScopeValid = function isScopeValid(value) {
+    if (value === '') return true;
+    var numberValue = parseFloat(value) || 0;
+    if (min >= 0 && value.substr(0, 1) === '-') return false; // 数值范围>=0时,不允许输入负号
+
+    if (minMark === '[' && numberValue < min || minMark === '(' && numberValue <= min || maxMark === ']' && numberValue > max || maxMark === ')' && numberValue >= max) return false;
+    return true;
+  };
+
+  useEffect(function () {
+    setInputValue(value);
+  }, [value]);
+
+  var handleEventAttachValue = function handleEventAttachValue(event, value) {
+    return _extends({}, event, {
+      target: {
+        value: value
+      }
+    });
+  };
+
+  var verifiValue = function verifiValue(initValue) {
+    // 将 value 进行数字序列化 剔除非数字输入-复制粘贴的情况
+    var value = serialization(initValue); // 校验数字合法性
+
+    if (!/^-?\d*\.?\d*$/.test(value)) return false; // 输入内容超出数字范围不允许输入
+
+    if (mustInScope && !isScopeValid(value)) {
+      return false;
+    } // 整数字段不允许输入小数点
+
+
+    if (decimalLength === 0 && _includesInstanceProperty(value).call(value, '.')) {
+      return false;
+    }
+
+    if (mustInPrecisionScope) {
+      value = handleNumericalAccuracy(value);
+      if (value === inputValue) return false;
+    }
+
+    return value;
+  };
+
+  var handleChange = function handleChange(event) {
+    inputStatus.current.isHandleChange = true;
+    var legalNumber = verifiValue(event.target.value);
+
+    if (legalNumber === false) {
+      return false;
+    }
+
+    value === undefined && setInputValue(legalNumber);
+    onChange && onChange(handleEventAttachValue(event, legalNumber));
+  };
+
+  var handleFocus = function handleFocus(event) {
+    inputStatus.current.inputFocused = true;
+    var onFocus = inputNumberProps.onFocus;
+    var formatValue = formatEditNumber(inputValue, {
+      zeroShow: zeroShow,
+      decimalLength: decimalLength,
+      showDecimalTailZero: showDecimalTailZero,
+      roundMethod: roundMethod,
+      symbol: symbol
+    });
+    value === undefined && setInputValue(formatValue);
+    onFocus && onFocus(handleEventAttachValue(event, formatValue));
+  };
+
+  var handleFormatValue = function handleFormatValue(value, param) {
+    if (!value && value !== 0) return '';
+    return formatNumber(value, param);
+  };
+
+  var handleNumericalAccuracy = function handleNumericalAccuracy(numerical) {
+    var resultNumerical = '';
+
+    var _numerical$split = numerical.split('.'),
+        _numerical$split2 = _slicedToArray(_numerical$split, 2),
+        integerValue = _numerical$split2[0],
+        _numerical$split2$ = _numerical$split2[1],
+        decimalValue = _numerical$split2$ === void 0 ? '' : _numerical$split2$;
+
+    var integerValueLength = integerValue.length;
+    var decimalValueLength = decimalValue.length;
+
+    if (typeof decimalLength === 'number' && typeof digitLength === 'number') {
+      if (integerValueLength > digitLength - decimalLength) {
+        resultNumerical = integerValue.substr(0, digitLength - decimalLength);
+      } else if (decimalValueLength > decimalLength) {
+        var _context;
+
+        resultNumerical = _concatInstanceProperty(_context = "".concat(integerValue, ".")).call(_context, decimalValue.substr(0, decimalLength));
+      }
+    } else if (typeof decimalLength !== 'number' && typeof digitLength === 'number') {
+      if (integerValueLength >= digitLength) {
+        resultNumerical = integerValue.substr(0, digitLength);
+      } else {
+        var _context2;
+
+        resultNumerical = decimalValueLength ? _concatInstanceProperty(_context2 = "".concat(integerValue, ".")).call(_context2, decimalValue.substr(0, digitLength - integerValueLength)) : integerValue;
+      }
+    } else if (typeof decimalLength === 'number' && typeof digitLength !== 'number') {
+      var _context3;
+
+      resultNumerical = decimalValueLength ? _concatInstanceProperty(_context3 = "".concat(integerValue, ".")).call(_context3, decimalValue.substr(0, decimalLength)) : integerValue;
+    } else {
+      resultNumerical = numerical;
+    }
+
+    if (inputStatus.current.inputFocused && resultNumerical.indexOf('.') === -1 && numerical.indexOf('.') > -1 && numerical.indexOf('.') === numerical.length - 1) {
+      resultNumerical += '.';
+    }
+
+    return resultNumerical;
+  };
+
+  var handleStepChang = function handleStepChang(type) {
+    var step = stepOption.step === undefined ? 1 : parseFloat(stepOption.step);
+
+    if (typeof step !== 'number') {
+      devWarning(true, 'inputNumber', "stepOption.step\u5FC5\u987B\u4E3A\u4E00\u4E2A\u6570\u503C");
+      return false;
+    }
+
+    var startingNumber = parseFloat(inputNumberRef.current.value) || 0;
+    var calculationResults = new Big(startingNumber)[type](step).valueOf();
+    var legalNumber = verifiValue(calculationResults);
+
+    if (legalNumber === false) {
+      return false;
+    }
+
+    setInputValue(legalNumber);
+    onChange && onChange({
+      target: {
+        value: legalNumber
+      }
+    });
+  };
+
+  var handleKeyDown = function handleKeyDown(event) {
+    var _context4;
+
+    if (!stepOption || props.disabled || props.readOnly) {
+      return;
+    }
+
+    var keyCode = event.keyCode;
+
+    if (_includesInstanceProperty(_context4 = [38, 40]).call(_context4, keyCode)) {
+      event.preventDefault();
+      handleStepChang(keyCode === 38 ? 'plus' : 'minus');
+    }
+  };
+
+  var clearAllTimer = useCallback(function () {
+    stepMouseDownDelayTimer.current && clearTimeout(stepMouseDownDelayTimer.current);
+    stepMouseDownIntervalTimer.current && clearInterval(stepMouseDownIntervalTimer.current);
+    document.removeEventListener('mouseup', clearAllTimer);
+    return false;
+  }, [stepMouseDownDelayTimer, stepMouseDownIntervalTimer]);
+
+  var handleBlur = function handleBlur(event) {
+    inputStatus.current.isHandleChange = false;
+    inputStatus.current.inputFocused = false;
+    var min = inputNumberProps.min,
+        max = inputNumberProps.max,
+        onBlur = inputNumberProps.onBlur;
+    var _inputValue = inputValue;
+
+    if (_inputValue === '-') {
+      _inputValue = '';
+    }
+
+    var bigValue = new Big(Number(_inputValue)); // 还原最小值
+
+    if (typeof min === 'number' && bigValue.lt(min)) {
+      _inputValue = min.toString();
+    } // 还原最大值
+
+
+    if (typeof min === 'number' && bigValue.gt(max)) {
+      _inputValue = max.toString();
+    } // 超过精度位数直接截断
+
+
+    _inputValue = handleNumericalAccuracy(_inputValue);
+    var formatValue = handleFormatValue(_inputValue, {
+      mask: mask,
+      zeroShow: zeroShow,
+      decimalLength: decimalLength,
+      showDecimalTailZero: showDecimalTailZero,
+      symbol: symbol,
+      code: code
+    });
+    setInputValue(formatValue);
+    onBlur && onBlur(handleEventAttachValue(event, _inputValue));
+    inputStatus.current.isHandleChange = false;
+    inputStatus.current.inputFocused = false;
+  };
+
+  useEffect(function () {
+    var _inputStatus$current = inputStatus.current,
+        isHandleChange = _inputStatus$current.isHandleChange,
+        inputFocused = _inputStatus$current.inputFocused;
+
+    if (isHandleChange) {
+      return;
+    }
+
+    setInputValue(function (_inputValue) {
+      var isValueChange = value !== (inputFocused ? _inputValue : formatEditNumber(_inputValue, {
+        zeroShow: zeroShow,
+        decimalLength: decimalLength,
+        showDecimalTailZero: showDecimalTailZero,
+        roundMethod: roundMethod,
+        symbol: symbol
+      }));
+
+      if (!inputFocused || isValueChange) {
+        if (value === '' || value === null) {
+          return '';
+        } else {
+          var formatValue = inputFocused ? formatEditNumber(value, {
+            zeroShow: zeroShow,
+            decimalLength: decimalLength,
+            showDecimalTailZero: showDecimalTailZero
+          }) : handleFormatValue(value, {
+            mask: mask,
+            zeroShow: zeroShow,
+            decimalLength: decimalLength,
+            showDecimalTailZero: showDecimalTailZero,
+            symbol: symbol,
+            code: code
+          });
+          return formatValue;
+        }
+      }
+
+      return _inputValue;
+    });
+  }, [value, zeroShow, decimalLength, showDecimalTailZero, symbol, code, roundMethod, mask]);
+  useEffect(function () {
+    return function () {
+      clearAllTimer();
+    };
+  }, [clearAllTimer]);
+  useImperativeHandle(props.stepperrref, function () {
+    return {
+      value: inputValue,
+      handleNumericalAccuracy: handleNumericalAccuracy,
+      verifiValue: verifiValue,
+      setValue: function setValue(value) {
+        return setInputValue(value);
+      }
+    };
+  });
+  return /*#__PURE__*/React.createElement(Input, _extends({}, others, {
+    ref: inputNumberRef,
+    value: inputValue,
+    prefix: prefix,
+    suffix: suffix,
+    onChange: handleChange,
+    onFocus: handleFocus,
+    onBlur: handleBlur,
+    onKeyDown: handleKeyDown,
+    className: inputPrefixCls
+  }));
+};
+
+var InputNumber = /*#__PURE__*/React.forwardRef(InternalInputNumber);
+InputNumber.displayName = 'InputNumber';
+export default InputNumber;

package/es/input-number/style/css.js

@@ -0,0 +1 @@
+import './index.css';