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

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

@@ -1,162 +0,0 @@
-import { observer, useFieldSchema } from '@formily/react';
-import { BlockItem, DragHandler, Grid, SchemaComponent, SchemaComponentProvider } from '@nocobase/client';
-import React from 'react';
-
-const Block = observer((props) => {
-  const fieldSchema = useFieldSchema();
-  return (
-    <div style={{ marginBottom: 20, padding: '0 20px', height: 50, lineHeight: '50px', background: '#f1f1f1' }}>
-      Block {fieldSchema.title}
-      <DragHandler />
-    </div>
-  );
-});
-
-const schema = {
-  _isJSONSchemaObject: true,
-  version: '2.0',
-  type: 'void',
-  name: 'grid1',
-  'x-decorator': 'CardItem',
-  'x-component': 'Grid',
-  properties: {
-    row1: {
-      type: 'void',
-      'x-component': 'Grid.Row',
-      properties: {
-        col11: {
-          _isJSONSchemaObject: true,
-          version: '2.0',
-          type: 'void',
-          'x-component': 'Grid.Col',
-          properties: {
-            block1: {
-              _isJSONSchemaObject: true,
-              version: '2.0',
-              type: 'void',
-              title: '1',
-              'x-decorator': 'BlockItem',
-              'x-component': 'Block',
-              'x-uid': 'a9m97uffyku',
-              'x-async': false,
-              'x-index': 1,
-            },
-            block2: {
-              _isJSONSchemaObject: true,
-              version: '2.0',
-              type: 'void',
-              title: '2.1',
-              'x-decorator': 'BlockItem',
-              'x-component': 'Block',
-              'x-uid': 'lensw462z8w',
-              'x-async': false,
-              'x-index': 2,
-            },
-            block234: {
-              _isJSONSchemaObject: true,
-              version: '2.0',
-              type: 'void',
-              title: '2.2',
-              'x-decorator': 'BlockItem',
-              'x-component': 'Block',
-              'x-uid': 'lensw462z81',
-              'x-async': false,
-              'x-index': 3,
-            },
-          },
-          'x-uid': '4shevom50rl',
-          'x-async': false,
-          'x-index': 1,
-        },
-        col12: {
-          _isJSONSchemaObject: true,
-          version: '2.0',
-          type: 'void',
-          'x-component': 'Grid.Col',
-          properties: {
-            block3: {
-              _isJSONSchemaObject: true,
-              version: '2.0',
-              type: 'void',
-              title: '3',
-              'x-decorator': 'BlockItem',
-              'x-component': 'Block',
-              'x-uid': 'kp4kjknbs2l',
-              'x-async': false,
-              'x-index': 1,
-            },
-          },
-          'x-uid': 'u7n3beze0gr',
-          'x-async': false,
-          'x-index': 2,
-        },
-      },
-      'x-uid': 'qfl04eq71tt',
-      'x-async': false,
-      'x-index': 1,
-    },
-    row2: {
-      _isJSONSchemaObject: true,
-      version: '2.0',
-      type: 'void',
-      'x-component': 'Grid.Row',
-      properties: {
-        col21: {
-          _isJSONSchemaObject: true,
-          version: '2.0',
-          type: 'void',
-          'x-component': 'Grid.Col',
-          properties: {
-            block4: {
-              _isJSONSchemaObject: true,
-              version: '2.0',
-              type: 'void',
-              title: '4',
-              'x-decorator': 'BlockItem',
-              'x-component': 'Block',
-              'x-uid': 'v5bd5kcyhat',
-              'x-async': false,
-              'x-index': 1,
-            },
-          },
-          'x-uid': 'bwg0mv89atk',
-          'x-async': false,
-          'x-index': 1,
-        },
-        col22: {
-          _isJSONSchemaObject: true,
-          version: '2.0',
-          type: 'void',
-          'x-component': 'Grid.Col',
-          properties: {
-            block5: {
-              _isJSONSchemaObject: true,
-              version: '2.0',
-              type: 'void',
-              title: '5',
-              'x-decorator': 'BlockItem',
-              'x-component': 'Block',
-              'x-uid': 'noh1flz5oqg',
-              'x-async': false,
-              'x-index': 1,
-            },
-          },
-          'x-uid': 'oz0rypr2rlj',
-          'x-async': false,
-          'x-index': 2,
-        },
-      },
-      'x-uid': '5igqpmvilz1',
-      'x-async': false,
-      'x-index': 2,
-    },
-  },
-};
-
-export default function App() {
-  return (
-    <SchemaComponentProvider components={{ Grid, Block, BlockItem }}>
-      <SchemaComponent schema={schema} />
-    </SchemaComponentProvider>
-  );
-}

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

