@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

4 months ago

4 months ago

4 months ago

2 months ago

2 months ago

3 months ago

3 months ago

3 months ago

3 months ago

3 months ago

1 month ago

2 months ago

29 days ago

1 month ago

1 month ago

4 months ago

4 months ago

4 months ago

5 months ago

5 months ago

5 months ago

5 months ago

5 months ago

5 months ago

5 months ago

6 months ago

6 months ago

7 months ago

7 months ago

7 months ago

8 months ago

7 months ago

7 months ago

8 months ago

8 months ago

8 months ago

9 months ago

9 months ago

9 months ago

9 months ago

10 months ago

10 months ago

11 months ago

10 months ago

10 months ago

11 months ago

11 months ago

11 months ago

10 months ago

10 months ago

11 months ago

1 year ago

1 year 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

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

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

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