Skip to content

Commit de5bbe1

Browse files
author
liyuan-meng
committed
[Tree][TreeSelect]支持通过表单配置 size
1 parent f101186 commit de5bbe1

8 files changed

Lines changed: 75 additions & 54 deletions

File tree

‎src/components/form/demos/basic-forms.md‎

Lines changed: 43 additions & 34 deletions
Original file line numberDiff line numberDiff line change
@@ -85,8 +85,8 @@ export default function FormHorizontalDemo() {
8585
const [labelAlign, setLabelAlign] = useState('right');
8686
const [layout, setLayout] = useState('horizontal');
8787
const [disabled, setDisabled] = useState(false);
88-
const [singleNodes, setSingleNodes] = useState([]);
89-
const [selectedNodes, setSelectedNodes] = useState([]);
88+
// const [singleNodes, setSingleNodes] = useState([]);
89+
// const [selectedNodes, setSelectedNodes] = useState([]);
9090

9191
const [value, setValue] = useState();
9292
const radioList = [
@@ -204,9 +204,9 @@ export default function FormHorizontalDemo() {
204204
<Checkbox value={2}>京东</Checkbox>
205205
<Checkbox value={3}>苏宁</Checkbox>
206206
<Checkbox value={4}>蘑菇街</Checkbox>
207-
<Checkbox value={4}>拼多多</Checkbox>
208-
<Checkbox value={4}>线下</Checkbox>
209-
<Checkbox value={4}>有赞</Checkbox>
207+
<Checkbox value={5}>拼多多</Checkbox>
208+
<Checkbox value={6}>线下</Checkbox>
209+
<Checkbox value={7}>有赞</Checkbox>
210210
</Checkbox.Group>
211211
</Form.Item>
212212

@@ -250,35 +250,44 @@ export default function FormHorizontalDemo() {
250250
</Select>
251251
</Form.Item>
252252

253-
<Form.Item label="树下拉单选" required>
254-
<TreeSelect
255-
searchable
256-
allowClear
257-
type="single"
258-
isUnfold
259-
containParentNode
260-
placeholder="选择一个选项"
261-
style={{ width: 328 }}
262-
dataSource={treeData}
263-
value={singleNodes}
264-
onChange={(_, selectedNodes) => setSingleNodes(selectedNodes)}
265-
/>
266-
</Form.Item>
267-
268-
<Form.Item label="树下拉多选" required>
269-
<TreeSelect
270-
searchable
271-
allowClear
272-
type="multiple"
273-
isUnfold
274-
containParentNode
275-
placeholder="选择一个选项"
276-
style={{ width: 328 }}
277-
dataSource={treeData}
278-
value={selectedNodes}
279-
onChange={(_, selectedNodes) => setSelectedNodes(selectedNodes)}
280-
/>
281-
</Form.Item>
253+
{/*<Form.Item label="树下拉单选" required>*/}
254+
{/* <TreeSelect*/}
255+
{/* searchable*/}
256+
{/* allowClear*/}
257+
{/* type="single"*/}
258+
{/* isUnfold*/}
259+
{/* containParentNode*/}
260+
{/* placeholder="选择一个选项"*/}
261+
{/* style={{ width: 328 }}*/}
262+
{/* dataSource={treeData}*/}
263+
{/* {...field.init('tree1', {*/}
264+
{/* rules: [{*/}
265+
{/* validator: (name, value, callback) => {*/}
266+
{/* console.log(value, '-----')*/}
267+
{/* callback(value ? '' : '请选择');*/}
268+
{/* } */}
269+
{/* }]*/}
270+
{/* })}*/}
271+
{/* />*/}
272+
{/*</Form.Item>*/}
273+
274+
{/*<Form.Item label="树下拉多选" required>*/}
275+
{/* <TreeSelect*/}
276+
{/* searchable*/}
277+
{/* allowClear*/}
278+
{/* type="multiple"*/}
279+
{/* isUnfold*/}
280+
{/* containParentNode*/}
281+
{/* placeholder="选择一个选项"*/}
282+
{/* style={{ width: 328 }}*/}
283+
{/* dataSource={treeData}*/}
284+
{/* {...field.init('tree2', {*/}
285+
{/* rules: [{ required: true, message: '请选择' }]*/}
286+
{/* })}*/}
287+
{/* value={selectedNodes}*/}
288+
{/* onChange={(_, selectedNodes) => setSelectedNodes(selectedNodes)}*/}
289+
{/* />*/}
290+
{/*</Form.Item>*/}
282291

283292
<Form.Item wrapperCol={{ offset: 6 }}>
284293
<Button disabled={disabled} type="primary" style={{ marginRight: 10 }} onClick={() => {

‎src/components/form/index.less‎

Lines changed: 10 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -155,18 +155,18 @@
155155
// 表单校验样式
156156
.has-error {
157157
&,
158-
> .@{prefix}-select,
158+
> .@{prefix}-select > .@{prefix}-select-wrapper,
159+
> .@{prefix}-select > .@{prefix}-select-open .@{prefix}-select-wrapper,
160+
> .@{prefix}-input-number:not(.cloud-input-number-disabled),
161+
> .@{prefix}-input-textarea-wrapper > textarea,
162+
> .@{prefix}-tree-select .@{prefix}-tree-select-wrapper,
163+
> .@{prefix}-input,
164+
> .@{prefix}-input-affix,
159165
.@{prefix}-datepicker-inp-block,
160166
.@{prefix}-datepicker-container {
161-
> .@{prefix}-select-wrapper,
162-
> .@{prefix}-input-number,
163-
> .@{prefix}-input-textarea,
164-
> .@{prefix}-input,
165-
> .@{prefix}-input-affix {
166-
&,
167-
&:hover {
168-
border-color: @red-4;
169-
}
167+
&,
168+
&:hover {
169+
border-color: @red-4!important;
170170
}
171171
}
172172
}

‎src/components/form/render-children.js‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -47,7 +47,7 @@ export default class RenderChildren extends Component {
4747
'has-error': state === 'error',
4848
'has-success': state === 'success'
4949
})}>
50-
{cloneElement(child, child.props)}
50+
{cloneElement(child, { ...(child.props || {}), formSize: this.context.size })}
5151
{error ? <Explain className="error">{error}</Explain> : null}
5252
</div>
5353
);
@@ -59,7 +59,7 @@ export default class RenderChildren extends Component {
5959
items = this.renderChildren(props.children);
6060
}
6161

62-
return cloneElement(child, { key, ...child.props, children: items });
62+
return cloneElement(child, { key, ...child.props, children: items, formSize: this.context.size });
6363
});
6464
}
6565

‎src/components/select/index.js‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -550,6 +550,7 @@ class Select extends Component {
550550
isSupportTitle,
551551
size,
552552
supportUnlimited,
553+
formSize,
553554
...otherProps
554555
} = this.props;
555556
const { selected, open, style: popupStyle } = this.state;
@@ -584,7 +585,7 @@ class Select extends Component {
584585
dataSource={selected}
585586
metaData={this.children}
586587
disabled={disabled}
587-
size={size}
588+
size={formSize || size || 'default'}
588589
isSupportTitle={isSupportTitle}
589590
supportUnlimited={supportUnlimited}
590591
onSearchValueChange={this.onSearchValueChange}

‎src/components/tree-select/index.js‎

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -351,7 +351,9 @@ class TreeSelect extends Component {
351351
dropdownClassName,
352352
isAppendToBody,
353353
searchable,
354-
maxHeight,
354+
size,
355+
formSize,
356+
...otherProps
355357
} = this.props;
356358
const { value, open, style: popupStyle } = this.state;
357359
const { width } = this.selectedContainerStyle;
@@ -374,6 +376,7 @@ class TreeSelect extends Component {
374376
return (
375377
<div className={`${classNames}`} style={style} ref={this.node}>
376378
<Selected
379+
{...otherProps}
377380
ref={this.selectedNode}
378381
onClick={this.onClickSelected}
379382
onClear={this.onClearSelected}
@@ -387,15 +390,10 @@ class TreeSelect extends Component {
387390
searchInBox={this.props.searchInBox}
388391
treeRef={this.treeRef}
389392
setSearchStatus={this.setSearchStatus}
390-
type={this.props.type}
391393
onMultiChange={this.onValueChange}
392394
positionPop={this.positionPop}
393-
maxTagCount={this.props.maxTagCount}
394395
selectedList={this.state.value}
395-
isSearch={this.state.isSearch}
396-
showPath={this.props.showPath}
397-
showTag={this.props.showTag}
398-
maxHeight={maxHeight}
396+
size={formSize || size || 'default'}
399397
// singleTreeRef={this.singleTreeRef}
400398
// singleTreeValue={this.state.value}
401399
/>
@@ -437,6 +435,7 @@ TreeSelect.propTypes = {
437435
dropdownClassName: PropTypes.string,
438436
position: PropTypes.oneOf(['top', 'bottom', 'auto']),
439437
maxHeight: PropTypes.number,
438+
size: PropTypes.oneOf(['small', 'default', 'large']),
440439
};
441440

442441
TreeSelect.defaultProps = {
@@ -469,6 +468,7 @@ TreeSelect.defaultProps = {
469468
dropdownClassName: '',
470469
position: 'bottom',
471470
maxHeight: undefined,
471+
size: 'default',
472472
};
473473

474474
export default TreeSelect;

‎src/components/tree-select/index.less‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -127,6 +127,14 @@
127127
}
128128
}
129129

130+
&.small {
131+
height: 28px;
132+
}
133+
134+
&.large {
135+
height: 36px;
136+
}
137+
130138
// 单选-新-搜索框在输入框内
131139
&.search-in-box {
132140
padding: 6px 0 6px 12px;

‎src/components/tree-select/index.md‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -22,6 +22,7 @@ group:
2222
| ~~multiple~~ | ~~是否为多选下拉树~~ | ~~boolean~~ | ~~false~~ |
2323
| ~~single~~ | ~~是否为单选下拉树~~ | ~~boolean~~ | ~~false~~ |
2424
| disabled | 下拉禁用状态 | boolean | false |
25+
| size | 输入框大小，可选值为 `large` `default` `small` | string | `default` |
2526
| dataSource | 需要展示的数据，与下拉树类型相关 | array | [] |
2627
| defaultOpen | 默认下拉菜单展开状态 | boolean | false |
2728
| open | 下拉菜单展开状态，当使用此属性时组件本身 open 行为失效 | boolean | - |

‎src/components/tree-select/selected.js‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -90,6 +90,7 @@ export default class Selected extends React.Component {
9090
showPath,
9191
showTag,
9292
maxHeight,
93+
size,
9394
// singleTreeRef,
9495
// singleTreeValue,
9596
},
@@ -103,6 +104,7 @@ export default class Selected extends React.Component {
103104
empty: !selectStr,
104105
'search-in-box': type === SINGLE && searchable && searchInBox,
105106
'multi-search-in-box': type === MULTIPLE && (searchable && searchInBox || showTag),
107+
[size]: true,
106108
});
107109
const iconClasses = classnames(`${selector}-select-icon`, {
108110
open,

0 commit comments

Comments
 (0)