LJN Reclame Architecture - Gist 14

FormButton.jsx

import PropTypes from '@ljn/prop-types'
import React, { useCallback, useContext } from 'react'

import { FormContext } from 'components/form/Form'
import { useReclame } from 'core/reclame'

import ButtonBase, { renderRootProps } from './partials'

export const FormButton = (initialProps) => {
	const params = useReclame(FormButton, initialProps, [
		ButtonBase,
		{
			id: 'formButton',
			hook: ({ props }) => {
				const form = useContext(FormContext)
				const oldOnClick = props.onClick
				props.onClick = useCallback(
					(...args) => {
						oldOnClick?.(...args)
						form[props.type]?.(...args)
					},
					[form, oldOnClick, props.type]
				)
				if (props.type === 'submit') {
					props.isDisabled ||= form.submitDisabled
				}
			},
			propTypes: {
				type: PropTypes.oneOf(['submit', 'reset']).isRequired,
				onClick: PropTypes.func,
			},
		},
	])
	const { bem, props } = params

	return (
		<button className={bem.block()} {...renderRootProps(params)}>
			{props.children && <span className={bem.element('inner')}>{props.children}</span>}
		</button>
	)
}

export default FormButton