Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat: added Form Annotation support #2845

Open
wants to merge 37 commits into
base: master
Choose a base branch
from
Open

feat: added Form Annotation support #2845

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
37 commits
Select commit Hold shift + click to select a range
eee292a
Adding Form Annotation
axel7083 Sep 8, 2022
e39acab
Adding types
axel7083 Sep 8, 2022
51b4493
Fixing FormField scope issue and adding Unit Test
axel7083 Sep 12, 2022
687aa06
HotFix: Preventing problem in renderFormCombo for accessing node.box
axel7083 Sep 12, 2022
b562369
fix: lint
diegomura Nov 7, 2022
824d05c
Merge remote-tracking branch 'axel7083/master'
runelk Jun 13, 2023
f20153a
Change FormText to TextInput for more consistent naming.
runelk Jun 13, 2023
33ef422
Change FormCombo to Picker for more consistent naming.
runelk Jun 13, 2023
c36d8c9
Fix spelling error.
runelk Jun 13, 2023
24183a0
Merge remote-tracking branch 'runelk/master'
natterstefan Aug 14, 2024
6264795
chore: format code
natterstefan Aug 18, 2024
e6fa36b
test: fixed tests
natterstefan Aug 18, 2024
9f68eaa
fix: fixed types
natterstefan Aug 18, 2024
c6f86f5
fix: fixed issue when using <Form/> multiple times
natterstefan Aug 18, 2024
49322f8
feat: added form example
natterstefan Aug 18, 2024
81b75d2
feat: updated example
natterstefan Aug 18, 2024
8aa7a0a
test: fixed tests
natterstefan Aug 18, 2024
d05e812
feat: updated example
natterstefan Aug 18, 2024
a08b945
feat: added checkbox
natterstefan Aug 19, 2024
c7fb5e2
fix: fixed types
natterstefan Aug 19, 2024
d9a1e84
feat: added multiline example
natterstefan Aug 21, 2024
96e4d7d
feat: added support for checked appearance (Checkbox)
natterstefan Aug 28, 2024
7162e6f
feat: removed Form component, check AcroForm in form components
natterstefan Aug 28, 2024
3dac42b
fixup! fixed obsolete !!this._root.data.AcroForm check
natterstefan Aug 28, 2024
ef4fee3
feat: removed FormPushButton
natterstefan Aug 28, 2024
3e6c660
fixup! removed P.Form
natterstefan Aug 28, 2024
de0c19d
fixup! once more remove leftover code
natterstefan Aug 28, 2024
fd6e5f9
feat: introduced cleanup feature, suggested by @PhilippBloss
natterstefan Aug 28, 2024
43bd666
fix: revert changes in acroform
natterstefan Aug 28, 2024
39cb88a
feat: improved macos appearance
natterstefan Aug 30, 2024
81dc6fa
feat: removed requirement to render TextInput and Checkbox within For…
natterstefan Sep 1, 2024
e1e3726
fix: fixed PDF appearance on macOS (e.g. checked Checkbox)
natterstefan Sep 1, 2024
0868599
feat: applied feedback (types)
natterstefan Dec 5, 2024
2f0c551
Merge remote-tracking branch 'upstream/master' into feat/form-annotation
natterstefan Dec 5, 2024
3409ca1
feat: added example form to next-14 and next-15
natterstefan Dec 6, 2024
1402f9e
test: updated tests and marked two as todo
natterstefan Dec 6, 2024
b6995a3
feat: exported class types
natterstefan Dec 6, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
136 changes: 136 additions & 0 deletions packages/examples/next-14/app/form/page.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,136 @@
'use client';

import dynamic from 'next/dynamic';
import {
Document,
Page,
View,
Text,
Checkbox,
FormField,
TextInput,
Picker,
FormList,
} from '@react-pdf/renderer';

const PDFViewer = dynamic(
() => import('@react-pdf/renderer').then((mod) => mod.PDFViewer),
{
ssr: false,
loading: () => <p>Loading...</p>,
},
);

export default function Form() {
const doc = (
<Document>
<Page>
<View
style={{
backgroundColor: 'rgba(182,28,28,0.62)',
width: '30%',
height: '100%',
}}
>
<FormField name="user-info" style={{ flexDirection: 'column' }}>
<Text>TextInput</Text>
<TextInput
name="username"
value="foo"
align="center"
style={{ height: '50px' }}
/>

{/* Nested works as well */}
<View>
<Text>TextInput</Text>
<TextInput
name="password"
value="bar"
align="center"
style={{ height: '50px' }}
password
/>
</View>

<Text>Checkbox (not checked)</Text>
<Checkbox name="checkbox-default" style={{ height: '20px' }} />

<Text>Checkbox (checked)</Text>
<Checkbox
name="checkbox-checked"
checked
style={{ height: '20px' }}
/>

<Text>Picker</Text>
<Picker
name="combo"
select={['', 'option 1', 'option 2']}
value=""
defaultValue=""
style={{ height: '20px' }}
/>

<Text>FormList</Text>
<FormList
name="list"
select={['', 'option 1', 'option 2']}
value=""
defaultValue=""
style={{ height: '50px' }}
/>
</FormField>
</View>
</Page>

<Page>
<View
style={{
backgroundColor: 'rgba(182,28,28,0.62)',
width: '30%',
height: '100%',
}}
>
<FormField name="user-details" style={{ flexDirection: 'column' }}>
<Text>TextInput (multiline)</Text>
<TextInput
name="details"
value="hello"
align="center"
multiline
style={{ fontSize: 8, height: '100px' }}
/>
</FormField>
</View>
</Page>

<Page>
<View
style={{
backgroundColor: 'rgba(182,28,28,0.62)',
width: '30%',
height: '100%',
}}
>
<Text>TextInput (no FormField)</Text>
<TextInput
name="textinput-no-formfield"
value="no formfield"
align="center"
style={{ height: '50px' }}
/>

<Text>Checkbox (checked, no FormField)</Text>
<Checkbox
name="checkbox-no-formfield"
checked
style={{ height: '20px' }}
/>
</View>
</Page>
</Document>
);

return <PDFViewer className="w-full h-svh">{doc}</PDFViewer>;
}
136 changes: 136 additions & 0 deletions packages/examples/next-15/app/form/page.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,136 @@
'use client';

