@nocobase/client 0.5.0-alpha.37 → 0.7.0-alpha.1

package/src/schema-component/antd/kanban-v2/demos/demo1.tsx

@@ -0,0 +1,92 @@
+import { ISchema } from '@formily/react';
+import {
+  AntdSchemaComponentProvider,
+  APIClient,
+  APIClientProvider,
+  BlockSchemaComponentProvider,
+  CollectionManagerProvider,
+  SchemaComponent,
+  SchemaComponentProvider
+} from '@nocobase/client';
+import MockAdapter from 'axios-mock-adapter';
+import React from 'react';
+import collections from './collections';
+import data from './data';
+
+const schema: ISchema = {
+  type: 'object',
+  properties: {
+    block: {
+      type: 'void',
+      'x-decorator': 'KanbanBlockProvider',
+      'x-decorator-props': {
+        collection: 't_j6omof6tza8',
+        resource: 't_j6omof6tza8',
+        action: 'list',
+        groupField: 'f_hpmvdltzs6m',
+        params: {
+          paginate: false,
+        },
+      },
+      properties: {
+        kanban: {
+          type: 'array',
+          'x-component': 'KanbanV2',
+          'x-component-props': {
+            useProps: '{{ useKanbanBlockProps }}',
+          },
+          properties: {
+            card: {
+              type: 'void',
+              'x-component': 'KanbanV2.Card',
+              properties: {
+                f_g8j5jvalqh0: {
+                  'x-decorator': 'FormItem',
+                  'x-component': 'CollectionField',
+                  'x-read-pretty': true,
+                },
+                f_tegyd222bcc: {
+                  'x-decorator': 'FormItem',
+                  'x-component': 'CollectionField',
+                  'x-read-pretty': true,
+                },
+              },
+            },
+          },
+        },
+      },
+    },
+  },
+};
+
+const sleep = (value: number) => new Promise((resolve) => setTimeout(resolve, value));
+
+const apiClient = new APIClient({
+  baseURL: 'http://localhost:3000/api',
+});
+
+const mock = (api: APIClient) => {
+  const mock = new MockAdapter(api.axios);
+  mock.onGet('/t_j6omof6tza8:list').reply(async (config) => {
+    await sleep(200);
+    return [200, data];
+  });
+};
+
+mock(apiClient);
+
+export default () => {
+  return (
+    <APIClientProvider apiClient={apiClient}>
+      <SchemaComponentProvider>
+        <CollectionManagerProvider collections={collections.data}>
+          <AntdSchemaComponentProvider>
+            <BlockSchemaComponentProvider>
+              <SchemaComponent schema={schema} />
+            </BlockSchemaComponentProvider>
+          </AntdSchemaComponentProvider>
+        </CollectionManagerProvider>
+      </SchemaComponentProvider>
+    </APIClientProvider>
+  );
+};

package/src/schema-component/antd/kanban-v2/index.less

@@ -0,0 +1,16 @@
+.react-kanban-board {
+  margin-bottom: 24px;
+  .nb-block-item {
+    .ant-formily-item-control .ant-space-item{
+
+      white-space: normal;
+      word-break: break-all;
+      word-wrap: break-word;
+    }
+    & .ant-formily-item-label{
+      color: #8c8c8c;
+      font-weight:normal;
+    }
+  }
+}
+

package/src/schema-component/antd/kanban-v2/index.md

@@ -0,0 +1,12 @@
+---
+nav:
+  path: /client
+group:
+  path: /schema-components
+---
+
+# KanbanV2
+
+## 示例
+
+<code src="./demos/demo1.tsx" />

package/src/schema-component/antd/kanban-v2/index.ts

@@ -0,0 +1,16 @@
+import { Action } from '../action';
+import { Kanban } from './Kanban';
+import { KanbanCard } from './Kanban.Card';
+import { KanbanCardDesigner } from './Kanban.Card.Designer';
+import { KanbanCardViewer } from './Kanban.CardViewer';
+import { KanbanDesigner } from './Kanban.Designer';
+
+const KanbanV2 = Kanban;
+
+KanbanV2.Card = KanbanCard;
+KanbanV2.CardAdder = Action;
+KanbanV2.CardViewer = KanbanCardViewer;
+KanbanV2.Card.Designer = KanbanCardDesigner;
+KanbanV2.Designer = KanbanDesigner;
+
+export { KanbanV2 };

package/src/schema-component/antd/markdown/Markdown.Void.Designer.tsx

@@ -0,0 +1,26 @@
+import { useField } from '@formily/react';
+import React from 'react';
+import { useTranslation } from 'react-i18next';
+import { GeneralSchemaDesigner, SchemaSettings } from '../../../schema-settings';
+
+export const MarkdownVoidDesigner = () => {
+  const field = useField();
+  const { t } = useTranslation();
+  return (
+    <GeneralSchemaDesigner>
+      <SchemaSettings.Item
+        title={t('Edit markdown')}
+        onClick={() => {
+          field.editable = true;
+        }}
+      />
+      <SchemaSettings.Divider />
+      <SchemaSettings.Remove
+        removeParentsIfNoChildren
+        breakRemoveOn={{
+          'x-component': 'Grid',
+        }}
+      />
+    </GeneralSchemaDesigner>
+  );
+};

package/src/schema-component/antd/markdown/Markdown.Void.tsx

