ost-ui/dist/npm/OstInput/index.js

ost ui for react

import _extends from 'babel-runtime/helpers/extends';
import _classCallCheck from 'babel-runtime/helpers/classCallCheck';
import _possibleConstructorReturn from 'babel-runtime/helpers/possibleConstructorReturn';
import _inherits from 'babel-runtime/helpers/inherits';
import React, { Component, useState, useEffect, useRef } from 'react';
import PropTypes from 'prop-types';
import clsPrefix from 'cls-prefix';
import delIcon from './delIcon.svg';

var sixBitClsPre = new clsPrefix('ost-input-sixBitCode').splice;

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

  function SixBitCode(props) {
    _classCallCheck(this, SixBitCode);

    var _this2 = _possibleConstructorReturn(this, _Component.call(this, props));

    _this2.refArr = [];
    _this2.SixBitCodeArr = [{
      value: ''
    }, {
      value: ''
    }, {
      value: ''
    }, {
      value: ''
    }, {
      value: ''
    }, {
      value: ''
    }];

    _this2.diffOnChange = function (value) {
      var onChange = _this2.props.onChange;

      var newVal = value.slice(0, 6);

      var _val = '';

      for (var i = 0; i < _this2.SixBitCodeArr.length; i++) {
        _val += _this2.SixBitCodeArr[i].value;
      }

      if (_val !== newVal) {
        onChange && onChange(newVal);
      }
    };

    _this2._eventListener = function (e) {
      var _this2$props = _this2.props,
          value = _this2$props.value,
          onBlur = _this2$props.onBlur;


      var _length = _this2.refArr.filter(function (ele) {
        return e.target === ele;
      }).length;

      if (!_length) {

        onBlur && onBlur(value);
        _this2.setState({ isFocus: false });
      }
    };

    _this2.theOnBlur = function () {
      var isFocus = _this2.state.isFocus;


      if (isFocus) {

        document.addEventListener("click", _this2._eventListener, false);
      } else {

        document.removeEventListener("click", _this2._eventListener, false);
      }
    };

    _this2.getEmptyindex = function () {
      var SixBitCodeArr = _this2.SixBitCodeArr;


      for (var i = 0; i < SixBitCodeArr.length; i++) {
        if (!SixBitCodeArr[i].value) {
          return i;
        }
      }
    };

    _this2.state = {
      isFocus: props.autoFocus ? true : false
    };

    props.autoFocus && props.onFocus && props.onFocus();
    return _this2;
  }

  SixBitCode.prototype.componentDidMount = function componentDidMount() {
    this.theOnBlur();
  };

  SixBitCode.prototype.componentDidUpdate = function componentDidUpdate() {
    this.theOnBlur();
  };

  SixBitCode.prototype.componentWillUpdate = function componentWillUpdate(nextProps, nextState) {
    this.diffOnChange(nextProps.value);
  };

  SixBitCode.prototype.componentWillUnmount = function componentWillUnmount() {
    document.removeEventListener("click", this._eventListener, false);
  };

  SixBitCode.prototype.render = function render() {
    var _this3 = this;

    var SixBitCodeArr = this.SixBitCodeArr;
    var isFocus = this.state.isFocus;
    var _props = this.props,
        _props$value = _props.value,
        value = _props$value === undefined ? '' : _props$value,
        onFocus = _props.onFocus,
        style = _props.style,
        itemStyle = _props.itemStyle;


    var vArr = value.split('');

    for (var i = 0; i < SixBitCodeArr.length; i++) {

      if (vArr[i]) {
        SixBitCodeArr[i].value = vArr[i];
      } else {
        SixBitCodeArr[i].value = '';
      }
    }

    return React.createElement(
      'div',
      {
        style: style,
        className: sixBitClsPre() },
      SixBitCodeArr.map(function (ele, i) {

        return React.createElement(
          'div',
          {
            onClick: function onClick() {
              _this3.setState({ isFocus: true });
              !isFocus && onFocus && onFocus(value);
            },
            ref: function ref(e) {
              return _this3.refArr.push(e);
            },
            style: itemStyle,
            className: sixBitClsPre('fakeInput', { 'fakeInput-onFocus': i === _this3.getEmptyindex() && isFocus }),
            key: i },
          ele.value
        );
      })
    );
  };

  return SixBitCode;
}(Component);

var ostInputClsPre = new clsPrefix('ost-input').splice;

