@nocobase/client 0.7.0-alpha.82 → 0.7.1-alpha.4

package/src/schema-component/antd/action/Action.tsx

@@ -1,178 +0,0 @@
-import { css } from '@emotion/css';
-import { observer, RecursionField, useField, useFieldSchema } from '@formily/react';
-import { Button, Modal, Popover } from 'antd';
-import classnames from 'classnames';
-import React, { useState } from 'react';
-import { useActionContext } from '../..';
-import { Icon } from '../../../icon';
-import { SortableItem } from '../../common';
-import { useCompile, useDesigner } from '../../hooks';
-import { useProps } from '../../hooks/useProps';
-import ActionContainer from './Action.Container';
-import { ActionDesigner } from './Action.Designer';
-import { ActionDrawer } from './Action.Drawer';
-import { ActionLink } from './Action.Link';
-import { ActionModal } from './Action.Modal';
-import { ActionPage } from './Action.Page';
-import { ActionContext } from './context';
-import { useA } from './hooks';
-import { ComposedAction } from './types';
-
-export const actionDesignerCss = css`
-  position: relative;
-  &:hover {
-    > .general-schema-designer {
-      display: block;
-    }
-  }
-  &.nb-action-link {
-    > .general-schema-designer {
-      top: -10px;
-      bottom: -10px;
-      left: -10px;
-      right: -10px;
-    }
-  }
-  > .general-schema-designer {
-    position: absolute;
-    z-index: 999;
-    top: 0;
-    bottom: 0;
-    left: 0;
-    right: 0;
-    display: none;
-    background: rgba(241, 139, 98, 0.06);
-    border: 0;
-    top: 0;
-    bottom: 0;
-    left: 0;
-    right: 0;
-    pointer-events: none;
-    > .general-schema-designer-icons {
-      position: absolute;
-      right: 2px;
-      top: 2px;
-      line-height: 16px;
-      pointer-events: all;
-      .ant-space-item {
-        background-color: #f18b62;
-        color: #fff;
-        line-height: 16px;
-        width: 16px;
-        padding-left: 1px;
-      }
-    }
-  }
-`;
-
-export const Action: ComposedAction = observer((props: any) => {
-  const {
-    popover,
-    confirm,
-    // openMode,
-    containerRefKey,
-    component,
-    useAction = useA,
-    className,
-    disabled,
-    icon,
-    title,
-    ...others
-  } = props;
-  const { onClick } = useProps(props);
-  const [visible, setVisible] = useState(false);
-  const [formValueChanged, setFormValueChanged] = useState(false);
-  const Designer = useDesigner();
-  const field = useField<any>();
-  const { run } = useAction();
-  const fieldSchema = useFieldSchema();
-  const compile = useCompile();
-  const designerProps = fieldSchema['x-designer-props'];
-  const openMode = fieldSchema?.['x-component-props']?.['openMode'];
-  const renderButton = () => (
-    <SortableItem
-      {...others}
-      loading={field?.data?.loading}
-      icon={<Icon type={icon} />}
-      onClick={(e: React.MouseEvent) => {
-        e.preventDefault();
-        e.stopPropagation();
-        const onOk = () => {
-          onClick?.(e);
-          setVisible(true);
-          run();
-        };
-        if (confirm) {
-          Modal.confirm({
-            ...confirm,
-            onOk,
-          });
-        } else {
-          onOk();
-        }
-      }}
-      component={component || Button}
-      className={classnames(className, actionDesignerCss)}
-    >
-      {title || compile(fieldSchema.title)}
-      <Designer {...designerProps} />
-    </SortableItem>
-  );
-  return (
-    <ActionContext.Provider
-      value={{
-        button: renderButton(),
-        visible,
-        setVisible,
-        formValueChanged,
-        setFormValueChanged,
-        openMode,
-        containerRefKey,
-      }}
-    >
-      {popover && <RecursionField basePath={field.address} onlyRenderProperties schema={fieldSchema} />}
-      {!popover && renderButton()}
-      {!popover && props.children}
-    </ActionContext.Provider>
-  );
-});
-
-Action.Popover = observer((props) => {
-  const { button, visible, setVisible } = useActionContext();
-  return (
-    <Popover
-      {...props}
-      destroyTooltipOnHide
-      visible={visible}
-      onVisibleChange={(visible) => {
-        setVisible(visible);
-      }}
-      content={props.children}
-    >
-      {button}
-    </Popover>
-  );
-});
-
-Action.Popover.Footer = observer((props) => {
-  return (
-    <div
-      className={css`
-        display: flex;
-        justify-content: flex-end;
-        width: 100%;
-      `}
-    >
-      {props.children}
-    </div>
-  );
-});
-
-Action.Link = ActionLink;
-Action.Designer = ActionDesigner;
-Action.Drawer = ActionDrawer;
-Action.Modal = ActionModal;
-Action.Container = ActionContainer;
-Action.Page = ActionPage;
-
-export default Action;

