Field Configurator
Components to interact with a Configurable Fieldset, an experience around a visibility toggle for a row and potential actions like required or an overflow menu. Please add yourself to the team-config
slack channel and ask to be subscribed to bug fixes.
Installation
yarn add -E @procore/labs-field-configurator
Importable Components
ConfigurationViewer
Section
FieldConfigurator
SectionDraggingContextProvider
Basic Implementation
ConfigurationViewer
is used to provide edit/read view context for Section
and FieldConfigurator
.
Section
and FieldConfigurator
can be used standalone but generally Section
will have many
FieldConfigurator
as children, with each corresponding to a field from a Configurable FieldSet.
SectionDraggingContextProvider
manages dragging section's id state. See DragDrop
page for usage.
() => {
const initialValues = {
normalField: {
visible: true,
required: false,
},
};
const [fields, setField] = React.useState(initialValues);
const setRequired = (title) => {
setField({
...fields,
[title]: {
...fields[title],
required: !fields[title].required,
},
});
};
const setVisible = (title) => {
setField({
...fields,
[title]: {
...fields[title],
visible: !fields[title].visible,
},
});
};
const [showEdit, toggleEdit] = React.useState(false);
return (
<ConfigurationViewer view={showEdit ? 'edit' : 'show'}>
<Section
initialIsOpen
id="demo"
title="Adjustable Section inheriting from ConfigurationViewer context"
additionalActions={[
{
label: 'test section',
onClick: () => alert('test section clicked!'),
},
{
label: 'hello section',
onClick: () => alert('hello section clicked!'),
},
]}
>
<FieldConfigurator
title="Adjustable FieldConfigurator"
required={fields.normalField.required}
visible={fields.normalField.visible}
description="Section and FieldConfigurator inherits from ConfigurationViewer context"
additionalActions={[
{
label: 'test field',
onClick: () => alert('test field clicked!'),
},
{
label: 'hello field',
onClick: () => alert('hello field clicked!'),
},
]}
onRequiredChange={() => setRequired('normalField')}
onVisibilityChange={() => setVisible('normalField')}
/>
</Section>
<Flex paddingTop="lg" style={{ width: '100%' }} justifyContent="flex-end">
<Button onClick={() => toggleEdit(!showEdit)}>Toggle View</Button>
</Flex>
</ConfigurationViewer>
);
};