react-component / tree-select / 266

pending completion

Build # 266

Build Type

push

travis-ci

Committed by

yesmeck

Commit Message

<a href="https://github.com/react-component/tree-select/commit/317adf0d1">Extract dropdown width as a state

See https://github.com/react-component/select/commit/</a><a class="double-link" href="https://github.com/react-component/tree-select/commit/f8f85619c">f8f85619c</a>

Run Details

492 of 749 branches covered (65.69%)

4 of 4 new or added lines in 1 file covered. (100.0%)

413 of 512 relevant lines covered (80.66%)

24.75 hits per line

Source File
Press 'n' to go to next uncovered line, 'b' for previous

85.48

/src/SelectTrigger.jsx

import React, { Component } from 'react';
import PropTypes from 'prop-types';
import ReactDOM from 'react-dom';
import classnames from 'classnames';
import Trigger from 'rc-trigger';
import Tree, { TreeNode } from 'rc-tree';
import { loopAllChildren, flatToHierarchy, getValuePropValue, labelCompatible } from './util';
import toArray from 'rc-util/lib/Children/toArray';

const BUILT_IN_PLACEMENTS = {
  bottomLeft: {
    points: ['tl', 'bl'],
    offset: [0, 4],
    overflow: {
      adjustX: 0,
      adjustY: 1,
    },
  },
  topLeft: {
    points: ['bl', 'tl'],
    offset: [0, -4],
    overflow: {
      adjustX: 0,
      adjustY: 1,
    },
  },
};

class SelectTrigger extends Component {
  static propTypes = {
    dropdownMatchSelectWidth: PropTypes.bool,
    dropdownPopupAlign: PropTypes.object,
    visible: PropTypes.bool,
    filterTreeNode: PropTypes.any,
    treeNodes: PropTypes.any,
    inputValue: PropTypes.string,
    prefixCls: PropTypes.string,
    popupClassName: PropTypes.string,
    children: PropTypes.any,
  };

  state = {
    _expandedKeys: [],
    fireOnExpand: false,
    dropdownWidth: null,
  };

  componentDidMount() {
    this.setDropdownWidth();
  }

  componentWillReceiveProps(nextProps) {
    if (nextProps.inputValue && nextProps.inputValue !== this.props.inputValue) {
      // set autoExpandParent to true
      this.setState({
        _expandedKeys: [],
        fireOnExpand: false,
      });
    }
  }

  componentDidUpdate() {
    this.setDropdownWidth();
  }

  onExpand = (expandedKeys) => {
    // rerender
    this.setState({
      _expandedKeys: expandedKeys,
      fireOnExpand: true,
    }, () => {
      // Fix https://github.com/ant-design/ant-design/issues/5689
      if (this.refs.trigger && this.refs.trigger.forcePopupAlign) {
        this.refs.trigger.forcePopupAlign();
      }
    });
  }

  setDropdownWidth() {
    const { visible } = this.props;
    if (visible) {
      const width = ReactDOM.findDOMNode(this).offsetWidth;
      if (width !== this.state.dropdownWidth) {
        this.setState({ dropdownWidth: width });
      }
    }
  }

  getPopupEleRefs() {
    return this.popupEle && this.popupEle.refs;
  }

  getPopupDOMNode() {
    return this.refs.trigger.getPopupDomNode();
  }

  getDropdownTransitionName() {
    const props = this.props;
    let transitionName = props.transitionName;
    if (!transitionName && props.animation) {
      transitionName = `${this.getDropdownPrefixCls()}-${props.animation}`;
    }
    return transitionName;
  }

  getDropdownPrefixCls() {
    return `${this.props.prefixCls}-dropdown`;
  }

  highlightTreeNode = (treeNode) => {
    const props = this.props;
    const filterVal = treeNode.props[labelCompatible(props.treeNodeFilterProp)];
    if (typeof filterVal === 'string') {
      return props.inputValue && filterVal.indexOf(props.inputValue) > -1;
    }
    return false;
  }

  filterTreeNode = (input, child) => {
    if (!input) {
      return true;
    }
    const filterTreeNode = this.props.filterTreeNode;
    if (!filterTreeNode) {
      return true;
    }
    if (child.props.disabled) {
      return false;
    }
    return filterTreeNode.call(this, input, child);
  }

  savePopupElement = (ele) => {
    this.popupEle = ele;
  }

