@nocobase/client-v2 2.1.0-alpha.4 → 2.1.0-alpha.45

package/src/flow/models/fields/CheckboxGroupFieldModel.tsx

@@ -0,0 +1,25 @@
+/**
+ * This file is part of the NocoBase (R) project.
+ * Copyright (c) 2020-2024 NocoBase Co., Ltd.
+ * Authors: NocoBase Team.
+ *
+ * This project is dual-licensed under AGPL-3.0 and NocoBase Commercial License.
+ * For more information, please refer to: https://www.nocobase.com/agreement.
+ */
+
+import { Checkbox } from 'antd';
+import React from 'react';
+import { EditableItemModel, tExpr } from '@nocobase/flow-engine';
+import { FieldModel } from '../base/FieldModel';
+
+export class CheckboxGroupFieldModel extends FieldModel {
+  render() {
+    return <Checkbox.Group {...this.props} />;
+  }
+}
+CheckboxGroupFieldModel.define({
+  label: tExpr('CheckboxGroup'),
+});
+EditableItemModel.bindModelToInterface('CheckboxGroupFieldModel', ['checkboxGroup'], {
+  isDefault: true,
+});

package/src/flow/models/fields/ClickableFieldModel.tsx

@@ -0,0 +1,355 @@
+/**
+ * This file is part of the NocoBase (R) project.
+ * Copyright (c) 2020-2024 NocoBase Co., Ltd.
+ * Authors: NocoBase Team.
+ *
+ * This project is dual-licensed under AGPL-3.0 and NocoBase Commercial License.
+ * For more information, please refer to: https://www.nocobase.com/agreement.
+ */
+
+import { CollectionField, tExpr } from '@nocobase/flow-engine';
+import { uid } from '@formily/shared';
+import { Tag } from 'antd';
+import { castArray, get } from 'lodash';
+import React from 'react';
+import { EllipsisWithTooltip } from '../../components/EllipsisWithTooltip';
+import { openViewFlow } from '../../flows/openViewFlow';
+import { FieldModel } from '../base/FieldModel';
+import { hasDisplayValue, normalizeDisplayValue } from '../utils/displayValueUtils';
+
+export function transformNestedData(inputData) {
+  const resultArray = [];
+
+  function recursiveTransform(data) {
+    if (data?.parent) {
+      const { parent } = data;
+      recursiveTransform(parent);
+    }
+    const { parent, ...other } = data;
+    resultArray.push(other);
+  }
+  if (inputData) {
+    recursiveTransform(inputData);
+  }
+  return resultArray;
+}
+
+const hasAssociationPathName = (parent: unknown): parent is { associationPathName?: string } =>
+  !!parent && typeof parent === 'object' && 'associationPathName' in parent;
+
+const hasUsableSourceId = (sourceId: unknown) => sourceId !== undefined && sourceId !== null && String(sourceId) !== '';
+
+function getParentAssociationField(model: FieldModel): CollectionField | null {
+  const parentCollectionField =
+    (model.parent as any)?.context?.collectionField || (model.parent as any)?.collectionField;
+  return parentCollectionField?.isAssociationField?.() ? parentCollectionField : null;
+}
+
+export function applyClickToOpenProps(ctx: any, params: any) {
+  const collectionField = ctx.collectionField?.isAssociationField?.()
+    ? ctx.collectionField
+    : ctx.model?.parent?.context?.collectionField || ctx.collectionField;
+  ctx.model.setProps({
+    clickToOpen: params.clickToOpen,
+    ...(collectionField?.getComponentProps?.() || {}),
+  });
+}
+
+export async function refreshClickToOpenRuntime(ctx: any) {
+  ctx.model.invalidateFlowCache?.('beforeRender', true);
+  await ctx.model.rerender?.();
+
+  const parent = ctx.model.parent;
+  if (!parent) {
+    return;
+  }
+  parent.invalidateFlowCache?.('beforeRender', true);
+  parent.setProps?.({
+    __displayFieldRefreshKey: uid(),
+  });
+  await parent.rerender?.();
+}
+
+export async function applyClickToOpenSetting(ctx: any, params: any) {
+  applyClickToOpenProps(ctx, params);
+  await refreshClickToOpenRuntime(ctx);
+}
+
+export class ClickableFieldModel extends FieldModel {
+  get collectionField(): CollectionField {
+    const collectionField = this.context.collectionField;
+    if (collectionField?.isAssociationField?.()) {
+      return collectionField;
+    }
+    return getParentAssociationField(this) || collectionField;
+  }
+
+  /**
+   * 点击打开行为
+   */
+  onClick(event, currentRecord) {
+    const associationPathName = hasAssociationPathName(this.parent) ? this.parent.associationPathName : undefined;
+
+    if (this.collectionField.isAssociationField()) {
+      const targetCollection = this.collectionField.targetCollection;
+      const sourceCollection = this.context.blockModel.collection;
+      const sourceKey = this.collectionField.sourceKey || sourceCollection.filterTargetKey;
+      const targetKey = this.collectionField?.targetKey;
+
+      let filterByTk = currentRecord[targetKey];
+      if (this.collectionField.interface === 'm2m') {
+        // if use currentRecord[targetKey], details block in the popup will throw error
+        // also incorrect for v1
+        filterByTk = currentRecord[targetCollection.filterTargetKey];
+      }
+      const parentObj = associationPathName
+        ? get(this.context.blockModel?.form?.getFieldsValue?.(true) || this.context.record, associationPathName)
+        : this.context.record;
+      const sourceId = parentObj?.[sourceKey];
+      const useAssociationResource = hasUsableSourceId(sourceId);
+      this.dispatchEvent(
+        'click',
+        {
+          event,
+          filterByTk,
+          collectionName: useAssociationResource
+            ? this.collectionField.collection.name
+            : targetCollection?.name || this.collectionField.target,
+          associationName: useAssociationResource ? `${sourceCollection.name}.${this.collectionField.name}` : null,
+          sourceId: useAssociationResource ? sourceId : null,
+        },
+        {
+          debounce: true,
+        },
+      );
+      return;
+    }
+
+    if (associationPathName) {
+      // 关联字段的属性
+      const collection = this.context.collection;
+      const associationField = collection?.getFieldByPath?.(associationPathName);
+      if (associationField?.isAssociationField?.()) {
+        const targetCollection = associationField.targetCollection;
+        const sourceCollection = associationField.collection;
+        const sourceKey = associationField.sourceKey || sourceCollection?.filterTargetKey;
+        const targetKey = associationField?.targetKey || targetCollection?.filterTargetKey;
+        const associationRecord = currentRecord ?? get(this.context.record, associationPathName);
+        const associationParentField = associationPathName.includes('.')
+          ? collection.getFieldByPath(associationPathName.split('.')[0])
+          : null;
+        const foreignKey = associationParentField?.foreignKey;
+        const parentObj = associationPathName.includes('.')
+          ? get(this.context.record, associationPathName.split('.')[0])
+          : this.context.record;
+        const sourceId = hasUsableSourceId(parentObj?.[sourceKey])
+          ? parentObj?.[sourceKey]
+          : this.context.record?.[foreignKey];
+        const useAssociationResource = hasUsableSourceId(sourceId);
+        let filterByTk = associationRecord?.[targetKey];
+        if (associationField.interface === 'm2m') {
+          // also incorrect for v1
+          filterByTk = associationRecord?.[targetCollection.filterTargetKey];
+        }
+
+        this.dispatchEvent(
+          'click',
+          {
+            event,
+            filterByTk,
+            collectionName: useAssociationResource
+              ? this.collectionField.collection.name
+              : targetCollection?.name || associationField.target || this.collectionField.collection.name,
+            associationName: useAssociationResource
+              ? `${associationField.collection.name}.${this.collectionField.name}`
+              : null,
+            sourceId: useAssociationResource ? sourceId : null,
+          },
+          {
+            debounce: true,
+          },
+        );
+        return;
+      }
+    }
+
+    this.dispatchEvent(
+      'click',
+      {
+        event,
+        sourceId: this.context.resource?.getSourceId(),
+        filterByTk: this.context.collection.getFilterByTK(this.context.item?.value || this.context.record),
+      },
+      {
+        debounce: true,
+      },
+    );
+  }
+
+  renderComponent(value, wrap?) {
+    return value;
+  }
+
+  renderInDisplayStyle(value, record?, isToMany?, wrap?) {
+    const {
+      clickToOpen = false,
+      displayStyle,
+      titleField,
+      overflowMode,
+      disabled,
+      timeFormat,
+      ...restProps
+    } = this.props;
+    const titleCollectionField = titleField
+      ? this.context.collectionField?.targetCollection?.getField?.(titleField) || this.context.collectionField
+      : this.context.collectionField;
+    const displayValue = normalizeDisplayValue(value, { collectionField: titleCollectionField });
+    if (!hasDisplayValue(displayValue) && value && typeof value === 'object' && restProps.target) {
+      return;
+    }
+    const result = this.renderComponent(displayValue, wrap);
+    const display = record ? (hasDisplayValue(displayValue) ? result : 'N/A') : result;
+    const isTag = displayStyle === 'tag';
+    const handleClick = (e) => {
+      clickToOpen && this.onClick(e, record);
+    };
+
+    const commonStyle = {
+      // ...(restProps.style || {}),
+      cursor: clickToOpen ? 'pointer' : 'default',
+      alignItems: 'center',
+      gap: 4,
+      display: isToMany && 'inline-block',
+    };
+
+    if (isTag) {
+      return (
+        hasDisplayValue(displayValue) && (
+          <Tag {...restProps} style={commonStyle} onClick={handleClick} className={restProps.className}>
+            {display}
+          </Tag>
+        )
+      );
+    }
+    if (clickToOpen) {
+      return (
+        <a {...restProps} style={commonStyle} onClick={handleClick} className={restProps.className}>
+          {display}
+        </a>
+      );
+    }
+    return (
+      <span {...restProps} style={commonStyle} className={restProps.className}>
+        {display}
+      </span>
+    );
+  }
+
+  /**
+   * 基类统一渲染逻辑
+   */
+  render(): any {
+    const { value, displayStyle, fieldNames, overflowMode } = this.props;
+    const titleField = this.props.titleField || fieldNames?.label;
+    const ellipsis = overflowMode === 'ellipsis';
+    if (titleField) {
+      if (displayStyle === 'tag') {
+        const result = castArray(value).map((v, idx) => (
+          <React.Fragment key={idx}>{this.renderInDisplayStyle(v?.[titleField], v)}</React.Fragment>
+        ));
+        return <EllipsisWithTooltip ellipsis={ellipsis}>{result}</EllipsisWithTooltip>;
+      } else {
+        const result = castArray(value).flatMap((v, idx) => {
+          if (this.collectionField.targetCollection?.template === 'tree') {
+            const label = transformNestedData(v).length
+              ? transformNestedData(v)
+                  .map((o) => o?.[titleField])
+                  .join(' / ')
+              : null;
+            const node = this.renderInDisplayStyle(label, v, Array.isArray(value));
+            return idx === 0 ? [node] : [<span key={`sep-${idx}`}>, </span>, node];
+          } else {
+            const node = this.renderInDisplayStyle(v?.[titleField], v, Array.isArray(value));
+            return idx === 0 ? [node] : [<span key={`sep-${idx}`}>, </span>, node];
+          }
+        });
+        return (
+          <EllipsisWithTooltip ellipsis={ellipsis}>
+            <span style={{ flexWrap: 'nowrap' }}>{result}</span>
+          </EllipsisWithTooltip>
+        );
+      }
+    } else {
+      const textContent = (
+        <EllipsisWithTooltip ellipsis={ellipsis} popoverContent={this.renderInDisplayStyle(value, null, null, true)}>
+          {this.renderInDisplayStyle(value)}
+        </EllipsisWithTooltip>
+      );
+      return textContent;
+    }
+  }
+}
+
+ClickableFieldModel.registerFlow({
+  key: 'displayFieldSettings',
+  title: tExpr('Display Field settings'),
+  sort: 200,
+  steps: {
+    displayStyle: {
+      title: tExpr('Display mode'),
+      uiMode: (ctx) => {
+        const t = ctx.t;
+        return {
+          type: 'select',
+          key: 'displayStyle',
+          props: {
+            options: [
+              { label: t('Tag'), value: 'tag' },
+              { label: t('Text'), value: 'text' },
+            ],
+          },
+        };
+      },
+      hideInSettings: async (ctx) => {
+        if (['select', 'multipleSelect', 'radioGroup', 'checkboxGroup'].includes(ctx.collectionField?.interface)) {
+          return true;
+        }
+        return false;
+      },
+      defaultParams: {
+        displayStyle: 'text',
+      },
+      handler(ctx, params) {
+        ctx.model.setProps({ displayStyle: params.displayStyle });
+      },
+    },
+
+    overflowMode: {
+      use: 'overflowMode',
+    },
+    clickToOpen: {
+      title: tExpr('Enable click-to-open'),
+      uiMode: { type: 'switch', key: 'clickToOpen' },
+      defaultParams: (ctx) => {
+        if (ctx.disableFieldClickToOpen) {
+          return {
+            clickToOpen: false,
+          };
+        }
+        return {
+          clickToOpen: ctx.collectionField.isAssociationField(),
+        };
+      },
+      hideInSettings(ctx) {
+        return ctx.disableFieldClickToOpen;
+      },
+      async afterParamsSave(ctx, params) {
+        await applyClickToOpenSetting(ctx, params);
+      },
+      handler(ctx, params) {
+        applyClickToOpenProps(ctx, params);
+      },
+    },
+  },
+});
+ClickableFieldModel.registerFlow(openViewFlow);

