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

package/src/schema-component/antd/block-item/BlockItem.tsx

@@ -1,63 +0,0 @@
-import { css } from '@emotion/css';
-import cls from 'classnames';
-import React from 'react';
-import { SortableItem } from '../../common';
-import { useDesigner } from '../../hooks';
-
-export const BlockItem: React.FC<any> = (props) => {
-  const Designer = useDesigner();
-  return (
-    <SortableItem
-      className={cls(
-        'nb-block-item',
-        props.className,
-        css`
-          position: relative;
-          &:hover {
-            > .general-schema-designer {
-              display: block;
-            }
-          }
-          &.nb-form-item:hover {
-            > .general-schema-designer {
-              background: rgba(241, 139, 98, 0.06) !important;
-              border: 0 !important;
-              top: -5px !important;
-              bottom: -5px !important;
-              left: -5px !important;
-              right: -5px !important;
-            }
-          }
-          > .general-schema-designer {
-            position: absolute;
-            z-index: 999;
-            top: 0;
-            bottom: 0;
-            left: 0;
-            right: 0;
-            display: none;
-            border: 2px solid rgba(241, 139, 98, 0.3);
-            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;
-              }
-            }
-          }
-        `,
-      )}
-    >
-      <Designer />
-      {props.children}
-    </SortableItem>
-  );
-};

package/src/schema-component/antd/block-item/TestDesigner.tsx

@@ -1,19 +0,0 @@
-import React from 'react';
-import { DragHandler } from '../../common';
-import { useDesignable } from '../../hooks';
-
-export const TestDesigner = () => {
-  const { remove } = useDesignable();
-  return (
-    <div>
-      <a
-        onClick={() => {
-          remove();
-        }}
-      >
-        删除
-      </a>
-      <DragHandler/>
-    </div>
-  );
-};

package/src/schema-component/antd/block-item/demos/demo1.tsx

@@ -1,46 +0,0 @@
-import { observer, useFieldSchema } from '@formily/react';
-import { uid } from '@formily/shared';
-import { BlockItem, DndContext, DragHandler, 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.name}
-      <DragHandler />
-    </div>
-  );
-});
-
-export default function App() {
-  return (
-    <SchemaComponentProvider components={{ DndContext, BlockItem, Block }}>
-      <SchemaComponent
-        schema={{
-          type: 'void',
-          name: 'page',
-          'x-component': 'DndContext',
-          'x-uid': uid(),
-          properties: {
-            block1: {
-              'x-decorator': 'BlockItem',
-              'x-component': 'Block',
-              'x-uid': uid(),
-            },
-            block2: {
-              'x-decorator': 'BlockItem',
-              'x-component': 'Block',
-              'x-uid': uid(),
-            },
-            block3: {
-              'x-decorator': 'BlockItem',
-              'x-component': 'Block',
-              'x-uid': uid(),
-            },
-          },
-        }}
-      />
-    </SchemaComponentProvider>
-  );
-}

package/src/schema-component/antd/block-item/index.md

@@ -1,12 +0,0 @@
----
-nav:
-  path: /client
-group:
-  path: /schema-components
----
-
-# BlockItem <Badge>待定</Badge>
-
-普通的装饰器（Decorator）组件，无特殊 UI 效果，一般用在 x-decorator 中。用于提供区块的管理，如拖拽功能、当前节点的 SettingsForm。CardItem 和 FormItem 组件都是基于 BlockItem 实现，也具备以上相同功能。
-
-<code src="./demos/demo1.tsx" />

package/src/schema-component/antd/block-item/index.tsx

@@ -1,3 +0,0 @@
-export * from './BlockItem';
-export * from './TestDesigner';
-

package/src/schema-component/antd/calendar/Calendar.Designer.tsx

