@autobest-ui/components 2.5.3 → 2.6.0

package/lib/input/Input.js

@@ -0,0 +1,188 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.InputNotRef = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _utils = require("@autobest-ui/utils");
+var _Adorn = _interopRequireDefault(require("./Adorn"));
+var __extends = void 0 && (void 0).__extends || function () {
+  var _extendStatics = function extendStatics(d, b) {
+    _extendStatics = Object.setPrototypeOf || {
+      __proto__: []
+    } instanceof Array && function (d, b) {
+      d.__proto__ = b;
+    } || function (d, b) {
+      for (var p in b) {
+        if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p];
+      }
+    };
+    return _extendStatics(d, b);
+  };
+  return function (d, b) {
+    if (typeof b !== "function" && b !== null) throw new TypeError("Class extends value " + String(b) + " is not a constructor or null");
+    _extendStatics(d, b);
+    function __() {
+      this.constructor = d;
+    }
+    d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
+  };
+}();
+var __assign = void 0 && (void 0).__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 InputNotRef = /** @class */function (_super) {
+  __extends(InputNotRef, _super);
+  function InputNotRef(props) {
+    var _this = _super.call(this, props) || this;
+    _this.prefixCls = 'ab-input';
+    _this.inputRef = /*#__PURE__*/_react.default.createRef();
+    _this.isFileUpload = function () {
+      return _this.props.type === 'file';
+    };
+    _this.getFileInfo = function (element) {
+      return element && element.files && element.files.length ? element.files[0] : undefined;
+    };
+    /**
+     * 修改value值的回调
+     * @param ev
+     */
+    _this.onChange = function (ev) {
+      if (_this.props.disabled) {
+        return;
+      }
+      var _a = _this.props,
+        onChange = _a.onChange,
+        name = _a.name;
+      if (_this.isFileUpload()) {
+        if (onChange) {
+          onChange(_this.getFileInfo(ev.target), name);
+        }
+        return;
+      }
+      var value = ev.target.value;
+      if (onChange) {
+        onChange(value, name);
+        return;
+      }
+      _this.setState({
+        value: value
+      });
+    };
+    _this.onFocus = function (ev) {
+      var _a = _this.props,
+        name = _a.name,
+        onFocus = _a.onFocus;
+      if (_this.isFileUpload()) {
+        if (onFocus) {
+          onFocus(_this.getFileInfo(ev.target), name);
+        }
+        return;
+      }
+      var value = ev.target.value;
+      if (onFocus) {
+        onFocus(value, name);
+      }
+    };
+    _this.onBlur = function (ev) {
+      var _a = _this.props,
+        name = _a.name,
+        onBlur = _a.onBlur;
+      if (_this.isFileUpload()) {
+        if (onBlur) {
+          onBlur(_this.getFileInfo(ev.target), name);
+        }
+        return;
+      }
+      var value = ev.target.value;
+      if (onBlur) {
+        onBlur(value, name);
+      }
+    };
+    _this.state = {
+      value: props.defaultValue || ''
+    };
+    return _this;
+  }
+  InputNotRef.getDerivedStateFromProps = function (nextProps, prevStates) {
+    var nextState = {};
+    // 判断是否为受控方式
+    if ('value' in nextProps && nextProps.type !== 'file') {
+      if (nextProps.value !== prevStates.value) {
+        nextState.value = nextProps.value;
+      }
+    }
+    if ((0, _utils.isEmptyObject)(nextState)) {
+      return null;
+    }
+    return nextState;
+  };
+  InputNotRef.prototype.componentDidMount = function () {
+    // 设置input焦点
+    if (this.props.autoFocus) {
+      var element = this.inputRef.current;
+      if (!element) {
+        return;
+      }
+      element.focus();
+    }
+  };
+  InputNotRef.prototype.render = function () {
+    var cls = this.prefixCls;
+    var _a = this.props,
+      upperRef = _a.upperRef,
+      placeholder = _a.placeholder,
+      disabled = _a.disabled,
+      style = _a.style,
+      type = _a.type,
+      accept = _a.accept,
+      className = _a.className,
+      prefix = _a.prefix,
+      suffix = _a.suffix;
+    var value = this.state.value;
+    var isFileUpload = this.isFileUpload();
+    return /*#__PURE__*/_react.default.createElement(_Adorn.default, {
+      prefixCls: cls,
+      onFocus: this.onFocus,
+      onBlur: this.onBlur,
+      className: className,
+      disabled: disabled,
+      prefix: prefix,
+      suffix: suffix
+    }, /*#__PURE__*/_react.default.createElement("input", {
+      className: "".concat(cls, "-control"),
+      ref: (0, _utils.composeRef)(this.inputRef, upperRef),
+      type: type,
+      placeholder: placeholder,
+      disabled: disabled,
+      accept: accept,
+      style: style,
+      value: isFileUpload ? undefined : value || '',
+      onChange: this.onChange
+    }));
+  };
+  InputNotRef.defaultProps = {
+    defaultValue: '',
+    type: 'text'
+  };
+  return InputNotRef;
+}(_react.default.Component);
+exports.InputNotRef = InputNotRef;
+var Input = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
+  return /*#__PURE__*/_react.default.createElement(InputNotRef, __assign({}, props, {
+    upperRef: ref
+  }));
+});
+var _default = Input;
+exports.default = _default;

