shineout 1.12.2 → 1.12.3

package/esm/Input/Password.js

@@ -0,0 +1,73 @@
+import _extends from "@babel/runtime/helpers/extends";
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/objectWithoutPropertiesLoose";
+import _inheritsLoose from "@babel/runtime/helpers/inheritsLoose";
+import _assertThisInitialized from "@babel/runtime/helpers/assertThisInitialized";
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import React, { PureComponent } from 'react';
+import Input from './Input';
+var DefaultValue = {
+  value: '',
+  point: '•'
+};
+
+var Password =
+/*#__PURE__*/
+function (_PureComponent) {
+  _inheritsLoose(Password, _PureComponent);
+
+  function Password(props) {
+    var _this;
+
+    _this = _PureComponent.call(this, props) || this;
+    _this.handleChange = _this.handleChange.bind(_assertThisInitialized(_assertThisInitialized(_this)));
+    return _this;
+  }
+
+  var _proto = Password.prototype;
+
+  _proto.handleChange = function handleChange(val) {
+    var _this$props = this.props,
+        _this$props$value = _this$props.value,
+        value = _this$props$value === void 0 ? DefaultValue.value : _this$props$value,
+        _this$props$point = _this$props.point,
+        point = _this$props$point === void 0 ? DefaultValue.point : _this$props$point,
+        clearToUndefined = _this$props.clearToUndefined;
+
+    if (val === undefined && clearToUndefined) {
+      this.props.onChange(undefined);
+      return;
+    }
+
+    var newValue = [];
+    val.split('').forEach(function (v, i) {
+      newValue.push(v === point ? value[i] : v);
+    });
+    this.props.onChange(newValue.join(''));
+  };
+
+  _proto.render = function render() {
+    var _this$props2 = this.props,
+        _this$props2$point = _this$props2.point,
+        point = _this$props2$point === void 0 ? DefaultValue.point : _this$props2$point,
+        _this$props2$value = _this$props2.value,
+        value = _this$props2$value === void 0 ? DefaultValue.value : _this$props2$value,
+        others = _objectWithoutPropertiesLoose(_this$props2, ["point", "value"]);
+
+    var transValue = Array.from({
+      length: value.length
+    }, function () {
+      return point;
+    }).join('');
+    return React.createElement(Input, _extends({}, others, {
+      type: "text",
+      value: transValue,
+      onChange: this.handleChange
+    }));
+  };
+
+  return Password;
+}(PureComponent);
+
+_defineProperty(Password, "defaultProps", DefaultValue);
+
+export default Password;

package/esm/Input/Props.d.ts

