@autobest-ui/components 2.5.2 → 2.6.0

package/esm/index.d.ts

@@ -28,6 +28,8 @@ export type { GuideProps } from './guide';
 export { default as Guide } from './guide';
 export type { DrawerProps } from './drawer';
 export { default as Drawer } from './drawer';
+export type { InputValue, InputProps, TextAreaProps } from './input';
+export { Input, TextArea } from './input';
 export type { InputNumberProps } from './input-number';
 export { default as InputNumber } from './input-number';
 export type { LazyImageProps } from './lazy-image';

package/esm/index.js

@@ -13,6 +13,7 @@ export { default as Collapse } from './collapse';
 export { default as Carousel } from './carousel';
 export { default as Guide } from './guide';
 export { default as Drawer } from './drawer';
+export { Input, TextArea } from './input';
 export { default as InputNumber } from './input-number';
 export { default as LazyImage } from './lazy-image';
 export { default as LinkList } from './link-list';

package/esm/input/Adorn.d.ts

@@ -0,0 +1,37 @@
+import React from 'react';
+export interface AdornProps {
+    /**
+     * 包裹的input组件
+     */
+    children: React.ReactElement;
+    /**
+     * 样式前缀，这个需要使用者提供前缀
+     */
+    prefixCls: string;
+    /**
+     * 样式
+     */
+    className?: string;
+    /**
+     * 在输入框内部添加前缀
+     */
+    prefix?: React.ReactChild;
+    /**
+     * 在输入框内部添加后缀
+     */
+    suffix?: React.ReactChild;
+    /**
+     * 输入框是否可以操作
+     */
+    disabled?: boolean;
+    /**
+     * onFocus
+     */
+    onFocus?: (ev: React.FocusEvent<HTMLInputElement & HTMLTextAreaElement>) => void;
+    /**
+     * onBlur
+     */
+    onBlur?: (ev: React.FocusEvent<HTMLInputElement & HTMLTextAreaElement>) => void;
+}
+declare const Adorn: React.FC<AdornProps>;
+export default Adorn;

package/esm/input/Adorn.js

@@ -0,0 +1,67 @@
+import React, { useCallback, useState } from 'react';
+import classNames from 'classnames';
+import { isBlank } from '@autobest-ui/utils';
+var Adorn = function Adorn(props) {
+  var _a, _b, _c;
+  var _d = useState(false),
+    isEnter = _d[0],
+    changeEnterStatus = _d[1];
+  var _e = useState(false),
+    isFocus = _e[0],
+    changeFocusStatus = _e[1];
+  var className = props.className,
+    disabled = props.disabled,
+    prefix = props.prefix,
+    suffix = props.suffix,
+    prefixCls = props.prefixCls,
+    children = props.children,
+    onFocus = props.onFocus,
+    onBlur = props.onBlur;
+  var onMouseEnterCallback = useCallback(function () {
+    if (isEnter || disabled) {
+      return;
+    }
+    changeEnterStatus(true);
+  }, [isEnter, disabled]);
+  var onMouseLeaveCallback = useCallback(function () {
+    if (!isEnter || disabled) {
+      return;
+    }
+    changeEnterStatus(false);
+  }, [isEnter, disabled]);
+  var onFocusCallback = useCallback(function (ev) {
+    if (disabled) {
+      return;
+    }
+    if (!isFocus) {
+      changeFocusStatus(true);
+    }
+    if (onFocus) {
+      onFocus(ev);
+    }
+  }, [onFocus, isFocus, disabled]);
+  var onBlurCallback = useCallback(function (ev) {
+    if (isFocus) {
+      changeFocusStatus(false);
+    }
+    if (disabled) {
+      return;
+    }
+    if (onBlur) {
+      onBlur(ev);
+    }
+  }, [onBlur, isFocus, disabled]);
+  return /*#__PURE__*/React.createElement("div", {
+    className: classNames(prefixCls, className, (_a = {}, _a["".concat(prefixCls, "-enter")] = isEnter || isFocus, _a), (_b = {}, _b["".concat(prefixCls, "-focus")] = isFocus, _b), (_c = {}, _c["".concat(prefixCls, "-disabled")] = disabled, _c)),
+    onMouseEnter: onMouseEnterCallback,
+    onMouseLeave: onMouseLeaveCallback
+  }, !isBlank(prefix) ? /*#__PURE__*/React.createElement("div", {
+    className: "".concat(prefixCls, "-prefix")
+  }, prefix) : null, /*#__PURE__*/React.cloneElement(children, {
+    onFocus: onFocusCallback,
+    onBlur: onBlurCallback
+  }), !isBlank(suffix) ? /*#__PURE__*/React.createElement("div", {
+    className: "".concat(prefixCls, "-suffix")
+  }, suffix) : null);
+};
+export default Adorn;

package/esm/input/Input.d.ts

