@procore/labs-configurable-field-sets
React solution for handling configurable field sets and custom fields.
Last updated 21 days ago by dancingshell .
SEE LICENSE IN LICENSE · Repository · Bugs · Original npm · Tarball · package.json
$ cnpm install @procore/labs-configurable-field-sets 
SYNC missed versions from official npm registry.

Configurable Field Sets

<procore-status adopt />

Components and functions to support Configurable Field Sets and Custom Fields.

Dependencies

This package relies on @procore/core-react and react being external peer dependencies, does not bundle the code, and requires an app client to provide it as a dependency. The external peer dep is to assure React Context is consistent in a client's React tree, the child consumers can reference the correct parent provider.

The client must supply core-react code, the package uses the latest features from core-react and the peer dependency version must be meet.

IE11 Support

Timezone support is partially unavailable for IE 11, which can be restored with date-time-format-timezone polyfill. This package requires the client to include a single polyfill to support IE11. The polyfill is large in size and should only be installed in the app client once.

For the polyfill package above, add the below line to your list of imports

// index
import 'date-time-format-timezone'

A client/package.json should mimic and install at least these dependencies

"dependencies": {
  "@procore/core-react": "<version requirement of lib peerDep>",
  "@procore/labs-configurable-field-sets": "<version>",
  "date-time-format-timezone": "^1.0.22" // version requirement of lib peerDep
}

Styles

The package is built with tsc and has no direct scss support. It can reference Core CSS, e.g. import * as styles from '@procore/core-css/src/components/_input.scss and relies on the client's Core React (Core CSS is included in Core React)

Types

Exposed types for import in a client are available under the CFS namespace.

Testing

When writing and running tests in a client, Jest may fail for unknown import and export syntax.

client/node_modules/@procore/labs-configurable-field-sets/dist/index.js:1
  ({"Object.<anonymous>":function(module,exports,require,__dirname,__filename,global,jest){export var CFS;

Test suite failed to run
  Jest encountered an unexpected token
  This usually means that you are trying to import a file which Jest cannot parse, e.g. it's not plain JavaScript.

To resolve, tell Jest to add transformIgnorePatterns for this package, and possibly for core-react too.

procore.config.js

module.exports = () => ({
  jestOverride(jestConfig) {
    jestConfig.transformIgnorePatterns = [
      "node_modules/(?!(@procore/labs-configurable-field-sets|@procore/core-react)/)"
    ]

    return jestConfig
  },
})

Usage

Relies on Core React context providers in the tree.

import {
  Button,
  Form,
  I18nProvider,
  TextEditorProvider,
} from '@procore/core-react'
import {
  ConfigurableFieldSetProvider,
  ConfigurableFieldSetRow,
  ConfigurableFieldSetCacheProvider,
  ConfigurableFieldSetCustomFieldsSection,
  serializeWithCustomFields
} from '@procore/labs-configurable-field-sets'
<I18nProvider>
  <TextEditorProvider>
    <ConfigurableFieldSetCacheProvider>
      <ConfigurableFieldSetProvider
        projectId={string|number}
        config={{
          id: -1,
          fields: { title: {}, custom_field_1: {} }
        }}
      >
        <Form
          onSubmit={(values, actions) => serializeWithCustomFields(values)}
          initialValues={{
            title: 'Procore Field Value',
            custom_fields: {
              custom_field_1: {
                data_type: 'string',
                value: 'Custom Field Value'
              }
            }
          }}
          view={'create' | 'read' | 'update'}
        >
          <Form.Form>
            <ConfigurableFieldSetRow>
              <Form.Text name="title" label="Title" size="lg" />
            </ConfigurableFieldSetRow>
            <ConfigurableFieldSetRow>
              <Form.Number name="x" label="X" />
              <Form.Checkbox name="y" label="Y" />
            </ConfigurableFieldSetRow>
            <ConfigurableFieldSetCustomFieldsSection
              timeZone={string}
              currencyIdentifier={string}
            />
            <Button type='submit' />
          </Form.Form>
        </Form>
      </ConfigurableFieldSetProvider>
    </ConfigurableFieldSetCacheProvider>
  </TextEditorProvider>
</I18nProvider>

Current Tags

  • 0.4.0-alpha.0                                ...           alpha (8 days ago)
  • 0.4.0-beta.2                                ...           beta (8 days ago)
  • 0.3.0                                ...           latest (21 days ago)

42 Versions

  • 0.4.0-beta.2                                ...           8 days ago
  • 0.4.0-beta.1                                ...           8 days ago
  • 0.4.0-beta.0                                ...           8 days ago
  • 0.4.0-alpha.0                                ...           8 days ago
  • 0.3.0                                ...           21 days ago
  • 0.2.4                                ...           25 days ago
  • 0.2.3                                ...           a month ago
  • 0.2.2                                ...           a month ago
  • 0.2.1                                ...           a month ago
  • 0.2.0                                ...           a month ago
  • 0.1.2                                ...           a month ago
  • 0.1.1                                ...           2 months ago
  • 0.1.0                                ...           3 months ago
  • 0.0.14                                ...           4 months ago
  • 0.0.13                                ...           5 months ago
  • 0.0.12                                ...           5 months ago
  • 0.0.11                                ...           5 months ago
  • 0.0.10                                ...           5 months ago
  • 0.0.10-alpha.0                                ...           5 months ago
  • 0.0.9                                ...           5 months ago
  • 0.0.9-beta.1                                ...           5 months ago
  • 0.0.9-beta.0                                ...           5 months ago
  • 0.0.8                                ...           5 months ago
  • 0.0.8-alpha.0                                ...           5 months ago
  • 0.0.7                                ...           5 months ago
  • 0.0.6                                ...           6 months ago
  • 0.0.5                                ...           6 months ago
  • 0.0.4                                ...           6 months ago
  • 0.0.4-alpha.0                                ...           6 months ago
  • 0.0.3                                ...           6 months ago
  • 0.0.2                                ...           6 months ago
  • 0.0.1                                ...           6 months ago
  • 0.0.1-alpha.9                                ...           7 months ago
  • 0.0.1-alpha.8                                ...           7 months ago
  • 0.0.1-alpha.7                                ...           7 months ago
  • 0.0.1-alpha.6                                ...           7 months ago
  • 0.0.1-alpha.5                                ...           7 months ago
  • 0.0.1-alpha.4                                ...           7 months ago
  • 0.0.1-alpha.3                                ...           7 months ago
  • 0.0.1-alpha.2                                ...           7 months ago
  • 0.0.1-alpha.1                                ...           7 months ago
  • 0.0.1-alpha.0                                ...           7 months ago

Copyright 2014 - 2017 © taobao.org |