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

package/src/slate/components.tsx

@@ -1,172 +0,0 @@
-import { css, cx } from '@emotion/css';
-import React, { PropsWithChildren, Ref } from 'react';
-import ReactDOM from 'react-dom';
-
-interface BaseProps {
-  className: string;
-  [key: string]: unknown;
-}
-type OrNull<T> = T | null;
-
-export const Button = React.forwardRef(
-  (
-    {
-      className,
-      active,
-      reversed,
-      ...props
-    }: PropsWithChildren<
-      {
-        active: boolean;
-        reversed: boolean;
-      } & BaseProps
-    >,
-    ref: Ref<OrNull<HTMLSpanElement>>,
-  ) => (
-    <span
-      {...props}
-      ref={ref}
-      className={cx(
-        className,
-        css`
-          cursor: pointer;
-          color: ${reversed ? (active ? 'white' : '#aaa') : active ? 'black' : '#ccc'};
-        `,
-      )}
-    />
-  ),
-);
-
-export const EditorValue = React.forwardRef(
-  (
-    {
-      className,
-      value,
-      ...props
-    }: PropsWithChildren<
-      {
-        value: any;
-      } & BaseProps
-    >,
-    ref: Ref<OrNull<null>>,
-  ) => {
-    const textLines = value.document.nodes
-      .map((node) => node.text)
-      .toArray()
-      .join('\n');
-    return (
-      <div
-        ref={ref}
-        {...props}
-        className={cx(
-          className,
-          css`
-            margin: 30px -20px 0;
-          `,
-        )}
-      >
-        <div
-          className={css`
-            font-size: 14px;
-            padding: 5px 20px;
-            color: #404040;
-            border-top: 2px solid #eeeeee;
-            background: #f8f8f8;
-          `}
-        >
-          Slate's value as text
-        </div>
-        <div
-          className={css`
-            color: #404040;
-            font: 12px monospace;
-            white-space: pre-wrap;
-            padding: 10px 20px;
-            div {
-              margin: 0 0 0.5em;
-            }
-          `}
-        >
-          {textLines}
-        </div>
-      </div>
-    );
-  },
-);
-
-export const Icon = React.forwardRef(
-  ({ className, ...props }: PropsWithChildren<BaseProps>, ref: Ref<OrNull<HTMLSpanElement>>) => (
-    <span
-      {...props}
-      ref={ref}
-      className={cx(
-        'material-icons',
-        className,
-        css`
-          font-size: 18px;
-          vertical-align: text-bottom;
-        `,
-      )}
-    />
-  ),
-);
-
-export const Instruction = React.forwardRef(
-  ({ className, ...props }: PropsWithChildren<BaseProps>, ref: Ref<OrNull<HTMLDivElement>>) => (
-    <div
-      {...props}
-      ref={ref}
-      className={cx(
-        className,
-        css`
-          white-space: pre-wrap;
-          margin: 0 -20px 10px;
-          padding: 10px 20px;
-          font-size: 14px;
-          background: #f8f8e8;
-        `,
-      )}
-    />
-  ),
-);
-
-export const Menu = React.forwardRef(
-  ({ className, ...props }: PropsWithChildren<BaseProps>, ref: Ref<OrNull<HTMLDivElement>>) => (
-    <div
-      {...props}
-      ref={ref}
-      className={cx(
-        className,
-        css`
-          & > * {
-            display: inline-block;
-          }
-          & > * + * {
-            margin-left: 15px;
-          }
-        `,
-      )}
-    />
-  ),
-);
-
-export const Portal = ({ children }) => {
-  return typeof document === 'object' ? ReactDOM.createPortal(children, document.body) : null;
-};
-
-export const Toolbar = React.forwardRef(
-  ({ className, ...props }: PropsWithChildren<BaseProps>, ref: Ref<OrNull<HTMLDivElement>>) => (
-    <Menu
-      {...props}
-      ref={ref}
-      className={cx(
-        className,
-        css`
-          position: relative;
-          padding: 5px 11px;
-          background-color: #f3f3f3;
-        `,
-      )}
-    />
-  ),
-);

package/src/slate/demos/demo1.tsx