  processTreeNode(treeNodes) {
    const filterPoss = [];
    this._expandedKeys = [];
    loopAllChildren(treeNodes, (child, index, pos) => {
      if (this.filterTreeNode(this.props.inputValue, child)) {
        filterPoss.push(pos);
        this._expandedKeys.push(child.key);
      }
    });

    // Include the filtered nodes's ancestral nodes.
    const processedPoss = [];
    filterPoss.forEach(pos => {
      const arr = pos.split('-');
      arr.reduce((pre, cur) => {
        const res = `${pre}-${cur}`;
        if (processedPoss.indexOf(res) < 0) {
          processedPoss.push(res);
        }
        return res;
      });
    });
    const filterNodesPositions = [];
    loopAllChildren(treeNodes, (child, index, pos) => {
      if (processedPoss.indexOf(pos) > -1) {
        filterNodesPositions.push({ node: child, pos });
      }
    });

    const hierarchyNodes = flatToHierarchy(filterNodesPositions);

    const recursive = children => {
      return children.map(child => {
        if (child.children) {
          return React.cloneElement(child.node, {}, recursive(child.children));
        }
        return child.node;
      });
    };
    return recursive(hierarchyNodes);
  }

  renderTree(keys, halfCheckedKeys, newTreeNodes, multiple) {
    const props = this.props;

    const trProps = {
      multiple,
      prefixCls: `${props.prefixCls}-tree`,
      showIcon: props.treeIcon,
      showLine: props.treeLine,
      defaultExpandAll: props.treeDefaultExpandAll,
      defaultExpandedKeys: props.treeDefaultExpandedKeys,
      filterTreeNode: this.highlightTreeNode,
    };

    if (props.treeCheckable) {
      trProps.selectable = false;
      trProps.checkable = props.treeCheckable;
      trProps.onCheck = props.onSelect;
      trProps.checkStrictly = props.treeCheckStrictly;
      if (props.inputValue) {
        // enable checkStrictly when search tree.
        trProps.checkStrictly = true;
      } else {
        trProps._treeNodesStates = props._treeNodesStates;
      }
      if (trProps.treeCheckStrictly && halfCheckedKeys.length) {
        trProps.checkedKeys = { checked: keys, halfChecked: halfCheckedKeys };
      } else {
        trProps.checkedKeys = keys;
      }
    } else {
      trProps.selectedKeys = keys;
      trProps.onSelect = props.onSelect;
    }

    // expand keys
    if (!trProps.defaultExpandAll && !trProps.defaultExpandedKeys && !props.loadData) {
      trProps.expandedKeys = keys;
    }
    trProps.autoExpandParent = true;
    trProps.onExpand = this.onExpand;
    if (this._expandedKeys && this._expandedKeys.length) {
      trProps.expandedKeys = this._expandedKeys;
    }
    if (this.state.fireOnExpand) {
      trProps.expandedKeys = this.state._expandedKeys;
      trProps.autoExpandParent = false;
    }

    // async loadData
    if (props.loadData) {
      trProps.loadData = props.loadData;
    }

    return (
      <Tree ref={this.savePopupElement} {...trProps}>
        {newTreeNodes}
      </Tree>
    );
  }

  render() {
    const props = this.props;
    const multiple = props.multiple;
    const dropdownPrefixCls = this.getDropdownPrefixCls();
    const popupClassName = {
      [props.dropdownClassName]: !!props.dropdownClassName,
      [`${dropdownPrefixCls}--${multiple ? 'multiple' : 'single'}`]: 1,
    };
    let visible = props.visible;
    const search = multiple || props.combobox || !props.showSearch ? null : (
      <span className={`${dropdownPrefixCls}-search`}>{props.inputElement}</span>
    );

    const recursive = children => {
      // Note: if use `React.Children.map`, the node's key will be modified.
      return toArray(children).map(function handler(child) { // eslint-disable-line
        if (!child) {
          return null;
        }
        if (child && child.props.children) {
          // null or String has no Prop
          return (
            <TreeNode {...child.props} key={child.key}>
              {recursive(child.props.children) }
            </TreeNode>
          );
        }
        return <TreeNode {...child.props} key={child.key} />;
      });
    };
    // const s = Date.now();
    let treeNodes;
    if (props._cachetreeData && this.treeNodes) {
      treeNodes = this.treeNodes;
    } else {
      treeNodes = recursive(props.treeData || props.treeNodes);
      this.treeNodes = treeNodes;
    }
    // console.log(Date.now()-s);

    if (props.inputValue) {
      treeNodes = this.processTreeNode(treeNodes);
    }

    const keys = [];
    const halfCheckedKeys = [];
    loopAllChildren(treeNodes, (child) => {
      if (props.value.some(item => item.value === getValuePropValue(child))) {
        keys.push(child.key);
      }
      if (props.halfCheckedValues &&
        props.halfCheckedValues.some(item => item.value === getValuePropValue(child))) {
        halfCheckedKeys.push(child.key);
      }
    });

    let notFoundContent;
    if (!treeNodes.length) {
      if (props.notFoundContent) {
        notFoundContent = (
          <span className={`${props.prefixCls}-not-found`}>
            {props.notFoundContent}
          </span>
        );
      } else if (!search) {
        visible = false;
      }
    }
    const popupElement = (
      <div>
        {search}
        {notFoundContent || this.renderTree(keys, halfCheckedKeys, treeNodes, multiple)}
      </div>
    );

    const popupStyle = { ...props.dropdownStyle };
    const widthProp = props.dropdownMatchSelectWidth ? 'width' : 'minWidth';
    if (this.state.dropdownWidth) {
      popupStyle[widthProp] = `${this.state.dropdownWidth}px`;
    }

    return (
      <Trigger
        action={props.disabled ? [] : ['click']}
        ref="trigger"
        popupPlacement="bottomLeft"
        builtinPlacements={BUILT_IN_PLACEMENTS}
        popupAlign={props.dropdownPopupAlign}
        prefixCls={dropdownPrefixCls}
        popupTransitionName={this.getDropdownTransitionName()}
        onPopupVisibleChange={props.onDropdownVisibleChange}
        popup={popupElement}
        popupVisible={visible}
        getPopupContainer={props.getPopupContainer}
        popupClassName={classnames(popupClassName)}
        popupStyle={popupStyle}
      >
        {this.props.children}
      </Trigger>
    );
  }
}

