ost-ui/dist/npm/OstNumKeyboard/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 } from 'react';
import PropTypes from 'prop-types';
import OstMask from '../OstMask';
import delSvg from './delete.svg';

var KeyboardArr = [{
  key: 1,
  en: ''
}, {
  key: 2,
  en: 'A B C'
}, {
  key: 3,
  en: 'D E F'
}, {
  key: 4,
  en: 'G H I'
}, {
  key: 5,
  en: 'J K L'
}, {
  key: 6,
  en: 'M N O'
}, {
  key: 7,
  en: 'P Q R S'
}, {
  key: 8,
  en: 'T U V'
}, {
  key: 9,
  en: 'W X Y Z'
}];

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

  function OstNumKeyboard() {
    var _temp, _this2, _ret;

    _classCallCheck(this, OstNumKeyboard);

    for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) {
      args[_key] = arguments[_key];
    }

    return _ret = (_temp = (_this2 = _possibleConstructorReturn(this, _Component.call.apply(_Component, [this].concat(args))), _this2), _this2.state = {
      keyStyle: {},
      value: ''
    }, _this2.upDateKeyStyle = function () {

      if (!_this2.box) return;

      var _this = _this2;

      setTimeout(function () {
        _this.setState({
          keyStyle: {
            width: _this.box.clientWidth * 0.31 + 'px',
            height: _this.box.clientWidth * 0.12 + 'px',
            marginLeft: _this.box.clientWidth * 0.0175 + 'px',
            marginTop: _this.box.clientWidth * 0.0175 + 'px'
          }
        });
      }, 100);
    }, _this2.updateValue = function (key) {
      var _this2$props = _this2.props,
          onChange = _this2$props.onChange,
          maxLength = _this2$props.maxLength;
      var value = _this2.state.value;

      var _maxLength = Number(maxLength);
      var _v = _maxLength ? (value + key).slice(0, _maxLength) : value + key;

      _this2.setState({ value: _v });
      onChange && onChange(_v);
    }, _this2.delValue = function () {
      var onChange = _this2.props.onChange;
      var value = _this2.state.value;


      var _value = value.slice(0, value.length - 1);

      _this2.setState({ value: _value });
      onChange && onChange(_value);
    }, _this2.resetValue = function () {
      var value = _this2.state.value;
      var _this2$props2 = _this2.props,
          show = _this2$props2.show,
          resetWhenClose = _this2$props2.resetWhenClose;

      var _this = _this2;

      if (!show && value && resetWhenClose) {
        setTimeout(function () {
          return _this2.setState({ value: '' });
        }, 300);
      }
    }, _temp), _possibleConstructorReturn(_this2, _ret);
  }

  OstNumKeyboard.prototype.componentDidMount = function componentDidMount() {
    this.upDateKeyStyle();
    this.resetValue();
  };

  OstNumKeyboard.prototype.componentDidUpdate = function componentDidUpdate() {
    var _props = this.props,
        show = _props.show,
        keyBoardRef = _props.keyBoardRef;


    if (!this.state.keyStyle.width && show) {

      this.upDateKeyStyle();
    }

    keyBoardRef && keyBoardRef(this.box);
    this.resetValue();

    if (show) {
      document.body.style.paddingBottom = this.box.clientHeight + 'px';
      var scrollTop = document.scrollingElement.scrollTop;
      document.scrollingElement.scrollTop = scrollTop + this.box.clientHeight;
    } else {
      document.body.style.paddingBottom = null;
      var _scrollTop = document.scrollingElement.scrollTop;
      document.scrollingElement.scrollTop = _scrollTop - this.box.clientHeight;
    }
  };

  // when close, reset value


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

    var _props2 = this.props,
        children = _props2.children,
        onChange = _props2.onChange,
        show = _props2.show,
        style = _props2.style,
        showMask = _props2.showMask,
        lock = _props2.lock;


    return React.createElement(
      OstMask,
      {
        show: show,
        key: '00',
        bottom: '0',
        right: '0',
        left: '0',
        unlock: lock ? false : true,
        style: { display: showMask ? null : 'none' } },
      children,
      React.createElement(
        'div',
        {
          ref: function ref(d) {
            return _this3.box = d;
          },
          className: 'ost-numKeyboard',
          style: _extends({}, style) },
        KeyboardArr.map(function (item, i) {
          return React.createElement(
            'div',
            {
              style: _this3.state.keyStyle,
              className: 'ost-numKeyboard-item',
              onClick: function onClick(e) {

                e.nativeEvent.stopImmediatePropagation();
                _this3.updateValue(item.key);
              },
              key: i },
            item.key
          );
        }),
        React.createElement('div', { style: this.state.keyStyle }),
        React.createElement(
          'div',
          {
            className: 'ost-numKeyboard-item',
            onClick: function onClick(e) {

              e.nativeEvent.stopImmediatePropagation();
              _this3.updateValue(0);
            },
            style: this.state.keyStyle },
          '0'
        ),
        React.createElement(
          'div',
          {
            className: 'ost-numKeyboard-del',
            onClick: function onClick(e) {

              e.nativeEvent.stopImmediatePropagation();
              _this3.delValue();
            },
            style: this.state.keyStyle },
          React.createElement('img', { src: delSvg })
        )
      )
    );
  };

  return OstNumKeyboard;
}(Component);

export default OstNumKeyboard;


OstNumKeyboard.propTypes = {
  style: PropTypes.object
};