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

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

@@ -0,0 +1,163 @@
+/**
+ * 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 {
+  ElementProxy,
+  FormItem,
+  createSafeDocument,
+  createSafeWindow,
+  createSafeNavigator,
+  tExpr,
+} from '@nocobase/flow-engine';
+import React from 'react';
+import { CodeEditor } from '../../components/code-editor';
+import { CommonItemModel } from '../base/CommonItemModel';
+import { resolveRunJsParams } from '../utils/resolveRunJsParams';
+
+/**
+ * JSItemModel：表单里的自定义项（非字段绑定），可执行 JS 并渲染到容器中
+ * - 行为与 JSBlockModel 类似，但用于表单网格中的“其他”项
+ * - 默认提供 jsSettings.runJs 自动执行的步骤
+ */
+export class JSItemModel extends CommonItemModel {
+  private _offResourceRefresh?: () => void;
+  private _mountedOnce = false; // prevent first-mount double-run
+
+  getInputArgs() {
+    const inputArgs = {};
+    if (this.context.resource) {
+      const sourceId = this.context.resource.getSourceId();
+      if (sourceId) {
+        inputArgs['sourceId'] = sourceId;
+      }
+    }
+    if (this.context.collection && this.context.record) {
+      const filterByTk = this.context.collection.getFilterByTK(this.context.record);
+      if (filterByTk) {
+        inputArgs['filterByTk'] = filterByTk;
+      }
+    }
+    return inputArgs;
+  }
+
+  render() {
+    return (
+      <FormItem shouldUpdate showLabel={false}>
+        <div ref={this.context.ref} />
+      </FormItem>
+    );
+  }
+
+  /**
+   * 组件挂载后，如果容器引用已就绪，强制重跑一次 beforeRender 以把 HTML 写入当前 DOM。
+   * 解决某些情况下命中旧缓存导致新节点未写入而显示空白的问题。
+   */
+  protected onMount() {
+    const resource = this.context.resource;
+    if (resource) {
+      // 订阅 refresh：详情记录被编辑后通常会触发 refresh，需要重跑 jsSettings
+      const handler = () => {
+        this.applyFlow('jsSettings');
+      };
+      resource.on('refresh', handler);
+      this._offResourceRefresh = () => {
+        resource.off('refresh', handler);
+      };
+    }
+
+    if (this._mountedOnce) {
+      if (this.context.ref?.current) {
+        this.rerender();
+      }
+    }
+    this._mountedOnce = true;
+  }
+
+  protected onUnmount(): void {
+    this._offResourceRefresh?.();
+    this._offResourceRefresh = undefined;
+  }
+}
+
+JSItemModel.define({
+  label: tExpr('JS item'),
+  // 明确指定 createModelOptions，避免在构建压缩后通过类名推断失败
+  createModelOptions: {
+    use: 'JSItemModel',
+  },
+  sort: 120,
+});
+
+JSItemModel.registerFlow({
+  key: 'jsSettings',
+  title: tExpr('JavaScript settings'),
+  steps: {
+    runJs: {
+      title: tExpr('Write JavaScript'),
+      useRawParams: true,
+      uiSchema: {
+        code: {
+          type: 'string',
+          'x-decorator': 'FormItem',
+          'x-component': CodeEditor,
+          'x-component-props': {
+            minHeight: '320px',
+            theme: 'light',
+            enableLinter: true,
+            wrapperStyle: {
+              position: 'fixed',
+              inset: 8,
+            },
+          },
+        },
+      },
+      uiMode: {
+        type: 'embed',
+        props: {
+          styles: {
+            body: {
+              transform: 'translateX(0)',
+            },
+          },
+        },
+      },
+      defaultParams(ctx) {
+        return {
+          version: 'v2',
+          code: `
+function JsItem() {
+  return (
+    <div style={{ fontFamily: "-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif", lineHeight: 1.6 }}>
+      <h3 style={{ color: '#1890ff', margin: '0 0 12px 0', fontSize: 18, fontWeight: 600 }}>JS Item</h3>
+      <div style={{ color: '#555' }}>This area is rendered by your JavaScript code.</div>
+    </div>
+  );
+}
+
+ctx.render(<JsItem />);
+`.trim(),
+        };
+      },
+      async handler(ctx, params) {
+        const { code, version } = resolveRunJsParams(ctx, params);
+        ctx.onRefReady(ctx.ref, async (element) => {
+          ctx.defineProperty('element', {
+            get: () => new ElementProxy(element),
+          });
+          const navigator = createSafeNavigator();
+          await ctx.runjs(
+            code,
+            { window: createSafeWindow({ navigator }), document: createSafeDocument(), navigator },
+            { version },
+          );
+        });
+      },
+    },
+  },
+});

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');
+};