@nocobase/client-v2 2.1.0-alpha.3 → 2.1.0-alpha.30

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

@@ -0,0 +1,121 @@
+/**
+ * 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 { largeField, EditableItemModel, observer } from '@nocobase/flow-engine';
+import { Input } from 'antd';
+import { cx, css } from '@emotion/css';
+import JSON5 from 'json5';
+import React, { useState, useEffect, useRef } from 'react';
+import { FieldModel } from '../base/FieldModel';
+
+const jsonCss = css`
+  font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
+  font-size: 14px;
+`;
+
+export const JsonInput = observer((props: any) => {
+  const { value, onChange, json5 = false, className, space = 2 } = props;
+  const _JSON = json5 ? JSON5 : JSON;
+  const internalChange = useRef(false);
+  const [text, setText] = useState(
+    typeof value === 'string' ? value : value ? _JSON.stringify(value, null, space) : '',
+  );
+
+  useEffect(() => {
+    if (!internalChange.current) {
+      if (value != null) {
+        if (typeof value === 'string') {
+          setText(value);
+        } else {
+          setText(_JSON.stringify(value, null, space));
+        }
+      } else {
+        setText(undefined);
+      }
+    }
+
+    internalChange.current = false;
+  }, [value]);
+
+  // 用户输入时
+  const handleChange = (ev) => {
+    const val = ev.target.value;
+    setText(val); // 内部状态控制 TextArea，保持光标
+
+    try {
+      const parsed = val.trim() !== '' ? _JSON.parse(val) : null;
+      onChange?.(parsed); // 外部接收对象或 null
+      internalChange.current = true;
+    } catch {
+      internalChange.current = false;
+      onChange?.(ev); // 解析失败传 null
+    }
+  };
+
+  // 失焦时格式化 JSON
+  const handleBlur = (ev) => {
+    const val = ev.target.value;
+    try {
+      const parsed = _JSON.parse(text);
+      setText(_JSON.stringify(parsed, null, space));
+      onChange?.(parsed); // 外部接收对象或 null
+    } catch {
+      onChange?.(val.trim() !== '' ? val : null);
+    }
+  };
+
+  return (
+    <Input.TextArea
+      value={text}
+      onChange={handleChange}
+      onBlur={handleBlur}
+      autoSize={{ minRows: 4, maxRows: 10 }}
+      className={cx(jsonCss, className)}
+    />
+  );
+});
+
+@largeField()
+export class JsonFieldModel extends FieldModel {
+  render() {
+    return <JsonInput {...this.props} />;
+  }
+}
+
+JsonFieldModel.registerFlow({
+  key: 'jsonInitSetting',
+  steps: {
+    initValidation: {
+      handler(ctx, params) {
+        const rules = ctx.model.parent.props.rules || [];
+        // 添加 JSON 语法校验规则
+        rules.push({
+          validator: (_, value) => {
+            // 允许空
+            if (value === null || value === undefined || value === '') return Promise.resolve();
+            // 如果已经是对象/数组，直接通过
+            if (typeof value === 'object') return Promise.resolve();
+            try {
+              JSON.parse(value);
+              return Promise.resolve();
+            } catch (err) {
+              return Promise.reject(ctx.t('Invalid JSON format') + ': ' + err.message);
+            }
+          },
+        });
+        ctx.model.parent.setProps({
+          rules,
+        });
+      },
+    },
+  },
+});
+
+EditableItemModel.bindModelToInterface('JsonFieldModel', ['json'], {
+  isDefault: true,
+});

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

@@ -0,0 +1,68 @@
+/**
+ * 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 { FormItem } from '@nocobase/flow-engine';
+import React from 'react';
+import _ from 'lodash';
+import { CommonItemModel } from '../base/CommonItemModel';
+import { editMarkdownFlow } from '../../flows/editMarkdownFlow';
+
+const MarkdownRenderer = ({ ctx, raw, record }) => {
+  const [html, setHtml] = React.useState(null);
+
+  React.useEffect(() => {
+    let canceled = false;
+
+    const run = async () => {
+      try {
+        // Liquid 渲染
+        const liquid = await ctx.liquid.renderWithFullContext(raw, ctx);
+
+        // Markdown 渲染
+        const md = await ctx.markdown.render(liquid, {
+          textOnly: false,
+        });
+
+        if (!canceled) setHtml(md);
+      } catch (err) {
+        if (!canceled) {
+          setHtml(`<pre>渲染失败: ${err}</pre>`);
+        }
+      }
+    };
+
+    run();
+
+    return () => {
+      canceled = true;
+    };
+  }, [raw, record]);
+  return html;
+};
+
+export class MarkdownItemModel extends CommonItemModel {
+  _previousStepParams: any; // 上一次持久化的 stepParams，用于 preview 时回滚
+
+  render() {
+    const record = this.context.record;
+    const rawContent = this.props.value;
+
+    return (
+      <FormItem shouldUpdate showLabel={false}>
+        <MarkdownRenderer ctx={this.context} raw={rawContent} record={record} />
+      </FormItem>
+    );
+  }
+}
+
+MarkdownItemModel.registerFlow(editMarkdownFlow);
+
+MarkdownItemModel.define({
+  label: '{{t("Markdown")}}',
+});

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

@@ -0,0 +1,68 @@
+/**
+ * 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 { InputNumber as NumberPicker } from 'antd';
+import { InputNumberProps as AntdInputNumberProps } from 'antd';
+import { EditableItemModel, FilterableItemModel } from '@nocobase/flow-engine';
+import BigNumber from 'bignumber.js';
+import { omit } from 'lodash';
+import React from 'react';
+import { FieldModel } from '../base/FieldModel';
+
+function toSafeNumber(value) {
+  if (!value) {
+    return value;
+  }
+  if (value > Number.MAX_SAFE_INTEGER || value < Number.MIN_SAFE_INTEGER) {
+    return new BigNumber(value).toString();
+  } else {
+    return Number(value);
+  }
+}
+
+export const InputNumberField = (props: AntdInputNumberProps) => {
+  const { onChange, ...others } = props;
+  const handleChange = (v) => {
+    if (Number.isNaN(v)) {
+      onChange(null);
+    } else {
+      onChange(toSafeNumber(v));
+    }
+  };
+  const handelCompositionEnd = (v) => {
+    if (Number.isNaN(v) || typeof v === 'object') {
+      props.onCompositionEnd(undefined);
+    } else {
+      props.onCompositionEnd(v);
+    }
+  };
+  let inputNumberProps = {
+    ...others,
+    onChange: handleChange,
+    onCompositionEnd: handelCompositionEnd,
+  };
+
+  if (others['formatStyle']) {
+    inputNumberProps = omit(inputNumberProps, ['addonAfter', 'addonBefore']);
+  }
+  return <NumberPicker {...inputNumberProps} />;
+};
+export class NumberFieldModel extends FieldModel {
+  render() {
+    return <InputNumberField {...this.props} style={{ width: '100%' }} />;
+  }
+}
+
+EditableItemModel.bindModelToInterface('NumberFieldModel', ['number', 'integer', 'id', 'snowflakeId'], {
+  isDefault: true,
+});
+
+FilterableItemModel.bindModelToInterface('NumberFieldModel', ['number', 'integer', 'id', 'snowflakeId'], {
+  isDefault: true,
+});

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

@@ -0,0 +1,53 @@
+/**
+ * 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 { EditableItemModel, tExpr } from '@nocobase/flow-engine';
+import { Password } from '../../../flow-compat';
+import { FieldModel } from '../base/FieldModel';
+
+export class PasswordFieldModel extends FieldModel {
+  render() {
+    return <Password {...this.props} />;
+  }
+}
+
+PasswordFieldModel.registerFlow({
+  key: 'passwordSettings',
+  sort: 1000,
+  title: tExpr('Password settings'),
+  steps: {
+    checkStrength: {
+      title: tExpr('Check strength'),
+      uiMode: { type: 'switch', key: 'checkStrength' },
+      handler(ctx, params) {
+        ctx.model.setProps({ checkStrength: params.checkStrength || false });
+      },
+    },
+    placeholder: {
+      title: tExpr('Placeholder'),
+      uiSchema: {
+        placeholder: {
+          'x-component': 'Input',
+          'x-decorator': 'FormItem',
+          'x-component-props': {
+            placeholder: tExpr('Enter placeholder text'),
+          },
+        },
+      },
+      handler(ctx, params) {
+        ctx.model.setProps({ placeholder: params.placeholder });
+      },
+    },
+  },
+});
+
+EditableItemModel.bindModelToInterface('PasswordFieldModel', ['password'], {
+  isDefault: true,
+});

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

@@ -0,0 +1,53 @@
+/**
+ * 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 { isNum } from '@formily/shared';
+import { InputNumber } from 'antd';
+import React from 'react';
+import * as math from 'mathjs';
+import { useMemo } from 'react';
+import { EditableItemModel, FilterableItemModel } from '@nocobase/flow-engine';
+import { FieldModel } from '../base/FieldModel';
+
+const isNumberLike = (index: any): index is number => isNum(index) || /^-?\d+(\.\d+)?$/.test(index);
+
+const toValue = (value: any, callback: (v: number) => number) => {
+  if (isNumberLike(value)) {
+    return math.round(callback(value), 9);
+  }
+  return null;
+};
+
+export const PercentInput = (props) => {
+  const v = useMemo(() => toValue(props.value, (v) => v * 100), [props.value]);
+  const componentProps = {
+    ...props,
+    value: v,
+    addonAfter: '%',
+    onChange: (v) => {
+      props.onChange(toValue(v, (v) => v / 100));
+    },
+    style: { width: '100%' },
+  };
+  return <InputNumber {...componentProps} />;
+};
+
+export class PercentFieldModel extends FieldModel {
+  render() {
+    return <PercentInput {...this.props} />;
+  }
+}
+
+EditableItemModel.bindModelToInterface('PercentFieldModel', ['percent'], {
+  isDefault: true,
+});
+
+FilterableItemModel.bindModelToInterface('PercentFieldModel', ['percent'], {
+  isDefault: true,
+});

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

@@ -0,0 +1,26 @@
+/**
+ * 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 { Radio } from 'antd';
+import React from 'react';
+import { EditableItemModel, tExpr } from '@nocobase/flow-engine';
+import { FieldModel } from '../base/FieldModel';
+
+export class RadioGroupFieldModel extends FieldModel {
+  render() {
+    return <Radio.Group {...this.props} />;
+  }
+}
+
+RadioGroupFieldModel.define({
+  label: tExpr('RadioGroup'),
+});
+EditableItemModel.bindModelToInterface('RadioGroupFieldModel', ['radioGroup'], {
+  isDefault: true,
+});

package/src/flow/models/fields/RichTextFieldModel/index.tsx

@@ -0,0 +1,115 @@
+/**
+ * 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 { largeField, EditableItemModel } from '@nocobase/flow-engine';
+import { lazy } from '../../../../flow-compat';
+import { useRichTextStyles } from './style';
+import { FieldModel } from '../../base';
+import { registerSmartBreak, lineBreakMatcher, handleEnter, handleLinebreak } from './registerSmartBreak';
+import { registerFontSize } from './registerFontSize';
+import { registerImageResize } from './registerImageResize';
+
+const ReactQuill = lazy(async () => {
+  const Quill = (await import('quill')).default;
+
+  registerFontSize(Quill);
+  registerSmartBreak(Quill);
+  await registerImageResize(Quill);
+
+  return import('react-quill');
+});
+
+export const RichTextField = (props) => {
+  const richTextClass = useRichTextStyles();
+  const boundsClass = React.useMemo(() => `quill-bounds-${Math.random().toString(36).slice(2, 9)}`, []);
+  const modules = {
+    toolbar: [
+      [
+        { header: [1, 2, 3, false] },
+        {
+          size: [false, '12px', '14px', '16px', '18px', '20px', '24px', '32px', '48px'],
+        },
+      ],
+      ['bold', 'italic', 'underline', 'strike'],
+      [{ list: 'ordered' }, { list: 'bullet' }, { indent: '-1' }, { indent: '+1' }, 'link'],
+      ['clean', 'image'],
+    ],
+    // Ignore the registration of imageResize in the test environment to avoid errors
+    ...(process.env.NODE_ENV !== 'test' && {
+      imageResize: {
+        modules: ['Resize', 'DisplaySize'],
+      },
+    }),
+    clipboard: {
+      matchers: [['BR', lineBreakMatcher]],
+      matchVisual: false,
+    },
+    keyboard: {
+      bindings: {
+        handleEnter: {
+          key: 13,
+          handler: handleEnter,
+        },
+        handleLinebreak: {
+          key: 13,
+          shiftKey: true,
+          handler: handleLinebreak,
+        },
+      },
+    },
+  };
+  const formats = [
+    'header',
+    'size',
+    'bold',
+    'italic',
+    'underline',
+    'strike',
+    'blockquote',
+    'list',
+    'bullet',
+    'indent',
+    'link',
+    'image',
+    'width',
+    'height',
+    'break',
+  ];
+  const { value, onChange, disabled, modules: propsModules, formats: propsFormats } = props;
+
+  return (
+    <ReactQuill
+      className={`${richTextClass} ${boundsClass}`}
+      modules={propsModules || modules}
+      formats={propsFormats || formats}
+      value={value}
+      onChange={(value) => {
+        if (value === '<p><br></p>') {
+          onChange('');
+        } else {
+          onChange(value);
+        }
+      }}
+      readOnly={disabled}
+      bounds={`.${boundsClass}`}
+    />
+  );
+};
+
+@largeField()
+export class RichTextFieldModel extends FieldModel {
+  render() {
+    return <RichTextField {...this.props} />;
+  }
+}
+
+EditableItemModel.bindModelToInterface('RichTextFieldModel', ['richText'], {
+  isDefault: true,
+});

package/src/flow/models/fields/RichTextFieldModel/registerFontSize.tsx

@@ -0,0 +1,18 @@
+/**
+ * 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.
+ */
+
+export const registerFontSize = (Quill) => {
+  const SizeStyle = Quill.import('attributors/style/size');
+  SizeStyle.whitelist = ['12px', '14px', '16px', '18px', '20px', '24px', '32px', '48px'];
+  Quill.register(SizeStyle, true);
+
+  // Set the default font size to 14px
+  const Parchment = Quill.import('parchment');
+  SizeStyle.add(Parchment.Scope.BLOCK, '14px');
+};