@@ -1,73 +0,0 @@
-import { ISchema } from '@formily/react';
-import { uid } from '@formily/shared';
-import {
-  Form,
-  FormItem,
-  Grid,
-  Input,
-  Markdown,
-  SchemaComponent,
-  SchemaComponentProvider,
-  SchemaInitializerProvider
-} from '@nocobase/client';
-import React from 'react';
-
-const schema: ISchema = {
-  type: 'void',
-  name: 'grid1',
-  'x-decorator': 'Form',
-  'x-component': 'Grid',
-  'x-item-initializer': 'AddFormItem',
-  'x-uid': uid(),
-  properties: {
-    row1: {
-      type: 'void',
-      'x-component': 'Grid.Row',
-      'x-uid': uid(),
-      properties: {
-        col11: {
-          type: 'void',
-          'x-component': 'Grid.Col',
-          properties: {
-            name: {
-              type: 'string',
-              title: 'Name',
-              'x-decorator': 'FormItem',
-              'x-component': 'Input',
-              'x-collection-field': 'posts.name',
-            },
-            title: {
-              type: 'string',
-              title: 'Title',
-              'x-decorator': 'FormItem',
-              'x-component': 'Input',
-              'x-collection-field': 'posts.title',
-            },
-          },
-        },
-        col12: {
-          type: 'void',
-          'x-component': 'Grid.Col',
-          properties: {
-            intro: {
-              type: 'string',
-              title: 'Intro',
-              'x-decorator': 'FormItem',
-              'x-component': 'Input',
-            },
-          },
-        },
-      },
-    },
-  },
-};
-
-export default function App() {
-  return (
-    <SchemaComponentProvider components={{ Markdown, Form, Grid, Input, FormItem }}>
-      <SchemaInitializerProvider>
-        <SchemaComponent schema={schema} />
-      </SchemaInitializerProvider>
-    </SchemaComponentProvider>
-  );
-}

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

@@ -1,47 +0,0 @@
-import { ISchema, observer, useFieldSchema } from '@formily/react';
-import { uid } from '@formily/shared';
-import {
-  BlockItem,
-  CardItem,
-  DragHandler,
-  Form,
-  Grid,
-  Markdown,
-  SchemaComponent,
-  SchemaComponentProvider,
-  SchemaInitializerProvider
-} from '@nocobase/client';
-import React from 'react';
-
-const Block = observer((props) => {
-  const fieldSchema = useFieldSchema();
-  return (
-    <div style={{ marginBottom: 20, padding: '0 20px', height: 50, lineHeight: '50px', background: '#f1f1f1' }}>
-      Block {fieldSchema.title}
-      <DragHandler />
-    </div>
-  );
-});
-
-const schema: ISchema = {
-  type: 'object',
-  properties: {
-    grid: {
-      type: 'void',
-      'x-component': 'Grid',
-      'x-item-initializer': 'AddBlockItem',
-      'x-uid': uid(),
-      properties: {},
-    },
-  },
-};
-
-export default function App() {
-  return (
-    <SchemaComponentProvider components={{ BlockItem, Block, Grid, CardItem, Markdown, Form }}>
-      <SchemaInitializerProvider>
-        <SchemaComponent schema={schema} />
-      </SchemaInitializerProvider>
-    </SchemaComponentProvider>
-  );
-}

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

@@ -1,14 +0,0 @@
----
-nav:
-  path: /client
-group:
-  path: /schema-components
----
-
-# Grid
-
-<code src="./demos/demo1.tsx" />
-
-<code src="./demos/demo2.tsx" />
-
-<code src="./demos/demo3.tsx" />

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

@@ -1,3 +0,0 @@
-export * from './Block';
-export * from './Grid';
-

package/src/schema-component/antd/icon-picker/IconPicker.tsx

