ChainedCheckboxes 支持选项级别的 placeholder

This commit is contained in:
liaoxuezhi 2020-07-15 00:20:55 +08:00
parent 5d9b4b2ec9
commit aff5145bfe

View File

@ -120,7 +120,8 @@ export class ChainedCheckboxes extends BaseCheckboxes<
placeholder, placeholder,
classnames: cx, classnames: cx,
option2value, option2value,
itemRender itemRender,
translate: __
} = this.props; } = this.props;
this.valueArray = BaseCheckboxes.value2array(value, options, option2value); this.valueArray = BaseCheckboxes.value2array(value, options, option2value);
@ -137,18 +138,21 @@ export class ChainedCheckboxes extends BaseCheckboxes<
body, body,
options, options,
subTitle, subTitle,
indexes indexes,
placeholder
}: { }: {
body: Array<React.ReactNode>; body: Array<React.ReactNode>;
options: Array<Option> | null; options: Array<Option> | null;
subTitle?: string; subTitle?: string;
indexes: Array<number>; indexes: Array<number>;
placeholder?: string;
}, },
selected, selected,
depth depth
) => { ) => {
let nextOptions: Array<Option> = []; let nextOptions: Array<Option> = [];
let nextSubTitle: string = ''; let nextSubTitle: string = '';
let nextPlaceholder: string = '';
let nextIndexes = indexes; let nextIndexes = indexes;
body.push( body.push(
@ -158,25 +162,31 @@ export class ChainedCheckboxes extends BaseCheckboxes<
{subTitle} {subTitle}
</div> </div>
) : null} ) : null}
{Array.isArray(options) && options.length {Array.isArray(options) && options.length ? (
? options.map((option, index) => { options.map((option, index) => {
const id = indexes.concat(index).join('-'); const id = indexes.concat(index).join('-');
if (id === selected) { if (id === selected) {
nextSubTitle = option.subTitle; nextSubTitle = option.subTitle;
nextOptions = option.children!; nextOptions = option.children!;
nextIndexes = indexes.concat(index); nextIndexes = indexes.concat(index);
} nextPlaceholder = option.placeholder;
}
return this.renderOption(option, index, depth, id); return this.renderOption(option, index, depth, id);
}) })
: null} ) : (
<div className={cx('ChainedCheckboxes-placeholder')}>
{__(placeholder)}
</div>
)}
</div> </div>
); );
return { return {
options: nextOptions, options: nextOptions,
subTitle: nextSubTitle, subTitle: nextSubTitle,
placeholder: nextPlaceholder,
indexes: nextIndexes, indexes: nextIndexes,
body: body body: body
}; };
@ -184,13 +194,12 @@ export class ChainedCheckboxes extends BaseCheckboxes<
{ {
options, options,
body, body,
indexes: [] indexes: [],
placeholder
} }
); );
} }
const __ = this.props.translate;
return ( return (
<div className={cx('ChainedCheckboxes', className)}> <div className={cx('ChainedCheckboxes', className)}>
{body && body.length ? ( {body && body.length ? (