nuke-normal-input/lib/view/normal.js

输入框

'use strict';

/** @jsx createElement */

Object.defineProperty(exports, "__esModule", {
  value: true
});

var _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; };

var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();

var _rax = require('rax');

var _nukeView = require('nuke-view');

var _nukeView2 = _interopRequireDefault(_nukeView);

var _nukeText = require('nuke-text');

var _nukeText2 = _interopRequireDefault(_nukeText);

var _nukeImage = require('nuke-image');

var _nukeImage2 = _interopRequireDefault(_nukeImage);

var _nukeIcon = require('nuke-icon');

var _nukeIcon2 = _interopRequireDefault(_nukeIcon);

var _nukeBaseInput = require('nuke-base-input');

var _nukeBaseInput2 = _interopRequireDefault(_nukeBaseInput);

var _nukeThemeProvider = require('nuke-theme-provider');

var _nukeEnv = require('nuke-env');

var _nukeHelper = require('nuke-helper');

var _styles = require('../styles');

var _styles2 = _interopRequireDefault(_styles);

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

function _objectWithoutProperties(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; }

function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }

function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }

function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }

var NormalInput = function (_Component) {
  _inherits(NormalInput, _Component);

  function NormalInput(props, context) {
    _classCallCheck(this, NormalInput);

    var _this = _possibleConstructorReturn(this, (NormalInput.__proto__ || Object.getPrototypeOf(NormalInput)).call(this, props));

    var value = null;
    if ('value' in props) {
      value = props.value;
    } else if ('defaultValue' in props) {
      value = props.defaultValue;
    }
    var count = value && value.length || 0;
    _this.state = {
      value: value,
      inputValue: value,
      count: value && value.length || 0,
      maxLengthError: count > props.maxLength
    };
    _this.fixedFont = context.commonConfigs && context.commonConfigs.fixedFont;
    if ('fixedFont' in props) {
      _this.fixedFont = props.fixedFont;
    }
    ['inputHandler', 'changeHander', 'clearHandler', 'focusHandler', 'blurHandler', 'getRef', 'getValue', 'focus', 'blur', 'clear'].forEach(function (m) {
      _this[m] = _this[m].bind(_this);
    });
    return _this;
  }

  _createClass(NormalInput, [{
    key: 'componentWillReceiveProps',
    value: function componentWillReceiveProps(nextProps) {
      if ('value' in nextProps && (typeof nextProps.value === 'string' || typeof nextProps.value === 'number') && nextProps.value !== this.state.inputValue) {
        this.setState({
          value: nextProps.value,
          inputValue: nextProps.value,
          count: nextProps.value.length,
          maxLengthError: nextProps.value.length > this.props.maxLength
        });
      }
    }
  }, {
    key: 'getInput',
    value: function getInput() {
      var _this2 = this;

      var _props = this.props,
          readOnly = _props.readOnly,
          disabled = _props.disabled,
          onInput = _props.onInput,
          onChange = _props.onChange,
          _props$inputStyle = _props.inputStyle,
          inputStyle = _props$inputStyle === undefined ? {} : _props$inputStyle,
          hasClear = _props.hasClear,
          rows = _props.rows,
          multiple = _props.multiple,
          others = _objectWithoutProperties(_props, ['readOnly', 'disabled', 'onInput', 'onChange', 'inputStyle', 'hasClear', 'rows', 'multiple']);

      var value = this.state.value;

      var styles = this.props.themeStyle;

      var inputAttrs = _extends({}, others, {
        value: typeof value !== null ? value : null,
        readOnly: readOnly,
        multiple: multiple,
        style: Object.assign({}, styles['input-ele'], hasClear ? styles['input-has-clear'] : null, multiple ? styles['multiple-input'] : styles['single-input'], inputStyle),
        onInput: this.inputHandler,
        onChange: this.changeHander,
        onFocus: this.focusHandler,
        onBlur: this.blurHandler,
        disabled: disabled
      });
      if (_nukeEnv.isWeex) {
        // 如果是多行文本，添加 returnKeyType 会导致无法换行
        if (multiple && !this.props.onReturn) {
          delete inputAttrs.onReturn;
          delete inputAttrs.returnKeyType;
        }
      } else if (!disabled) {
        delete inputAttrs.disabled;
      }

      if (multiple) {
        inputAttrs.rows = rows || 3;
      }
      _nukeHelper.textKeys.map(function (item) {
        if (styles[item]) {
          inputAttrs.style[item] = styles[item];
        }
      });
      return (0, _rax.createElement)(_nukeBaseInput2.default, _extends({
        fixedFont: this.fixedFont
      }, inputAttrs, {
        ref: function ref(n) {
          _this2.input = n;
        }
      }));
    }
  }, {
    key: 'clear',
    value: function clear() {
      this.setState({
        value: '',
        count: 0
      });
    }
  }, {
    key: 'clearHandler',
    value: function clearHandler(e) {
      this.setState({
        value: this.state.inputValue
      });
      this.setState({
        value: '',
        inputValue: '',
        count: 0
      });

      this.focus();
      this.trigger('onClear', '');
    }
  }, {
    key: 'focusHandler',
    value: function focusHandler(e) {
      this.setState({
        focus: true
      });
      this.trigger('onFocus', e);
    }
  }, {
    key: 'trigger',
    value: function trigger(fn) {
      if (typeof fn === 'string') fn = this.props[fn];
      if (!(typeof fn === 'function')) return;

      for (var _len = arguments.length, attrs = Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {
        attrs[_key - 1] = arguments[_key];
      }

      return fn.apply(this, attrs);
    }
  }, {
    key: 'blurHandler',
    value: function blurHandler(e) {
      this.setState({
        focus: false
      });
      this.trigger('onBlur', e);
    }
  }, {
    key: 'focus',
    value: function focus() {
      this.input.focus();
    }
  }, {
    key: 'getRef',
    value: function getRef() {
      return this.input.getRef();
    }
  }, {
    key: 'blur',
    value: function blur() {
      this.input.blur();
    }
  }, {
    key: 'getValue',
    value: function getValue() {
      return this.input.getValue();
    }
  }, {
    key: 'changeHander',
    value: function changeHander(text, eventObj) {
      var maxLength = this.props.maxLength;

      this.setState({
        value: text,
        inputValue: text,
        count: text.length,
        maxLengthError: text.length > maxLength
      });
      this.trigger('onChange', text, eventObj);
    }
  }, {
    key: 'inputHandler',
    value: function inputHandler(text, eventObj) {
      var maxLength = this.props.maxLength;

      this.setState({
        inputValue: text,
        count: text.length,
        maxLengthError: text.length > maxLength
      });
      this.trigger('onInput', eventObj);
    }
  }, {
    key: 'renderClear',
    value: function renderClear(styles) {
      var count = this.state.count;
      var _props$clearIconStyle = this.props.clearIconStyle,
          clearIconStyle = _props$clearIconStyle === undefined ? {} : _props$clearIconStyle;

      return count ? (0, _rax.createElement)(_nukeIcon2.default, {
        name: 'delete-fill',
        onClick: this.clearHandler,
        style: [styles.clear, clearIconStyle]
      }) : null;
    }
  }, {
    key: 'renderCustomIcon',
    value: function renderCustomIcon(styles) {
      var _props$icon = this.props.icon,
          icon = _props$icon === undefined ? {} : _props$icon;
      var uri = icon.uri,
          _icon$onPress = icon.onPress,
          onPress = _icon$onPress === undefined ? function () {} : _icon$onPress,
          _icon$style = icon.style,
          style = _icon$style === undefined ? {} : _icon$style;

      if (!uri) return null;
      return (0, _rax.createElement)(
        _nukeView2.default,
        { style: [styles.icon, style], onClick: onPress },
        (0, _rax.createElement)(_nukeImage2.default, { source: { uri: uri }, style: [styles['icon-image'], style] })
      );
    }
  }, {
    key: 'renderCount',
    value: function renderCount(styles) {
      var _props2 = this.props,
          maxLength = _props2.maxLength,
          multiple = _props2.multiple,
          renderCount = _props2.renderCount;
      var maxLengthError = this.state.maxLengthError;

      if (!maxLength || !renderCount) return null;

      var count = this.state.count;

      return (0, _rax.createElement)(
        _nukeView2.default,
        {
          'data-role': 'count',
          style: styles['' + (multiple ? 'multiple-count-wrap' : 'single-count-wrap')]
        },
        (0, _rax.createElement)(
          _nukeText2.default,
          {
            fixedFont: this.fixedFont,
            style: [styles['' + (multiple ? 'multiple-count-text' : 'single-count-text')], maxLengthError ? styles['count-error'] : {}]
          },
          count,
          ' / ',
          maxLength
        )
      );
    }
  }, {
    key: 'calcInputStyle',
    value: function calcInputStyle() {
      var _props3 = this.props,
          readOnly = _props3.readOnly,
          disabled = _props3.disabled,
          _props3$style = _props3.style,
          style = _props3$style === undefined ? {} : _props3$style,
          hideErrorWhenFocus = _props3.hideErrorWhenFocus,
          multiple = _props3.multiple,
          status = _props3.status,
          styles = _props3.themeStyle;
      var _state = this.state,
          focus = _state.focus,
          maxLengthError = _state.maxLengthError;

      var inputWrapperStyle = Object.assign({}, styles['input-wrap'], styles['' + (multiple ? 'multiple-wrap' : 'single-wrap')], readOnly ? styles.readonly : {}, status === 'error' ? styles['error-input-wrap'] : {}, focus ? styles['focus-input-wrap'] : {}, disabled ? styles[(multiple ? 'multiple' : 'single') + '-disabled'] : {});
      if (status === 'error' && !hideErrorWhenFocus || maxLengthError) {
        inputWrapperStyle = Object.assign(inputWrapperStyle, styles['error-input-wrap']);
      }
      if (disabled) {
        inputWrapperStyle = Object.assign(inputWrapperStyle, styles[(multiple ? 'multiple' : 'single') + '-disabled']);
      }
      return _extends({}, inputWrapperStyle, style);
    }
  }, {
    key: 'render',
    value: function render() {
      var _props4 = this.props,
          renderCount = _props4.renderCount,
          hasClear = _props4.hasClear,
          status = _props4.status,
          errorMessage = _props4.errorMessage;

      var styles = this.props.themeStyle;
      var focus = this.state.focus;


      var inputWrapperStyle = this.calcInputStyle();

      return (0, _rax.createElement)(
        _nukeView2.default,
        { 'data-role': 'normal-wrap', style: inputWrapperStyle },
        this.getInput(),
        hasClear ? this.renderClear(styles) : null,
        !hasClear ? this.renderCustomIcon(styles) : null,
        status === 'error' && errorMessage || renderCount ? (0, _rax.createElement)(
          _nukeView2.default,
          { 'data-role': 'help', style: styles.help },
          !focus && status === 'error' && errorMessage ? (0, _rax.createElement)(
            _nukeText2.default,
            { fixedFont: this.fixedFont, style: styles['error-text'] },
            errorMessage
          ) : null,
          this.renderCount(styles)
        ) : null
      );
    }
  }]);

  return NormalInput;
}(_rax.Component);

NormalInput.propTypes = {
  defaultValue: _rax.PropTypes.any,
  onFocus: _rax.PropTypes.func,
  onInput: _rax.PropTypes.func,
  onBlur: _rax.PropTypes.func,
  onReturn: _rax.PropTypes.func,
  placeholder: _rax.PropTypes.string,
  readOnly: _rax.PropTypes.boolean,
  disabled: _rax.PropTypes.boolean,
  style: _rax.PropTypes.any,
  maxLength: _rax.PropTypes.number,
  multiple: _rax.PropTypes.boolean,
  inputStyle: _rax.PropTypes.any,
  returnKeyType: _rax.PropTypes.any,
  hasClear: _rax.PropTypes.boolean,
  rows: _rax.PropTypes.number,
  maxRows: _rax.PropTypes.number,
  type: _rax.PropTypes.oneOf(['text', 'url', 'password', 'tel', 'date', 'time', 'email']),
  status: _rax.PropTypes.oneOf(['success', 'error']),
  errorMessage: _rax.PropTypes.string,
  renderCount: _rax.PropTypes.boolean,
  value: _rax.PropTypes.string,
  themeStyle: _rax.PropTypes.any,
  hideErrorWhenFocus: _rax.PropTypes.boolean
};
NormalInput.defaultProps = {
  onFocus: function onFocus() {},
  onInput: function onInput() {},
  onBlur: function onBlur() {},
  onReturn: function onReturn() {},
  placeholder: '',
  readOnly: false,
  disabled: false,
  style: {},
  multiple: false,
  inputStyle: {},
  hasClear: false,
  type: 'text',
  status: 'success',
  themeStyle: {},
  renderCount: false,
  placeholderColor: '#999999',
  hideErrorWhenFocus: true
};
NormalInput.contextTypes = {
  androidConfigs: _rax.PropTypes.any,
  commonConfigs: _rax.PropTypes.any
};

NormalInput.displayName = 'Input';
var StyledInput = (0, _nukeThemeProvider.connectStyle)(_styles2.default, { withRef: true })(NormalInput);

exports.default = StyledInput;
module.exports = exports['default'];