feat: change arraySchema ui

rookie-luochao · May 3, 2024 · b2d4df1 · b2d4df1
1 parent dd6ded3
commit b2d4df1
Show file tree

Hide file tree

Showing 2 changed files with 31 additions and 13 deletions.
diff --git a/src/openapi/RequestBuilder.tsx b/src/openapi/RequestBuilder.tsx
@@ -53,9 +53,7 @@ function RenderRequestBody({ requestBody, schemas = {} }: { requestBody: IReques
   return (
     <div key="requestBody">
       {map(content, (mediaType: IMediaType, contentType: string) => {
-        const schema = mediaType.schema
-          ? patchSchema<ISchema>(mediaType.schema, schemas)
-          : ({} as IMediaType["schema"]);
+        const schema = (mediaType.schema ? patchSchema<ISchema>(mediaType.schema, schemas) : {}) as ISchema;
 
         return (
           <div key={contentType}>
@@ -76,16 +74,18 @@ function RenderRequestBody({ requestBody, schemas = {} }: { requestBody: IReques
                   {contentType}
                 </div>
                 <div style={{ height: 1, backgroundColor: theme.color.border, marginBottom: 10 }} />
-                {map((schema || ({} as any)).properties, (propSchema: any, key: string) => {
+                {map(schema.properties, (propSchema, key) => {
+                  const required = schema.required?.includes(key);
+
                   return (
-                    <Form.Item key={key} name={key}>
+                    <Form.Item key={key} name={key} rules={required ? [{ required: true }] : undefined}>
                       <RequestParameterInput
                         parameter={
                           {
                             in: "formData",
                             name: key,
                             schema: propSchema,
-                            required: requestBody.required,
+                            required: required,
                           } as any
                         }
                         schemas={schemas}

diff --git a/src/openapi/RequestParameterInput.tsx b/src/openapi/RequestParameterInput.tsx
@@ -72,14 +72,14 @@ function Row({ children }: { children: ReactNode }) {
       css={{
         width: "100%",
         display: "flex",
-        alignItems: "center",
         "& [role=input]": { flex: 1 },
         "& [role=btn]": {
           width: "2em",
           display: "flex",
           justifyContent: "center",
           cursor: "pointer",
           opacity: 0.6,
+          paddingTop: 10,
         },
         "& + &": {
           marginTop: 6,
@@ -148,11 +148,11 @@ export function PatchInput({ schema, ...commonProps }: IJSONInputWithSchemaProps
         placeholder={placeholder}
         options={[
           {
-            label: "是",
+            label: "true",
             value: true,
           },
           {
-            label: "否",
+            label: "false",
             value: false,
           },
         ]}
@@ -212,7 +212,7 @@ export function PatchInput({ schema, ...commonProps }: IJSONInputWithSchemaProps
   );
 }
 
-function ValueInput({ schema, ...commonProps }: IJSONInputWithSchemaProps) {
+export function ValueInput({ schema, ...commonProps }: IJSONInputWithSchemaProps) {
   const theme = useTheme() as ITheme;
   const [value, setValue] = useState();
 
@@ -300,7 +300,7 @@ export const RequestParameterInput = ({
   const schema = patchSchema<ISchema>(parameter.schema || parameter, schemas);
   const isArray = isArraySchema(schema);
   const commonProps = {
-    value: isArray ? (otherProps.value ? [].concat(otherProps.value) : []) : otherProps.value,
+    value: isArray ? (otherProps.value ? [].concat(otherProps.value) : [null]) : otherProps.value,
     onChange: otherProps.onChange ? otherProps.onChange : () => undefined,
   };
 
@@ -358,14 +358,32 @@ export const RequestParameterInput = ({
           </Row>
         ))}
         <Row>
-          <ValueInput
+          {/* <ValueInput
             key="input"
             schema={schema.items}
             value={commonProps.value}
             onChange={(v) => {
               commonProps.onChange(commonProps.value.concat(v));
             }}
-          />
+          /> */}
+          <Button
+            size="small"
+            css={[
+              flexAlignItemsCenterOpts(),
+              {
+                "&:hover path": {
+                  fill: theme.color.primary,
+                },
+              },
+            ]}
+            onClick={() => {
+              commonProps.onChange(commonProps.value.concat(null));
+            }}
+          >
+            &nbsp;&nbsp;&nbsp;
+            <PlusOutlined fill={theme.color.menuItem} />
+            &nbsp;&nbsp;&nbsp;
+          </Button>
         </Row>
       </FieldLabelWithSchemaWrap>
     );