package/src/flow/models/fields/CollectionSelectorFieldModel.tsx

@@ -0,0 +1,100 @@
+/**
+ * This file is part of the NocoBase (R) project.
+ * Copyright (c) 2020-2024 NocoBase Co., Ltd.
+ * Authors: NocoBase Team.
+ *
+ * This project is dual-licensed under AGPL-3.0 and NocoBase Commercial License.
+ * For more information, please refer to: https://www.nocobase.com/agreement.
+ */
+
+import React, { useCallback } from 'react';
+import { Select } from 'antd';
+import { castArray } from 'lodash';
+import { EditableItemModel } from '@nocobase/flow-engine';
+import { useTranslation } from 'react-i18next';
+import { FieldModel } from '../base/FieldModel';
+
+const CollectionSelector = (props) => {
+  const { filter, options, ...others } = props;
+  const { t } = useTranslation();
+  const optionFilter = useCallback(
+    (input, option) =>
+      (option?.label.toLowerCase() ?? '').includes(input.toLocaleLowerCase()) ||
+      (option?.value.toString().toLowerCase() ?? '').includes(input.toLocaleLowerCase()),
+    [],
+  );
+  return (
+    <Select
+      // @ts-ignore
+      role="button"
+      data-testid="select-collection"
+      placeholder={t('Select collection')}
+      popupMatchSelectWidth={false}
+      {...others}
+      showSearch
+      filterOption={optionFilter}
+      options={options}
+    />
+  );
+};
+
+function getConfiguredCollectionNames(collectionField) {
+  return (collectionField?.uiSchema?.enum || collectionField?.enum || [])
+    .map((item) => (item && typeof item === 'object' ? item.value : item))
+    .filter((value) => value !== null && typeof value !== 'undefined');
+}
+
+export class CollectionSelectorFieldModel extends FieldModel {
+  render() {
+    return <CollectionSelector {...this.props} />;
+  }
+}
+CollectionSelectorFieldModel.registerFlow({
+  key: 'collectionSelectFlow',
+  sort: 5000,
+  steps: {
+    init: {
+      handler(ctx) {
+        if (ctx.model.props.isTableOid) {
+          const childCollections = ctx.dataSourceManager
+            .getDataSource('main')
+            .collectionManager.getChildrenCollections(ctx.collectionField.collectionName);
+          const options = castArray(ctx.collectionField.collection)
+            .concat(childCollections)
+            .map((item) => {
+              return {
+                label: item.title || item.name,
+                value: item.name || item.value,
+              };
+            });
+          ctx.model.setProps({
+            options: options,
+          });
+        } else {
+          const collections = ctx.dataSourceManager.getDataSource('main').getCollections();
+          const defaultOptions = getConfiguredCollectionNames(ctx.model.context.collectionField);
+          const options = collections
+            .filter((item: any) => !item.options.hidden)
+            .filter((v) => {
+              if (defaultOptions.length) {
+                return defaultOptions.includes(v.name);
+              }
+              return true;
+            })
+            .map((item: any) => ({
+              label: item.title || item.name,
+              value: item.name || item.value,
+              color: item.category?.color,
+            }));
+          ctx.model.setProps({
+            options: options,
+          });
+        }
+      },
+    },
+  },
+});
+
+EditableItemModel.bindModelToInterface('CollectionSelectorFieldModel', ['collection', 'tableoid'], {
+  isDefault: true,
+});