package/src/schema-component/antd/action/ActionBar.tsx

@@ -1,52 +0,0 @@
-import { observer, RecursionField, useFieldSchema } from '@formily/react';
-import { Space } from 'antd';
-import React from 'react';
-import { useSchemaInitializer } from '../../../schema-initializer';
-import { DndContext } from '../../common';
-
-export const ActionBar = observer((props: any) => {
-  const { layout = 'tow-columns', style, ...others } = props;
-  const fieldSchema = useFieldSchema();
-  const { render } = useSchemaInitializer(fieldSchema['x-initializer']);
-  if (layout === 'one-column') {
-    return (
-      <div style={{ display: 'flex', ...style }} {...others}>
-        {props.children && (
-          <div style={{ marginRight: 8 }}>
-            <Space>
-              {fieldSchema.mapProperties((schema, key) => {
-                return <RecursionField key={key} name={key} schema={schema} />;
-              })}
-            </Space>
-          </div>
-        )}
-        {render()}
-      </div>
-    );
-  }
-  return (
-    <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', ...style }} {...others}>
-      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', width: '100%' }}>
-        <DndContext>
-          <Space>
-            {fieldSchema.mapProperties((schema, key) => {
-              if (schema['x-align'] !== 'left') {
-                return null;
-              }
-              return <RecursionField key={key} name={key} schema={schema} />;
-            })}
-          </Space>
-          <Space>
-            {fieldSchema.mapProperties((schema, key) => {
-              if (schema['x-align'] === 'left') {
-                return null;
-              }
-              return <RecursionField key={key} name={key} schema={schema} />;
-            })}
-          </Space>
-        </DndContext>
-      </div>
-      {render()}
-    </div>
-  );
-});

package/src/schema-component/antd/action/context.tsx

@@ -1,13 +0,0 @@
-import { createContext } from 'react';
-
-export const ActionContext = createContext<ActionContextProps>({});
-
-export interface ActionContextProps {
-  button?: any;
-  visible?: boolean;
-  setVisible?: (v: boolean) => void;
-  openMode?: 'drawer' | 'modal' | 'page';
-  containerRefKey?: string;
-  formValueChanged?: boolean;
-  setFormValueChanged?: (v: boolean) => void;
-}

package/src/schema-component/antd/action/demos/demo1.tsx

@@ -1,65 +0,0 @@
-import { FormItem, Input } from '@formily/antd';
-import { ISchema, observer, useForm } from '@formily/react';
-import { Action, Form, SchemaComponent, SchemaComponentProvider, useActionContext } from '@nocobase/client';
-import React from 'react';
-
-const useCloseAction = () => {
-  const { setVisible } = useActionContext();
-  const form = useForm();
-  return {
-    async run() {
-      setVisible(false);
-      form.submit((values) => {
-        console.log(values);
-      });
-    },
-  };
-};
-
-const schema: ISchema = {
-  type: 'object',
-  properties: {
-    action1: {
-      'x-component': 'Action',
-      'x-component-props': {
-        type: 'primary',
-      },
-      type: 'void',
-      title: 'Open',
-      properties: {
-        drawer1: {
-          'x-component': 'Action.Drawer',
-          type: 'void',
-          title: 'Drawer Title',
-          properties: {
-            hello1: {
-              'x-content': 'Hello',
-              title: 'T1',
-            },
-            footer1: {
-              'x-component': 'Action.Drawer.Footer',
-              type: 'void',
-              properties: {
-                close1: {
-                  title: 'Close',
-                  'x-component': 'Action',
-                  'x-component-props': {
-                    useAction: '{{ useCloseAction }}',
-                  },
-                },
-              },
-            },
-          },
-        },
-      },
-    },
-  },
-};
-
-export default observer(() => {
-  return (
-    <SchemaComponentProvider scope={{ useCloseAction }} components={{ Form, Action, Input, FormItem }}>
-      <SchemaComponent schema={schema} />
-    </SchemaComponentProvider>
-  );
-});

package/src/schema-component/antd/action/demos/demo2.tsx

