seedsui-react/es/Picker/Picker.js

var _class, _temp;

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

import React, { Component } from 'react';
import PropTypes from 'prop-types';
import { createPortal } from 'react-dom';
import Instance from './instance.js';

if (!window._seeds_lang) window._seeds_lang = {}; // 国际化数据

var Picker = (_temp = _class = function (_Component) {
  _inherits(Picker, _Component);

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

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

    _this.componentDidMount = function () {
      _this.initInstance();
    };

    _this.shouldComponentUpdate = function (nextProps) {
      if (nextProps.show === _this.props.show) return false;
      return true;
    };

    _this.componentDidUpdate = function () {
      if (_this.instance) {
        if (_this.props.show) {
          _this.setDefault();
          _this.instance.show();
        } else _this.instance.hide();
      } else {
        if (_this.props.list.length > 0) {
          _this.initInstance();
        }
      }
    };

    _this.setDefault = function () {
      var _this$props = _this.props,
          valueForKey = _this$props.valueForKey,
          list = _this$props.list;

      var key = valueForKey || '';
      if (!key) {
        var defaultOpt = _this.getDefaults();
        if (defaultOpt && defaultOpt.key) key = defaultOpt.key;
      }
      _this.instance.clearSlots();
      _this.instance.addSlot(list, key || '', _this.props.slotClassName); // 添加列,参数:数据,默认key,样式(lock样式为锁定列)
    };

    _this.getDefaults = function () {
      var _this$props2 = _this.props,
          list = _this$props2.list,
          valueForKey = _this$props2.valueForKey,
          value = _this$props2.value;

      if (!valueForKey && !value) {
        if (list && list[0]) return list[0];
        return [{ key: '', value: '' }];
      }
      var values = list.filter(function (item) {
        if (valueForKey) {
          if (valueForKey === item.key) return true;
        } else if (value) {
          if (item.value === value) return true;
        }
        return false;
      });
      return values[0];
    };

    _this.initInstance = function () {
      var list = _this.props.list;

      if (!list || list.length === 0 || _this.instance) return;
      // render数据
      var instance = new Instance({
        mask: _this.$el,
        onClickMask: function onClickMask(e) {
          if (_this.props.onClickMask) _this.props.onClickMask(e);
        },
        onClickCancel: function onClickCancel(e) {
          // e.hide()
          if (_this.props.onClickCancel) _this.props.onClickCancel(e);
        },
        onClickSubmit: function onClickSubmit(e) {
          // e.hide()
          if (_this.props.onClickSubmit) _this.props.onClickSubmit(e);
        },
        onHid: function onHid(e) {}
      });
      // 默认项
      var defaultOpt = _this.getDefaults();
      var key = '';
      if (defaultOpt && defaultOpt.key) key = defaultOpt.key;
      instance.addSlot(list, key, _this.props.slotClassName);
      if (_this.props.show && instance) {
        instance.show();
      }
      _this.instance = instance;
    };

    return _this;
  }

  Picker.prototype.render = function render() {
    var _this2 = this;

    var _props = this.props,
        maskClassName = _props.maskClassName,
        maskStyle = _props.maskStyle,
        className = _props.className,
        style = _props.style;

    return createPortal(React.createElement(
      'div',
      { className: 'mask picker-mask' + (maskClassName ? ' ' + maskClassName : ''), style: maskStyle, ref: function ref(el) {
          _this2.$el = el;
        } },
      React.createElement(
        'div',
        { className: 'picker' + (className ? ' ' + className : ''), style: style },
        React.createElement(
          'div',
          { className: 'picker-header' },
          React.createElement(
            'a',
            { className: 'picker-cancel' },
            window._seeds_lang['cancel'] || '取消'
          ),
          React.createElement(
            'a',
            { className: 'picker-submit' },
            window._seeds_lang['finish'] || '完成'
          )
        ),
        React.createElement(
          'div',
          { className: 'picker-wrapper' },
          React.createElement(
            'div',
            { className: 'picker-layer' },
            React.createElement('div', { className: 'picker-layer-frame' })
          ),
          React.createElement('div', { className: 'picker-slotbox' })
        )
      )
    ), this.props.portal || document.getElementById('root'));
  };

  return Picker;
}(Component), _class.defaultProps = {
  slotClassName: 'text-center'
}, _temp);
export { Picker as default };
Picker.propTypes = process.env.NODE_ENV !== "production" ? {
  portal: PropTypes.object,
  list: PropTypes.array, // [{key: '', value: ''}]

  maskClassName: PropTypes.string,
  maskStyle: PropTypes.object,
  className: PropTypes.string,
  style: PropTypes.object,

  slotClassName: PropTypes.string,
  value: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
  valueForKey: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
  show: PropTypes.bool,
  onClickMask: PropTypes.func,
  onClickCancel: PropTypes.func,
  onClickSubmit: PropTypes.func
} : {};