@promaster-sdk/react-property-selectors

@promaster-sdk/react-property-selectors

Hooks for building UI for selection of a single property value.

Introduction

A common task in product selection tools is to have an UI that allows the user to make a valid property value selection. This package contains a react components for showing different UI for selection of a single property, such as a dropdown, textbox etc.

This package uses hooks and prop-getters to create headless UI components. Similar to downshift and react-table.

NOTE: Starting with v7 the old component based versions of the selectors are deprecated. See the old README for info on them.

Installation

npm install --save @promaster-sdk/react-property-selectors

The library is compiled to ES5 and no polyfills are required.

How to run

This is a library of react components so it cannot be run directly. To demonstrate and test the react component react-storybook is used. To start storybook just run:

yarn storybook

Examples

The storybooks stories is currently the best examples how to use this package.

Available hooks

useAmountInputBox

const sel = useAmountInputBox({
  value: state.amount,
  inputUnit: state.selectedUnit,
  inputDecimalCount: state.selectedDecimalCount,
  onValueChange,
  readonly: false,
  errorMessage: "",
  isRequiredMessage: "Is required",
  notNumericMessage: "Not numeric",
  debounceTime: 350,
});

useAmountFormatSelector

const sel = useAmountFormatSelector({
  selectedUnit: state.selectedUnit,
  selectedDecimalCount: state.selectedDecimalCount,
  onFormatChanged: (selectedUnit: Unit.Unit<unknown>, selectedDecimalCount: number) =>
    setState(merge(state, { selectedUnit, selectedDecimalCount })),
  onFormatCleared: () =>
    setState(
      merge(state, {
        selectedUnit: BaseUnits.Meter,
        selectedDecimalCount: 2,
      })
    ),
  unitsFormat: unitsFormat,
  units: units,
});

useAmountPropertySelector

const sel = useAmountPropertySelector({
  fieldName: "a",
  propertyName: "a",
  propertyValueSet: state.propertyValueSet,
  inputUnit: state.selectedUnit,
  inputDecimalCount: state.selectedDecimalCount,
  onValueChange,
  filterPrettyPrint: filterPrettyPrint,
  validationFilter: validationFilter,
  readonly: false,
  isRequiredMessage: "Is required",
  notNumericMessage: "Not numeric",
  onFormatChanged,
  onFormatCleared,
  unitsFormat: unitsFormat,
  units: units,
});

useCheckboxPropertySelector

const sel = useCheckboxPropertySelector({
  propertyName: "a",
  valueItems: valueItems1,
  propertyValueSet: myState,
  locked: false,
  showCodes: true,
  onValueChange: (pv) => setMyState(PropertyValueSet.set("a", pv as PropertyValue.PropertyValue, myState)),

  filterPrettyPrint: () => "",
  readOnly: false,
});

useComboboxPropertySelector

const sel = useComboboxPropertySelector({
  propertyName: "a",
  valueItems: valueItems1,
  propertyValueSet: myState,
  locked: false,
  showCodes: true,
  sortValidFirst: true,

  onValueChange: (pv) => setMyState(PropertyValueSet.set("a", pv as PropertyValue.PropertyValue, myState)),

  filterPrettyPrint: filterPrettyPrint,
  readOnly: false,
});

useImageComboboxPropertySelector

const sel = useImageComboboxPropertySelector({
  propertyName: "b",
  valueItems: valueItems2,
  propertyValueSet: myState,
  locked: false,
  showCodes: true,
  sortValidFirst: true,
  onValueChange: (pv) => setMyState(PropertyValueSet.set("b", pv as PropertyValue.PropertyValue, myState)),

  filterPrettyPrint: filterPrettyPrint,
  readOnly: false,
});

useRadiogroupPropertySelector

const sel = useRadioGroupPropertySelector({
  propertyName: "a",
  valueItems: valueItems1,
  propertyValueSet: state,
  locked: false,
  showCodes: true,
  onValueChange: (pv) => setState(PropertyValueSet.set("a", pv as PropertyValue.PropertyValue, state)),
  filterPrettyPrint: filterPrettyPrint,
  readOnly: false,
});

useTextboxPropertySelector

const { getInputProps } = useTextboxPropertySelector({
  propertyName: "a",
  propertyValueSet: myState,
  onValueChange,
  readOnly: false,
  debounceTime: 600,
});