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

package/src/settings-form/SettingsForm.tsx

@@ -1,269 +0,0 @@
-import { FormButtonGroup, FormDialog, FormDrawer, FormItem, FormLayout, Reset, Submit } from '@formily/antd';
-import { createForm, Field, ObjectField, onFormValuesChange } from '@formily/core';
-import {
-  FieldContext,
-  FormContext,
-  observer,
-  RecursionField,
-  Schema,
-  SchemaOptionsContext,
-  useField,
-  useFieldSchema,
-  useForm
-} from '@formily/react';
-import { Dropdown, Menu, Modal, Select, Switch } from 'antd';
-import React, { createContext, useContext, useMemo, useState } from 'react';
-import { SchemaComponentOptions, useAttach, useDesignable } from '..';
-
-export interface SettingsFormContextProps {
-  field?: Field;
-  fieldSchema?: Schema;
-  dropdownVisible?: boolean;
-  setDropdownVisible?: (v: boolean) => void;
-  dn?: any;
-}
-
-export const SettingsFormContext = createContext<SettingsFormContextProps>(null);
-
-export const useSettingsFormContext = () => {
-  return useContext(SettingsFormContext);
-};
-
-export const SettingsForm: any = observer((props: any) => {
-  const dn = useDesignable();
-  const field = useField<Field>();
-  const fieldSchema = useFieldSchema();
-  const [dropdownVisible, setDropdownVisible] = useState(false);
-  const settingsFormSchema = useMemo(() => new Schema(props.schema), []);
-  const form = useMemo(
-    () =>
-      createForm({
-        initialValues: fieldSchema.toJSON(),
-        effects(form) {
-          onFormValuesChange((form) => {
-            dn.patch(form.values);
-            console.log('form.values', form.values);
-          });
-        },
-      }),
-    [],
-  );
-  const f = useAttach(form.createVoidField({ ...field.props, basePath: '' }));
-  return (
-    <SettingsFormContext.Provider value={{ dn, field, fieldSchema, dropdownVisible, setDropdownVisible }}>
-      <SchemaComponentOptions components={{ SettingsForm }}>
-        <FieldContext.Provider value={null}>
-          <FormContext.Provider value={form}>
-            <FieldContext.Provider value={f}>
-              <Dropdown
-                visible={dropdownVisible}
-                onVisibleChange={(visible) => setDropdownVisible(visible)}
-                overlayStyle={{ width: 200 }}
-                overlay={
-                  <Menu>
-                    {settingsFormSchema.mapProperties((s, key) => {
-                      return <RecursionField name={key} schema={s} />;
-                    })}
-                  </Menu>
-                }
-              >
-                <a>配置</a>
-              </Dropdown>
-            </FieldContext.Provider>
-          </FormContext.Provider>
-        </FieldContext.Provider>
-      </SchemaComponentOptions>
-    </SettingsFormContext.Provider>
-  );
-});
-
-SettingsForm.Divider = () => {
-  return <Menu.Divider />;
-};
-
-SettingsForm.Remove = (props) => {
-  const field = useField();
-  const { dn, setDropdownVisible } = useSettingsFormContext();
-  return (
-    <Menu.Item
-      onClick={() => {
-        setDropdownVisible(false);
-        Modal.confirm({
-          title: 'Are you sure delete this task?',
-          content: 'Some descriptions',
-          okText: 'Yes',
-          okType: 'danger',
-          cancelText: 'No',
-          ...props.confirm,
-          onOk() {
-            dn.remove();
-            console.log('OK');
-          },
-          onCancel() {
-            console.log('Cancel');
-          },
-        });
-      }}
-    >
-      {field.title}
-    </Menu.Item>
-  );
-};
-
-SettingsForm.Switch = observer(() => {
-  const field = useField<Field>();
-  return (
-    <Menu.Item
-      onClick={() => {
-        field.value = !field.value;
-      }}
-    >
-      <div style={{ display: 'flex', justifyContent: 'space-between' }}>
-        {field.title} <Switch checked={!!field.value} />
-      </div>
-    </Menu.Item>
-  );
-});
-
-SettingsForm.Select = observer((props) => {
-  const field = useField<Field>();
-  const [open, setOpen] = useState(false);
-  return (
-    <Menu.Item onClick={() => !open && setOpen(true)}>
-      <div style={{ display: 'flex', justifyContent: 'space-between' }}>
-        {field.title}
-        <Select
-          open={open}
-          onDropdownVisibleChange={(open) => setOpen(open)}
-          onSelect={() => {
-            setOpen(false);
-          }}
-          onChange={(value) => {
-            field.value = value;
-          }}
-          value={field.value}
-          options={field.dataSource}
-          style={{ width: '60%' }}
-          size={'small'}
-          bordered={false}
-        />
-      </div>
-    </Menu.Item>
-  );
-});
-
-SettingsForm.Modal = () => {
-  const form = useForm();
-  const field = useField<Field>();
-  const fieldSchema = useFieldSchema();
-  const options = useContext(SchemaOptionsContext);
-  const { setDropdownVisible } = useSettingsFormContext();
-  return (
-    <Menu.Item
-      style={{ width: 200 }}
-      onClick={async () => {
-        setDropdownVisible(false);
-        const values = await FormDialog('Title', () => {
-          return (
-            <SchemaComponentOptions scope={options.scope} components={{ ...options.components, FormItem }}>
-              <FormLayout layout={'vertical'}>
-                <RecursionField schema={fieldSchema} onlyRenderProperties />
-              </FormLayout>
-            </SchemaComponentOptions>
-          );
-        }).open({
-          initialValues: fieldSchema.type !== 'void' ? field.value : form.values,
-        });
-        if (fieldSchema.type !== 'void') {
-          form.setValues(
-            {
-              [fieldSchema.name]: values,
-            },
-            'deepMerge',
-          );
-        } else {
-          form.setValues(values);
-        }
-      }}
-    >
-      {field.title}
-    </Menu.Item>
-  );
-};
-
-SettingsForm.Drawer = () => {
-  const form = useForm();
-  const field = useField<ObjectField>();
-  const fieldSchema = useFieldSchema();
-  const options = useContext(SchemaOptionsContext);
-  const { setDropdownVisible } = useSettingsFormContext();
-  return (
-    <Menu.Item
-      style={{ width: 200 }}
-      onClick={async () => {
-        setDropdownVisible(false);
-        const values = await FormDrawer('Popup form', () => {
-          return (
-            <SchemaComponentOptions scope={options.scope} components={{ ...options.components, FormItem }}>
-              <FormLayout layout={'vertical'}>
-                <RecursionField schema={fieldSchema} onlyRenderProperties />
-                <FormDrawer.Footer>
-                  <FormButtonGroup align="right">
-                    <Reset>Reset</Reset>
-                    <Submit
-                      onSubmit={() => {
-                        return new Promise((resolve) => {
-                          setTimeout(resolve, 1000);
-                        });
-                      }}
-                    >
-                      Submit
-                    </Submit>
-                  </FormButtonGroup>
-                </FormDrawer.Footer>
-              </FormLayout>
-            </SchemaComponentOptions>
-          );
-        }).open({
-          initialValues: fieldSchema.type !== 'void' ? field.value : form.values,
-        });
-        if (fieldSchema.type !== 'void') {
-          form.setValues(
-            {
-              [fieldSchema.name]: values,
-            },
-            'deepMerge',
-          );
-        } else {
-          form.setValues(values);
-        }
-      }}
-    >
-      {field.title}
-    </Menu.Item>
-  );
-};
-
-SettingsForm.SubMenu = () => {
-  const field = useField();
-  const fieldSchema = useFieldSchema();
-  return (
-    <Menu.SubMenu title={field.title}>
-      {fieldSchema.mapProperties((schema, key) => {
-        return <RecursionField name={key} schema={schema} />;
-      })}
-    </Menu.SubMenu>
-  );
-};
-
-SettingsForm.ItemGroup = () => {
-  const field = useField();
-  const fieldSchema = useFieldSchema();
-  return (
-    <Menu.ItemGroup title={field.title}>
-      {fieldSchema.mapProperties((schema, key) => {
-        return <RecursionField name={key} schema={schema} />;
-      })}
-    </Menu.ItemGroup>
-  );
-};