@@ -1,142 +0,0 @@
-import { ISchema, useField, useFieldSchema } from '@formily/react';
-import React from 'react';
-import { useTranslation } from 'react-i18next';
-import { useCompile, useDesignable } from '../..';
-import { useCalendarBlockContext } from '../../../block-provider';
-import { useCollection } from '../../../collection-manager';
-import { useCollectionFilterOptions } from '../../../collection-manager/action-hooks';
-import { GeneralSchemaDesigner, SchemaSettings } from '../../../schema-settings';
-import { useSchemaTemplate } from '../../../schema-templates';
-
-const useOptions = () => {
-  const compile = useCompile();
-  const { fields } = useCollection();
-  const options = fields?.map((field) => {
-    return {
-      value: field.name,
-      label: compile(field?.uiSchema?.title),
-    };
-  });
-  return options;
-}
-
-export const CalendarDesigner = () => {
-  const field = useField();
-  const fieldSchema = useFieldSchema();
-  const { name, title, fields } = useCollection();
-  const dataSource = useCollectionFilterOptions(name);
-  const { service } = useCalendarBlockContext();
-  const { dn } = useDesignable();
-  const compile = useCompile();
-  const { t } = useTranslation();
-  const template = useSchemaTemplate();
-  const defaultFilter = fieldSchema?.['x-decorator-props']?.params?.filter || {};
-  const options = useOptions();
-  const fieldNames = fieldSchema?.['x-decorator-props']?.['fieldNames'] || {};
-  return (
-    <GeneralSchemaDesigner template={template} title={title || name}>
-      <SchemaSettings.SelectItem
-        title={t('Title field')}
-        value={fieldNames.title}
-        options={options}
-        onChange={(title) => {
-          const fieldNames = field.decoratorProps.fieldNames || {};
-          fieldNames['title'] = title;
-          field.decoratorProps.params = fieldNames;
-          fieldSchema['x-decorator-props']['params'] = fieldNames;
-          service.refresh();
-          dn.emit('patch', {
-            schema: {
-              ['x-uid']: fieldSchema['x-uid'],
-              'x-decorator-props': field.decoratorProps,
-            },
-          });
-          dn.refresh();
-        }}
-      />
-      <SchemaSettings.SelectItem
-        title={t('Start date field')}
-        value={fieldNames.start}
-        options={options}
-        onChange={(start) => {
-          const fieldNames = field.decoratorProps.fieldNames || {};
-          fieldNames['start'] = start;
-          field.decoratorProps.params = fieldNames;
-          fieldSchema['x-decorator-props']['params'] = fieldNames;
-          service.refresh();
-          dn.emit('patch', {
-            schema: {
-              ['x-uid']: fieldSchema['x-uid'],
-              'x-decorator-props': field.decoratorProps,
-            },
-          });
-          dn.refresh();
-        }}
-      />
-      <SchemaSettings.SelectItem
-        title={t('End date field')}
-        value={fieldNames.end}
-        options={options}
-        onChange={(end) => {
-          const fieldNames = field.decoratorProps.fieldNames || {};
-          fieldNames['end'] = end;
-          field.decoratorProps.params = fieldNames;
-          fieldSchema['x-decorator-props']['params'] = fieldNames;
-          service.refresh();
-          dn.emit('patch', {
-            schema: {
-              ['x-uid']: fieldSchema['x-uid'],
-              'x-decorator-props': field.decoratorProps,
-            },
-          });
-          dn.refresh();
-        }}
-      />
-      <SchemaSettings.ModalItem
-        title={t('Set the data scope')}
-        schema={
-          {
-            type: 'object',
-            title: t('Set the data scope'),
-            properties: {
-              filter: {
-                default: defaultFilter,
-                enum: dataSource,
-                'x-component': 'Filter',
-                'x-component-props': {},
-              },
-            },
-          } as ISchema
-        }
-        initialValues={
-          {
-            // title: field.title,
-            // icon: field.componentProps.icon,
-          }
-        }
-        onSubmit={({ filter }) => {
-          const params = field.decoratorProps.params || {};
-          params.filter = filter;
-          field.decoratorProps.params = params;
-          fieldSchema['x-decorator-props']['params'] = params;
-          service.run({ ...service?.params?.[0], filter });
-          dn.emit('patch', {
-            schema: {
-              ['x-uid']: fieldSchema['x-uid'],
-              'x-decorator-props': field.decoratorProps,
-            },
-          });
-        }}
-      />
-      <SchemaSettings.Divider />
-      <SchemaSettings.Template componentName={'Calendar'} collectionName={name} />
-      <SchemaSettings.Divider />
-      <SchemaSettings.Remove
-        removeParentsIfNoChildren
-        breakRemoveOn={{
-          'x-component': 'Grid',
-        }}
-      />
-    </GeneralSchemaDesigner>
-  );
-};

package/src/schema-component/antd/calendar/Calendar.tsx

