@synerise/ds-format-picker NPM

id: format-picker

title: 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

Property	Description	Type	Default
format	Format configuration	FormattingValue	-
value	Example value	number	-
onDataFormatChange	Data format change handler	(format) => void}	-
onCurrencyChange	Currency change handler	(currency: CurrencyType) => void	-
onUseSeparatorChange	Use separator change handler	(useSeparator: boolean) => void}	-
onCompactNumbersChange	Compact numbers change handler	(compactNumbers: boolean) => void}	-
onFixedLengthChange	Fixed length change handler	(fixedLength) => void	-
onSetDefault	Set default value of format	() => void	-
text	Set of custom labels	Texts	-
buttonType	type of button	string	-

Texts

Property	Description	Type	Default
header	Header of format settings	string \ React.ReactNode	`Number format`
format	Format label	string \ React.ReactNode	`Format`
numeric	Numeric type of format tooltip	string \ React.ReactNode	`Numeric`
cash	Cash type of format tooltip	string \ React.ReactNode	`Cash`
percentage	Percentage type of format tooltip	string \ React.ReactNode	`Percentage`
setDefault	Set default format button label	string \ React.ReactNode	`Set default`
useSeparator	Use 1000 separator checkbox label	string \ React.ReactNode	`Use 1000 separator`
compactNumbers	Compact number checkbox label	string \ React.ReactNode	`Compact humbers`

FormattingValue

Property	Description	Type	Default
dataFormat	Format of data	FormattingDataFormat	-
currency	Selected currency	CurrencyType	-
useSeparator	Use 1000 separator	boolean	-
compactNumbers	Use compact numbers	boolean	-
fixedLength	Number of decimal places	number	-

CurrencyType

Available values: USD | EUR | PLN | JPY

FormattingDataFormat

Available values: numeric | percent | cash

@synerise/ds-button @synerise/ds-button-group @synerise/ds-checkbox @synerise/ds-data-format @synerise/ds-dropdown @synerise/ds-icon @synerise/ds-list-item @synerise/ds-radio @synerise/ds-tooltip @synerise/ds-typography @synerise/ds-utils

@infinitebrahmanuniverse/nolb-_syn @everything-registry/sub-chunk-889 @zalastax/nolb-_syn @synerise/design-system

8 months ago

8 months ago

8 months ago

6 months ago

6 months ago

7 months ago

7 months ago

7 months ago

8 months ago

8 months ago

6 months ago

6 months ago

5 months ago

5 months ago

6 months ago

8 months ago

9 months ago

9 months ago

9 months ago

9 months ago

9 months ago

9 months ago

9 months ago

9 months ago

10 months ago

10 months ago

10 months ago

11 months ago

11 months ago

12 months ago

12 months ago

12 months ago

12 months ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago