@beisen-phoenix/lookup
Version:
---
206 lines (181 loc) • 6.31 kB
JavaScript
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 };