@nocobase/client-v2 2.1.0-beta.21 → 2.1.0-beta.23

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

@@ -0,0 +1,59 @@
+/**
+ * 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 { DisplayItemModel, tExpr } from '@nocobase/flow-engine';
+import dayjs from 'dayjs';
+import React from 'react';
+import { ClickableFieldModel } from './ClickableFieldModel';
+
+export class DisplayDateTimeFieldModel extends ClickableFieldModel {
+  public renderComponent(value) {
+    const { className, style } = this.props;
+    const finalFormat = this.props.format;
+    let formattedValue = '';
+    if (value) {
+      const day = dayjs(value);
+      formattedValue = day.isValid() ? day.format(finalFormat) : '';
+    }
+    return (
+      <div className={className} style={style}>
+        {formattedValue}
+      </div>
+    );
+  }
+}
+
+DisplayDateTimeFieldModel.registerFlow({
+  key: 'datetimeSettings',
+  sort: 1000,
+  title: tExpr('Datetime settings'),
+  steps: {
+    dateFormat: {
+      use: 'dateDisplayFormat',
+      title: tExpr('Date display format'),
+    },
+  },
+});
+DisplayDateTimeFieldModel.define({
+  label: tExpr('Datetime'),
+});
+
+DisplayItemModel.bindModelToInterface(
+  'DisplayDateTimeFieldModel',
+  ['date', 'datetimeNoTz', 'createdAt', 'datetime', 'updatedAt', 'unixTimestamp', 'formula'],
+  {
+    isDefault: true,
+    when(ctx, fieldInstance) {
+      if (fieldInstance.type === 'formula') {
+        return fieldInstance.dataType === 'date';
+      }
+      return true;
+    },
+  },
+);

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

@@ -0,0 +1,123 @@
+/**
+ * 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 { DisplayItemModel, tExpr } from '@nocobase/flow-engine';
+import { Icon } from '../../../flow-compat';
+import { Tag } from 'antd';
+import React from 'react';
+import { castArray } from 'lodash';
+import { ClickableFieldModel } from './ClickableFieldModel';
+
+interface FieldNames {
+  value: string;
+  label?: string;
+}
+
+interface Option {
+  value: any;
+  label: any;
+}
+
+function getCurrentOptions(value: any | any[], options: any[] = [], fieldNames: FieldNames): Option[] {
+  const values = Array.isArray(value) ? value : [value];
+  return values.map((val) => {
+    const found = options?.find?.((opt) => opt[fieldNames.value] == val);
+    return (
+      found ?? {
+        value: val,
+        label: val?.toString?.() ?? val,
+      }
+    );
+  });
+}
+
+const fieldNames = {
+  label: 'label',
+  value: 'value',
+  color: 'color',
+};
+
+export class DisplayEnumFieldModel extends ClickableFieldModel {
+  isEmpty(value: any) {
+    return value === null || value === undefined || value === '';
+  }
+
+  public renderComponent(value) {
+    const { options = [], dataSource } = this.props;
+    const currentOptions = getCurrentOptions(value, dataSource || options, fieldNames);
+
+    if (this.isEmpty(value) || !currentOptions.length) {
+      return null;
+    }
+    return currentOptions.map((option) => (
+      <Tag key={option[fieldNames.value]} color={option[fieldNames.color]} icon={<Icon type={option['icon']} />}>
+        {this.translate(option[fieldNames.label])}
+      </Tag>
+    ));
+  }
+}
+DisplayEnumFieldModel.define({
+  label: tExpr('Select'),
+});
+
+DisplayEnumFieldModel.registerFlow({
+  key: 'displayCollectionSelectSettings',
+  sort: 6000,
+  steps: {
+    init: {
+      handler(ctx) {
+        if (['collection', 'tableoid'].includes(ctx.collectionField.interface)) {
+          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 = ctx.model.context.collectionField.enum || [];
+            const options = collections
+              .filter((item: any) => !item.options.hidden)
+              .filter((v) => {
+                if (defaultOptions.length) {
+                  return defaultOptions.find((c) => c.value === v.name);
+                }
+                return true;
+              })
+              .map((item: any) => ({
+                label: item.title || item.name,
+                value: item.name || item.value,
+                color: item.category?.color,
+              }));
+            ctx.model.setProps({
+              dataSource: options,
+            });
+          }
+        }
+      },
+    },
+  },
+});
+
+DisplayItemModel.bindModelToInterface(
+  'DisplayEnumFieldModel',
+  ['select', 'multipleSelect', 'radioGroup', 'checkboxGroup', 'collection', 'tableoid'],
+  {
+    isDefault: true,
+  },
+);

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

@@ -0,0 +1,39 @@
+/**
+ * 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 { DisplayItemModel, tExpr } from '@nocobase/flow-engine';
+import React from 'react';
+import { DisplayMarkdown } from '../../internal/components/Markdown/DisplayMarkdown';
+import { DisplayTitleFieldModel } from './DisplayTitleFieldModel';
+
+export class DisplayHtmlFieldModel extends DisplayTitleFieldModel {
+  public renderComponent(value) {
+    const { textOnly = true } = this.props;
+    return <DisplayMarkdown {...this.props} textOnly={textOnly} value={value} />;
+  }
+}
+
+DisplayHtmlFieldModel.define({
+  label: tExpr('HTML'),
+});
+
+DisplayHtmlFieldModel.registerFlow({
+  key: 'htmlFieldSettings',
+  title: tExpr('Content settings'),
+  sort: 200,
+  steps: {
+    renderMode: {
+      use: 'renderMode',
+    },
+  },
+});
+
+DisplayItemModel.bindModelToInterface('DisplayHtmlFieldModel', ['richText'], {
+  isDefault: true,
+});

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

@@ -0,0 +1,24 @@
+/**
+ * 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 { Icon } from '../../../flow-compat';
+import React from 'react';
+import { DisplayItemModel } from '@nocobase/flow-engine';
+import { FieldModel } from '../base/FieldModel';
+
+export class DisplayIconFieldModel extends FieldModel {
+  public render() {
+    const { value, style, className } = this.props;
+    return <Icon type={value} style={style} className={className} />;
+  }
+}
+
+DisplayItemModel.bindModelToInterface('DisplayIconFieldModel', ['icon'], {
+  isDefault: true,
+});

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

@@ -0,0 +1,103 @@
+/**
+ * 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 { css, cx } from '@emotion/css';
+import { DisplayItemModel } from '@nocobase/flow-engine';
+import React, { useRef, useState, useEffect } from 'react';
+import { Tooltip } from 'antd';
+import { DisplayTitleFieldModel } from './DisplayTitleFieldModel';
+
+const JSONClassName = css`
+  margin-bottom: 0;
+  line-height: 1.5;
+  font-size: 90%;
+  background: none !important;
+  border: none !important;
+`;
+
+const EllipsisJSON = ({ content, style, className }) => {
+  const ref = useRef(null);
+  const [overflow, setOverflow] = useState(false);
+
+  useEffect(() => {
+    const el = ref.current;
+    if (el) {
+      // 判断是否溢出
+      setOverflow(el.scrollWidth > el.clientWidth);
+    }
+  }, [content]);
+
+  const node = (
+    <div
+      ref={ref}
+      style={{
+        ...style,
+        whiteSpace: 'nowrap',
+        fontFamily: 'Consolas, Monaco, monospace',
+        overflow: 'hidden',
+        textOverflow: 'ellipsis',
+      }}
+    >
+      {content}
+    </div>
+  );
+
+  return overflow ? (
+    <Tooltip
+      title={
+        <pre style={{ margin: 0, maxHeight: 400 }} className={className}>
+          {content}
+        </pre>
+      }
+      overlayInnerStyle={{
+        background: '#fff',
+        color: '#000',
+        boxShadow: '0 2px 8px rgba(0,0,0,0.15)',
+        maxWidth: 500,
+      }}
+      color="#fff"
+      overlayStyle={{
+        maxWidth: 500, // 控制 tooltip 内容区域最大宽度
+        whiteSpace: 'pre-wrap',
+      }}
+    >
+      {node}
+    </Tooltip>
+  ) : (
+    node
+  );
+};
+
+export class DisplayJSONFieldModel extends DisplayTitleFieldModel {
+  public renderComponent(value) {
+    const { space, style, className, overflowMode } = this.props;
+    let content = '';
+    if (value !== undefined && value !== null) {
+      try {
+        content = JSON.stringify(value, null, space ?? 2);
+      } catch (error) {
+        content = this.flowEngine.translate('Invalid JSON format');
+      }
+    }
+
+    if (overflowMode === 'ellipsis') {
+      return <EllipsisJSON content={content} style={style} className={cx(className, JSONClassName)} />;
+    }
+
+    return (
+      <pre className={cx(className, JSONClassName)} style={style}>
+        {content}
+      </pre>
+    );
+  }
+}
+
+DisplayItemModel.bindModelToInterface('DisplayJSONFieldModel', ['json'], {
+  isDefault: true,
+});

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

@@ -0,0 +1,239 @@
+/**
+ * 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 { useForm } from '@formily/react';
+import { Select } from 'antd';
+import { useTranslation } from 'react-i18next';
+import { tExpr, DisplayItemModel } from '@nocobase/flow-engine';
+import { isValid } from '@formily/shared';
+import { toFixedByStep } from '@nocobase/utils/client';
+import BigNumber from 'bignumber.js';
+import { format } from 'd3-format';
+import * as math from 'mathjs';
+import React, { useMemo } from 'react';
+import { toString } from 'lodash';
+import { ClickableFieldModel } from './ClickableFieldModel';
+
+function countDecimalPlaces(value) {
+  const strValue = toString(value);
+
+  // 检查是否包含小数点
+  if (!strValue.includes('.')) return 0;
+
+  // 获取小数部分并去除末尾的零
+  const decimalPart = strValue.split('.')[1].replace(/0+$/, '');
+
+  return decimalPart.length;
+}
+const separators = {
+  '0,0.00': { thousands: ',', decimal: '.' },
+  '0.0,00': { thousands: '.', decimal: ',' },
+  '0 0,00': { thousands: ' ', decimal: '.' },
+  '0.00': { thousands: '', decimal: '.' }, // 没有千位分隔符
+};
+//分隔符换算
+function formatNumberWithSeparator(value, format = '0.00', step = 1, formatStyle?) {
+  if (value > Number.MAX_SAFE_INTEGER || value < Number.MIN_SAFE_INTEGER) {
+    return formatBigNumberWithSeparator(value, format, step, formatStyle);
+  }
+  let number = value;
+
+  if (formatStyle) {
+    number = Number(value);
+  }
+  let formattedNumber = '';
+
+  if (separators[format]) {
+    const { thousands, decimal } = separators[format];
+    formattedNumber = number
+      .toLocaleString('en-US', {
+        style: 'decimal',
+        minimumFractionDigits: step,
+        maximumFractionDigits: step,
+      })
+      .replace(/,/g, 'comma_placeholder')
+      .replace(/\./g, 'dot_placeholder')
+      .replace(/comma_placeholder/g, thousands)
+      .replace(/dot_placeholder/g, decimal);
+  } else {
+    formattedNumber = number.toString();
+  }
+  return formattedNumber;
+}
+//大字段分隔符换算
+function formatBigNumberWithSeparator(value, format = '0.00', step = 1, formatStyle?) {
+  let number = value;
+
+  if (formatStyle) {
+    number = new BigNumber(value).toString();
+  }
+
+  let formattedNumber = '';
+  if (separators[format]) {
+    const { thousands, decimal } = separators[format];
+    const [integerPart, initFractionalPart] = number.toString().split('.');
+    let fractionalPart = initFractionalPart;
+    // 格式化整数部分
+    const formattedIntegerPart = integerPart.replace(/\B(?=(\d{3})+(?!\d))/g, thousands);
+    // 处理小数部分
+    if (fractionalPart && step) {
+      fractionalPart = fractionalPart.substring(0, step);
+      formattedNumber = `${formattedIntegerPart}${decimal}${fractionalPart}`;
+    } else {
+      formattedNumber = formattedIntegerPart;
+    }
+  } else {
+    formattedNumber = number.toString();
+  }
+  return formattedNumber;
+}
+
+//单位换算
+function formatUnitConversion(value, operator = '*', multiplier?: number) {
+  if (!multiplier) {
+    return value;
+  }
+  let result;
+
+  if (operator === '*') {
+    result = value * multiplier;
+  } else if (operator === '/') {
+    if (multiplier !== 0) {
+      result = value / multiplier;
+    } else {
+      console.error('Error: Division by zero.');
+      return null;
+    }
+  } else {
+    console.error("Error: Invalid operator. Use '*' for multiplication or '/' for division.");
+    return null;
+  }
+
+  return math.round(result, 9);
+}
+
+//科学计数法显示
+function scientificNotation(number, decimalPlaces, separator = '.') {
+  const formatter = format(`.${decimalPlaces}e`);
+  const formattedNumber = formatter(number).replace('.', separator);
+
+  // 匹配科学计数法中的指数部分，判断正负情况
+  const result = formattedNumber.replace(/e([+-]?\d+)/, (match, exponent) => {
+    if (exponent.startsWith('+')) {
+      // 正数指数，不显示符号
+      return `×10<sup>${exponent.slice(1)}</sup>`;
+    } else {
+      // 负数指数，显示 "-" 符号
+      return `×10<sup>-${exponent.slice(1)}</sup>`;
+    }
+  });
+
+  return result;
+}
+
+export function formatNumber(props) {
+  const { step, formatStyle = 'normal', value, unitConversion, unitConversionType, separator = '0,0.00' } = props;
+
+  if (!isValid(value)) {
+    return null;
+  }
+  //单位换算
+  const unitData = formatUnitConversion(value, unitConversionType, unitConversion);
+  //精度换算
+  const precisionData = toFixedByStep(unitData, step);
+  let result;
+  //分隔符换算
+  result = formatNumberWithSeparator(precisionData, separator, countDecimalPlaces(step), formatStyle);
+  if (formatStyle === 'scientifix') {
+    //科学计数显示
+    result = scientificNotation(Number(unitData), countDecimalPlaces(step), separators?.[separator]?.['decimal']);
+  }
+  if (result === 'NaN') {
+    result = value;
+  }
+  return result;
+}
+
+interface displayNumberProps {
+  formatStyle?: 'normal' | 'scientifix';
+  unitConversion?: number;
+  /**
+   * @default '*'
+   */
+  unitConversionType?: '*' | '/';
+  /**
+   * @default '0.00'
+   */
+  separator?: '0,0.00' | '0.0,00' | '0 0,00' | '0.00';
+  numberStep?: number;
+  value?: any;
+  addonBefore?: React.ReactNode;
+  addonAfter?: React.ReactNode;
+}
+
+export const getDisplayNumber = (props: displayNumberProps) => {
+  const { numberStep: step, formatStyle, value, unitConversion, unitConversionType, separator } = props;
+  const result = formatNumber({ step, formatStyle, value, unitConversion, unitConversionType, separator });
+
+  return result;
+};
+
+export class DisplayNumberFieldModel extends ClickableFieldModel {
+  public renderComponent(value) {
+    const { addonBefore, addonAfter, style, className } = this.props;
+    const result = getDisplayNumber({ ...this.props, value });
+    if (!result) {
+      return null;
+    }
+    return (
+      <span className={className} style={style}>
+        {addonBefore}
+        <span dangerouslySetInnerHTML={{ __html: result }} />
+        {addonAfter}
+      </span>
+    );
+  }
+}
+DisplayNumberFieldModel.define({
+  label: tExpr('Number'),
+});
+
+export const UnitConversion = () => {
+  const form = useForm();
+  const { unitConversionType } = form.values;
+  const { t } = useTranslation();
+  return (
+    <Select
+      defaultValue={unitConversionType || '*'}
+      style={{ width: 160 }}
+      onChange={(value) => {
+        form.setValuesIn('unitConversionType', value);
+      }}
+    >
+      <Select.Option value="*">{t('Multiply by')}</Select.Option>
+      <Select.Option value="/">{t('Divide by')}</Select.Option>
+    </Select>
+  );
+};
+
+DisplayNumberFieldModel.registerFlow({
+  key: 'numberSettings',
+  sort: 500,
+  title: tExpr('Number settings'),
+  steps: {
+    format: {
+      title: tExpr('Number format'),
+      use: 'numberFormat',
+    },
+  },
+});
+
+DisplayItemModel.bindModelToInterface('DisplayNumberFieldModel', ['number', 'integer', 'id', 'snowflakeId'], {
+  isDefault: true,
+});

package/src/flow/models/fields/DisplayPasswordFieldModel.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 { DisplayItemModel } from '@nocobase/flow-engine';
+import React from 'react';
+import { FieldModel } from '../base/FieldModel';
+
+export class DisplayPasswordFieldModel extends FieldModel {
+  public render() {
+    const { value, style, className } = this.props;
+    if (!value) {
+      return <div className={className} style={style}></div>;
+    }
+    return (
+      <div className={className} style={style}>
+        ********
+      </div>
+    );
+  }
+}
+
+DisplayItemModel.bindModelToInterface('DisplayPasswordFieldModel', ['password'], {
+  isDefault: true,
+});