package/src/flow/models/fields/ColorFieldModel.tsx

@@ -0,0 +1,61 @@
+/**
+ * This file is part of the NocoBase (R) project.
+ * Copyright (c) 2020-2024 NocoBase Co., Ltd.
+ * Authors: NocoBase Team.
+ *
+ * This project is dual-licensed under AGPL-3.0 and NocoBase Commercial License.
+ * For more information, please refer to: https://www.nocobase.com/agreement.
+ */
+
+import React from 'react';
+import { ColorPicker as AntdColorPicker } from 'antd';
+import { EditableItemModel, tExpr, useFlowEngineContext } from '@nocobase/flow-engine';
+import { FieldModel } from '../base/FieldModel';
+
+export const NBColorPicker = (props) => {
+  const ctx = useFlowEngineContext();
+  const componentProps = {
+    ...props,
+    trigger: 'hover',
+    style: { maWidth: 30 },
+    destroyTooltipOnHide: true,
+    onChange: (color) => {
+      if (color?.cleared) {
+        props.onChange(null);
+      } else {
+        props.onChange(color.toHexString());
+      }
+    },
+    presets: [
+      {
+        label: ctx.t('Recommended'),
+        colors: [
+          '#8BBB11',
+          '#52C41A',
+          '#13A8A8',
+          '#1677FF',
+          '#F5222D',
+          '#FADB14',
+          '#FA8C164D',
+          '#FADB144D',
+          '#52C41A4D',
+          '#1677FF4D',
+          '#2F54EB4D',
+          '#722ED14D',
+          '#EB2F964D',
+        ],
+      },
+    ],
+  };
+  return <AntdColorPicker allowClear {...componentProps} />;
+};
+
+export class ColorFieldModel extends FieldModel {
+  render() {
+    return <NBColorPicker {...this.props} />;
+  }
+}
+
+EditableItemModel.bindModelToInterface('ColorFieldModel', ['color'], {
+  isDefault: true,
+});