@@ -1,79 +0,0 @@
-import { CloseOutlined, LoadingOutlined } from '@ant-design/icons';
-import { useFormLayout } from '@formily/antd';
-import { connect, mapProps, mapReadPretty } from '@formily/react';
-import { isValid } from '@formily/shared';
-import { Button, Input, Popover } from 'antd';
-import React, { useState } from 'react';
-import { useTranslation } from 'react-i18next';
-import { hasIcon, Icon, icons } from '../../../icon';
-
-function IconField(props: any) {
-  const layout = useFormLayout();
-  const { value, onChange, disabled } = props;
-  const [visible, setVisible] = useState(false);
-  const { t } = useTranslation();
-  return (
-    <div>
-      <Input.Group compact>
-        <Popover
-          placement={'bottom'}
-          visible={visible}
-          onVisibleChange={(val) => {
-            if (disabled) {
-              return;
-            }
-            setVisible(val);
-          }}
-          content={
-            <div style={{ width: '26em', maxHeight: '20em', overflowY: 'auto' }}>
-              {[...icons.keys()].map((key) => (
-                <span
-                  style={{ fontSize: 18, marginRight: 10, cursor: 'pointer' }}
-                  onClick={() => {
-                    onChange(key);
-                    setVisible(false);
-                  }}
-                >
-                  <Icon type={key} />
-                </span>
-              ))}
-            </div>
-          }
-          title={t('Icon')}
-          trigger="click"
-        >
-          <Button size={layout.size as any} disabled={disabled}>
-            {hasIcon(value) ? <Icon type={value} /> : t('Select icon')}
-          </Button>
-        </Popover>
-        {value && !disabled && (
-          <Button
-            size={layout.size as any}
-            icon={<CloseOutlined />}
-            onClick={(e) => {
-              onChange(null);
-            }}
-          ></Button>
-        )}
-      </Input.Group>
-    </div>
-  );
-}
-
-export const IconPicker = connect(
-  IconField,
-  mapProps((props, field) => {
-    return {
-      ...props,
-      suffix: <span>{field?.['loading'] || field?.['validating'] ? <LoadingOutlined /> : props.suffix}</span>,
-    };
-  }),
-  mapReadPretty((props) => {
-    if (!isValid(props.value)) {
-      return <div></div>;
-    }
-    return <Icon type={props.value} />;
-  }),
-);
-
-export default IconPicker;

package/src/schema-component/antd/icon-picker/demos/demo1.tsx

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

package/src/schema-component/antd/icon-picker/index.md

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

package/src/schema-component/antd/icon-picker/index.ts

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

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

@@ -1,4 +0,0 @@
-.ant-formily-item-label {
-  color: #000000d9;
-  font-weight:600;
-}

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

@@ -1,35 +0,0 @@
-export * from './action';
-export * from './block-item';
-export * from './calendar';
-export * from './card-item';
-export * from './cascader';
-export * from './chart';
-export * from './checkbox';
-export * from './color-select';
-export * from './date-picker';
-export * from './filter';
-export * from './form';
-export * from './form-item';
-export * from './form-v2';
-export * from './grid';
-export * from './icon-picker';
-export * from './input';
-export * from './input-number';
-export * from './kanban';
-export * from './markdown';
-export * from './menu';
-export * from './page';
-export * from './pagination';
-export * from './password';
-export * from './radio';
-export * from './record-picker';
-export * from './rich-text';
-export * from './select';
-export * from './space';
-export * from './table';
-export * from './table-v2';
-export * from './tabs';
-export * from './time-picker';
-export * from './tree-select';
-export * from './upload';
-import './index.less';

package/src/schema-component/antd/input/EllipsisWithTooltip.tsx

@@ -1,47 +0,0 @@
-import { Popover } from 'antd';
-import React, { CSSProperties, useState } from 'react';
-
-const ellipsisDefaultStyle: CSSProperties = {
-  overflow: 'hidden',
-  overflowWrap: 'break-word',
-  textOverflow: 'ellipsis',
-  whiteSpace: 'nowrap',
-  wordBreak: 'break-all',
-};
-
-export const EllipsisWithTooltip = (props) => {
-  const [ellipsis, setEllipsis] = useState(false);
-  const [visible, setVisible] = useState(false);
-  if (!props.ellipsis) {
-    return <>{props.children}</>;
-  }
-  const { popoverContent } = props;
-  return (
-    <Popover
-      visible={ellipsis && visible}
-      onVisibleChange={(visible) => {
-        setVisible(ellipsis && visible);
-      }}
-      content={
-        <div
-          style={{
-            width: 300,
-            overflowX: 'auto',
-          }}
-        >
-          {popoverContent || props.children}
-        </div>
-      }
-    >
-      <div
-        style={{ ...ellipsisDefaultStyle }}
-        onMouseEnter={(e) => {
-          const el = e.target as any;
-          setEllipsis(el.scrollWidth > el.clientWidth);
-        }}
-      >
-        {props.children}
-      </div>
-    </Popover>
-  );
-};

package/src/schema-component/antd/input/Input.tsx

