1 | import React, {Component} from 'react';
|
2 | import {Panel} from 'bee-panel';
|
3 | import classnames from 'classnames';
|
4 | import PropTypes from 'prop-types';
|
5 | import AdvancedContainer from './AdvancedContainer';
|
6 | import HeadContainer from './HeadContainer';
|
7 | import i18n from './i18n';
|
8 | import { getComponentLocale } from 'bee-locale/build/tool';
|
9 |
|
10 |
|
11 | const emFun = () => {}
|
12 |
|
13 | const propTypes = {
|
14 | defaultExpanded: PropTypes.bool,
|
15 | expanded: PropTypes.bool,
|
16 | onSearch: PropTypes.func,
|
17 | onReset: PropTypes.func,
|
18 | resetName: PropTypes.string,
|
19 | searchName: PropTypes.string,
|
20 | title: PropTypes.string,
|
21 | onPanelChangeStart: PropTypes.func,
|
22 | onPanelChangeIng: PropTypes.func,
|
23 | onPanelChangeEnd: PropTypes.func,
|
24 | onChange: PropTypes.func,
|
25 | showOperation: PropTypes.bool
|
26 |
|
27 | };
|
28 |
|
29 | const defaultProps = {
|
30 | className: "",
|
31 | clsPrefix: 'u-search',
|
32 | defaultExpanded: false,
|
33 | bgColor: "#F7F9FB",
|
34 | showOperation: true
|
35 | };
|
36 |
|
37 |
|
38 | class SearchPanel extends Component {
|
39 | constructor(props) {
|
40 | super(props);
|
41 | this.state = {
|
42 | expanded: props.expanded || props.defaultExpanded
|
43 | };
|
44 | this._HeadContainer = null;
|
45 | this._AdvancedContainer = null;
|
46 | }
|
47 |
|
48 | componentWillReceiveProps(nextProps) {
|
49 | if ('expanded' in nextProps) {
|
50 | this.setState({expanded: nextProps.expanded})
|
51 | }
|
52 | }
|
53 |
|
54 | changeExpanded = () => {
|
55 | this.setState({
|
56 | expanded: !this.state.expanded
|
57 | })
|
58 | }
|
59 |
|
60 |
|
61 | _onChange = () => {
|
62 | const { onChange } = this.props;
|
63 | if ('expanded' in this.props) {
|
64 | this.setState({expanded: this.props.expanded})
|
65 | } else {
|
66 | this.setState({expanded: !this.state.expanded})
|
67 | }
|
68 | onChange && onChange()
|
69 | }
|
70 |
|
71 | search = () => {
|
72 | const { onSearch } = this.props;
|
73 | onSearch && onSearch();
|
74 | }
|
75 | reset = () => {
|
76 | const { onReset } = this.props;
|
77 | onReset && onReset();
|
78 | }
|
79 |
|
80 | _onPanelChange = (type, func) => {
|
81 | if (func) {
|
82 | let status = "";
|
83 | if (type === 0) {
|
84 | status = "hide"
|
85 | } else if (type === 1) {
|
86 | status = 'visible'
|
87 | }
|
88 | func(status)
|
89 | }
|
90 | }
|
91 |
|
92 | _onPanelChangeStart = (type) => {
|
93 | const { onPanelChangeStart } = this.props;
|
94 | onPanelChangeStart && this._onPanelChange(type, onPanelChangeStart)
|
95 | }
|
96 | _onPanelChangeIng = (type) => {
|
97 | const { onPanelChangeIng } = this.props;
|
98 | onPanelChangeIng && this._onPanelChange(type, onPanelChangeIng)
|
99 | }
|
100 | _onPanelChangeEnd = (type) => {
|
101 | const { onPanelChangeEnd } = this.props;
|
102 | onPanelChangeEnd && this._onPanelChange(type, onPanelChangeEnd)
|
103 | }
|
104 | _getChildren = (element) => {
|
105 | if(element.type.name === "HeadContainer" || element.type.prototype === HeadContainer.prototype){
|
106 |
|
107 | this._HeadContainer = element;
|
108 | }else if(element.type.name === "AdvancedContainer" || element.type.prototype === AdvancedContainer.prototype){
|
109 |
|
110 | this._AdvancedContainer = element;
|
111 | }
|
112 | }
|
113 |
|
114 |
|
115 | render() {
|
116 | const local = getComponentLocale(this.props, this.context, 'SearchPanel', () => i18n);
|
117 | let { children, clsPrefix, className, resetName, searchName, title, bgColor, style, showOperation } = this.props;
|
118 | if(!resetName)resetName=local['resetName'];
|
119 | if(!searchName)searchName=local['searchName'];
|
120 | if(!title)title=local['title'];
|
121 |
|
122 | const { expanded } = this.state;
|
123 | const _stype = style || {};
|
124 | if(children instanceof Array){
|
125 | children.forEach(element => {
|
126 | this._getChildren(element);
|
127 | });
|
128 | }else{
|
129 | this._getChildren(children);
|
130 | }
|
131 |
|
132 | return (
|
133 | <div className={clsPrefix + ' ' + className}
|
134 | style={{background: bgColor, ..._stype}}>
|
135 | <div className={clsPrefix + "-header"}>
|
136 | <div className={clsPrefix + "-header-title"}>
|
137 | <span>{title}</span>
|
138 | {}
|
139 | </div>
|
140 |
|
141 | <div className={clsPrefix + "-header-oper"}>
|
142 | {((this._HeadContainer||expanded)&&showOperation) ? <span className="header-oper-btn" role="button" onClick={this.reset}>{resetName}</span> : null}
|
143 | {((this._HeadContainer||expanded)&&showOperation) ? <span className="header-oper-btn primary" role="button" onClick={this.search}>{searchName}</span> : null}
|
144 | <span
|
145 | className="header-oper-btn"
|
146 | role="button"
|
147 | onClick={this._onChange}
|
148 | >
|
149 | {expanded ? local['up'] : local['down']}
|
150 | <i className={classnames({
|
151 | 'uf': true,
|
152 | 'uf-arrow-down': !expanded,
|
153 | 'uf-arrow-up': expanded
|
154 | })} />
|
155 | </span>
|
156 | </div>
|
157 | </div>
|
158 |
|
159 |
|
160 | <div className={clsPrefix + '-resident'}>
|
161 | {this._HeadContainer}
|
162 | </div>
|
163 |
|
164 | <Panel
|
165 | collapsible
|
166 | expanded={this.state.expanded}
|
167 | onExit={this._onPanelChangeStart.bind(this, 0)}
|
168 | onEnter={this._onPanelChangeStart.bind(this, 1)}
|
169 | onExiting={this._onPanelChangeIng.bind(this, 0)}
|
170 | onEntering={this._onPanelChangeIng.bind(this, 1)}
|
171 | onExited={this._onPanelChangeEnd.bind(this, 0)}
|
172 | onEntered={this._onPanelChangeEnd.bind(this, 1)}
|
173 | >
|
174 | {this._AdvancedContainer}
|
175 | </Panel>
|
176 | </div>
|
177 |
|
178 | )
|
179 | }
|
180 | }
|
181 | SearchPanel.propTypes = propTypes;
|
182 | SearchPanel.defaultProps = defaultProps;
|
183 | SearchPanel.contextTypes = {
|
184 | beeLocale: PropTypes.object
|
185 | };
|
186 |
|
187 | export default SearchPanel; |
\ | No newline at end of file |