import dynamic from 'next/dynamic';
import {
Document,
Page,
View,
Text,
Checkbox,
FormField,
TextInput,
Picker,
FormList,
} from '@react-pdf/renderer';

const PDFViewer = dynamic(
() => import('@react-pdf/renderer').then((mod) => mod.PDFViewer),
{
ssr: false,
loading: () => <p>Loading...</p>,
},
);

export default function Form() {
const doc = (
<Document>
<Page>
<View
style={{
backgroundColor: 'rgba(182,28,28,0.62)',
width: '30%',
height: '100%',
}}
>
<FormField name="user-info" style={{ flexDirection: 'column' }}>
<Text>TextInput</Text>
<TextInput
name="username"
value="foo"
align="center"
style={{ height: '50px' }}
/>

{/* Nested works as well */}
<View>
<Text>TextInput</Text>
<TextInput
name="password"
value="bar"
align="center"
style={{ height: '50px' }}
password
/>
</View>

<Text>Checkbox (not checked)</Text>
<Checkbox name="checkbox-default" style={{ height: '20px' }} />

<Text>Checkbox (checked)</Text>
<Checkbox
name="checkbox-checked"
checked
style={{ height: '20px' }}
/>

<Text>Picker</Text>
<Picker
name="combo"
select={['', 'option 1', 'option 2']}
value=""
defaultValue=""
style={{ height: '20px' }}
/>

<Text>FormList</Text>
<FormList
name="list"
select={['', 'option 1', 'option 2']}
value=""
defaultValue=""
style={{ height: '50px' }}
/>
</FormField>
</View>
</Page>

<Page>
<View
style={{
backgroundColor: 'rgba(182,28,28,0.62)',
width: '30%',
height: '100%',
}}
>
<FormField name="user-details" style={{ flexDirection: 'column' }}>
<Text>TextInput (multiline)</Text>
<TextInput
name="details"
value="hello"
align="center"
multiline
style={{ fontSize: 8, height: '100px' }}
/>
</FormField>
</View>
</Page>

<Page>
<View
style={{
backgroundColor: 'rgba(182,28,28,0.62)',
width: '30%',
height: '100%',
}}
>
<Text>TextInput (no FormField)</Text>
<TextInput
name="textinput-no-formfield"
value="no formfield"
align="center"
style={{ height: '50px' }}
/>

<Text>Checkbox (checked, no FormField)</Text>
<Checkbox
name="checkbox-no-formfield"
checked
style={{ height: '20px' }}
/>
</View>
</Page>
</Document>
);

return <PDFViewer className="w-full h-svh">{doc}</PDFViewer>;
}
124 changes: 124 additions & 0 deletions packages/examples/src/form/index.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,124 @@
import React from 'react';
import {
Document,
Page,
View,
Text,
Checkbox,
FormField,
TextInput,
Picker,
FormList,
} from '@react-pdf/renderer';

const FormPdf = () => (
<Document>
<Page>
<View
style={{
backgroundColor: 'rgba(182,28,28,0.62)',
width: '30%',
height: '100%',
}}
>
<FormField name="user-info" style={{ flexDirection: 'column' }}>
<Text>TextInput</Text>
<TextInput
name="username"
value="foo"
align="center"
style={{ height: '50px' }}
/>

{/* Nested works as well */}
<View>
<Text>TextInput</Text>
<TextInput
name="password"
value="bar"
align="center"
style={{ height: '50px' }}
password
/>
</View>

<Text>Checkbox (not checked)</Text>
<Checkbox name="checkbox-default" style={{ height: '20px' }} />

<Text>Checkbox (checked)</Text>
<Checkbox
name="checkbox-checked"
checked
style={{ height: '20px' }}
/>

<Text>Picker</Text>
<Picker
name="combo"
select={['', 'option 1', 'option 2']}
value=""
defaultValue=""
style={{ height: '20px' }}
/>

<Text>FormList</Text>
<FormList
name="list"
select={['', 'option 1', 'option 2']}
value=""
defaultValue=""
style={{ height: '50px' }}
/>
</FormField>
</View>
</Page>

<Page>
<View
style={{
backgroundColor: 'rgba(182,28,28,0.62)',
width: '30%',
height: '100%',
}}
>
<FormField name="user-details" style={{ flexDirection: 'column' }}>
<Text>TextInput (multiline)</Text>
<TextInput
name="details"
value="hello"
align="center"
multiline
style={{ fontSize: 8, height: '100px' }}
/>
</FormField>
</View>
</Page>

<Page>
<View
style={{
backgroundColor: 'rgba(182,28,28,0.62)',
width: '30%',
height: '100%',
}}
>
<Text>TextInput (no FormField)</Text>
<TextInput
name="textinput-no-formfield"
value="no formfield"
align="center"
style={{ height: '50px' }}
/>

<Text>Checkbox (checked, no FormField)</Text>
<Checkbox
name="checkbox-no-formfield"
checked
style={{ height: '20px' }}
/>
</View>
</Page>
</Document>
);

export default FormPdf;
Loading