package/src/flow/models/fields/DateTimeFieldModel/DateOnlyFieldModel.tsx

@@ -0,0 +1,70 @@
+/**
+ * This file is part of the NocoBase (R) project.
+ * Copyright (c) 2020-2024 NocoBase Co., Ltd.
+ * Authors: NocoBase Team.
+ *
+ * This project is dual-licensed under AGPL-3.0 and NocoBase Commercial License.
+ * For more information, please refer to: https://www.nocobase.com/agreement.
+ */
+import { DatePicker } from 'antd';
+import dayjs from 'dayjs';
+import { EditableItemModel, useFlowModelContext } from '@nocobase/flow-engine';
+import React from 'react';
+import { DateTimeFieldModel } from './DateTimeFieldModel';
+import { MobileDatePicker } from '../mobile-components/MobileDatePicker';
+import { useDateLimit } from './dateLimit';
+
+export const DateOnlyPicker = (props) => {
+  const { value, format = 'YYYY-MM-DD', picker = 'date', showTime, ...rest } = props;
+  const parsedValue = value && dayjs(value).isValid() ? dayjs(value) : null;
+  const ctx = useFlowModelContext();
+  const { disabledDate, disabledTime, minDate, maxDate } = useDateLimit({
+    ...props,
+    currentForm: ctx.model?.context?.form,
+  });
+  const componentProps = {
+    ...rest,
+    value: parsedValue,
+    format,
+    picker,
+    showTime,
+    disabledDate,
+    disabledTime,
+    minDate,
+    maxDate,
+    onChange: (val: any) => {
+      const outputFormat = 'YYYY-MM-DD';
+      if (!val) {
+        props.onChange(undefined);
+        return;
+      }
+      if (picker === 'date') {
+        props.onChange(val.format(outputFormat));
+      } else {
+        props.onChange(val.startOf(picker).format(outputFormat));
+      }
+    },
+  };
+
+  // TODO: 移动端相关的代码需迁移到单独的插件中
+  if (ctx.isMobileLayout) {
+    return <MobileDatePicker {...componentProps} />;
+  }
+
+  return <DatePicker {...componentProps} />;
+};
+
+export class DateOnlyFieldModel extends DateTimeFieldModel {
+  setProps(componentProps) {
+    super.setProps({
+      ...componentProps,
+      showTime: false,
+      utc: false,
+    });
+  }
+  render() {
+    return <DateOnlyPicker {...this.props} style={{ width: '100%' }} />;
+  }
+}
+
+EditableItemModel.bindModelToInterface('DateOnlyFieldModel', ['date'], { isDefault: true });

package/src/flow/models/fields/DateTimeFieldModel/DateTimeFieldModel.tsx

@@ -0,0 +1,30 @@
+/**
+ * This file is part of the NocoBase (R) project.
+ * Copyright (c) 2020-2024 NocoBase Co., Ltd.
+ * Authors: NocoBase Team.
+ *
+ * This project is dual-licensed under AGPL-3.0 and NocoBase Commercial License.
+ * For more information, please refer to: https://www.nocobase.com/agreement.
+ */
+import { DatePicker } from 'antd';
+import React from 'react';
+import { tExpr } from '@nocobase/flow-engine';
+import { FieldModel } from '../../base';
+
+export class DateTimeFieldModel extends FieldModel {}
+
+DateTimeFieldModel.registerFlow({
+  key: 'datetimeSettings',
+  sort: 3000,
+  title: tExpr('Datetime settings'),
+  steps: {
+    dateFormat: {
+      use: 'dateDisplayFormat',
+      title: tExpr('Date display format'),
+    },
+    dateRangeLimit: {
+      use: 'dateRangeLimit',
+      title: tExpr('Date range limit'),
+    },
+  },
+});