@@ -1,156 +0,0 @@
-import { LeftOutlined, RightOutlined } from '@ant-design/icons';
-import { createForm } from '@formily/core';
-import { observer, RecursionField, Schema, useFieldSchema } from '@formily/react';
-import get from 'lodash/get';
-import moment from 'moment';
-import React, { useMemo, useState } from 'react';
-import { Calendar as BigCalendar, momentLocalizer } from 'react-big-calendar';
-import * as dates from 'react-big-calendar/lib/utils/dates';
-import { useTranslation } from 'react-i18next';
-import { RecordProvider } from '../../../';
-import { i18n } from '../../../i18n';
-import { useProps } from '../../hooks/useProps';
-import { ActionContext } from '../action';
-import { CalendarToolbarContext } from './context';
-import './style.less';
-import type { ToolbarProps } from './types';
-
-const localizer = momentLocalizer(moment);
-
-function Toolbar(props: ToolbarProps) {
-  const fieldSchema = useFieldSchema();
-  const toolBarSchema: Schema = useMemo(
-    () =>
-      fieldSchema.reduceProperties((buf, current) => {
-        if (current['x-component'].endsWith('.ActionBar')) {
-          return current;
-        }
-        return buf;
-      }, null),
-    [],
-  );
-  return (
-    <CalendarToolbarContext.Provider value={props}>
-      <RecursionField name={toolBarSchema.name} schema={toolBarSchema} />
-    </CalendarToolbarContext.Provider>
-  );
-}
-
-const messages: any = {
-  allDay: '',
-  previous: (
-    <div>
-      <LeftOutlined />
-    </div>
-  ),
-  next: (
-    <div>
-      <RightOutlined />
-    </div>
-  ),
-  today: i18n.t('Today'),
-  month: i18n.t('Month'),
-  week: i18n.t('Week'),
-  work_week: i18n.t('Work week'),
-  day: i18n.t('Day'),
-  agenda: i18n.t('Agenda'),
-  date: i18n.t('Date'),
-  time: i18n.t('Time'),
-  event: i18n.t('Event'),
-  noEventsInRange: i18n.t('None'),
-  showMore: (count) => i18n.t('{{count}} more items', { count }),
-};
-
-const useEvents = (dataSource: any, fieldNames: any) => {
-  const { t } = useTranslation();
-  return useMemo(
-    () =>
-      Array.isArray(dataSource)
-        ? dataSource?.map((item) => {
-            return {
-              id: get(item, fieldNames.id || 'id'),
-              title: get(item, fieldNames.title) || t('Untitle'),
-              start: new Date(get(item, fieldNames.start)),
-              end: new Date(get(item, fieldNames.end || fieldNames.start)),
-            };
-          })
-        : [],
-    [dataSource, fieldNames],
-  );
-};
-
-const CalendarRecordViewer = (props) => {
-  const { visible, setVisible, record } = props;
-  const form = useMemo(() => createForm(), [record]);
-  const fieldSchema = useFieldSchema();
-  const eventSchema: Schema = useMemo(
-    () =>
-      fieldSchema.reduceProperties((buf, current) => {
-        if (current['x-component'].endsWith('.Event')) {
-          return current;
-        }
-        return buf;
-      }, null),
-    [],
-  );
-  return (
-    eventSchema && (
-      <ActionContext.Provider value={{ visible, setVisible }}>
-        <RecordProvider record={record}>
-          <RecursionField schema={eventSchema} name={eventSchema.name} />
-        </RecordProvider>
-      </ActionContext.Provider>
-    )
-  );
-};
-
-export const Calendar: any = observer((props: any) => {
-  const { dataSource, fieldNames } = useProps(props);
-  const events = useEvents(dataSource, fieldNames);
-  const [visible, setVisible] = useState(false);
-  const [record, setRecord] = useState<any>({});
-  return (
-    <div {...props} style={{ height: 700 }}>
-      <CalendarRecordViewer visible={visible} setVisible={setVisible} record={record} />
-      <BigCalendar
-        popup
-        selectable
-        events={events}
-        views={['month', 'week', 'day']}
-        step={60}
-        showMultiDayTimes
-        messages={messages}
-        onSelectSlot={(slotInfo) => {
-          console.log('onSelectSlot', slotInfo);
-        }}
-        onDoubleClickEvent={(event) => {
-          console.log('onDoubleClickEvent');
-        }}
-        onSelectEvent={(event) => {
-          const record = dataSource?.find((item) => item[fieldNames.id] === event.id);
-          if (!record) {
-            return;
-          }
-          setRecord(record);
-          setVisible(true);
-        }}
-        formats={{
-          monthHeaderFormat: 'Y-M',
-          agendaDateFormat: 'M-DD',
-          dayHeaderFormat: 'Y-M-DD',
-          dayRangeHeaderFormat: ({ start, end }, culture, local) => {
-            if (dates.eq(start, end, 'month')) {
-              return local.format(start, 'Y-M', culture);
-            }
-            return `${local.format(start, 'Y-M', culture)} - ${local.format(end, 'Y-M', culture)}`;
-          },
-        }}
-        defaultDate={new Date()}
-        components={{
-          toolbar: Toolbar,
-        }}
-        localizer={localizer}
-      />
-    </div>
-  );
-});

