zarm-web/es/input/Input.js

基于 React 的桌面端UI库

function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }

function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }

function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }

import React, { Component } from 'react';
import classnames from 'classnames'; // @ts-ignore

import Addon from './cps/Addon';
import InputGroup from './input-group';
import Search from './input-search';

function fixControlledValue(value) {
  if (typeof value === 'undefined' || value === null) {
    return '';
  }

  return String(value);
}

function isTextAreaProps(props) {
  return props.type === 'textarea';
}

function isInputProps(props) {
  return props.type !== 'textarea';
}

class Input extends Component {
  constructor(...args) {
    super(...args);
    this.state = {
      focused: false
    };
    this.refMap = {};

    this.onFocus = event => {
      const {
        onFocus
      } = this.props;

      if (onFocus) {
        onFocus(event);
      }

      this.setState({
        focused: true
      });
    };

    this.onBlur = event => {
      const {
        onBlur
      } = this.props;

      if (onBlur) {
        onBlur(event);
      }

      this.setState({
        focused: false
      });
    };

    this.onTextareaChange = e => {
      const onChange = this.props.onChange;

      if (onChange) {
        onChange(e);
      }

      if (this.props.showLength) {
        this.forceUpdate();
      }
    };

    this.inputElemRef = elem => {
      if (elem) {
        this.refMap.input = elem;
      }
    };
  }

  static getDerivedStateFromProps(props) {
    return {
      value: props.value
    };
  }

  getLength() {
    const {
      maxLength,
      showLength
    } = this.props;
    let length;

    if (showLength) {
      length = this.refMap.input ? this.refMap.input.value.length : 0 || 0;
    }

    if (maxLength) {
      if (length) {
        return React.createElement("span", {
          className: "length-box"
        }, length, "/", maxLength);
      }

      return React.createElement("span", {
        className: "length-box"
      }, maxLength);
    }

    return null;
  }

  renderInput(props, cls) {
    const {
      type,
      prefixCls,
      shape,
      size,
      className,
      addonPrefix,
      addonBefore,
      addonAfter,
      showLength,
      value
    } = props,
          others = _objectWithoutProperties(props, ["type", "prefixCls", "shape", "size", "className", "addonPrefix", "addonBefore", "addonAfter", "showLength", "value"]);

    return React.createElement("div", {
      className: cls
    }, addonBefore && React.createElement(Addon, {
      size: size,
      addon: addonBefore
    }), React.createElement("input", _extends({}, others, {
      className: prefixCls,
      ref: this.inputElemRef,
      type: type,
      onFocus: this.onFocus,
      onBlur: this.onBlur
    })), addonAfter && React.createElement(Addon, {
      size: size,
      addon: addonAfter
    }));
  }

  renderTextarea(props, cls) {
    const {
      type,
      prefixCls,
      shape,
      size,
      className,
      addonPrefix,
      addonBefore,
      addonAfter,
      showLength,
      value,
      defaultValue
    } = props,
          others = _objectWithoutProperties(props, ["type", "prefixCls", "shape", "size", "className", "addonPrefix", "addonBefore", "addonAfter", "showLength", "value", "defaultValue"]);

    return React.createElement("span", {
      className: `${prefixCls}-textarea-box`
    }, React.createElement("textarea", _extends({}, others, {
      ref: this.inputElemRef,
      className: cls,
      onChange: this.onTextareaChange
    }), defaultValue), this.getLength());
  }

  render() {
    const {
      disabled,
      defaultValue,
      shape,
      prefixCls,
      className,
      size,
      value
    } = this.props;
    const {
      focused
    } = this.state;
    const cls = classnames({
      [`${prefixCls}-box`]: true,
      disabled,
      [`shape-${shape}`]: true,
      [className]: !!className,
      [`size-${size}`]: !!size,
      active: focused
    });
    const valueObject = {
      value: defaultValue || ''
    };

    if ('value' in this.props) {
      valueObject.value = fixControlledValue(value);
    }

    if (isTextAreaProps(this.props)) {
      return this.renderTextarea(this.props, cls);
    }

    if (isInputProps(this.props)) {
      return this.renderInput(this.props, cls);
    }
  }

}

Input.Group = InputGroup;
Input.Search = Search;
Input.defaultProps = {
  prefixCls: 'ui-input',
  type: 'text',
  size: null,
  shape: 'radius'
};
export default Input;