package/src/settings-form/demos/demo1.tsx

@@ -1,133 +0,0 @@
-import { ISchema, observer, useFieldSchema } from '@formily/react';
-import { AntdSchemaComponentProvider, SchemaComponent, SchemaComponentProvider, SettingsForm } from '@nocobase/client';
-import React from 'react';
-
-const schema: ISchema = {
-  type: 'object',
-  properties: {
-    'x-component-props.switch': {
-      title: 'Switch',
-      'x-component': 'SettingsForm.Switch',
-    },
-    'x-component-props.select': {
-      title: 'Select',
-      'x-component': 'SettingsForm.Select',
-      enum: [
-        { label: 'Option1', value: 'option1' },
-        { label: 'Option2', value: 'option2' },
-        { label: 'Option3', value: 'option3' },
-      ],
-    },
-    modal: {
-      type: 'void',
-      title: 'Open Modal',
-      'x-component': 'SettingsForm.Modal',
-      'x-component-props': {},
-      properties: {
-        'x-component-props.title': {
-          title: '标题',
-          'x-component': 'Input',
-          'x-decorator': 'FormItem',
-        },
-      },
-    },
-    drawer: {
-      type: 'void',
-      title: 'Open Drawer',
-      'x-component': 'SettingsForm.Drawer',
-      properties: {
-        'x-component-props.title': {
-          title: '标题',
-          'x-component': 'Input',
-          'x-decorator': 'FormItem',
-        },
-      },
-    },
-    group: {
-      type: 'void',
-      title: 'ItemGroup',
-      'x-component': 'SettingsForm.ItemGroup',
-      properties: {
-        'x-component-props': {
-          type: 'object',
-          title: 'Open Modal',
-          'x-component': 'SettingsForm.Modal',
-          properties: {
-            title: {
-              title: '标题',
-              'x-component': 'Input',
-              'x-decorator': 'FormItem',
-            },
-          },
-        },
-      },
-    },
-    submenu: {
-      type: 'void',
-      title: 'SubMenu',
-      'x-component': 'SettingsForm.SubMenu',
-      properties: {
-        'x-component-props': {
-          type: 'object',
-          title: 'Open Modal',
-          'x-component': 'SettingsForm.Modal',
-          properties: {
-            title: {
-              title: '标题',
-              'x-component': 'Input',
-              'x-decorator': 'FormItem',
-            },
-          },
-        },
-      },
-    },
-    divider: {
-      'x-component': 'SettingsForm.Divider',
-    },
-    remove: {
-      title: 'Delete',
-      'x-component': 'SettingsForm.Remove',
-      'x-component-props': {
-        confirm: {
-          title: 'Are you sure delete this task?',
-          content: 'Some descriptions',
-        },
-      },
-    },
-  },
-};
-
-const Hello = observer((props: any) => {
-  const fieldSchema = useFieldSchema();
-  return (
-    <div>
-      <pre>{JSON.stringify(props, null, 2)}</pre>
-      <pre>{JSON.stringify(fieldSchema.toJSON(), null, 2)}</pre>
-      <SettingsForm schema={schema} />
-    </div>
-  );
-});
-
-export default () => {
-  return (
-    <SchemaComponentProvider components={{ Hello }}>
-      <AntdSchemaComponentProvider>
-        <SchemaComponent
-          schema={{
-            type: 'object',
-            properties: {
-              hello: {
-                'x-component': 'Hello',
-                'x-component-props': {
-                  title: 'abc',
-                  switch: true,
-                  select: 'option1',
-                },
-              },
-            },
-          }}
-        />
-      </AntdSchemaComponentProvider>
-    </SchemaComponentProvider>
-  );
-};

