diff --git a/packages/examples/next-14/app/form/page.js b/packages/examples/next-14/app/form/page.js index 45d239732..fee08746f 100644 --- a/packages/examples/next-14/app/form/page.js +++ b/packages/examples/next-14/app/form/page.js @@ -7,7 +7,7 @@ import { View, Text, Checkbox, - FormField, + FieldSet, TextInput, Select, List, @@ -32,7 +32,7 @@ export default function Form() { height: '100%', }} > - +
TextInput - +
@@ -92,7 +92,7 @@ export default function Form() { height: '100%', }} > - +
TextInput (multiline) - +
@@ -113,17 +113,17 @@ export default function Form() { height: '100%', }} > - TextInput (no FormField) + TextInput (no FieldSet) - Checkbox (checked, no FormField) + Checkbox (checked, no FieldSet) diff --git a/packages/examples/next-15/app/form/page.js b/packages/examples/next-15/app/form/page.js index 45d239732..fee08746f 100644 --- a/packages/examples/next-15/app/form/page.js +++ b/packages/examples/next-15/app/form/page.js @@ -7,7 +7,7 @@ import { View, Text, Checkbox, - FormField, + FieldSet, TextInput, Select, List, @@ -32,7 +32,7 @@ export default function Form() { height: '100%', }} > - +
TextInput - +
@@ -92,7 +92,7 @@ export default function Form() { height: '100%', }} > - +
TextInput (multiline) - +
@@ -113,17 +113,17 @@ export default function Form() { height: '100%', }} > - TextInput (no FormField) + TextInput (no FieldSet) - Checkbox (checked, no FormField) + Checkbox (checked, no FieldSet) diff --git a/packages/primitives/src/index.js b/packages/primitives/src/index.js index 4deb3c662..5f2986f1c 100644 --- a/packages/primitives/src/index.js +++ b/packages/primitives/src/index.js @@ -8,7 +8,7 @@ export const Note = 'NOTE'; export const Path = 'PATH'; export const Rect = 'RECT'; export const Line = 'LINE'; -export const FormField = 'FORM_FIELD'; +export const FieldSet = 'FIELD_SET'; export const TextInput = 'TEXT_INPUT'; export const Select = 'SELECT'; export const Checkbox = 'CHECKBOX'; diff --git a/packages/primitives/tests/index.test.js b/packages/primitives/tests/index.test.js index 6c722fdeb..fe556b823 100644 --- a/packages/primitives/tests/index.test.js +++ b/packages/primitives/tests/index.test.js @@ -39,8 +39,8 @@ describe('primitives', () => { expect(primitives.Line).toBeTruthy(); }); - test('should export form field', () => { - expect(primitives.FormField).toBeTruthy(); + test('should export field set', () => { + expect(primitives.FieldSet).toBeTruthy(); }); test('should export text input', () => { diff --git a/packages/render/src/primitives/form/renderFormField.js b/packages/render/src/primitives/form/renderFormField.js deleted file mode 100644 index 64734a207..000000000 --- a/packages/render/src/primitives/form/renderFormField.js +++ /dev/null @@ -1,18 +0,0 @@ -const renderFormField = (ctx, node, options = {}) => { - const name = node.props?.name || ''; - - if (!ctx._root.data.AcroForm) { - ctx.initForm(); - } - - const formField = ctx.formField(name); - const option = options; - if (!option.formFields) option.formFields = [formField]; - else option.formFields.push(formField); -}; - -export const cleanUpFormField = (_ctx, _node, options) => { - options.formFields.pop(); -}; - -export default renderFormField; diff --git a/packages/render/src/primitives/form/renderCheckbox.js b/packages/render/src/primitives/renderCheckbox.js similarity index 65% rename from packages/render/src/primitives/form/renderCheckbox.js rename to packages/render/src/primitives/renderCheckbox.js index ea1fb6378..55009ba36 100644 --- a/packages/render/src/primitives/form/renderCheckbox.js +++ b/packages/render/src/primitives/renderCheckbox.js @@ -1,11 +1,11 @@ -import { parseCheckboxOptions } from '../../utils/parseFormOptions'; +import { parseCheckboxOptions } from '../utils/parseFormOptions'; const renderCheckbox = (ctx, node, options = {}) => { const { top, left, width, height } = node.box || {}; // Element's name const name = node.props?.name || ''; - const formFieldOptions = options.formFields?.at(0); + const fieldSetOptions = options.fieldSets?.at(0); if (!ctx._root.data.AcroForm) { ctx.initForm(); @@ -17,7 +17,7 @@ const renderCheckbox = (ctx, node, options = {}) => { top, width, height, - parseCheckboxOptions(ctx, node, formFieldOptions), + parseCheckboxOptions(ctx, node, fieldSetOptions), ); }; diff --git a/packages/render/src/primitives/renderFieldSet.js b/packages/render/src/primitives/renderFieldSet.js new file mode 100644 index 000000000..5c2198a8d --- /dev/null +++ b/packages/render/src/primitives/renderFieldSet.js @@ -0,0 +1,22 @@ +const renderFieldSet = (ctx, node, options = {}) => { + const name = node.props?.name || ''; + + if (!ctx._root.data.AcroForm) { + ctx.initForm(); + } + + const formField = ctx.formField(name); + const option = options; + + if (!option.fieldSets) { + option.fieldSets = [formField]; + } else { + option.fieldSets.push(formField); + } +}; + +export const cleanUpFieldSet = (_ctx, _node, options) => { + options.fieldSets.pop(); +}; + +export default renderFieldSet; diff --git a/packages/render/src/primitives/form/renderList.js b/packages/render/src/primitives/renderList.js similarity index 81% rename from packages/render/src/primitives/form/renderList.js rename to packages/render/src/primitives/renderList.js index 17c73fad8..de546df97 100644 --- a/packages/render/src/primitives/form/renderList.js +++ b/packages/render/src/primitives/renderList.js @@ -1,4 +1,4 @@ -import { parseSelectAndListFieldOptions } from '../../utils/parseFormOptions'; +import { parseSelectAndListFieldOptions } from '../utils/parseFormOptions'; const renderList = (ctx, node) => { const { top, left, width, height } = node.box || {}; diff --git a/packages/render/src/primitives/renderNode.js b/packages/render/src/primitives/renderNode.js index 26c696169..dcabc2b93 100644 --- a/packages/render/src/primitives/renderNode.js +++ b/packages/render/src/primitives/renderNode.js @@ -12,11 +12,11 @@ import setLink from '../operations/setLink'; import clipNode from '../operations/clipNode'; import transform from '../operations/transform'; import setDestination from '../operations/setDestination'; -import renderTextInput from './form/renderTextInput'; -import renderSelect from './form/renderSelect'; -import renderFormField, { cleanUpFormField } from './form/renderFormField'; -import renderList from './form/renderList'; -import renderCheckbox from './form/renderCheckbox'; +import renderTextInput from './renderTextInput'; +import renderSelect from './renderSelect'; +import renderFieldSet, { cleanUpFieldSet } from './renderFieldSet'; +import renderList from './renderList'; +import renderCheckbox from './renderCheckbox'; const isRecursiveNode = (node) => node.type !== P.Text && node.type !== P.Svg; @@ -40,7 +40,7 @@ const renderFns = { [P.Text]: renderText, [P.Note]: renderNote, [P.Image]: renderImage, - [P.FormField]: renderFormField, + [P.FieldSet]: renderFieldSet, [P.TextInput]: renderTextInput, [P.Select]: renderSelect, [P.Checkbox]: renderCheckbox, @@ -51,7 +51,7 @@ const renderFns = { }; const cleanUpFns = { - [P.FormField]: cleanUpFormField, + [P.FieldSet]: cleanUpFieldSet, }; const renderNode = (ctx, node, options) => { diff --git a/packages/render/src/primitives/form/renderSelect.js b/packages/render/src/primitives/renderSelect.js similarity index 82% rename from packages/render/src/primitives/form/renderSelect.js rename to packages/render/src/primitives/renderSelect.js index 3d455a213..428f135c5 100644 --- a/packages/render/src/primitives/form/renderSelect.js +++ b/packages/render/src/primitives/renderSelect.js @@ -1,4 +1,4 @@ -import { parseSelectAndListFieldOptions } from '../../utils/parseFormOptions'; +import { parseSelectAndListFieldOptions } from '../utils/parseFormOptions'; const renderSelect = (ctx, node) => { const { top, left, width, height } = node.box || {}; diff --git a/packages/render/src/primitives/form/renderTextInput.js b/packages/render/src/primitives/renderTextInput.js similarity index 66% rename from packages/render/src/primitives/form/renderTextInput.js rename to packages/render/src/primitives/renderTextInput.js index 1d5d0b06e..ce5be0aea 100644 --- a/packages/render/src/primitives/form/renderTextInput.js +++ b/packages/render/src/primitives/renderTextInput.js @@ -1,11 +1,11 @@ -import { parseTextFieldOptions } from '../../utils/parseFormOptions'; +import { parseTextFieldOptions } from '../utils/parseFormOptions'; const renderTextInput = (ctx, node, options = {}) => { const { top, left, width, height } = node.box || {}; // Element's name const name = node.props?.name || ''; - const formFieldOptions = options.formFields?.at(0); + const fieldSetOptions = options.fieldSets?.at(0); if (!ctx._root.data.AcroForm) { ctx.initForm(); @@ -17,7 +17,7 @@ const renderTextInput = (ctx, node, options = {}) => { top, width, height, - parseTextFieldOptions(node, formFieldOptions), + parseTextFieldOptions(node, fieldSetOptions), ); }; diff --git a/packages/render/src/utils/parseFormOptions.js b/packages/render/src/utils/parseFormOptions.js index 387c5c76e..50a1041e0 100644 --- a/packages/render/src/utils/parseFormOptions.js +++ b/packages/render/src/utils/parseFormOptions.js @@ -22,10 +22,10 @@ const parseCommonFormOptions = (node) => { }; }; -const parseTextFieldOptions = (node, formField) => { +const parseTextFieldOptions = (node, fieldSet) => { return clean({ ...parseCommonFormOptions(node), - parent: formField || undefined, + parent: fieldSet || undefined, align: node.props?.align || 'left', multiline: node.props?.multiline || undefined, password: node.props?.password || false, @@ -68,7 +68,7 @@ const getAppearance = (ctx, codepoint, width, height) => { return appearance; }; -const parseCheckboxOptions = (ctx, node, formField) => { +const parseCheckboxOptions = (ctx, node, fieldSet) => { const { width, height } = node.box || {}; const onOption = node.props?.onState || 'Yes'; @@ -103,7 +103,7 @@ const parseCheckboxOptions = (ctx, node, formField) => { ...parseCommonFormOptions(node), backgroundColor: node.props?.backgroundColor || undefined, borderColor: node.props?.borderColor || undefined, - parent: formField || undefined, + parent: fieldSet || undefined, value: `/${node.props?.checked === true ? onOption : offOption}`, defaultValue: `/${node.props?.checked === true ? onOption : offOption}`, AS: node.props?.checked === true ? onOption : offOption, diff --git a/packages/render/tests/primitives/renderForm.test.js b/packages/render/tests/primitives/renderForm.test.js index b6e99019b..ad8df7d39 100644 --- a/packages/render/tests/primitives/renderForm.test.js +++ b/packages/render/tests/primitives/renderForm.test.js @@ -2,32 +2,32 @@ import { describe, expect, test } from 'vitest'; import * as P from '@react-pdf/primitives'; import createCTX from '../ctx'; -import renderFormField from '../../src/primitives/form/renderFormField'; +import renderFieldSet from '../../src/primitives/renderFieldSet'; -describe('primitive renderFormField', () => { - test('should render FormField correctly', () => { +describe('primitive renderFieldSet', () => { + test('should render FieldSet correctly', () => { const ctx = createCTX(); const args = 'example'; const props = { name: args }; - const node = { type: P.FormField, props }; + const node = { type: P.FieldSet, props }; - renderFormField(ctx, node); + renderFieldSet(ctx, node); expect(ctx.formField.mock.calls).toHaveLength(1); expect(ctx.formField.mock.calls[0]).toHaveLength(1); expect(ctx.formField.mock.calls[0][0]).toBe(args); }); - test.todo('FormField with one textInput direct child', () => { + test.todo('FieldSet with one textInput direct child', () => { const ctx = createCTX(); - const node = { type: P.FormField, children: [{ type: P.TextInput }] }; + const node = { type: P.FieldSet, children: [{ type: P.TextInput }] }; - renderFormField(ctx, node); + renderFieldSet(ctx, node); expect(ctx.textInput.mock.calls).toHaveLength(1); }); - test.todo('FormField with one TextInput indirect child', () => { + test.todo('FieldSet with one TextInput indirect child', () => { const ctx = createCTX(); const node = { type: P.TextInput, @@ -43,7 +43,7 @@ describe('primitive renderFormField', () => { ], }; - renderFormField(ctx, node); + renderFieldSet(ctx, node); expect(ctx.textInput.mock.calls).toHaveLength(1); }); diff --git a/packages/renderer/index.d.ts b/packages/renderer/index.d.ts index 3974dadcc..9e727d033 100644 --- a/packages/renderer/index.d.ts +++ b/packages/renderer/index.d.ts @@ -244,12 +244,12 @@ declare namespace ReactPDF { defaultValue?: number | string; } - interface FormFieldProps extends NodeProps { + interface FieldSetProps extends NodeProps { name: string; } - export class FormField extends React.Component< - React.PropsWithChildren + export class FieldSet extends React.Component< + React.PropsWithChildren > {} // see http://pdfkit.org/docs/forms.html#text_field_formatting