@@ -0,0 +1,311 @@
+import * as React from 'react';
+import { StandardProps, ObjectType } from '../@types/common';
+import { GetInputableProps } from '../Form/Props';
+import { GetInputBorderProps, GetDelayProps, GetCoinProps, CoinProps } from '../hoc/Props';
+declare type ReactNode = React.ReactNode;
+export declare type numType = 'positive' | 'non-negative';
+declare type InputValue = string;
+export declare type NumberValue = InputValue | number | null;
+declare type WidthInputHTMLAttribute<U> = U & Omit<React.InputHTMLAttributes<any>, keyof U>;
+export interface Props extends StandardProps, Pick<CoinProps, 'coin'> {
+    /**
+     * value
+     *
+     * 输入值
+     *
+     * default: null
+     */
+    value?: InputValue;
+    /**
+     * onChange
+     *
+     * 值改变回调
+     *
+     * default: null
+     */
+    onChange: (value?: InputValue) => void;
+    /**
+     * width
+     *
+     * 宽度
+     *
+     * default: null
+     */
+    width?: number;
+    /**
+     * If clearable is true, show clear value icon
+     *
+     * 是否可清除值
+     *
+     * default: false
+     */
+    clearable?: boolean | (() => void);
+    /**
+     * The callback function for enter key
+     *
+     * 回车键回调函数
+     *
+     * default: -
+     */
+    onEnterPress?: (value: InputValue, e?: any) => void;
+    /**
+     * The callback function for key down
+     *
+     * 键盘按下回调
+     *
+     * default: none
+     */
+    onKeyDown?: (e: React.KeyboardEvent) => void;
+    /**
+     * The callback function for key up
+     *
+     * 键盘按下后抬起的回调
+     *
+     * default: none
+     */
+    onKeyUp?: (e: React.KeyboardEvent) => void;
+    /**
+     * Same as the type of the native input tag
+     *
+     * 同原生 input 标签的 type
+     *
+     * default: 'text'
+     */
+    type?: string;
+    /**
+     * Infomation
+     *
+     * 提示信息
+     *
+     * default: -
+     */
+    info?: ((msg: string) => string) | number;
+    /**
+     * input max length
+     *
+     * 可输入最大长度
+     *
+     * default: none
+     */
+    maxLength?: number;
+    /**
+     * get input element
+     *
+     * 获取 input dom 元素
+     *
+     * default: -
+     */
+    forwardedRef?: (el: HTMLElement) => void;
+    /**
+     * show border bottom
+     *
+     * 仅仅展示下边框
+     *
+     * default: false
+     */
+    underline?: boolean;
+    /**
+     * inner title
+     *
+     * 内嵌标题
+     *
+     * default: -
+     */
+    innerTitle?: ReactNode;
+    /**
+     * Placeholder title, which needs to be used together with innerTitle
+     *
+     * 占位标题，需要配合 innerTitle 一起使用
+     *
+     * default: -
+     */
+    placeTitle?: ReactNode;
+    /**
+     *  After clicking the clear button, the data becomes undefined
+     *
+     *  点击清除按钮后数据变为 undefined
+     *
+     *  default: -
+     *
+     */
+    clearToUndefined?: boolean;
+    /**
+     * Decimal place limit (valid when type is number)
+     *
+     * the digits of number 仅在type = number 下生效
+     *
+     * default: -
+     */
+    digits?: number;
+    /**
+     *  Integer bit limit (valid when type is number)
+     *
+     *  整数位数限制, 仅在type = number 下生效
+     *
+     *  default: -
+     *
+     */
+    integerLimit?: number;
+    /**
+     *  Number type supports 'positive' and 'non-negative', only works when type = number
+     *
+     *  设置数字类型 支持 'positive' 和 'non-negative', 仅在type = number 下生效
+     *
+     *  default: -
+     *
+     */
+    numType?: numType;
+    /**
+     *  Automatically select all data after mouse click
+     *
+     *  鼠标点击后自动全选数据
+     *
+     *  default: false
+     *
+     */
+    autoSelect?: boolean;
+    /**
+     *  Automatically fill up according to the precision limit of digits after out of focus
+     *
+     *  失焦后自动按照 digits 精度限制补足 (type 为 number 时生效)
+     *
+     *  default: false
+     *
+     */
+    autoFix?: boolean;
+    /**
+     *  The original property of html
+     *
+     *  原生html属性
+     *
+     *  default: -
+     *
+     */
+    htmlName?: string;
+    disabled?: boolean;
+    inputFocus?: boolean;
+    /**
+     *  The callback of blur
+     *
+     *  失去焦点后的回调
+     *
+     *  default: -
+     *
+     */
+    onBlur: React.FocusEventHandler;
+    /**
+     * The callback when Textarea focus
+     *
+     * 聚焦后的回调
+     *
+     * default: -
+     */
+    onFocus: React.FocusEventHandler;
+    cancelChange?: () => void;
+    forceChange?: (value: unknown, ...args: unknown[]) => void;
+    placeholder?: string;
+    name?: string;
+    defaultValue?: InputValue;
+    trim?: boolean;
+}
+export declare type InputProps = WidthInputHTMLAttribute<GetInputableProps<GetInputBorderProps<GetDelayProps<GetCoinProps<Props>>>, InputValue>>;
+export interface ClearProps {
+    onClick: (e: React.ChangeEvent<Element>, clearClick: boolean) => void;
+    clearResult?: string;
+}
+export interface InputNumber extends Omit<Props, 'value' | 'defaultValue' | 'onChange'> {
+    /**
+     * The minimum value
+     *
+     * 最小值
+     *
+     * default: -
+     */
+    min?: number;
+    /**
+     * The maximum value
+     *
+     * 最大值
+     *
+     * default: -
+     */
+    max?: number;
+    /**
+     * Change the digital span. It can be decimal.
+     *
+     * 改变数字跨度，可为小数
+     *
+     * default: 1
+     */
+    step?: number;
+    value?: string | number;
+    defaultValue?: NumberValue;
+    disabled?: boolean;
+    /**
+     * allow value is null
+     *
+     * 允许空值
+     *
+     * default: false
+     */
+    allowNull?: boolean;
+    /**
+     * Whether to show increase/decrease buttons
+     *
+     * 是否展示增减按钮
+     *
+     * default: false
+     */
+    hideArrow?: boolean;
+    onChange: (value?: NumberValue) => void;
+    /**
+     * The callback function for mouse down
+     *
+     * 鼠标按下后的回调
+     *
+     * default: none
+     */
+    onMouseDown?: (e: React.MouseEvent) => void;
+    /**
+     * The callback function for mouse up
+     *
+     * 鼠标按下后抬起的回调
+     *
+     * default: none
+     */
+    onMouseUp?: (e: React.MouseEvent) => void;
+}
+export declare type InputNumberProps<Value = string> = WidthInputHTMLAttribute<GetInputableProps<GetInputBorderProps<GetCoinProps<InputNumber>>, Value>>;
+export interface InputPassword extends Props {
+    /**
+     * password symbol
+     *
+     * 密码符号
+     *
+     * default: '.'
+     */
+    point?: string;
+}
+export declare type InputPasswordProps<Value = string> = WidthInputHTMLAttribute<GetInputableProps<GetInputBorderProps<InputPassword>, Value>>;
+export interface InputGroupBaseProps {
+    children?: ReactNode;
+}
+export interface InputGroupProps extends InputGroupBaseProps, ObjectType {
+}
+export declare class InputNumberClass extends React.Component<InputNumberProps, {}> {
+    render(): JSX.Element;
+}
+export declare class InputGroupClass extends React.Component<InputGroupProps, {}> {
+    render(): JSX.Element;
+}
+export declare class InputPasswordClass extends React.Component<InputPasswordProps, {}> {
+    render(): JSX.Element;
+}
+export declare class InputClass extends React.Component<InputProps, {}> {
+    static Number: typeof InputNumberClass;
+    static Password: typeof InputPasswordClass;
+    static Group: typeof InputGroupClass;
+    render(): JSX.Element;
+}
+export declare type InputType = typeof InputClass;
+export {};

