frc-ui/es/input/Input.js

React Web UI

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 from 'react';
import classNames from 'classnames';
import Input from 'antd/es/input';
import Icon from '../icon';
class SInput extends React.Component {
    constructor(props) {
        super(props);
        this.clearing = false;
        this.handleClear = (ev) => {
            if (this.timer) {
                clearTimeout(this.timer);
                this.timer = null;
            }
            this.clearing = true;
            const timer = setTimeout(() => {
                clearTimeout(timer);
                this.clearing = false;
                this.input.focus();
            }, 100);
            this.setValue('', ev, () => {
                this.input.focus();
            });
        };
        this.handleChange = (ev) => {
            this.setValue(ev.target.value, ev);
        };
        this.onFocus = (ev) => {
            const { onFocus } = this.props;
            typeof onFocus === 'function' && onFocus(ev);
            this.setState({ focus: true });
            if (this.timer) {
                clearTimeout(this.timer);
                this.timer = null;
            }
        };
        this.onBlur = (ev) => {
            if (this.clearing)
                return ev;
            const { onBlur } = this.props;
            typeof onBlur === 'function' && onBlur(ev);
            this.timer = setTimeout(() => {
                this.setState({ focus: false });
            }, 100);
        };
        this.saveInput = (node) => {
            this.input = node;
        };
        this.state = {
            value: props.value,
            showClear: false,
            focus: false
        };
    }
    componentWillReceiveProps(nextProps) {
        const props = this.props;
        if (nextProps.value !== props.value) {
            this.setState({ value: nextProps.value });
        }
    }
    setValue(value, e, callback) {
        if (!('value' in this.props)) {
            this.setState({ value }, callback);
        }
        const { onChange } = this.props;
        if (onChange) {
            let event = e;
            if (e.type === 'click') {
                // click clear icon
                event = Object.create(e);
                event.target = this.input;
                event.currentTarget = this.input;
                const originalInputValue = this.input.value;
                // change input value cause e.target.value should be '' when clear input
                this.input.value = '';
                onChange(event);
                // reset input value
                this.input.value = originalInputValue;
                return;
            }
            onChange(event);
        }
    }
    render() {
        const { value, focus } = this.state;
        let cls = 'swc-input';
        const _a = this.props, { className, allowClear } = _a, other = __rest(_a, ["className", "allowClear"]);
        cls = classNames(cls, className, {
            [`${cls}-focus`]: focus
        });
        if (allowClear && focus) {
            const iconClass = classNames('swc-input-clear', {
                ['swc-input-clear-focus']: focus
            });
            other.suffix = (React.createElement("span", { onMouseDown: this.handleClear },
                React.createElement(Icon, { className: iconClass, type: 'close-square', style: { fontSize: 'inherit' } })));
        }
        other.value = value;
        other.onChange = this.handleChange;
        other.onBlur = this.onBlur;
        other.onFocus = this.onFocus;
        return React.createElement(Input, Object.assign({ ref: this.saveInput, className: cls }, other));
    }
}
export default SInput;