@fountain-ui/core 1.19.0 → 2.0.0-beta.2
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 +8 -0
- package/build/commonjs/Accordion/Accordion.js +1 -7
- package/build/commonjs/Accordion/Accordion.js.map +1 -1
- package/build/commonjs/Button/Button.js +14 -8
- package/build/commonjs/Button/Button.js.map +1 -1
- package/build/commonjs/Checkbox/Checkbox.js +7 -2
- package/build/commonjs/Checkbox/Checkbox.js.map +1 -1
- package/build/commonjs/Chip/Chip.js +10 -9
- package/build/commonjs/Chip/Chip.js.map +1 -1
- package/build/commonjs/Fab/Fab.js +10 -3
- package/build/commonjs/Fab/Fab.js.map +1 -1
- package/build/commonjs/IconButton/IconButton.js +13 -3
- package/build/commonjs/IconButton/IconButton.js.map +1 -1
- package/build/commonjs/Image/Image.js +13 -1
- package/build/commonjs/Image/Image.js.map +1 -1
- package/build/commonjs/Radio/Radio.js +12 -11
- package/build/commonjs/Radio/Radio.js.map +1 -1
- package/build/commonjs/SvgIcon/SvgIcon.js +6 -2
- package/build/commonjs/SvgIcon/SvgIcon.js.map +1 -1
- package/build/commonjs/Switch/Switch.js +1 -1
- package/build/commonjs/Switch/Switch.js.map +1 -1
- package/build/commonjs/TextField/InputLabel.js +5 -2
- package/build/commonjs/TextField/InputLabel.js.map +1 -1
- package/build/commonjs/TextField/OutlinedTextField.js +2 -1
- package/build/commonjs/TextField/OutlinedTextField.js.map +1 -1
- package/build/commonjs/hooks/useFadeInAppBar.js +5 -2
- package/build/commonjs/hooks/useFadeInAppBar.js.map +1 -1
- package/build/commonjs/internal/icons/Checkbox.js +1 -2
- package/build/commonjs/internal/icons/Checkbox.js.map +1 -1
- package/build/commonjs/internal/icons/CheckboxChecked.js +3 -2
- package/build/commonjs/internal/icons/CheckboxChecked.js.map +1 -1
- package/build/commonjs/internal/icons/ChevronDown.js +0 -2
- package/build/commonjs/internal/icons/ChevronDown.js.map +1 -1
- package/build/commonjs/internal/icons/ChevronLeft.js +0 -2
- package/build/commonjs/internal/icons/ChevronLeft.js.map +1 -1
- package/build/commonjs/internal/icons/ChevronRight.js +0 -2
- package/build/commonjs/internal/icons/ChevronRight.js.map +1 -1
- package/build/commonjs/internal/icons/Close.js +0 -2
- package/build/commonjs/internal/icons/Close.js.map +1 -1
- package/build/commonjs/internal/icons/Radio.js.map +1 -1
- package/build/commonjs/internal/icons/RadioChecked.js.map +1 -1
- package/build/commonjs/styles/index.js +0 -8
- package/build/commonjs/styles/index.js.map +1 -1
- package/build/commonjs/utils/cloneElementSafely.js +15 -0
- package/build/commonjs/utils/cloneElementSafely.js.map +1 -0
- package/build/commonjs/utils/index.js +8 -0
- package/build/commonjs/utils/index.js.map +1 -1
- package/build/module/Accordion/Accordion.js +1 -7
- package/build/module/Accordion/Accordion.js.map +1 -1
- package/build/module/Button/Button.js +13 -9
- package/build/module/Button/Button.js.map +1 -1
- package/build/module/Checkbox/Checkbox.js +7 -2
- package/build/module/Checkbox/Checkbox.js.map +1 -1
- package/build/module/Chip/Chip.js +10 -10
- package/build/module/Chip/Chip.js.map +1 -1
- package/build/module/Fab/Fab.js +10 -4
- package/build/module/Fab/Fab.js.map +1 -1
- package/build/module/IconButton/IconButton.js +12 -4
- package/build/module/IconButton/IconButton.js.map +1 -1
- package/build/module/Image/Image.js +13 -1
- package/build/module/Image/Image.js.map +1 -1
- package/build/module/Radio/Radio.js +11 -11
- package/build/module/Radio/Radio.js.map +1 -1
- package/build/module/SvgIcon/SvgIcon.js +7 -3
- package/build/module/SvgIcon/SvgIcon.js.map +1 -1
- package/build/module/Switch/Switch.js +1 -1
- package/build/module/Switch/Switch.js.map +1 -1
- package/build/module/TextField/InputLabel.js +4 -2
- package/build/module/TextField/InputLabel.js.map +1 -1
- package/build/module/TextField/OutlinedTextField.js +2 -1
- package/build/module/TextField/OutlinedTextField.js.map +1 -1
- package/build/module/hooks/useFadeInAppBar.js +3 -2
- package/build/module/hooks/useFadeInAppBar.js.map +1 -1
- package/build/module/internal/icons/Checkbox.js +1 -2
- package/build/module/internal/icons/Checkbox.js.map +1 -1
- package/build/module/internal/icons/CheckboxChecked.js +3 -2
- package/build/module/internal/icons/CheckboxChecked.js.map +1 -1
- package/build/module/internal/icons/ChevronDown.js +0 -2
- package/build/module/internal/icons/ChevronDown.js.map +1 -1
- package/build/module/internal/icons/ChevronLeft.js +0 -2
- package/build/module/internal/icons/ChevronLeft.js.map +1 -1
- package/build/module/internal/icons/ChevronRight.js +0 -2
- package/build/module/internal/icons/ChevronRight.js.map +1 -1
- package/build/module/internal/icons/Close.js +0 -2
- package/build/module/internal/icons/Close.js.map +1 -1
- package/build/module/internal/icons/Radio.js.map +1 -1
- package/build/module/internal/icons/RadioChecked.js.map +1 -1
- package/build/module/styles/index.js +0 -1
- package/build/module/styles/index.js.map +1 -1
- package/build/module/utils/cloneElementSafely.js +6 -0
- package/build/module/utils/cloneElementSafely.js.map +1 -0
- package/build/module/utils/index.js +1 -0
- package/build/module/utils/index.js.map +1 -1
- package/build/typescript/Button/ButtonProps.d.ts +2 -2
- package/build/typescript/Checkbox/CheckboxProps.d.ts +7 -1
- package/build/typescript/Fab/FabProps.d.ts +2 -2
- package/build/typescript/IconButton/IconButtonProps.d.ts +2 -2
- package/build/typescript/Image/ImageProps.d.ts +8 -0
- package/build/typescript/Slider/Slider.d.ts +1 -1
- package/build/typescript/SvgIcon/SvgIconProps.d.ts +7 -6
- package/build/typescript/Switch/SwitchProps.d.ts +2 -2
- package/build/typescript/hooks/useFadeInAppBar.d.ts +0 -1
- package/build/typescript/internal/icons/Checkbox.d.ts +19 -18
- package/build/typescript/internal/icons/CheckboxChecked.d.ts +19 -18
- package/build/typescript/internal/icons/ChevronDown.d.ts +19 -18
- package/build/typescript/internal/icons/ChevronLeft.d.ts +19 -18
- package/build/typescript/internal/icons/ChevronRight.d.ts +19 -18
- package/build/typescript/internal/icons/Close.d.ts +19 -18
- package/build/typescript/internal/icons/Radio.d.ts +19 -18
- package/build/typescript/internal/icons/RadioChecked.d.ts +19 -18
- package/build/typescript/styles/index.d.ts +0 -1
- package/build/typescript/types/index.d.ts +1 -0
- package/build/typescript/utils/cloneElementSafely.d.ts +4 -0
- package/build/typescript/utils/index.d.ts +1 -0
- package/package.json +4 -4
- package/src/Accordion/Accordion.tsx +1 -4
- package/src/Button/Button.tsx +18 -3
- package/src/Button/ButtonProps.ts +2 -7
- package/src/Checkbox/Checkbox.tsx +3 -2
- package/src/Checkbox/CheckboxProps.ts +9 -1
- package/src/Chip/Chip.tsx +11 -4
- package/src/Fab/Fab.tsx +14 -4
- package/src/Fab/FabProps.ts +2 -8
- package/src/IconButton/IconButton.tsx +16 -4
- package/src/IconButton/IconButtonProps.ts +2 -7
- package/src/Image/Image.tsx +12 -1
- package/src/Image/ImageProps.ts +10 -0
- package/src/Radio/Radio.tsx +7 -15
- package/src/SvgIcon/SvgIcon.tsx +11 -5
- package/src/SvgIcon/SvgIconProps.ts +8 -6
- package/src/Switch/Switch.tsx +1 -1
- package/src/Switch/SwitchProps.ts +2 -8
- package/src/TextField/InputLabel.tsx +6 -3
- package/src/TextField/OutlinedTextField.tsx +2 -1
- package/src/hooks/useFadeInAppBar.ts +4 -3
- package/src/internal/icons/Checkbox.tsx +3 -3
- package/src/internal/icons/CheckboxChecked.tsx +5 -3
- package/src/internal/icons/ChevronDown.tsx +3 -4
- package/src/internal/icons/ChevronLeft.tsx +3 -4
- package/src/internal/icons/ChevronRight.tsx +3 -4
- package/src/internal/icons/Close.tsx +3 -4
- package/src/internal/icons/Radio.tsx +4 -2
- package/src/internal/icons/RadioChecked.tsx +4 -2
- package/src/styles/index.ts +0 -1
- package/src/types/index.ts +7 -0
- package/src/utils/cloneElementSafely.ts +9 -0
- package/src/utils/index.ts +1 -0
- package/build/commonjs/styles/cloneSvgIcon.js +0 -37
- package/build/commonjs/styles/cloneSvgIcon.js.map +0 -1
- package/build/module/styles/cloneSvgIcon.js +0 -25
- package/build/module/styles/cloneSvgIcon.js.map +0 -1
- package/build/typescript/styles/cloneSvgIcon.d.ts +0 -12
- package/src/styles/cloneSvgIcon.ts +0 -39
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["Button.tsx"],"names":["React","Linking","Text","ButtonBase","
|
|
1
|
+
{"version":3,"sources":["Button.tsx"],"names":["React","Linking","Text","ButtonBase","createFontStyle","css","StyleSheet","useTheme","cloneElementSafely","iconSizes","small","medium","styles","create","root","flexDirection","justifyContent","alignItems","fullWidth","width","minWidth","height","Button","props","children","clipHorizontalSpacing","color","disabled","endIcon","endIconProp","href","onPress","size","startIcon","startIconProp","style","styleProp","variant","otherProps","theme","mainColor","palette","main","fontColor","contrastTextColor","variantStyleMap","contained","backgroundColor","outlined","borderColor","borderStyle","borderWidth","text","iconProps","colorValue","paddingSize","spacing","paddingLeft","paddingRight","borderRadius","shape","roundness","buttonBaseStyle","undefined","fontStyle","selector","typo","button2","button1","textMarginSize","textMarginStyle","marginLeft","marginRight","textStyle","textAlign","handlePress","canOpenURL","openURL"],"mappings":"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","sourcesContent":["import React from 'react';\nimport { Linking, Text } from 'react-native';\nimport ButtonBase from '../ButtonBase';\nimport { createFontStyle, css, StyleSheet, useTheme } from '../styles';\nimport { cloneElementSafely } from '../utils';\nimport type ButtonProps from './ButtonProps';\nimport type { ButtonSize } from './ButtonProps';\n\ntype IconSizes = { [n in ButtonSize]: number };\n\nconst iconSizes: IconSizes = {\n small: 20,\n medium: 24,\n};\n\nconst styles = StyleSheet.create({\n root: {\n flexDirection: 'row',\n justifyContent: 'center',\n alignItems: 'center',\n },\n fullWidth: {\n width: '100%',\n },\n medium: {\n minWidth: 104,\n height: 48,\n },\n small: {\n minWidth: 56,\n height: 32,\n },\n});\n\nexport default function Button(props: ButtonProps) {\n const {\n children,\n clipHorizontalSpacing = false,\n color = 'primary',\n disabled = false,\n endIcon: endIconProp,\n fullWidth = false,\n href,\n onPress,\n size = 'medium',\n startIcon: startIconProp,\n style: styleProp,\n variant = 'contained',\n ...otherProps\n } = props;\n\n const theme = useTheme();\n\n const mainColor = theme.palette[color].main;\n\n const fontColor = variant === 'contained'\n ? theme.palette[color].contrastTextColor\n : theme.palette[color].main;\n\n const variantStyleMap = {\n contained: {\n backgroundColor: mainColor,\n },\n outlined: {\n backgroundColor: 'transparent',\n borderColor: mainColor,\n borderStyle: 'solid',\n borderWidth: 1,\n },\n text: {\n backgroundColor: 'transparent',\n },\n };\n\n const iconProps = {\n width: iconSizes[size],\n height: iconSizes[size],\n colorValue: fontColor,\n };\n\n const startIcon = cloneElementSafely(startIconProp, iconProps);\n const endIcon = cloneElementSafely(endIconProp, iconProps);\n\n const paddingSize = size === 'small' ? theme.spacing(2) : theme.spacing(4);\n const paddingLeft = startIcon ? paddingSize - theme.spacing(1) : paddingSize;\n const paddingRight = endIcon ? paddingSize - theme.spacing(1) : paddingSize;\n\n const borderRadius = theme.shape.roundness;\n const buttonBaseStyle = css([\n styles.root,\n variantStyleMap[variant],\n size === 'medium' ? styles.medium : styles.small,\n fullWidth ? styles.fullWidth : undefined,\n { borderRadius, color: fontColor },\n (variant === 'text' && clipHorizontalSpacing)\n ? { minWidth: 0 }\n : { paddingLeft, paddingRight },\n styleProp,\n ]);\n\n const fontStyle = createFontStyle(theme, {\n selector: (typo) => size === 'small' ? typo.button2 : typo.button1,\n color: fontColor,\n });\n\n const textMarginSize = size === 'small' ? theme.spacing(1) : theme.spacing(2);\n const textMarginStyle = startIcon\n ? { marginLeft: textMarginSize }\n : endIcon\n ? { marginRight: textMarginSize }\n : undefined;\n\n const textStyle = css([\n fontStyle,\n textMarginStyle,\n { textAlign: 'center' },\n ]);\n\n const handlePress = async () => {\n if (disabled) {\n return;\n }\n if (onPress) {\n onPress();\n return;\n }\n if (href) {\n if (await Linking.canOpenURL(href)) {\n await Linking.openURL(href);\n }\n }\n };\n\n return (\n <ButtonBase\n disabled={disabled}\n onPress={handlePress}\n style={buttonBaseStyle}\n {...otherProps}\n >\n {startIcon}\n\n <Text\n children={children}\n style={textStyle}\n />\n\n {endIcon}\n </ButtonBase>\n );\n};\n"]}
|
|
@@ -20,6 +20,7 @@ export default function Checkbox(props) {
|
|
|
20
20
|
const {
|
|
21
21
|
checked = false,
|
|
22
22
|
checkedIcon: checkedIconProp,
|
|
23
|
+
color = 'primary',
|
|
23
24
|
disabled = false,
|
|
24
25
|
icon: iconProp,
|
|
25
26
|
onChange,
|
|
@@ -27,8 +28,12 @@ export default function Checkbox(props) {
|
|
|
27
28
|
...otherProps
|
|
28
29
|
} = props;
|
|
29
30
|
const styles = useStyles();
|
|
30
|
-
const uncheckedIcon = iconProp ? iconProp : /*#__PURE__*/React.createElement(CheckboxIcon,
|
|
31
|
-
|
|
31
|
+
const uncheckedIcon = iconProp ? iconProp : /*#__PURE__*/React.createElement(CheckboxIcon, {
|
|
32
|
+
color: color
|
|
33
|
+
});
|
|
34
|
+
const checkedIcon = checkedIconProp ? checkedIconProp : /*#__PURE__*/React.createElement(CheckboxCheckedIcon, {
|
|
35
|
+
color: color
|
|
36
|
+
});
|
|
32
37
|
|
|
33
38
|
const handlePress = () => {
|
|
34
39
|
if (onChange) {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["Checkbox.tsx"],"names":["React","ButtonBase","Checkbox","CheckboxIcon","CheckboxChecked","CheckboxCheckedIcon","css","useStyles","root","width","height","justifyContent","alignItems","props","checked","checkedIcon","checkedIconProp","disabled","icon","iconProp","onChange","style","otherProps","styles","uncheckedIcon","handlePress","rootStyle"],"mappings":";;AAAA,OAAOA,KAAP,MAAkB,OAAlB;AAGA,OAAOC,UAAP,MAAuB,eAAvB;AACA,SAASC,QAAQ,IAAIC,YAArB,EAAmCC,eAAe,IAAIC,mBAAtD,QAAiF,mBAAjF;AACA,SAASC,GAAT,QAAoB,WAApB;;AAIA,MAAMC,SAAmC,GAAG,YAA2B;AACnE,SAAO;AACHC,IAAAA,IAAI,EAAE;AACFC,MAAAA,KAAK,EAAE,EADL;AAEFC,MAAAA,MAAM,EAAE,EAFN;AAGFC,MAAAA,cAAc,EAAE,QAHd;AAIFC,MAAAA,UAAU,EAAE;AAJV;AADH,GAAP;AAQH,CATD;;AAWA,eAAe,SAASV,QAAT,CAAkBW,KAAlB,EAAwC;AACnD,QAAM;AACFC,IAAAA,OAAO,GAAG,KADR;AAEFC,IAAAA,WAAW,EAAEC,eAFX;AAGFC,IAAAA,
|
|
1
|
+
{"version":3,"sources":["Checkbox.tsx"],"names":["React","ButtonBase","Checkbox","CheckboxIcon","CheckboxChecked","CheckboxCheckedIcon","css","useStyles","root","width","height","justifyContent","alignItems","props","checked","checkedIcon","checkedIconProp","color","disabled","icon","iconProp","onChange","style","otherProps","styles","uncheckedIcon","handlePress","rootStyle"],"mappings":";;AAAA,OAAOA,KAAP,MAAkB,OAAlB;AAGA,OAAOC,UAAP,MAAuB,eAAvB;AACA,SAASC,QAAQ,IAAIC,YAArB,EAAmCC,eAAe,IAAIC,mBAAtD,QAAiF,mBAAjF;AACA,SAASC,GAAT,QAAoB,WAApB;;AAIA,MAAMC,SAAmC,GAAG,YAA2B;AACnE,SAAO;AACHC,IAAAA,IAAI,EAAE;AACFC,MAAAA,KAAK,EAAE,EADL;AAEFC,MAAAA,MAAM,EAAE,EAFN;AAGFC,MAAAA,cAAc,EAAE,QAHd;AAIFC,MAAAA,UAAU,EAAE;AAJV;AADH,GAAP;AAQH,CATD;;AAWA,eAAe,SAASV,QAAT,CAAkBW,KAAlB,EAAwC;AACnD,QAAM;AACFC,IAAAA,OAAO,GAAG,KADR;AAEFC,IAAAA,WAAW,EAAEC,eAFX;AAGFC,IAAAA,KAAK,GAAG,SAHN;AAIFC,IAAAA,QAAQ,GAAG,KAJT;AAKFC,IAAAA,IAAI,EAAEC,QALJ;AAMFC,IAAAA,QANE;AAOFC,IAAAA,KAPE;AAQF,OAAGC;AARD,MASFV,KATJ;AAWA,QAAMW,MAAM,GAAGjB,SAAS,EAAxB;AAEA,QAAMkB,aAAa,GAAGL,QAAQ,GAAGA,QAAH,gBAAc,oBAAC,YAAD;AAAc,IAAA,KAAK,EAAEH;AAArB,IAA5C;AACA,QAAMF,WAAW,GAAGC,eAAe,GAAGA,eAAH,gBAAqB,oBAAC,mBAAD;AAAqB,IAAA,KAAK,EAAEC;AAA5B,IAAxD;;AAEA,QAAMS,WAAW,GAAG,MAAM;AACtB,QAAIL,QAAJ,EAAc;AACVA,MAAAA,QAAQ,CAAC,CAACP,OAAF,CAAR;AACH;AACJ,GAJD;;AAMA,QAAMa,SAAS,GAAGrB,GAAG,CAAC,CAClBkB,MAAM,CAAChB,IADW,EAElBc,KAFkB,CAAD,CAArB;AAKA,sBACI,oBAAC,UAAD;AACI,IAAA,QAAQ,EAAEJ,QADd;AAEI,IAAA,OAAO,EAAEQ,WAFb;AAGI,IAAA,KAAK,EAAEC;AAHX,KAIQJ,UAJR,GAMKT,OAAO,GACFC,WADE,GAEFU,aARV,CADJ;AAaH;AAAA","sourcesContent":["import React from 'react';\nimport { NamedStylesStringUnion, UseStyles } from '@fountain-ui/styles';\nimport type CheckboxProps from './CheckboxProps';\nimport ButtonBase from '../ButtonBase';\nimport { Checkbox as CheckboxIcon, CheckboxChecked as CheckboxCheckedIcon } from '../internal/icons';\nimport { css } from '../styles';\n\ntype CheckboxStyle = NamedStylesStringUnion<'root'>;\n\nconst useStyles: UseStyles<CheckboxStyle> = function (): CheckboxStyle {\n return {\n root: {\n width: 24,\n height: 24,\n justifyContent: 'center',\n alignItems: 'center',\n },\n };\n};\n\nexport default function Checkbox(props: CheckboxProps) {\n const {\n checked = false,\n checkedIcon: checkedIconProp,\n color = 'primary',\n disabled = false,\n icon: iconProp,\n onChange,\n style,\n ...otherProps\n } = props;\n\n const styles = useStyles();\n\n const uncheckedIcon = iconProp ? iconProp : <CheckboxIcon color={color}/>;\n const checkedIcon = checkedIconProp ? checkedIconProp : <CheckboxCheckedIcon color={color}/>;\n\n const handlePress = () => {\n if (onChange) {\n onChange(!checked);\n }\n };\n\n const rootStyle = css([\n styles.root,\n style,\n ]);\n\n return (\n <ButtonBase\n disabled={disabled}\n onPress={handlePress}\n style={rootStyle}\n {...otherProps}\n >\n {checked\n ? checkedIcon\n : uncheckedIcon\n }\n </ButtonBase>\n );\n};\n"]}
|
|
@@ -2,9 +2,10 @@ function _extends() { _extends = Object.assign || function (target) { for (var i
|
|
|
2
2
|
|
|
3
3
|
import React from 'react';
|
|
4
4
|
import { Text } from 'react-native';
|
|
5
|
-
import {
|
|
5
|
+
import { createFontStyle, css, useTheme } from '../styles';
|
|
6
|
+
import { cloneElementSafely } from '../utils';
|
|
6
7
|
import ButtonBase from '../ButtonBase';
|
|
7
|
-
const ICON_SIZE =
|
|
8
|
+
const ICON_SIZE = 16;
|
|
8
9
|
|
|
9
10
|
const useStyles = function () {
|
|
10
11
|
const theme = useTheme();
|
|
@@ -63,14 +64,13 @@ export default function Chip(props) {
|
|
|
63
64
|
const textStyle = css([fontStyle, textMarginStyle, {
|
|
64
65
|
textAlign: 'center'
|
|
65
66
|
}]);
|
|
66
|
-
const
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
});
|
|
67
|
+
const iconProps = {
|
|
68
|
+
width: ICON_SIZE,
|
|
69
|
+
height: ICON_SIZE,
|
|
70
|
+
colorValue: fontColor
|
|
71
|
+
};
|
|
72
|
+
const startIcon = cloneElementSafely(startIconProp, iconProps);
|
|
73
|
+
const endIcon = cloneElementSafely(endIconProp, iconProps);
|
|
74
74
|
return /*#__PURE__*/React.createElement(ButtonBase, _extends({
|
|
75
75
|
onPress: onPress,
|
|
76
76
|
style: chipStyle
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["Chip.tsx"],"names":["React","Text","
|
|
1
|
+
{"version":3,"sources":["Chip.tsx"],"names":["React","Text","createFontStyle","css","useTheme","cloneElementSafely","ButtonBase","ICON_SIZE","useStyles","theme","root","alignItems","borderRadius","flexDirection","height","justifyContent","paddingLeft","spacing","paddingRight","Chip","props","children","endIcon","endIconProp","onPress","startIcon","startIconProp","style","styleProp","variant","otherProps","styles","fontColor","palette","tertiary","main","primary","variantStyleMap","outlined","backgroundColor","paper","default","borderColor","border","borderWidth","filled","grey","bold","chipStyle","fontStyle","selector","typo","subtitle2","color","textMarginSize","textMarginStyle","marginLeft","marginRight","undefined","textStyle","textAlign","iconProps","width","colorValue"],"mappings":"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","sourcesContent":["import React from 'react';\nimport { Text } from 'react-native';\nimport { NamedStylesStringUnion, UseStyles } from '@fountain-ui/styles';\nimport { createFontStyle, css, useTheme } from '../styles';\nimport { cloneElementSafely } from '../utils';\nimport ButtonBase from '../ButtonBase';\nimport type ChipProps from './ChipProps';\n\ntype ChipStyles = NamedStylesStringUnion<'root'>;\n\nconst ICON_SIZE = 16;\n\nconst useStyles: UseStyles<ChipStyles> = function (): ChipStyles {\n const theme = useTheme();\n\n return {\n root: {\n alignItems: 'center',\n borderRadius: 20,\n flexDirection: 'row',\n height: 32,\n justifyContent: 'center',\n paddingLeft: theme.spacing(2),\n paddingRight: theme.spacing(2),\n },\n };\n};\n\nexport default function Chip(props: ChipProps) {\n const {\n children,\n endIcon: endIconProp,\n onPress,\n startIcon: startIconProp,\n style: styleProp,\n variant = 'outlined',\n ...otherProps\n } = props;\n\n const theme = useTheme();\n const styles = useStyles();\n\n const fontColor = variant === 'outlined'\n ? theme.palette.tertiary.main\n : theme.palette.primary.main;\n\n const variantStyleMap = {\n outlined: {\n backgroundColor: theme.palette.paper.default,\n borderColor: theme.palette.border,\n borderWidth: 2,\n },\n filled: {\n backgroundColor: theme.palette.paper.grey,\n },\n bold: {\n backgroundColor: theme.palette.paper.grey,\n borderColor: theme.palette.primary.main,\n borderWidth: 2,\n },\n };\n\n const chipStyle = css([\n styles.root,\n variantStyleMap[variant],\n styleProp,\n ]);\n\n const fontStyle = createFontStyle(theme, {\n selector: (typo) => typo.subtitle2,\n color: fontColor,\n });\n\n const textMarginSize = theme.spacing(1);\n const textMarginStyle = startIconProp\n ? { marginLeft: textMarginSize }\n : endIconProp\n ? { marginRight: textMarginSize }\n : undefined;\n\n const textStyle = css([\n fontStyle,\n textMarginStyle,\n { textAlign: 'center' },\n ]);\n\n const iconProps = {\n width: ICON_SIZE,\n height: ICON_SIZE,\n colorValue: fontColor,\n };\n\n const startIcon = cloneElementSafely(startIconProp, iconProps);\n const endIcon = cloneElementSafely(endIconProp, iconProps);\n\n return (\n <ButtonBase\n onPress={onPress}\n style={chipStyle}\n {...otherProps}\n >\n {startIcon}\n\n <Text\n children={children}\n style={textStyle}\n />\n\n {endIcon}\n </ButtonBase>\n );\n}\n"]}
|
package/build/module/Fab/Fab.js
CHANGED
|
@@ -4,9 +4,14 @@ import React from 'react';
|
|
|
4
4
|
import { Text } from 'react-native';
|
|
5
5
|
import ButtonBase from '../ButtonBase';
|
|
6
6
|
import { useElevationStyle } from '../hooks';
|
|
7
|
-
import {
|
|
7
|
+
import { createFontStyle, css, StyleSheet, useTheme } from '../styles';
|
|
8
|
+
import { cloneElementSafely } from '../utils';
|
|
8
9
|
const SMALL = 32;
|
|
9
10
|
const MEDIUM = 48;
|
|
11
|
+
const iconSizes = {
|
|
12
|
+
small: 20,
|
|
13
|
+
medium: 24
|
|
14
|
+
};
|
|
10
15
|
const styles = StyleSheet.create({
|
|
11
16
|
medium: {
|
|
12
17
|
borderRadius: MEDIUM * 0.5,
|
|
@@ -45,9 +50,10 @@ export default function Fab(props) {
|
|
|
45
50
|
const theme = useTheme();
|
|
46
51
|
const backgroundColor = theme.palette[color].main;
|
|
47
52
|
const fontColor = theme.palette[color].contrastTextColor;
|
|
48
|
-
const icon =
|
|
49
|
-
size,
|
|
50
|
-
|
|
53
|
+
const icon = cloneElementSafely(children, {
|
|
54
|
+
width: iconSizes[size],
|
|
55
|
+
height: iconSizes[size],
|
|
56
|
+
colorValue: fontColor
|
|
51
57
|
});
|
|
52
58
|
const elevationStyle = useElevationStyle(elevation);
|
|
53
59
|
const width = variant === 'circular' ? size === 'medium' ? MEDIUM : SMALL : undefined;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["Fab.tsx"],"names":["React","Text","ButtonBase","useElevationStyle","
|
|
1
|
+
{"version":3,"sources":["Fab.tsx"],"names":["React","Text","ButtonBase","useElevationStyle","createFontStyle","css","StyleSheet","useTheme","cloneElementSafely","SMALL","MEDIUM","iconSizes","small","medium","styles","create","borderRadius","height","root","alignItems","justifyContent","row","flexDirection","reverse","Fab","props","children","color","disabled","elevation","label","numberOfLines","onPress","size","style","styleProp","variant","otherProps","theme","backgroundColor","palette","main","fontColor","contrastTextColor","icon","width","colorValue","elevationStyle","undefined","paddingSize","spacing","iconPadding","paddingLeft","paddingRight","buttonBaseStyle","fontStyle","selector","typo","button2","button1","textMarginSize","textMarginStyle","marginRight","marginLeft","textStyle","handlePress"],"mappings":"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","sourcesContent":["import React from 'react';\nimport { Text } from 'react-native';\nimport ButtonBase from '../ButtonBase';\nimport { useElevationStyle } from '../hooks';\nimport { createFontStyle, css, StyleSheet, useTheme } from '../styles';\nimport { cloneElementSafely } from '../utils';\nimport type FabProps from './FabProps';\nimport type { FabSize } from './FabProps';\n\nconst SMALL = 32;\nconst MEDIUM = 48;\n\ntype IconSizes = { [n in FabSize]: number };\n\nconst iconSizes: IconSizes = {\n small: 20,\n medium: 24,\n};\n\nconst styles = StyleSheet.create({\n medium: {\n borderRadius: MEDIUM * 0.5,\n height: MEDIUM,\n },\n root: {\n alignItems: 'center',\n justifyContent: 'center',\n },\n row: {\n flexDirection: 'row',\n },\n reverse: {\n flexDirection: 'row-reverse',\n },\n small: {\n borderRadius: SMALL * 0.5,\n height: SMALL,\n },\n});\n\nexport default function Fab(props: FabProps) {\n const {\n children,\n color = 'primary',\n disabled = false,\n elevation = 2,\n label,\n numberOfLines = 1,\n onPress,\n reverse,\n size = 'medium',\n style: styleProp,\n variant = 'circular',\n ...otherProps\n } = props;\n\n const theme = useTheme();\n\n const backgroundColor = theme.palette[color].main;\n const fontColor = theme.palette[color].contrastTextColor;\n\n const icon = cloneElementSafely(children, {\n width: iconSizes[size],\n height: iconSizes[size],\n colorValue: fontColor,\n });\n\n const elevationStyle = useElevationStyle(elevation);\n const width = variant === 'circular' ? (size === 'medium' ? MEDIUM : SMALL) : undefined;\n const paddingSize = size === 'medium' ? theme.spacing(5) : theme.spacing(3);\n const iconPadding = icon ? paddingSize - theme.spacing(1) : paddingSize;\n\n const paddingLeft = variant === 'circular'\n ? undefined\n : icon\n ? (reverse ? paddingSize : iconPadding)\n : paddingSize;\n\n const paddingRight = variant === 'circular'\n ? undefined\n : icon\n ? (reverse ? iconPadding : paddingSize)\n : paddingSize;\n\n const buttonBaseStyle = css([\n styles.root,\n reverse ? styles.reverse : styles.row,\n size === 'medium' ? styles.medium : styles.small,\n { width, backgroundColor, paddingLeft, paddingRight },\n elevationStyle,\n styleProp,\n ]);\n\n const fontStyle = createFontStyle(theme, {\n selector: (typo) => size === 'small' ? typo.button2 : typo.button1,\n color: fontColor,\n });\n\n const textMarginSize = size === 'small' ? theme.spacing(1) : theme.spacing(2);\n const textMarginStyle = icon\n ? (reverse ? { marginRight: textMarginSize } : { marginLeft: textMarginSize })\n : undefined;\n\n const textStyle = css([\n fontStyle,\n textMarginStyle,\n ]);\n\n const handlePress = async () => {\n if (disabled) {\n return;\n }\n if (onPress) {\n onPress();\n return;\n }\n };\n\n return (\n <ButtonBase\n disabled={disabled}\n onPress={handlePress}\n style={buttonBaseStyle}\n {...otherProps}\n >\n {icon}\n\n {variant === 'extended' && label ? (\n <Text\n children={label}\n numberOfLines={numberOfLines}\n style={textStyle}\n />\n ) : null}\n </ButtonBase>\n );\n};\n"]}
|
|
@@ -3,7 +3,14 @@ function _extends() { _extends = Object.assign || function (target) { for (var i
|
|
|
3
3
|
import React from 'react';
|
|
4
4
|
import { Text } from 'react-native';
|
|
5
5
|
import ButtonBase from '../ButtonBase';
|
|
6
|
-
import {
|
|
6
|
+
import { createFontStyle, css, useTheme } from '../styles';
|
|
7
|
+
import { cloneElementSafely } from '../utils';
|
|
8
|
+
const iconSizes = {
|
|
9
|
+
tiny: 16,
|
|
10
|
+
small: 20,
|
|
11
|
+
medium: 24,
|
|
12
|
+
large: 28
|
|
13
|
+
};
|
|
7
14
|
|
|
8
15
|
const useStyles = function () {
|
|
9
16
|
const theme = useTheme();
|
|
@@ -30,9 +37,10 @@ export default function IconButton(props) {
|
|
|
30
37
|
} = props;
|
|
31
38
|
const theme = useTheme();
|
|
32
39
|
const styles = useStyles();
|
|
33
|
-
const icon =
|
|
34
|
-
|
|
35
|
-
size
|
|
40
|
+
const icon = cloneElementSafely(children, {
|
|
41
|
+
width: iconSizes[size],
|
|
42
|
+
height: iconSizes[size],
|
|
43
|
+
color: color
|
|
36
44
|
});
|
|
37
45
|
const fontStyle = createFontStyle(theme, {
|
|
38
46
|
selector: typo => typo.caption1,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["IconButton.tsx"],"names":["React","Text","ButtonBase","
|
|
1
|
+
{"version":3,"sources":["IconButton.tsx"],"names":["React","Text","ButtonBase","createFontStyle","css","useTheme","cloneElementSafely","iconSizes","tiny","small","medium","large","useStyles","theme","root","flexDirection","justifyContent","alignItems","padding","spacing","IconButton","props","children","color","disabled","label","onPress","size","style","otherProps","styles","icon","width","height","fontStyle","selector","typo","caption1","palette","main","labelStyle","rootStyle","handlePress"],"mappings":";;AAAA,OAAOA,KAAP,MAAkB,OAAlB;AACA,SAASC,IAAT,QAAqB,cAArB;AAEA,OAAOC,UAAP,MAAuB,eAAvB;AACA,SAASC,eAAT,EAA0BC,GAA1B,EAA+BC,QAA/B,QAA+C,WAA/C;AACA,SAASC,kBAAT,QAAmC,UAAnC;AAQA,MAAMC,SAAoB,GAAG;AACzBC,EAAAA,IAAI,EAAE,EADmB;AAEzBC,EAAAA,KAAK,EAAE,EAFkB;AAGzBC,EAAAA,MAAM,EAAE,EAHiB;AAIzBC,EAAAA,KAAK,EAAE;AAJkB,CAA7B;;AAOA,MAAMC,SAAsC,GAAG,YAA8B;AACzE,QAAMC,KAAK,GAAGR,QAAQ,EAAtB;AAEA,SAAO;AACHS,IAAAA,IAAI,EAAE;AACFC,MAAAA,aAAa,EAAE,QADb;AAEFC,MAAAA,cAAc,EAAE,QAFd;AAGFC,MAAAA,UAAU,EAAE,QAHV;AAIFC,MAAAA,OAAO,EAAEL,KAAK,CAACM,OAAN,CAAc,CAAd;AAJP;AADH,GAAP;AAQH,CAXD;;AAaA,eAAe,SAASC,UAAT,CAAoBC,KAApB,EAA4C;AACvD,QAAM;AACFC,IAAAA,QADE;AAEFC,IAAAA,KAAK,GAAG,SAFN;AAGFC,IAAAA,QAAQ,GAAG,KAHT;AAIFC,IAAAA,KAJE;AAKFC,IAAAA,OALE;AAMFC,IAAAA,IAAI,GAAG,QANL;AAOFC,IAAAA,KAPE;AAQF,OAAGC;AARD,MASFR,KATJ;AAWA,QAAMR,KAAK,GAAGR,QAAQ,EAAtB;AACA,QAAMyB,MAAM,GAAGlB,SAAS,EAAxB;AAEA,QAAMmB,IAAI,GAAGzB,kBAAkB,CAACgB,QAAD,EAAW;AACtCU,IAAAA,KAAK,EAAEzB,SAAS,CAACoB,IAAD,CADsB;AAEtCM,IAAAA,MAAM,EAAE1B,SAAS,CAACoB,IAAD,CAFqB;AAGtCJ,IAAAA,KAAK,EAAEA;AAH+B,GAAX,CAA/B;AAMA,QAAMW,SAAS,GAAG/B,eAAe,CAACU,KAAD,EAAQ;AACrCsB,IAAAA,QAAQ,EAAGC,IAAD,IAAUA,IAAI,CAACC,QADY;AAErCd,IAAAA,KAAK,EAAEV,KAAK,CAACyB,OAAN,CAAcf,KAAd,EAAqBgB;AAFS,GAAR,CAAjC;AAKA,QAAMC,UAAU,GAAGpC,GAAG,CAAC,CACnB8B,SADmB,CAAD,CAAtB;AAIA,QAAMO,SAAS,GAAGrC,GAAG,CAAC,CAClB0B,MAAM,CAAChB,IADW,EAElBc,KAFkB,CAAD,CAArB;;AAKA,QAAMc,WAAW,GAAG,YAAY;AAC5B,QAAIlB,QAAJ,EAAc;AACV;AACH;;AACD,QAAIE,OAAJ,EAAa;AACTA,MAAAA,OAAO;AACP;AACH;AACJ,GARD;;AAUA,sBACI,oBAAC,UAAD;AACI,IAAA,QAAQ,EAAEF,QADd;AAEI,IAAA,OAAO,EAAEkB,WAFb;AAGI,IAAA,KAAK,EAAED;AAHX,KAIQZ,UAJR,GAMKE,IANL,EAQKN,KAAK,gBACF,oBAAC,IAAD;AACI,IAAA,QAAQ,EAAEA,KADd;AAEI,IAAA,KAAK,EAAEe;AAFX,IADE,GAKF,IAbR,CADJ;AAiBH;AAAA","sourcesContent":["import React from 'react';\nimport { Text } from 'react-native';\nimport { NamedStylesStringUnion, UseStyles } from '@fountain-ui/styles';\nimport ButtonBase from '../ButtonBase';\nimport { createFontStyle, css, useTheme } from '../styles';\nimport { cloneElementSafely } from '../utils';\nimport type IconButtonProps from './IconButtonProps';\nimport type { IconButtonSize } from './IconButtonProps';\n\ntype IconButtonStyles = NamedStylesStringUnion<'root'>;\n\ntype IconSizes = { [n in IconButtonSize]: number };\n\nconst iconSizes: IconSizes = {\n tiny: 16,\n small: 20,\n medium: 24,\n large: 28,\n};\n\nconst useStyles: UseStyles<IconButtonStyles> = function (): IconButtonStyles {\n const theme = useTheme();\n\n return {\n root: {\n flexDirection: 'column',\n justifyContent: 'center',\n alignItems: 'center',\n padding: theme.spacing(1),\n },\n };\n};\n\nexport default function IconButton(props: IconButtonProps) {\n const {\n children,\n color = 'primary',\n disabled = false,\n label,\n onPress,\n size = 'medium',\n style,\n ...otherProps\n } = props;\n\n const theme = useTheme();\n const styles = useStyles();\n\n const icon = cloneElementSafely(children, {\n width: iconSizes[size],\n height: iconSizes[size],\n color: color,\n });\n\n const fontStyle = createFontStyle(theme, {\n selector: (typo) => typo.caption1,\n color: theme.palette[color].main,\n });\n\n const labelStyle = css([\n fontStyle,\n ]);\n\n const rootStyle = css([\n styles.root,\n style,\n ]);\n\n const handlePress = async () => {\n if (disabled) {\n return;\n }\n if (onPress) {\n onPress();\n return;\n }\n };\n\n return (\n <ButtonBase\n disabled={disabled}\n onPress={handlePress}\n style={rootStyle}\n {...otherProps}\n >\n {icon}\n\n {label ? (\n <Text\n children={label}\n style={labelStyle}\n />\n ) : null}\n </ButtonBase>\n );\n};\n"]}
|
|
@@ -35,17 +35,29 @@ export default function Image(props) {
|
|
|
35
35
|
source,
|
|
36
36
|
style,
|
|
37
37
|
square = false,
|
|
38
|
+
onLoad,
|
|
39
|
+
onError,
|
|
38
40
|
...otherProps
|
|
39
41
|
} = props;
|
|
40
42
|
const [failed, setFailed] = React.useState(false);
|
|
41
43
|
const styles = useStyles();
|
|
44
|
+
|
|
45
|
+
const handleError = () => {
|
|
46
|
+
if (onError) {
|
|
47
|
+
onError();
|
|
48
|
+
}
|
|
49
|
+
|
|
50
|
+
setFailed(true);
|
|
51
|
+
};
|
|
52
|
+
|
|
42
53
|
return /*#__PURE__*/React.createElement(View, _extends({
|
|
43
54
|
style: css([styles.root, !disableOutline ? styles.outlined : undefined, !disablePlaceholder ? styles.placeholder : undefined, !square ? styles.rounded : undefined, style])
|
|
44
55
|
}, otherProps), failed ? /*#__PURE__*/React.createElement(Text, null, alt) : /*#__PURE__*/React.createElement(ImageCore, {
|
|
45
56
|
alt: alt,
|
|
46
57
|
height: '100%',
|
|
47
58
|
loading: loading,
|
|
48
|
-
onError:
|
|
59
|
+
onError: handleError,
|
|
60
|
+
onLoad: onLoad,
|
|
49
61
|
resizeMode: resizeMode,
|
|
50
62
|
source: source,
|
|
51
63
|
width: '100%'
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["Image.tsx"],"names":["React","Text","View","ImageCore","css","StyleSheet","useTheme","useStyles","theme","root","rounded","borderRadius","shape","roundness","overflow","placeholder","backgroundColor","palette","paper","grey","outlined","borderWidth","hairlineWidth","borderStyle","borderColor","Image","props","alt","disableOutline","disablePlaceholder","loading","overlaidChildren","resizeMode","source","style","square","otherProps","failed","setFailed","useState","styles","undefined","absoluteFill"],"mappings":";;AAAA,OAAOA,KAAP,MAAkB,OAAlB;AACA,SAASC,IAAT,EAAeC,IAAf,QAA2B,cAA3B;AAEA,OAAOC,SAAP,MAAsB,cAAtB;AACA,SAASC,GAAT,EAAcC,UAAd,EAA0BC,QAA1B,QAA0C,WAA1C;;AAWA,MAAMC,SAAiC,GAAG,YAAyB;AAC/D,QAAMC,KAAK,GAAGF,QAAQ,EAAtB;AAEA,SAAO;AACHG,IAAAA,IAAI,EAAE,EADH;AAEHC,IAAAA,OAAO,EAAE;AACLC,MAAAA,YAAY,EAAEH,KAAK,CAACI,KAAN,CAAYC,SADrB;AAELC,MAAAA,QAAQ,EAAE;AAFL,KAFN;AAMHC,IAAAA,WAAW,EAAE;AACTC,MAAAA,eAAe,EAAER,KAAK,CAACS,OAAN,CAAcC,KAAd,CAAoBC;AAD5B,KANV;AASHC,IAAAA,QAAQ,EAAE;AACNC,MAAAA,WAAW,EAAEhB,UAAU,CAACiB,aADlB;AAENC,MAAAA,WAAW,EAAE,OAFP;AAGNC,MAAAA,WAAW,EAAEhB,KAAK,CAACS,OAAN,CAAcC,KAAd,CAAoBC;AAH3B;AATP,GAAP;AAeH,CAlBD;;AAoBA,eAAe,SAASM,KAAT,CAAeC,KAAf,EAAkC;AAC7C,QAAM;AACFC,IAAAA,GADE;AAEFC,IAAAA,cAFE;AAGFC,IAAAA,kBAHE;AAIFC,IAAAA,OAAO,GAAG,MAJR;AAKFC,IAAAA,gBALE;AAMFC,IAAAA,UAAU,GAAG,OANX;AAOFC,IAAAA,MAPE;AAQFC,IAAAA,KARE;AASFC,IAAAA,MAAM,GAAG,KATP;
|
|
1
|
+
{"version":3,"sources":["Image.tsx"],"names":["React","Text","View","ImageCore","css","StyleSheet","useTheme","useStyles","theme","root","rounded","borderRadius","shape","roundness","overflow","placeholder","backgroundColor","palette","paper","grey","outlined","borderWidth","hairlineWidth","borderStyle","borderColor","Image","props","alt","disableOutline","disablePlaceholder","loading","overlaidChildren","resizeMode","source","style","square","onLoad","onError","otherProps","failed","setFailed","useState","styles","handleError","undefined","absoluteFill"],"mappings":";;AAAA,OAAOA,KAAP,MAAkB,OAAlB;AACA,SAASC,IAAT,EAAeC,IAAf,QAA2B,cAA3B;AAEA,OAAOC,SAAP,MAAsB,cAAtB;AACA,SAASC,GAAT,EAAcC,UAAd,EAA0BC,QAA1B,QAA0C,WAA1C;;AAWA,MAAMC,SAAiC,GAAG,YAAyB;AAC/D,QAAMC,KAAK,GAAGF,QAAQ,EAAtB;AAEA,SAAO;AACHG,IAAAA,IAAI,EAAE,EADH;AAEHC,IAAAA,OAAO,EAAE;AACLC,MAAAA,YAAY,EAAEH,KAAK,CAACI,KAAN,CAAYC,SADrB;AAELC,MAAAA,QAAQ,EAAE;AAFL,KAFN;AAMHC,IAAAA,WAAW,EAAE;AACTC,MAAAA,eAAe,EAAER,KAAK,CAACS,OAAN,CAAcC,KAAd,CAAoBC;AAD5B,KANV;AASHC,IAAAA,QAAQ,EAAE;AACNC,MAAAA,WAAW,EAAEhB,UAAU,CAACiB,aADlB;AAENC,MAAAA,WAAW,EAAE,OAFP;AAGNC,MAAAA,WAAW,EAAEhB,KAAK,CAACS,OAAN,CAAcC,KAAd,CAAoBC;AAH3B;AATP,GAAP;AAeH,CAlBD;;AAoBA,eAAe,SAASM,KAAT,CAAeC,KAAf,EAAkC;AAC7C,QAAM;AACFC,IAAAA,GADE;AAEFC,IAAAA,cAFE;AAGFC,IAAAA,kBAHE;AAIFC,IAAAA,OAAO,GAAG,MAJR;AAKFC,IAAAA,gBALE;AAMFC,IAAAA,UAAU,GAAG,OANX;AAOFC,IAAAA,MAPE;AAQFC,IAAAA,KARE;AASFC,IAAAA,MAAM,GAAG,KATP;AAUFC,IAAAA,MAVE;AAWFC,IAAAA,OAXE;AAYF,OAAGC;AAZD,MAaFZ,KAbJ;AAeA,QAAM,CAACa,MAAD,EAASC,SAAT,IAAsBxC,KAAK,CAACyC,QAAN,CAAe,KAAf,CAA5B;AAEA,QAAMC,MAAM,GAAGnC,SAAS,EAAxB;;AAEA,QAAMoC,WAAW,GAAG,MAAM;AACtB,QAAGN,OAAH,EAAW;AACPA,MAAAA,OAAO;AACV;;AAEDG,IAAAA,SAAS,CAAC,IAAD,CAAT;AACH,GAND;;AAQA,sBACI,oBAAC,IAAD;AACI,IAAA,KAAK,EAAEpC,GAAG,CAAC,CACPsC,MAAM,CAACjC,IADA,EAEP,CAACmB,cAAD,GAAkBc,MAAM,CAACtB,QAAzB,GAAoCwB,SAF7B,EAGP,CAACf,kBAAD,GAAsBa,MAAM,CAAC3B,WAA7B,GAA2C6B,SAHpC,EAIP,CAACT,MAAD,GAAUO,MAAM,CAAChC,OAAjB,GAA2BkC,SAJpB,EAKPV,KALO,CAAD;AADd,KAQQI,UARR,GAUKC,MAAM,gBACH,oBAAC,IAAD,QAAOZ,GAAP,CADG,gBAGH,oBAAC,SAAD;AACI,IAAA,GAAG,EAAEA,GADT;AAEI,IAAA,MAAM,EAAE,MAFZ;AAGI,IAAA,OAAO,EAAEG,OAHb;AAII,IAAA,OAAO,EAAEa,WAJb;AAKI,IAAA,MAAM,EAAEP,MALZ;AAMI,IAAA,UAAU,EAAEJ,UANhB;AAOI,IAAA,MAAM,EAAEC,MAPZ;AAQI,IAAA,KAAK,EAAE;AARX,IAbR,EAyBKF,gBAAgB,gBACb,oBAAC,IAAD;AAAM,IAAA,KAAK,EAAE1B,UAAU,CAACwC;AAAxB,KACKd,gBADL,CADa,GAIb,IA7BR,CADJ;AAiCH;AAAA","sourcesContent":["import React from 'react';\nimport { Text, View } from 'react-native';\nimport type { NamedStylesStringUnion, UseStyles } from '@fountain-ui/styles';\nimport ImageCore from '../ImageCore';\nimport { css, StyleSheet, useTheme } from '../styles';\nimport type ImageProps from './ImageProps';\n\ntype ImageStyleKeys =\n | 'root'\n | 'rounded'\n | 'placeholder'\n | 'outlined';\n\ntype ImageStyles = NamedStylesStringUnion<ImageStyleKeys>;\n\nconst useStyles: UseStyles<ImageStyles> = function (): ImageStyles {\n const theme = useTheme();\n\n return {\n root: {},\n rounded: {\n borderRadius: theme.shape.roundness,\n overflow: 'hidden',\n },\n placeholder: {\n backgroundColor: theme.palette.paper.grey,\n },\n outlined: {\n borderWidth: StyleSheet.hairlineWidth,\n borderStyle: 'solid',\n borderColor: theme.palette.paper.grey,\n },\n };\n};\n\nexport default function Image(props: ImageProps) {\n const {\n alt,\n disableOutline,\n disablePlaceholder,\n loading = 'lazy',\n overlaidChildren,\n resizeMode = 'cover',\n source,\n style,\n square = false,\n onLoad,\n onError,\n ...otherProps\n } = props;\n\n const [failed, setFailed] = React.useState(false);\n\n const styles = useStyles();\n\n const handleError = () => {\n if(onError){\n onError();\n }\n\n setFailed(true);\n }\n\n return (\n <View\n style={css([\n styles.root,\n !disableOutline ? styles.outlined : undefined,\n !disablePlaceholder ? styles.placeholder : undefined,\n !square ? styles.rounded : undefined,\n style,\n ])}\n {...otherProps}\n >\n {failed ? (\n <Text>{alt}</Text>\n ) : (\n <ImageCore\n alt={alt}\n height={'100%'}\n loading={loading}\n onError={handleError}\n onLoad={onLoad}\n resizeMode={resizeMode}\n source={source}\n width={'100%'}\n />\n )}\n\n {overlaidChildren ? (\n <View style={StyleSheet.absoluteFill}>\n {overlaidChildren}\n </View>\n ) : null}\n </View>\n );\n};\n"]}
|
|
@@ -5,6 +5,7 @@ import ButtonBase from '../ButtonBase';
|
|
|
5
5
|
import { Radio as RadioIcon, RadioChecked as RadioCheckedIcon } from '../internal';
|
|
6
6
|
import { css, useTheme } from '../styles';
|
|
7
7
|
import { RadioContext } from '../RadioGroup/RadioContextProvider';
|
|
8
|
+
const ICON_SIZE = 20;
|
|
8
9
|
|
|
9
10
|
const useStyles = function () {
|
|
10
11
|
return {
|
|
@@ -42,22 +43,21 @@ export default function Radio(props) {
|
|
|
42
43
|
};
|
|
43
44
|
|
|
44
45
|
const isChecked = (_ref = (context === null || context === void 0 ? void 0 : context.value) === value) !== null && _ref !== void 0 ? _ref : checked;
|
|
45
|
-
const
|
|
46
|
-
|
|
46
|
+
const icon = isChecked ? /*#__PURE__*/React.createElement(RadioCheckedIcon, {
|
|
47
|
+
width: ICON_SIZE,
|
|
48
|
+
height: ICON_SIZE,
|
|
49
|
+
color: 'primary'
|
|
50
|
+
}) : /*#__PURE__*/React.createElement(RadioIcon, {
|
|
51
|
+
width: ICON_SIZE,
|
|
52
|
+
height: ICON_SIZE,
|
|
53
|
+
color: 'tertiary'
|
|
54
|
+
});
|
|
47
55
|
const rootStyle = css([styles.root, style]);
|
|
48
56
|
return /*#__PURE__*/React.createElement(ButtonBase, _extends({
|
|
49
57
|
disabled: disabled,
|
|
50
58
|
onPress: handlePress,
|
|
51
59
|
style: rootStyle
|
|
52
|
-
}, otherProps),
|
|
53
|
-
fill: checkedColor,
|
|
54
|
-
height: 20,
|
|
55
|
-
width: 20
|
|
56
|
-
}) : /*#__PURE__*/React.createElement(RadioIcon, {
|
|
57
|
-
fill: color,
|
|
58
|
-
height: 20,
|
|
59
|
-
width: 20
|
|
60
|
-
}), children ? children : null);
|
|
60
|
+
}, otherProps), icon, children ? children : null);
|
|
61
61
|
}
|
|
62
62
|
;
|
|
63
63
|
//# sourceMappingURL=Radio.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["Radio.tsx"],"names":["React","ButtonBase","Radio","RadioIcon","RadioChecked","RadioCheckedIcon","css","useTheme","RadioContext","useStyles","root","alignItems","flexDirection","props","checked","children","disabled","onChange","onChangeProp","style","value","otherProps","styles","theme","context","useContext","handlePress","isChecked","
|
|
1
|
+
{"version":3,"sources":["Radio.tsx"],"names":["React","ButtonBase","Radio","RadioIcon","RadioChecked","RadioCheckedIcon","css","useTheme","RadioContext","ICON_SIZE","useStyles","root","alignItems","flexDirection","props","checked","children","disabled","onChange","onChangeProp","style","value","otherProps","styles","theme","context","useContext","handlePress","isChecked","icon","rootStyle"],"mappings":";;AAAA,OAAOA,KAAP,MAAkB,OAAlB;AAEA,OAAOC,UAAP,MAAuB,eAAvB;AACA,SAASC,KAAK,IAAIC,SAAlB,EAA6BC,YAAY,IAAIC,gBAA7C,QAAqE,aAArE;AACA,SAASC,GAAT,EAAcC,QAAd,QAA8B,WAA9B;AACA,SAASC,YAAT,QAA6B,oCAA7B;AAKA,MAAMC,SAAS,GAAG,EAAlB;;AAEA,MAAMC,SAAiC,GAAG,YAAyB;AAC/D,SAAO;AACHC,IAAAA,IAAI,EAAE;AACFC,MAAAA,UAAU,EAAE,QADV;AAEFC,MAAAA,aAAa,EAAE;AAFb;AADH,GAAP;AAMH,CAPD;;AASA,eAAe,SAASX,KAAT,CAAeY,KAAf,EAAkC;AAAA;;AAC7C,QAAM;AACFC,IAAAA,OAAO,GAAG,KADR;AAEFC,IAAAA,QAFE;AAGFC,IAAAA,QAAQ,GAAG,KAHT;AAIFC,IAAAA,QAAQ,EAAEC,YAJR;AAKFC,IAAAA,KALE;AAMFC,IAAAA,KANE;AAOF,OAAGC;AAPD,MAQFR,KARJ;AAUA,QAAMS,MAAM,GAAGb,SAAS,EAAxB;AAEA,QAAMc,KAAK,GAAGjB,QAAQ,EAAtB;AAEA,QAAMkB,OAAO,GAAGzB,KAAK,CAAC0B,UAAN,CAAiBlB,YAAjB,CAAhB;;AAEA,QAAMmB,WAAW,GAAG,MAAM;AAAA;;AACtB,UAAMT,QAAQ,wBAAGO,OAAH,aAAGA,OAAH,uBAAGA,OAAO,CAAEP,QAAZ,iEAAwBC,YAAtC;;AACA,QAAID,QAAJ,EAAc;AACVA,MAAAA,QAAQ,CAACG,KAAD,CAAR;AACH;AACJ,GALD;;AAOA,QAAMO,SAAS,WAAG,CAAAH,OAAO,SAAP,IAAAA,OAAO,WAAP,YAAAA,OAAO,CAAEJ,KAAT,MAAmBA,KAAtB,uCAA+BN,OAA9C;AAEA,QAAMc,IAAI,GAAGD,SAAS,gBAChB,oBAAC,gBAAD;AAAkB,IAAA,KAAK,EAAEnB,SAAzB;AAAoC,IAAA,MAAM,EAAEA,SAA5C;AAAuD,IAAA,KAAK,EAAE;AAA9D,IADgB,gBAEhB,oBAAC,SAAD;AAAW,IAAA,KAAK,EAAEA,SAAlB;AAA6B,IAAA,MAAM,EAAEA,SAArC;AAAgD,IAAA,KAAK,EAAE;AAAvD,IAFN;AAIA,QAAMqB,SAAS,GAAGxB,GAAG,CAAC,CAClBiB,MAAM,CAACZ,IADW,EAElBS,KAFkB,CAAD,CAArB;AAKA,sBACI,oBAAC,UAAD;AACI,IAAA,QAAQ,EAAEH,QADd;AAEI,IAAA,OAAO,EAAEU,WAFb;AAGI,IAAA,KAAK,EAAEG;AAHX,KAIQR,UAJR,GAMKO,IANL,EAQKb,QAAQ,GAAGA,QAAH,GAAc,IAR3B,CADJ;AAYH;AAAA","sourcesContent":["import React from 'react';\nimport { NamedStylesStringUnion, UseStyles } from '@fountain-ui/styles';\nimport ButtonBase from '../ButtonBase';\nimport { Radio as RadioIcon, RadioChecked as RadioCheckedIcon } from '../internal';\nimport { css, useTheme } from '../styles';\nimport { RadioContext } from '../RadioGroup/RadioContextProvider';\nimport type RadioProps from './RadioProps';\n\ntype RadioStyles = NamedStylesStringUnion<'root'>;\n\nconst ICON_SIZE = 20;\n\nconst useStyles: UseStyles<RadioStyles> = function (): RadioStyles {\n return {\n root: {\n alignItems: 'center',\n flexDirection: 'row',\n },\n };\n};\n\nexport default function Radio(props: RadioProps) {\n const {\n checked = false,\n children,\n disabled = false,\n onChange: onChangeProp,\n style,\n value,\n ...otherProps\n } = props;\n\n const styles = useStyles();\n\n const theme = useTheme();\n\n const context = React.useContext(RadioContext);\n\n const handlePress = () => {\n const onChange = context?.onChange ?? onChangeProp;\n if (onChange) {\n onChange(value);\n }\n };\n\n const isChecked = context?.value === value ?? checked;\n\n const icon = isChecked\n ? <RadioCheckedIcon width={ICON_SIZE} height={ICON_SIZE} color={'primary'}/>\n : <RadioIcon width={ICON_SIZE} height={ICON_SIZE} color={'tertiary'}/>;\n\n const rootStyle = css([\n styles.root,\n style,\n ]);\n\n return (\n <ButtonBase\n disabled={disabled}\n onPress={handlePress}\n style={rootStyle}\n {...otherProps}\n >\n {icon}\n\n {children ? children : null}\n </ButtonBase>\n );\n};\n"]}
|
|
@@ -2,21 +2,25 @@ function _extends() { _extends = Object.assign || function (target) { for (var i
|
|
|
2
2
|
|
|
3
3
|
import React from 'react';
|
|
4
4
|
import Svg from 'react-native-svg';
|
|
5
|
-
import { css } from '../styles';
|
|
5
|
+
import { css, useTheme } from '../styles';
|
|
6
6
|
export default function SvgIcon(props) {
|
|
7
7
|
const {
|
|
8
|
-
|
|
8
|
+
color: colorProp = 'primary',
|
|
9
|
+
colorValue,
|
|
9
10
|
height = 24,
|
|
10
11
|
style: styleProp,
|
|
11
12
|
viewBox = '0 0 20 20',
|
|
12
13
|
width = 24,
|
|
13
14
|
...otherProps
|
|
14
15
|
} = props;
|
|
16
|
+
const theme = useTheme();
|
|
17
|
+
const color = colorValue !== null && colorValue !== void 0 ? colorValue : theme.palette[colorProp].main;
|
|
15
18
|
const style = css([{
|
|
16
19
|
flexShrink: 0
|
|
17
20
|
}, styleProp]);
|
|
18
21
|
return /*#__PURE__*/React.createElement(Svg, _extends({
|
|
19
|
-
|
|
22
|
+
color: color,
|
|
23
|
+
fill: 'currentColor',
|
|
20
24
|
height: height,
|
|
21
25
|
style: style,
|
|
22
26
|
viewBox: viewBox,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["SvgIcon.tsx"],"names":["React","Svg","css","SvgIcon","props","
|
|
1
|
+
{"version":3,"sources":["SvgIcon.tsx"],"names":["React","Svg","css","useTheme","SvgIcon","props","color","colorProp","colorValue","height","style","styleProp","viewBox","width","otherProps","theme","palette","main","flexShrink"],"mappings":";;AAAA,OAAOA,KAAP,MAAkB,OAAlB;AACA,OAAOC,GAAP,MAAgB,kBAAhB;AACA,SAASC,GAAT,EAAcC,QAAd,QAA8B,WAA9B;AAGA,eAAe,SAASC,OAAT,CAAiBC,KAAjB,EAAsC;AACjD,QAAM;AACFC,IAAAA,KAAK,EAAEC,SAAS,GAAG,SADjB;AAEFC,IAAAA,UAFE;AAGFC,IAAAA,MAAM,GAAG,EAHP;AAIFC,IAAAA,KAAK,EAAEC,SAJL;AAKFC,IAAAA,OAAO,GAAG,WALR;AAMFC,IAAAA,KAAK,GAAG,EANN;AAOF,OAAGC;AAPD,MAQYT,KARlB;AAUA,QAAMU,KAAK,GAAGZ,QAAQ,EAAtB;AAEA,QAAMG,KAAK,GAAGE,UAAH,aAAGA,UAAH,cAAGA,UAAH,GAAiBO,KAAK,CAACC,OAAN,CAAcT,SAAd,EAAyBU,IAArD;AAEA,QAAMP,KAAK,GAAGR,GAAG,CAAC,CACd;AAAEgB,IAAAA,UAAU,EAAE;AAAd,GADc,EAEdP,SAFc,CAAD,CAAjB;AAKA,sBACI,oBAAC,GAAD;AACI,IAAA,KAAK,EAAEL,KADX;AAEI,IAAA,IAAI,EAAE,cAFV;AAGI,IAAA,MAAM,EAAEG,MAHZ;AAII,IAAA,KAAK,EAAEC,KAJX;AAKI,IAAA,OAAO,EAAEE,OALb;AAMI,IAAA,KAAK,EAAEC;AANX,KAOQC,UAPR,EADJ;AAWH;AAAA","sourcesContent":["import React from 'react';\nimport Svg from 'react-native-svg';\nimport { css, useTheme } from '../styles';\nimport type SvgIconProps from './SvgIconProps';\n\nexport default function SvgIcon(props: SvgIconProps) {\n const {\n color: colorProp = 'primary',\n colorValue,\n height = 24,\n style: styleProp,\n viewBox = '0 0 20 20',\n width = 24,\n ...otherProps\n }: SvgIconProps = props;\n\n const theme = useTheme();\n\n const color = colorValue ?? theme.palette[colorProp].main;\n\n const style = css([\n { flexShrink: 0 },\n styleProp,\n ]);\n\n return (\n <Svg\n color={color}\n fill={'currentColor'}\n height={height}\n style={style}\n viewBox={viewBox}\n width={width}\n {...otherProps}\n />\n );\n};\n"]}
|
|
@@ -16,7 +16,7 @@ export default function Switch(props) {
|
|
|
16
16
|
const accentColor = theme.palette[colorProp].main;
|
|
17
17
|
const disabledColor = theme.palette.tertiary.main;
|
|
18
18
|
const notActiveTrackColor = theme.palette.tertiary.main;
|
|
19
|
-
const thumbColor = Platform.OS === 'ios' ? undefined : disabled ? disabledColor :
|
|
19
|
+
const thumbColor = Platform.OS === 'ios' ? undefined : disabled ? disabledColor : '#fff';
|
|
20
20
|
const trackColor = Platform.OS === 'ios' ? accentColor : disabled ? disabledColor : accentColor;
|
|
21
21
|
const style = css([{
|
|
22
22
|
opacity: disabled ? 0.3 : 1
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["Switch.tsx"],"names":["React","Platform","Switch","RNSwitch","css","useTheme","props","checked","color","colorProp","disabled","onChange","style","styleProp","otherProps","theme","accentColor","palette","main","disabledColor","tertiary","notActiveTrackColor","thumbColor","OS","undefined","
|
|
1
|
+
{"version":3,"sources":["Switch.tsx"],"names":["React","Platform","Switch","RNSwitch","css","useTheme","props","checked","color","colorProp","disabled","onChange","style","styleProp","otherProps","theme","accentColor","palette","main","disabledColor","tertiary","notActiveTrackColor","thumbColor","OS","undefined","trackColor","opacity","true","false"],"mappings":";;AAAA,OAAOA,KAAP,MAAkB,OAAlB;AACA,SAASC,QAAT,EAAmBC,MAAM,IAAIC,QAA7B,QAA6C,cAA7C;AACA,SAASC,GAAT,EAAcC,QAAd,QAA8B,WAA9B;AAGA,eAAe,SAASH,MAAT,CAAgBI,KAAhB,EAAoC;AAC/C,QAAM;AACFC,IAAAA,OAAO,GAAG,KADR;AAEFC,IAAAA,KAAK,EAAEC,SAAS,GAAG,WAFjB;AAGFC,IAAAA,QAAQ,GAAG,KAHT;AAIFC,IAAAA,QAJE;AAKFC,IAAAA,KAAK,EAAEC,SALL;AAMF,OAAGC;AAND,MAOFR,KAPJ;AASA,QAAMS,KAAK,GAAGV,QAAQ,EAAtB;AAEA,QAAMW,WAAW,GAAGD,KAAK,CAACE,OAAN,CAAcR,SAAd,EAAyBS,IAA7C;AACA,QAAMC,aAAa,GAAGJ,KAAK,CAACE,OAAN,CAAcG,QAAd,CAAuBF,IAA7C;AACA,QAAMG,mBAAmB,GAAGN,KAAK,CAACE,OAAN,CAAcG,QAAd,CAAuBF,IAAnD;AAEA,QAAMI,UAAU,GAAGrB,QAAQ,CAACsB,EAAT,KAAgB,KAAhB,GACbC,SADa,GAEbd,QAAQ,GACJS,aADI,GAEJ,MAJV;AAMA,QAAMM,UAAU,GAAGxB,QAAQ,CAACsB,EAAT,KAAgB,KAAhB,GACbP,WADa,GAEbN,QAAQ,GAAGS,aAAH,GAAmBH,WAFjC;AAIA,QAAMJ,KAAK,GAAGR,GAAG,CAAC,CACd;AAAEsB,IAAAA,OAAO,EAAEhB,QAAQ,GAAG,GAAH,GAAS;AAA5B,GADc,EAEdG,SAFc,CAAD,CAAjB;AAKA,sBACI,oBAAC,QAAD;AACI,IAAA,KAAK,EAAEN,OADX;AAEI,IAAA,QAAQ,EAAEG,QAFd;AAGI,IAAA,UAAU,EAAEY,UAHhB;AAII,IAAA,aAAa,EAAEZ,QAAQ,GAAGc,SAAH,GAAeb,QAJ1C,CAKI;AALJ;AAMI,IAAA,gBAAgB,EAAEc,UANtB;AAOI,IAAA,gBAAgB,EAAEH,UAPtB;AAQI,IAAA,UAAU,EAAE;AACRK,MAAAA,IAAI,EAAEF,UADE;AAERG,MAAAA,KAAK,EAAEP;AAFC,KARhB;AAYI,IAAA,KAAK,EAAET;AAZX,KAaQE,UAbR,EADJ;AAiBH;AAAA","sourcesContent":["import React from 'react';\nimport { Platform, Switch as RNSwitch } from 'react-native';\nimport { css, useTheme } from '../styles';\nimport type SwitchProps from './SwitchProps';\n\nexport default function Switch(props: SwitchProps) {\n const {\n checked = false,\n color: colorProp = 'secondary',\n disabled = false,\n onChange,\n style: styleProp,\n ...otherProps\n } = props;\n\n const theme = useTheme();\n\n const accentColor = theme.palette[colorProp].main;\n const disabledColor = theme.palette.tertiary.main;\n const notActiveTrackColor = theme.palette.tertiary.main;\n\n const thumbColor = Platform.OS === 'ios'\n ? undefined\n : disabled\n ? disabledColor\n : '#fff';\n\n const trackColor = Platform.OS === 'ios'\n ? accentColor\n : disabled ? disabledColor : accentColor;\n\n const style = css([\n { opacity: disabled ? 0.3 : 1 },\n styleProp,\n ]);\n\n return (\n <RNSwitch\n value={checked}\n disabled={disabled}\n thumbColor={thumbColor}\n onValueChange={disabled ? undefined : onChange}\n //@ts-ignore\n activeTrackColor={trackColor}\n activeThumbColor={thumbColor}\n trackColor={{\n true: trackColor,\n false: notActiveTrackColor,\n }}\n style={style}\n {...otherProps}\n />\n );\n};\n"]}
|
|
@@ -1,8 +1,10 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
2
|
import { Animated, StyleSheet } from 'react-native';
|
|
3
|
+
import { useTheme } from '../styles';
|
|
3
4
|
import { inputPaddingHorizontal } from './utils';
|
|
4
5
|
|
|
5
6
|
const useStyles = function () {
|
|
7
|
+
const theme = useTheme();
|
|
6
8
|
return {
|
|
7
9
|
background: {
|
|
8
10
|
position: 'absolute',
|
|
@@ -12,14 +14,14 @@ const useStyles = function () {
|
|
|
12
14
|
right: 0,
|
|
13
15
|
width: 8,
|
|
14
16
|
height: 2,
|
|
15
|
-
backgroundColor:
|
|
17
|
+
backgroundColor: theme.palette.background.default
|
|
16
18
|
},
|
|
17
19
|
backgroundText: {
|
|
18
20
|
position: 'absolute',
|
|
19
21
|
left: 18,
|
|
20
22
|
paddingHorizontal: 0,
|
|
21
23
|
color: 'transparent',
|
|
22
|
-
backgroundColor:
|
|
24
|
+
backgroundColor: theme.palette.background.default
|
|
23
25
|
},
|
|
24
26
|
placeholder: {
|
|
25
27
|
position: 'absolute',
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["InputLabel.tsx"],"names":["React","Animated","StyleSheet","inputPaddingHorizontal","useStyles","background","position","top","left","bottom","right","width","height","backgroundColor","backgroundText","paddingHorizontal","color","placeholder","InputLabel","props","activeColor","animatedError","animatedLabel","error","errorColor","focused","fontSize","hasActiveOutline","label","labelLayout","labelScale","labelTranslateX","labelTranslateY","onLayoutAnimatedText","paddingOffset","placeholderColor","placeholderOpacity","topPosition","value","styles","hasFocus","opacity","interpolate","inputRange","outputRange","labelTranslationX","transform","translateX","labelStyle","translateY","scale","absoluteFill","measured","scaleY","textAlign"],"mappings":"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","sourcesContent":["import React from 'react';\nimport { Animated, LayoutChangeEvent, StyleSheet } from 'react-native';\nimport { NamedStylesStringUnion, UseStyles } from '@fountain-ui/styles';\nimport { inputPaddingHorizontal } from './utils';\n\ninterface LabelProps {\n activeColor: string;\n animatedError: Animated.Value;\n animatedLabel: Animated.Value;\n error?: boolean;\n errorColor?: string;\n focused?: boolean;\n fontSize?: number;\n hasActiveOutline?: boolean;\n label?: string;\n labelLayout: { measured: boolean; width: number; height: number };\n labelScale: number;\n labelTranslateX: number;\n labelTranslateY: number;\n onLayoutAnimatedText: (event: LayoutChangeEvent) => void;\n paddingOffset?: { paddingLeft: number; paddingRight: number };\n placeholder?: string;\n placeholderColor?: string;\n placeholderOpacity: number | Animated.AnimatedInterpolation;\n topPosition: number;\n value?: string;\n}\n\ntype InputLabelStyles = NamedStylesStringUnion<'background' | 'backgroundText' | 'placeholder'>;\n\nconst useStyles: UseStyles<InputLabelStyles> = function (): InputLabelStyles {\n return {\n background: {\n position: 'absolute',\n top: 6,\n left: 10,\n bottom: 0,\n right: 0,\n width: 8,\n height: 2,\n backgroundColor: '#fff',\n },\n backgroundText: {\n position: 'absolute',\n left: 18,\n paddingHorizontal: 0,\n color: 'transparent',\n backgroundColor: '#fff',\n },\n placeholder: {\n position: 'absolute',\n left: 0,\n paddingHorizontal: inputPaddingHorizontal,\n },\n };\n};\n\nconst InputLabel = (props: LabelProps) => {\n const {\n activeColor,\n animatedError,\n animatedLabel,\n error = false,\n errorColor,\n focused,\n fontSize,\n hasActiveOutline,\n label,\n labelLayout,\n labelScale,\n labelTranslateX,\n labelTranslateY,\n onLayoutAnimatedText,\n paddingOffset,\n placeholderColor,\n placeholderOpacity,\n topPosition,\n value,\n } = props;\n\n const styles = useStyles();\n\n const hasFocus = hasActiveOutline || value;\n const opacity = animatedLabel.interpolate({\n inputRange: [0, 1],\n outputRange: [hasFocus ? 1 : 0, 0],\n });\n\n const labelTranslationX = {\n transform: [\n {\n translateX: animatedLabel.interpolate({\n inputRange: [0, 1],\n outputRange: [labelTranslateX, 0 || 0],\n }),\n },\n ],\n };\n\n const labelStyle = {\n fontSize,\n transform: [\n {\n translateX: animatedError.interpolate({\n inputRange: [0, 0.5, 1],\n outputRange: [0, value && error ? 4 : 0, 0],\n }),\n },\n {\n translateY: animatedLabel.interpolate({\n inputRange: [0, 1],\n outputRange: [labelTranslateY, 0],\n }),\n },\n {\n scale: animatedLabel.interpolate({\n inputRange: [0, 1],\n outputRange: [labelScale, 1],\n }),\n },\n ],\n };\n\n return (label ? (\n <Animated.View\n pointerEvents={'none'}\n style={[\n StyleSheet.absoluteFill,\n {\n opacity: value || focused ? (labelLayout.measured ? 1 : 0) : 1,\n },\n labelTranslationX,\n ]}\n >\n {[\n <Animated.View\n key={'labelBackground-view'}\n pointerEvents={'none'}\n style={[\n styles.background,\n {\n opacity,\n transform: [\n {\n translateX: animatedLabel.interpolate({\n inputRange: [0, 1],\n outputRange: [-labelTranslateX, 0],\n }),\n },\n ],\n },\n ]}\n />,\n <Animated.Text\n key={'labelBackground-text'}\n style={[\n styles.placeholder,\n styles.backgroundText,\n labelStyle,\n {\n top: topPosition + 1,\n opacity,\n transform: [\n ...labelStyle.transform,\n {\n scaleY: animatedLabel.interpolate({\n inputRange: [0, 1],\n outputRange: [0.2, 1],\n }),\n },\n ],\n },\n ]}\n numberOfLines={1}\n >\n {label}\n </Animated.Text>,\n ]}\n <Animated.Text\n onLayout={onLayoutAnimatedText}\n style={[\n styles.placeholder,\n labelStyle,\n paddingOffset,\n {\n textAlign: 'left',\n top: topPosition,\n color: error && errorColor ? errorColor : activeColor,\n opacity: animatedLabel.interpolate({\n inputRange: [0, 1],\n outputRange: [hasActiveOutline ? 1 : 0, 0],\n }),\n },\n ]}\n numberOfLines={1}\n >\n {label}\n </Animated.Text>\n <Animated.Text\n style={[\n styles.placeholder,\n labelStyle,\n paddingOffset,\n {\n textAlign: 'left',\n top: topPosition,\n color: error && errorColor ? errorColor : placeholderColor,\n opacity: placeholderOpacity,\n },\n ]}\n numberOfLines={1}\n >\n {label}\n </Animated.Text>\n </Animated.View>\n ) : null);\n};\n\nexport default InputLabel;"]}
|
|
1
|
+
{"version":3,"sources":["InputLabel.tsx"],"names":["React","Animated","StyleSheet","useTheme","inputPaddingHorizontal","useStyles","theme","background","position","top","left","bottom","right","width","height","backgroundColor","palette","default","backgroundText","paddingHorizontal","color","placeholder","InputLabel","props","activeColor","animatedError","animatedLabel","error","errorColor","focused","fontSize","hasActiveOutline","label","labelLayout","labelScale","labelTranslateX","labelTranslateY","onLayoutAnimatedText","paddingOffset","placeholderColor","placeholderOpacity","topPosition","value","styles","hasFocus","opacity","interpolate","inputRange","outputRange","labelTranslationX","transform","translateX","labelStyle","translateY","scale","absoluteFill","measured","scaleY","textAlign"],"mappings":"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","sourcesContent":["import React from 'react';\nimport { Animated, LayoutChangeEvent, StyleSheet } from 'react-native';\nimport { NamedStylesStringUnion, UseStyles } from '@fountain-ui/styles';\nimport { useTheme } from '../styles';\nimport { inputPaddingHorizontal } from './utils';\n\ninterface LabelProps {\n activeColor: string;\n animatedError: Animated.Value;\n animatedLabel: Animated.Value;\n error?: boolean;\n errorColor?: string;\n focused?: boolean;\n fontSize?: number;\n hasActiveOutline?: boolean;\n label?: string;\n labelLayout: { measured: boolean; width: number; height: number };\n labelScale: number;\n labelTranslateX: number;\n labelTranslateY: number;\n onLayoutAnimatedText: (event: LayoutChangeEvent) => void;\n paddingOffset?: { paddingLeft: number; paddingRight: number };\n placeholder?: string;\n placeholderColor?: string;\n placeholderOpacity: number | Animated.AnimatedInterpolation;\n topPosition: number;\n value?: string;\n}\n\ntype InputLabelStyles = NamedStylesStringUnion<'background' | 'backgroundText' | 'placeholder'>;\n\nconst useStyles: UseStyles<InputLabelStyles> = function (): InputLabelStyles {\n const theme = useTheme();\n\n return {\n background: {\n position: 'absolute',\n top: 6,\n left: 10,\n bottom: 0,\n right: 0,\n width: 8,\n height: 2,\n backgroundColor: theme.palette.background.default,\n },\n backgroundText: {\n position: 'absolute',\n left: 18,\n paddingHorizontal: 0,\n color: 'transparent',\n backgroundColor: theme.palette.background.default,\n },\n placeholder: {\n position: 'absolute',\n left: 0,\n paddingHorizontal: inputPaddingHorizontal,\n },\n };\n};\n\nconst InputLabel = (props: LabelProps) => {\n const {\n activeColor,\n animatedError,\n animatedLabel,\n error = false,\n errorColor,\n focused,\n fontSize,\n hasActiveOutline,\n label,\n labelLayout,\n labelScale,\n labelTranslateX,\n labelTranslateY,\n onLayoutAnimatedText,\n paddingOffset,\n placeholderColor,\n placeholderOpacity,\n topPosition,\n value,\n } = props;\n\n const styles = useStyles();\n\n const hasFocus = hasActiveOutline || value;\n const opacity = animatedLabel.interpolate({\n inputRange: [0, 1],\n outputRange: [hasFocus ? 1 : 0, 0],\n });\n\n const labelTranslationX = {\n transform: [\n {\n translateX: animatedLabel.interpolate({\n inputRange: [0, 1],\n outputRange: [labelTranslateX, 0 || 0],\n }),\n },\n ],\n };\n\n const labelStyle = {\n fontSize,\n transform: [\n {\n translateX: animatedError.interpolate({\n inputRange: [0, 0.5, 1],\n outputRange: [0, value && error ? 4 : 0, 0],\n }),\n },\n {\n translateY: animatedLabel.interpolate({\n inputRange: [0, 1],\n outputRange: [labelTranslateY, 0],\n }),\n },\n {\n scale: animatedLabel.interpolate({\n inputRange: [0, 1],\n outputRange: [labelScale, 1],\n }),\n },\n ],\n };\n\n return (label ? (\n <Animated.View\n pointerEvents={'none'}\n style={[\n StyleSheet.absoluteFill,\n {\n opacity: value || focused ? (labelLayout.measured ? 1 : 0) : 1,\n },\n labelTranslationX,\n ]}\n >\n {[\n <Animated.View\n key={'labelBackground-view'}\n pointerEvents={'none'}\n style={[\n styles.background,\n {\n opacity,\n transform: [\n {\n translateX: animatedLabel.interpolate({\n inputRange: [0, 1],\n outputRange: [-labelTranslateX, 0],\n }),\n },\n ],\n },\n ]}\n />,\n <Animated.Text\n key={'labelBackground-text'}\n style={[\n styles.placeholder,\n styles.backgroundText,\n labelStyle,\n {\n top: topPosition + 1,\n opacity,\n transform: [\n ...labelStyle.transform,\n {\n scaleY: animatedLabel.interpolate({\n inputRange: [0, 1],\n outputRange: [0.2, 1],\n }),\n },\n ],\n },\n ]}\n numberOfLines={1}\n >\n {label}\n </Animated.Text>,\n ]}\n <Animated.Text\n onLayout={onLayoutAnimatedText}\n style={[\n styles.placeholder,\n labelStyle,\n paddingOffset,\n {\n textAlign: 'left',\n top: topPosition,\n color: error && errorColor ? errorColor : activeColor,\n opacity: animatedLabel.interpolate({\n inputRange: [0, 1],\n outputRange: [hasActiveOutline ? 1 : 0, 0],\n }),\n },\n ]}\n numberOfLines={1}\n >\n {label}\n </Animated.Text>\n <Animated.Text\n style={[\n styles.placeholder,\n labelStyle,\n paddingOffset,\n {\n textAlign: 'left',\n top: topPosition,\n color: error && errorColor ? errorColor : placeholderColor,\n opacity: placeholderOpacity,\n },\n ]}\n numberOfLines={1}\n >\n {label}\n </Animated.Text>\n </Animated.View>\n ) : null);\n};\n\nexport default InputLabel;\n"]}
|