diff --git a/src/components/EditGrid/EditGrid.js b/src/components/EditGrid/EditGrid.js new file mode 100644 index 000000000..397fe1d4e --- /dev/null +++ b/src/components/EditGrid/EditGrid.js @@ -0,0 +1,39 @@ +import PropTypes from 'prop-types'; +import React from 'react'; +import {FormattedMessage} from 'react-intl'; + +import OFButton from 'components/Button'; +import FAIcon from 'components/FAIcon'; +import {getBEMClassName} from 'utils'; + +const DefaultAddButtonLabel = () => ( + <> + {' '} + + +); + +const EditGrid = ({children, onAddItem, addButtonLabel}) => ( +
+
{children}
+ + {onAddItem && ( +
+ + {addButtonLabel || } + +
+ )} +
+); + +EditGrid.propTypes = { + children: PropTypes.node.isRequired, + addButtonLabel: PropTypes.node, + onAddItem: PropTypes.func, +}; + +export default EditGrid; diff --git a/src/components/EditGrid/EditGrid.stories.js b/src/components/EditGrid/EditGrid.stories.js new file mode 100644 index 000000000..953e31bb9 --- /dev/null +++ b/src/components/EditGrid/EditGrid.stories.js @@ -0,0 +1,41 @@ +import Body from 'components/Body'; + +import {EditGrid, EditGridItem} from '.'; + +export default { + title: 'Pure React components / EditGrid / EditGrid', + component: EditGrid, + argTypes: { + children: {control: false}, + onAddItem: {control: false}, + }, + args: { + children: ( + <> + + First item + + + Second item + + + ), + }, + parameters: { + controls: {sort: 'requiredFirst'}, + }, +}; + +export const WithAddButton = {}; + +export const WithCustomAddButtonLabel = { + args: { + addButtonLabel: 'Custom add button label', + }, +}; + +export const WithoutAddbutton = { + args: { + onAddItem: undefined, + }, +}; diff --git a/src/components/EditGrid/index.js b/src/components/EditGrid/index.js index 888109945..9f94e8f0b 100644 --- a/src/components/EditGrid/index.js +++ b/src/components/EditGrid/index.js @@ -1,2 +1,3 @@ export {default as EditGridButtonGroup} from './EditGridButtonGroup'; export {default as EditGridItem} from './EditGridItem'; +export {default as EditGrid} from './EditGrid'; diff --git a/src/components/appointments/steps/ChooseProductStep.js b/src/components/appointments/steps/ChooseProductStep.js index 5548b95cd..50691eb86 100644 --- a/src/components/appointments/steps/ChooseProductStep.js +++ b/src/components/appointments/steps/ChooseProductStep.js @@ -10,11 +10,10 @@ import {toFormikValidationSchema} from 'zod-formik-adapter'; import {OFButton} from 'components/Button'; import {CardTitle} from 'components/Card'; -import {EditGridButtonGroup, EditGridItem} from 'components/EditGrid'; +import {EditGrid, EditGridButtonGroup, EditGridItem} from 'components/EditGrid'; import FAIcon from 'components/FAIcon'; import useQuery from 'hooks/useQuery'; import useTitle from 'hooks/useTitle'; -import {getBEMClassName} from 'utils'; import {AppointmentConfigContext} from '../Context'; import {useCreateAppointmentContext} from '../CreateAppointment/CreateAppointmentState'; @@ -61,37 +60,34 @@ const ChooseProductStepFields = ({values: {products = []}, validateForm}) => {
{arrayHelpers => ( -
-
- {products.map(({productId}, index) => ( - // blank blocks don't have a product selected yet -> so the index is added - // to make the key guaranteed unique - arrayHelpers.remove(index))} - > - - - ))} -
- - {supportsMultipleProducts && ( -
- arrayHelpers.push({productId: '', amount: 1}))} - > - - - -
- )} -
+ + {' '} + + + } + onAddItem={ + supportsMultipleProducts && + withValidate(() => arrayHelpers.push({productId: '', amount: 1})) + } + > + {products.map(({productId}, index) => ( + // blank blocks don't have a product selected yet -> so the index is added + // to make the key guaranteed unique + arrayHelpers.remove(index))} + > + + + ))} + )} diff --git a/src/i18n/compiled/en.json b/src/i18n/compiled/en.json index f617a4153..3934b1d00 100644 --- a/src/i18n/compiled/en.json +++ b/src/i18n/compiled/en.json @@ -1175,6 +1175,12 @@ "value": "Your payment is received and processed." } ], + "cKFCTI": [ + { + "type": 0, + "value": "Add another" + } + ], "cxDC/G": [ { "type": 0, diff --git a/src/i18n/compiled/nl.json b/src/i18n/compiled/nl.json index c3d19a3e3..0f06ecefa 100644 --- a/src/i18n/compiled/nl.json +++ b/src/i18n/compiled/nl.json @@ -1179,6 +1179,12 @@ "value": "Uw betaling is ontvangen en verwerkt." } ], + "cKFCTI": [ + { + "type": 0, + "value": "Add another" + } + ], "cxDC/G": [ { "type": 0, diff --git a/src/i18n/messages/en.json b/src/i18n/messages/en.json index 7777efebd..03e72a82a 100644 --- a/src/i18n/messages/en.json +++ b/src/i18n/messages/en.json @@ -544,6 +544,11 @@ "description": "payment registered status", "originalDefault": "Your payment is received and processed." }, + "cKFCTI": { + "defaultMessage": "Add another", + "description": "Edit grid add button, default label text", + "originalDefault": "Add another" + }, "cxDC/G": { "defaultMessage": "The required field is not filled out.", "description": "ZOD 'required' error message", diff --git a/src/i18n/messages/nl.json b/src/i18n/messages/nl.json index 36cd05c53..7ed542f16 100644 --- a/src/i18n/messages/nl.json +++ b/src/i18n/messages/nl.json @@ -550,6 +550,11 @@ "description": "payment registered status", "originalDefault": "Your payment is received and processed." }, + "cKFCTI": { + "defaultMessage": "Add another", + "description": "Edit grid add button, default label text", + "originalDefault": "Add another" + }, "cxDC/G": { "defaultMessage": "Het verplichte veld is niet ingevuld.", "description": "ZOD 'required' error message",