From 8f84d3760cf160df73f935854806ca36dec05e1a Mon Sep 17 00:00:00 2001
From: 2betop <2betop.cn@gmail.com>
Date: Tue, 13 Oct 2020 15:13:44 +0800
Subject: [PATCH] =?UTF-8?q?=E7=BB=99=20Each=20=E6=B7=BB=E5=8A=A0=20placeho?=
 =?UTF-8?q?der?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 scss/components/_each.scss |  7 ++++++
 scss/themes/cxd.scss       |  1 +
 scss/themes/dark.scss      |  1 +
 scss/themes/default.scss   |  1 +
 src/renderers/Each.tsx     | 47 ++++++++++++++++++++++++++------------
 5 files changed, 42 insertions(+), 15 deletions(-)
 create mode 100644 scss/components/_each.scss

diff --git a/scss/components/_each.scss b/scss/components/_each.scss
new file mode 100644
index 000000000..429d11e7d
--- /dev/null
+++ b/scss/components/_each.scss
@@ -0,0 +1,7 @@
+.#{$ns}Each {
+  &-placeholder {
+    color: $text--muted-color;
+    text-align: center;
+    padding: $gap-sm;
+  }
+}
diff --git a/scss/themes/cxd.scss b/scss/themes/cxd.scss
index 74550abcd..de9e413ea 100644
--- a/scss/themes/cxd.scss
+++ b/scss/themes/cxd.scss
@@ -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';
diff --git a/scss/themes/dark.scss b/scss/themes/dark.scss
index ea4badd14..715788a7a 100644
--- a/scss/themes/dark.scss
+++ b/scss/themes/dark.scss
@@ -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';
diff --git a/scss/themes/default.scss b/scss/themes/default.scss
index 9a367aaf3..e51b0810c 100644
--- a/scss/themes/default.scss
+++ b/scss/themes/default.scss
@@ -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';
diff --git a/src/renderers/Each.tsx b/src/renderers/Each.tsx
index 373fa7da4..245e82d0c 100644
--- a/src/renderers/Each.tsx
+++ b/src/renderers/Each.tsx
@@ -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>
     );
   }