feat: support open mode sheet (#989)

Reviewed-on: daoyoucloud/tachybase#989

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' },

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;

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;

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) => {

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%;
+}