choerodon-ui
Version:
An enterprise-class UI design language and React-based implementation
260 lines (212 loc) • 9.39 kB
JavaScript
"use strict";
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault")["default"];
Object.defineProperty(exports, "__esModule", {
value: true
});
exports["default"] = void 0;
var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
var _get4 = _interopRequireDefault(require("@babel/runtime/helpers/get"));
var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
var _createSuper2 = _interopRequireDefault(require("@babel/runtime/helpers/createSuper"));
var _tslib = require("tslib");
var _react = _interopRequireDefault(require("react"));
var _mobxReact = require("mobx-react");
var _mobx = require("mobx");
var _debounce = _interopRequireDefault(require("lodash/debounce"));
var _defaultTo = _interopRequireDefault(require("lodash/defaultTo"));
var _isNil = _interopRequireDefault(require("lodash/isNil"));
var _UnitConvertor = require("../../../lib/_util/UnitConvertor");
var _Select = require("../select/Select");
var _SelectBox2 = require("../select-box/SelectBox");
var _enum = require("../radio/enum");
var _Option = _interopRequireDefault(require("../option/Option"));
var _autobind = _interopRequireDefault(require("../_util/autobind"));
function recordIsDisabled(record) {
return record.get(_Select.DISABLED_FIELD) || record.disabled;
}
var Segmented = /*#__PURE__*/function (_SelectBox) {
(0, _inherits2["default"])(Segmented, _SelectBox);
var _super = (0, _createSuper2["default"])(Segmented);
function Segmented(props, context) {
var _this;
(0, _classCallCheck2["default"])(this, Segmented);
_this = _super.call(this, props, context);
_this.handleBrowerResize = (0, _debounce["default"])(function () {
var fullWidth = _this.props.fullWidth;
if (fullWidth) {
_this.forceUpdate();
}
}, 50);
_this.initValue();
return _this;
}
(0, _createClass2["default"])(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 _enum.ViewMode.button;
}
}, {
key: "componentDidMount",
value: function componentDidMount() {
(0, _get4["default"])((0, _getPrototypeOf2["default"])(Segmented.prototype), "componentDidMount", this).call(this);
window.addEventListener('resize', this.handleBrowerResize);
}
}, {
key: "componentWillUnmount",
value: function componentWillUnmount() {
(0, _get4["default"])((0, _getPrototypeOf2["default"])(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 && ((0, _isNil["default"])(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 (0, _get4["default"])((0, _getPrototypeOf2["default"])(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 = (0, _get4["default"])((0, _getPrototypeOf2["default"])(Segmented.prototype), "getWrapperClassNames", this)).call.apply(_get2, [this, (_ref = {}, (0, _defineProperty2["default"])(_ref, "".concat(prefixCls, "-wrapper-vertical"), vertical), (0, _defineProperty2["default"])(_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 = (0, _get4["default"])((0, _getPrototypeOf2["default"])(Segmented.prototype), "getClassName", this)).call.apply(_get3, [this, (0, _defineProperty2["default"])({}, "".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 = (0, _UnitConvertor.toPx)(parentDomStyle.paddingLeft);
var parentDomPaddingTop = (0, _UnitConvertor.toPx)(parentDomStyle.paddingTop);
parentDomPadding = (0, _defaultTo["default"])(vertical ? parentDomPaddingTop : parentDomPaddingLeft, parentDomPadding);
}
segActiveStyle = (0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, 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["default"].createElement("div", {
className: "".concat(this.prefixCls, "-active-show"),
style: segActiveStyle
});
}
}, {
key: "renderSelectItems",
value: function renderSelectItems(items) {
var nowItems = /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, this.renderSegmentedActive(), items);
return (0, _get4["default"])((0, _getPrototypeOf2["default"])(Segmented.prototype), "renderSelectItems", this).call(this, nowItems);
}
}, {
key: "getOptionOtherProps",
value: function getOptionOtherProps(checked) {
if (checked) {
return (0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, (0, _get4["default"])((0, _getPrototypeOf2["default"])(Segmented.prototype), "getOptionOtherProps", this).call(this, checked)), {}, {
ref: this.saveActiveNode
});
}
return (0, _get4["default"])((0, _getPrototypeOf2["default"])(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;
}(_SelectBox2.SelectBox);
Segmented.displayName = 'Segmented';
Segmented.defaultProps = (0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, _SelectBox2.SelectBox.defaultProps), {}, {
suffixCls: 'segmented',
mode: _enum.ViewMode.button
});
Segmented.Option = _Option["default"];
(0, _tslib.__decorate)([_mobx.observable], Segmented.prototype, "activeRadio", void 0);
(0, _tslib.__decorate)([_autobind["default"], _mobx.action], Segmented.prototype, "saveActiveNode", null);
(0, _tslib.__decorate)([_autobind["default"]], Segmented.prototype, "renderSelectItems", null);
(0, _tslib.__decorate)([_autobind["default"]], Segmented.prototype, "getOptionOtherProps", null);
Segmented = (0, _tslib.__decorate)([_mobxReact.observer], Segmented);
var _default = Segmented;
exports["default"] = _default;
//# sourceMappingURL=Segmented.js.map