@tecsinapse/react-core 1.20.0 → 1.21.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +23 -0
- package/dist/components/atoms/Avatar/Avatar.d.ts +1 -1
- package/dist/components/atoms/Avatar/Avatar.js +30 -42
- package/dist/components/atoms/Avatar/Avatar.js.map +1 -1
- package/dist/components/atoms/Avatar/Avatar.stories.d.ts +9 -0
- package/dist/components/atoms/Avatar/helpers.js +6 -11
- package/dist/components/atoms/Avatar/helpers.js.map +1 -1
- package/dist/components/atoms/Avatar/styled.js +41 -54
- package/dist/components/atoms/Avatar/styled.js.map +1 -1
- package/dist/components/atoms/Badge/Badge.js +17 -23
- package/dist/components/atoms/Badge/Badge.js.map +1 -1
- package/dist/components/atoms/Badge/styled.js +44 -31
- package/dist/components/atoms/Badge/styled.js.map +1 -1
- package/dist/components/atoms/BoxContent/BoxContent.js +38 -18
- package/dist/components/atoms/BoxContent/BoxContent.js.map +1 -1
- package/dist/components/atoms/BoxContent/BoxContent.stories.d.ts +9 -0
- package/dist/components/atoms/BoxContent/styled.d.ts +1 -1
- package/dist/components/atoms/BoxContent/styled.js +53 -73
- package/dist/components/atoms/BoxContent/styled.js.map +1 -1
- package/dist/components/atoms/Button/Button.js +77 -51
- package/dist/components/atoms/Button/Button.js.map +1 -1
- package/dist/components/atoms/Button/States/BaseState.d.ts +1 -1
- package/dist/components/atoms/Button/States/BaseState.js +27 -36
- package/dist/components/atoms/Button/States/BaseState.js.map +1 -1
- package/dist/components/atoms/Button/States/Error.d.ts +1 -1
- package/dist/components/atoms/Button/States/Error.js +28 -17
- package/dist/components/atoms/Button/States/Error.js.map +1 -1
- package/dist/components/atoms/Button/States/Loading.d.ts +1 -1
- package/dist/components/atoms/Button/States/Loading.js +26 -35
- package/dist/components/atoms/Button/States/Loading.js.map +1 -1
- package/dist/components/atoms/Button/States/Success.d.ts +1 -1
- package/dist/components/atoms/Button/States/Success.js +28 -17
- package/dist/components/atoms/Button/States/Success.js.map +1 -1
- package/dist/components/atoms/Button/States/styled.js +17 -39
- package/dist/components/atoms/Button/States/styled.js.map +1 -1
- package/dist/components/atoms/Button/styled.js +52 -50
- package/dist/components/atoms/Button/styled.js.map +1 -1
- package/dist/components/atoms/Card/Card.js +52 -28
- package/dist/components/atoms/Card/Card.js.map +1 -1
- package/dist/components/atoms/Card/Card.stories.d.ts +9 -0
- package/dist/components/atoms/Card/Footer/Footer.js +10 -21
- package/dist/components/atoms/Card/Footer/Footer.js.map +1 -1
- package/dist/components/atoms/Card/Header/Header.js +10 -21
- package/dist/components/atoms/Card/Header/Header.js.map +1 -1
- package/dist/components/atoms/Card/styled.js +14 -17
- package/dist/components/atoms/Card/styled.js.map +1 -1
- package/dist/components/atoms/Checkbox/Checkbox.js +66 -39
- package/dist/components/atoms/Checkbox/Checkbox.js.map +1 -1
- package/dist/components/atoms/Checkbox/Checkbox.stories.d.ts +9 -0
- package/dist/components/atoms/Checkbox/styled.js +39 -68
- package/dist/components/atoms/Checkbox/styled.js.map +1 -1
- package/dist/components/atoms/Divider/Divider.js +38 -18
- package/dist/components/atoms/Divider/Divider.js.map +1 -1
- package/dist/components/atoms/Divider/Divider.stories.d.ts +9 -0
- package/dist/components/atoms/Divider/styled.js +30 -43
- package/dist/components/atoms/Divider/styled.js.map +1 -1
- package/dist/components/atoms/GroupButton/GroupButton.js +68 -47
- package/dist/components/atoms/GroupButton/GroupButton.js.map +1 -1
- package/dist/components/atoms/GroupButton/GroupButton.stories.d.ts +8 -0
- package/dist/components/atoms/GroupButton/GroupButtonOption.js +16 -23
- package/dist/components/atoms/GroupButton/GroupButtonOption.js.map +1 -1
- package/dist/components/atoms/GroupButton/styled.js +113 -124
- package/dist/components/atoms/GroupButton/styled.js.map +1 -1
- package/dist/components/atoms/Icon/Icon.js +64 -31
- package/dist/components/atoms/Icon/Icon.js.map +1 -1
- package/dist/components/atoms/Icon/Icon.stories.d.ts +9 -0
- package/dist/components/atoms/Icon/helpers.d.ts +2 -2
- package/dist/components/atoms/Icon/helpers.js +110 -77
- package/dist/components/atoms/Icon/helpers.js.map +1 -1
- package/dist/components/atoms/Input/Hint.js +19 -34
- package/dist/components/atoms/Input/Hint.js.map +1 -1
- package/dist/components/atoms/Input/InputContainer/InputContainer.js +81 -44
- package/dist/components/atoms/Input/InputContainer/InputContainer.js.map +1 -1
- package/dist/components/atoms/Input/InputElement/InputElement.js +68 -40
- package/dist/components/atoms/Input/InputElement/InputElement.js.map +1 -1
- package/dist/components/atoms/Input/InputMaskElement/InputMaskElement.js +109 -83
- package/dist/components/atoms/Input/InputMaskElement/InputMaskElement.js.map +1 -1
- package/dist/components/atoms/Input/PressableInputContainer/PressableInputContainer.js +67 -31
- package/dist/components/atoms/Input/PressableInputContainer/PressableInputContainer.js.map +1 -1
- package/dist/components/atoms/Input/PressableInputContainer/styled.js +9 -12
- package/dist/components/atoms/Input/PressableInputContainer/styled.js.map +1 -1
- package/dist/components/atoms/Input/hooks/useInputFocus.d.ts +1 -1
- package/dist/components/atoms/Input/hooks/useInputFocus.js +8 -12
- package/dist/components/atoms/Input/hooks/useInputFocus.js.map +1 -1
- package/dist/components/atoms/Input/hooks/useNumberMask.d.ts +2 -2
- package/dist/components/atoms/Input/hooks/useNumberMask.js +67 -66
- package/dist/components/atoms/Input/hooks/useNumberMask.js.map +1 -1
- package/dist/components/atoms/Input/hooks/useStringMask.d.ts +1 -1
- package/dist/components/atoms/Input/hooks/useStringMask.js +49 -60
- package/dist/components/atoms/Input/hooks/useStringMask.js.map +1 -1
- package/dist/components/atoms/Input/styled.js +106 -144
- package/dist/components/atoms/Input/styled.js.map +1 -1
- package/dist/components/atoms/Paper/Paper.js +47 -21
- package/dist/components/atoms/Paper/Paper.js.map +1 -1
- package/dist/components/atoms/Paper/Paper.stories.d.ts +9 -0
- package/dist/components/atoms/Paper/styled.js +14 -17
- package/dist/components/atoms/Paper/styled.js.map +1 -1
- package/dist/components/atoms/PressableSurface/PressableSurface.js +78 -68
- package/dist/components/atoms/PressableSurface/PressableSurface.js.map +1 -1
- package/dist/components/atoms/ProgressBar/ProgressBar.js +88 -44
- package/dist/components/atoms/ProgressBar/ProgressBar.js.map +1 -1
- package/dist/components/atoms/ProgressBar/ProgressBar.stories.d.ts +9 -0
- package/dist/components/atoms/ProgressBar/styled.js +39 -51
- package/dist/components/atoms/ProgressBar/styled.js.map +1 -1
- package/dist/components/atoms/RadioButton/RadioButton.js +60 -33
- package/dist/components/atoms/RadioButton/RadioButton.js.map +1 -1
- package/dist/components/atoms/RadioButton/RadioButton.stories.d.ts +9 -0
- package/dist/components/atoms/RadioButton/styled.js +28 -44
- package/dist/components/atoms/RadioButton/styled.js.map +1 -1
- package/dist/components/atoms/Switch/Switch.js +94 -73
- package/dist/components/atoms/Switch/Switch.js.map +1 -1
- package/dist/components/atoms/Switch/Switch.stories.d.ts +9 -0
- package/dist/components/atoms/Switch/animation.js +12 -20
- package/dist/components/atoms/Switch/animation.js.map +1 -1
- package/dist/components/atoms/Switch/styled.js +36 -44
- package/dist/components/atoms/Switch/styled.js.map +1 -1
- package/dist/components/atoms/Tag/Tag.js +65 -45
- package/dist/components/atoms/Tag/Tag.js.map +1 -1
- package/dist/components/atoms/Tag/styled.js +43 -63
- package/dist/components/atoms/Tag/styled.js.map +1 -1
- package/dist/components/atoms/Text/Text.js +71 -37
- package/dist/components/atoms/Text/Text.js.map +1 -1
- package/dist/components/atoms/Text/Text.stories.d.ts +9 -0
- package/dist/components/atoms/Text/functions.js +5 -10
- package/dist/components/atoms/Text/functions.js.map +1 -1
- package/dist/components/atoms/Text/styled.js +29 -67
- package/dist/components/atoms/Text/styled.js.map +1 -1
- package/dist/components/atoms/shared/PaperAndCard.d.ts +1 -1
- package/dist/components/atoms/shared/PaperAndCard.js +17 -32
- package/dist/components/atoms/shared/PaperAndCard.js.map +1 -1
- package/dist/components/molecules/Calendar/Calendar.js +148 -98
- package/dist/components/molecules/Calendar/Calendar.js.map +1 -1
- package/dist/components/molecules/Calendar/Calendar.stories.d.ts +8 -0
- package/dist/components/molecules/Calendar/components/MonthWeek.js +92 -125
- package/dist/components/molecules/Calendar/components/MonthWeek.js.map +1 -1
- package/dist/components/molecules/Calendar/components/Weekdays.js +16 -29
- package/dist/components/molecules/Calendar/components/Weekdays.js.map +1 -1
- package/dist/components/molecules/Calendar/styled.js +88 -91
- package/dist/components/molecules/Calendar/styled.js.map +1 -1
- package/dist/components/molecules/DatePicker/DatePicker.js +133 -86
- package/dist/components/molecules/DatePicker/DatePicker.js.map +1 -1
- package/dist/components/molecules/DatePicker/styled.js +34 -40
- package/dist/components/molecules/DatePicker/styled.js.map +1 -1
- package/dist/components/molecules/DateTimePicker/DateTimePicker.js +150 -85
- package/dist/components/molecules/DateTimePicker/DateTimePicker.js.map +1 -1
- package/dist/components/molecules/DateTimePicker/styled.js +10 -18
- package/dist/components/molecules/DateTimePicker/styled.js.map +1 -1
- package/dist/components/molecules/DateTimeSelector/DateTimeSelector.js +174 -146
- package/dist/components/molecules/DateTimeSelector/DateTimeSelector.js.map +1 -1
- package/dist/components/molecules/DateTimeSelector/Selector.js +101 -69
- package/dist/components/molecules/DateTimeSelector/Selector.js.map +1 -1
- package/dist/components/molecules/DateTimeSelector/styled.js +67 -105
- package/dist/components/molecules/DateTimeSelector/styled.js.map +1 -1
- package/dist/components/molecules/Grid/functions.d.ts +1 -1
- package/dist/components/molecules/Grid/functions.js +22 -16
- package/dist/components/molecules/Grid/functions.js.map +1 -1
- package/dist/components/molecules/HintInputContainer/HintInputContainer.js +84 -36
- package/dist/components/molecules/HintInputContainer/HintInputContainer.js.map +1 -1
- package/dist/components/molecules/IconTextButton/IconComponent.js +38 -31
- package/dist/components/molecules/IconTextButton/IconComponent.js.map +1 -1
- package/dist/components/molecules/InputPassword/InputPasswordIcon.js +53 -28
- package/dist/components/molecules/InputPassword/InputPasswordIcon.js.map +1 -1
- package/dist/components/molecules/InputPassword/styled.js +15 -18
- package/dist/components/molecules/InputPassword/styled.js.map +1 -1
- package/dist/components/molecules/Snackbar/Snackbar.d.ts +1 -1
- package/dist/components/molecules/Snackbar/Snackbar.js +64 -71
- package/dist/components/molecules/Snackbar/Snackbar.js.map +1 -1
- package/dist/components/molecules/Snackbar/styled.js +92 -73
- package/dist/components/molecules/Snackbar/styled.js.map +1 -1
- package/dist/components/molecules/TextArea/TextArea.js +63 -72
- package/dist/components/molecules/TextArea/TextArea.js.map +1 -1
- package/dist/components/molecules/TextArea/styled.js +33 -27
- package/dist/components/molecules/TextArea/styled.js.map +1 -1
- package/dist/hooks/useDebouncedState.js +14 -14
- package/dist/hooks/useDebouncedState.js.map +1 -1
- package/dist/hooks/useTheme.js +5 -8
- package/dist/hooks/useTheme.js.map +1 -1
- package/dist/index.js +141 -455
- package/dist/index.js.map +1 -1
- package/dist/styles/ThemeProvider.js +13 -19
- package/dist/styles/ThemeProvider.js.map +1 -1
- package/dist/styles/definitions.js +107 -104
- package/dist/styles/definitions.js.map +1 -1
- package/dist/styles/light.js +47 -36
- package/dist/styles/light.js.map +1 -1
- package/dist/utils/IPhoneXHelper.js +13 -19
- package/dist/utils/IPhoneXHelper.js.map +1 -1
- package/dist/utils/ResponsiveFontSize.d.ts +1 -1
- package/dist/utils/ResponsiveFontSize.js +22 -42
- package/dist/utils/ResponsiveFontSize.js.map +1 -1
- package/dist/utils/extractNumbersFromString.js +6 -11
- package/dist/utils/extractNumbersFromString.js.map +1 -1
- package/dist/utils/formatWithMask.js +23 -20
- package/dist/utils/formatWithMask.js.map +1 -1
- package/dist/utils/lightenDarkenColor.js +19 -15
- package/dist/utils/lightenDarkenColor.js.map +1 -1
- package/dist/utils/masks.js +16 -18
- package/dist/utils/masks.js.map +1 -1
- package/dist/utils/variantComplement.js +24 -25
- package/dist/utils/variantComplement.js.map +1 -1
- package/esm/components/atoms/Avatar/Avatar.d.ts +1 -1
- package/esm/components/atoms/Avatar/Avatar.js +25 -43
- package/esm/components/atoms/Avatar/Avatar.js.map +1 -1
- package/esm/components/atoms/Avatar/helpers.js +6 -8
- package/esm/components/atoms/Avatar/helpers.js.map +1 -1
- package/esm/components/atoms/Avatar/styled.js +32 -30
- package/esm/components/atoms/Avatar/styled.js.map +1 -1
- package/esm/components/atoms/Badge/Badge.js +15 -16
- package/esm/components/atoms/Badge/Badge.js.map +1 -1
- package/esm/components/atoms/Badge/styled.js +34 -15
- package/esm/components/atoms/Badge/styled.js.map +1 -1
- package/esm/components/atoms/BoxContent/BoxContent.js +35 -15
- package/esm/components/atoms/BoxContent/BoxContent.js.map +1 -1
- package/esm/components/atoms/BoxContent/styled.d.ts +3 -16
- package/esm/components/atoms/BoxContent/styled.js +48 -49
- package/esm/components/atoms/BoxContent/styled.js.map +1 -1
- package/esm/components/atoms/Button/Button.js +79 -56
- package/esm/components/atoms/Button/Button.js.map +1 -1
- package/esm/components/atoms/Button/States/BaseState.d.ts +1 -1
- package/esm/components/atoms/Button/States/BaseState.js +22 -22
- package/esm/components/atoms/Button/States/BaseState.js.map +1 -1
- package/esm/components/atoms/Button/States/Error.d.ts +1 -1
- package/esm/components/atoms/Button/States/Error.js +26 -7
- package/esm/components/atoms/Button/States/Error.js.map +1 -1
- package/esm/components/atoms/Button/States/Loading.d.ts +1 -1
- package/esm/components/atoms/Button/States/Loading.js +20 -20
- package/esm/components/atoms/Button/States/Loading.js.map +1 -1
- package/esm/components/atoms/Button/States/Success.d.ts +1 -1
- package/esm/components/atoms/Button/States/Success.js +26 -7
- package/esm/components/atoms/Button/States/Success.js.map +1 -1
- package/esm/components/atoms/Button/States/styled.d.ts +2 -11
- package/esm/components/atoms/Button/States/styled.js +13 -22
- package/esm/components/atoms/Button/States/styled.js.map +1 -1
- package/esm/components/atoms/Button/styled.js +43 -35
- package/esm/components/atoms/Button/styled.js.map +1 -1
- package/esm/components/atoms/Card/Card.js +52 -27
- package/esm/components/atoms/Card/Card.js.map +1 -1
- package/esm/components/atoms/Card/Footer/Footer.js +6 -10
- package/esm/components/atoms/Card/Footer/Footer.js.map +1 -1
- package/esm/components/atoms/Card/Header/Header.js +6 -10
- package/esm/components/atoms/Card/Header/Header.js.map +1 -1
- package/esm/components/atoms/Card/styled.d.ts +1 -8
- package/esm/components/atoms/Card/styled.js +11 -9
- package/esm/components/atoms/Card/styled.js.map +1 -1
- package/esm/components/atoms/Checkbox/Checkbox.js +66 -40
- package/esm/components/atoms/Checkbox/Checkbox.js.map +1 -1
- package/esm/components/atoms/Checkbox/styled.d.ts +3 -7
- package/esm/components/atoms/Checkbox/styled.js +35 -48
- package/esm/components/atoms/Checkbox/styled.js.map +1 -1
- package/esm/components/atoms/Divider/Divider.js +35 -15
- package/esm/components/atoms/Divider/Divider.js.map +1 -1
- package/esm/components/atoms/Divider/styled.d.ts +1 -13
- package/esm/components/atoms/Divider/styled.js +21 -25
- package/esm/components/atoms/Divider/styled.js.map +1 -1
- package/esm/components/atoms/GroupButton/GroupButton.js +83 -62
- package/esm/components/atoms/GroupButton/GroupButton.js.map +1 -1
- package/esm/components/atoms/GroupButton/GroupButtonOption.js +13 -13
- package/esm/components/atoms/GroupButton/GroupButtonOption.js.map +1 -1
- package/esm/components/atoms/GroupButton/styled.js +101 -84
- package/esm/components/atoms/GroupButton/styled.js.map +1 -1
- package/esm/components/atoms/Icon/Icon.js +64 -33
- package/esm/components/atoms/Icon/Icon.js.map +1 -1
- package/esm/components/atoms/Icon/helpers.d.ts +1 -1
- package/esm/components/atoms/Icon/helpers.js +88 -64
- package/esm/components/atoms/Icon/helpers.js.map +1 -1
- package/esm/components/atoms/Input/Hint.js +18 -26
- package/esm/components/atoms/Input/Hint.js.map +1 -1
- package/esm/components/atoms/Input/InputContainer/InputContainer.js +88 -55
- package/esm/components/atoms/Input/InputContainer/InputContainer.js.map +1 -1
- package/esm/components/atoms/Input/InputElement/InputElement.js +64 -34
- package/esm/components/atoms/Input/InputElement/InputElement.js.map +1 -1
- package/esm/components/atoms/Input/InputMaskElement/InputMaskElement.js +102 -87
- package/esm/components/atoms/Input/InputMaskElement/InputMaskElement.js.map +1 -1
- package/esm/components/atoms/Input/PressableInputContainer/PressableInputContainer.js +50 -25
- package/esm/components/atoms/Input/PressableInputContainer/PressableInputContainer.js.map +1 -1
- package/esm/components/atoms/Input/PressableInputContainer/styled.js +6 -5
- package/esm/components/atoms/Input/PressableInputContainer/styled.js.map +1 -1
- package/esm/components/atoms/Input/hooks/useInputFocus.d.ts +1 -1
- package/esm/components/atoms/Input/hooks/useInputFocus.js +11 -26
- package/esm/components/atoms/Input/hooks/useInputFocus.js.map +1 -1
- package/esm/components/atoms/Input/hooks/useNumberMask.d.ts +2 -2
- package/esm/components/atoms/Input/hooks/useNumberMask.js +67 -84
- package/esm/components/atoms/Input/hooks/useNumberMask.js.map +1 -1
- package/esm/components/atoms/Input/hooks/useStringMask.d.ts +1 -1
- package/esm/components/atoms/Input/hooks/useStringMask.js +58 -79
- package/esm/components/atoms/Input/hooks/useStringMask.js.map +1 -1
- package/esm/components/atoms/Input/styled.js +91 -89
- package/esm/components/atoms/Input/styled.js.map +1 -1
- package/esm/components/atoms/Paper/Paper.js +45 -20
- package/esm/components/atoms/Paper/Paper.js.map +1 -1
- package/esm/components/atoms/Paper/styled.d.ts +1 -9
- package/esm/components/atoms/Paper/styled.js +11 -9
- package/esm/components/atoms/Paper/styled.js.map +1 -1
- package/esm/components/atoms/PressableSurface/PressableSurface.js +83 -66
- package/esm/components/atoms/PressableSurface/PressableSurface.js.map +1 -1
- package/esm/components/atoms/ProgressBar/ProgressBar.js +79 -64
- package/esm/components/atoms/ProgressBar/ProgressBar.js.map +1 -1
- package/esm/components/atoms/ProgressBar/styled.js +30 -24
- package/esm/components/atoms/ProgressBar/styled.js.map +1 -1
- package/esm/components/atoms/RadioButton/RadioButton.js +61 -35
- package/esm/components/atoms/RadioButton/RadioButton.js.map +1 -1
- package/esm/components/atoms/RadioButton/styled.js +24 -28
- package/esm/components/atoms/RadioButton/styled.js.map +1 -1
- package/esm/components/atoms/Switch/Switch.js +88 -62
- package/esm/components/atoms/Switch/Switch.js.map +1 -1
- package/esm/components/atoms/Switch/animation.js +7 -5
- package/esm/components/atoms/Switch/animation.js.map +1 -1
- package/esm/components/atoms/Switch/styled.d.ts +2 -14
- package/esm/components/atoms/Switch/styled.js +27 -22
- package/esm/components/atoms/Switch/styled.js.map +1 -1
- package/esm/components/atoms/Tag/Tag.js +69 -63
- package/esm/components/atoms/Tag/Tag.js.map +1 -1
- package/esm/components/atoms/Tag/styled.js +31 -35
- package/esm/components/atoms/Tag/styled.js.map +1 -1
- package/esm/components/atoms/Text/Text.js +72 -43
- package/esm/components/atoms/Text/Text.js.map +1 -1
- package/esm/components/atoms/Text/functions.js +5 -7
- package/esm/components/atoms/Text/functions.js.map +1 -1
- package/esm/components/atoms/Text/styled.d.ts +2 -16
- package/esm/components/atoms/Text/styled.js +19 -43
- package/esm/components/atoms/Text/styled.js.map +1 -1
- package/esm/components/atoms/shared/PaperAndCard.d.ts +1 -3
- package/esm/components/atoms/shared/PaperAndCard.js +16 -20
- package/esm/components/atoms/shared/PaperAndCard.js.map +1 -1
- package/esm/components/molecules/Calendar/Calendar.js +130 -124
- package/esm/components/molecules/Calendar/Calendar.js.map +1 -1
- package/esm/components/molecules/Calendar/components/MonthWeek.js +80 -98
- package/esm/components/molecules/Calendar/components/MonthWeek.js.map +1 -1
- package/esm/components/molecules/Calendar/components/Weekdays.js +19 -25
- package/esm/components/molecules/Calendar/components/Weekdays.js.map +1 -1
- package/esm/components/molecules/Calendar/styled.js +79 -52
- package/esm/components/molecules/Calendar/styled.js.map +1 -1
- package/esm/components/molecules/DatePicker/DatePicker.js +131 -95
- package/esm/components/molecules/DatePicker/DatePicker.js.map +1 -1
- package/esm/components/molecules/DatePicker/styled.js +25 -19
- package/esm/components/molecules/DatePicker/styled.js.map +1 -1
- package/esm/components/molecules/DateTimePicker/DateTimePicker.js +155 -102
- package/esm/components/molecules/DateTimePicker/DateTimePicker.js.map +1 -1
- package/esm/components/molecules/DateTimePicker/styled.js +8 -10
- package/esm/components/molecules/DateTimePicker/styled.js.map +1 -1
- package/esm/components/molecules/DateTimeSelector/DateTimeSelector.js +175 -179
- package/esm/components/molecules/DateTimeSelector/DateTimeSelector.js.map +1 -1
- package/esm/components/molecules/DateTimeSelector/Selector.js +93 -82
- package/esm/components/molecules/DateTimeSelector/Selector.js.map +1 -1
- package/esm/components/molecules/DateTimeSelector/styled.js +54 -52
- package/esm/components/molecules/DateTimeSelector/styled.js.map +1 -1
- package/esm/components/molecules/Grid/functions.d.ts +1 -1
- package/esm/components/molecules/Grid/functions.js +23 -13
- package/esm/components/molecules/Grid/functions.js.map +1 -1
- package/esm/components/molecules/HintInputContainer/HintInputContainer.js +71 -36
- package/esm/components/molecules/HintInputContainer/HintInputContainer.js.map +1 -1
- package/esm/components/molecules/IconTextButton/IconComponent.js +31 -17
- package/esm/components/molecules/IconTextButton/IconComponent.js.map +1 -1
- package/esm/components/molecules/InputPassword/InputPasswordIcon.js +48 -24
- package/esm/components/molecules/InputPassword/InputPasswordIcon.js.map +1 -1
- package/esm/components/molecules/InputPassword/styled.js +12 -9
- package/esm/components/molecules/InputPassword/styled.js.map +1 -1
- package/esm/components/molecules/Snackbar/Snackbar.d.ts +1 -1
- package/esm/components/molecules/Snackbar/Snackbar.js +64 -65
- package/esm/components/molecules/Snackbar/Snackbar.js.map +1 -1
- package/esm/components/molecules/Snackbar/styled.js +84 -48
- package/esm/components/molecules/Snackbar/styled.js.map +1 -1
- package/esm/components/molecules/TextArea/TextArea.js +66 -67
- package/esm/components/molecules/TextArea/TextArea.js.map +1 -1
- package/esm/components/molecules/TextArea/styled.d.ts +2 -12
- package/esm/components/molecules/TextArea/styled.js +25 -12
- package/esm/components/molecules/TextArea/styled.js.map +1 -1
- package/esm/hooks/useDebouncedState.js +13 -28
- package/esm/hooks/useDebouncedState.js.map +1 -1
- package/esm/hooks/useTheme.js +6 -5
- package/esm/hooks/useTheme.js.map +1 -1
- package/esm/index.js +55 -36
- package/esm/index.js.map +1 -1
- package/esm/styles/ThemeProvider.js +10 -9
- package/esm/styles/ThemeProvider.js.map +1 -1
- package/esm/styles/definitions.js +107 -117
- package/esm/styles/definitions.js.map +1 -1
- package/esm/styles/light.js +44 -31
- package/esm/styles/light.js.map +1 -1
- package/esm/utils/IPhoneXHelper.js +11 -9
- package/esm/utils/IPhoneXHelper.js.map +1 -1
- package/esm/utils/ResponsiveFontSize.d.ts +1 -1
- package/esm/utils/ResponsiveFontSize.js +26 -31
- package/esm/utils/ResponsiveFontSize.js.map +1 -1
- package/esm/utils/extractNumbersFromString.js +5 -7
- package/esm/utils/extractNumbersFromString.js.map +1 -1
- package/esm/utils/formatWithMask.js +20 -13
- package/esm/utils/formatWithMask.js.map +1 -1
- package/esm/utils/lightenDarkenColor.js +23 -14
- package/esm/utils/lightenDarkenColor.js.map +1 -1
- package/esm/utils/masks.js +18 -17
- package/esm/utils/masks.js.map +1 -1
- package/esm/utils/variantComplement.js +23 -21
- package/esm/utils/variantComplement.js.map +1 -1
- package/package.json +4 -7
- package/rollup.config.js +36 -0
- package/src/components/atoms/Avatar/Avatar.stories.tsx +2 -3
- package/src/components/atoms/Avatar/Avatar.tsx +1 -1
- package/src/components/atoms/Button/States/BaseState.tsx +1 -1
- package/src/components/atoms/Button/States/Error.tsx +2 -2
- package/src/components/atoms/Button/States/Loading.tsx +1 -1
- package/src/components/atoms/Button/States/Success.tsx +2 -2
- package/src/components/atoms/Icon/Icon.tsx +6 -2
- package/src/components/atoms/Icon/helpers.ts +18 -16
- package/src/components/molecules/Grid/functions.ts +2 -6
- package/src/components/molecules/IconTextButton/IconComponent.tsx +2 -6
- package/src/components/molecules/IconTextButton/{IconTextButton.tsx → IconTextButton.ts} +0 -0
- package/src/components/molecules/Snackbar/Snackbar.tsx +1 -1
- package/tsconfig.build.json +2 -1
- package/babel.config.esm.js +0 -34
- package/dist/components/atoms/Avatar/index.js +0 -16
- package/dist/components/atoms/Avatar/index.js.map +0 -1
- package/dist/components/atoms/Badge/index.js +0 -16
- package/dist/components/atoms/Badge/index.js.map +0 -1
- package/dist/components/atoms/BoxContent/index.js +0 -16
- package/dist/components/atoms/BoxContent/index.js.map +0 -1
- package/dist/components/atoms/Button/States/index.js +0 -32
- package/dist/components/atoms/Button/States/index.js.map +0 -1
- package/dist/components/atoms/Button/index.js +0 -36
- package/dist/components/atoms/Button/index.js.map +0 -1
- package/dist/components/atoms/Card/Footer/index.js +0 -16
- package/dist/components/atoms/Card/Footer/index.js.map +0 -1
- package/dist/components/atoms/Card/Header/index.js +0 -16
- package/dist/components/atoms/Card/Header/index.js.map +0 -1
- package/dist/components/atoms/Card/index.js +0 -16
- package/dist/components/atoms/Card/index.js.map +0 -1
- package/dist/components/atoms/Checkbox/index.js +0 -16
- package/dist/components/atoms/Checkbox/index.js.map +0 -1
- package/dist/components/atoms/Divider/index.js +0 -16
- package/dist/components/atoms/Divider/index.js.map +0 -1
- package/dist/components/atoms/GroupButton/index.js +0 -24
- package/dist/components/atoms/GroupButton/index.js.map +0 -1
- package/dist/components/atoms/Icon/index.js +0 -16
- package/dist/components/atoms/Icon/index.js.map +0 -1
- package/dist/components/atoms/Input/PressableInputContainer/index.js +0 -16
- package/dist/components/atoms/Input/PressableInputContainer/index.js.map +0 -1
- package/dist/components/atoms/Input/index.js +0 -113
- package/dist/components/atoms/Input/index.js.map +0 -1
- package/dist/components/atoms/Paper/index.js +0 -16
- package/dist/components/atoms/Paper/index.js.map +0 -1
- package/dist/components/atoms/PressableSurface/index.js +0 -16
- package/dist/components/atoms/PressableSurface/index.js.map +0 -1
- package/dist/components/atoms/ProgressBar/index.js +0 -16
- package/dist/components/atoms/ProgressBar/index.js.map +0 -1
- package/dist/components/atoms/RadioButton/index.js +0 -16
- package/dist/components/atoms/RadioButton/index.js.map +0 -1
- package/dist/components/atoms/Switch/index.js +0 -16
- package/dist/components/atoms/Switch/index.js.map +0 -1
- package/dist/components/atoms/Tag/index.js +0 -16
- package/dist/components/atoms/Tag/index.js.map +0 -1
- package/dist/components/atoms/Text/index.js +0 -16
- package/dist/components/atoms/Text/index.js.map +0 -1
- package/dist/components/molecules/Calendar/components/index.js +0 -24
- package/dist/components/molecules/Calendar/components/index.js.map +0 -1
- package/dist/components/molecules/Calendar/index.js +0 -16
- package/dist/components/molecules/Calendar/index.js.map +0 -1
- package/dist/components/molecules/DatePicker/index.js +0 -16
- package/dist/components/molecules/DatePicker/index.js.map +0 -1
- package/dist/components/molecules/DateTimePicker/index.js +0 -16
- package/dist/components/molecules/DateTimePicker/index.js.map +0 -1
- package/dist/components/molecules/DateTimeSelector/index.js +0 -16
- package/dist/components/molecules/DateTimeSelector/index.js.map +0 -1
- package/dist/components/molecules/Grid/index.js +0 -20
- package/dist/components/molecules/Grid/index.js.map +0 -1
- package/dist/components/molecules/HintInputContainer/index.js +0 -16
- package/dist/components/molecules/HintInputContainer/index.js.map +0 -1
- package/dist/components/molecules/HintInputContainer/styled.js +0 -2
- package/dist/components/molecules/HintInputContainer/styled.js.map +0 -1
- package/dist/components/molecules/IconTextButton/IconTextButton.js +0 -6
- package/dist/components/molecules/IconTextButton/IconTextButton.js.map +0 -1
- package/dist/components/molecules/IconTextButton/index.js +0 -16
- package/dist/components/molecules/IconTextButton/index.js.map +0 -1
- package/dist/components/molecules/IconTextButton/styled.d.ts +0 -4
- package/dist/components/molecules/IconTextButton/styled.js +0 -29
- package/dist/components/molecules/IconTextButton/styled.js.map +0 -1
- package/dist/components/molecules/InputPassword/index.js +0 -16
- package/dist/components/molecules/InputPassword/index.js.map +0 -1
- package/dist/components/molecules/LabeledSwitch/LabeledSwitch.js +0 -6
- package/dist/components/molecules/LabeledSwitch/LabeledSwitch.js.map +0 -1
- package/dist/components/molecules/LabeledSwitch/index.js +0 -6
- package/dist/components/molecules/LabeledSwitch/index.js.map +0 -1
- package/dist/components/molecules/Snackbar/index.js +0 -16
- package/dist/components/molecules/Snackbar/index.js.map +0 -1
- package/dist/components/molecules/TextArea/index.js +0 -24
- package/dist/components/molecules/TextArea/index.js.map +0 -1
- package/dist/hooks/index.js +0 -22
- package/dist/hooks/index.js.map +0 -1
- package/dist/types/defaults.js +0 -6
- package/dist/types/defaults.js.map +0 -1
- package/dist/utils/index.js +0 -103
- package/dist/utils/index.js.map +0 -1
- package/esm/components/atoms/Avatar/index.js +0 -2
- package/esm/components/atoms/Avatar/index.js.map +0 -1
- package/esm/components/atoms/Badge/index.js +0 -2
- package/esm/components/atoms/Badge/index.js.map +0 -1
- package/esm/components/atoms/BoxContent/index.js +0 -2
- package/esm/components/atoms/BoxContent/index.js.map +0 -1
- package/esm/components/atoms/Button/States/index.js +0 -4
- package/esm/components/atoms/Button/States/index.js.map +0 -1
- package/esm/components/atoms/Button/index.js +0 -3
- package/esm/components/atoms/Button/index.js.map +0 -1
- package/esm/components/atoms/Card/Footer/index.js +0 -2
- package/esm/components/atoms/Card/Footer/index.js.map +0 -1
- package/esm/components/atoms/Card/Header/index.js +0 -2
- package/esm/components/atoms/Card/Header/index.js.map +0 -1
- package/esm/components/atoms/Card/index.js +0 -2
- package/esm/components/atoms/Card/index.js.map +0 -1
- package/esm/components/atoms/Checkbox/index.js +0 -2
- package/esm/components/atoms/Checkbox/index.js.map +0 -1
- package/esm/components/atoms/Divider/index.js +0 -2
- package/esm/components/atoms/Divider/index.js.map +0 -1
- package/esm/components/atoms/GroupButton/index.js +0 -3
- package/esm/components/atoms/GroupButton/index.js.map +0 -1
- package/esm/components/atoms/Icon/index.js +0 -2
- package/esm/components/atoms/Icon/index.js.map +0 -1
- package/esm/components/atoms/Input/PressableInputContainer/index.js +0 -2
- package/esm/components/atoms/Input/PressableInputContainer/index.js.map +0 -1
- package/esm/components/atoms/Input/index.js +0 -10
- package/esm/components/atoms/Input/index.js.map +0 -1
- package/esm/components/atoms/Paper/index.js +0 -2
- package/esm/components/atoms/Paper/index.js.map +0 -1
- package/esm/components/atoms/PressableSurface/index.js +0 -2
- package/esm/components/atoms/PressableSurface/index.js.map +0 -1
- package/esm/components/atoms/ProgressBar/index.js +0 -2
- package/esm/components/atoms/ProgressBar/index.js.map +0 -1
- package/esm/components/atoms/RadioButton/index.js +0 -2
- package/esm/components/atoms/RadioButton/index.js.map +0 -1
- package/esm/components/atoms/Switch/index.js +0 -2
- package/esm/components/atoms/Switch/index.js.map +0 -1
- package/esm/components/atoms/Tag/index.js +0 -2
- package/esm/components/atoms/Tag/index.js.map +0 -1
- package/esm/components/atoms/Text/index.js +0 -2
- package/esm/components/atoms/Text/index.js.map +0 -1
- package/esm/components/molecules/Calendar/components/index.js +0 -3
- package/esm/components/molecules/Calendar/components/index.js.map +0 -1
- package/esm/components/molecules/Calendar/index.js +0 -2
- package/esm/components/molecules/Calendar/index.js.map +0 -1
- package/esm/components/molecules/DatePicker/index.js +0 -2
- package/esm/components/molecules/DatePicker/index.js.map +0 -1
- package/esm/components/molecules/DateTimePicker/index.js +0 -2
- package/esm/components/molecules/DateTimePicker/index.js.map +0 -1
- package/esm/components/molecules/DateTimeSelector/index.js +0 -2
- package/esm/components/molecules/DateTimeSelector/index.js.map +0 -1
- package/esm/components/molecules/Grid/index.js +0 -2
- package/esm/components/molecules/Grid/index.js.map +0 -1
- package/esm/components/molecules/HintInputContainer/index.js +0 -2
- package/esm/components/molecules/HintInputContainer/index.js.map +0 -1
- package/esm/components/molecules/HintInputContainer/styled.js +0 -2
- package/esm/components/molecules/HintInputContainer/styled.js.map +0 -1
- package/esm/components/molecules/IconTextButton/IconTextButton.js +0 -2
- package/esm/components/molecules/IconTextButton/IconTextButton.js.map +0 -1
- package/esm/components/molecules/IconTextButton/index.js +0 -2
- package/esm/components/molecules/IconTextButton/index.js.map +0 -1
- package/esm/components/molecules/IconTextButton/styled.d.ts +0 -11
- package/esm/components/molecules/IconTextButton/styled.js +0 -14
- package/esm/components/molecules/IconTextButton/styled.js.map +0 -1
- package/esm/components/molecules/InputPassword/index.js +0 -2
- package/esm/components/molecules/InputPassword/index.js.map +0 -1
- package/esm/components/molecules/LabeledSwitch/LabeledSwitch.js +0 -2
- package/esm/components/molecules/LabeledSwitch/LabeledSwitch.js.map +0 -1
- package/esm/components/molecules/LabeledSwitch/index.js +0 -2
- package/esm/components/molecules/LabeledSwitch/index.js.map +0 -1
- package/esm/components/molecules/Snackbar/index.js +0 -2
- package/esm/components/molecules/Snackbar/index.js.map +0 -1
- package/esm/components/molecules/TextArea/index.js +0 -3
- package/esm/components/molecules/TextArea/index.js.map +0 -1
- package/esm/hooks/index.js +0 -3
- package/esm/hooks/index.js.map +0 -1
- package/esm/types/defaults.js +0 -2
- package/esm/types/defaults.js.map +0 -1
- package/esm/utils/index.js +0 -8
- package/esm/utils/index.js.map +0 -1
- package/src/components/molecules/IconTextButton/styled.ts +0 -20
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"PressableSurface.js","
|
|
1
|
+
{"version":3,"file":"PressableSurface.js","sources":["../../../../src/components/atoms/PressableSurface/PressableSurface.tsx"],"sourcesContent":["import { useTheme } from '@emotion/react';\nimport React, { FC } from 'react';\nimport { Pressable, PressableProps, StyleProp, ViewStyle } from 'react-native';\nimport { ThemeProp } from '../../../types/defaults';\nimport { lightenDarkenColor } from '../../../utils';\n\nconst COLOR_VARIATION_FACTOR = 25;\n\nexport interface PressableSurfaceProps extends PressableProps {\n effect?: 'darken' | 'lighten' | 'none';\n surfaceColor?: string;\n effectIntensity?: number;\n effectStyle?: (pressed: boolean) => StyleProp<ViewStyle>;\n}\n\nconst PressableSurface: FC<PressableSurfaceProps> = ({\n children,\n surfaceColor,\n effect,\n effectIntensity,\n effectStyle,\n style,\n ...rest\n}) => {\n const theme = useTheme() as ThemeProp;\n let effectBaseColor = theme.miscellaneous.surfaceColor;\n let bgColor = 'transparent';\n\n if (surfaceColor) {\n effectBaseColor = surfaceColor;\n bgColor = effectBaseColor;\n }\n\n const readyStyle = prepareStyle(\n { effect, effectIntensity, style, effectStyle },\n effectBaseColor,\n bgColor\n );\n return (\n <Pressable {...rest} style={readyStyle}>\n {children}\n </Pressable>\n );\n};\n\nconst prepareStyle = (\n props: PressableSurfaceProps,\n effectColor: string,\n bgColor: string\n): any => {\n const {\n effect = 'darken',\n effectIntensity = COLOR_VARIATION_FACTOR,\n style,\n effectStyle,\n } = props;\n\n const lighten = lightenDarkenColor(effectColor, effectIntensity);\n const darken = lightenDarkenColor(effectColor, -effectIntensity);\n const composedStyle = [{ backgroundColor: bgColor }, style];\n\n if (effectStyle) {\n return ({ pressed }) => [composedStyle, effectStyle(pressed)];\n }\n\n switch (effect) {\n case 'darken':\n return applyEffectStyle(composedStyle, darken);\n\n case 'lighten':\n return applyEffectStyle(composedStyle, lighten);\n\n case 'none':\n return composedStyle;\n }\n};\n\nconst applyEffectStyle = (style: any, variation: string) => {\n return ({ pressed }) => [style, pressed && { backgroundColor: variation }];\n};\n\nexport default PressableSurface;\n"],"names":["useTheme","React","Pressable","lightenDarkenColor"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAMA,MAAM,sBAAyB,GAAA,EAAA,CAAA;AASzB,MAAA,gBAAA,GAA8C,CAAC,EAQ/C,KAAA;AAR+C,EACnD,IAAA,EAAA,GAAA,EAAA,EAAA;AAAA,IAAA,QAAA;AAAA,IACA,YAAA;AAAA,IACA,MAAA;AAAA,IACA,eAAA;AAAA,IACA,WAAA;AAAA,IACA,KAAA;AAAA,GArBF,GAeqD,EAOhD,EAAA,IAAA,GAAA,SAAA,CAPgD,EAOhD,EAAA;AAAA,IANH,UAAA;AAAA,IACA,cAAA;AAAA,IACA,QAAA;AAAA,IACA,iBAAA;AAAA,IACA,aAAA;AAAA,IACA,OAAA;AAAA,GAAA,CAAA,CAAA;AAGA,EAAA,MAAM,QAAQA,cAAS,EAAA,CAAA;AACvB,EAAI,IAAA,eAAA,GAAkB,MAAM,aAAc,CAAA,YAAA,CAAA;AAC1C,EAAA,IAAI,OAAU,GAAA,aAAA,CAAA;AAEd,EAAA,IAAI,YAAc,EAAA;AAChB,IAAkB,eAAA,GAAA,YAAA,CAAA;AAClB,IAAU,OAAA,GAAA,eAAA,CAAA;AAAA,GACZ;AAEA,EAAA,MAAM,UAAa,GAAA,YAAA;AAAA,IACjB,EAAE,MAAA,EAAQ,eAAiB,EAAA,KAAA,EAAO,WAAY,EAAA;AAAA,IAC9C,eAAA;AAAA,IACA,OAAA;AAAA,GACF,CAAA;AACA,EACE,uBAAAC,yBAAA,CAAA,aAAA,CAACC,wDAAc,IAAd,CAAA,EAAA;AAAA,IAAoB,KAAO,EAAA,UAAA;AAAA,GAAA,CAAA,EACzB,QACH,CAAA,CAAA;AAEJ,EAAA;AAEA,MAAM,YAAe,GAAA,CACnB,KACA,EAAA,WAAA,EACA,OACQ,KAAA;AACR,EAAM,MAAA;AAAA,IACJ,MAAS,GAAA,QAAA;AAAA,IACT,eAAkB,GAAA,sBAAA;AAAA,IAClB,KAAA;AAAA,IACA,WAAA;AAAA,GACE,GAAA,KAAA,CAAA;AAEJ,EAAM,MAAA,OAAA,GAAUC,qCAAmB,CAAA,WAAA,EAAa,eAAe,CAAA,CAAA;AAC/D,EAAA,MAAM,MAAS,GAAAA,qCAAA,CAAmB,WAAa,EAAA,CAAC,eAAe,CAAA,CAAA;AAC/D,EAAA,MAAM,gBAAgB,CAAC,EAAE,eAAiB,EAAA,OAAA,IAAW,KAAK,CAAA,CAAA;AAE1D,EAAA,IAAI,WAAa,EAAA;AACf,IAAO,OAAA,CAAC,EAAE,OAAQ,EAAA,KAAM,CAAC,aAAe,EAAA,WAAA,CAAY,OAAO,CAAC,CAAA,CAAA;AAAA,GAC9D;AAEA,EAAA,QAAQ,MAAQ;AAAA,IACd,KAAK,QAAA;AACH,MAAO,OAAA,gBAAA,CAAiB,eAAe,MAAM,CAAA,CAAA;AAAA,IAE/C,KAAK,SAAA;AACH,MAAO,OAAA,gBAAA,CAAiB,eAAe,OAAO,CAAA,CAAA;AAAA,IAEhD,KAAK,MAAA;AACH,MAAO,OAAA,aAAA,CAAA;AAAA,GACX;AACF,CAAA,CAAA;AAEA,MAAM,gBAAA,GAAmB,CAAC,KAAA,EAAY,SAAsB,KAAA;AAC1D,EAAO,OAAA,CAAC,EAAE,OAAA,EAAc,KAAA,CAAC,OAAO,OAAW,IAAA,EAAE,eAAiB,EAAA,SAAA,EAAW,CAAA,CAAA;AAC3E,CAAA;;;;"}
|
|
@@ -1,73 +1,118 @@
|
|
|
1
|
-
|
|
1
|
+
'use strict';
|
|
2
2
|
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
3
|
+
var react = require('@emotion/react');
|
|
4
|
+
var React = require('react');
|
|
5
|
+
var reactNative = require('react-native');
|
|
6
|
+
var extractNumbersFromString = require('../../../utils/extractNumbersFromString.js');
|
|
7
|
+
require('../Text/styled.js');
|
|
8
|
+
require('../Input/styled.js');
|
|
9
|
+
require('currency.js');
|
|
10
|
+
require('../Input/InputElement/InputElement.js');
|
|
11
|
+
require('../Input/InputMaskElement/InputMaskElement.js');
|
|
12
|
+
require('../Input/PressableInputContainer/styled.js');
|
|
13
|
+
var styled = require('./styled.js');
|
|
7
14
|
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
var
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
var
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
15
|
+
function _interopNamespace(e) {
|
|
16
|
+
if (e && e.__esModule) return e;
|
|
17
|
+
var n = Object.create(null);
|
|
18
|
+
if (e) {
|
|
19
|
+
Object.keys(e).forEach(function (k) {
|
|
20
|
+
if (k !== 'default') {
|
|
21
|
+
var d = Object.getOwnPropertyDescriptor(e, k);
|
|
22
|
+
Object.defineProperty(n, k, d.get ? d : {
|
|
23
|
+
enumerable: true,
|
|
24
|
+
get: function () { return e[k]; }
|
|
25
|
+
});
|
|
26
|
+
}
|
|
27
|
+
});
|
|
28
|
+
}
|
|
29
|
+
n["default"] = e;
|
|
30
|
+
return Object.freeze(n);
|
|
31
|
+
}
|
|
19
32
|
|
|
20
|
-
|
|
33
|
+
var React__namespace = /*#__PURE__*/_interopNamespace(React);
|
|
21
34
|
|
|
22
|
-
|
|
23
|
-
|
|
35
|
+
var __defProp = Object.defineProperty;
|
|
36
|
+
var __getOwnPropSymbols = Object.getOwnPropertySymbols;
|
|
37
|
+
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
38
|
+
var __propIsEnum = Object.prototype.propertyIsEnumerable;
|
|
39
|
+
var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
|
|
40
|
+
var __spreadValues = (a, b) => {
|
|
41
|
+
for (var prop in b || (b = {}))
|
|
42
|
+
if (__hasOwnProp.call(b, prop))
|
|
43
|
+
__defNormalProp(a, prop, b[prop]);
|
|
44
|
+
if (__getOwnPropSymbols)
|
|
45
|
+
for (var prop of __getOwnPropSymbols(b)) {
|
|
46
|
+
if (__propIsEnum.call(b, prop))
|
|
47
|
+
__defNormalProp(a, prop, b[prop]);
|
|
48
|
+
}
|
|
49
|
+
return a;
|
|
50
|
+
};
|
|
51
|
+
var __objRest = (source, exclude) => {
|
|
52
|
+
var target = {};
|
|
53
|
+
for (var prop in source)
|
|
54
|
+
if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
|
|
55
|
+
target[prop] = source[prop];
|
|
56
|
+
if (source != null && __getOwnPropSymbols)
|
|
57
|
+
for (var prop of __getOwnPropSymbols(source)) {
|
|
58
|
+
if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
|
|
59
|
+
target[prop] = source[prop];
|
|
60
|
+
}
|
|
61
|
+
return target;
|
|
62
|
+
};
|
|
63
|
+
const ProgressBar = (_a) => {
|
|
64
|
+
var _b = _a, {
|
|
24
65
|
segments: _segments = 1,
|
|
25
66
|
valueMin = 0,
|
|
26
67
|
valueNow: _valueNow,
|
|
27
68
|
valueMax = 100,
|
|
28
|
-
color =
|
|
29
|
-
colorTone =
|
|
69
|
+
color = "primary",
|
|
70
|
+
colorTone = "medium",
|
|
30
71
|
animate,
|
|
31
|
-
animationParameters
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
72
|
+
animationParameters
|
|
73
|
+
} = _b, rest = __objRest(_b, [
|
|
74
|
+
"segments",
|
|
75
|
+
"valueMin",
|
|
76
|
+
"valueNow",
|
|
77
|
+
"valueMax",
|
|
78
|
+
"color",
|
|
79
|
+
"colorTone",
|
|
80
|
+
"animate",
|
|
81
|
+
"animationParameters"
|
|
82
|
+
]);
|
|
83
|
+
const theme = react.useTheme();
|
|
84
|
+
const animationValue = React__namespace.useRef(new reactNative.Animated.Value(0)).current;
|
|
85
|
+
const valueNow = typeof _valueNow === "string" ? extractNumbersFromString.extractNumbersFromString(_valueNow) : _valueNow;
|
|
37
86
|
const totalProgress = (valueNow - valueMin) / (valueMax - valueMin) * 100;
|
|
38
87
|
const segments = Math.max(1, _segments);
|
|
39
88
|
const segmentWidth = 100 / Math.max(segments);
|
|
40
89
|
const items = [...Array(segments).keys()];
|
|
41
|
-
const segmentsRender = items.map(index => {
|
|
90
|
+
const segmentsRender = items.map((index) => {
|
|
91
|
+
var _a2;
|
|
42
92
|
const max = segmentWidth * (index + 1);
|
|
43
93
|
const min = segmentWidth * index;
|
|
44
94
|
const minmax = (totalProgress - min) / (max - min);
|
|
45
95
|
const width = (minmax > 1 ? 1 : minmax < 0 ? 0 : minmax) * 100;
|
|
46
|
-
let progressPercent =
|
|
47
|
-
|
|
96
|
+
let progressPercent = `${width}%`;
|
|
48
97
|
if (animate && animationParameters) {
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
_reactNative.Animated.timing(animationValue, {
|
|
98
|
+
reactNative.Animated.timing(animationValue, {
|
|
52
99
|
toValue: 1,
|
|
53
100
|
duration: animationParameters.duration / items.length,
|
|
54
101
|
useNativeDriver: false,
|
|
55
|
-
delay: animationParameters.direction ===
|
|
102
|
+
delay: animationParameters.direction === "right" ? index * (animationParameters.duration / items.length) : (items.length - index - 1) * (animationParameters.duration / items.length)
|
|
56
103
|
}).start();
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
progressPercent = (_animationValue$inter = animationValue.interpolate) === null || _animationValue$inter === void 0 ? void 0 : _animationValue$inter.call(animationValue, {
|
|
104
|
+
const rangeAnimation = (animationParameters == null ? void 0 : animationParameters.direction) === "right" ? [`${valueMin < 0 ? 0 : valueMin}%`, `${width}%`] : [`${valueMax}%`, `${width}%`];
|
|
105
|
+
progressPercent = (_a2 = animationValue.interpolate) == null ? void 0 : _a2.call(animationValue, {
|
|
60
106
|
inputRange: [0, 1],
|
|
61
107
|
outputRange: rangeAnimation
|
|
62
108
|
});
|
|
63
109
|
}
|
|
64
|
-
|
|
65
|
-
return React.createElement(_styled.Segment, {
|
|
110
|
+
return /* @__PURE__ */ React__namespace.createElement(styled.Segment, {
|
|
66
111
|
key: index,
|
|
67
112
|
style: {
|
|
68
113
|
borderRightWidth: index == segments - 1 ? 0 : 2
|
|
69
114
|
}
|
|
70
|
-
},
|
|
115
|
+
}, /* @__PURE__ */ React__namespace.createElement(styled.Progress, {
|
|
71
116
|
style: {
|
|
72
117
|
width: progressPercent,
|
|
73
118
|
backgroundColor: theme.color[color][colorTone],
|
|
@@ -75,9 +120,8 @@ const ProgressBar = _ref => {
|
|
|
75
120
|
}
|
|
76
121
|
}));
|
|
77
122
|
});
|
|
78
|
-
return
|
|
123
|
+
return /* @__PURE__ */ React__namespace.createElement(styled.Container, __spreadValues({}, rest), segmentsRender);
|
|
79
124
|
};
|
|
80
125
|
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
//# sourceMappingURL=ProgressBar.js.map
|
|
126
|
+
module.exports = ProgressBar;
|
|
127
|
+
//# sourceMappingURL=ProgressBar.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ProgressBar.js","
|
|
1
|
+
{"version":3,"file":"ProgressBar.js","sources":["../../../../src/components/atoms/ProgressBar/ProgressBar.tsx"],"sourcesContent":["import { useTheme } from '@emotion/react';\nimport * as React from 'react';\nimport { Animated, ViewProps } from 'react-native';\nimport {\n ColorGradationType,\n ColorType,\n ThemeProp,\n} from '@tecsinapse/react-core';\nimport { extractNumbersFromString } from '../../../utils';\nimport { Container, Progress, Segment } from './styled';\n\nexport interface ProgressBarProps extends ViewProps {\n /** Number of segments. Defaults to 1. Set to 1 when 0 or less */\n segments?: number;\n /** Minimum possible value (0% of the bar). Defaults to 0 */\n valueMin?: number;\n /** Maximum possible value (100% of the bar). Defaults to 100 */\n valueMax?: number;\n /** Current value */\n valueNow: number | string;\n /** Filled partition color. Defaults to 'primary' */\n color?: ColorType;\n /** Filled partition color tone. Defaults to 'medium' */\n colorTone?: ColorGradationType;\n /** Animation */\n animate: boolean;\n /** Parameters animation */\n animationParameters?: { direction: 'left' | 'right'; duration: number };\n}\n\nconst ProgressBar: React.FC<ProgressBarProps> = ({\n segments: _segments = 1,\n valueMin = 0,\n valueNow: _valueNow,\n valueMax = 100,\n color = 'primary',\n colorTone = 'medium',\n animate,\n animationParameters,\n ...rest\n}) => {\n const theme = useTheme() as ThemeProp;\n const animationValue = React.useRef(new Animated.Value(0)).current;\n\n const valueNow =\n typeof _valueNow === 'string'\n ? extractNumbersFromString(_valueNow)\n : _valueNow;\n\n const totalProgress = ((valueNow - valueMin) / (valueMax - valueMin)) * 100;\n const segments = Math.max(1, _segments);\n const segmentWidth = 100 / Math.max(segments);\n\n const items = [...Array(segments).keys()];\n\n const segmentsRender = items.map(index => {\n const max = segmentWidth * (index + 1);\n const min = segmentWidth * index;\n const minmax = (totalProgress - min) / (max - min);\n const width = (minmax > 1 ? 1 : minmax < 0 ? 0 : minmax) * 100;\n\n let progressPercent: string | Animated.AnimatedInterpolation = `${width}%`;\n\n if (animate && animationParameters) {\n Animated.timing(animationValue, {\n toValue: 1,\n duration: animationParameters.duration / items.length,\n useNativeDriver: false,\n delay:\n animationParameters.direction === 'right'\n ? index * (animationParameters.duration / items.length)\n : (items.length - index - 1) *\n (animationParameters.duration / items.length),\n }).start();\n\n const rangeAnimation =\n animationParameters?.direction === 'right'\n ? [`${valueMin < 0 ? 0 : valueMin}%`, `${width}%`]\n : [`${valueMax}%`, `${width}%`];\n\n progressPercent = animationValue.interpolate?.({\n inputRange: [0, 1],\n outputRange: rangeAnimation,\n });\n }\n\n return (\n <Segment\n key={index}\n style={{\n borderRightWidth: index == segments - 1 ? 0 : 2,\n }}\n >\n <Progress\n style={{\n width: progressPercent,\n backgroundColor: theme.color[color][colorTone],\n borderRightWidth: width > 0 && width < 100 ? 2 : 0,\n }}\n />\n </Segment>\n );\n });\n\n return <Container {...rest}>{segmentsRender}</Container>;\n};\n\nexport default ProgressBar;\n"],"names":["useTheme","React","Animated","extractNumbersFromString","_a","Segment","Progress","Container"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA8BM,MAAA,WAAA,GAA0C,CAAC,EAU3C,KAAA;AAV2C,EAC/C,IAAA,EAAA,GAAA,EAAA,EAAA;AAAA,IAAA,QAAA,EAAU,SAAY,GAAA,CAAA;AAAA,IACtB,QAAW,GAAA,CAAA;AAAA,IACX,QAAU,EAAA,SAAA;AAAA,IACV,QAAW,GAAA,GAAA;AAAA,IACX,KAAQ,GAAA,SAAA;AAAA,IACR,SAAY,GAAA,QAAA;AAAA,IACZ,OAAA;AAAA,IACA,mBAAA;AAAA,GAtCF,GA8BiD,EAS5C,EAAA,IAAA,GAAA,SAAA,CAT4C,EAS5C,EAAA;AAAA,IARH,UAAA;AAAA,IACA,UAAA;AAAA,IACA,UAAA;AAAA,IACA,UAAA;AAAA,IACA,OAAA;AAAA,IACA,WAAA;AAAA,IACA,SAAA;AAAA,IACA,qBAAA;AAAA,GAAA,CAAA,CAAA;AAGA,EAAA,MAAM,QAAQA,cAAS,EAAA,CAAA;AACvB,EAAM,MAAA,cAAA,GAAiBC,iBAAM,MAAO,CAAA,IAAIC,qBAAS,KAAM,CAAA,CAAC,CAAC,CAAE,CAAA,OAAA,CAAA;AAE3D,EAAA,MAAM,WACJ,OAAO,SAAA,KAAc,QACjB,GAAAC,iDAAA,CAAyB,SAAS,CAClC,GAAA,SAAA,CAAA;AAEN,EAAA,MAAM,aAAkB,GAAA,CAAA,QAAA,GAAW,QAAa,KAAA,QAAA,GAAW,QAAa,CAAA,GAAA,GAAA,CAAA;AACxE,EAAA,MAAM,QAAW,GAAA,IAAA,CAAK,GAAI,CAAA,CAAA,EAAG,SAAS,CAAA,CAAA;AACtC,EAAA,MAAM,YAAe,GAAA,GAAA,GAAM,IAAK,CAAA,GAAA,CAAI,QAAQ,CAAA,CAAA;AAE5C,EAAA,MAAM,QAAQ,CAAC,GAAG,MAAM,QAAQ,CAAA,CAAE,MAAM,CAAA,CAAA;AAExC,EAAM,MAAA,cAAA,GAAiB,KAAM,CAAA,GAAA,CAAI,CAAS,KAAA,KAAA;AAvD5C,IAAAC,IAAAA,GAAAA,CAAAA;AAwDI,IAAM,MAAA,GAAA,GAAM,gBAAgB,KAAQ,GAAA,CAAA,CAAA,CAAA;AACpC,IAAA,MAAM,MAAM,YAAe,GAAA,KAAA,CAAA;AAC3B,IAAM,MAAA,MAAA,GAAA,CAAU,aAAgB,GAAA,GAAA,KAAQ,GAAM,GAAA,GAAA,CAAA,CAAA;AAC9C,IAAA,MAAM,SAAS,MAAS,GAAA,CAAA,GAAI,IAAI,MAAS,GAAA,CAAA,GAAI,IAAI,MAAU,IAAA,GAAA,CAAA;AAE3D,IAAA,IAAI,kBAA2D,CAAG,EAAA,KAAA,CAAA,CAAA,CAAA,CAAA;AAElE,IAAA,IAAI,WAAW,mBAAqB,EAAA;AAClC,MAAAF,oBAAA,CAAS,OAAO,cAAgB,EAAA;AAAA,QAC9B,OAAS,EAAA,CAAA;AAAA,QACT,QAAA,EAAU,mBAAoB,CAAA,QAAA,GAAW,KAAM,CAAA,MAAA;AAAA,QAC/C,eAAiB,EAAA,KAAA;AAAA,QACjB,KACE,EAAA,mBAAA,CAAoB,SAAc,KAAA,OAAA,GAC9B,SAAS,mBAAoB,CAAA,QAAA,GAAW,KAAM,CAAA,MAAA,CAAA,GAAA,CAC7C,MAAM,MAAS,GAAA,KAAA,GAAQ,CACvB,KAAA,mBAAA,CAAoB,WAAW,KAAM,CAAA,MAAA,CAAA;AAAA,OAC7C,EAAE,KAAM,EAAA,CAAA;AAET,MAAA,MAAM,kBACJ,mBAAqB,IAAA,IAAA,GAAA,KAAA,CAAA,GAAA,mBAAA,CAAA,SAAA,MAAc,OAC/B,GAAA,CAAC,GAAG,QAAW,GAAA,CAAA,GAAI,CAAI,GAAA,QAAA,CAAA,CAAA,CAAA,EAAa,GAAG,KAAQ,CAAA,CAAA,CAAA,CAAA,GAC/C,CAAC,CAAG,EAAA,QAAA,CAAA,CAAA,CAAA,EAAa,GAAG,KAAQ,CAAA,CAAA,CAAA,CAAA,CAAA;AAElC,MAAA,eAAA,GAAA,CAAkBE,GAAA,GAAA,cAAA,CAAe,WAAf,KAAA,IAAA,GAAA,KAAA,CAAA,GAAAA,IAAA,IAA6B,CAAA,cAAA,EAAA;AAAA,QAC7C,UAAA,EAAY,CAAC,CAAA,EAAG,CAAC,CAAA;AAAA,QACjB,WAAa,EAAA,cAAA;AAAA,OACf,CAAA,CAAA;AAAA,KACF;AAEA,IAAA,uBACGH,gBAAA,CAAA,aAAA,CAAAI,cAAA,EAAA;AAAA,MACC,GAAK,EAAA,KAAA;AAAA,MACL,KAAO,EAAA;AAAA,QACL,gBAAkB,EAAA,KAAA,IAAS,QAAW,GAAA,CAAA,GAAI,CAAI,GAAA,CAAA;AAAA,OAChD;AAAA,KAAA,kBAECJ,gBAAA,CAAA,aAAA,CAAAK,eAAA,EAAA;AAAA,MACC,KAAO,EAAA;AAAA,QACL,KAAO,EAAA,eAAA;AAAA,QACP,eAAA,EAAiB,KAAM,CAAA,KAAA,CAAM,KAAO,CAAA,CAAA,SAAA,CAAA;AAAA,QACpC,gBAAkB,EAAA,KAAA,GAAQ,CAAK,IAAA,KAAA,GAAQ,MAAM,CAAI,GAAA,CAAA;AAAA,OACnD;AAAA,KACF,CACF,CAAA,CAAA;AAAA,GAEH,CAAA,CAAA;AAED,EAAO,uBAAAL,gBAAA,CAAA,aAAA,CAACM,gBAAc,EAAA,cAAA,CAAA,EAAA,EAAA,IAAA,CAAA,EAAO,cAAe,CAAA,CAAA;AAC9C;;;;"}
|
|
@@ -0,0 +1,9 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import { Story } from '@storybook/react';
|
|
3
|
+
import { ProgressBarProps } from './index';
|
|
4
|
+
declare const _default: {
|
|
5
|
+
title: string;
|
|
6
|
+
component: React.FC<ProgressBarProps>;
|
|
7
|
+
};
|
|
8
|
+
export default _default;
|
|
9
|
+
export declare const Base: Story<ProgressBarProps>;
|
|
@@ -1,54 +1,42 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
Object.defineProperty(exports,
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
var
|
|
15
|
-
|
|
16
|
-
function
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
const Container =
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
}
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
});
|
|
1
|
+
'use strict';
|
|
2
|
+
|
|
3
|
+
Object.defineProperty(exports, '__esModule', { value: true });
|
|
4
|
+
|
|
5
|
+
var styled = require('@emotion/native');
|
|
6
|
+
var reactNative = require('react-native');
|
|
7
|
+
require('react');
|
|
8
|
+
require('../Text/styled.js');
|
|
9
|
+
require('../Input/styled.js');
|
|
10
|
+
require('currency.js');
|
|
11
|
+
require('../Input/InputElement/InputElement.js');
|
|
12
|
+
require('../Input/InputMaskElement/InputMaskElement.js');
|
|
13
|
+
require('../Input/PressableInputContainer/styled.js');
|
|
14
|
+
var ResponsiveFontSize = require('../../../utils/ResponsiveFontSize.js');
|
|
15
|
+
|
|
16
|
+
function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
|
|
17
|
+
|
|
18
|
+
var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
|
|
19
|
+
|
|
20
|
+
const Container = styled__default["default"].View`
|
|
21
|
+
display: flex;
|
|
22
|
+
height: ${({ theme }) => theme.spacing.mili};
|
|
23
|
+
border-radius: ${({ theme }) => theme.spacing.mili};
|
|
24
|
+
width: 100%;
|
|
25
|
+
flex-direction: row;
|
|
26
|
+
overflow: hidden;
|
|
27
|
+
`;
|
|
28
|
+
const Segment = styled__default["default"].View`
|
|
29
|
+
flex: 1;
|
|
30
|
+
background-color: ${({ theme }) => theme.color.secondary.light};
|
|
31
|
+
border-right-width: ${ResponsiveFontSize.RFValueStr("2px")};
|
|
32
|
+
border-color: ${({ theme }) => theme.color.secondary.xlight};
|
|
33
|
+
`;
|
|
34
|
+
const Progress = styled__default["default"](reactNative.Animated.View)`
|
|
35
|
+
height: 100%;
|
|
36
|
+
border-color: ${({ theme }) => theme.color.secondary.xlight};
|
|
37
|
+
`;
|
|
31
38
|
|
|
32
39
|
exports.Container = Container;
|
|
33
|
-
|
|
34
|
-
const Segment = _native.default.View(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n flex: 1;\n background-color: ", ";\n border-right-width: ", ";\n border-color: ", ";\n"])), _ref3 => {
|
|
35
|
-
let {
|
|
36
|
-
theme
|
|
37
|
-
} = _ref3;
|
|
38
|
-
return theme.color.secondary.light;
|
|
39
|
-
}, (0, _utils.RFValueStr)('2px'), _ref4 => {
|
|
40
|
-
let {
|
|
41
|
-
theme
|
|
42
|
-
} = _ref4;
|
|
43
|
-
return theme.color.secondary.xlight;
|
|
44
|
-
});
|
|
45
|
-
|
|
46
|
-
exports.Segment = Segment;
|
|
47
|
-
const Progress = (0, _native.default)(_reactNative.Animated.View)(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n height: 100%;\n border-color: ", ";\n"])), _ref5 => {
|
|
48
|
-
let {
|
|
49
|
-
theme
|
|
50
|
-
} = _ref5;
|
|
51
|
-
return theme.color.secondary.xlight;
|
|
52
|
-
});
|
|
53
40
|
exports.Progress = Progress;
|
|
54
|
-
|
|
41
|
+
exports.Segment = Segment;
|
|
42
|
+
//# sourceMappingURL=styled.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"styled.js","
|
|
1
|
+
{"version":3,"file":"styled.js","sources":["../../../../src/components/atoms/ProgressBar/styled.ts"],"sourcesContent":["import styled from '@emotion/native';\nimport { Animated } from 'react-native';\nimport { StyleProps } from '../../../types/defaults';\nimport { RFValueStr } from '../../../utils';\n\nexport const Container = styled.View<Partial<StyleProps>>`\n display: flex;\n height: ${({ theme }) => theme.spacing.mili};\n border-radius: ${({ theme }) => theme.spacing.mili};\n width: 100%;\n flex-direction: row;\n overflow: hidden;\n`;\n\nexport const Segment = styled.View<Partial<StyleProps>>`\n flex: 1;\n background-color: ${({ theme }) => theme.color.secondary.light};\n border-right-width: ${RFValueStr('2px')};\n border-color: ${({ theme }) => theme.color.secondary.xlight};\n`;\n\nexport const Progress = styled(Animated.View)<Partial<StyleProps>>`\n height: 100%;\n border-color: ${({ theme }) => theme.color.secondary.xlight};\n`;\n"],"names":["styled","RFValueStr","Animated"],"mappings":";;;;;;;;;;;;;;;;;;;AAKO,MAAM,YAAYA,0BAAO,CAAA,IAAA,CAAA;AAAA;AAAA,UAAA,EAEpB,CAAC,EAAE,KAAM,EAAA,KAAM,MAAM,OAAQ,CAAA,IAAA,CAAA;AAAA,iBAAA,EACtB,CAAC,EAAE,KAAM,EAAA,KAAM,MAAM,OAAQ,CAAA,IAAA,CAAA;AAAA;AAAA;AAAA;AAAA,EAAA;AAMzC,MAAM,UAAUA,0BAAO,CAAA,IAAA,CAAA;AAAA;AAAA,oBAAA,EAER,CAAC,EAAE,KAAA,EAAY,KAAA,KAAA,CAAM,MAAM,SAAU,CAAA,KAAA,CAAA;AAAA,sBAAA,EACnCC,8BAAW,KAAK,CAAA,CAAA;AAAA,gBAAA,EACtB,CAAC,EAAE,KAAA,EAAY,KAAA,KAAA,CAAM,MAAM,SAAU,CAAA,MAAA,CAAA;AAAA,EAAA;AAG1C,MAAA,QAAA,GAAWD,0BAAO,CAAAE,oBAAA,CAAS,IAAI,CAAA,CAAA;AAAA;AAAA,gBAAA,EAE1B,CAAC,EAAE,KAAA,EAAY,KAAA,KAAA,CAAM,MAAM,SAAU,CAAA,MAAA,CAAA;AAAA;;;;;;"}
|
|
@@ -1,56 +1,83 @@
|
|
|
1
|
-
|
|
1
|
+
'use strict';
|
|
2
2
|
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
3
|
+
var React = require('react');
|
|
4
|
+
var reactNative = require('react-native');
|
|
5
|
+
var Icon = require('../Icon/Icon.js');
|
|
6
|
+
var styled = require('./styled.js');
|
|
7
7
|
|
|
8
|
-
|
|
8
|
+
function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
|
|
9
9
|
|
|
10
|
-
var
|
|
10
|
+
var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
|
|
11
11
|
|
|
12
|
-
var
|
|
13
|
-
|
|
14
|
-
var
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
12
|
+
var __defProp = Object.defineProperty;
|
|
13
|
+
var __defProps = Object.defineProperties;
|
|
14
|
+
var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
|
|
15
|
+
var __getOwnPropSymbols = Object.getOwnPropertySymbols;
|
|
16
|
+
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
17
|
+
var __propIsEnum = Object.prototype.propertyIsEnumerable;
|
|
18
|
+
var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
|
|
19
|
+
var __spreadValues = (a, b) => {
|
|
20
|
+
for (var prop in b || (b = {}))
|
|
21
|
+
if (__hasOwnProp.call(b, prop))
|
|
22
|
+
__defNormalProp(a, prop, b[prop]);
|
|
23
|
+
if (__getOwnPropSymbols)
|
|
24
|
+
for (var prop of __getOwnPropSymbols(b)) {
|
|
25
|
+
if (__propIsEnum.call(b, prop))
|
|
26
|
+
__defNormalProp(a, prop, b[prop]);
|
|
27
|
+
}
|
|
28
|
+
return a;
|
|
29
|
+
};
|
|
30
|
+
var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
|
|
31
|
+
var __objRest = (source, exclude) => {
|
|
32
|
+
var target = {};
|
|
33
|
+
for (var prop in source)
|
|
34
|
+
if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
|
|
35
|
+
target[prop] = source[prop];
|
|
36
|
+
if (source != null && __getOwnPropSymbols)
|
|
37
|
+
for (var prop of __getOwnPropSymbols(source)) {
|
|
38
|
+
if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
|
|
39
|
+
target[prop] = source[prop];
|
|
40
|
+
}
|
|
41
|
+
return target;
|
|
42
|
+
};
|
|
43
|
+
const RadioButton = (_a) => {
|
|
44
|
+
var _b = _a, {
|
|
22
45
|
children,
|
|
23
46
|
onChange,
|
|
24
47
|
checked,
|
|
25
|
-
labelPosition =
|
|
48
|
+
labelPosition = "right",
|
|
26
49
|
disabled = false,
|
|
27
|
-
color =
|
|
28
|
-
colorTone =
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
50
|
+
color = "primary",
|
|
51
|
+
colorTone = "medium"
|
|
52
|
+
} = _b, rest = __objRest(_b, [
|
|
53
|
+
"children",
|
|
54
|
+
"onChange",
|
|
55
|
+
"checked",
|
|
56
|
+
"labelPosition",
|
|
57
|
+
"disabled",
|
|
58
|
+
"color",
|
|
59
|
+
"colorTone"
|
|
60
|
+
]);
|
|
32
61
|
const handleChange = () => {
|
|
33
62
|
onChange && onChange(!checked);
|
|
34
63
|
};
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
disabled: disabled,
|
|
64
|
+
return /* @__PURE__ */ React__default["default"].createElement(reactNative.Pressable, __spreadProps(__spreadValues({}, rest), {
|
|
65
|
+
disabled,
|
|
38
66
|
onPress: handleChange,
|
|
39
67
|
accessibilityRole: "radio"
|
|
40
|
-
}),
|
|
68
|
+
}), /* @__PURE__ */ React__default["default"].createElement(styled.ViewStyled, null, labelPosition === "left" && children, checked && /* @__PURE__ */ React__default["default"].createElement(styled.IconViewStyled, null, /* @__PURE__ */ React__default["default"].createElement(styled.IconWrapper, null, /* @__PURE__ */ React__default["default"].createElement(styled.ScaledView, null, /* @__PURE__ */ React__default["default"].createElement(Icon, {
|
|
41
69
|
name: "circle",
|
|
42
70
|
colorVariant: color,
|
|
43
|
-
colorTone
|
|
71
|
+
colorTone,
|
|
44
72
|
type: "material-community",
|
|
45
73
|
size: "centi"
|
|
46
|
-
})))), !checked &&
|
|
74
|
+
})))), !checked && /* @__PURE__ */ React__default["default"].createElement(styled.IconViewStyled, null, /* @__PURE__ */ React__default["default"].createElement(styled.IconWrapper, null, /* @__PURE__ */ React__default["default"].createElement(styled.ScaledView, null, /* @__PURE__ */ React__default["default"].createElement(Icon, {
|
|
47
75
|
name: "circle",
|
|
48
76
|
fontColor: "light",
|
|
49
77
|
type: "material-community",
|
|
50
78
|
size: "centi"
|
|
51
|
-
})))), labelPosition ===
|
|
79
|
+
})))), labelPosition === "right" && children));
|
|
52
80
|
};
|
|
53
81
|
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
//# sourceMappingURL=RadioButton.js.map
|
|
82
|
+
module.exports = RadioButton;
|
|
83
|
+
//# sourceMappingURL=RadioButton.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"RadioButton.js","
|
|
1
|
+
{"version":3,"file":"RadioButton.js","sources":["../../../../src/components/atoms/RadioButton/RadioButton.tsx"],"sourcesContent":["import React, { FC } from 'react';\nimport { Pressable, StyleProp, ViewStyle } from 'react-native';\nimport { ColorGradationType, ColorType } from '../../../types/defaults';\nimport { Icon } from '../Icon';\nimport { IconViewStyled, IconWrapper, ScaledView, ViewStyled } from './styled';\n\nexport interface RadioButtonProps {\n /** Element is checked */\n checked?: boolean;\n /** Change handler */\n onChange?: (checked: boolean) => void;\n /** Position of children */\n labelPosition?: 'left' | 'right';\n /** Element is not clickable */\n disabled?: boolean;\n /** Color definition from theme */\n color?: ColorType;\n /** Color gradation from theme */\n colorTone?: ColorGradationType;\n style?: StyleProp<ViewStyle>;\n}\n\nconst RadioButton: FC<RadioButtonProps> = ({\n children,\n onChange,\n checked,\n labelPosition = 'right',\n disabled = false,\n color = 'primary',\n colorTone = 'medium',\n ...rest\n}): JSX.Element => {\n const handleChange = () => {\n onChange && onChange(!checked);\n };\n\n return (\n <Pressable\n {...rest}\n disabled={disabled}\n onPress={handleChange}\n accessibilityRole=\"radio\"\n >\n <ViewStyled>\n {labelPosition === 'left' && children}\n {checked && (\n <IconViewStyled>\n <IconWrapper>\n <ScaledView>\n <Icon\n name=\"circle\"\n colorVariant={color}\n colorTone={colorTone}\n type=\"material-community\"\n size=\"centi\"\n />\n </ScaledView>\n </IconWrapper>\n </IconViewStyled>\n )}\n {!checked && (\n <IconViewStyled>\n <IconWrapper>\n <ScaledView>\n <Icon\n name=\"circle\"\n fontColor=\"light\"\n type=\"material-community\"\n size=\"centi\"\n />\n </ScaledView>\n </IconWrapper>\n </IconViewStyled>\n )}\n {labelPosition === 'right' && children}\n </ViewStyled>\n </Pressable>\n );\n};\n\nexport default RadioButton;\n"],"names":["React","Pressable","ViewStyled","IconViewStyled","IconWrapper","ScaledView"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAsBM,MAAA,WAAA,GAAoC,CAAC,EASxB,KAAA;AATwB,EACzC,IAAA,EAAA,GAAA,EAAA,EAAA;AAAA,IAAA,QAAA;AAAA,IACA,QAAA;AAAA,IACA,OAAA;AAAA,IACA,aAAgB,GAAA,OAAA;AAAA,IAChB,QAAW,GAAA,KAAA;AAAA,IACX,KAAQ,GAAA,SAAA;AAAA,IACR,SAAY,GAAA,QAAA;AAAA,GA7Bd,GAsB2C,EAQtC,EAAA,IAAA,GAAA,SAAA,CARsC,EAQtC,EAAA;AAAA,IAPH,UAAA;AAAA,IACA,UAAA;AAAA,IACA,SAAA;AAAA,IACA,eAAA;AAAA,IACA,UAAA;AAAA,IACA,OAAA;AAAA,IACA,WAAA;AAAA,GAAA,CAAA,CAAA;AAGA,EAAA,MAAM,eAAe,MAAM;AACzB,IAAY,QAAA,IAAA,QAAA,CAAS,CAAC,OAAO,CAAA,CAAA;AAAA,GAC/B,CAAA;AAEA,EACE,uBAAAA,yBAAA,CAAA,aAAA,CAACC,wDACK,IADL,CAAA,EAAA;AAAA,IAEC,QAAA;AAAA,IACA,OAAS,EAAA,YAAA;AAAA,IACT,iBAAkB,EAAA,OAAA;AAAA,GAAA,CAAA,kBAEjBD,yBAAA,CAAA,aAAA,CAAAE,iBAAA,EAAA,IAAA,EACE,aAAkB,KAAA,MAAA,IAAU,QAC5B,EAAA,OAAA,oBACEF,yBAAA,CAAA,aAAA,CAAAG,qBAAA,EAAA,IAAA,kBACEH,yBAAA,CAAA,aAAA,CAAAI,kBAAA,EAAA,IAAA,kBACEJ,yBAAA,CAAA,aAAA,CAAAK,iBAAA,EAAA,IAAA,kBACEL,yBAAA,CAAA,aAAA,CAAA,IAAA,EAAA;AAAA,IACC,IAAK,EAAA,QAAA;AAAA,IACL,YAAc,EAAA,KAAA;AAAA,IACd,SAAA;AAAA,IACA,IAAK,EAAA,oBAAA;AAAA,IACL,IAAK,EAAA,OAAA;AAAA,GACP,CACF,CACF,CACF,CAAA,EAED,CAAC,OAAA,oBACCA,yBAAA,CAAA,aAAA,CAAAG,qBAAA,EAAA,IAAA,kBACEH,yBAAA,CAAA,aAAA,CAAAI,kBAAA,EAAA,IAAA,kBACEJ,yBAAA,CAAA,aAAA,CAAAK,iBAAA,EAAA,IAAA,kBACEL,yBAAA,CAAA,aAAA,CAAA,IAAA,EAAA;AAAA,IACC,IAAK,EAAA,QAAA;AAAA,IACL,SAAU,EAAA,OAAA;AAAA,IACV,IAAK,EAAA,oBAAA;AAAA,IACL,IAAK,EAAA,OAAA;AAAA,GACP,CACF,CACF,CACF,GAED,aAAkB,KAAA,OAAA,IAAW,QAChC,CACF,CAAA,CAAA;AAEJ;;;;"}
|
|
@@ -0,0 +1,9 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import { RadioButtonProps } from './RadioButton';
|
|
3
|
+
import { Story } from '@storybook/react';
|
|
4
|
+
declare const _default: {
|
|
5
|
+
title: string;
|
|
6
|
+
component: React.FC<RadioButtonProps>;
|
|
7
|
+
};
|
|
8
|
+
export default _default;
|
|
9
|
+
export declare const Base: Story<RadioButtonProps>;
|
|
@@ -1,53 +1,37 @@
|
|
|
1
|
-
|
|
1
|
+
'use strict';
|
|
2
2
|
|
|
3
|
-
Object.defineProperty(exports,
|
|
4
|
-
value: true
|
|
5
|
-
});
|
|
6
|
-
exports.ViewStyled = exports.ScaledView = exports.IconWrapper = exports.IconViewStyled = void 0;
|
|
3
|
+
Object.defineProperty(exports, '__esModule', { value: true });
|
|
7
4
|
|
|
8
|
-
var
|
|
5
|
+
var styled = require('@emotion/native');
|
|
6
|
+
var reactNative = require('react-native');
|
|
9
7
|
|
|
10
|
-
|
|
8
|
+
function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
|
|
11
9
|
|
|
12
|
-
var
|
|
10
|
+
var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
|
|
13
11
|
|
|
14
|
-
|
|
12
|
+
const IconWrapper = styled__default["default"](reactNative.View)`
|
|
13
|
+
border-radius: ${({ theme }) => theme.borderRadius.pill};
|
|
14
|
+
border-color: ${({
|
|
15
|
+
theme,
|
|
16
|
+
color = "primary",
|
|
17
|
+
colorTone = "medium"
|
|
18
|
+
}) => theme.color[color][colorTone]};
|
|
19
|
+
border-width: ${({ theme }) => theme.borderWidth.nano};
|
|
20
|
+
background-color: ${({ theme }) => theme.miscellaneous.surfaceColor};
|
|
21
|
+
`;
|
|
22
|
+
const ScaledView = styled__default["default"](reactNative.View)`
|
|
23
|
+
transform: scale(0.8);
|
|
24
|
+
`;
|
|
25
|
+
const IconViewStyled = styled__default["default"](reactNative.View)`
|
|
26
|
+
padding: ${({ theme }) => theme.spacing.mili};
|
|
27
|
+
`;
|
|
28
|
+
const ViewStyled = styled__default["default"](reactNative.View)`
|
|
29
|
+
align-items: center;
|
|
30
|
+
flex-direction: row;
|
|
31
|
+
`;
|
|
15
32
|
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
const IconWrapper = (0, _native.default)(_reactNative.View)(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n border-radius: ", ";\n border-color: ", ";\n border-width: ", ";\n background-color: ", ";\n"])), _ref => {
|
|
19
|
-
let {
|
|
20
|
-
theme
|
|
21
|
-
} = _ref;
|
|
22
|
-
return theme.borderRadius.pill;
|
|
23
|
-
}, _ref2 => {
|
|
24
|
-
let {
|
|
25
|
-
theme,
|
|
26
|
-
color = 'primary',
|
|
27
|
-
colorTone = 'medium'
|
|
28
|
-
} = _ref2;
|
|
29
|
-
return theme.color[color][colorTone];
|
|
30
|
-
}, _ref3 => {
|
|
31
|
-
let {
|
|
32
|
-
theme
|
|
33
|
-
} = _ref3;
|
|
34
|
-
return theme.borderWidth.nano;
|
|
35
|
-
}, _ref4 => {
|
|
36
|
-
let {
|
|
37
|
-
theme
|
|
38
|
-
} = _ref4;
|
|
39
|
-
return theme.miscellaneous.surfaceColor;
|
|
40
|
-
});
|
|
33
|
+
exports.IconViewStyled = IconViewStyled;
|
|
41
34
|
exports.IconWrapper = IconWrapper;
|
|
42
|
-
const ScaledView = (0, _native.default)(_reactNative.View)(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n transform: scale(0.8);\n"])));
|
|
43
35
|
exports.ScaledView = ScaledView;
|
|
44
|
-
const IconViewStyled = (0, _native.default)(_reactNative.View)(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n padding: ", ";\n"])), _ref5 => {
|
|
45
|
-
let {
|
|
46
|
-
theme
|
|
47
|
-
} = _ref5;
|
|
48
|
-
return theme.spacing.mili;
|
|
49
|
-
});
|
|
50
|
-
exports.IconViewStyled = IconViewStyled;
|
|
51
|
-
const ViewStyled = (0, _native.default)(_reactNative.View)(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n align-items: center;\n flex-direction: row;\n"])));
|
|
52
36
|
exports.ViewStyled = ViewStyled;
|
|
53
|
-
//# sourceMappingURL=styled.js.map
|
|
37
|
+
//# sourceMappingURL=styled.js.map
|