package/src/flow/models/fields/RichTextFieldModel/registerImageResize.tsx

@@ -0,0 +1,56 @@
+/**
+ * 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.
+ */
+
+export const registerImageResize = async (Quill) => {
+  const { default: ImageResize } = await import('quill-image-resize-module-react');
+  const Image = Quill.import('formats/image');
+
+  class ImageFormat extends Image {
+    static formats(domNode) {
+      const formats = super.formats(domNode);
+      if (domNode.hasAttribute('width')) {
+        formats.width = domNode.getAttribute('width');
+      }
+      if (domNode.hasAttribute('height')) {
+        formats.height = domNode.getAttribute('height');
+      }
+      if (domNode.style.width) {
+        formats.width = domNode.style.width;
+      }
+      if (domNode.style.height) {
+        formats.height = domNode.style.height;
+      }
+      return formats;
+    }
+
+    format(name, value) {
+      if (name === 'width' || name === 'height') {
+        if (value) {
+          this.domNode.setAttribute(name, value);
+          this.domNode.style[name] = value;
+        } else {
+          this.domNode.removeAttribute(name);
+          this.domNode.style[name] = '';
+        }
+      } else {
+        super.format(name, value);
+      }
+    }
+
+    value() {
+      if (this.domNode.style.cursor) {
+        this.domNode.style.cursor = '';
+      }
+      return super.value();
+    }
+  }
+
+  Quill.register(ImageFormat, true);
+  Quill.register('modules/imageResize', ImageResize);
+};