package/lib/input/TextArea.d.ts

@@ -0,0 +1,68 @@
+import React from 'react';
+import { AdornProps } from './Adorn';
+export interface TextAreaProps extends Omit<AdornProps, 'prefixCls' | 'children' | 'onBlur' | 'onFocus' | 'suffix'>, Omit<React.TextareaHTMLAttributes<any>, 'onChange' | 'onBlur' | 'onFocus' | 'prefix'> {
+    /**
+     * 输入框默认值，用于非受控组件，配合ref使用
+     */
+    defaultValue?: string;
+    /**
+     * 输入框中的值
+     */
+    value?: string;
+    /**
+     * 输入框的别名
+     */
+    name?: string;
+    /**
+     * 初始化后自动获取焦点
+     */
+    autoFocus?: boolean;
+    /**
+     * 字符串最大值
+     */
+    maxlength?: number;
+    /**
+     * 值修改后的回调函数，用于修改value属性
+     */
+    onChange?: (value: string | undefined, name?: string) => void;
+    /**
+     * 获得焦点的回调函数
+     */
+    onFocus?: (value: string | undefined, name?: string) => void;
+    /**
+     * 失去焦点的回调函数
+     */
+    onBlur?: (value: string | undefined, name?: string) => void;
+}
+interface TextareaStates {
+    value: string | undefined;
+    currentLength: number;
+}
+interface TextAreaPropsWithRef extends TextAreaProps {
+    /**
+     * 此属性可以忽略， storybook问题
+     */
+    upperRef: React.Ref<HTMLTextAreaElement>;
+}
+export declare class TextAreaNotRef extends React.Component<TextAreaPropsWithRef, TextareaStates> {
+    prefixCls: string;
+    textareaRef: React.RefObject<HTMLTextAreaElement>;
+    static defaultProps: {
+        defaultValue: string;
+        maxlength: number;
+    };
+    constructor(props: TextAreaPropsWithRef);
+    static getDerivedStateFromProps(nextProps: TextAreaPropsWithRef, prevStates: TextareaStates): TextareaStates;
+    componentDidMount(): void;
+    /**
+     * 修改value值的回调
+     * @param ev
+     */
+    onChange: (ev: React.ChangeEvent<HTMLTextAreaElement>) => void;
+    onFocus: (ev: React.FocusEvent<HTMLTextAreaElement>) => void;
+    onBlur: (ev: React.FocusEvent<HTMLTextAreaElement>) => void;
+    renderSuffix(): React.ReactElement;
+    render(): JSX.Element;
+}
+declare const TextArea: React.ForwardRefExoticComponent<TextAreaProps & React.RefAttributes<HTMLTextAreaElement>>;
+export default TextArea;

package/lib/input/TextArea.js