@@ -0,0 +1,65 @@
+import React from 'react';
+import { AdornProps } from './Adorn';
+export declare type InputValue = string | File | undefined;
+export interface InputProps extends Omit<AdornProps, 'prefixCls' | 'children' | 'onBlur' | 'onFocus'>, Omit<React.InputHTMLAttributes<any>, 'onChange' | 'onBlur' | 'onFocus' | 'prefix' | 'multiple'> {
+    /**
+     * 输入框默认值，用于非受控组件，配合ref使用
+     */
+    defaultValue?: string;
+    /**
+     * 输入框中的值
+     */
+    value?: string;
+    /**
+     * 输入框的别名
+     */
+    name?: string;
+    /**
+     * 初始化后自动获取焦点
+     */
+    autoFocus?: boolean;
+    /**
+     * 值修改后的回调函数，用于修改value属性
+     */
+    onChange?: (value: InputValue, name?: string) => void;
+    /**
+     * 获得焦点的回调函数
+     */
+    onFocus?: (value: InputValue, name?: string) => void;
+    /**
+     * 失去焦点的回调函数
+     */
+    onBlur?: (value: InputValue, name?: string) => void;
+}
+interface InputStates {
+    value: string | undefined;
+}
+interface InputPropsWithRef extends InputProps {
+    /**
+     * 此属性可以忽略， storybook问题
+     */
+    upperRef: React.Ref<HTMLInputElement>;
+}
+export declare class InputNotRef extends React.Component<InputPropsWithRef, InputStates> {
+    prefixCls: string;
+    inputRef: React.RefObject<HTMLInputElement>;
+    static defaultProps: {
+        defaultValue: string;
+        type: string;
+    };
+    constructor(props: InputPropsWithRef);
+    static getDerivedStateFromProps(nextProps: InputPropsWithRef, prevStates: InputStates): InputStates;
+    componentDidMount(): void;
+    isFileUpload: () => boolean;
+    getFileInfo: (element: HTMLInputElement) => File;
+    /**
+     * 修改value值的回调
+     * @param ev
+     */
+    onChange: (ev: React.ChangeEvent<HTMLInputElement>) => void;
+    onFocus: (ev: React.FocusEvent<HTMLInputElement>) => void;
+    onBlur: (ev: React.FocusEvent<HTMLInputElement>) => void;
+    render(): JSX.Element;
+}
+declare const Input: React.ForwardRefExoticComponent<InputProps & React.RefAttributes<HTMLInputElement>>;
+export default Input;

package/esm/input/Input.js

@@ -0,0 +1,180 @@
+var __extends = this && this.__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 = 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);
+};
+import React from 'react';
+import { composeRef, isEmptyObject } from '@autobest-ui/utils';
+import Adorn from './Adorn';
+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.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 (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.createElement(Adorn, {
+      prefixCls: cls,
+      onFocus: this.onFocus,
+      onBlur: this.onBlur,
+      className: className,
+      disabled: disabled,
+      prefix: prefix,
+      suffix: suffix
+    }, /*#__PURE__*/React.createElement("input", {
+      className: "".concat(cls, "-control"),
+      ref: 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.Component);
+export { InputNotRef };
+var Input = /*#__PURE__*/React.forwardRef(function (props, ref) {
+  return /*#__PURE__*/React.createElement(InputNotRef, __assign({}, props, {
+    upperRef: ref
+  }));
+});
+export default Input;

package/esm/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/esm/input/TextArea.js

@@ -0,0 +1,172 @@
+var __extends = this && this.__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 = 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);
+};
+import React from 'react';
+import { composeRef, isBlank, isEmptyObject } from '@autobest-ui/utils';
+import Adorn from './Adorn';
+function getValueLength(value) {
+  return 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.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 (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.createElement(React.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.createElement(Adorn, {
+      prefixCls: cls,
+      onFocus: this.onFocus,
+      onBlur: this.onBlur,
+      className: className,
+      disabled: disabled,
+      prefix: prefix,
+      suffix: this.renderSuffix()
+    }, /*#__PURE__*/React.createElement("textarea", {
+      className: "".concat(cls, "-control"),
+      ref: composeRef(this.textareaRef, upperRef),
+      placeholder: placeholder,
+      disabled: disabled,
+      style: style,
+      value: value || '',
+      onChange: this.onChange
+    }));
+  };
+  TextAreaNotRef.defaultProps = {
+    defaultValue: '',
+    maxlength: 0
+  };
+  return TextAreaNotRef;
+}(React.Component);
+export { TextAreaNotRef };
+var TextArea = /*#__PURE__*/React.forwardRef(function (props, ref) {
+  return /*#__PURE__*/React.createElement(TextAreaNotRef, __assign({}, props, {
+    upperRef: ref
+  }));
+});
+export default TextArea;

package/esm/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/esm/input/index.js

@@ -0,0 +1,2 @@
+export { default as Input } from './Input';
+export { default as TextArea } from './TextArea';

package/esm/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/esm/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/esm/input-number/ControlArrow.js

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