feat: support open mode sheet (#989)
Reviewed-on: daoyoucloud/tachybase#989
This commit is contained in:
		
							parent
							
								
									098ff4de0c
								
							
						
					
					
						commit
						04a6f3f09a
					
				@ -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' },
 | 
			
		||||
 | 
			
		||||
@ -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;
 | 
			
		||||
@ -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;
 | 
			
		||||
 | 
			
		||||
@ -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) => {
 | 
			
		||||
 | 
			
		||||
@ -173,3 +173,7 @@
 | 
			
		||||
  transition: opacity 200ms, transform 200ms;
 | 
			
		||||
}
 | 
			
		||||
// right to left animation start
 | 
			
		||||
 | 
			
		||||
.menu-trigger {
 | 
			
		||||
  height: 100%;
 | 
			
		||||
}
 | 
			
		||||
 | 
			
		||||
		Loading…
	
		Reference in New Issue
	
	Block a user