From 40cdca8adf7274eb7a374717684217213272f02f Mon Sep 17 00:00:00 2001
From: haitaoo <haitao@sifou.com>
Date: Thu, 20 Apr 2023 18:56:37 +0800
Subject: [PATCH] feat(SchemaForm): All form components support the readOnly
 property

---
 ui/src/components/BrandUpload/index.tsx           | 15 +++++++++++++--
 ui/src/components/SchemaForm/components/Check.tsx |  4 +++-
 .../components/SchemaForm/components/Switch.tsx   | 12 ++++++++++--
 .../components/SchemaForm/components/Timezone.tsx |  9 ++++++++-
 .../components/SchemaForm/components/Upload.tsx   |  4 +++-
 ui/src/components/SchemaForm/index.tsx            |  4 ++++
 ui/src/components/UploadImg/index.tsx             |  4 +++-
 7 files changed, 44 insertions(+), 8 deletions(-)

diff --git a/ui/src/components/BrandUpload/index.tsx b/ui/src/components/BrandUpload/index.tsx
index c921fbdf..419e1d8d 100644
--- a/ui/src/components/BrandUpload/index.tsx
+++ b/ui/src/components/BrandUpload/index.tsx
@@ -9,9 +9,16 @@ interface Props {
   value: string;
   onChange: (value: string) => void;
   acceptType?: string;
+  readOnly?: boolean;
 }
 