@@ -1,27 +0,0 @@
-import { FormItem } from '@formily/antd';
-import { SchemaComponent, SchemaComponentProvider, Slate } from '@nocobase/client';
-import React from 'react';
-
-const schema = {
-  type: 'object',
-  properties: {
-    slate: {
-      type: 'string',
-      'x-decorator': 'FormItem',
-      'x-component': 'Slate.RichText',
-      'x-component-props': {
-        onChange: (value) => {
-          console.log(value);
-        },
-      },
-    },
-  },
-};
-
-export default () => {
-  return (
-    <SchemaComponentProvider components={{ Slate, FormItem }}>
-      <SchemaComponent schema={schema} />
-    </SchemaComponentProvider>
-  );
-};

package/src/slate/demos/demo2.tsx

@@ -1,79 +0,0 @@
-import { FormItem } from '@formily/antd';
-import { SchemaComponent, SchemaComponentProvider, Slate } from '@nocobase/client';
-import React from 'react';
-
-let value = [
-  {
-    type: 'heading-one',
-    children: [
-      {
-        text: 'Slate Rich Text Editor',
-      },
-    ],
-  },
-  {
-    type: 'block-quote',
-    children: [
-      {
-        text: 'this is based in Slate',
-      },
-    ],
-  },
-  {
-    type: 'bulleted-list',
-    children: [
-      {
-        type: 'list-item',
-        children: [
-          {
-            text: 'The editor\'s "schema" was hardcoded and hard to customize. ',
-          },
-        ],
-      },
-      {
-        type: 'list-item',
-        children: [
-          {
-            text: 'Transforming the documents programmatically was very convoluted. ',
-          },
-        ],
-      },
-      {
-        type: 'list-item',
-        children: [
-          {
-            text: 'Serializing to HTML, Markdown, etc. seemed like an afterthought. ',
-          },
-        ],
-      },
-      {
-        type: 'list-item',
-        children: [
-          {
-            text: 'Re-inventing the view layer seemed inefficient and limiting.',
-          },
-        ],
-      },
-    ],
-  },
-];
-const schema = {
-  type: 'object',
-  properties: {
-    read: {
-      type: 'string',
-      'x-read-pretty': true,
-      'x-decorator': 'FormItem',
-      'x-component': 'Slate.RichText',
-      default: value,
-    },
-  },
-};
-
-export default () => {
-  return (
-    <SchemaComponentProvider components={{ Slate, FormItem }}>
-      <SchemaComponent schema={schema} />
-    </SchemaComponentProvider>
-  );
-};

package/src/slate/demos/demo3.tsx

@@ -1,44 +0,0 @@
-/**
- * title: Input
- */
-import { FormItem } from '@formily/antd';
-import { SchemaComponent, SchemaComponentProvider, Slate } from '@nocobase/client';
-import React from 'react';
-
-const schema = {
-  type: 'object',
-  properties: {
-    input: {
-      title: `Editable1`,
-      'x-decorator': 'FormItem',
-      'x-component': 'Slate.RichText',
-      'x-reactions': {
-        target: '*(input2,read)',
-        fulfill: {
-          state: {
-            value: '{{$self.value}}',
-          },
-        },
-      },
-    },
-    input2: {
-      title: `Editable2`,
-      'x-decorator': 'FormItem',
-      'x-component': 'Slate.RichText',
-    },
-    read: {
-      title: `Read pretty`,
-      'x-read-pretty': true,
-      'x-decorator': 'FormItem',
-      'x-component': 'Slate.RichText',
-    },
-  },
-};
-
-export default () => {
-  return (
-    <SchemaComponentProvider components={{ Slate, FormItem }}>
-      <SchemaComponent schema={schema} />
-    </SchemaComponentProvider>
-  );
-};

package/src/slate/index.less

