weex-nuke/src/node_modules/nuke-input/lib/view/material.js

基于 Rax 、Weex 的高性能组件体系 ~~

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

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

var _inheritKeys = require('../mods/inherit-keys');

var _inheritKeys2 = _interopRequireDefault(_inheritKeys);

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

var _nukeBaseInput2 = _interopRequireDefault(_nukeBaseInput);

var _image = require('../mods/image');

var _image2 = _interopRequireDefault(_image);

var _placeholder = require('../mods/placeholder');

var _placeholder2 = _interopRequireDefault(_placeholder);

var _count = require('../mods/count');

var _count2 = _interopRequireDefault(_count);

var _uitls = require('../uitls');

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 textlineheight = 36;

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

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

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

    _this.validInput = true;
    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 = {
      focus: false,
      value: value,
      lines: 1,

      inputValue: value,
      count: count,
      maxLengthError: props.maxLength ? count > props.maxLength : false
    };
    _this.materialDesign = true;
    _this.fixedFont = context.commonConfigs && context.commonConfigs.fixedFont;
    if ('fixedFont' in props) {
      _this.fixedFont = props.fixedFont;
    }
    _this.inputHandler = _this.inputHandler.bind(_this);
    _this.focusHandler = _this.focusHandler.bind(_this);
    _this.blurHandler = _this.blurHandler.bind(_this);
    _this.clearHandler = _this.clearHandler.bind(_this);
    _this.changeHandler = _this.changeHandler.bind(_this);
    _this.returnHandler = _this.returnHandler.bind(_this);
    _this.getRef = _this.getRef.bind(_this);
    _this.getValue = _this.getValue.bind(_this);
    _this.focus = _this.focus.bind(_this);
    _this.blur = _this.blur.bind(_this);
    _this.clear = _this.clear.bind(_this);
    _this.setNativeFormatRule = _this.setNativeFormatRule.bind(_this);
    return _this;
  }

  _createClass(Input, [{
    key: 'componentDidMount',
    value: function componentDidMount() {
      var multiple = this.props.multiple;

      if (_nukeEnv.isWeb && multiple) {
        var textarea = (0, _rax.findDOMNode)(this.refs.baseinput);
        this.minHeight = textarea.scrollHeight; // 18
      }
    }
  }, {
    key: 'componentWillReceiveProps',
    value: function componentWillReceiveProps(nextProps) {
      if ('value' in nextProps && (typeof nextProps.value === 'string' || typeof nextProps.value === 'number') && nextProps.value !== this.state.inputValue) {
        var type = this.props.type;
        // if (type === 'number' && !isValidNumber(nextProps.value)) return;

        this.setState({
          value: nextProps.value,
          inputValue: nextProps.value,
          count: nextProps.value.length,
          maxLengthError: nextProps.value.length > this.props.maxLength
        });
      }
    }
  }, {
    key: 'getTextRect',
    value: function getTextRect(ref) {
      return new Promise(function (resolve, reject) {
        var domEl = (0, _rax.findDOMNode)(ref);
        if (domEl) {
          if (_nukeEnv.isWeex) {
            try {
              var dom = require('@weex-module/dom');
              dom.getComponentRect(domEl.ref, function (e) {
                if (e && e.size && e.size.height) {
                  resolve(e.size.height.toFixed());
                } else {
                  reject(0);
                }
              });
            } catch (e) {
              reject(0);
            }
          }
        } else {
          reject(0);
        }
      });
    }
  }, {
    key: 'setTextareaHeight',
    value: function setTextareaHeight(lines) {
      this.setState({
        lines: lines
      });
    }
  }, {
    key: 'getHideElement',
    value: function getHideElement(hiddenStyle) {
      var _this2 = this;

      var _props = this.props,
          multiple = _props.multiple,
          maxRows = _props.maxRows;

      if (!multiple || _nukeEnv.isWeb) return null;
      return (0, _rax.createElement)(
        _nukeText2.default,
        {
          fixedFont: this.fixedFont,
          ref: function ref(n) {
            _this2.multipleText = n;
          },
          style: hiddenStyle,
          numberOfLines: maxRows
        },
        this.state.inputValue
      );
    }
  }, {
    key: 'clearHandler',
    value: function clearHandler(e) {
      this.setState({
        value: this.state.inputValue
      });
      this.setState({
        value: '',
        inputValue: '',
        count: 0,
        maxLengthError: false
      });
      this.focus();
      this.trigger('onClear', '');
    }
  }, {
    key: 'blur',
    value: function blur() {
      this.refs.baseinput.blur();
    }
  }, {
    key: 'focus',
    value: function focus() {
      this.refs.baseinput.focus();
    }
  }, {
    key: 'getRef',
    value: function getRef() {
      return this.refs.baseinput.getRef();
    }
  }, {
    key: 'setNativeFormatRule',
    value: function setNativeFormatRule(rules) {
      return this.refs.baseinput.setNativeFormatRule(rules);
    }
  }, {
    key: 'clear',
    value: function clear() {
      this.setState({
        value: '',
        inputValue: '',
        count: 0,
        maxLengthError: false
      });
      this.trigger('onClear', '');
    }
  }, {
    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.setState({
        focus: true
      });
      this.trigger('onFocus', e);
    }
  }, {
    key: 'blurHandler',
    value: function blurHandler(e) {
      var type = this.props.type;
      // hack For type number useage invalid input can't get any value

      if (type === 'number' && _nukeEnv.isWeb) {
        this.validInput = (0, _uitls.isValidInput)(e.srcElement);
      }
      this.setState({
        focus: false
      });
      this.trigger('onBlur', e);
    }
  }, {
    key: 'returnHandler',
    value: function returnHandler(e) {
      this.trigger('onReturn', e);
    }
  }, {
    key: 'inputHandler',
    value: function inputHandler(text, eventObj) {
      var _props2 = this.props,
          multiple = _props2.multiple,
          maxLength = _props2.maxLength;

      this.setState({
        inputValue: text,
        count: text.length,
        maxLengthError: maxLength ? text.length > maxLength : false
      });

      this.trigger('onInput', eventObj);
    }
  }, {
    key: 'changeHandler',
    value: function changeHandler(text, eventObj) {
      var _props3 = this.props,
          type = _props3.type,
          maxLength = _props3.maxLength;

      if (type === 'date' || type === 'time') {
        this.setState({
          inputValue: text
        });
      } else {
        this.setState({
          value: text,
          inputValue: text,
          count: text.length,
          maxLengthError: text.length > maxLength
        });
      }
      this.trigger('onChange', text, eventObj);
    }
  }, {
    key: 'renderPlaceholder',
    value: function renderPlaceholder() {
      var _state = this.state,
          focus = _state.focus,
          inputValue = _state.inputValue,
          maxLengthError = _state.maxLengthError;
      var _props4 = this.props,
          placeholder = _props4.placeholder,
          placeholderColor = _props4.placeholderColor,
          themeStyle = _props4.themeStyle,
          status = _props4.status,
          disabled = _props4.disabled,
          errorMessage = _props4.errorMessage,
          floatPlaceholder = _props4.floatPlaceholder,
          hideErrorWhenFocus = _props4.hideErrorWhenFocus;


      var placeholderAttrs = {
        placeholder: placeholder,
        placeholderColor: placeholderColor,
        themeStyle: themeStyle,
        status: status,
        disabled: disabled,
        errorMessage: errorMessage,
        floatPlaceholder: floatPlaceholder,
        hideErrorWhenFocus: hideErrorWhenFocus,
        focus: focus,
        inputValue: inputValue,
        validInput: this.validInput,
        maxLengthError: maxLengthError,
        fixedFont: this.fixedFont
      };
      return (0, _rax.createElement)(_placeholder2.default, placeholderAttrs);
    }
  }, {
    key: 'renderCount',
    value: function renderCount() {
      var _props5 = this.props,
          maxLength = _props5.maxLength,
          multiple = _props5.multiple,
          renderCount = _props5.renderCount,
          themeStyle = _props5.themeStyle;

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

      var count = this.state.count;

      var countAttrs = {
        maxLength: maxLength,
        multiple: multiple,
        renderCount: renderCount,
        count: count,
        themeStyle: themeStyle,
        fixedFont: this.fixedFont
      };
      return (0, _rax.createElement)(_count2.default, countAttrs);
    }
  }, {
    key: 'renderClear',
    value: function renderClear(styles) {
      return (0, _rax.createElement)(_nukeImage2.default, { source: { uri: _image2.default.clear }, onClick: this.clearHandler, style: styles['md-clear'] });
    }
  }, {
    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['md-icon'], style], onClick: onPress },
        (0, _rax.createElement)(_nukeImage2.default, { source: { uri: uri }, style: [styles['icon-image'], style] })
      );
    }
  }, {
    key: 'renderHelpLine',
    value: function renderHelpLine(styles) {
      var _props6 = this.props,
          status = _props6.status,
          errorMessage = _props6.errorMessage,
          autoAdjustHeight = _props6.autoAdjustHeight,
          _props6$hideErrorWhen = _props6.hideErrorWhenFocus,
          hideErrorWhenFocus = _props6$hideErrorWhen === undefined ? false : _props6$hideErrorWhen,
          renderCount = _props6.renderCount;
      var _state2 = this.state,
          focus = _state2.focus,
          maxLengthError = _state2.maxLengthError;

      var renderErrorMessage = void 0;
      if (hideErrorWhenFocus) {
        renderErrorMessage = !focus && status === 'error' && errorMessage;
      } else {
        renderErrorMessage = status === 'error' && errorMessage;
      }

      if (!renderErrorMessage && !renderCount && autoAdjustHeight) return null;
      var errorMessageDom = void 0;
      if (errorMessage) {
        if (typeof errorMessage === 'string') {
          errorMessageDom = (0, _rax.createElement)(
            _nukeText2.default,
            { fixedFont: this.fixedFont, style: styles['md-error-text'] },
            errorMessage
          );
        } else {
          errorMessageDom = (0, _rax.cloneElement)(errorMessage, {
            style: errorMessage.props.style ? Object.assign({}, styles['md-error-text'], errorMessage.props.style) : styles['md-error-text']
          });
        }
      }
      return (0, _rax.createElement)(
        _nukeView2.default,
        { 'data-role': 'md-help', style: styles['md-help'] },
        renderErrorMessage ? errorMessageDom : null,
        this.renderCount()
      );
    }
  }, {
    key: 'getValue',
    value: function getValue() {
      return this.refs.baseinput.getValue();
    }
  }, {
    key: 'render',
    value: function render() {
      var _props7 = this.props,
          defaultValue = _props7.defaultValue,
          onChange = _props7.onChange,
          onFocus = _props7.onFocus,
          onInput = _props7.onInput,
          onBlur = _props7.onBlur,
          placeholder = _props7.placeholder,
          renderCount = _props7.renderCount,
          readOnly = _props7.readOnly,
          disabled = _props7.disabled,
          _props7$style = _props7.style,
          style = _props7$style === undefined ? {} : _props7$style,
          maxLength = _props7.maxLength,
          multiple = _props7.multiple,
          inputStyle = _props7.inputStyle,
          returnKeyType = _props7.returnKeyType,
          hasClear = _props7.hasClear,
          rows = _props7.rows,
          type = _props7.type,
          icon = _props7.icon,
          autoAdjustHeight = _props7.autoAdjustHeight,
          status = _props7.status,
          floatPlaceholder = _props7.floatPlaceholder,
          hideErrorWhenFocus = _props7.hideErrorWhenFocus,
          errorMessage = _props7.errorMessage,
          themeStyle = _props7.themeStyle,
          maxRows = _props7.maxRows,
          others = _objectWithoutProperties(_props7, ['defaultValue', 'onChange', 'onFocus', 'onInput', 'onBlur', 'placeholder', 'renderCount', 'readOnly', 'disabled', 'style', 'maxLength', 'multiple', 'inputStyle', 'returnKeyType', 'hasClear', 'rows', 'type', 'icon', 'autoAdjustHeight', 'status', 'floatPlaceholder', 'hideErrorWhenFocus', 'errorMessage', 'themeStyle', 'maxRows']);

      var styles = this.props.themeStyle;
      var _state3 = this.state,
          focus = _state3.focus,
          value = _state3.value,
          lines = _state3.lines,
          maxLengthError = _state3.maxLengthError;

      var mode = multiple ? 'multiple' : 'single';
      var MDWrapperStyle = Object.assign({}, styles['input-wrap'], styles[mode + '-md-wrap'], readOnly ? styles.readonly : {}, floatPlaceholder ? {} : styles['static-placeholder'], disabled ? styles['md-' + mode + '-disabled'] : {}, style);

      var mdLineStyle = Object.assign({}, styles['md-bottom-line'], status === 'error' ? styles['md-bottom-line-error'] : {}, focus ? styles['md-bottom-line-focus'] : {});
      if (status === 'error' && !hideErrorWhenFocus || maxLengthError) {
        mdLineStyle = Object.assign(mdLineStyle, styles['md-bottom-line-error']);
      }

      if (disabled) {
        mdLineStyle = Object.assign(mdLineStyle, styles['md-bottom-line-disabled']);
      }
      var inputElementAttrs = {
        onInput: this.inputHandler,
        onFocus: this.focusHandler,
        onBlur: this.blurHandler,
        onChange: this.changeHandler,
        onReturn: this.returnHandler,
        onResize: this.resizeHandler,
        multiple: multiple,
        disabled: disabled,
        readOnly: readOnly,
        returnKeyType: returnKeyType,
        maxLength: maxLength,
        placeholder: '',
        value: typeof value !== null ? value : null,
        type: type,
        style: multiple ? styles['multiple-md-input-ele'] : styles['md-input-ele']
      };

      if (_nukeEnv.isWeb) {
        if ('readOnly' in inputElementAttrs && !inputElementAttrs.readOnly) {
          delete inputElementAttrs.readOnly;
        }
      }

      if (multiple) {
        if (_nukeEnv.isWeb) {
          inputElementAttrs.rows = 1;
        } else {
          // maxRows
          // inputElementAttrs.rows = lines;
          inputElementAttrs.style.height = maxRows * textlineheight;
          // not adjust maxRows
          inputElementAttrs.rows = maxRows;
        }
      }

      _inheritKeys2.default.map(function (item) {
        if (styles[item]) {
          inputElementAttrs.style[item] = styles[item];
        }
      });
      var multipleTextStyle = Object.assign({}, inputElementAttrs.style, styles['text-for-height']
      // {lineHeight: textlineheight }
      );
      if ('height' in multipleTextStyle) {
        delete multipleTextStyle.height;
      }
      var inputElestyle = inputElementAttrs.style;
      return (0, _rax.createElement)(
        _nukeView2.default,
        { 'data-role': 'md-wrap', style: MDWrapperStyle },
        this.renderPlaceholder(),
        this.getHideElement(multipleTextStyle),
        (0, _rax.createElement)(_nukeBaseInput2.default, _extends({ fixedFont: this.fixedFont, ref: 'baseinput' }, others, inputElementAttrs)),
        (0, _rax.createElement)(_nukeView2.default, { 'data-role': 'md-line', style: mdLineStyle }),
        this.renderHelpLine(styles),
        hasClear ? this.renderClear(styles) : null,
        !hasClear ? this.renderCustomIcon(styles) : null
      );
    }
  }]);

  return Input;
}(_rax.Component);