package/src/settings-form/index.md

@@ -1,10 +0,0 @@
----
-nav:
-  path: /client
-group:
-  path: /client
----
-
-# SettingsForm
-
-<code src="./demos/demo1.tsx" />

package/src/settings-form/index.ts

@@ -1 +0,0 @@
-export * from './SettingsForm';

package/src/slate/RichText.tsx

@@ -1,258 +0,0 @@
-import { css, cx } from '@emotion/css';
-import isHotkey from 'is-hotkey';
-import React, { useCallback, useMemo } from 'react';
-import { createEditor, Editor, Element as SlateElement, Node, Transforms } from 'slate';
-import { withHistory } from 'slate-history';
-import type { ReactEditor } from 'slate-react';
-import { Editable, Slate, useSlate, withReact } from 'slate-react';
-import { EllipsisWithTooltip } from '../schema-component/antd/input/EllipsisWithTooltip';
-import { Button, Icon, Toolbar } from './components';
-
-const HOTKEYS = {
-  'mod+b': 'bold',
-  'mod+i': 'italic',
-  'mod+u': 'underline',
-  'mod+`': 'code',
-};
-
-const LIST_TYPES = ['numbered-list', 'bulleted-list'];
-const TEXT_ALIGN_TYPES = ['left', 'center', 'right', 'justify'];
-const DEFAULT_VALUE = [
-  {
-    type: 'paragraph',
-    children: [{ text: '' }],
-  },
-];
-
-export const RichText = (props: any) => {
-  const { value, placeholder = '', className, readOnly, autop = true, ellipsis, onChange } = props;
-  const renderElement = useCallback((props) => <Element {...props} />, []);
-  const renderLeaf = useCallback((props) => <Leaf {...props} />, []);
-  const editor = useMemo(() => withHistory(withReact(createEditor() as ReactEditor)), []);
-  const slateValue = useMemo(() => {
-    editor.children = JSON.parse(JSON.stringify(value || DEFAULT_VALUE));
-    Editor.normalize(editor, { force: true });
-    return editor.children;
-  }, [editor, value]);
-  if (readOnly) {
-    const slateContent = (
-      <Slate editor={editor} value={slateValue}>
-        <Editable renderElement={renderElement} renderLeaf={renderLeaf} spellCheck autoFocus readOnly={readOnly} />
-      </Slate>
-    );
-    const slatePlainText = serialize(slateValue);
-    const content = (
-      <EllipsisWithTooltip ellipsis={ellipsis} popoverContent={autop ? slateContent : slatePlainText}>
-        {ellipsis ? slatePlainText : slateContent}
-      </EllipsisWithTooltip>
-    );
-    return content;
-  }
-  return (
-    <div
-      className={cx(
-        className,
-        'slate',
-        css`
-          border: solid 1px #d2d2d2;
-          border-radius: 2px;
-        `,
-      )}
-    >
-      <Slate editor={editor} value={slateValue} onChange={onChange}>
-        <Toolbar>
-          <MarkButton format="bold" icon="format_bold" />
-          <MarkButton format="italic" icon="format_italic" />
-          <MarkButton format="underline" icon="format_underlined" />
-          <MarkButton format="code" icon="code" />
-          <BlockButton format="block-quote" icon="format_quote" />
-          <BlockButton format="numbered-list" icon="format_list_numbered" />
-          <BlockButton format="bulleted-list" icon="format_list_bulleted" />
-        </Toolbar>
-        <div
-          className={css`
-            padding: 5px 11px;
-          `}
-        >
-          <Editable
-            renderElement={renderElement}
-            renderLeaf={renderLeaf}
-            placeholder={placeholder}
-            spellCheck
-            style={{ minHeight: '10em' }}
-            readOnly={readOnly}
-            onKeyDown={(event) => {
-              for (const hotkey in HOTKEYS) {
-                if (isHotkey(hotkey, event as any)) {
-                  event.preventDefault();
-                  const mark = HOTKEYS[hotkey];
-                  toggleMark(editor, mark);
-                }
-              }
-            }}
-          />
-        </div>
-      </Slate>
-    </div>
-  );
-};
-
-const serialize = (nodes) => {
-  return nodes.map((n) => Node.string(n)).join('\n');
-};
-const toggleBlock = (editor, format) => {
-  const isActive = isBlockActive(editor, format, TEXT_ALIGN_TYPES.includes(format) ? 'align' : 'type');
-  const isList = LIST_TYPES.includes(format);
-
-  Transforms.unwrapNodes(editor, {
-    match: (n: Node) =>
-      !Editor.isEditor(n) &&
-      SlateElement.isElement(n) &&
-      LIST_TYPES.includes((n as any).type) &&
-      !TEXT_ALIGN_TYPES.includes(format),
-    split: true,
-  });
-  let newProperties: Partial<SlateElement & { align: any; type: string }>;
-  if (TEXT_ALIGN_TYPES.includes(format)) {
-    newProperties = {
-      align: isActive ? undefined : format,
-    };
-  } else {
-    newProperties = {
-      type: isActive ? 'paragraph' : isList ? 'list-item' : format,
-    };
-  }
-  Transforms.setNodes<SlateElement>(editor, newProperties);
-
-  if (!isActive && isList) {
-    const block = { type: format, children: [] };
-    Transforms.wrapNodes(editor, block);
-  }
-};
-
-const toggleMark = (editor, format) => {
-  const isActive = isMarkActive(editor, format);
-
-  if (isActive) {
-    Editor.removeMark(editor, format);
-  } else {
-    Editor.addMark(editor, format, true);
-  }
-};
-
-const isBlockActive = (editor, format, blockType = 'type') => {
-  const { selection } = editor;
-  if (!selection) return false;
-
-  const [match] = Array.from(
-    Editor.nodes(editor, {
-      at: Editor.unhangRange(editor, selection),
-      match: (n) => !Editor.isEditor(n) && SlateElement.isElement(n) && n[blockType] === format,
-    }),
-  );
-
-  return !!match;
-};
-
-const isMarkActive = (editor, format) => {
-  const marks = Editor.marks(editor);
-  return marks ? marks[format] === true : false;
-};
-
-const Element = ({ attributes, children, element }) => {
-  const style = { textAlign: element.align };
-  switch (element.type) {
-    case 'block-quote':
-      return (
-        <blockquote style={style} {...attributes}>
-          {children}
-        </blockquote>
-      );
-    case 'bulleted-list':
-      return (
-        <ul style={style} {...attributes}>
-          {children}
-        </ul>
-      );
-    case 'heading-one':
-      return (
-        <h1 style={style} {...attributes}>
-          {children}
-        </h1>
-      );
-    case 'heading-two':
-      return (
-        <h2 style={style} {...attributes}>
-          {children}
-        </h2>
-      );
-    case 'list-item':
-      return (
-        <li style={style} {...attributes}>
-          {children}
-        </li>
-      );
-    case 'numbered-list':
-      return (
-        <ol style={style} {...attributes}>
-          {children}
-        </ol>
-      );
-    default:
-      return (
-        <p style={style} {...attributes}>
-          {children}
-        </p>
-      );
-  }
-};
-
-const Leaf = ({ attributes, children, leaf }) => {
-  if (leaf.bold) {
-    children = <strong>{children}</strong>;
-  }
-
-  if (leaf.code) {
-    children = <code>{children}</code>;
-  }
-
-  if (leaf.italic) {
-    children = <em>{children}</em>;
-  }
-
-  if (leaf.underline) {
-    children = <u>{children}</u>;
-  }
-
-  return <span {...attributes}>{children}</span>;
-};
-
-const BlockButton = ({ format, icon }) => {
-  const editor = useSlate();
-  return (
-    <Button
-      active={isBlockActive(editor, format, TEXT_ALIGN_TYPES.includes(format) ? 'align' : 'type')}
-      onMouseDown={(event) => {
-        event.preventDefault();
-        toggleBlock(editor, format);
-      }}
-    >
-      <Icon>{icon}</Icon>
-    </Button>
-  );
-};
-
-const MarkButton = ({ format, icon }) => {
-  const editor = useSlate();
-  return (
-    <Button
-      active={isMarkActive(editor, format)}
-      onMouseDown={(event) => {
-        event.preventDefault();
-        toggleMark(editor, format);
-      }}
-    >
-      <Icon>{icon}</Icon>
-    </Button>
-  );
-};

package/src/slate/Slate.tsx

@@ -1,32 +0,0 @@
-import { Field } from '@formily/core';
-import { connect, mapProps, mapReadPretty } from '@formily/react';
-import React from 'react';
-import { Node } from 'slate';
-import './index.less';
-import { RichText } from './RichText';
-
-export const Slate = () => null;
-
-const serialize = (nodes) => {
-  return nodes?.map?.((n) => Node.string(n)).join('');
-};
-const DEFAULT_VALUE = [
-  {
-    type: 'paragraph',
-    children: [{ text: '' }],
-  },
-];
-
-Slate.RichText = connect(
-  RichText,
-  mapProps((props, field: Field) => {
-    // const fieldValue = serialize(field.value)?.trim();
-    // if (!fieldValue) {
-    //   field.value = undefined;
-    // }
-    return {
-      ...props,
-    };
-  }),
-  mapReadPretty((props: any) => <RichText {...props} readOnly />),
-);