From 04a6f3f09a85daaba763e261ced0dbd8e63d7dfb Mon Sep 17 00:00:00 2001
From: sealday <zhanglin@daoyoucloud.com>
Date: Wed, 15 May 2024 17:06:52 +0800
Subject: [PATCH] feat: support open mode sheet (#989)

Reviewed-on: https://git.daoyoucloud.com/daoyoucloud/tachybase/pulls/989
---
 .../antd/action/Action.Container.tsx          |  4 +
 .../antd/action/Action.Sheet.tsx              | 78 +++++++++++++++++++
 .../schema-component/antd/action/context.tsx  |  2 +-
 .../src/schema-items/OpenModeSchemaItems.tsx  |  2 +
 .../client/components/context-menu/style.scss |  4 +
 5 files changed, 89 insertions(+), 1 deletion(-)
 create mode 100644 packages/core/client/src/schema-component/antd/action/Action.Sheet.tsx

diff --git a/packages/core/client/src/schema-component/antd/action/Action.Container.tsx b/packages/core/client/src/schema-component/antd/action/Action.Container.tsx
index f890d4dd4..b02090138 100644
--- a/packages/core/client/src/schema-component/antd/action/Action.Container.tsx
+++ b/packages/core/client/src/schema-component/antd/action/Action.Container.tsx
@@ -2,6 +2,7 @@ import { observer, RecursionField, useField, useFieldSchema } from '@tachybase/s
 import React from 'react';
 import { useActionContext } from '.';
 import { ActionDrawer } from './Action.Drawer';
+import { ActionSheet } from './Action.Sheet';
 import { ActionModal } from './Action.Modal';
 import { ActionPage } from './Action.Page';
 import { ComposedActionDrawer } from './types';
@@ -15,6 +16,9 @@ export const ActionContainer: ComposedActionDrawer = observer(
     if (openMode === 'modal') {
       return <ActionModal footerNodeName={'Action.Container.Footer'} {...props} />;
     }
+    if (openMode === 'sheet') {
+      return <ActionSheet footerNodeName={'Action.Container.Footer'} {...props} />;
+    }
     return <ActionPage footerNodeName={'Action.Container.Footer'} {...props} />;
   },
   { displayName: 'ActionContainer' },
diff --git a/packages/core/client/src/schema-component/antd/action/Action.Sheet.tsx b/packages/core/client/src/schema-component/antd/action/Action.Sheet.tsx
new file mode 100644
index 000000000..caf06eced
--- /dev/null
+++ b/packages/core/client/src/schema-component/antd/action/Action.Sheet.tsx
@@ -0,0 +1,78 @@
+import { observer, RecursionField, useField, useFieldSchema } from '@tachybase/schema';
+import { Button, Drawer, Space } from 'antd';
+import classNames from 'classnames';
+import React from 'react';
+import { OpenSize } from '.';
+import { useStyles } from './Action.Drawer.style';
+import { useActionContext } from './hooks';
+import { ComposedActionDrawer } from './types';
+import { css } from '@emotion/css';
+import { useTranslation } from 'react-i18next';
+
+export const ActionSheet: ComposedActionDrawer = observer(
+  (props) => {
+    const { footerNodeName = 'Action.Drawer.Footer', ...others } = props;
+    const { t } = useTranslation();
+    const { visible, setVisible, drawerProps } = useActionContext();
+    const schema = useFieldSchema();
+    const field = useField();
+    const { componentCls, hashId } = useStyles();
+    const footerSchema = schema.reduceProperties((buf, s) => {
+      if (s['x-component'] === footerNodeName) {
+        return s;
+      }
+      return buf;
+    });
+
+    return (
+      <Drawer
+        placement="bottom"
+        height="100%"
+        title={field.title}
+        {...others}
+        {...drawerProps}
+        rootStyle={{
+          ...drawerProps?.style,
+          ...others?.style,
+        }}
+        destroyOnClose
+        open={visible}
+        onClose={() => setVisible(false, true)}
+        rootClassName={classNames(componentCls, hashId, drawerProps?.className, others.className, 'reset')}
+        footer={
+          <Space
+            className={css`
+              width: 100%;
+              justify-content: flex-end;
+            `}
+          >
+            <Button type="primary" onClick={() => setVisible(false, true)}>
+              {t('Close')}
+            </Button>
+          </Space>
+        }
+      >
+        <RecursionField
+          basePath={field.address}
+          schema={schema}
+          onlyRenderProperties
+          filterProperties={(s) => {
+            return s['x-component'] !== footerNodeName;
+          }}
+        />
+      </Drawer>
+    );
+  },
+  { displayName: 'ActionDrawer' },
+);
+
+ActionSheet.Footer = observer(
+  () => {
+    const field = useField();
+    const schema = useFieldSchema();
+    return <RecursionField basePath={field.address} schema={schema} onlyRenderProperties />;
+  },
+  { displayName: 'ActionDrawer.Footer' },
+);
+
+export default ActionSheet;
diff --git a/packages/core/client/src/schema-component/antd/action/context.tsx b/packages/core/client/src/schema-component/antd/action/context.tsx
index 775b70474..27bec8559 100644
--- a/packages/core/client/src/schema-component/antd/action/context.tsx
+++ b/packages/core/client/src/schema-component/antd/action/context.tsx
@@ -22,7 +22,7 @@ export interface ActionContextProps {
   button?: any;
   visible?: boolean;
   setVisible?: (v: boolean) => void;
-  openMode?: 'drawer' | 'modal' | 'page';
+  openMode?: 'drawer' | 'modal' | 'page' | 'sheet';
   snapshot?: boolean;
   openSize?: OpenSize;
   containerRefKey?: string;
diff --git a/packages/core/client/src/schema-items/OpenModeSchemaItems.tsx b/packages/core/client/src/schema-items/OpenModeSchemaItems.tsx
index 3725077b4..d1e094d2c 100644
--- a/packages/core/client/src/schema-items/OpenModeSchemaItems.tsx
+++ b/packages/core/client/src/schema-items/OpenModeSchemaItems.tsx
@@ -99,6 +99,8 @@ export const SchemaSettingOpenModeSchemaItems: React.FC<Options> = (options) =>
           options={[
             { label: t('Drawer'), value: 'drawer' },
             { label: t('Dialog'), value: 'modal' },
+            { label: t('Sheet'), value: 'sheet' },
+            { label: t('Page'), value: 'page' },
           ]}
           value={openModeValue}
           onChange={(value) => {
diff --git a/packages/plugins/@hera/plugin-core/src/client/components/context-menu/style.scss b/packages/plugins/@hera/plugin-core/src/client/components/context-menu/style.scss
index 67188165c..ca63f12b1 100644
--- a/packages/plugins/@hera/plugin-core/src/client/components/context-menu/style.scss
+++ b/packages/plugins/@hera/plugin-core/src/client/components/context-menu/style.scss
@@ -173,3 +173,7 @@
   transition: opacity 200ms, transform 200ms;
 }
 // right to left animation start
+
+.menu-trigger {
+  height: 100%;
+}