From bb4a83e60a01fc296da50710e6e950c7fdf4e705 Mon Sep 17 00:00:00 2001
From: FateRiddle <fateriddle@gmail.com>
Date: Sat, 30 Nov 2019 12:12:03 +0800
Subject: [PATCH] list now support 'readonly', forbid editting

---
 src/widgets/antd/list.jsx   | 71 +++++++++++++++++++-----------------
 src/widgets/fusion/list.jsx | 73 +++++++++++++++++++------------------
 2 files changed, 75 insertions(+), 69 deletions(-)

diff --git a/src/widgets/antd/list.jsx b/src/widgets/antd/list.jsx
index 9a0b2d9..855b262 100644
--- a/src/widgets/antd/list.jsx
+++ b/src/widgets/antd/list.jsx
@@ -51,7 +51,7 @@ class ListItem extends React.Component {
   render() {
     const { item, p = {}, name, fold } = this.props;
     const descProps = { ...p, index: name };
-    const { options = {} } = p;
+    const { options = {}, readonly } = p;
     const { foldable: canFold, hideDelete } = options;
     // 只有当items为object时才做收起（fold）处理
     const isObj = p.schema.items && p.schema.items.type == 'object';
@@ -72,8 +72,8 @@ class ListItem extends React.Component {
             style={{ position: 'absolute', top: 12, right: 36 }}
           />
         )}
-        <DragHandle />
-        {!((canFold && fold) || hideDelete) && (
+        {!readonly && <DragHandle />}
+        {!((canFold && fold) || hideDelete || readonly) && (
           <Button
             className="self-end"
             type="dashed"
@@ -105,6 +105,7 @@ class FieldList extends React.Component {
 
   render() {
     const { p, foldList = [], toggleFoldItem } = this.props;
+    const { readonly } = p;
     const list = p.value || [];
     return (
       <ul className="pl0 ma0">
@@ -127,37 +128,39 @@ class FieldList extends React.Component {
             })}
           />
         ))}
-        <div className="tr">
-          <Button className="" icon="file-add" onClick={this.handleAddClick}>
-            新增
-          </Button>
-          {p.extraButtons &&
-            p.extraButtons.length > 0 &&
-            p.extraButtons.map(item => (
-              <Button
-                className="ml2"
-                icon={item.icon}
-                onClick={() => {
-                  if (item.callback === 'clearAll') {
-                    p.onChange(p.name, []);
-                    return;
-                  }
-                  if (item.callback === 'copyLast') {
-                    const value = [...p.value];
-                    const lastIndex = value.length - 1;
-                    value.push(lastIndex > -1 ? value[lastIndex] : p.newItem);
-                    p.onChange(p.name, value);
-                    return;
-                  }
-                  if (typeof window[item.callback] === 'function') {
-                    window[item.callback].call(); // eslint-disable-line
-                  }
-                }}
-              >
-                {item.text}
-              </Button>
-            ))}
-        </div>
+        {!readonly && (
+          <div className="tr">
+            <Button className="" icon="file-add" onClick={this.handleAddClick}>
+              新增
+            </Button>
+            {p.extraButtons &&
+              p.extraButtons.length > 0 &&
+              p.extraButtons.map(item => (
+                <Button
+                  className="ml2"
+                  icon={item.icon}
+                  onClick={() => {
+                    if (item.callback === 'clearAll') {
+                      p.onChange(p.name, []);
+                      return;
+                    }
+                    if (item.callback === 'copyLast') {
+                      const value = [...p.value];
+                      const lastIndex = value.length - 1;
+                      value.push(lastIndex > -1 ? value[lastIndex] : p.newItem);
+                      p.onChange(p.name, value);
+                      return;
+                    }
+                    if (typeof window[item.callback] === 'function') {
+                      window[item.callback].call(); // eslint-disable-line
+                    }
+                  }}
+                >
+                  {item.text}
+                </Button>
+              ))}
+          </div>
+        )}
       </ul>
     );
   }
diff --git a/src/widgets/fusion/list.jsx b/src/widgets/fusion/list.jsx
index 10352ed..9310a43 100644
--- a/src/widgets/fusion/list.jsx
+++ b/src/widgets/fusion/list.jsx
@@ -48,7 +48,7 @@ class ListItem extends React.Component {
   render() {
     const { item, p = {}, name, fold } = this.props;
     const descProps = { ...p, index: name };
-    const { options = {} } = p;
+    const { options = {}, readonly } = p;
     const { foldable: canFold, hideDelete } = options;
     // 只有当items为object时才做收起（fold）处理
     const isObj = p.schema.items && p.schema.items.type == 'object';
@@ -69,8 +69,8 @@ class ListItem extends React.Component {
             style={{ position: 'absolute', top: 12, right: 36 }}
           />
         )}
-        <DragHandle />
-        {!((canFold && fold) || hideDelete) && (
+        {!readonly && <DragHandle />}
+        {!((canFold && fold) || hideDelete || readonly) && (
           <Button
             className="self-end"
             onClick={() => {
@@ -100,6 +100,7 @@ class FieldList extends React.Component {
 
   render() {
     const { p, foldList = [], toggleFoldItem } = this.props;
+    const { readonly } = p;
     const list = p.value || [];
     return (
       <ul className="pl0 ma0">
@@ -122,38 +123,40 @@ class FieldList extends React.Component {
             })}
           />
         ))}
-        <div className="tr">
-          <Button className="" onClick={this.handleAddClick}>
-            <Icon type="add" />
-            新增
-          </Button>
-          {p.extraButtons &&
-            p.extraButtons.length > 0 &&
-            p.extraButtons.map(item => (
-              <Button
-                className="ml2"
-                onClick={() => {
-                  if (item.callback === 'clearAll') {
-                    p.onChange(p.name, []);
-                    return;
-                  }
-                  if (item.callback === 'copyLast') {
-                    const value = [...p.value];
-                    const lastIndex = value.length - 1;
-                    value.push(lastIndex > -1 ? value[lastIndex] : p.newItem);
-                    p.onChange(p.name, value);
-                    return;
-                  }
-                  if (typeof window[item.callback] === 'function') {
-                    window[item.callback].call(); // eslint-disable-line
-                  }
-                }}
-              >
-                <Icon type={item.icon} />
-                {item.text}
-              </Button>
-            ))}
-        </div>
+        {!readonly && (
+          <div className="tr">
+            <Button className="" onClick={this.handleAddClick}>
+              <Icon type="add" />
+              新增
+            </Button>
+            {p.extraButtons &&
+              p.extraButtons.length > 0 &&
+              p.extraButtons.map(item => (
+                <Button
+                  className="ml2"
+                  onClick={() => {
+                    if (item.callback === 'clearAll') {
+                      p.onChange(p.name, []);
+                      return;
+                    }
+                    if (item.callback === 'copyLast') {
+                      const value = [...p.value];
+                      const lastIndex = value.length - 1;
+                      value.push(lastIndex > -1 ? value[lastIndex] : p.newItem);
+                      p.onChange(p.name, value);
+                      return;
+                    }
+                    if (typeof window[item.callback] === 'function') {
+                      window[item.callback].call(); // eslint-disable-line
+                    }
+                  }}
+                >
+                  <Icon type={item.icon} />
+                  {item.text}
+                </Button>
+              ))}
+          </div>
+        )}
       </ul>
     );
   }