ost-ui/dist/npm/OstPicker/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 Picker from 'rmc-picker';
import MultiPicker from 'rmc-picker/lib/MultiPicker';
import Popup from 'rmc-picker/lib/Popup';

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

  function OstPickerCore() {
    var _temp, _this, _ret;

    _classCallCheck(this, OstPickerCore);

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

    return _ret = (_temp = (_this = _possibleConstructorReturn(this, _Component.call.apply(_Component, [this].concat(args))), _this), _this.err = function (str) {
      throw new Error(str);
    }, _this.state = {
      pickerData: [],
      onActiveValue: null
    }, _this.filteredValue = [], _this.filteredLabel = [], _this.multiPickerDataCache = [], _this.onChange = function (value) {
      var onChange = _this.props.onChange;


      _this.makePickersUpdate(value);

      if (onChange && typeof onChange === 'function') {
        onChange(value);
      }
    }, _this.calcSelectedValues = function (data, value) {

      if (!value) {

        var item = data[0];

        _this.filteredValue.push(item.value);

        _this.filteredLabel.push(item.label);

        var _data = _this.getChildrenData(item);

        if (!_data) return;

        _this.calcSelectedValues(_data);
      }

      if (value && value instanceof Array) {
        _this.filteredValue = [];
        _this.filteredLabel = [];

        var _data2 = data;

        value.some(function (el, i, arr) {

          if (!_data2) return true;

          var item = _data2.find(function (item) {
            return item.value === el;
          });

          if (!item) {

            _this.calcSelectedValues(_data2);
            return true;
          }

          _this.filteredValue.push(item.value);

          _this.filteredLabel.push(item.label);

          _data2 = _this.getChildrenData(item);

          if (i + 1 === arr.length && _data2) {
            _this.calcSelectedValues(_data2);
          }
        });
      }
    }, _this.createMultiPickerData = function () {

      _this.multiPickerDataCache = [];

      var data = _this.props.data;


      var _data = data;

      _this.filteredValue.forEach(function (el) {
        var item = _data.find(function (item) {
          return item.value === el;
        });

        _this.multiPickerDataCache.push(_this.pickerFactory(_data));

        _data = _this.getChildrenData(item);
      });
    }, _this.pickerFactory = function (data) {

      var pickerItems = data.map(function (el, i) {
        return React.createElement(
          Picker.Item,
          { className: 'my-picker-view-item', value: el.value, key: 'picker-item-' + i + '-' + el.label },
          el.label
        );
      });

      return React.createElement(
        Picker,
        { indicatorClassName: 'my-picker-indicator' },
        pickerItems
      );
    }, _this.makePickersUpdate = function (value) {
      var _this$props = _this.props,
          data = _this$props.data,
          communicate = _this$props.communicate;


      _this.calcSelectedValues(data, value);
      _this.createMultiPickerData();

      var options = {
        pickerData: _this.multiPickerDataCache,
        onActiveValue: _this.filteredValue
      };

      _this.setState(options);

      communicate({
        selectedValue: _this.filteredValue,
        selectedLabel: _this.filteredLabel
      });
    }, _temp), _possibleConstructorReturn(_this, _ret);
  }

  OstPickerCore.prototype.getChildrenData = function getChildrenData(item) {

    var children = item && item.children;

    if (!children || !children.length) return null;

    return children;
  };

  OstPickerCore.prototype.componentWillMount = function componentWillMount() {
    this.makePickersUpdate(this.props.value);
  };

  OstPickerCore.prototype.componentWillUnmount = function componentWillUnmount() {
    this.props.onHide && this.props.onHide();
  };

  OstPickerCore.prototype.render = function render() {
    return React.createElement(
      'div',
      null,
      React.createElement(
        MultiPicker,
        {
          selectedValue: this.state.onActiveValue,
          onValueChange: this.onChange,
          onScrollChange: this.props.onScrollChange },
        this.state.pickerData.map(function (el, i) {
          return React.cloneElement(el, { key: 'picker-' + i });
        })
      )
    );
  };

  return OstPickerCore;
}(Component);

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

  function OstPicker() {
    var _temp2, _this2, _ret2;

    _classCallCheck(this, OstPicker);

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

    return _ret2 = (_temp2 = (_this2 = _possibleConstructorReturn(this, _Component2.call.apply(_Component2, [this].concat(args))), _this2), _this2.communicate = function (_ref) {
      var selectedValue = _ref.selectedValue,
          selectedLabel = _ref.selectedLabel;

      _this2.selectedValue = selectedValue;
      _this2.selectedLabel = selectedLabel;
    }, _this2.onOk = function () {
      var onOk = _this2.props.onOk;


      if (onOk && typeof onOk === 'function') {
        onOk(_this2.selectedValue, _this2.selectedLabel);
      }
    }, _temp2), _possibleConstructorReturn(_this2, _ret2);
  }

  OstPicker.prototype.render = function render() {
    var popupContent = React.createElement(OstPickerCore, _extends({
      communicate: this.communicate
    }, this.props));

    var _props = this.props,
        children = _props.children,
        title = _props.title,
        onCancel = _props.onCancel,
        cancelText = _props.cancelText,
        okText = _props.okText;


    return React.createElement(
      Popup,
      {
        transitionName: 'rmc-picker-popup-slide-fade',
        maskTransitionName: 'rmc-picker-popup-fade',
        content: popupContent,
        title: title,
        onDismiss: onCancel,
        onOk: this.onOk,
        dismissText: cancelText,
        okText: okText
      },
      children
    );
  };

  return OstPicker;
}(Component);

export default OstPicker;