@@ -0,0 +1,78 @@
+import { observer, useField, useFieldSchema } from '@formily/react';
+import { Button, Input as AntdInput, Space } from 'antd';
+import React, { useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { useDesignable } from '../../hooks/useDesignable';
+import { MarkdownVoidDesigner } from './Markdown.Void.Designer';
+import { markdown } from './util';
+
+const MarkdownEditor = (props: any) => {
+  const { t } = useTranslation();
+  const [value, setValue] = useState(props.defaultValue);
+  return (
+    <div className={'mb-markdown'} style={{ position: 'relative' }}>
+      <AntdInput.TextArea
+        autoSize={{ minRows: 3 }}
+        {...props}
+        value={value}
+        onChange={(e) => {
+          setValue(e.target.value);
+        }}
+      />
+      <Space style={{ position: 'absolute', bottom: 5, right: 5 }}>
+        <Button
+          onClick={(e) => {
+            props.onCancel?.(e);
+          }}
+        >
+          {t('Cancel')}
+        </Button>
+        <Button
+          type={'primary'}
+          onClick={() => {
+            props.onSubmit?.(value);
+          }}
+        >
+          {t('Save')}
+        </Button>
+      </Space>
+    </div>
+  );
+};
+
+export const MarkdownVoid: any = observer((props: any) => {
+  const { content } = props;
+  const field = useField();
+  const schema = useFieldSchema();
+  const { dn } = useDesignable();
+  const { onSave, onCancel } = props;
+  return field.editable ? (
+    <MarkdownEditor
+      {...props}
+      defaultValue={content}
+      onCancel={() => {
+        field.editable = false;
+        onCancel?.();
+      }}
+      onSubmit={async (value) => {
+        field.editable = false;
+        schema['x-component-props'] ?? (schema['x-component-props'] = {});
+        schema['x-component-props']['content'] = value;
+        field.componentProps.content = value;
+        onSave?.(schema);
+        dn.emit('patch', {
+          schema: {
+            'x-uid': schema['x-uid'],
+            'x-component-props': {
+              content: value,
+            },
+          },
+        });
+      }}
+    />
+  ) : (
+    <div className={'nb-markdown'} dangerouslySetInnerHTML={{ __html: markdown(content) }} />
+  );
+});
+
+MarkdownVoid.Designer = MarkdownVoidDesigner;

package/src/schema-component/antd/markdown/Markdown.tsx

@@ -0,0 +1,30 @@
+import { LoadingOutlined } from '@ant-design/icons';
+import { connect, mapProps, mapReadPretty } from '@formily/react';
+import { Input as AntdInput } from 'antd';
+import React from 'react';
+import { ReadPretty as InputReadPretty } from '../input';
+import { MarkdownVoid } from './Markdown.Void';
+import { convertToText, markdown } from './util';
+
+export const Markdown: any = connect(
+  AntdInput.TextArea,
+  mapProps((props: any, field) => {
+    return {
+      autoSize: {
+        maxRows: 10,
+        minRows: 3,
+      },
+      ...props,
+      suffix: <span>{field?.['loading'] || field?.['validating'] ? <LoadingOutlined /> : props.suffix}</span>,
+    };
+  }),
+  mapReadPretty((props) => {
+    let text = convertToText(props.value);
+    let value = <div className={'nb-markdown'} dangerouslySetInnerHTML={{ __html: markdown(text) }} />;
+    return <InputReadPretty.TextArea {...props} text={text} value={value} />;
+  }),
+);
+
+Markdown.Void = MarkdownVoid;
+
+export default Markdown;

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

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

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

@@ -0,0 +1,51 @@
+/**
+ * title: Markdown.Void
+ */
+import { FormItem } from '@formily/antd';
+import { observer, useField } from '@formily/react';
+import { Markdown, SchemaComponent, SchemaComponentProvider } from '@nocobase/client';
+import { Button } from 'antd';
+import React from 'react';
+
+const schema = {
+  type: 'object',
+  properties: {
+    markdown: {
+      type: 'void',
+      title: `Read pretty`,
+      'x-decorator': 'Editable',
+      'x-component': 'Markdown.Void',
+      'x-editable': false,
+      'x-component-props': {
+        content: '# Markdown content',
+      },
+    },
+  },
+};
+
+const Editable = observer((props: any) => {
+  const filed = useField<any>();
+  if (filed.editable) {
+    return props.children;
+  }
+  return (
+    <div>
+      <Button
+        onClick={() => {
+          filed.editable = true;
+        }}
+      >
+        编辑
+      </Button>
+      <div>{props.children}</div>
+    </div>
+  );
+});
+
+export default () => {
+  return (
+    <SchemaComponentProvider components={{ Editable, Markdown, FormItem }}>
+      <SchemaComponent schema={schema} />
+    </SchemaComponentProvider>
+  );
+};

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

@@ -0,0 +1,18 @@
+---
+nav:
+  path: /client
+group:
+  path: /schema-components
+---
+
+# Markdown
+
+## Examples
+
+### Markdown
+
+<code src="./demos/demo1.tsx" />
+
+### Markdown. Void
+
+<code src="./demos/demo2.tsx" />

package/src/schema-component/antd/markdown/index.ts

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

package/src/schema-component/antd/markdown/style.less

@@ -0,0 +1,12 @@
+.nb-markdown > *:last-child {
+  margin-bottom: 0;
+}
+
+.ant-description-textarea,
+.ant-description-input {
+  line-height: 1.612;
+}
+
+.field-interface-datetime {
+  min-width: 100px;
+}

package/src/schema-component/antd/markdown/util.ts

@@ -0,0 +1,16 @@
+import { marked } from 'marked';
+
+export function markdown(text) {
+  if (!text) {
+    return '';
+  }
+  return marked.parse(text);
+}
+export function convertToText(markdownText: string) {
+  const content = markdown(markdownText);
+  let temp = document.createElement('div');
+  temp.innerHTML = content;
+  const text = temp.innerText;
+  temp = null;
+  return text.replace(/[\n\r]/g, '');
+}