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 React from 'react';
 | 
				
			||||||
import { useActionContext } from '.';
 | 
					import { useActionContext } from '.';
 | 
				
			||||||
import { ActionDrawer } from './Action.Drawer';
 | 
					import { ActionDrawer } from './Action.Drawer';
 | 
				
			||||||
 | 
					import { ActionSheet } from './Action.Sheet';
 | 
				
			||||||
import { ActionModal } from './Action.Modal';
 | 
					import { ActionModal } from './Action.Modal';
 | 
				
			||||||
import { ActionPage } from './Action.Page';
 | 
					import { ActionPage } from './Action.Page';
 | 
				
			||||||
import { ComposedActionDrawer } from './types';
 | 
					import { ComposedActionDrawer } from './types';
 | 
				
			||||||
@ -15,6 +16,9 @@ export const ActionContainer: ComposedActionDrawer = observer(
 | 
				
			|||||||
    if (openMode === 'modal') {
 | 
					    if (openMode === 'modal') {
 | 
				
			||||||
      return <ActionModal footerNodeName={'Action.Container.Footer'} {...props} />;
 | 
					      return <ActionModal footerNodeName={'Action.Container.Footer'} {...props} />;
 | 
				
			||||||
    }
 | 
					    }
 | 
				
			||||||
 | 
					    if (openMode === 'sheet') {
 | 
				
			||||||
 | 
					      return <ActionSheet footerNodeName={'Action.Container.Footer'} {...props} />;
 | 
				
			||||||
 | 
					    }
 | 
				
			||||||
    return <ActionPage footerNodeName={'Action.Container.Footer'} {...props} />;
 | 
					    return <ActionPage footerNodeName={'Action.Container.Footer'} {...props} />;
 | 
				
			||||||
  },
 | 
					  },
 | 
				
			||||||
  { displayName: 'ActionContainer' },
 | 
					  { 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;
 | 
					  button?: any;
 | 
				
			||||||
  visible?: boolean;
 | 
					  visible?: boolean;
 | 
				
			||||||
  setVisible?: (v: boolean) => void;
 | 
					  setVisible?: (v: boolean) => void;
 | 
				
			||||||
  openMode?: 'drawer' | 'modal' | 'page';
 | 
					  openMode?: 'drawer' | 'modal' | 'page' | 'sheet';
 | 
				
			||||||
  snapshot?: boolean;
 | 
					  snapshot?: boolean;
 | 
				
			||||||
  openSize?: OpenSize;
 | 
					  openSize?: OpenSize;
 | 
				
			||||||
  containerRefKey?: string;
 | 
					  containerRefKey?: string;
 | 
				
			||||||
 | 
				
			|||||||
@ -99,6 +99,8 @@ export const SchemaSettingOpenModeSchemaItems: React.FC<Options> = (options) =>
 | 
				
			|||||||
          options={[
 | 
					          options={[
 | 
				
			||||||
            { label: t('Drawer'), value: 'drawer' },
 | 
					            { label: t('Drawer'), value: 'drawer' },
 | 
				
			||||||
            { label: t('Dialog'), value: 'modal' },
 | 
					            { label: t('Dialog'), value: 'modal' },
 | 
				
			||||||
 | 
					            { label: t('Sheet'), value: 'sheet' },
 | 
				
			||||||
 | 
					            { label: t('Page'), value: 'page' },
 | 
				
			||||||
          ]}
 | 
					          ]}
 | 
				
			||||||
          value={openModeValue}
 | 
					          value={openModeValue}
 | 
				
			||||||
          onChange={(value) => {
 | 
					          onChange={(value) => {
 | 
				
			||||||
 | 
				
			|||||||
@ -173,3 +173,7 @@
 | 
				
			|||||||
  transition: opacity 200ms, transform 200ms;
 | 
					  transition: opacity 200ms, transform 200ms;
 | 
				
			||||||
}
 | 
					}
 | 
				
			||||||
// right to left animation start
 | 
					// right to left animation start
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					.menu-trigger {
 | 
				
			||||||
 | 
					  height: 100%;
 | 
				
			||||||
 | 
					}
 | 
				
			||||||
 | 
				
			|||||||
		Loading…
	
		Reference in New Issue
	
	Block a user