@@ -0,0 +1,180 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.TextAreaNotRef = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _utils = require("@autobest-ui/utils");
+var _Adorn = _interopRequireDefault(require("./Adorn"));
+var __extends = void 0 && (void 0).__extends || function () {
+  var _extendStatics = function extendStatics(d, b) {
+    _extendStatics = Object.setPrototypeOf || {
+      __proto__: []
+    } instanceof Array && function (d, b) {
+      d.__proto__ = b;
+    } || function (d, b) {
+      for (var p in b) {
+        if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p];
+      }
+    };
+    return _extendStatics(d, b);
+  };
+  return function (d, b) {
+    if (typeof b !== "function" && b !== null) throw new TypeError("Class extends value " + String(b) + " is not a constructor or null");
+    _extendStatics(d, b);
+    function __() {
+      this.constructor = d;
+    }
+    d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
+  };
+}();
+var __assign = void 0 && (void 0).__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);
+};
+function getValueLength(value) {
+  return (0, _utils.isBlank)(value) ? 0 : value.length;
+}
+var TextAreaNotRef = /** @class */function (_super) {
+  __extends(TextAreaNotRef, _super);
+  function TextAreaNotRef(props) {
+    var _this = _super.call(this, props) || this;
+    _this.prefixCls = 'ab-textarea';
+    _this.textareaRef = /*#__PURE__*/_react.default.createRef();
+    /**
+     * 修改value值的回调
+     * @param ev
+     */
+    _this.onChange = function (ev) {
+      if (_this.props.disabled) {
+        return;
+      }
+      var value = ev.target.value;
+      if (_this.props.maxlength > 0) {
+        var currentLength = getValueLength(value);
+        if (_this.props.maxlength && currentLength > _this.props.maxlength) {
+          return;
+        }
+        _this.setState({
+          currentLength: currentLength
+        });
+      }
+      var _a = _this.props,
+        onChange = _a.onChange,
+        name = _a.name;
+      if (onChange) {
+        onChange(value, name);
+        return;
+      }
+      _this.setState({
+        value: value
+      });
+    };
+    _this.onFocus = function (ev) {
+      var _a = _this.props,
+        name = _a.name,
+        onFocus = _a.onFocus;
+      var value = ev.target.value;
+      if (onFocus) {
+        onFocus(value, name);
+      }
+    };
+    _this.onBlur = function (ev) {
+      var value = ev.target.value;
+      var _a = _this.props,
+        name = _a.name,
+        onBlur = _a.onBlur;
+      if (onBlur) {
+        onBlur(value, name);
+      }
+    };
+    var value = props.defaultValue || '';
+    _this.state = {
+      value: value,
+      currentLength: getValueLength(value)
+    };
+    return _this;
+  }
+  TextAreaNotRef.getDerivedStateFromProps = function (nextProps, prevStates) {
+    var nextState = {};
+    // 判断是否为受控方式
+    if ('value' in nextProps) {
+      if (nextProps.value !== prevStates.value) {
+        nextState.value = nextProps.value;
+        nextState.currentLength = getValueLength(nextProps.value);
+      }
+    }
+    if ((0, _utils.isEmptyObject)(nextState)) {
+      return null;
+    }
+    return nextState;
+  };
+  TextAreaNotRef.prototype.componentDidMount = function () {
+    // 设置Textarea焦点
+    if (this.props.autoFocus) {
+      var element = this.textareaRef.current;
+      if (!element) {
+        return;
+      }
+      element.focus();
+    }
+  };
+  TextAreaNotRef.prototype.renderSuffix = function () {
+    var maxlength = this.props.maxlength;
+    if (!maxlength || maxlength < 0) {
+      return null;
+    }
+    return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, this.state.currentLength, "/", maxlength);
+  };
+  TextAreaNotRef.prototype.render = function () {
+    var cls = this.prefixCls;
+    var _a = this.props,
+      upperRef = _a.upperRef,
+      placeholder = _a.placeholder,
+      disabled = _a.disabled,
+      style = _a.style,
+      className = _a.className,
+      prefix = _a.prefix;
+    var value = this.state.value;
+    return /*#__PURE__*/_react.default.createElement(_Adorn.default, {
+      prefixCls: cls,
+      onFocus: this.onFocus,
+      onBlur: this.onBlur,
+      className: className,
+      disabled: disabled,
+      prefix: prefix,
+      suffix: this.renderSuffix()
+    }, /*#__PURE__*/_react.default.createElement("textarea", {
+      className: "".concat(cls, "-control"),
+      ref: (0, _utils.composeRef)(this.textareaRef, upperRef),
+      placeholder: placeholder,
+      disabled: disabled,
+      style: style,
+      value: value || '',
+      onChange: this.onChange
+    }));
+  };
+  TextAreaNotRef.defaultProps = {
+    defaultValue: '',
+    maxlength: 0
+  };
+  return TextAreaNotRef;
+}(_react.default.Component);
+exports.TextAreaNotRef = TextAreaNotRef;
+var TextArea = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
+  return /*#__PURE__*/_react.default.createElement(TextAreaNotRef, __assign({}, props, {
+    upperRef: ref
+  }));
+});
+var _default = TextArea;
+exports.default = _default;

package/lib/input/index.d.ts

@@ -0,0 +1,4 @@
+export { InputProps, InputValue } from './Input';
+export { default as Input } from './Input';
+export { TextAreaProps } from './TextArea';
+export { default as TextArea } from './TextArea';

package/lib/input/index.js

@@ -0,0 +1,20 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "Input", {
+  enumerable: true,
+  get: function get() {
+    return _Input.default;
+  }
+});
+Object.defineProperty(exports, "TextArea", {
+  enumerable: true,
+  get: function get() {
+    return _TextArea.default;
+  }
+});
+var _Input = _interopRequireDefault(require("./Input"));
+var _TextArea = _interopRequireDefault(require("./TextArea"));

package/lib/input/style/input.css