@@ -1,66 +0,0 @@
-import { FormItem, Input } from '@formily/antd';
-import { ISchema, observer, useForm } from '@formily/react';
-import {
-  Action,
-  ActionContext,
-  Form,
-  SchemaComponent,
-  SchemaComponentProvider,
-  useActionContext
-} from '@nocobase/client';
-import React, { useState } from 'react';
-
-const useCloseAction = () => {
-  const { setVisible } = useActionContext();
-  const form = useForm();
-  return {
-    async run() {
-      setVisible(false);
-      form.submit((values) => {
-        console.log(values);
-      });
-    },
-  };
-};
-
-const schema: ISchema = {
-  type: 'object',
-  properties: {
-    drawer1: {
-      'x-component': 'Action.Drawer',
-      type: 'void',
-      title: 'Drawer Title',
-      properties: {
-        hello1: {
-          'x-content': 'Hello',
-          title: 'T1',
-        },
-        footer1: {
-          'x-component': 'Action.Drawer.Footer',
-          type: 'void',
-          properties: {
-            close1: {
-              title: 'Close',
-              'x-component': 'Action',
-              'x-component-props': {
-                useAction: '{{ useCloseAction }}',
-              },
-            },
-          },
-        },
-      },
-    },
-  },
-};
-
-export default observer(() => {
-  const [visible, setVisible] = useState(false);
-  return (
-    <SchemaComponentProvider components={{ Form, Action, Input, FormItem }}>
-      <ActionContext.Provider value={{ visible, setVisible }}>
-        <a onClick={() => setVisible(true)}>Open</a>
-        <SchemaComponent scope={{ useCloseAction }} schema={schema} />
-      </ActionContext.Provider>
-    </SchemaComponentProvider>
-  );
-});

package/src/schema-component/antd/action/demos/demo3.tsx

@@ -1,107 +0,0 @@
-import { FormItem, Input } from '@formily/antd';
-import { Field } from '@formily/core';
-import { ISchema, observer, useField, useForm } from '@formily/react';
-import { Action, Form, SchemaComponent, SchemaComponentProvider, useActionContext } from '@nocobase/client';
-import { Select } from 'antd';
-import React, { useRef } from 'react';
-
-const useCloseAction = () => {
-  const { setVisible } = useActionContext();
-  const form = useForm();
-  return {
-    async run() {
-      setVisible(false);
-      form.submit((values) => {
-        console.log(values);
-      });
-    },
-  };
-};
-
-const Editable = observer((props) => {
-  const field = useField<Field>();
-  return (
-    <div>
-      <div style={{ marginBottom: 24 }}>
-        打开方式：
-        <Select
-          value={field.componentProps.openMode}
-          style={{ width: 100 }}
-          onChange={(value) => {
-            field.componentProps.openMode = value;
-          }}
-        >
-          <Select.Option value={'drawer'}>Drawer</Select.Option>
-          <Select.Option value={'modal'}>Modal</Select.Option>
-          <Select.Option value={'page'}>Page</Select.Option>
-        </Select>
-      </div>
-      {props.children}
-    </div>
-  );
-});
-
-const schema: ISchema = {
-  type: 'object',
-  properties: {
-    action1: {
-      'x-decorator': 'Editable',
-      'x-component': 'Action',
-      'x-component-props': {
-        type: 'primary',
-        openMode: 'modal',
-        containerRefKey: 'containerRef',
-      },
-      type: 'void',
-      title: 'Open',
-      properties: {
-        drawer1: {
-          'x-component': 'Action.Container',
-          'x-component-props': {},
-          type: 'void',
-          title: 'Modal Title',
-          properties: {
-            hello1: {
-              title: 'T1',
-              'x-content': 'Hello',
-            },
-            footer1: {
-              'x-component': 'Action.Container.Footer',
-              type: 'void',
-              properties: {
-                close1: {
-                  title: 'Close',
-                  'x-component': 'Action',
-                  'x-component-props': {
-                    useAction: '{{ useCloseAction }}',
-                  },
-                },
-                submit: {
-                  title: 'Submit',
-                  'x-component': 'Action',
-                  'x-component-props': {
-                    type: 'primary',
-                    useAction: '{{ useCloseAction }}',
-                  },
-                },
-              },
-            },
-          },
-        },
-      },
-    },
-  },
-};
-
-export default observer(() => {
-  const containerRef = useRef();
-  return (
-    <SchemaComponentProvider
-      scope={{ containerRef, useCloseAction }}
-      components={{ Editable, Form, Action, Input, FormItem }}
-    >
-      <SchemaComponent schema={schema} />
-      <div ref={containerRef}></div>
-    </SchemaComponentProvider>
-  );
-});

package/src/schema-component/antd/action/demos/demo4.tsx