@@ -1,51 +0,0 @@
-@font-face {
-  font-family: 'Material Icons';
-  font-style: normal;
-  font-weight: 400;
-  src: url(./materialicons.woff2) format('woff2');
-}
-
-.material-icons {
-  font-family: 'Material Icons';
-  font-weight: normal;
-  font-style: normal;
-  font-size: 24px;
-  line-height: 1;
-  letter-spacing: normal;
-  text-transform: none;
-  display: inline-block;
-  white-space: nowrap;
-  word-wrap: normal;
-  direction: ltr;
-  -webkit-font-feature-settings: 'liga';
-  -webkit-font-smoothing: antialiased;
-}
-.ant-formily-item-error .slate {
-  border-color: #ff4d4f !important;
-}
-.slate:focus-within {
-  border-color: #40a9ff;
-  box-shadow: 0 0 0 2px rgba(24, 144, 255, 0.2);
-  border-right-width: 1px;
-  outline: 0;
-}
-:not(pre) > code {
-  font-family: monospace;
-  background-color: #eee;
-  padding: 3px;
-}
-blockquote {
-  border-left: 2px solid #ddd;
-  margin-left: 0;
-  margin-right: 0;
-  padding-left: 10px;
-  color: #aaa;
-  font-style: italic;
-}
-
-blockquote[dir='rtl'] {
-  border-left: none;
-  padding-left: 0;
-  padding-right: 10px;
-  border-right: 2px solid #ddd;
-}

package/src/slate/index.md