@@ -0,0 +1 @@
+.ab-input{display:flex;align-items:center;border:1px solid #ccc;overflow:hidden;position:relative;border-radius:.04rem}.ab-input-prefix{padding-left:.06rem}.ab-input-suffix{padding-right:.06rem}.ab-input.ab-input-enter,.ab-input.ab-input-focus{border-color:#348fee}.ab-input.ab-input-focus{box-shadow:0 0 4px #348fee}.ab-input.ab-input-disabled .ab-input-control{cursor:not-allowed}.ab-input-control{appearance:none;display:block;outline:0;border:none;width:100%;height:100%;padding:.06rem;background-color:transparent;font-size:inherit}

package/lib/input/style/textArea.css

@@ -0,0 +1 @@
+.ab-textarea{display:flex;align-items:center;border:1px solid #ccc;overflow:hidden;position:relative;border-radius:.04rem}.ab-textarea-prefix{padding-left:.06rem}.ab-textarea.ab-textarea-enter,.ab-textarea.ab-textarea-focus{border-color:#348fee}.ab-textarea.ab-textarea-focus{box-shadow:0 0 4px #348fee}.ab-textarea.ab-textarea-disabled .ab-textarea-control{cursor:not-allowed}.ab-textarea-control{resize:none;appearance:none;display:block;outline:0;border:none;width:100%;min-height:1.2rem;height:100%;padding:.06rem;background-color:transparent;font-size:inherit;line-height:1.4}.ab-textarea-suffix{position:absolute;right:.08rem;bottom:.06rem;color:#aaa;font-size:.13rem;padding-right:0}

package/lib/input-number/ControlArrow.js

@@ -23,9 +23,7 @@ function ArrowIcon(props) {
   }));
 }
 function ControlArrow(props) {
-  return /*#__PURE__*/_react.default.createElement("div", {
-    className: "".concat(props.cls, "-arrow")
-  }, /*#__PURE__*/_react.default.createElement("span", {
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("span", {
     className: "".concat(props.cls, "-up"),
     onMouseDown: props.onKeyup
   }, /*#__PURE__*/_react.default.createElement(ArrowIcon, {

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

@@ -1,6 +1,7 @@
 import React from 'react';
 import { AddListenerEventHandler } from '@autobest-ui/utils';
-export interface InputNumberProps extends Omit<React.InputHTMLAttributes<any>, 'onChange' | 'onBlur' | 'onFocus'> {
+import { InputProps, InputValue } from '../input/Input';
+export interface InputNumberProps extends Omit<InputProps, 'value' | 'defaultValue' | 'onChange' | 'onBlur' | 'onFocus' | 'suffix'> {
     /**
      * 输入框默认值，用于非受控组件，配合ref使用
      */
@@ -9,14 +10,6 @@ export interface InputNumberProps extends Omit<React.InputHTMLAttributes<any>, '
      * 输入框中的值
      */
     value?: number | string;
-    /**
-     * input样式
-     */
-    className?: string;
-    /**
-     * 输入框的别名
-     */
-    name?: string;
     /**
      * 最小值
      */
@@ -66,8 +59,6 @@ export interface InputNumberProps extends Omit<React.InputHTMLAttributes<any>, '
 interface InputNumberStates {
     originalValueStr: string | undefined;
     parserValue: number | undefined;
-    isEnterInput: boolean;
-    isFocusInput: boolean;
 }
 interface InputNumberPropsWithRef extends InputNumberProps {
     /**
@@ -103,26 +94,17 @@ export declare class InputNumberNotRef extends React.Component<InputNumberPropsW
      */
     setInputFocus: () => void;
     onKeyboard: (ev: KeyboardEvent) => void;
-    onFocus: (ev: {
-        target: HTMLInputElement;
-    }) => void;
-    onBlur: (ev: {
-        target: HTMLInputElement;
-    }) => void;
+    onFocus: (originalValueStr: InputValue, name?: string) => void;
+    onBlur: (originalValueStr: InputValue, name?: string) => void;
     /**
      * 修改value值的回调
      * 注：value值当不在合法时，将不再触发onChange
      * 在输入结束后（onBlur时），触发最后一次
-     * @param ev
      */
-    onChangeValue: (ev: {
-        target: HTMLInputElement;
-    }) => void;
+    onChange: (originalValueStr: InputValue, name?: string) => void;
     onKeyup: (ev: React.MouseEvent) => void;
     onKeydown: (ev: React.MouseEvent) => void;
-    onMouseEnter: () => void;
-    onMouseLeave: () => void;
     render(): JSX.Element;
 }
-declare const InputNumber: React.ComponentType<InputNumberProps>;
+declare const InputNumber: React.ForwardRefExoticComponent<InputNumberProps & React.RefAttributes<HTMLInputElement>>;
 export default InputNumber;