FormatPicker

FormatPicker UI Component

Installation

npm i @synerise/ds-format-picker
or
yarn add @synerise/ds-format-picker

Usage

import FormatPicker from '@synerise/ds-format-picker'
<FormatPicker
format={store.state.format}
value={19000.7}
onDataFormatChange={handleDataFormatChange}
onCurrencyChange={handleCurrencyChange}
onUseSeparatorChange={handleUseSeparatorChange}
onCompactNumbersChange={handleCompactNumberChange}
onFixedLengthChange={handleFixedLengthChange}
onSetDefault={handleSetDefault}
/>

Demo

API

PropertyDescriptionTypeDefault
formatFormat configurationFormattingValue-
valueExample valuenumber-
onDataFormatChangeData format change handler(format) => void}-
onCurrencyChangeCurrency change handler(currency: CurrencyType) => void-
onUseSeparatorChangeUse separator change handler(useSeparator: boolean) => void}-
onCompactNumbersChangeCompact numbers change handler(compactNumbers: boolean) => void}-
onFixedLengthChangeFixed length change handler(fixedLength) => void-
onSetDefaultSet default value of format() => void-
textSet of custom labelsTexts-

Texts

PropertyDescriptionTypeDefault
headerHeader of format settingsstring \ React.ReactNodeNumber format
formatFormat labelstring \ React.ReactNodeFormat
numericNumeric type of format tooltipstring \ React.ReactNodeNumeric
cashCash type of format tooltipstring \ React.ReactNodeCash
percentagePercentage type of format tooltipstring \ React.ReactNodePercentage
setDefaultSet default format button labelstring \ React.ReactNodeSet default
useSeparatorUse 1000 separator checkbox labelstring \ React.ReactNodeUse 1000 separator
compactNumbersCompact number checkbox labelstring \ React.ReactNodeCompact humbers

FormattingValue

PropertyDescriptionTypeDefault
dataFormatFormat of dataFormattingDataFormat-
currencySelected currencyCurrencyType-
useSeparatorUse 1000 separatorboolean-
compactNumbersUse compact numbersboolean-
fixedLengthNumber of decimal placesnumber-

CurrencyType

Available values: USD | EUR | PLN | JPY

FormattingDataFormat

Available values: numeric | percent | cash