@procore/labs-field-configurator
A component packed to handle the required and visible properties that come from configurable fieldsets
$ cnpm install @procore/labs-field-configurator 
SYNC missed versions from official npm registry.

Components to interact with a Configurable Fieldset

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
        id='initialIsOpen'
        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>
  )
}

Current Tags

  • 0.9.0                                ...           latest (8 days ago)

16 Versions

  • 0.9.0                                ...           8 days ago
  • 0.8.0                                ...           a month ago
  • 0.7.1                                ...           4 months ago
  • 0.7.0                                ...           4 months ago
  • 0.6.2                                ...           6 months ago
  • 0.6.1                                ...           6 months ago
  • 0.6.0                                ...           6 months ago
  • 0.5.3                                ...           7 months ago
  • 0.5.2                                ...           7 months ago
  • 0.5.1                                ...           7 months ago
  • 0.5.0                                ...           7 months ago
  • 0.4.1                                ...           8 months ago
  • 0.4.0                                ...           8 months ago
  • 0.3.0                                ...           8 months ago
  • 0.2.0                                ...           8 months ago
  • 0.1.0                                ...           8 months ago

Copyright 2014 - 2016 © taobao.org |