export default SelectTrigger;

1	import React, { Component } from 'react';	33!
2	import PropTypes from 'prop-types';	3✔
3	import ReactDOM from 'react-dom';	3✔
4	import classnames from 'classnames';	3✔
5	import Trigger from 'rc-trigger';	3✔
6	import Tree, { TreeNode } from 'rc-tree';	3✔
7	import { loopAllChildren, flatToHierarchy, getValuePropValue, labelCompatible } from './util';	3✔
8	import toArray from 'rc-util/lib/Children/toArray';	140!
9
10	const BUILT_IN_PLACEMENTS = {	3✔
11	bottomLeft: {
12	points: ['tl', 'bl'],
13	offset: [0, 4],
14	overflow: {
15	adjustX: 0,
16	adjustY: 1,
17	},
18	},
19	topLeft: {
20	points: ['bl', 'tl'],
21	offset: [0, -4],
22	overflow: {
23	adjustX: 0,
24	adjustY: 1,
25	},
26	},
27	};
28
29	class SelectTrigger extends Component {	90!
30	static propTypes = {
31	dropdownMatchSelectWidth: PropTypes.bool,
32	dropdownPopupAlign: PropTypes.object,
33	visible: PropTypes.bool,
34	filterTreeNode: PropTypes.any,
35	treeNodes: PropTypes.any,
36	inputValue: PropTypes.string,
37	prefixCls: PropTypes.string,
38	popupClassName: PropTypes.string,
39	children: PropTypes.any,
40	};
41
42	state = {
43	_expandedKeys: [],
44	fireOnExpand: false,
45	dropdownWidth: null,
46	};
47
48	componentDidMount() {
49	this.setDropdownWidth();
50	}
51
52	componentWillReceiveProps(nextProps) {
53	if (nextProps.inputValue && nextProps.inputValue !== this.props.inputValue) {
54	// set autoExpandParent to true
55	this.setState({
56	_expandedKeys: [],
57	fireOnExpand: false,
58	});
59	}
60	}
61
62	componentDidUpdate() {
63	this.setDropdownWidth();
64	}
65
66	onExpand = (expandedKeys) => {
67	// rerender
68	this.setState({	×
69	_expandedKeys: expandedKeys,
70	fireOnExpand: true,
71	}, () => {
72	// Fix https://github.com/ant-design/ant-design/issues/5689
73	if (this.refs.trigger && this.refs.trigger.forcePopupAlign) {	×
74	this.refs.trigger.forcePopupAlign();	×
75	}
76	});
77	}
78
79	setDropdownWidth() {
80	const { visible } = this.props;
81	if (visible) {
82	const width = ReactDOM.findDOMNode(this).offsetWidth;
83	if (width !== this.state.dropdownWidth) {
84	this.setState({ dropdownWidth: width });
85	}
86	}
87	}
88
89	getPopupEleRefs() {
90	return this.popupEle && this.popupEle.refs;
91	}
92
93	getPopupDOMNode() {
94	return this.refs.trigger.getPopupDomNode();
95	}
96
97	getDropdownTransitionName() {
98	const props = this.props;
99	let transitionName = props.transitionName;
100	if (!transitionName && props.animation) {
101	transitionName = `${this.getDropdownPrefixCls()}-${props.animation}`;
102	}
103	return transitionName;
104	}
105
106	getDropdownPrefixCls() {
107	return `${this.props.prefixCls}-dropdown`;
108	}
109
110	highlightTreeNode = (treeNode) => {
111	const props = this.props;	116✔
112	const filterVal = treeNode.props[labelCompatible(props.treeNodeFilterProp)];	116✔
113	if (typeof filterVal === 'string') {	116!
114	return props.inputValue && filterVal.indexOf(props.inputValue) > -1;	116✔
115	}
116	return false;	×
117	}
118
119	filterTreeNode = (input, child) => {
120	if (!input) {	18!
121	return true;	×
122	}
123	const filterTreeNode = this.props.filterTreeNode;	18✔
124	if (!filterTreeNode) {	18!
125	return true;	×
126	}
127	if (child.props.disabled) {	18!
128	return false;	×
129	}
130	return filterTreeNode.call(this, input, child);	18✔
131	}
132
133	savePopupElement = (ele) => {
134	this.popupEle = ele;	33✔
135	}	31✔
136		70!
137	processTreeNode(treeNodes) {	9✔
138	const filterPoss = [];	9✔
139	this._expandedKeys = [];	9✔
140	loopAllChildren(treeNodes, (child, index, pos) => {	9✔
141	if (this.filterTreeNode(this.props.inputValue, child)) {	18✔
142	filterPoss.push(pos);	9✔
143	this._expandedKeys.push(child.key);	9✔
144	}
145	});
146
147	// Include the filtered nodes's ancestral nodes.
148	const processedPoss = [];	9✔
149	filterPoss.forEach(pos => {	9✔
150	const arr = pos.split('-');	9✔
151	arr.reduce((pre, cur) => {	9✔
152	const res = `${pre}-${cur}`;	9✔
153	if (processedPoss.indexOf(res) < 0) {	9!
154	processedPoss.push(res);	9✔
155	}
156	return res;	9✔
157	});
158	});
159	const filterNodesPositions = [];	9✔
160	loopAllChildren(treeNodes, (child, index, pos) => {	9✔
161	if (processedPoss.indexOf(pos) > -1) {	18✔
162	filterNodesPositions.push({ node: child, pos });	9✔
163	}
164	});
165
166	const hierarchyNodes = flatToHierarchy(filterNodesPositions);	9✔
167
168	const recursive = children => {	9✔
169	return children.map(child => {	9✔
170	if (child.children) {	9!
171	return React.cloneElement(child.node, {}, recursive(child.children));	×
172	}
173	return child.node;	9✔
174	});
175	};
176	return recursive(hierarchyNodes);	9✔
177	}
178
179	renderTree(keys, halfCheckedKeys, newTreeNodes, multiple) {
180	const props = this.props;	66✔
181
182	const trProps = {	66✔
183	multiple,
184	prefixCls: `${props.prefixCls}-tree`,
185	showIcon: props.treeIcon,
186	showLine: props.treeLine,
187	defaultExpandAll: props.treeDefaultExpandAll,
188	defaultExpandedKeys: props.treeDefaultExpandedKeys,
189	filterTreeNode: this.highlightTreeNode,
190	};
191
192	if (props.treeCheckable) {	66✔
193	trProps.selectable = false;	23✔
194	trProps.checkable = props.treeCheckable;	23✔
195	trProps.onCheck = props.onSelect;	23✔
196	trProps.checkStrictly = props.treeCheckStrictly;	23✔
197	if (props.inputValue) {	23!
198	// enable checkStrictly when search tree.
199	trProps.checkStrictly = true;	×
200	} else {
201	trProps._treeNodesStates = props._treeNodesStates;	23✔
202	}
203	if (trProps.treeCheckStrictly && halfCheckedKeys.length) {	23!
204	trProps.checkedKeys = { checked: keys, halfChecked: halfCheckedKeys };	×
205	} else {
206	trProps.checkedKeys = keys;	23✔
207	}
208	} else {
209	trProps.selectedKeys = keys;	43✔
210	trProps.onSelect = props.onSelect;	43✔
211	}
212
213	// expand keys
214	if (!trProps.defaultExpandAll && !trProps.defaultExpandedKeys && !props.loadData) {	66✔
215	trProps.expandedKeys = keys;	61✔
216	}
217	trProps.autoExpandParent = true;	66✔
218	trProps.onExpand = this.onExpand;	66✔
219	if (this._expandedKeys && this._expandedKeys.length) {	66✔
220	trProps.expandedKeys = this._expandedKeys;	11✔
221	}
222	if (this.state.fireOnExpand) {	66!
223	trProps.expandedKeys = this.state._expandedKeys;	×
224	trProps.autoExpandParent = false;	×
225	}
226
227	// async loadData
228	if (props.loadData) {	66!
229	trProps.loadData = props.loadData;	×
230	}
231
232	return (	66✔
233	<Tree ref={this.savePopupElement} {...trProps}>
234	{newTreeNodes}
235	</Tree>
236	);
237	}
238
239	render() {
240	const props = this.props;	70✔
241	const multiple = props.multiple;	70✔
242	const dropdownPrefixCls = this.getDropdownPrefixCls();	70✔
243	const popupClassName = {	70✔
244	[props.dropdownClassName]: !!props.dropdownClassName,
245	[`${dropdownPrefixCls}--${multiple ? 'multiple' : 'single'}`]: 1,	70✔
246	};
247	let visible = props.visible;	70✔
248	const search = multiple \|\| props.combobox \|\| !props.showSearch ? null : (	70✔
249	<span className={`${dropdownPrefixCls}-search`}>{props.inputElement}</span>
250	);
251
252	const recursive = children => {	70✔
253	// Note: if use `React.Children.map`, the node's key will be modified.
254	return toArray(children).map(function handler(child) { // eslint-disable-line	80✔
255	if (!child) {	141✔
256	return null;	1✔
257	}
258	if (child && child.props.children) {	140✔
259	// null or String has no Prop
260	return (	19✔
261	<TreeNode {...child.props} key={child.key}>
262	{recursive(child.props.children) }
263	</TreeNode>
264	);
265	}
266	return <TreeNode {...child.props} key={child.key} />;	121✔
267	});
268	};
269	// const s = Date.now();
270	let treeNodes;	70✔
271	if (props._cachetreeData && this.treeNodes) {	70✔
272	treeNodes = this.treeNodes;	9✔
273	} else {
274	treeNodes = recursive(props.treeData \|\| props.treeNodes);	61✔
275	this.treeNodes = treeNodes;	61✔
276	}
277	// console.log(Date.now()-s);
278
279	if (props.inputValue) {	70✔
280	treeNodes = this.processTreeNode(treeNodes);	9✔
281	}
282
283	const keys = [];	70✔
284	const halfCheckedKeys = [];	70✔
285	loopAllChildren(treeNodes, (child) => {	70✔
286	if (props.value.some(item => item.value === getValuePropValue(child))) {	161✔
287	keys.push(child.key);	31✔
288	}
289	if (props.halfCheckedValues &&	161!
290	props.halfCheckedValues.some(item => item.value === getValuePropValue(child))) {	×
291	halfCheckedKeys.push(child.key);	×
292	}
293	});
294
295	let notFoundContent;	70✔
296	if (!treeNodes.length) {	70✔
297	if (props.notFoundContent) {	4!
298	notFoundContent = (	4✔
299	<span className={`${props.prefixCls}-not-found`}>
300	{props.notFoundContent}
301	</span>
302	);
303	} else if (!search) {	×
304	visible = false;	×
305	}
306	}
307	const popupElement = (
308	<div>	70✔
309	{search}
310	{notFoundContent \|\| this.renderTree(keys, halfCheckedKeys, treeNodes, multiple)}	136✔
311	</div>
312	);
313
314	const popupStyle = { ...props.dropdownStyle };	70✔
315	const widthProp = props.dropdownMatchSelectWidth ? 'width' : 'minWidth';	70!
316	if (this.state.dropdownWidth) {	70!
317	popupStyle[widthProp] = `${this.state.dropdownWidth}px`;	×
318	}
319
320	return (	70✔
321	<Trigger
322	action={props.disabled ? [] : ['click']}	70✔
323	ref="trigger"
324	popupPlacement="bottomLeft"
325	builtinPlacements={BUILT_IN_PLACEMENTS}
326	popupAlign={props.dropdownPopupAlign}
327	prefixCls={dropdownPrefixCls}
328	popupTransitionName={this.getDropdownTransitionName()}
329	onPopupVisibleChange={props.onDropdownVisibleChange}
330	popup={popupElement}
331	popupVisible={visible}
332	getPopupContainer={props.getPopupContainer}
333	popupClassName={classnames(popupClassName)}
334	popupStyle={popupStyle}
335	>
336	{this.props.children}
337	</Trigger>
338	);
339	}	3✔
340	}
341
342	export default SelectTrigger;	3✔

react-component / tree-select / 266

Source File Press 'n' to go to next uncovered line, 'b' for previous

Source File
Press 'n' to go to next uncovered line, 'b' for previous