@@ -1,53 +0,0 @@
-import { FormItem, Input } from '@formily/antd';
-import { ISchema, observer, useForm } from '@formily/react';
-import { Action, Form, SchemaComponent, SchemaComponentProvider, useActionContext } from '@nocobase/client';
-import React from 'react';
-
-const useCloseAction = () => {
-  const { setVisible } = useActionContext();
-  const form = useForm();
-  return {
-    async run() {
-      setVisible(false);
-      form.submit((values) => {
-        console.log(values);
-      });
-    },
-  };
-};
-
-const schema: ISchema = {
-  type: 'object',
-  properties: {
-    action1: {
-      'x-component': 'Action',
-      'x-component-props': {
-        type: 'primary',
-        popover: true,
-        openMode: 'popover',
-      },
-      type: 'void',
-      title: 'Open',
-      properties: {
-        popover: {
-          type: 'void',
-          'x-component': 'Action.Popover',
-          properties: {
-            hello: {
-              type: 'void',
-              'x-content': 'Hello',
-            },
-          },
-        },
-      },
-    },
-  },
-};
-
-export default observer(() => {
-  return (
-    <SchemaComponentProvider scope={{ useCloseAction }} components={{ Form, Action, Input, FormItem }}>
-      <SchemaComponent schema={schema} />
-    </SchemaComponentProvider>
-  );
-});

package/src/schema-component/antd/action/hooks.ts

@@ -1,53 +0,0 @@
-import { useForm } from '@formily/react';
-import { Modal as AntdModal } from 'antd';
-import { useContext } from 'react';
-import { useTranslation } from 'react-i18next';
-import { ActionContext } from './context';
-
-export const useA = () => {
-  return {
-    async run() {},
-  };
-};
-
-export const useActionContext = () => {
-  const ctx = useContext(ActionContext);
-  const { t } = useTranslation();
-
-  return {
-    ...ctx,
-    setVisible(visible: boolean, confirm = false) {
-      if (ctx?.openMode !== 'page') {
-        if (!visible) {
-          if (confirm && ctx.formValueChanged) {
-            AntdModal.confirm({
-              title: t('Unsaved changes'),
-              content: t("Are you sure you don't want to save?"),
-              async onOk() {
-                ctx.setFormValueChanged(false);
-                ctx.setVisible?.(false);
-              },
-            });
-          } else {
-            ctx?.setVisible?.(false);
-          }
-        } else {
-          ctx?.setVisible?.(visible);
-        }
-      }
-    },
-  };
-};
-
-export const useCloseAction = () => {
-  const { setVisible } = useContext(ActionContext);
-  const form = useForm();
-  return {
-    async run() {
-      setVisible(false);
-      form.submit((values) => {
-        console.log(values);
-      });
-    },
-  };
-};

package/src/schema-component/antd/action/index.md

@@ -1,42 +0,0 @@
----
-nav:
-  path: /client
-group:
-  title: Schema Components
-  path: /schema-components
----
-
-# Action <Badge>待定</Badge>
-
-## Nodes
-
-- Action
-- Action.Drawer
-- Action.Drawer.Footer
-- Action.Modal
-- Action.Modal.Footer
-- Action.Drawer
-- Action.Drawer.Footer
-- Action.Container
-- Action.Container.Footer
-- ActionBar
-
-## Examples
-
-### Action + Action.Drawer
-
-<code src="./demos/demo1.tsx"/>
-
-### ActionContext + Action.Drawer
-
-只配置 Action.Drawer，而不需要 Action，结合 ActionContext 自定义按钮。
-
-<code src="./demos/demo2.tsx"/>
-
-### 不同的打开方式
-
-<code src="./demos/demo3.tsx"/>
-
-### Action + Action.Popover
-
-<code src="./demos/demo4.tsx"/>

package/src/schema-component/antd/action/index.tsx

@@ -1,5 +0,0 @@
-export * from './Action';
-export * from './ActionBar';
-export * from './context';
-export * from './hooks';
-

package/src/schema-component/antd/action/types.ts

@@ -1,17 +0,0 @@
-import { ButtonProps, DrawerProps } from 'antd';
-
-export type ActionProps = ButtonProps & {
-  component?: any;
-  useAction?: () => {
-    run(): Promise<void>;
-  };
-};
-
-export type ComposedAction = React.FC<ActionProps> & {
-  Drawer?: ComposedActionDrawer;
-  [key: string]: any;
-};
-
-export type ComposedActionDrawer = React.FC<DrawerProps & { footerNodeName?: string }> & {
-  Footer?: React.FC;
-};