package/esm/Input/Props.js

@@ -0,0 +1 @@
+import * as React from 'react';

package/esm/Input/clear.d.ts

@@ -0,0 +1,8 @@
+import React, { Component } from 'react';
+import { ClearProps } from './Props';
+declare class Clear extends Component<ClearProps> {
+    constructor(props: ClearProps);
+    handleClick(e: React.MouseEvent): void;
+    render(): JSX.Element;
+}
+export default Clear;

package/esm/Input/clear.js

@@ -0,0 +1,46 @@
+import _inheritsLoose from "@babel/runtime/helpers/inheritsLoose";
+import _assertThisInitialized from "@babel/runtime/helpers/assertThisInitialized";
+import React, { Component } from 'react';
+import { inputClass } from './styles';
+
+var Clear =
+/*#__PURE__*/
+function (_Component) {
+  _inheritsLoose(Clear, _Component);
+
+  function Clear(props) {
+    var _this;
+
+    _this = _Component.call(this, props) || this;
+    _this.handleClick = _this.handleClick.bind(_assertThisInitialized(_assertThisInitialized(_this)));
+    return _this;
+  }
+
+  var _proto = Clear.prototype;
+
+  _proto.handleClick = function handleClick(e) {
+    // do not blur
+    e.preventDefault();
+    var _this$props = this.props,
+        onClick = _this$props.onClick,
+        clearResult = _this$props.clearResult;
+    if (onClick) onClick({
+      target: {
+        value: clearResult
+      }
+    }, true);
+  };
+
+  _proto.render = function render() {
+    return React.createElement("div", {
+      onMouseDown: this.handleClick,
+      className: inputClass('clear-wrapper')
+    }, React.createElement("div", {
+      className: inputClass('clear')
+    }));
+  };
+
+  return Clear;
+}(Component);
+
+export default Clear;

package/esm/Input/index.d.ts

@@ -0,0 +1,2 @@
+declare const _default: typeof import("./Props").InputClass;
+export default _default;

package/esm/Input/index.js

@@ -0,0 +1,22 @@
+import { compose } from '../utils/func';
+import inputable from '../Form/inputable';
+import inputBorder from '../hoc/inputBorder';
+import delay from '../hoc/delay';
+import coin from '../hoc/coin';
+import Input from './Input';
+import Number from './Number';
+import Group from './Group';
+import Password from './Password';
+var exports = compose(inputable, inputBorder({}), delay(400), coin('input'))(Input);
+exports.Group = inputBorder({
+  tag: 'div',
+  isGroup: true,
+  from: 'input'
+})(Group);
+exports.Number = compose(inputable, inputBorder({}), coin())(Number);
+exports.Password = compose(inputable, inputBorder({}))(Password);
+exports.displayName = 'ShineoutInput';
+exports.Number.displayName = 'ShineoutInputNumber';
+exports.Password.displayName = 'ShineoutInputPassword';
+exports.Group.displayName = 'ShineoutInputGroup';
+export default exports;

package/esm/Input/interface.d.ts

@@ -0,0 +1 @@
+export { InputProps as Props, InputGroupProps as GroupProps, InputNumberProps as NumberProps, InputPasswordProps as PasswordProps, } from './Props';

package/esm/Input/interface.js

@@ -0,0 +1 @@
+export {};

package/esm/Input/styles/index.d.ts

@@ -0,0 +1 @@
+export const inputClass: (...args: any) => string;

package/esm/Input/styles/index.js