-const Index: FC<Props> = ({ type = 'post', value, onChange, acceptType }) => {
+const Index: FC<Props> = ({
+  type = 'post',
+  value,
+  onChange,
+  acceptType,
+  readOnly = false,
+}) => {
   const onUpload = (imgPath: string) => {
     onChange(imgPath);
   };
@@ -29,11 +36,15 @@ const Index: FC<Props> = ({ type = 'post', value, onChange, acceptType }) => {
           type={type}
           uploadCallback={onUpload}
           className="mb-0"
+          disabled={readOnly}
           acceptType={acceptType}>
           <Icon name="cloud-upload" />
         </UploadImg>
 
-        <Button variant="outline-secondary" onClick={onRemove}>
+        <Button
+          disabled={readOnly}
+          variant="outline-secondary"
+          onClick={onRemove}>
           <Icon name="trash" />
         </Button>
       </ButtonGroup>
diff --git a/ui/src/components/SchemaForm/components/Check.tsx b/ui/src/components/SchemaForm/components/Check.tsx
index 5a62872c..fd18fb89 100644
--- a/ui/src/components/SchemaForm/components/Check.tsx
+++ b/ui/src/components/SchemaForm/components/Check.tsx
@@ -10,6 +10,7 @@ interface Props {
   enumValues: (string | boolean | number)[];
   enumNames: string[];
   formData: Type.FormDataType;
+  readOnly?: boolean;
 }
 const Index: FC<Props> = ({
   type = 'radio',
@@ -18,6 +19,7 @@ const Index: FC<Props> = ({
   enumValues,
   enumNames,
   formData,
+  readOnly = false,
 }) => {
   const fieldObject = formData[fieldName];
   const handleCheck = (
@@ -45,7 +47,6 @@ const Index: FC<Props> = ({
           <Form.Check
             key={String(item)}
             inline
-            required
             type={type}
             name={fieldName}
             id={`form-${String(item)}`}
@@ -54,6 +55,7 @@ const Index: FC<Props> = ({
             feedback={fieldObject?.errorMsg}
             feedbackType="invalid"
             isInvalid={fieldObject?.isInvalid}
+            disabled={readOnly}
             onChange={(evt) => handleCheck(evt, index)}
           />
         );
diff --git a/ui/src/components/SchemaForm/components/Switch.tsx b/ui/src/components/SchemaForm/components/Switch.tsx
index 7de87d06..9e19bf35 100644
--- a/ui/src/components/SchemaForm/components/Switch.tsx
+++ b/ui/src/components/SchemaForm/components/Switch.tsx
@@ -9,8 +9,16 @@ interface Props {
   fieldName: string;
   onChange?: (fd: Type.FormDataType) => void;
   formData: Type.FormDataType;
+  readOnly?: boolean;
 }
-const Index: FC<Props> = ({ title, fieldName, onChange, label, formData }) => {
+const Index: FC<Props> = ({
+  title,
+  fieldName,
+  onChange,
+  label,
+  formData,
+  readOnly = false,
+}) => {
   const fieldObject = formData[fieldName];
   const handleChange = (evt: React.ChangeEvent<HTMLInputElement>) => {
     const { name, checked } = evt.currentTarget;
@@ -28,7 +36,6 @@ const Index: FC<Props> = ({ title, fieldName, onChange, label, formData }) => {
   };
   return (
     <Form.Check
-      required
       id={`switch-${title}`}
       name={fieldName}
       type="switch"
@@ -37,6 +44,7 @@ const Index: FC<Props> = ({ title, fieldName, onChange, label, formData }) => {
       feedback={fieldObject?.errorMsg}
       feedbackType="invalid"
       isInvalid={fieldObject.isInvalid}
+      disabled={readOnly}
       onChange={handleChange}
     />
   );
diff --git a/ui/src/components/SchemaForm/components/Timezone.tsx b/ui/src/components/SchemaForm/components/Timezone.tsx
index f99bc4c4..364c120e 100644
--- a/ui/src/components/SchemaForm/components/Timezone.tsx
+++ b/ui/src/components/SchemaForm/components/Timezone.tsx
@@ -7,8 +7,14 @@ interface Props {
   fieldName: string;
   onChange?: (fd: Type.FormDataType) => void;
   formData: Type.FormDataType;
+  readOnly?: boolean;
 }
-const Index: FC<Props> = ({ fieldName, onChange, formData }) => {
+const Index: FC<Props> = ({
+  fieldName,
+  onChange,
+  formData,
+  readOnly = false,
+}) => {
   const fieldObject = formData[fieldName];
   const handleChange = (evt: React.ChangeEvent<HTMLSelectElement>) => {
     const { name, value } = evt.currentTarget;
@@ -29,6 +35,7 @@ const Index: FC<Props> = ({ fieldName, onChange, formData }) => {
       value={fieldObject?.value || ''}
       isInvalid={fieldObject?.isInvalid}
       name={fieldName}
+      disabled={readOnly}
       onChange={handleChange}
     />
   );
diff --git a/ui/src/components/SchemaForm/components/Upload.tsx b/ui/src/components/SchemaForm/components/Upload.tsx
index 1e0c5745..df8dbc60 100644
--- a/ui/src/components/SchemaForm/components/Upload.tsx
+++ b/ui/src/components/SchemaForm/components/Upload.tsx
@@ -10,6 +10,7 @@ interface Props {
   fieldName: string;
   onChange?: (fd: Type.FormDataType) => void;
   formData: Type.FormDataType;
+  readOnly?: boolean;
 }
 const Index: FC<Props> = ({
   type = 'avatar',
@@ -17,10 +18,10 @@ const Index: FC<Props> = ({
   fieldName,
   onChange,
   formData,
+  readOnly = false,
 }) => {
   const fieldObject = formData[fieldName];
   const handleChange = (name: string, value: string) => {
-    console.log('upload: ', name, value);
     const state = {
       ...formData,
       [name]: {
@@ -38,6 +39,7 @@ const Index: FC<Props> = ({
         type={type}
         acceptType={acceptType}
         value={fieldObject?.value}
+        readOnly={readOnly}
         onChange={(value) => handleChange(fieldName, value)}
       />
       <Form.Control
diff --git a/ui/src/components/SchemaForm/index.tsx b/ui/src/components/SchemaForm/index.tsx
index 7233fc71..c6e9faa4 100644
--- a/ui/src/components/SchemaForm/index.tsx
+++ b/ui/src/components/SchemaForm/index.tsx
@@ -380,6 +380,7 @@ const SchemaForm: ForwardRefRenderFunction<IRef, IProps> = (
                 enumValues={enumValues}
                 enumNames={enumNames}
                 formData={formData}
+                readOnly={readOnly}
               />
             ) : null}
             {widget === 'switch' ? (
@@ -389,6 +390,7 @@ const SchemaForm: ForwardRefRenderFunction<IRef, IProps> = (
                 fieldName={key}
                 onChange={onChange}
                 formData={formData}
+                readOnly={readOnly}
               />
             ) : null}
             {widget === 'timezone' ? (
@@ -396,6 +398,7 @@ const SchemaForm: ForwardRefRenderFunction<IRef, IProps> = (
                 fieldName={key}
                 onChange={onChange}
                 formData={formData}
+                readOnly={readOnly}
               />
             ) : null}
             {widget === 'upload' ? (
@@ -409,6 +412,7 @@ const SchemaForm: ForwardRefRenderFunction<IRef, IProps> = (
                 fieldName={key}
                 onChange={onChange}
                 formData={formData}
+                readOnly={readOnly}
               />
             ) : null}
             {widget === 'textarea' ? (
diff --git a/ui/src/components/UploadImg/index.tsx b/ui/src/components/UploadImg/index.tsx
index 896c698e..990b8274 100644
--- a/ui/src/components/UploadImg/index.tsx
+++ b/ui/src/components/UploadImg/index.tsx
@@ -52,7 +52,9 @@ const Index: React.FC<IProps> = ({
 
   return (
     <label
-      className={classnames('btn btn-outline-secondary uploadBtn', className)}>
+      className={classnames('btn btn-outline-secondary', className, {
+        disabled: !!disabled,
+      })}>
       {children || (status ? t('upload_img.loading') : t('upload_img.name'))}
       <input
         type="file"