File tree Expand file tree Collapse file tree 4 files changed +32
-4
lines changed
packages/pydantic-forms/src Expand file tree Collapse file tree 4 files changed +32
-4
lines changed Original file line number Diff line number Diff line change 1+ ---
2+ ' pydantic-forms ' : patch
3+ ---
4+
5+ Add custom button text and colors
Original file line number Diff line number Diff line change @@ -14,16 +14,22 @@ const Footer = ({
1414 onPrevious,
1515 hasNext,
1616 hasPrevious,
17+ buttons,
1718} : PydanticFormFooterProps ) => {
1819 const t = useTranslations ( 'footer' ) ;
1920 const submitButtonLabel = hasNext ? t ( 'send' ) : t ( 'submit' ) ;
21+ const { next, previous } = buttons || { } ;
22+
2023 const PreviousButton = ( ) => (
2124 < button
2225 type = "button"
2326 onClick = { ( ) => onPrevious ?.( ) }
24- style = { { padding : '12px' } }
27+ style = { {
28+ padding : '12px' ,
29+ backgroundColor : previous ?. color ,
30+ } }
2531 >
26- { t ( 'previous' ) }
32+ { previous ?. text ?? t ( 'previous' ) }
2733 </ button >
2834 ) ;
2935
@@ -40,8 +46,11 @@ const Footer = ({
4046 } ;
4147
4248 const SubmitButton = ( ) => (
43- < button type = "submit" style = { { padding : '12px' } } >
44- { submitButtonLabel }
49+ < button
50+ type = "submit"
51+ style = { { padding : '12px' , backgroundColor : next ?. color } }
52+ >
53+ { next ?. text ?? submitButtonLabel }
4554 </ button >
4655 ) ;
4756
Original file line number Diff line number Diff line change @@ -110,6 +110,8 @@ export const ReactHookForm = ({
110110 handleSubmit ( _ . cloneDeep ( data ) ) ;
111111 } ;
112112
113+ const buttons = defaultValues ?. buttons ?? { } ;
114+
113115 return (
114116 < FormProvider { ...reactHookForm } >
115117 < form onSubmit = { reactHookForm . handleSubmit ( onSubmit ) } >
@@ -123,6 +125,7 @@ export const ReactHookForm = ({
123125 hasNext = { hasNext }
124126 hasPrevious = { hasPrevious }
125127 onPrevious = { onPrevious }
128+ buttons = { buttons }
126129 />
127130 </ form >
128131 </ FormProvider >
Original file line number Diff line number Diff line change @@ -448,11 +448,22 @@ export enum Locale {
448448 nlNL = 'nl-NL' ,
449449}
450450
451+ export type PydanticFormButtonProps = {
452+ text ?: string ;
453+ color ?: string ;
454+ } ;
455+
456+ export type PydanticFormButtons = {
457+ next : PydanticFormButtonProps ;
458+ previous : PydanticFormButtonProps ;
459+ } ;
460+
451461export interface PydanticFormFooterProps {
452462 hasNext : boolean ;
453463 hasPrevious : boolean ;
454464 onCancel ?: ( e ?: React . BaseSyntheticEvent ) => void ;
455465 onPrevious ?: ( ) => void ;
466+ buttons : PydanticFormButtons ;
456467}
457468
458469export interface PydanticFormHeaderProps {
You can’t perform that action at this time.
0 commit comments