var OstInput = function (_Component2) {
  _inherits(OstInput, _Component2);

  function OstInput(props) {
    _classCallCheck(this, OstInput);

    var _this4 = _possibleConstructorReturn(this, _Component2.call(this, props));

    _this4.state = { closeBtn: false };
    return _this4;
  }

  OstInput.prototype.componentWillUnmount = function componentWillUnmount() {
    clearTimeout(this._setTimeout);
  };

  OstInput.prototype.render = function render() {
    var _this5 = this;

    var _props2 = this.props,
        defaultValue = _props2.defaultValue,
        value = _props2.value,
        _onChange = _props2.onChange,
        onDel = _props2.onDel,
        placeholder = _props2.placeholder,
        disabled = _props2.disabled,
        type = _props2.type,
        maxLength = _props2.maxLength,
        _onBlur = _props2.onBlur,
        _onFocus = _props2.onFocus,
        countdown = _props2.countdown,
        countstart = _props2.countstart,
        countend = _props2.countend,
        countDisabled = _props2.countDisabled;


    return React.createElement(
      'div',
      { className: ostInputClsPre() },
      React.createElement('input', {
        className: ostInputClsPre({ disabled: disabled }),
        type: type || "text",
        disabled: disabled,
        maxLength: maxLength,
        defaultValue: defaultValue,
        value: maxLength && value ? value.slice(0, maxLength) : value,
        onBlur: function onBlur() {
          var _this = _this5;

          _this._setTimeout = setTimeout(function () {

            _onBlur && _onBlur();

            _this.setState({ closeBtn: false });
          }, 300);
        },
        onFocus: function onFocus() {
          _onFocus && _onFocus();
          _this5.setState({ closeBtn: true });
        },
        onChange: function onChange(e) {

          var _e = void 0;

          if (maxLength) {
            _e = _extends({}, e, {
              currentTarget: _extends({}, e.currentTarget, {
                value: e.currentTarget.value.slice(0, maxLength)
              }),
              target: _extends({}, e.target, {
                value: e.target.value.slice(0, maxLength)
              })
            });
          } else {
            _e = e;
          }

          _onChange && _onChange(_e);
        },
        placeholder: placeholder
      }),
      value && onDel && this.state.closeBtn && React.createElement(
        'div',
        { className: ostInputClsPre('delBtn') },
        React.createElement('img', {
          onClick: onDel,
          src: delIcon })
      ),
      countdown && React.createElement(Countdown, {
        countDisabled: countDisabled,
        countstart: countstart,
        countend: countend,
        countdown: countdown })
    );
  };

  return OstInput;
}(Component);

OstInput.sixBit = SixBitCode;


export default OstInput;

OstInput.propTypes = {
  title: PropTypes.string,
  countdown: PropTypes.number
};

var countdownClsPre = new clsPrefix('ost-input-countdown').splice;

function Countdown(_ref) {
  var countdown = _ref.countdown,
      countstart = _ref.countstart,
      countend = _ref.countend,
      countDisabled = _ref.countDisabled;

  var _useState = useState(true),
      firstTimeExec = _useState[0],
      updateExecTimes = _useState[1];

  var _useState2 = useState(countdown),
      countState = _useState2[0],
      countSetState = _useState2[1];

  var _useState3 = useState(false),
      counting = _useState3[0],
      countingSetState = _useState3[1];

  var _setInterval = useRef(null);
  var n = countdown;
  var countSetStateHandler = function countSetStateHandler() {

    if (n <= 0) {
      n = countdown;
      countSetState(countdown);
      clearInterval(_setInterval.current);
      //倒计时结束的回调
      countend && countend();
      updateExecTimes(false);
      countingSetState(false);
    } else {
      countSetState(--n);
    }
  };

  var onClickCountBtn = function onClickCountBtn() {

    if (countDisabled || countState !== countdown) {
      // Disabled 状态或正则倒计时中
      return;
    }

    var resetCount = function resetCount() {
      n = 0;
    };
    // countstart 的回调
    countstart && countstart(resetCount);

    countingSetState(true);
    _setInterval.current = setInterval(countSetStateHandler, 1000);
  };

  useEffect(function () {
    return function () {
      clearInterval(_setInterval.current);
    };
  }, []);

  return React.createElement(
    'div',
    {
      onClick: onClickCountBtn,
      className: countdownClsPre() },
    React.createElement(
      'span',
      {
        className: countdownClsPre('item', {
          'disabled': countDisabled,
          'hide': !firstTimeExec || counting
        }) },
      '\u83B7\u53D6\u9A8C\u8BC1\u7801'
    ),
    React.createElement(
      'span',
      {
        className: countdownClsPre('item', {
          'disabled': true,
          'hide': !counting
        }) },
      countState,
      's\u540E\u91CD\u65B0\u53D1\u9001'
    ),
    React.createElement(
      'span',
      {
        className: countdownClsPre('item', {
          'disabled': countDisabled,
          'hide': firstTimeExec || counting
        }) },
      '\u91CD\u53D1'
    )
  );
}