nuke-base-input/lib/index.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 _typeof = typeof Symbol === "function" && typeof Symbol.iterator === "symbol" ? function (obj) { return typeof obj; } : function (obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; };

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 _nukeEnv = require('nuke-env');

var _util = require('./util');

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 BaseInput = function (_Component) {
  _inherits(BaseInput, _Component);

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

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

    _this.fixedFont = context.commonConfigs && context.commonConfigs.fixedFont;
    if ('fixedFont' in props) {
      _this.fixedFont = props.fixedFont;
    }
    _this.getRef = _this.getRef.bind(_this);
    _this.setNativeFormatRule = _this.setNativeFormatRule.bind(_this);
    _this.inputHandler = _this.inputHandler.bind(_this);
    _this.returnHandler = _this.returnHandler.bind(_this);
    _this.changeHandler = _this.changeHandler.bind(_this);
    _this.focusHandler = _this.focusHandler.bind(_this);
    _this.blurHandler = _this.blurHandler.bind(_this);
    _this.focus = _this.focus.bind(_this);
    _this.blur = _this.blur.bind(_this);
    return _this;
  }

  _createClass(BaseInput, [{
    key: 'shouldComponentUpdate',
    value: function shouldComponentUpdate(nextProps) {
      if (nextProps.value !== null) {
        return nextProps.value !== this.props.value || nextProps.readOnly !== this.props.readOnly || nextProps.type !== this.props.type || nextProps.disabled !== this.props.disabled || nextProps.maxLength !== this.props.maxLength || nextProps['data-style'] !== this.props['data-style'] || nextProps.style !== this.props.style || nextProps.placeholder !== this.props.placeholder;
      }
      return _typeof(nextProps.value) !== _typeof(this.props.value) || nextProps.readOnly !== this.props.readOnly || nextProps.type !== this.props.type || nextProps.disabled !== this.props.disabled || nextProps.maxLength !== this.props.maxLength || nextProps.style !== this.props['data-style'] || nextProps.style !== this.props.style || nextProps.placeholder !== this.props.placeholder;
    }
  }, {
    key: 'getValue',
    value: function getValue() {
      if (_nukeEnv.isWeb) {
        return this.refs.input.value;
      }
      return this.refs.input.attr.value;
    }
  }, {
    key: 'getRef',
    value: function getRef() {
      return this.refs.input;
    }
  }, {
    key: 'setNativeFormatRule',
    value: function setNativeFormatRule(rules) {
      this.refs.input.setTextFormatter(rules);
    }
  }, {
    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: 'focusHandler',
    value: function focusHandler(e) {
      this.trigger('onFocus', e);
    }
  }, {
    key: 'focus',
    value: function focus() {
      this.focusInput();
    }
  }, {
    key: 'focusInput',
    value: function focusInput() {
      this.refs.input.focus && this.refs.input.focus();
    }
  }, {
    key: 'blur',
    value: function blur() {
      this.blurInput();
    }
  }, {
    key: 'blurInput',
    value: function blurInput() {
      this.refs.input.blur && this.refs.input.blur();
    }
  }, {
    key: 'blurHandler',
    value: function blurHandler(e) {
      this.setState({
        focus: false
      });

      this.trigger('onBlur', e);
    }
  }, {
    key: 'returnHandler',
    value: function returnHandler(e) {
      if (_nukeEnv.isWeb) {
        if (e.keyCode === 13) {
          this.trigger('onReturn', (0, _util.genEventObject)(e));
        }
      } else {
        this.trigger('onReturn', e);
      }
    }
  }, {
    key: 'inputHandler',
    value: function inputHandler(e) {
      this.trigger('onInput', (0, _util.getText)(e), (0, _util.genEventObject)(e));
    }
  }, {
    key: 'changeHandler',
    value: function changeHandler(e) {
      var value = (0, _util.getText)(e);

      var maxLength = this.props.maxLength;


      if (maxLength && value && value.length > maxLength) return;
      if ('value' in this.props) {
        this.setState({ value: value });
      }
      this.trigger('onChange', value, (0, _util.genEventObject)(e));
    }
  }, {
    key: 'render',
    value: function render() {
      var _props = this.props,
          value = _props.value,
          onFocus = _props.onFocus,
          onInput = _props.onInput,
          onBlur = _props.onBlur,
          readOnly = _props.readOnly,
          disabled = _props.disabled,
          style = _props.style,
          maxLength = _props.maxLength,
          multiple = _props.multiple,
          returnKeyType = _props.returnKeyType,
          autoFocus = _props.autoFocus,
          fixedFont = _props.fixedFont,
          rows = _props.rows,
          type = _props.type,
          placeholderColor = _props.placeholderColor,
          others = _objectWithoutProperties(_props, ['value', 'onFocus', 'onInput', 'onBlur', 'readOnly', 'disabled', 'style', 'maxLength', 'multiple', 'returnKeyType', 'autoFocus', 'fixedFont', 'rows', 'type', 'placeholderColor']);

      var attrs = {
        onChange: this.changeHandler,
        onInput: this.inputHandler,
        onFocus: this.focusHandler,
        onBlur: this.blurHandler,
        disabled: disabled,
        rows: rows,
        returnKeyType: returnKeyType,
        maxlength: maxLength,
        readOnly: readOnly,
        autofocus: autoFocus,
        placeholderColor: placeholderColor,
        style: Object.assign({}, styles.default, _nukeEnv.isWeb ? styles.defaultWeb : {}, style)
      };
      if (!multiple) {
        attrs.type = type;
      }
      if ('value' in this.props) {
        attrs.value = value;
      }
      if (_nukeEnv.isWeb) {
        attrs.onKeyUp = this.returnHandler;
        // keys that should not be passed
        ['readOnly', 'autofocus'].map(function (item) {
          if (item in attrs && !attrs[item]) {
            delete attrs[item];
          }
        });
      } else {
        attrs.onReturn = this.returnHandler;
        attrs['data-placeholder-color'] = placeholderColor;
        // in multiple mode, passing returnKeyType to weex will get single line input
        if (multiple && !this.props.onReturn) {
          delete attrs.onReturn;
          delete attrs.returnKeyType;
        }
      }
      var inputElement = void 0;
      if (multiple) {
        if (_nukeEnv.isWeb) {
          inputElement = (0, _rax.createElement)(
            'textarea',
            _extends({}, others, attrs, { ref: 'input' }),
            attrs.value
          );
        } else {
          inputElement = (0, _rax.createElement)('textarea', _extends({}, others, attrs, { ref: 'input' }));
        }
      } else {
        inputElement = (0, _rax.createElement)('input', _extends({}, others, attrs, { ref: 'input' }));
      }
      return inputElement;
    }
  }]);

  return BaseInput;
}(_rax.Component);

BaseInput.contextTypes = {
  androidConfigs: _rax.PropTypes.any
};
BaseInput.defaultProps = {
  rows: 2,
  style: {},
  readOnly: false
};
var styles = {
  default: {
    backgroundColor: 'transparent',
    borderWidth: 0,
    color: '#000000',
    padding: 0,
    fontSize: 24,
    lineHeight: 60
  },
  defaultWeb: {
    width: '100%',
    boxSizing: 'border-box',
    outline: 'none',
    appearance: 'none'
  }
};
BaseInput.displayName = 'BaseInput';
exports.default = BaseInput;
module.exports = exports['default'];