@@ -1,22 +0,0 @@
----
-nav:
-  path: /client
-group:
-  path: /client
----
-
-# Slate
-
-基于 [slate](https://github.com/ianstormtaylor/slate) 封装。
-
-## Examples
-
-### Slate Rich Text Editor
-
-<code src="./demos/demo1.tsx" />
-
-### Slate Rich Text Editor is Read Pretty
-
-<code src="./demos/demo2.tsx" />
-
-<code src="./demos/demo3.tsx" />

package/src/slate/index.ts

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

package/src/system-settings/SystemSettingsProvider.tsx

@@ -1,20 +0,0 @@
-import { Result } from 'ahooks/lib/useRequest/src/types';
-import { Spin } from 'antd';
-import React, { createContext, useContext } from 'react';
-import { useRequest } from '..';
-
-export const SystemSettingsContext = createContext<Result<any, any>>(null);
-
-export const useSystemSettings = () => {
-  return useContext(SystemSettingsContext);
-};
-
-export const SystemSettingsProvider: React.FC = (props) => {
-  const result = useRequest({
-    url: 'systemSettings:get/1?appends=logo',
-  });
-  if (result.loading) {
-    return <Spin />;
-  }
-  return <SystemSettingsContext.Provider value={result}>{props.children}</SystemSettingsContext.Provider>;
-};

package/src/system-settings/SystemSettingsShortcut.tsx

@@ -1,145 +0,0 @@
-import { SettingOutlined } from '@ant-design/icons';
-import { ISchema, useForm } from '@formily/react';
-import { uid } from '@formily/shared';
-import React, { useState } from 'react';
-import { useTranslation } from 'react-i18next';
-import { useSystemSettings } from '.';
-import { PluginManager, useAPIClient, useRequest } from '..';
-import { ActionContext, SchemaComponent, useActionContext } from '../schema-component';
-
-const useCloseAction = () => {
-  const { setVisible } = useActionContext();
-  return {
-    async run() {
-      setVisible(false);
-    },
-  };
-};
-
-const useSystemSettingsValues = (options) => {
-  const { visible } = useActionContext();
-  const result = useSystemSettings();
-  return useRequest(() => Promise.resolve(result.data), {
-    ...options,
-    refreshDeps: [visible],
-  });
-};
-
-const useSaveSystemSettingsValues = () => {
-  const { setVisible } = useActionContext();
-  const form = useForm();
-  const { mutate, data } = useSystemSettings();
-  const api = useAPIClient();
-  return {
-    async run() {
-      await form.submit();
-      setVisible(false);
-      mutate({
-        data: {
-          ...data?.data,
-          ...form.values,
-        },
-      });
-      await api.request({
-        url: 'systemSettings:update/1',
-        method: 'post',
-        data: form.values,
-      });
-    },
-  };
-};
-
-const schema: ISchema = {
-  type: 'object',
-  properties: {
-    [uid()]: {
-      'x-decorator': 'Form',
-      'x-decorator-props': {
-        useValues: '{{ useSystemSettingsValues }}',
-      },
-      'x-component': 'Action.Drawer',
-      type: 'void',
-      title: '{{t("System settings")}}',
-      properties: {
-        title: {
-          type: 'string',
-          title: "{{t('System title')}}",
-          'x-decorator': 'FormItem',
-          'x-component': 'Input',
-          required: true,
-        },
-        logo: {
-          type: 'string',
-          title: "{{t('Logo')}}",
-          'x-decorator': 'FormItem',
-          'x-component': 'Upload.Attachment',
-          'x-component-props': {
-            action: 'attachments:upload',
-            multiple: false,
-            // accept: 'jpg,png'
-          },
-        },
-        appLang: {
-          type: 'string',
-          title: '{{t("Language")}}',
-          'x-component': 'Select',
-          'x-decorator': 'FormItem',
-          enum: [
-            { label: 'English', value: 'en-US' },
-            { label: '简体中文', value: 'zh-CN' },
-          ],
-        },
-        allowSignUp: {
-          type: 'boolean',
-          default: true,
-          'x-content': '{{t("Allow sign up")}}',
-          'x-component': 'Checkbox',
-          'x-decorator': 'FormItem',
-        },
-        footer1: {
-          type: 'void',
-          'x-component': 'Action.Drawer.Footer',
-          properties: {
-            cancel: {
-              title: 'Cancel',
-              'x-component': 'Action',
-              'x-component-props': {
-                useAction: '{{ useCloseAction }}',
-              },
-            },
-            submit: {
-              title: 'Submit',
-              'x-component': 'Action',
-              'x-component-props': {
-                type: 'primary',
-                htmlType: 'submit',
-                useAction: '{{ useSaveSystemSettingsValues }}',
-              },
-            },
-          },
-        },
-      },
-    },
-  },
-};
-
-export const SystemSettingsShortcut = () => {
-  const [visible, setVisible] = useState(false);
-  const { t } = useTranslation();
-  return (
-    <ActionContext.Provider value={{ visible, setVisible }}>
-      <PluginManager.Toolbar.Item
-        eventKey={'ACLAction'}
-        onClick={() => {
-          setVisible(true);
-        }}
-        icon={<SettingOutlined />}
-        title={t('System settings')}
-      />
-      <SchemaComponent
-        scope={{ useSaveSystemSettingsValues, useSystemSettingsValues, useCloseAction }}
-        schema={schema}
-      />
-    </ActionContext.Provider>
-  );
-};

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

@@ -1,55 +0,0 @@
-import {
-  AntdSchemaComponentProvider,
-  APIClient,
-  APIClientProvider,
-  PluginManager,
-  PluginManagerProvider,
-  SchemaComponentProvider,
-  SystemSettingsProvider,
-  SystemSettingsShortcut,
-  useSystemSettings
-} from '@nocobase/client';
-import MockAdapter from 'axios-mock-adapter';
-import React from 'react';
-
-const apiClient = new APIClient();
-
-const mock = new MockAdapter(apiClient.axios);
-
-mock.onGet('/systemSettings:get/1').reply(200, {
-  data: {
-    title: 'NocoBase',
-  },
-});
-
-const Demo = () => {
-  const { data } = useSystemSettings();
-  return <div>
-    <h3>以下为测试内容</h3>
-    System title: {data?.data?.title}
-  </div>;
-};
-
-export default () => {
-  return (
-    <APIClientProvider apiClient={apiClient}>
-      <SystemSettingsProvider>
-        <SchemaComponentProvider>
-          <AntdSchemaComponentProvider>
-            <PluginManagerProvider components={{ SystemSettingsShortcut }}>
-              <PluginManager.Toolbar
-                items={[
-                  {
-                    component: 'SystemSettingsShortcut',
-                    pin: true,
-                  },
-                ]}
-              />
-              <Demo />
-            </PluginManagerProvider>
-          </AntdSchemaComponentProvider>
-        </SchemaComponentProvider>
-      </SystemSettingsProvider>
-    </APIClientProvider>
-  );
-};

package/src/system-settings/index.md

@@ -1,22 +0,0 @@
----
-nav:
-  path: /client
-group:
-  path: /client
----
-
-# SystemSettings
-
-## SystemSettingsProvider
-
-## SystemSettingsShortcut
-
-## useSystemSettings
-
-```ts
-const { data, loading, refresh } = useSystemSettings();
-```
-
-## Examples
-
-<code src="./demos/demo1.tsx"/>

package/src/system-settings/index.tsx

@@ -1,3 +0,0 @@
-export * from './SystemSettingsProvider';
-export * from './SystemSettingsShortcut';
-