choerodon-ui/pro/es/segmented/Segmented.js

An enterprise-class UI design language and React-based implementation

import _objectSpread from "@babel/runtime/helpers/objectSpread2";
import _defineProperty from "@babel/runtime/helpers/defineProperty";
import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
import _createClass from "@babel/runtime/helpers/createClass";
import _get from "@babel/runtime/helpers/get";
import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";
import _inherits from "@babel/runtime/helpers/inherits";
import _createSuper from "@babel/runtime/helpers/createSuper";
import { __decorate } from "tslib";
import React from 'react';
import { observer } from 'mobx-react';
import { observable, action } from 'mobx';
import debounce from 'lodash/debounce';
import defaultTo from 'lodash/defaultTo';
import isNil from 'lodash/isNil';
import { toPx } from '../../../es/_util/UnitConvertor';
import { DISABLED_FIELD } from '../select/Select';
import { SelectBox } from '../select-box/SelectBox';
import { ViewMode } from '../radio/enum';
import Option from '../option/Option';
import autobind from '../_util/autobind';

function recordIsDisabled(record) {
  return record.get(DISABLED_FIELD) || record.disabled;
}

var Segmented = /*#__PURE__*/function (_SelectBox) {
  _inherits(Segmented, _SelectBox);

  var _super = _createSuper(Segmented);

  function Segmented(props, context) {
    var _this;

    _classCallCheck(this, Segmented);

    _this = _super.call(this, props, context);
    _this.handleBrowerResize = debounce(function () {
      var fullWidth = _this.props.fullWidth;

      if (fullWidth) {
        _this.forceUpdate();
      }
    }, 50);

    _this.initValue();

    return _this;
  }

  _createClass(Segmented, [{
    key: "multiple",
    get: function get() {
      return false;
    }
  }, {
    key: "range",
    get: function get() {
      return false;
    }
  }, {
    key: "searchable",
    get: function get() {
      return false;
    }
  }, {
    key: "mode",
    get: function get() {
      return ViewMode.button;
    }
  }, {
    key: "componentDidMount",
    value: function componentDidMount() {
      _get(_getPrototypeOf(Segmented.prototype), "componentDidMount", this).call(this);

      window.addEventListener('resize', this.handleBrowerResize);
    }
  }, {
    key: "componentWillUnmount",
    value: function componentWillUnmount() {
      _get(_getPrototypeOf(Segmented.prototype), "componentWillUnmount", this).call(this);

      window.removeEventListener('resize', this.handleBrowerResize);
    }
  }, {
    key: "initValue",
    value: function initValue() {
      var value = this.getValue();
      var filteredOptions = this.filteredOptions,
          valueField = this.valueField,
          options = this.options,
          onOption = this.props.onOption;

      if (filteredOptions.length > 0 && (isNil(value) || filteredOptions.every(function (record) {
        return record.get(valueField) !== value;
      }))) {
        var firstNotDisabled = filteredOptions.find(function (record) {
          var optionProps = onOption({
            dataSet: options,
            record: record
          });
          return !(recordIsDisabled(record) || optionProps.disabled);
        });
        this.setValue((firstNotDisabled || filteredOptions[0]).get(valueField));
      }
    }
  }, {
    key: "saveActiveNode",
    value: function saveActiveNode(node) {
      this.activeRadio = node;
    }
  }, {
    key: "getOmitPropsKeys",
    value: function getOmitPropsKeys() {
      return _get(_getPrototypeOf(Segmented.prototype), "getOmitPropsKeys", this).call(this).concat(['fullWidth']);
    }
  }, {
    key: "getWrapperClassNames",
    value: function getWrapperClassNames() {
      var _get2, _ref;

      var prefixCls = this.prefixCls,
          _this$props = this.props,
          vertical = _this$props.vertical,
          fullWidth = _this$props.fullWidth;

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

      return (_get2 = _get(_getPrototypeOf(Segmented.prototype), "getWrapperClassNames", this)).call.apply(_get2, [this, (_ref = {}, _defineProperty(_ref, "".concat(prefixCls, "-wrapper-vertical"), vertical), _defineProperty(_ref, "".concat(prefixCls, "-wrapper-fullwidth"), fullWidth), _ref)].concat(args));
    }
  }, {
    key: "getClassName",
    value: function getClassName() {
      var _get3;

      var prefixCls = this.prefixCls,
          fullWidth = this.props.fullWidth;

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

      return (_get3 = _get(_getPrototypeOf(Segmented.prototype), "getClassName", this)).call.apply(_get3, [this, _defineProperty({}, "".concat(prefixCls, "-fullwidth"), fullWidth)].concat(props));
    }
  }, {
    key: "renderSegmentedActive",
    value: function renderSegmentedActive() {
      var vertical = this.props.vertical;
      var segActiveStyle = {
        visibility: 'hidden'
      };

      if (this.activeRadio) {
        var radioInputDom = this.activeRadio;

        if (radioInputDom && radioInputDom.element && radioInputDom.element.parentElement) {
          var radioDom = radioInputDom.element.parentElement;
          var parentDomPadding = 4;

          if (radioDom.parentElement) {
            var parentDomStyle = window.getComputedStyle(radioDom.parentElement);
            var parentDomPaddingLeft = toPx(parentDomStyle.paddingLeft);
            var parentDomPaddingTop = toPx(parentDomStyle.paddingTop);
            parentDomPadding = defaultTo(vertical ? parentDomPaddingTop : parentDomPaddingLeft, parentDomPadding);
          }

          segActiveStyle = _objectSpread(_objectSpread({}, segActiveStyle), {}, {
            visibility: 'visible',
            width: radioDom.offsetWidth,
            height: radioDom.offsetHeight,
            transform: vertical ? "translate(0px, ".concat(radioDom.offsetTop - parentDomPadding, "px)") : "translate(".concat(radioDom.offsetLeft - parentDomPadding, "px, 0px)")
          });
        }
      }

      return /*#__PURE__*/React.createElement("div", {
        className: "".concat(this.prefixCls, "-active-show"),
        style: segActiveStyle
      });
    }
  }, {
    key: "renderSelectItems",
    value: function renderSelectItems(items) {
      var nowItems = /*#__PURE__*/React.createElement(React.Fragment, null, this.renderSegmentedActive(), items);
      return _get(_getPrototypeOf(Segmented.prototype), "renderSelectItems", this).call(this, nowItems);
    }
  }, {
    key: "getOptionOtherProps",
    value: function getOptionOtherProps(checked) {
      if (checked) {
        return _objectSpread(_objectSpread({}, _get(_getPrototypeOf(Segmented.prototype), "getOptionOtherProps", this).call(this, checked)), {}, {
          ref: this.saveActiveNode
        });
      }

      return _get(_getPrototypeOf(Segmented.prototype), "getOptionOtherProps", this).call(this, checked);
    }
  }, {
    key: "isSearchFieldInPopup",
    value: function isSearchFieldInPopup() {
      return false;
    }
  }, {
    key: "renderSearcher",
    value: function renderSearcher() {
      return null;
    }
  }, {
    key: "renderSelectAll",
    value: function renderSelectAll() {
      return null;
    }
  }]);

  return Segmented;
}(SelectBox);

Segmented.displayName = 'Segmented';
Segmented.defaultProps = _objectSpread(_objectSpread({}, SelectBox.defaultProps), {}, {
  suffixCls: 'segmented',
  mode: ViewMode.button
});
Segmented.Option = Option;

__decorate([observable], Segmented.prototype, "activeRadio", void 0);

__decorate([autobind, action], Segmented.prototype, "saveActiveNode", null);

__decorate([autobind], Segmented.prototype, "renderSelectItems", null);

__decorate([autobind], Segmented.prototype, "getOptionOtherProps", null);

Segmented = __decorate([observer], Segmented);
export default Segmented;
//# sourceMappingURL=Segmented.js.map