Input.propTypes = {
  defaultValue: _rax.PropTypes.any,
  onFocus: _rax.PropTypes.func,
  onInput: _rax.PropTypes.func,
  onBlur: _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,
  placeholderColor: _rax.PropTypes.string,
  value: _rax.PropTypes.string,
  themeStyle: _rax.PropTypes.any,
  renderCount: _rax.PropTypes.boolean,
  floatPlaceholder: _rax.PropTypes.boolean,
  hideErrorWhenFocus: _rax.PropTypes.boolean,
  fixedFont: _rax.PropTypes.boolean
};
Input.defaultProps = {
  onFocus: function onFocus() {},
  onInput: function onInput() {},
  onBlur: function onBlur() {},
  placeholder: '',
  readOnly: false,
  disabled: false,
  style: {},
  multiple: false,
  inputStyle: {},
  themeStyle: {},
  hasClear: false,
  type: 'text',
  rows: 1,
  maxRows: 3,
  status: 'success',
  renderCount: false,
  placeholderColor: '#999999',
  floatPlaceholder: true,
  hideErrorWhenFocus: true,
  fixedFont: true
};
Input.contextTypes = {
  androidConfigs: _rax.PropTypes.any,
  commonConfigs: _rax.PropTypes.any
};
exports.default = Input;
module.exports = exports['default'];