package/src/flow/models/fields/RichTextFieldModel/registerSmartBreak.tsx

@@ -0,0 +1,90 @@
+/**
+ * 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.
+ */
+
+export const registerSmartBreak = (Quill) => {
+  class SmartBreak extends Quill.import('blots/break') {
+    length() {
+      return 1;
+    }
+    value() {
+      return '\n';
+    }
+    insertInto(parent, ref) {
+      Quill.import('blots/embed').prototype.insertInto.call(this, parent, ref);
+    }
+  }
+  SmartBreak.blotName = 'break';
+  SmartBreak.tagName = 'BR';
+  Quill.register(SmartBreak, true);
+};
+
+export function lineBreakMatcher(node, delta) {
+  const Quill = (window as any).Quill;
+  if (!Quill) return delta;
+  const Delta = Quill.import('delta');
+  const newDelta = new Delta();
+  newDelta.insert({ break: '' });
+  return newDelta;
+}
+
+export function handleLinebreak(range, context) {
+  const { quill } = this;
+  const Quill = quill.constructor;
+  const Parchment = Quill.import('parchment');
+  const currentLeaf = quill.getLeaf(range.index)[0];
+  const nextLeaf = quill.getLeaf(range.index + 1)[0];
+  quill.insertEmbed(range.index, 'break', true, 'user');
+
+  if (nextLeaf === null || currentLeaf.parent !== nextLeaf.parent) {
+    quill.insertEmbed(range.index, 'break', true, 'user');
+  }
+  quill.setSelection(range.index + 1, 'silent');
+
+  Object.keys(context.format).forEach((name) => {
+    if (Parchment.query(name, Parchment.Scope.BLOCK)) return;
+    if (Array.isArray(context.format[name])) return;
+    if (name === 'link') return;
+    quill.format(name, context.format[name], 'user');
+  });
+  return false;
+}
+
+export function handleEnter(range, context) {
+  const { quill } = this;
+  const Quill = quill.constructor;
+  const Parchment = Quill.import('parchment');
+
+  if (range.length > 0) {
+    quill.scroll.deleteAt(range.index, range.length);
+  }
+  const lineFormats = Object.keys(context.format).reduce((acc, format) => {
+    if (Parchment.query(format, Parchment.Scope.BLOCK) && !Array.isArray(context.format[format])) {
+      acc[format] = context.format[format];
+    }
+    return acc;
+  }, {});
+
+  const previousChar = quill.getText(range.index - 1, 1);
+
+  quill.insertText(range.index, '\n', lineFormats, 'user');
+
+  if (previousChar == '' || (previousChar == '\n' && !(context.offset > 0 && context.prefix.length === 0))) {
+    quill.setSelection(range.index + 2, 'silent');
+  } else {
+    quill.setSelection(range.index + 1, 'silent');
+  }
+  Object.keys(context.format).forEach((name) => {
+    if (lineFormats[name] != null) return;
+    if (Array.isArray(context.format[name])) return;
+    if (name === 'link') return;
+    quill.format(name, context.format[name], 'user');
+  });
+
+  return false;
+}