mirror of
https://gitee.com/baidu/amis.git
synced 2024-12-02 03:58:07 +08:00
给 Each 添加 placehoder
This commit is contained in:
parent
7374e26f1f
commit
8f84d3760c
7
scss/components/_each.scss
Normal file
7
scss/components/_each.scss
Normal file
@ -0,0 +1,7 @@
|
||||
.#{$ns}Each {
|
||||
&-placeholder {
|
||||
color: $text--muted-color;
|
||||
text-align: center;
|
||||
padding: $gap-sm;
|
||||
}
|
||||
}
|
@ -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';
|
||||
|
@ -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';
|
||||
|
@ -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';
|
||||
|
@ -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>
|
||||
);
|
||||
}
|
||||
|
Loading…
Reference in New Issue
Block a user