UNPKG

choerodon-ui

Version:

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

292 lines (245 loc) 10.1 kB
"use strict"; var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault")["default"]; Object.defineProperty(exports, "__esModule", { value: true }); exports["default"] = void 0; var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends")); 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 _get2 = _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 _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator")); var _tslib = require("tslib"); var _react = _interopRequireDefault(require("react")); var _mobxReact = require("mobx-react"); var _mobx = require("mobx"); var _classnames = _interopRequireDefault(require("classnames")); var _Select2 = require("../select/Select"); var _Radio = _interopRequireDefault(require("../radio/Radio")); var _CheckBox = _interopRequireDefault(require("../check-box/CheckBox")); var _autobind = _interopRequireDefault(require("../_util/autobind")); var _Option = _interopRequireDefault(require("../option/Option")); var _OptGroup = _interopRequireDefault(require("../option/OptGroup")); var _localeContext = require("../locale-context"); var _enum = require("../form/enum"); var _textField = _interopRequireDefault(require("../text-field")); var _icon = _interopRequireDefault(require("../icon")); var _Button = _interopRequireDefault(require("../button/Button")); var _enum2 = require("../button/enum"); var _normalizeOptions = require("../option/normalizeOptions"); var GroupIdGen = /*#__PURE__*/_regenerator["default"].mark(function _callee(id) { return _regenerator["default"].wrap(function _callee$(_context) { while (1) { switch (_context.prev = _context.next) { case 0: if (!true) { _context.next = 5; break; } _context.next = 3; return "__group-".concat(id++, "__"); case 3: _context.next = 0; break; case 5: case "end": return _context.stop(); } } }, _callee); })(1); var SelectBox = /*#__PURE__*/function (_Select) { (0, _inherits2["default"])(SelectBox, _Select); var _super = (0, _createSuper2["default"])(SelectBox); function SelectBox() { (0, _classCallCheck2["default"])(this, SelectBox); return _super.apply(this, arguments); } (0, _createClass2["default"])(SelectBox, [{ key: "defaultValidationMessages", get: function get() { var label = this.getProp('label'); return { valueMissing: (0, _localeContext.$l)('SelectBox', label ? 'value_missing' : 'value_missing_no_label', { label: label }) }; } }, { key: "name", get: function get() { return this.observableProps.name || GroupIdGen.next().value; } }, { key: "getOmitPropsKeys", value: function getOmitPropsKeys() { return (0, _get2["default"])((0, _getPrototypeOf2["default"])(SelectBox.prototype), "getOmitPropsKeys", this).call(this).concat(['vertical']); } }, { key: "getClassName", value: function getClassName() { var prefixCls = this.prefixCls, vertical = this.props.vertical; return (0, _get2["default"])((0, _getPrototypeOf2["default"])(SelectBox.prototype), "getClassName", this).call(this, (0, _defineProperty2["default"])({}, "".concat(prefixCls, "-vertical"), vertical)); } }, { key: "isEmpty", value: function isEmpty() { return false; } }, { key: "renderSearcher", value: function renderSearcher() { if (this.searchable) { var placeholder = this.props.placeholder; return /*#__PURE__*/_react["default"].createElement(_textField["default"], { prefix: /*#__PURE__*/_react["default"].createElement(_icon["default"], { type: "search" }), placeholder: placeholder, value: this.text, onInput: this.handleInput, labelLayout: this.labelLayout }); } } }, { key: "renderWrapper", value: function renderWrapper() { var _this = this; var name = this.name, options = this.options, filteredOptions = this.filteredOptions, textField = this.textField, valueField = this.valueField, readOnly = this.readOnly, disabled = this.disabled; var _this$props = this.props, autoFocus = _this$props.autoFocus, mode = _this$props.mode, onOption = _this$props.onOption, optionRenderer = _this$props.optionRenderer, optionsFilter = _this$props.optionsFilter; var highlight = this.getProp('highlight'); var items = filteredOptions.reduce(function (arr, record, index, data) { if (!optionsFilter || optionsFilter(record, index, data)) { var optionProps = onOption({ dataSet: options, record: record }); var text = record.get(textField); var value = record.get(valueField); var children = optionRenderer ? optionRenderer({ dataSet: options, record: record, text: text, value: value }) : text; var itemProps = (0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, record.get(_normalizeOptions.OTHER_OPTION_PROPS)), {}, { key: index, dataSet: null, record: null, value: value, checked: _this.isChecked(_this.getValue(), value), name: name, onChange: _this.handleItemChange, children: children, autoFocus: autoFocus && index === 0, readOnly: readOnly, disabled: disabled, mode: mode, noValidate: true, labelLayout: _enum.LabelLayout.none, highlight: highlight }); arr.push(_this.renderItem(optionProps ? (0, _objectSpread2["default"])((0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, optionProps), itemProps), {}, { className: (0, _classnames["default"])(optionProps.className, itemProps.className), style: (0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, optionProps.style), itemProps.style), disabled: itemProps.disabled || optionProps.disabled }) : itemProps)); } return arr; }, []); var className = this.getClassName(); var Element = this.context.formNode ? 'div' : 'form'; return /*#__PURE__*/_react["default"].createElement("span", (0, _extends2["default"])({ key: "wrapper" }, this.getWrapperProps()), this.renderSearcher(), this.renderSelectAll(), /*#__PURE__*/_react["default"].createElement(Element, { className: className, onMouseEnter: this.handleMouseEnter, onMouseLeave: this.handleMouseLeave }, items), this.renderFloatLabel(), options.paging && options.currentPage < options.totalPage && /*#__PURE__*/_react["default"].createElement(_Button["default"], { funcType: _enum2.FuncType.flat, icon: "more_horiz", onClick: this.handleQueryMore })); } }, { key: "handleQueryMore", value: function handleQueryMore() { var options = this.options; options.queryMore(options.currentPage + 1); } }, { key: "handleInput", value: function handleInput(e) { var value = e.target.value; this.setText(value); } }, { key: "handleItemChange", value: function handleItemChange(value, oldValue) { if (this.multiple) { var values = this.getValues(); if (!value) { values.splice(values.indexOf(oldValue), 1); } else { values.push(value); } this.setValue(values); } else { this.setValue(value); } } }, { key: "isChecked", value: function isChecked(value, checkedValue) { if ((0, _mobx.isArrayLike)(value)) { return value.indexOf(checkedValue) !== -1; } return value === checkedValue; } }, { key: "renderItem", value: function renderItem(props) { if (this.multiple) { return /*#__PURE__*/_react["default"].createElement(_CheckBox["default"], (0, _extends2["default"])({}, props)); } return /*#__PURE__*/_react["default"].createElement(_Radio["default"], (0, _extends2["default"])({}, props)); } }]); return SelectBox; }(_Select2.Select); SelectBox.displayName = 'SelectBox'; SelectBox.defaultProps = (0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, _Select2.Select.defaultProps), {}, { suffixCls: 'select-box', vertical: false, selectAllButton: false, checkValueOnOptionsChange: false }); SelectBox.Option = _Option["default"]; SelectBox.OptGroup = _OptGroup["default"]; // eslint-disable-next-line camelcase SelectBox.__IS_IN_CELL_EDITOR = true; (0, _tslib.__decorate)([_mobx.computed], SelectBox.prototype, "name", null); (0, _tslib.__decorate)([_autobind["default"]], SelectBox.prototype, "handleQueryMore", null); (0, _tslib.__decorate)([_autobind["default"]], SelectBox.prototype, "handleInput", null); (0, _tslib.__decorate)([_autobind["default"]], SelectBox.prototype, "handleItemChange", null); SelectBox = (0, _tslib.__decorate)([_mobxReact.observer], SelectBox); var _default = SelectBox; exports["default"] = _default; //# sourceMappingURL=SelectBox.js.map