@promaster-sdk/react-properties-selector
v9.0.1
Published
User interface for selecting a valid property value set
Downloads
169
Readme
@promaster-sdk/react-properties-selector
User interface for selecting a valid property value set
:warning: This package is deprecated in favor of the hooks in the @promaster-sdk/react-property-selectors package.
:warning: NOTE: Starting with v9 the component based versions in the
@promaster-sdk/react-property-selectors
package was moved to this package. Legacy applications must now reference those selectors from this package instead.
:warning: NOTE: Starting with v8 the hooks based versions of the selectors were moved to the
@promaster-sdk/react-property-selectors
package. This package now only has component based versions which are all deprecated.
Introduction
A common task in product selection tools is to have an UI that allows the user to make a valid PropertyValueSet
selection for a product given it's PropertyFilter
constraints. This package contains a react components for showing this UI and handling invalid selections.
Installation
npm install --save @promaster-sdk/react-properties-selector
The library is compiled to ES5 and no polyfills are required.
Usage
Usage
ComboboxPropertySelector
<ComboboxPropertySelector
propertyName="..."
valueItems={...}
propertyValueSet={...}
locked={false}
showCodes={true}
sortValidFirst={true}
onValueChange={pv => console.log("onValueChange")}
filterPrettyPrint={filterPrettyPrint}
readOnly={false}
/>
TextboxPropertySelector
<TextboxPropertySelector
propertyName="..."
propertyValueSet={...}
onValueChange={pv => console.log("onValueChange")}
readOnly={false}
debounceTime={600}
/>
CheckboxPropertySelector
<CheckboxPropertySelector
propertyName="..."
valueItems={...}
propertyValueSet={...}
locked={false}
showCodes={true}
onValueChange={pv => console.log("onValueChange")}
filterPrettyPrint={() => ""}
readOnly={false}
/>
AmountPropertySelector
<AmountPropertySelector
fieldName="..."
propertyName="..."
propertyValueSet={...}
inputUnit={...}
inputDecimalCount={...}
onValueChange={pv => console.log("onValueChange)}
filterPrettyPrint={...}
validationFilter={...}
readOnly={false}
isRequiredMessage="Is required"
notNumericMessage="Not numeric"
onFormatChanged={(selectedUnit, selectedDecimalCount) => console.log("onFormatChanged")}
onFormatCleared={() => console.log("onFormatCleared")}
unitsFormat={UnitsFormat}
units={Units}
/>
AmountInputBox
<AmountInputBox
value={...}
inputUnit={...}
inputDecimalCount={...}
onValueChange={amount => console.log("changed")}
readOnly={false}
errorMessage=""
isRequiredMessage="Is required"
notNumericMessage="Not numeric"
debounceTime={350}
/>
AmountFormatSelector
<AmountFormatSelector
selectedUnit={...}
selectedDecimalCount={...}
onFormatChanged={(
selectedUnit: Unit.Unit<any>,
selectedDecimalCount: number
) => console.log(selectedUnit, selectedDecimalCount))}
onFormatCleared={() => console.log("onFormatCleared")}
onFormatSelectorActiveChanged={console.log("Toggle format selector")}
unitsFormat={...}
units={...}
/>
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