@@ -0,0 +1,4 @@
+import '../../styles/normalize.less';
+import inputLess from '../../Form/styles/form.less';
+import genaration from '../../utils/classname';
+export var inputClass = genaration(inputLess, 'input');

package/esm/InputTitle/Props.d.ts

@@ -0,0 +1,25 @@
+import { CSSProperties, ReactNode } from 'react';
+export interface InputTitleProps {
+    open?: boolean;
+    /**
+     * inner title
+     *
+     * 内嵌标题
+     *
+     * default: -
+     */
+    innerTitle?: ReactNode;
+    /**
+     * Placeholder title, which needs to be used together with innerTitle
+     *
+     * 占位标题，需要配合 innerTitle 一起使用
+     *
+     * default: -
+     */
+    placeTitle?: ReactNode;
+    children: ReactNode;
+    className?: string;
+    style?: CSSProperties;
+    titleClass?: string;
+    contentClass?: string;
+}

package/esm/InputTitle/Props.js

@@ -0,0 +1 @@
+export {};

package/esm/InputTitle/index.d.ts

@@ -0,0 +1,2 @@
+import InputTitle from './inputTitle';
+export default InputTitle;

package/esm/InputTitle/index.js

@@ -0,0 +1,2 @@
+import InputTitle from './inputTitle';
+export default InputTitle;

package/esm/InputTitle/inputTitle.d.ts

@@ -0,0 +1,14 @@
+import React from 'react';
+import { PureComponent } from '../component';
+import { InputTitleProps } from './Props';
+interface InputTitleState {
+    animation: boolean;
+}
+declare class InputTitle extends PureComponent<InputTitleProps, InputTitleState> {
+    constructor(props: InputTitleProps);
+    componentDidUpdate(prevProps: InputTitleProps): void;
+    startAnimation(): void;
+    stopAnimation(): void;
+    render(): React.ReactNode;
+}
+export default InputTitle;

package/esm/InputTitle/inputTitle.js

@@ -0,0 +1,75 @@
+import _inheritsLoose from "@babel/runtime/helpers/inheritsLoose";
+import _assertThisInitialized from "@babel/runtime/helpers/assertThisInitialized";
+import React from 'react';
+import classnames from 'classnames';
+import { PureComponent } from '../component';
+import { inputTitleClass } from './styles';
+
+var InputTitle =
+/*#__PURE__*/
+function (_PureComponent) {
+  _inheritsLoose(InputTitle, _PureComponent);
+
+  function InputTitle(props) {
+    var _this;
+
+    _this = _PureComponent.call(this, props) || this;
+    _this.state = {
+      animation: false
+    };
+    _this.stopAnimation = _this.stopAnimation.bind(_assertThisInitialized(_assertThisInitialized(_this)));
+    return _this;
+  }
+
+  var _proto = InputTitle.prototype;
+
+  _proto.componentDidUpdate = function componentDidUpdate(prevProps) {
+    if (prevProps.open !== this.props.open) {
+      this.startAnimation();
+    }
+  };
+
+  _proto.startAnimation = function startAnimation() {
+    this.setState({
+      animation: true
+    });
+  };
+
+  _proto.stopAnimation = function stopAnimation() {
+    this.setState({
+      animation: false
+    });
+  };
+
+  _proto.render = function render() {
+    var _this$props = this.props,
+        innerTitle = _this$props.innerTitle,
+        className = _this$props.className,
+        style = _this$props.style,
+        children = _this$props.children,
+        open = _this$props.open,
+        titleClass = _this$props.titleClass,
+        contentClass = _this$props.contentClass,
+        placeTitle = _this$props.placeTitle;
+    if (!innerTitle) return children;
+    var animation = this.state.animation;
+    return React.createElement("div", {
+      style: style,
+      className: classnames(inputTitleClass('_', open && 'open', animation && 'animation'), className)
+    }, React.createElement("div", {
+      onAnimationEnd: this.stopAnimation,
+      className: classnames(inputTitleClass('title', 'top'), titleClass)
+    }, innerTitle), React.createElement("div", {
+      className: classnames(contentClass, inputTitleClass('content'))
+    }, children), React.createElement("div", {
+      onAnimationEnd: this.stopAnimation,
+      className: inputTitleClass('place')
+    }, React.createElement("div", {
+      className: classnames(inputTitleClass('title'))
+    }, placeTitle || innerTitle)));
+  };
+
+  return InputTitle;
+}(PureComponent);
+
+export default InputTitle;

package/esm/InputTitle/styles/index.d.ts

@@ -0,0 +1 @@
+export const inputTitleClass: (...args: any) => string;

package/esm/InputTitle/styles/index.js

@@ -0,0 +1,3 @@
+import inputTitleLess from './inputTitle.less';
+import genaration from '../../utils/classname';
+export var inputTitleClass = genaration(inputTitleLess, 'input-title-box');