{"_id":"@cardinal-odp/algo-params-react","_rev":"2-240d29f1b8190f0b91b24b155b184540","name":"@cardinal-odp/algo-params-react","dist-tags":{"latest":"1.0.1"},"versions":{"1.0.0":{"name":"@cardinal-odp/algo-params-react","version":"1.0.0","_id":"@cardinal-odp/algo-params-react@1.0.0","maintainers":[{"name":"yachen121","email":"yachen@shanshu.ai"}],"dist":{"shasum":"ed73c93c22e2fc7ca224f27e7c4f6ed8276898f5","tarball":"https://registry.npmjs.org/@cardinal-odp/algo-params-react/-/algo-params-react-1.0.0.tgz","fileCount":8,"integrity":"sha512-7ppTTdYWhxQ9ZX/ysO1vMuVhlWkpcfWzEzDf4buFYR4IuAVpVjsk0Nm1HdbeOuif2WbGqRsXVFlvlEi0eH4kug==","signatures":[{"sig":"MEYCIQDTgwCUKrkXJGbUwQ5hr5nACc+tKkdXbDnTydvj00i/EwIhAO8dyzX1Kyf9G6TV/GjcN1tcYGlsrb8HSAQeYt64IjPP","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":31903},"main":"./dist/index.mjs","type":"module","_from":"file:cardinal-odp-algo-params-react-1.0.0.tgz","types":"./src/index.d.ts","module":"./dist/index.mjs","exports":{".":{"types":"./src/index.d.ts","default":"./dist/index.mjs"},"./style.css":{"default":"./dist/style.css"}},"scripts":{"test":"node --test ./__tests__/*.test.mjs","build":"pnpm exec unbuild"},"_npmUser":{"name":"yachen121","email":"yachen@shanshu.ai"},"_resolved":"/tmp/f86774cf722d7ce72d2af7ccb2c77233/cardinal-odp-algo-params-react-1.0.0.tgz","_integrity":"sha512-7ppTTdYWhxQ9ZX/ysO1vMuVhlWkpcfWzEzDf4buFYR4IuAVpVjsk0Nm1HdbeOuif2WbGqRsXVFlvlEi0eH4kug==","_npmVersion":"11.6.2","description":"React renderer for the `FcCreateAlgo` schema used in this repo.","directories":{},"sideEffects":["**/*.css"],"_nodeVersion":"24.12.0","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"peerDependencies":{"antd":"^5.0.0","react":"^18.0.0 || ^19.0.0","react-dom":"^18.0.0 || ^19.0.0"},"_npmOperationalInternal":{"tmp":"tmp/algo-params-react_1.0.0_1776835440418_0.9510950595545078","host":"s3://npm-registry-packages-npm-production"}},"1.0.1":{"name":"@cardinal-odp/algo-params-react","version":"1.0.1","type":"module","sideEffects":["**/*.css"],"main":"./dist/index.mjs","module":"./dist/index.mjs","types":"./src/index.d.ts","exports":{".":{"types":"./src/index.d.ts","default":"./dist/index.mjs"},"./style.css":{"default":"./dist/style.css"}},"publishConfig":{"access":"public"},"peerDependencies":{"antd":"^5.0.0","react":"^18.0.0 || ^19.0.0","react-dom":"^18.0.0 || ^19.0.0"},"scripts":{"build":"pnpm exec unbuild","test":"node --test ./__tests__/*.test.mjs"},"_id":"@cardinal-odp/algo-params-react@1.0.1","description":"React renderer for the `rule + option` schema used by `FcCreateAlgo`.","_integrity":"sha512-kwkKO6Hc/t/N4JxaXLnja5NthC6cGg7r5NMJXRU25IjAkc4Vx3smC8oj49/cQA5XbjpDbnAQ2oBUPTrQzyRLzA==","_resolved":"/tmp/f9f93b43f56b4262deb6128f0f55bcd3/cardinal-odp-algo-params-react-1.0.1.tgz","_from":"file:cardinal-odp-algo-params-react-1.0.1.tgz","_nodeVersion":"24.12.0","_npmVersion":"11.6.2","dist":{"integrity":"sha512-kwkKO6Hc/t/N4JxaXLnja5NthC6cGg7r5NMJXRU25IjAkc4Vx3smC8oj49/cQA5XbjpDbnAQ2oBUPTrQzyRLzA==","shasum":"158f3b309c92abb992717d389367a1069a141601","tarball":"https://registry.npmjs.org/@cardinal-odp/algo-params-react/-/algo-params-react-1.0.1.tgz","fileCount":9,"unpackedSize":33872,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEYCIQD9rKLaJ07lPBmi0Ywd8dTdrrmBzyE+RsEfoM6RSki7JgIhAObEdfc8TcUNcfbqfalOZanapAQFOPc2VgnTP9HLtwrj"}]},"_npmUser":{"name":"yachen121","email":"yachen@shanshu.ai"},"directories":{},"maintainers":[{"name":"yachen121","email":"yachen@shanshu.ai"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/algo-params-react_1.0.1_1776855706976_0.4619558399203201"},"_hasShrinkwrap":false}},"time":{"created":"2026-04-22T05:24:00.325Z","modified":"2026-04-22T11:01:47.257Z","1.0.0":"2026-04-22T05:24:00.582Z","1.0.1":"2026-04-22T11:01:47.106Z"},"description":"React renderer for the `rule + option` schema used by `FcCreateAlgo`.","maintainers":[{"name":"yachen121","email":"yachen@shanshu.ai"}],"readme":"# `@cardinal-odp/algo-params-react`\n\nReact renderer for the `rule + option` schema used by `FcCreateAlgo`.\n\nThis package targets `React + Ant Design` projects that need to render the same schema shape as the Vue package. It is not an official `form-create` React renderer; it implements the subset used in this repo.\n\n## Install\n\n```bash\nnpm install @cardinal-odp/algo-params-react react react-dom antd\n```\n\n```ts\nimport '@cardinal-odp/algo-params-react/style.css';\n```\n\n## Usage\n\n```tsx\nimport { Button, Space } from 'antd';\nimport { useRef } from 'react';\n\nimport FcCreateAlgoReact, {\n  type FcCreateAlgoReactExpose,\n} from '@cardinal-odp/algo-params-react';\nimport '@cardinal-odp/algo-params-react/style.css';\n\nconst rule = [\n  {\n    type: 'input',\n    field: 'name',\n    title: '名称',\n    $required: '请输入名称',\n    props: {\n      placeholder: '请输入名称',\n    },\n  },\n  {\n    type: 'select',\n    field: 'status',\n    title: '状态',\n    options: [\n      { label: '启用', value: 'enabled' },\n      { label: '停用', value: 'disabled' },\n    ],\n  },\n];\n\nconst option = {\n  form: {\n    labelCol: { span: 6 },\n    wrapperCol: { span: 18 },\n  },\n  formData: {\n    status: 'enabled',\n  },\n  onSubmit(formData, api) {\n    api.submitResult = {\n      formData,\n      submittedAt: Date.now(),\n    };\n  },\n};\n\nexport default function Demo() {\n  const formRef = useRef<FcCreateAlgoReactExpose>(null);\n\n  const handleSubmit = async () => {\n    const result = await formRef.current?.submit();\n    console.log('submit result', result);\n  };\n\n  const handleInspect = () => {\n    console.log(formRef.current?.getFormData());\n  };\n\n  return (\n    <>\n      <Space style={{ marginBottom: 16 }}>\n        <Button type=\"primary\" onClick={handleSubmit}>\n          Submit\n        </Button>\n        <Button onClick={handleInspect}>Get Schema</Button>\n      </Space>\n\n      <FcCreateAlgoReact\n        ref={formRef}\n        mode=\"edit\"\n        option={option}\n        rule={rule}\n        onChange={(formData) => {\n          console.log('change', formData);\n        }}\n        onSubmit={(result) => {\n          console.log('onSubmit callback', result);\n        }}\n      />\n    </>\n  );\n}\n```\n\n`submit()` first validates the form. If `option.onSubmit` exists, set `api.submitResult` inside that handler; otherwise `submit()` returns the current form values.\n\n## Props\n\n| Prop | Type | Default | Description |\n| --- | --- | --- | --- |\n| `rule` | `any[]` | `[]` | Schema rules |\n| `option` | `Record<string, any>` | `undefined` | Schema option object. `option.form` and `option.formData` are used directly |\n| `mode` | `'edit' \\| 'preview'` | `'preview'` | Editable form or readonly preview |\n| `showInfo` | `boolean` | `true` | Inject tooltip info for fields and `div` title blocks |\n| `infoFormatter` | `(rule) => string` | `undefined` | Custom tooltip content |\n| `emptyText` | `string` | `'暂无表单配置'` | Empty state text |\n| `popupContainer` | `HTMLElement \\| ((triggerNode) => HTMLElement \\| null \\| undefined)` | `undefined` | Popup mount target for label tooltips and popup controls such as `select` / `cascader` / pickers |\n| `controlMaxWidth` | `number \\| string` | `'500px'` | Max width CSS variable for form controls |\n| `onReady` | `(api) => void` | `undefined` | Called when the internal form API is ready |\n| `onChange` | `(formData) => void` | `undefined` | Called on value change |\n| `onSubmit` | `(result) => void` | `undefined` | Called after `submit()` resolves |\n| `onValidate` | `(valid) => void` | `undefined` | Called after `validate()` completes |\n\n## Ref API\n\n```tsx\nconst ref = useRef<FcCreateAlgoReactExpose>(null);\n\nawait ref.current?.validate();\nawait ref.current?.submit();\nref.current?.reset();\nref.current?.setSchema(nextRule, nextOption);\n\nconst schema = ref.current?.getFormData();\nconst api = ref.current?.getApi();\n```\n\n| Method | Description |\n| --- | --- |\n| `validate()` | Runs `form.validateFields()` and returns `Promise<boolean>` |\n| `submit()` | Validates first, then runs `option.onSubmit(formData, api)` when present |\n| `reset()` | Resets the form and reapplies `option.formData` |\n| `getFormData()` | Returns `{ rule, option }` with latest `option.formData` merged in |\n| `getApi()` | Returns the lightweight internal API wrapper |\n| `setSchema(rule, option)` | Replaces the current schema |\n\n## Exported Utilities\n\n```ts\nimport {\n  hasSerializedFunctionMarker,\n  injectFormDataValues,\n  injectInfoToRules,\n  normalizePreviewRules,\n  reviveSerializedFunctions,\n} from '@cardinal-odp/algo-params-react';\n```\n\nThese helpers are pure functions and can be used outside the component.\n\n## Supported Schema Subset\n\nCurrently implemented render types:\n\n- Fields: `input`, `password`, `textarea`, `inputNumber`, `select`, `radio`, `checkbox`, `switch`, `slider`, `cascader`, `datePicker`, `timePicker`\n- Layout / content: `aCard`, `aAlert`, `aDivider`, `aRow`, `row`, `col`, `aSpace`, `space`, `div`\n- Shared behaviors: `option.formData` backfill, info tooltip injection, preview normalization, serialized function revival\n\nThe React renderer also reads `option.form.layout`, `option.form.labelCol`, and `option.form.wrapperCol`.\n\n## Limitations\n\n- This package does not embed Vue `form-create`; it only mirrors part of the schema behavior.\n- Validation support is intentionally narrow. Required validation currently uses `$required`, and `rule.validate` only covers common items such as `pattern`, `email`, `url`, and `minLen`.\n- Advanced `form-create` features such as custom components, slots, linkage, tabs/collapse containers, and framework-specific runtime extensions are not fully implemented.\n\n## Styling\n\nThe package ships a standalone stylesheet.\n\nCustom colors now follow the active Ant Design theme token by default. You can still override them with CSS variables.\n\n```css\n--fc-create-control-max-width\n--fc-create-empty-color\n--fc-create-info-border-color\n--fc-create-info-color\n--fc-create-card-hover-shadow\n--fc-create-shadow-color\n```\n","readmeFilename":"README.md"}