feat: added Form Annotation support #2845
Conversation
|
packages/primitives/src/index.js
Outdated
| export const Form = 'FORM'; | ||
| export const FormField = 'FORM_FIELD'; | ||
| export const TextInput = 'TEXT_INPUT'; | ||
| export const FormPushButton = 'FORM_PUSH_BUTTON'; | ||
| export const Picker = 'PICKER'; | ||
| export const FormList = 'FORM_LIST'; |
There was a problem hiding this comment.
What do you think of keeping the initial names of these components to keep them aligned with the form annotation methods of PDFKit?
formText( name, x, y, width, height, options)
formPushButton( name, x, y, width, height, name, options)
formCombo( name, x, y, width, height, options)
formList( name, x, y, width, height, options)
(src)
|
Right now, push buttons don't have any purpose. They are only there to exist. They cannot hold any value. There should be an option for the user to specify an |
Yes, it's beyond this scope. Let's keep it "small" by introducing the first version of form elements first and then improve from there. |
|
Hi @diegomura, what do you think about this feature request? |
There was a problem hiding this comment.
I love this. Thanks so much for putting this together. I'd like to get this merged soon.
Left a small comment about primitive naming.
Also I think we should add docs in the site (https://github.com/diegomura/react-pdf-site) after this lands. Can you take care of them? 🙏🏻 Not a blocker to merge this once we settle on namings
| @@ -8,6 +8,11 @@ export const Note = 'NOTE'; | |||
| export const Path = 'PATH'; | |||
| export const Rect = 'RECT'; | |||
| export const Line = 'LINE'; | |||
| export const FormField = 'FORM_FIELD'; | |||
There was a problem hiding this comment.
Not a strong opinion, but would Form be more semantic? For Field I imagine like an input, but this is actually a form wrapper
There was a problem hiding this comment.
Hi @diegomura,
thanks for your response. Let's see what I suggested here in the past: #2845 (comment). 🤔
My initial thought was to align the names with the ones used in pdfkit (here). So TextInput becomes FormText, Picker becomes FormPicker, and so on. But you made a valid point back in 2022 suggesting we should stick to the native web primitives. I got used to the current names while preparing the PR.
Regarding FormField: I chose the same name as pdfkit mainly to align our (react-pdf) and their (pdfkit) docs and keep them similar. I don't know if that's practical.
There was a problem hiding this comment.
What about something like FormGroup? Form rather sounds like the single and complete set of inputs, but they rather are a subsection. E.g., you could separate billing address and shipping address into two groups.
There was a problem hiding this comment.
Hi @PhilippBloss,
your suggestion makes sense to me, considering what pdfkit states in their docs as well:
Using the formField method you might create a shipping field that is added to the root of the document, an address field that refers to the shipping field as it's parent, and a street Form Annotation that would refer to the address field as it's parent.
What do you think of fieldset(https://developer.mozilla.org/en-US/docs/Web/HTML/Element/fieldset):
The
<fieldset>HTML element is used to group several controls as well as labels (<label>) within a web form.
There was a problem hiding this comment.
Sounds good as well. Would give the decision to @diegomura
There was a problem hiding this comment.
Would take over the docs, except @natterstefan has already started with those
|
|
||
| // see http://pdfkit.org/docs/forms.html#text_field_formatting | ||
| interface TextInputProps extends FormCommonProps { | ||
| align?: string; |
There was a problem hiding this comment.
This can only be either left, center or right. But it's just a small thing
| > {} | ||
|
|
||
| // see http://pdfkit.org/docs/forms.html#text_field_formatting | ||
| interface TextFieldFormatting { |
There was a problem hiding this comment.
Might adjust this interface name as well
|
|
||
| interface PickerAndListProps extends FormCommonProps { | ||
| sort?: boolean; | ||
| edit?: boolean; |
| class TextInput extends React.Component<TextInputProps> {} | ||
|
|
||
| interface CheckboxProps extends FormCommonProps { | ||
| backGroundColor?: string; |
There was a problem hiding this comment.
The g would need to be lower case
|
Would love to see this get merged! I'd love to contribute as well if there's a blocker |
Tasks
Notes
initFormfix by @kjossendal, see feat: add Form Annotation support #2013 (comment)Docs
Example PDF
Example 2.0.pdf