@procore/labs-locations-picker

Locations Picker Introduction

A Procore universal tiered LocationsPicker.

The LocationsPicker component primary goals are:

1. Consolidated look, feel, and UX of locations picker across all of procore
2. Ease of use, only a projectId, name, value, and onSelect are required to use
3. Remove need to manage location api get and create requests (and location project settings get) manually for each app.
4. Asynchronous loading of tiers, load on scroll, and search to allow infinite scaleability.
5. Allows locations to be by projects with a large number of locations (unusable UX in current iterations without scaleability).

A LocationsPickerField component is also provided that can be used with Core Form's Form.Field component as prop.

Installation

yarn add @procore/labs-locations-picker

Dependencies

@procore/core-react and react are listed as external peer dependencies. The package will not bundle the code, and requires the 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. If the package uses latest features or bug fixes and a new minimum version of core-react is required, it should be considered a breaking change as the peer dependency version must be met.

Usage

import { LocationsPicker } from '@procore/labs-locations-picker';

...

<LocationsPicker
  name="myLocation"
  projectId={31}
  onSelect={setValue}
  value={value}
/>

Can be used as a core Form.Field with all the standard field props and functionality.

import { LocationsPickerField } from '@procore/labs-locations-picker';
import { Form } from '@procore/core-react';

...

<Form initialValues={{
  myLocation: {
    id: 484,
    name: '1st Floor>North Side>111',
    node_name: '111',
    parent_id: 483,
  }
}}>
  <LocationsPickerField
    projectId={31}
    label="My Location"
    name="myLocation"
  />
  <LocationsPickerField.Read
    projectId={31}
    label="My Location"
    name="myLocation"
  />
</Form>