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>
  );
};