UNPKG

@beisen-phoenix/lookup

Version:

---

206 lines (181 loc) 6.31 kB
import _extends from "@babel/runtime/helpers/extends"; import _classCallCheck from "@babel/runtime/helpers/classCallCheck"; import _createClass from "@babel/runtime/helpers/createClass"; import _possibleConstructorReturn from "@babel/runtime/helpers/possibleConstructorReturn"; import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf"; import _inherits from "@babel/runtime/helpers/inherits"; import * as React from 'react'; import SimpleList from './components/simpleList/index'; import AdvancedCmpt from './components/advancedCmpt/index'; import Modal from '@beisen-phoenix/modal'; import { getUpdateData } from './util.js'; import isEmpty from 'lodash/isEmpty'; //简单列表滚动加载,默认显示50条,可配置 //多语言 //展示模式 var Lookup = /*#__PURE__*/ function (_React$Component) { _inherits(Lookup, _React$Component); // 默认配置 function Lookup(props) { var _this; _classCallCheck(this, Lookup); _this = _possibleConstructorReturn(this, _getPrototypeOf(Lookup).call(this, props)); _this.modalRef = React.createRef(); _this.advancedRef = React.createRef(); _this.onSearchAllClick = function (selectValue) { var advanceParam = _this.props.advanceParam; if (advanceParam) { _this.setState({ mode: 'advanced', advancedModalVbl: true, selectValue: selectValue }); } }; _this.renderSimpleList = function () { var _this$props = _this.props, isSearchBox = _this$props.isSearchBox, isAvator = _this$props.isAvator, multiple = _this$props.multiple, isAdvanceSearchVbl = _this$props.isAdvanceSearchVbl, options = _this$props.options, selectValue = _this$props.selectValue, onConfirm = _this$props.onConfirm, onSearchChange = _this$props.onSearchChange, formatData = _this$props.formatData, searchUrl = _this$props.searchUrl, autoFocus = _this$props.autoFocus, translation = _this$props.translation; return React.createElement(SimpleList, { isSearchBox: isSearchBox, isAvator: isAvator, multiple: multiple, isAdvanceVbl: isAdvanceSearchVbl, options: options, selectValue: selectValue, onSearchAllClick: _this.onSearchAllClick, onSearchChange: onSearchChange, formatData: formatData, searchUrl: searchUrl, autoFocus: autoFocus, translation: translation, onOk: onConfirm }); }; _this.handleClose = function () { var _this$props2 = _this.props, onVisibleChange = _this$props2.onVisibleChange, mode = _this$props2.mode; if (onVisibleChange) { onVisibleChange(false); } _this.setState({ mode: mode, advancedModalVbl: false }); }; _this.handleCancel = function () { var _this$props3 = _this.props, onCancel = _this$props3.onCancel, mode = _this$props3.mode; if (onCancel) { onCancel(null); } _this.setState({ mode: mode, advancedModalVbl: false }); }; _this.handleAdvancedConfirm = function () { var _this$props4 = _this.props, onConfirm = _this$props4.onConfirm, mode = _this$props4.mode; if (onConfirm) { var data = _this.advancedRef.current.getSelected(); onConfirm(data); } _this.setState({ mode: mode, advancedModalVbl: false }); }; _this.getContainer = function () { return _this.modalRef.current; }; _this.renderAdvancedSelect = function () { var _this$props5 = _this.props, advanceParam = _this$props5.advanceParam, moreText = _this$props5.moreText, advancedVbl = _this$props5.advancedVbl, multiple = _this$props5.multiple, translation = _this$props5.translation; var _this$state = _this.state, advancedModalVbl = _this$state.advancedModalVbl, selectValue = _this$state.selectValue; return React.createElement(Modal, { ref: _this.modalRef, extraCls: "lookupAdvance", title: advanceParam && advanceParam.dlgTitle || moreText, visible: advancedVbl || advancedModalVbl, size: advanceParam && advanceParam.modalSize || 'large', height: advanceParam && advanceParam.modalHeight || '90%' //style={{height: advanceParam && advanceParam.modalHeight || '90%'} , escClosable: true, maskerClosable: false, onClose: _this.handleClose, onCancel: _this.handleCancel, onConfirm: _this.handleAdvancedConfirm, translation: translation }, React.createElement(AdvancedCmpt, _extends({ ref: _this.advancedRef, multiple: multiple, modalHeight: advanceParam && advanceParam.modalHeight //getContainer={this.getContainer} }, advanceParam, { selectValue: selectValue }))); }; _this.state = { options: props.options, mode: props.mode, advancedModalVbl: props.advancedModalVbl || false, selectValue: [] }; return _this; } _createClass(Lookup, [{ key: "componentDidUpdate", value: function componentDidUpdate(prevProps, prevState, snapshot) { var prop = getUpdateData(['selectValue', 'options', 'mode'], this.props, prevProps); if (!isEmpty(prop)) { this.setState(prop); } } }, { key: "render", value: function render() { var customCls = this.props.customCls; var mode = this.state.mode; return React.createElement("div", { className: 'phoenix-lookup ' + (customCls ? customCls : '') }, mode === 'simple' && this.renderSimpleList() || this.renderAdvancedSelect()); } }]); return Lookup; }(React.Component); Lookup.defaultProps = { mode: 'simple', multiple: false, autoFocus: true, translation: { clearSelected: "清空已选", selected: "已选", emptyMsg: "请在左侧选择内容", moreText: '全部查找', noDataText: '这里什么都没有', btnOkText: '确定', confirmText: '确定', cancelText: '取消' } }; export { Lookup as default };