给 Each 添加 placehoder

This commit is contained in:
2betop 2020-10-13 15:13:44 +08:00
parent 7374e26f1f
commit 8f84d3760c
5 changed files with 42 additions and 15 deletions

View File

@ -0,0 +1,7 @@
.#{$ns}Each {
&-placeholder {
color: $text--muted-color;
text-align: center;
padding: $gap-sm;
}
}

View File

@ -504,6 +504,7 @@ $Satus-icon-width: px2rem(14px);
@import '../components/spinner';
@import '../components/button-group';
@import '../components/dropdown';
@import '../components/each';
@import '../components/collapse';
@import '../components/color';
@import '../components/condition-builder';

View File

@ -187,6 +187,7 @@ pre {
@import '../components/spinner';
@import '../components/button-group';
@import '../components/dropdown';
@import '../components/each';
@import '../components/collapse';
@import '../components/color';
@import '../components/condition-builder';

View File

@ -50,6 +50,7 @@ $Form-input-borderColor: #cfdadd;
@import '../components/spinner';
@import '../components/button-group';
@import '../components/dropdown';
@import '../components/each';
@import '../components/collapse';
@import '../components/color';
@import '../components/condition-builder';

View File

@ -21,6 +21,8 @@ export interface EachSchema extends BaseSchema {
name?: string;
items?: SchemaCollection;
placeholder?: string;
}
export interface EachProps extends RendererProps {
@ -30,12 +32,23 @@ export interface EachProps extends RendererProps {
export default class Each extends React.Component<EachProps> {
static propsList: Array<string> = ['name', 'items', 'value'];
static defaultProps: Partial<EachProps> = {
className: ''
static defaultProps = {
className: '',
placeholder: '暂无内容'
};
render() {
const {data, name, className, render, value, items} = this.props;
const {
data,
name,
className,
render,
value,
items,
placeholder,
classnames: cx,
translate: __
} = this.props;
const arr =
typeof value !== 'undefined'
@ -50,18 +63,22 @@ export default class Each extends React.Component<EachProps> {
: resolveVariable(name, data);
return (
<div className={className}>
{Array.isArray(arr) && items
? arr.map((item: any, index: number) =>
render(`item/${index}`, items, {
data: createObject(
data,
isObject(item) ? item : {[name]: item, item: item}
),
key: index
})
)
: null}
<div className={cx('Each', className)}>
{Array.isArray(arr) && items ? (
arr.map((item: any, index: number) =>
render(`item/${index}`, items, {
data: createObject(
data,
isObject(item) ? item : {[name]: item, item: item}
),
key: index
})
)
) : (
<div className={cx('Each-placeholder')}>
{render('placeholder', __(placeholder))}
</div>
)}
</div>
);
}