@@ -1,39 +0,0 @@
-import { LoadingOutlined } from '@ant-design/icons';
-import { connect, mapProps, mapReadPretty } from '@formily/react';
-import { Input as AntdInput } from 'antd';
-import { InputProps, TextAreaProps } from 'antd/lib/input';
-import React from 'react';
-import { ReadPretty } from './ReadPretty';
-
-type ComposedInput = React.FC<InputProps> & {
-  TextArea?: React.FC<TextAreaProps>;
-  URL?: React.FC<InputProps>;
-};
-
-export const Input: ComposedInput = connect(
-  AntdInput,
-  mapProps((props, field) => {
-    return {
-      ...props,
-      suffix: <span>{field?.['loading'] || field?.['validating'] ? <LoadingOutlined /> : props.suffix}</span>,
-    };
-  }),
-  mapReadPretty(ReadPretty.Input),
-);
-
-Input.TextArea = connect(
-  AntdInput.TextArea,
-  mapProps((props, field) => {
-    return {
-      autoSize: {
-        maxRows: 10,
-        minRows: 3,
-      },
-      ...props,
-    };
-  }),
-  mapReadPretty(ReadPretty.TextArea),
-);
-Input.URL = connect(AntdInput, mapReadPretty(ReadPretty.URL));
-
-export default Input;

package/src/schema-component/antd/input/ReadPretty.tsx

@@ -1,116 +0,0 @@
-import { usePrefixCls } from '@formily/antd/lib/__builtins__';
-import { InputProps, TextAreaProps } from 'antd/lib/input';
-import cls from 'classnames';
-import React from 'react';
-import { useCompile } from '../..';
-import { EllipsisWithTooltip } from './EllipsisWithTooltip';
-import { HTMLEncode } from './shared';
-
-type Composed = {
-  Input: React.FC<InputProps & { ellipsis?: any }>;
-  URL: React.FC<InputProps>;
-  TextArea: React.FC<
-    TextAreaProps & { ellipsis?: any; text?: any; addonBefore?: any; suffix?: any; addonAfter?: any; autop?: boolean }
-  >;
-  Html?: any;
-};
-
-export const ReadPretty: Composed = () => null;
-
-ReadPretty.Input = (props) => {
-  const prefixCls = usePrefixCls('description-input', props);
-  const compile = useCompile();
-  return (
-    <div className={cls(prefixCls, props.className)} style={props.style}>
-      {props.addonBefore}
-      {props.prefix}
-      <EllipsisWithTooltip ellipsis={props.ellipsis}>{compile(props.value)}</EllipsisWithTooltip>
-      {props.suffix}
-      {props.addonAfter}
-    </div>
-  );
-};
-
-ReadPretty.TextArea = (props) => {
-  const prefixCls = usePrefixCls('description-textarea', props);
-  const compile = useCompile();
-  const value = compile(props.value ?? '');
-  const { autop = true, ellipsis, text } = props;
-  const html = (
-    <div
-      dangerouslySetInnerHTML={{
-        __html: HTMLEncode(value).split('\n').join('<br/>'),
-      }}
-    />
-  );
-  console.log('value', value);
-  const content = (
-    <EllipsisWithTooltip ellipsis={ellipsis} popoverContent={autop ? html : value}>
-      {ellipsis ? text || value : html}
-    </EllipsisWithTooltip>
-  );
-  return (
-    <div className={cls(prefixCls, props.className)} style={props.style}>
-      {props.addonBefore}
-      {props.prefix}
-      {content}
-      {props.suffix}
-      {props.addonAfter}
-    </div>
-  );
-};
-
-function convertToText(html: string) {
-  let temp = document.createElement('div');
-  temp.innerHTML = html;
-  const text = temp.innerText;
-  temp = null;
-  return text.replace(/[\n\r]/g, '');
-}
-
-ReadPretty.Html = (props) => {
-  const prefixCls = usePrefixCls('description-textarea', props);
-  const compile = useCompile();
-  const value = compile(props.value ?? '');
-  const { autop = true, ellipsis } = props;
-  const html = (
-    <div
-      dangerouslySetInnerHTML={{
-        __html: value,
-      }}
-    />
-  );
-  const text = convertToText(value);
-  const content = (
-    <EllipsisWithTooltip ellipsis={ellipsis} popoverContent={autop ? html : value}>
-      {ellipsis ? text : html}
-    </EllipsisWithTooltip>
-  );
-  return (
-    <div className={cls(prefixCls, props.className)} style={props.style}>
-      {props.addonBefore}
-      {props.prefix}
-      {content}
-      {props.suffix}
-      {props.addonAfter}
-    </div>
-  );
-};
-
-ReadPretty.URL = (props) => {
-  const prefixCls = usePrefixCls('description-url', props);
-  const content = props.value && (
-    <a target={'_blank'} href={props.value as any}>
-      {props.value}
-    </a>
-  );
-  return (
-    <div className={cls(prefixCls, props.className)} style={props.style}>
-      {props.addonBefore}
-      {props.prefix}
-      {content}
-      {props.suffix}
-      {props.addonAfter}
-    </div>
-  );
-};