package/src/schema-component/antd/calendar/Event.tsx

@@ -1,6 +0,0 @@
-import { observer } from '@formily/react';
-import React from 'react';
-
-export const Event = observer((props) => {
-  return <>{props.children}</>;
-});

package/src/schema-component/antd/calendar/Nav.tsx

@@ -1,19 +0,0 @@
-import { LeftOutlined, RightOutlined } from '@ant-design/icons';
-import { observer } from '@formily/react';
-import { Button } from 'antd';
-import React, { useContext } from 'react';
-import { navigate } from 'react-big-calendar/lib/utils/constants';
-import { useDesignable } from '../../hooks';
-import { CalendarToolbarContext } from './context';
-
-export const Nav = observer((props) => {
-  const { DesignableBar } = useDesignable();
-  const { onNavigate } = useContext(CalendarToolbarContext);
-  return (
-    <div className="ant-btn-group">
-      <Button icon={<LeftOutlined />} onClick={() => onNavigate(navigate.PREVIOUS)}></Button>
-      <Button icon={<RightOutlined />} onClick={() => onNavigate(navigate.NEXT)}></Button>
-      <DesignableBar />
-    </div>
-  );
-});

package/src/schema-component/antd/calendar/Title.tsx

@@ -1,15 +0,0 @@
-import { observer } from '@formily/react';
-import React, { useContext } from 'react';
-import { useDesignable } from '../../hooks';
-import { CalendarToolbarContext } from './context';
-
-export const Title = observer(() => {
-  const { DesignableBar } = useDesignable();
-  const { label } = useContext(CalendarToolbarContext);
-  return (
-    <div className="ant-btn-group" style={{ fontSize: '1.75em', fontWeight: 300 }}>
-      {label}
-      <DesignableBar />
-    </div>
-  );
-});

package/src/schema-component/antd/calendar/Today.tsx

@@ -1,23 +0,0 @@
-import { observer } from '@formily/react';
-import { Button } from 'antd';
-import React, { useContext } from 'react';
-import { navigate } from 'react-big-calendar/lib/utils/constants';
-import { useTranslation } from 'react-i18next';
-import { useDesignable } from '../../hooks';
-import { CalendarToolbarContext } from './context';
-
-export const Today = observer((props) => {
-  const { DesignableBar } = useDesignable();
-  const { onNavigate } = useContext(CalendarToolbarContext);
-  const { t } = useTranslation();
-  return (
-    <Button
-      onClick={() => {
-        onNavigate(navigate.TODAY);
-      }}
-    >
-      {t('Today')}
-      <DesignableBar />
-    </Button>
-  );
-});

package/src/schema-component/antd/calendar/ViewSelect.tsx

@@ -1,25 +0,0 @@
-import { observer } from '@formily/react';
-import { Select } from 'antd';
-import React, { useContext } from 'react';
-import { useDesignable } from '../../hooks';
-import { CalendarToolbarContext } from './context';
-
-export const ViewSelect = observer((props) => {
-  const { DesignableBar } = useDesignable();
-  const {
-    views,
-    view,
-    onView,
-    localizer: { messages },
-  } = useContext(CalendarToolbarContext);
-  return (
-    <div className="ant-btn-group">
-      <Select value={view} onChange={onView}>
-        {views.map((name) => (
-          <Select.Option value={name}>{messages[name]}</Select.Option>
-        ))}
-      </Select>
-      <DesignableBar />
-    </div>
-  );
-});

package/src/schema-component/antd/calendar/context.ts

@@ -1,5 +0,0 @@
-import { createContext } from 'react';
-import type { ToolbarProps } from './types';
-
-export const CalendarToolbarContext = createContext<ToolbarProps>(null);
-export const CalendarContext = createContext(null);