assui 2.0.121 → 2.0.124

package/es/number-input/index.js

@@ -56,30 +56,30 @@ var __read = this && this.__read || function (o, n) {
 
 import * as React from 'react';
 import Input from 'antd/es/input';
-import isUndefined from 'lodash/isUndefined';
+import useControllableValue from 'ahooks/lib/useControllableValue';
+import omit from 'lodash/omit';
 import * as dataTypeEnum from './const/dataTypeEnum';
 import * as numberTypeEnum from './const/numberType';
 import { filterInt, filterFloat } from './utils';
 var NumberInput = /*#__PURE__*/React.forwardRef(function (props, ref) {
-  var value = props.value,
-      onChange = props.onChange,
-      _a = props.numberType,
-      numberType = _a === void 0 ? numberTypeEnum.INT : _a,
-      _b = props.dataType,
-      dataType = _b === void 0 ? dataTypeEnum.NUMBER : _b,
+  var _a = __read(useControllableValue(props, {
+    defaultValue: ''
+  }), 2),
+      value = _a[0],
+      setValue = _a[1];
+
+  var onChange = props.onChange,
+      _b = props.numberType,
+      numberType = _b === void 0 ? numberTypeEnum.INT : _b,
+      _c = props.dataType,
+      dataType = _c === void 0 ? dataTypeEnum.NUMBER : _c,
       precision = props.precision,
       formatter = props.formatter,
       parser = props.parser,
       enableMinus = props.enableMinus,
       onBlur = props.onBlur,
       maxLength = props.maxLength,
-      restProps = __rest(props, ["value", "onChange", "numberType", "dataType", "precision", "formatter", "parser", "enableMinus", "onBlur", "maxLength"]);
-
-  var _c = __read(React.useState(''), 2),
-      inputValue = _c[0],
-      setInputValue = _c[1];
-
-  var resultValue = isUndefined(value) ? inputValue : value;
+      restProps = __rest(props, ["onChange", "numberType", "dataType", "precision", "formatter", "parser", "enableMinus", "onBlur", "maxLength"]);
 
   var onNumberChange = function onNumberChange(e) {
     var newNumber;
@@ -88,13 +88,13 @@ var NumberInput = /*#__PURE__*/React.forwardRef(function (props, ref) {
     if (numberType === numberTypeEnum.INT) {
       newNumber = filterInt({
         value: newValue,
-        preValue: "" + resultValue,
+        preValue: "" + value,
         enableMinus: enableMinus
       });
     } else {
       newNumber = filterFloat({
         value: newValue,
-        preValue: "" + resultValue,
+        preValue: "" + value,
         precision: precision !== null && precision !== void 0 ? precision : 2,
         enableMinus: enableMinus
       });
@@ -104,42 +104,29 @@ var NumberInput = /*#__PURE__*/React.forwardRef(function (props, ref) {
       newNumber = parser(newNumber);
     }
 
-    if (resultValue !== newNumber) {
-      if (value === undefined) {
-        setInputValue(newNumber);
-      }
-
-      if (onChange) {
-        onChange(newNumber);
-      }
+    if (value !== newNumber) {
+      setValue(newNumber);
     }
   };
 
   var onNumberBlur = function onNumberBlur() {
-    if (resultValue === '-' || resultValue === '.') {
-      if (value === undefined) {
-        setInputValue('');
-      }
+    var resultValue = value;
 
-      if (onChange) {
-        onChange('');
-      }
-    }
-
-    if (dataType === dataTypeEnum.NUMBER && resultValue) {
+    if (value === '-' || value === '.') {
+      resultValue = '';
+    } else if (value && dataType === dataTypeEnum.NUMBER) {
       if (numberType === numberTypeEnum.FLOAT) {
-        onChange && onChange(+resultValue);
+        resultValue = +value;
       } else {
-        onChange && onChange(parseInt("" + resultValue, 10));
+        resultValue = parseInt("" + value, 10);
       }
     }
 
-    if (onBlur) {
-      onBlur("" + resultValue);
-    }
+    setValue(resultValue);
+    onBlur === null || onBlur === void 0 ? void 0 : onBlur(resultValue);
   };
 
-  var finallyValue = formatter ? formatter("" + resultValue) : resultValue;
+  var finallyValue = formatter ? formatter("" + value) : value;
   return /*#__PURE__*/React.createElement(Input, __assign({
     type: "text",
     ref: ref,
@@ -147,7 +134,7 @@ var NumberInput = /*#__PURE__*/React.forwardRef(function (props, ref) {
     onBlur: onNumberBlur,
     onChange: onNumberChange,
     maxLength: maxLength
-  }, restProps));
+  }, omit(restProps, ['value'])));
 });
 NumberInput.defaultProps = {
   enableMinus: false

package/lib/condition-input/index.d.ts

@@ -1,3 +1,4 @@
+import * as React from 'react';
 import type { InputProps } from 'antd/es/input';
 export interface ConditionInputProps extends Omit<InputProps, 'onChange'> {
     /** 过滤的正则条件 */
@@ -12,5 +13,5 @@ export interface ConditionInputProps extends Omit<InputProps, 'onChange'> {
     /** 输入框内容 */
     value?: string;
 }
-declare const ConditionInput: (props: ConditionInputProps) => JSX.Element;
+declare const ConditionInput: React.ForwardRefExoticComponent<ConditionInputProps & React.RefAttributes<unknown>>;
 export default ConditionInput;

package/lib/condition-input/index.js

@@ -108,20 +108,19 @@ var input_1 = __importDefault(require("antd/es/input"));
 
 var isFunction_1 = __importDefault(require("lodash/isFunction"));
 
+var useControllableValue_1 = __importDefault(require("ahooks/lib/useControllableValue"));
+
 var parse2RegexOption_1 = __importDefault(require("./parse2RegexOption"));
 
-var ConditionInput = function ConditionInput(props) {
+var ConditionInput = React.forwardRef(function (props, ref) {
+  var _a = __read(useControllableValue_1["default"](props), 2),
+      value = _a[0],
+      setValue = _a[1];
+
   var regexp = props.regexp,
       formatter = props.formatter,
-      value = props.value,
       onChange = props.onChange,
-      rest = __rest(props, ["regexp", "formatter", "value", "onChange"]);
-
-  var _a = __read(React.useState(''), 2),
-      stateValue = _a[0],
-      setStateValue = _a[1];
-
-  var resultValue = value === undefined ? stateValue : value;
+      rest = __rest(props, ["regexp", "formatter", "onChange"]);
 
   var handleChange = function handleChange(e) {
     var originalValue = e.target.value;
@@ -144,19 +143,15 @@ var ConditionInput = function ConditionInput(props) {
       nextValue = formatter(nextValue);
     }
 
-    if (resultValue !== nextValue) {
-      setStateValue(nextValue);
-
-      if (onChange) {
-        onChange(nextValue);
-      }
+    if (value !== nextValue) {
+      setValue(nextValue);
     }
   };
 
   return React.createElement(input_1["default"], __assign({
-    value: resultValue,
+    ref: ref,
+    value: value,
     onChange: handleChange
   }, rest));
-};
-
+});
 exports["default"] = ConditionInput;

package/lib/index.d.ts

@@ -46,6 +46,10 @@ export type { LabelDatePickerProps } from './label-date-picker';
 export { default as LabelDatePicker } from './label-date-picker';
 export type { LabelAutoCompleteProps } from './label-auto-complete';
 export { default as LabelAutoComplete } from './label-auto-complete';
+export type { LabelNumberInputProps } from './label-number-input';
+export { default as LabelNumberInput } from './label-number-input';
+export type { LabelConditionInputProps } from './label-condition-input';
+export { default as LabelConditionInput } from './label-condition-input';
 export type { LabelTreeSelectProps } from './label-tree-select';
 export { default as LabelTreeSelect } from './label-tree-select';
 export type { LabelCustomizeRangePickerProps } from './label-customize-range-picker';

package/lib/index.js

@@ -229,6 +229,24 @@ Object.defineProperty(exports, "LabelAutoComplete", {
   }
 });
 
+var label_number_input_1 = require("./label-number-input");
+
+Object.defineProperty(exports, "LabelNumberInput", {
+  enumerable: true,
+  get: function get() {
+    return label_number_input_1["default"];
+  }
+});
+
+var label_condition_input_1 = require("./label-condition-input");
+
+Object.defineProperty(exports, "LabelConditionInput", {
+  enumerable: true,
+  get: function get() {
+    return label_condition_input_1["default"];
+  }
+});
+
 var label_tree_select_1 = require("./label-tree-select");
 
 Object.defineProperty(exports, "LabelTreeSelect", {

package/lib/keep-tab/index.js

@@ -112,7 +112,7 @@ var tabs_1 = __importDefault(require("antd/es/tabs"));
 
 var use_url_state_1 = __importDefault(require("@ahooksjs/use-url-state"));
 
-var useControllableValue_1 = __importDefault(require("ahooks/es/useControllableValue"));
+var useControllableValue_1 = __importDefault(require("ahooks/lib/useControllableValue"));
 
 var toArray_1 = __importDefault(require("rc-util/lib/Children/toArray"));
 

package/lib/label-auto-complete/style/index.less

@@ -34,7 +34,7 @@
     padding-top: 17px;
     padding-left: 4px;
 
-    .ant-select-selection-search-input {
+    .@{ant-prefix}-select-selection-search-input {
       height: auto !important;
       font-size: @font-size-base;
     }

package/lib/label-condition-input/index.d.ts

@@ -0,0 +1,17 @@
+import React from 'react';
+import type { ConditionInputProps } from '../condition-input';
+export interface LabelConditionInputProps extends ConditionInputProps {
+    /** label 标签的文本 */
+    label?: React.ReactNode;
+    /** 输入框内容变化时的回调 */
+    onChange?: (value: string) => void;
+    /** 输入框除去label之后的最小末尾宽度 */
+    baseMinWidth?: number;
+    /** 组件dom id */
+    id?: string;
+}
+declare const LabelConditionInput: {
+    (props: LabelConditionInputProps): JSX.Element;
+    Option: new (text?: string | undefined, value?: string | undefined, defaultSelected?: boolean | undefined, selected?: boolean | undefined) => HTMLOptionElement;
+};
+export default LabelConditionInput;

package/lib/label-condition-input/index.js

@@ -0,0 +1,135 @@
+"use strict";
+
+var __assign = this && this.__assign || function () {
+  __assign = Object.assign || function (t) {
+    for (var s, i = 1, n = arguments.length; i < n; i++) {
+      s = arguments[i];
+
+      for (var p in s) {
+        if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];
+      }
+    }
+
+    return t;
+  };
+
+  return __assign.apply(this, arguments);
+};
+
+var __read = this && this.__read || function (o, n) {
+  var m = typeof Symbol === "function" && o[Symbol.iterator];
+  if (!m) return o;
+  var i = m.call(o),
+      r,
+      ar = [],
+      e;
+
+  try {
+    while ((n === void 0 || n-- > 0) && !(r = i.next()).done) {
+      ar.push(r.value);
+    }
+  } catch (error) {
+    e = {
+      error: error
+    };
+  } finally {
+    try {
+      if (r && !r.done && (m = i["return"])) m.call(i);
+    } finally {
+      if (e) throw e.error;
+    }
+  }
+
+  return ar;
+};
+
+var __importDefault = this && this.__importDefault || function (mod) {
+  return mod && mod.__esModule ? mod : {
+    "default": mod
+  };
+};
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+
+var react_1 = __importDefault(require("react"));
+
+var classnames_1 = __importDefault(require("classnames"));
+
+var omit_1 = __importDefault(require("lodash/omit"));
+
+var useControllableValue_1 = __importDefault(require("ahooks/lib/useControllableValue"));
+
+var useSize_1 = __importDefault(require("ahooks/lib/useSize"));
+
+var condition_input_1 = __importDefault(require("../condition-input"));
+
+var LabelConditionInput = function LabelConditionInput(props) {
+  var className = props.className,
+      label = props.label,
+      onBlur = props.onBlur,
+      id = props.id,
+      onFocus = props.onFocus,
+      _a = props.baseMinWidth,
+      baseMinWidth = _a === void 0 ? 50 : _a;
+
+  var _b = __read(useControllableValue_1["default"](props), 2),
+      value = _b[0],
+      setValue = _b[1];
+
+  var labelDomRef = react_1["default"].useRef(null);
+  var labelSize = useSize_1["default"](labelDomRef);
+  var InputDomRef = react_1["default"].useRef(null);
+
+  var _c = __read(react_1["default"].useState(false), 2),
+      focused = _c[0],
+      setFocused = _c[1];
+
+  var handleLabelClick = function handleLabelClick() {
+    var _a;
+
+    setFocused(true);
+    (_a = InputDomRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+  };
+
+  var handleFocus = function handleFocus() {
+    setFocused(true);
+    onFocus === null || onFocus === void 0 ? void 0 : onFocus(value);
+  };
+
+  var handleBlur = function handleBlur(e) {
+    setFocused(false);
+    onBlur === null || onBlur === void 0 ? void 0 : onBlur(e);
+  };
+
+  var controlMinWidth = (labelSize === null || labelSize === void 0 ? void 0 : labelSize.width) ? labelSize.width + baseMinWidth : undefined;
+  return react_1["default"].createElement("div", {
+    className: classnames_1["default"]('label-condition-input-warper', className),
+    id: id,
+    style: {
+      minWidth: controlMinWidth
+    }
+  }, react_1["default"].createElement("div", {
+    className: classnames_1["default"]('label-condition-input-field', {
+      'label-condition-input-focused': focused || value
+    })
+  }, react_1["default"].createElement(condition_input_1["default"], __assign({}, omit_1["default"](props, ['onChange', 'onBlur', 'onFocus', 'className', 'label', 'placeholder']), {
+    ref: InputDomRef,
+    "data-value": value ? value.length : 0,
+    value: value,
+    onBlur: handleBlur,
+    onFocus: handleFocus,
+    className: "label-condition-input",
+    onChange: function onChange(inputValue) {
+      return setValue(inputValue);
+    }
+  })), react_1["default"].createElement("label", {
+    ref: labelDomRef,
+    className: "label-condition-input-text",
+    onClick: handleLabelClick
+  }, label)));
+};
+
+exports["default"] = LabelConditionInput;
+LabelConditionInput.Option = Option;

package/lib/label-condition-input/style/index.css

@@ -0,0 +1,43 @@
+.label-condition-input {
+  z-index: 1;
+  width: 100%;
+  height: 100%;
+  padding: 19px 15px 2px 15px;
+  color: #263241;
+  font-size: 14px;
+  line-height: 16px;
+  border: 0;
+  outline: 0;
+}
+.label-condition-input:focus + label,
+.label-condition-input:not([data-value='0']) + label {
+  transform: translateY(-8px) scale(0.8);
+}
+.label-condition-input-field {
+  height: 45px;
+  overflow: hidden;
+  border: 1px solid #e5e5e5;
+  border-radius: 8px;
+  transition: border 0.3s;
+}
+.label-condition-input-focused {
+  border-color: #000;
+}
+.label-condition-input-warper {
+  position: relative;
+  width: 100%;
+  height: 100%;
+}
+.label-condition-input-text {
+  position: absolute;
+  top: 12px;
+  left: 15px;
+  z-index: 2;
+  height: 20px;
+  color: #9aa5b5;
+  font-size: 14px;
+  line-height: 20px;
+  transform-origin: top left;
+  cursor: text;
+  transition: all 0.2s ease-out;
+}

package/lib/label-condition-input/style/index.d.ts

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

package/lib/label-condition-input/style/index.js

@@ -0,0 +1,7 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+
+require("./index.less");

package/lib/label-condition-input/style/index.less

@@ -0,0 +1,59 @@
+@import '../../style/themes/default.less';
+
+@color_263241: #263241;
+@color_9aa5b5: #9aa5b5;
+@color_e5e5e5: #e5e5e5;
+
+@font-size-base: 14px;
+@font-size-lg: @font-size-base + 2px;
+
+@font-weight-500: 500;
+
+.label-condition-input {
+  z-index: 1;
+  width: 100%;
+  height: 100%;
+  padding: 19px 15px 2px 15px;
+  color: @color_263241;
+  font-size: @font-size-base;
+  line-height: 16px;
+  border: 0;
+  outline: 0;
+
+  &:focus + label,
+  &:not([data-value='0']) + label {
+    transform: translateY(@labelTextLabeltranslateY) scale(@labelTextLabelScale);
+  }
+
+  &-field {
+    height: 45px;
+    overflow: hidden;
+    border: 1px solid @color_e5e5e5;
+    border-radius: 8px;
+    transition: border 0.3s;
+  }
+
+  &-focused {
+    border-color: @labelFocusBorderColor;
+  }
+
+  &-warper {
+    position: relative;
+    width: 100%;
+    height: 100%;
+  }
+
+  &-text {
+    position: absolute;
+    top: 12px;
+    left: 15px;
+    z-index: 2;
+    height: 20px;
+    color: @color_9aa5b5;
+    font-size: @font-size-base;
+    line-height: 20px;
+    transform-origin: top left;
+    cursor: text;
+    transition: all 0.2s ease-out;
+  }
+}

package/lib/label-number-input/index.d.ts

@@ -0,0 +1,15 @@
+import React from 'react';
+import type { NumberInputProps } from '../number-input';
+export interface LabelNumberInputProps extends NumberInputProps {
+    /** label 标签的文本 */
+    label?: React.ReactNode;
+    /** 输入框除去label之后的最小末尾宽度 */
+    baseMinWidth?: number;
+    /** 组件dom id */
+    id?: string;
+}
+declare const LabelNumberInput: {
+    (props: LabelNumberInputProps): JSX.Element;
+    Option: new (text?: string | undefined, value?: string | undefined, defaultSelected?: boolean | undefined, selected?: boolean | undefined) => HTMLOptionElement;
+};
+export default LabelNumberInput;

package/lib/label-number-input/index.js

@@ -0,0 +1,135 @@
+"use strict";
+
+var __assign = this && this.__assign || function () {
+  __assign = Object.assign || function (t) {
+    for (var s, i = 1, n = arguments.length; i < n; i++) {
+      s = arguments[i];
+
+      for (var p in s) {
+        if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];
+      }
+    }
+
+    return t;
+  };
+
+  return __assign.apply(this, arguments);
+};
+
+var __read = this && this.__read || function (o, n) {
+  var m = typeof Symbol === "function" && o[Symbol.iterator];
+  if (!m) return o;
+  var i = m.call(o),
+      r,
+      ar = [],
+      e;
+
+  try {
+    while ((n === void 0 || n-- > 0) && !(r = i.next()).done) {
+      ar.push(r.value);
+    }
+  } catch (error) {
+    e = {
+      error: error
+    };
+  } finally {
+    try {
+      if (r && !r.done && (m = i["return"])) m.call(i);
+    } finally {
+      if (e) throw e.error;
+    }
+  }
+
+  return ar;
+};
+
+var __importDefault = this && this.__importDefault || function (mod) {
+  return mod && mod.__esModule ? mod : {
+    "default": mod
+  };
+};
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+
+var react_1 = __importDefault(require("react"));
+
+var useControllableValue_1 = __importDefault(require("ahooks/lib/useControllableValue"));
+
+var useSize_1 = __importDefault(require("ahooks/lib/useSize"));
+
+var isUndefined_1 = __importDefault(require("lodash/isUndefined"));
+
+var classnames_1 = __importDefault(require("classnames"));
+
+var omit_1 = __importDefault(require("lodash/omit"));
+
+var number_input_1 = __importDefault(require("../number-input"));
+
+var LabelNumberInput = function LabelNumberInput(props) {
+  var className = props.className,
+      label = props.label,
+      onBlur = props.onBlur,
+      onFocus = props.onFocus,
+      id = props.id,
+      _a = props.baseMinWidth,
+      baseMinWidth = _a === void 0 ? 50 : _a;
+  var numberInputRef = react_1["default"].useRef(null);
+  var labelDomRef = react_1["default"].useRef(null);
+  var labelSize = useSize_1["default"](labelDomRef);
+
+  var _b = __read(useControllableValue_1["default"](props), 2),
+      value = _b[0],
+      setValue = _b[1];
+
+  var _c = __read(react_1["default"].useState(false), 2),
+      focused = _c[0],
+      setFocused = _c[1];
+
+  var handleLabelClick = function handleLabelClick() {
+    var _a;
+
+    setFocused(true);
+    (_a = numberInputRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+  };
+
+  var handleFocus = function handleFocus() {
+    setFocused(true);
+    onFocus === null || onFocus === void 0 ? void 0 : onFocus(value);
+  };
+
+  var handleBlur = function handleBlur(e) {
+    setFocused(false);
+    onBlur === null || onBlur === void 0 ? void 0 : onBlur(e);
+  };
+
+  var controlMinWidth = (labelSize === null || labelSize === void 0 ? void 0 : labelSize.width) ? labelSize.width + baseMinWidth : undefined;
+  return react_1["default"].createElement("div", {
+    className: classnames_1["default"]('label-number-input-warper', className),
+    id: id,
+    style: {
+      minWidth: controlMinWidth
+    }
+  }, react_1["default"].createElement("div", {
+    className: classnames_1["default"]('label-number-input-field', {
+      'label-number-input-focused': focused || !isUndefined_1["default"](value)
+    })
+  }, react_1["default"].createElement(number_input_1["default"], __assign({}, omit_1["default"](props, ['onChange', 'onBlur', 'onFocus', 'className', 'label', 'placeholder']), {
+    ref: numberInputRef,
+    "data-value": !isUndefined_1["default"](value) ? ("" + value).length : 0,
+    value: value,
+    onBlur: handleBlur,
+    onFocus: handleFocus,
+    className: "label-number-input",
+    onChange: function onChange(inputValue) {
+      return setValue(inputValue);
+    }
+  })), react_1["default"].createElement("label", {
+    className: "label-number-input-text",
+    onClick: handleLabelClick
+  }, label)));
+};
+
+exports["default"] = LabelNumberInput;
+LabelNumberInput.Option = Option;