@ttk/component/es/activeLabelSelect/index.js

ttk组件库

import { _ as _defineProperty } from '../defineProperty-847730aa.js';
import { _ as _inherits, a as _getPrototypeOf, b as _possibleConstructorReturn, c as _classCallCheck, d as _createClass } from '../getPrototypeOf-b95655c5.js';
import React__default, { Component } from 'react';
import Select from '../antdSelect';
import isequal from 'lodash.isequal';
import '../_commonjsHelpers-471920d6.js';

function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }

function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }

function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }

function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
var Option = Select.Option;

var ActiveLabelSelect = /*#__PURE__*/function (_Component) {
  _inherits(ActiveLabelSelect, _Component);

  var _super = _createSuper(ActiveLabelSelect);

  function ActiveLabelSelect(props) {
    var _this;

    _classCallCheck(this, ActiveLabelSelect);

    _this = _super.call(this, props);

    _this.renderLabelChildItem = function () {
      var _this$state = _this.state,
          option = _this$state.option;
          _this$state.selectLabel;
      return option.map(function (item) {
        return /*#__PURE__*/React__default.createElement(Option, {
          title: item.name,
          className: "activeLabelSelect-option",
          key: item.key
        }, item.name);
      });
    };

    _this.labelChange = function (value) {
      var obj = {
        selectLabel: value,
        value: ''
      };

      _this.setState(obj);

      _this.updateToParent(obj);
    };

    _this.renderLable = function () {
      var _this$state2 = _this.state,
          option = _this$state2.option,
          selectLabel = _this$state2.selectLabel;
      var item = option.find(function (item) {
        return item.key == selectLabel;
      });
      var propsValue = _this.props.value;

      if (item && (propsValue === null || propsValue === undefined || propsValue === '')) {
        _this.state.value = item.value;
      }

      if (!selectLabel) {
        selectLabel = option && option.length > 0 ? option[0].key : '';
      }

      return /*#__PURE__*/React__default.createElement(Select, {
        value: selectLabel,
        onChange: _this.labelChange,
        dropdownClassName: "activeLabelSelect-option-label-dropDown",
        className: "mk-activeLabelSelect-label"
      }, _this.renderLabelChildItem());
    };

    _this.renderValueItem = function (data) {
      return data.map(function (item) {
        return /*#__PURE__*/React__default.createElement(Option, {
          className: "activeLabelSelect-option",
          _data: item,
          value: item.value.toString(),
          title: item.label
        }, item.label);
      });
    };

    _this.valueChange = function (value) {
      // this.state.value = value
      var obj = {
        value: value ? value : ''
      };

      _this.setState(obj);

      _this.updateToParent(obj);
    };

    _this.renderValue = function () {
      var _this$state3 = _this.state,
          option = _this$state3.option,
          selectLabel = _this$state3.selectLabel,
          value = _this$state3.value;
      _this.props.filterOption;

      if (!selectLabel) {
        selectLabel = option && option.length > 0 ? option[0].key : '';
      }

      var item = option.find(function (item) {
        return item.key == selectLabel;
      });
      console.log(value);
      return /*#__PURE__*/React__default.createElement(Select, {
        showSearch: true,
        onChange: _this.valueChange,
        value: value,
        onFocus: _this.handleFocus,
        dropdownClassName: "activeLabelSelect-option-value-dropDown",
        className: "mk-activeLabelSelect-value",
        allowClear: true,
        filterOption: function filterOption(input, option) {
          return _this.filterOption(input, option, item && item.children);
        }
      }, item && item.children ? _this.renderValueItem(item.children) : null);
    };

    _this.filterOption = function (inputValue, option, source) {
      if (option && option.props && option.props.value) {
        var itemData = source.find(function (o) {
          return o.value == option.props.value;
        });

        if (itemData.code && itemData.code.indexOf(inputValue) == 0 || itemData.name && itemData.name.indexOf(inputValue) != -1 || itemData.helpCode && itemData.helpCode.toUpperCase().indexOf(inputValue.toUpperCase()) != -1 || itemData.helpCodeFull && itemData.helpCodeFull.indexOf(inputValue) != -1) {
          return true;
        } else {
          return false;
        }
      }

      return true;
    };

    _this.updateToParent = function (params) {
      var state = _this.state;

      if (_this.props.onChange) {
        var _params$selectLabel = params.selectLabel,
            selectLabel = _params$selectLabel === void 0 ? state.selectLabel : _params$selectLabel,
            _params$value = params.value,
            value = _params$value === void 0 ? state.value : _params$value,
            _params$option = params.option,
            option = _params$option === void 0 ? state.option : _params$option;

        if (!selectLabel) {
          selectLabel = option && option.length > 0 ? option[0].key : '';
        }

        _this.props.onChange(selectLabel, value);
      }
    };

    _this.state = {
      selectLabel: props.selectLabel ? props.selectLabel : props.option && props.option[0] ? props.option[0].key : '',
      value: props.value ? props.value : '',
      option: props.option || []
    };
    return _this;
  }

  _createClass(ActiveLabelSelect, [{
    key: "shouldComponentUpdate",
    value: function shouldComponentUpdate(nextProps, nextState) {
      if (window.noshouldComponent) {
        return true;
      }

      return !(isequal(this.props, nextProps) && isequal(this.state, nextState));
    }
  }, {
    key: "componentWillReceiveProps",
    value: function componentWillReceiveProps(nextProps) {
      var state = this.state;
      this.props;

      var state2 = _objectSpread(_objectSpread({}, state), {}, {
        option: nextProps.option || [],
        selectLabel: nextProps.selectLabel || '',
        value: nextProps.value ? nextProps.value : state.value
      });

      this.setState(state2);
    }
  }, {
    key: "render",
    value: function render() {
      return /*#__PURE__*/React__default.createElement("div", {
        className: "mk-activeLabelSelect"
      }, this.renderLable(), this.renderValue());
    }
  }]);

  return ActiveLabelSelect;
}(Component);

export { ActiveLabelSelect as default };