feat(platform): support responsive form

Author: xiejay97

packages/platform/src/app/components/index.ts

@@ -14,6 +14,9 @@ export { AppList } from './list';
 export type { AppMapProps, AppMapMarkerClusterProps } from './map';
 export { AppMap } from './map';
 
+export type { AppResponsiveFormProps } from './responsive-form';
+export { AppResponsiveForm } from './responsive-form';
+
 export type { AppRouteHeaderProps, AppRouteHeaderBreadcrumbProps, AppRouteHeaderHeaderProps } from './route-header';
 export { AppRouteHeader } from './route-header';
 

packages/platform/src/app/components/responsive-form/ResponsiveForm.tsx

@@ -0,0 +1,26 @@
+import type { DFormProps } from '@react-devui/ui';
+
+import React from 'react';
+
+import { getClassName } from '@react-devui/utils';
+
+export interface AppResponsiveFormProps {
+  children: React.ReactElement;
+}
+
+export function AppResponsiveForm(props: AppResponsiveFormProps): JSX.Element | null {
+  const { children } = props;
+
+  return (
+    <>
+      {React.cloneElement<DFormProps>(children, {
+        className: getClassName(children.props.className, 'd-md-none'),
+        dLayout: 'vertical',
+      })}
+      {React.cloneElement<DFormProps>(children, {
+        className: getClassName(children.props.className, 'd-none d-md-flex'),
+        dLayout: 'horizontal',
+      })}
+    </>
+  );
+}

packages/platform/src/app/components/responsive-form/index.ts

@@ -0,0 +1 @@
+export * from './ResponsiveForm';

packages/platform/src/app/routes/list/standard-table/DeviceModal.tsx

@@ -9,6 +9,7 @@ import { useAsync, useEventCallback } from '@react-devui/hooks';
 import { FormControl, FormGroup, useForm, Validators } from '@react-devui/ui';
 import { DForm, DInput, DModal, DSelect } from '@react-devui/ui';
 
+import { AppResponsiveForm } from '../../../components';
 import { useAPI } from '../../../hooks';
 
 export interface AppDeviceModalProps {
@@ -79,24 +80,26 @@ function DeviceModal(props: AppDeviceModalProps, ref: React.ForwardedRef<OpenSet
         setVisible(false);
       }}
     >
-      <DForm dUpdate={updateForm} dLabelWidth="6em">
-        <DForm.Group dFormGroup={form}>
-          <DForm.Item dFormControls={{ name: 'Please enter name!' }} dLabel="Name">
-            {({ name }) => <DInput dFormControl={name} dPlaceholder="Name" />}
-          </DForm.Item>
-          <DForm.Item dFormControls={{ model: 'Please select model!' }} dLabel="Model">
-            {({ model }) => (
-              <DSelect
-                dFormControl={modelList ? model : undefined}
-                dList={modelList ?? []}
-                dLoading={isUndefined(modelList)}
-                dPlaceholder="Model"
-                dClearable
-              />
-            )}
-          </DForm.Item>
-        </DForm.Group>
-      </DForm>
+      <AppResponsiveForm>
+        <DForm dUpdate={updateForm} dLabelWidth="6em">
+          <DForm.Group dFormGroup={form}>
+            <DForm.Item dFormControls={{ name: 'Please enter name!' }} dLabel="Name">
+              {({ name }) => <DInput dFormControl={name} dPlaceholder="Name" />}
+            </DForm.Item>
+            <DForm.Item dFormControls={{ model: 'Please select model!' }} dLabel="Model">
+              {({ model }) => (
+                <DSelect
+                  dFormControl={modelList ? model : undefined}
+                  dList={modelList ?? []}
+                  dLoading={isUndefined(modelList)}
+                  dPlaceholder="Model"
+                  dClearable
+                />
+              )}
+            </DForm.Item>
+          </DForm.Group>
+        </DForm>
+      </AppResponsiveForm>
     </DModal>
   );
 }