@fountain-ui/core 3.0.0-alpha.12 → 3.0.0-alpha.13
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/build/commonjs/DialogActions/DialogActions.js +0 -1
- package/build/commonjs/DialogActions/DialogActions.js.map +1 -1
- package/build/commonjs/IconButton/IconButton.js +3 -0
- package/build/commonjs/IconButton/IconButton.js.map +1 -1
- package/build/commonjs/IconButton/IconButtonProps.js +1 -1
- package/build/commonjs/IconButton/IconButtonProps.js.map +1 -1
- package/build/module/DialogActions/DialogActions.js +0 -1
- package/build/module/DialogActions/DialogActions.js.map +1 -1
- package/build/module/IconButton/IconButton.js +3 -0
- package/build/module/IconButton/IconButton.js.map +1 -1
- package/build/module/IconButton/IconButtonProps.js +1 -1
- package/build/module/IconButton/IconButtonProps.js.map +1 -1
- package/build/typescript/IconButton/IconButtonProps.d.ts +1 -1
- package/package.json +2 -2
- package/src/DialogActions/DialogActions.tsx +0 -1
- package/src/IconButton/IconButton.tsx +2 -0
- package/src/IconButton/IconButtonProps.ts +1 -0
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["useStyles","theme","useTheme","root","
|
|
1
|
+
{"version":3,"names":["useStyles","theme","useTheme","root","paddingBottom","spacing","DialogActions","props","children","style","styleProp","otherProps","styles","sectionStyle","useDialogSectionStyle","rootStyle","css"],"sources":["DialogActions.tsx"],"sourcesContent":["import React from 'react';\nimport type { NamedStylesStringUnion, UseStyles } from '@fountain-ui/styles';\nimport Column from '../Column';\nimport { useDialogSectionStyle } from '../Dialog';\nimport { css, useTheme } from '../styles';\nimport type DialogActionsProps from './DialogActionsProps';\n\ntype DialogActionsStyles = NamedStylesStringUnion<'root'>;\n\nconst useStyles: UseStyles<DialogActionsStyles> = function (): DialogActionsStyles {\n const theme = useTheme();\n\n return {\n root: {\n paddingBottom: theme.spacing(4),\n },\n };\n};\n\nexport default function DialogActions(props: DialogActionsProps) {\n const {\n children,\n style: styleProp,\n ...otherProps\n } = props;\n\n const styles = useStyles();\n\n const sectionStyle = useDialogSectionStyle();\n\n const rootStyle = css([\n styles.root,\n sectionStyle,\n styleProp,\n ]);\n\n return (\n <Column\n style={rootStyle}\n {...otherProps}\n >\n {children}\n </Column>\n );\n};\n"],"mappings":";;;;;;;AAAA;;AAEA;;AACA;;AACA;;;;;;AAKA,MAAMA,SAAyC,GAAG,YAAiC;EAC/E,MAAMC,KAAK,GAAG,IAAAC,gBAAA,GAAd;EAEA,OAAO;IACHC,IAAI,EAAE;MACFC,aAAa,EAAEH,KAAK,CAACI,OAAN,CAAc,CAAd;IADb;EADH,CAAP;AAKH,CARD;;AAUe,SAASC,aAAT,CAAuBC,KAAvB,EAAkD;EAC7D,MAAM;IACFC,QADE;IAEFC,KAAK,EAAEC,SAFL;IAGF,GAAGC;EAHD,IAIFJ,KAJJ;EAMA,MAAMK,MAAM,GAAGZ,SAAS,EAAxB;EAEA,MAAMa,YAAY,GAAG,IAAAC,6BAAA,GAArB;EAEA,MAAMC,SAAS,GAAG,IAAAC,WAAA,EAAI,CAClBJ,MAAM,CAACT,IADW,EAElBU,YAFkB,EAGlBH,SAHkB,CAAJ,CAAlB;EAMA,oBACI,6BAAC,eAAD;IACI,KAAK,EAAEK;EADX,GAEQJ,UAFR,GAIKH,QAJL,CADJ;AAQH;;AAAA"}
|
|
@@ -53,6 +53,9 @@ function selectIconColor(theme, color) {
|
|
|
53
53
|
case 'staticStrongInverse':
|
|
54
54
|
return _styles.commonColors.static.strongInverse;
|
|
55
55
|
|
|
56
|
+
case 'staticBaseOpacityInverse':
|
|
57
|
+
return _styles.commonColors.static.baseOpacityInverse;
|
|
58
|
+
|
|
56
59
|
case 'disabled':
|
|
57
60
|
return theme.palette.status.disabled;
|
|
58
61
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["styles","StyleSheet","create","root","alignItems","height","justifyContent","width","loadingSpinner","position","loadingSpinnerSizeMap","small","medium","large","selectIconColor","theme","color","palette","icon","strong","base","commonColors","static","strongInverse","status","disabled","IconButton","props","children","colorProp","onPress","iconSize","isLoading","style","otherProps","useTheme","iconColor","cloneElementSafely","enableV2","fill","size","rootStyle","css","contentStyle","opacity","loadingSpinnerStyle","handlePress"],"sources":["IconButton.tsx"],"sourcesContent":["import React from 'react';\nimport { StyleSheet, View } from 'react-native';\nimport { commonColors, Theme } from '@fountain-ui/styles';\nimport ButtonBase from '../ButtonBase';\nimport { LoadingSpinner } from '../internal';\nimport { css, useTheme } from '../styles';\nimport type { SvgIconSize } from '../SvgIcon/SvgIconProps';\nimport { cloneElementSafely } from '../utils';\nimport type IconButtonProps from './IconButtonProps';\nimport type { IconButtonColor } from './IconButtonProps';\n\nconst styles = StyleSheet.create({\n root: {\n alignItems: 'center',\n height: 32,\n justifyContent: 'center',\n width: 32,\n },\n loadingSpinner: {\n position: 'absolute',\n },\n});\n\nconst loadingSpinnerSizeMap: Record<SvgIconSize, number> = {\n small: 14,\n medium: 16,\n large: 18,\n};\n\nfunction selectIconColor(theme: Theme, color: IconButtonColor) {\n switch (color) {\n default:\n case 'strong':\n return theme.palette.icon.strong;\n case 'base':\n return theme.palette.icon.base;\n case 'staticStrongInverse':\n return commonColors.static.strongInverse;\n case 'disabled':\n return theme.palette.status.disabled;\n }\n}\n\nexport default function IconButton(props: IconButtonProps) {\n const {\n children,\n color: colorProp = 'strong' as IconButtonColor,\n disabled = false,\n onPress,\n iconSize = 'medium' as SvgIconSize,\n isLoading = false,\n style,\n ...otherProps\n } = props;\n\n const theme = useTheme();\n\n const color: IconButtonColor = disabled ? 'disabled' : colorProp;\n const iconColor = selectIconColor(theme, color);\n\n const icon = cloneElementSafely(children, {\n enableV2: true,\n fill: iconColor,\n size: iconSize,\n });\n\n const rootStyle = css([\n styles.root,\n style,\n ]);\n\n const contentStyle = css({\n opacity: isLoading ? 0 : 1,\n });\n\n const loadingSpinnerStyle = css([\n styles.loadingSpinner,\n {\n height: loadingSpinnerSizeMap[iconSize],\n width: loadingSpinnerSizeMap[iconSize],\n },\n ]);\n\n const handlePress = () => {\n if (disabled) {\n return;\n }\n\n onPress?.();\n };\n\n return (\n <ButtonBase\n disabled={disabled}\n onPress={handlePress}\n style={rootStyle}\n {...otherProps}\n >\n <View style={contentStyle}>\n {icon}\n </View>\n\n {isLoading ? (\n <LoadingSpinner style={loadingSpinnerStyle}/>\n ) : null}\n </ButtonBase>\n );\n};\n"],"mappings":";;;;;;;AAAA;;AACA;;AACA;;AACA;;AACA;;AACA;;AAEA;;;;;;AAIA,MAAMA,MAAM,GAAGC,uBAAA,CAAWC,MAAX,CAAkB;EAC7BC,IAAI,EAAE;IACFC,UAAU,EAAE,QADV;IAEFC,MAAM,EAAE,EAFN;IAGFC,cAAc,EAAE,QAHd;IAIFC,KAAK,EAAE;EAJL,CADuB;EAO7BC,cAAc,EAAE;IACZC,QAAQ,EAAE;EADE;AAPa,CAAlB,CAAf;;AAYA,MAAMC,qBAAkD,GAAG;EACvDC,KAAK,EAAE,EADgD;EAEvDC,MAAM,EAAE,EAF+C;EAGvDC,KAAK,EAAE;AAHgD,CAA3D;;AAMA,SAASC,eAAT,CAAyBC,KAAzB,EAAuCC,KAAvC,EAA+D;EAC3D,QAAQA,KAAR;IACI;IACA,KAAK,QAAL;MACI,OAAOD,KAAK,CAACE,OAAN,CAAcC,IAAd,CAAmBC,MAA1B;;IACJ,KAAK,MAAL;MACI,OAAOJ,KAAK,CAACE,OAAN,CAAcC,IAAd,CAAmBE,IAA1B;;IACJ,KAAK,qBAAL;MACI,OAAOC,oBAAA,CAAaC,MAAb,CAAoBC,aAA3B;;IACJ,KAAK,UAAL;MACI,
|
|
1
|
+
{"version":3,"names":["styles","StyleSheet","create","root","alignItems","height","justifyContent","width","loadingSpinner","position","loadingSpinnerSizeMap","small","medium","large","selectIconColor","theme","color","palette","icon","strong","base","commonColors","static","strongInverse","baseOpacityInverse","status","disabled","IconButton","props","children","colorProp","onPress","iconSize","isLoading","style","otherProps","useTheme","iconColor","cloneElementSafely","enableV2","fill","size","rootStyle","css","contentStyle","opacity","loadingSpinnerStyle","handlePress"],"sources":["IconButton.tsx"],"sourcesContent":["import React from 'react';\nimport { StyleSheet, View } from 'react-native';\nimport { commonColors, Theme } from '@fountain-ui/styles';\nimport ButtonBase from '../ButtonBase';\nimport { LoadingSpinner } from '../internal';\nimport { css, useTheme } from '../styles';\nimport type { SvgIconSize } from '../SvgIcon/SvgIconProps';\nimport { cloneElementSafely } from '../utils';\nimport type IconButtonProps from './IconButtonProps';\nimport type { IconButtonColor } from './IconButtonProps';\n\nconst styles = StyleSheet.create({\n root: {\n alignItems: 'center',\n height: 32,\n justifyContent: 'center',\n width: 32,\n },\n loadingSpinner: {\n position: 'absolute',\n },\n});\n\nconst loadingSpinnerSizeMap: Record<SvgIconSize, number> = {\n small: 14,\n medium: 16,\n large: 18,\n};\n\nfunction selectIconColor(theme: Theme, color: IconButtonColor) {\n switch (color) {\n default:\n case 'strong':\n return theme.palette.icon.strong;\n case 'base':\n return theme.palette.icon.base;\n case 'staticStrongInverse':\n return commonColors.static.strongInverse;\n case 'staticBaseOpacityInverse':\n return commonColors.static.baseOpacityInverse;\n case 'disabled':\n return theme.palette.status.disabled;\n }\n}\n\nexport default function IconButton(props: IconButtonProps) {\n const {\n children,\n color: colorProp = 'strong' as IconButtonColor,\n disabled = false,\n onPress,\n iconSize = 'medium' as SvgIconSize,\n isLoading = false,\n style,\n ...otherProps\n } = props;\n\n const theme = useTheme();\n\n const color: IconButtonColor = disabled ? 'disabled' : colorProp;\n const iconColor = selectIconColor(theme, color);\n\n const icon = cloneElementSafely(children, {\n enableV2: true,\n fill: iconColor,\n size: iconSize,\n });\n\n const rootStyle = css([\n styles.root,\n style,\n ]);\n\n const contentStyle = css({\n opacity: isLoading ? 0 : 1,\n });\n\n const loadingSpinnerStyle = css([\n styles.loadingSpinner,\n {\n height: loadingSpinnerSizeMap[iconSize],\n width: loadingSpinnerSizeMap[iconSize],\n },\n ]);\n\n const handlePress = () => {\n if (disabled) {\n return;\n }\n\n onPress?.();\n };\n\n return (\n <ButtonBase\n disabled={disabled}\n onPress={handlePress}\n style={rootStyle}\n {...otherProps}\n >\n <View style={contentStyle}>\n {icon}\n </View>\n\n {isLoading ? (\n <LoadingSpinner style={loadingSpinnerStyle}/>\n ) : null}\n </ButtonBase>\n );\n};\n"],"mappings":";;;;;;;AAAA;;AACA;;AACA;;AACA;;AACA;;AACA;;AAEA;;;;;;AAIA,MAAMA,MAAM,GAAGC,uBAAA,CAAWC,MAAX,CAAkB;EAC7BC,IAAI,EAAE;IACFC,UAAU,EAAE,QADV;IAEFC,MAAM,EAAE,EAFN;IAGFC,cAAc,EAAE,QAHd;IAIFC,KAAK,EAAE;EAJL,CADuB;EAO7BC,cAAc,EAAE;IACZC,QAAQ,EAAE;EADE;AAPa,CAAlB,CAAf;;AAYA,MAAMC,qBAAkD,GAAG;EACvDC,KAAK,EAAE,EADgD;EAEvDC,MAAM,EAAE,EAF+C;EAGvDC,KAAK,EAAE;AAHgD,CAA3D;;AAMA,SAASC,eAAT,CAAyBC,KAAzB,EAAuCC,KAAvC,EAA+D;EAC3D,QAAQA,KAAR;IACI;IACA,KAAK,QAAL;MACI,OAAOD,KAAK,CAACE,OAAN,CAAcC,IAAd,CAAmBC,MAA1B;;IACJ,KAAK,MAAL;MACI,OAAOJ,KAAK,CAACE,OAAN,CAAcC,IAAd,CAAmBE,IAA1B;;IACJ,KAAK,qBAAL;MACI,OAAOC,oBAAA,CAAaC,MAAb,CAAoBC,aAA3B;;IACJ,KAAK,0BAAL;MACI,OAAOF,oBAAA,CAAaC,MAAb,CAAoBE,kBAA3B;;IACJ,KAAK,UAAL;MACI,OAAOT,KAAK,CAACE,OAAN,CAAcQ,MAAd,CAAqBC,QAA5B;EAXR;AAaH;;AAEc,SAASC,UAAT,CAAoBC,KAApB,EAA4C;EACvD,MAAM;IACFC,QADE;IAEFb,KAAK,EAAEc,SAAS,GAAG,QAFjB;IAGFJ,QAAQ,GAAG,KAHT;IAIFK,OAJE;IAKFC,QAAQ,GAAG,QALT;IAMFC,SAAS,GAAG,KANV;IAOFC,KAPE;IAQF,GAAGC;EARD,IASFP,KATJ;EAWA,MAAMb,KAAK,GAAG,IAAAqB,iBAAA,GAAd;EAEA,MAAMpB,KAAsB,GAAGU,QAAQ,GAAG,UAAH,GAAgBI,SAAvD;EACA,MAAMO,SAAS,GAAGvB,eAAe,CAACC,KAAD,EAAQC,KAAR,CAAjC;EAEA,MAAME,IAAI,GAAG,IAAAoB,yBAAA,EAAmBT,QAAnB,EAA6B;IACtCU,QAAQ,EAAE,IAD4B;IAEtCC,IAAI,EAAEH,SAFgC;IAGtCI,IAAI,EAAET;EAHgC,CAA7B,CAAb;EAMA,MAAMU,SAAS,GAAG,IAAAC,YAAA,EAAI,CAClB3C,MAAM,CAACG,IADW,EAElB+B,KAFkB,CAAJ,CAAlB;EAKA,MAAMU,YAAY,GAAG,IAAAD,YAAA,EAAI;IACrBE,OAAO,EAAEZ,SAAS,GAAG,CAAH,GAAO;EADJ,CAAJ,CAArB;EAIA,MAAMa,mBAAmB,GAAG,IAAAH,YAAA,EAAI,CAC5B3C,MAAM,CAACQ,cADqB,EAE5B;IACIH,MAAM,EAAEK,qBAAqB,CAACsB,QAAD,CADjC;IAEIzB,KAAK,EAAEG,qBAAqB,CAACsB,QAAD;EAFhC,CAF4B,CAAJ,CAA5B;;EAQA,MAAMe,WAAW,GAAG,MAAM;IACtB,IAAIrB,QAAJ,EAAc;MACV;IACH;;IAEDK,OAAO,SAAP,IAAAA,OAAO,WAAP,YAAAA,OAAO;EACV,CAND;;EAQA,oBACI,6BAAC,mBAAD;IACI,QAAQ,EAAEL,QADd;IAEI,OAAO,EAAEqB,WAFb;IAGI,KAAK,EAAEL;EAHX,GAIQP,UAJR,gBAMI,6BAAC,iBAAD;IAAM,KAAK,EAAES;EAAb,GACK1B,IADL,CANJ,EAUKe,SAAS,gBACN,6BAAC,wBAAD;IAAgB,KAAK,EAAEa;EAAvB,EADM,GAEN,IAZR,CADJ;AAgBH;;AAAA"}
|
|
@@ -4,6 +4,6 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
4
4
|
value: true
|
|
5
5
|
});
|
|
6
6
|
exports.iconButtonColors = void 0;
|
|
7
|
-
const iconButtonColors = ['strong', 'base', 'staticStrongInverse', 'disabled'];
|
|
7
|
+
const iconButtonColors = ['strong', 'base', 'staticStrongInverse', 'staticBaseOpacityInverse', 'disabled'];
|
|
8
8
|
exports.iconButtonColors = iconButtonColors;
|
|
9
9
|
//# sourceMappingURL=IconButtonProps.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["iconButtonColors"],"sources":["IconButtonProps.ts"],"sourcesContent":["import React from 'react';\nimport type { ButtonBaseProps } from '../ButtonBase';\nimport type { SvgIconSize } from '../SvgIcon/SvgIconProps';\nimport type { OverridableComponentProps } from '../types';\n\nexport const iconButtonColors = [\n 'strong',\n 'base',\n 'staticStrongInverse',\n 'disabled',\n] as const;\nexport type IconButtonColor = typeof iconButtonColors[number];\n\nexport default interface IconButtonProps extends OverridableComponentProps<ButtonBaseProps, {\n /**\n * The icon element.\n */\n children: React.ReactElement;\n\n /**\n * The color of the component. It supports those theme colors that make sense for this component.\n * @default 'strong'\n */\n color?: IconButtonColor;\n\n /**\n * Determines the size of the icon that goes inside the button.\n * @default 'medium'\n */\n iconSize?: SvgIconSize;\n\n /**\n * Determines whether to show the loading status or not.\n * @default false\n */\n isLoading?: boolean;\n}> {}\n"],"mappings":";;;;;;AAKO,MAAMA,gBAAgB,GAAG,CAC5B,QAD4B,EAE5B,MAF4B,EAG5B,qBAH4B,EAI5B,
|
|
1
|
+
{"version":3,"names":["iconButtonColors"],"sources":["IconButtonProps.ts"],"sourcesContent":["import React from 'react';\nimport type { ButtonBaseProps } from '../ButtonBase';\nimport type { SvgIconSize } from '../SvgIcon/SvgIconProps';\nimport type { OverridableComponentProps } from '../types';\n\nexport const iconButtonColors = [\n 'strong',\n 'base',\n 'staticStrongInverse',\n 'staticBaseOpacityInverse',\n 'disabled',\n] as const;\nexport type IconButtonColor = typeof iconButtonColors[number];\n\nexport default interface IconButtonProps extends OverridableComponentProps<ButtonBaseProps, {\n /**\n * The icon element.\n */\n children: React.ReactElement;\n\n /**\n * The color of the component. It supports those theme colors that make sense for this component.\n * @default 'strong'\n */\n color?: IconButtonColor;\n\n /**\n * Determines the size of the icon that goes inside the button.\n * @default 'medium'\n */\n iconSize?: SvgIconSize;\n\n /**\n * Determines whether to show the loading status or not.\n * @default false\n */\n isLoading?: boolean;\n}> {}\n"],"mappings":";;;;;;AAKO,MAAMA,gBAAgB,GAAG,CAC5B,QAD4B,EAE5B,MAF4B,EAG5B,qBAH4B,EAI5B,0BAJ4B,EAK5B,UAL4B,CAAzB"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["React","Column","useDialogSectionStyle","css","useTheme","useStyles","theme","root","
|
|
1
|
+
{"version":3,"names":["React","Column","useDialogSectionStyle","css","useTheme","useStyles","theme","root","paddingBottom","spacing","DialogActions","props","children","style","styleProp","otherProps","styles","sectionStyle","rootStyle"],"sources":["DialogActions.tsx"],"sourcesContent":["import React from 'react';\nimport type { NamedStylesStringUnion, UseStyles } from '@fountain-ui/styles';\nimport Column from '../Column';\nimport { useDialogSectionStyle } from '../Dialog';\nimport { css, useTheme } from '../styles';\nimport type DialogActionsProps from './DialogActionsProps';\n\ntype DialogActionsStyles = NamedStylesStringUnion<'root'>;\n\nconst useStyles: UseStyles<DialogActionsStyles> = function (): DialogActionsStyles {\n const theme = useTheme();\n\n return {\n root: {\n paddingBottom: theme.spacing(4),\n },\n };\n};\n\nexport default function DialogActions(props: DialogActionsProps) {\n const {\n children,\n style: styleProp,\n ...otherProps\n } = props;\n\n const styles = useStyles();\n\n const sectionStyle = useDialogSectionStyle();\n\n const rootStyle = css([\n styles.root,\n sectionStyle,\n styleProp,\n ]);\n\n return (\n <Column\n style={rootStyle}\n {...otherProps}\n >\n {children}\n </Column>\n );\n};\n"],"mappings":";;AAAA,OAAOA,KAAP,MAAkB,OAAlB;AAEA,OAAOC,MAAP,MAAmB,WAAnB;AACA,SAASC,qBAAT,QAAsC,WAAtC;AACA,SAASC,GAAT,EAAcC,QAAd,QAA8B,WAA9B;;AAKA,MAAMC,SAAyC,GAAG,YAAiC;EAC/E,MAAMC,KAAK,GAAGF,QAAQ,EAAtB;EAEA,OAAO;IACHG,IAAI,EAAE;MACFC,aAAa,EAAEF,KAAK,CAACG,OAAN,CAAc,CAAd;IADb;EADH,CAAP;AAKH,CARD;;AAUA,eAAe,SAASC,aAAT,CAAuBC,KAAvB,EAAkD;EAC7D,MAAM;IACFC,QADE;IAEFC,KAAK,EAAEC,SAFL;IAGF,GAAGC;EAHD,IAIFJ,KAJJ;EAMA,MAAMK,MAAM,GAAGX,SAAS,EAAxB;EAEA,MAAMY,YAAY,GAAGf,qBAAqB,EAA1C;EAEA,MAAMgB,SAAS,GAAGf,GAAG,CAAC,CAClBa,MAAM,CAACT,IADW,EAElBU,YAFkB,EAGlBH,SAHkB,CAAD,CAArB;EAMA,oBACI,oBAAC,MAAD;IACI,KAAK,EAAEI;EADX,GAEQH,UAFR,GAIKH,QAJL,CADJ;AAQH;AAAA"}
|
|
@@ -36,6 +36,9 @@ function selectIconColor(theme, color) {
|
|
|
36
36
|
case 'staticStrongInverse':
|
|
37
37
|
return commonColors.static.strongInverse;
|
|
38
38
|
|
|
39
|
+
case 'staticBaseOpacityInverse':
|
|
40
|
+
return commonColors.static.baseOpacityInverse;
|
|
41
|
+
|
|
39
42
|
case 'disabled':
|
|
40
43
|
return theme.palette.status.disabled;
|
|
41
44
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["React","StyleSheet","View","commonColors","ButtonBase","LoadingSpinner","css","useTheme","cloneElementSafely","styles","create","root","alignItems","height","justifyContent","width","loadingSpinner","position","loadingSpinnerSizeMap","small","medium","large","selectIconColor","theme","color","palette","icon","strong","base","static","strongInverse","status","disabled","IconButton","props","children","colorProp","onPress","iconSize","isLoading","style","otherProps","iconColor","enableV2","fill","size","rootStyle","contentStyle","opacity","loadingSpinnerStyle","handlePress"],"sources":["IconButton.tsx"],"sourcesContent":["import React from 'react';\nimport { StyleSheet, View } from 'react-native';\nimport { commonColors, Theme } from '@fountain-ui/styles';\nimport ButtonBase from '../ButtonBase';\nimport { LoadingSpinner } from '../internal';\nimport { css, useTheme } from '../styles';\nimport type { SvgIconSize } from '../SvgIcon/SvgIconProps';\nimport { cloneElementSafely } from '../utils';\nimport type IconButtonProps from './IconButtonProps';\nimport type { IconButtonColor } from './IconButtonProps';\n\nconst styles = StyleSheet.create({\n root: {\n alignItems: 'center',\n height: 32,\n justifyContent: 'center',\n width: 32,\n },\n loadingSpinner: {\n position: 'absolute',\n },\n});\n\nconst loadingSpinnerSizeMap: Record<SvgIconSize, number> = {\n small: 14,\n medium: 16,\n large: 18,\n};\n\nfunction selectIconColor(theme: Theme, color: IconButtonColor) {\n switch (color) {\n default:\n case 'strong':\n return theme.palette.icon.strong;\n case 'base':\n return theme.palette.icon.base;\n case 'staticStrongInverse':\n return commonColors.static.strongInverse;\n case 'disabled':\n return theme.palette.status.disabled;\n }\n}\n\nexport default function IconButton(props: IconButtonProps) {\n const {\n children,\n color: colorProp = 'strong' as IconButtonColor,\n disabled = false,\n onPress,\n iconSize = 'medium' as SvgIconSize,\n isLoading = false,\n style,\n ...otherProps\n } = props;\n\n const theme = useTheme();\n\n const color: IconButtonColor = disabled ? 'disabled' : colorProp;\n const iconColor = selectIconColor(theme, color);\n\n const icon = cloneElementSafely(children, {\n enableV2: true,\n fill: iconColor,\n size: iconSize,\n });\n\n const rootStyle = css([\n styles.root,\n style,\n ]);\n\n const contentStyle = css({\n opacity: isLoading ? 0 : 1,\n });\n\n const loadingSpinnerStyle = css([\n styles.loadingSpinner,\n {\n height: loadingSpinnerSizeMap[iconSize],\n width: loadingSpinnerSizeMap[iconSize],\n },\n ]);\n\n const handlePress = () => {\n if (disabled) {\n return;\n }\n\n onPress?.();\n };\n\n return (\n <ButtonBase\n disabled={disabled}\n onPress={handlePress}\n style={rootStyle}\n {...otherProps}\n >\n <View style={contentStyle}>\n {icon}\n </View>\n\n {isLoading ? (\n <LoadingSpinner style={loadingSpinnerStyle}/>\n ) : null}\n </ButtonBase>\n );\n};\n"],"mappings":";;AAAA,OAAOA,KAAP,MAAkB,OAAlB;AACA,SAASC,UAAT,EAAqBC,IAArB,QAAiC,cAAjC;AACA,SAASC,YAAT,QAAoC,qBAApC;AACA,OAAOC,UAAP,MAAuB,eAAvB;AACA,SAASC,cAAT,QAA+B,aAA/B;AACA,SAASC,GAAT,EAAcC,QAAd,QAA8B,WAA9B;AAEA,SAASC,kBAAT,QAAmC,UAAnC;AAIA,MAAMC,MAAM,GAAGR,UAAU,CAACS,MAAX,CAAkB;EAC7BC,IAAI,EAAE;IACFC,UAAU,EAAE,QADV;IAEFC,MAAM,EAAE,EAFN;IAGFC,cAAc,EAAE,QAHd;IAIFC,KAAK,EAAE;EAJL,CADuB;EAO7BC,cAAc,EAAE;IACZC,QAAQ,EAAE;EADE;AAPa,CAAlB,CAAf;AAYA,MAAMC,qBAAkD,GAAG;EACvDC,KAAK,EAAE,EADgD;EAEvDC,MAAM,EAAE,EAF+C;EAGvDC,KAAK,EAAE;AAHgD,CAA3D;;AAMA,SAASC,eAAT,CAAyBC,KAAzB,EAAuCC,KAAvC,EAA+D;EAC3D,QAAQA,KAAR;IACI;IACA,KAAK,QAAL;MACI,OAAOD,KAAK,CAACE,OAAN,CAAcC,IAAd,CAAmBC,MAA1B;;IACJ,KAAK,MAAL;MACI,OAAOJ,KAAK,CAACE,OAAN,CAAcC,IAAd,CAAmBE,IAA1B;;IACJ,KAAK,qBAAL;MACI,OAAOzB,YAAY,CAAC0B,MAAb,CAAoBC,aAA3B;;IACJ,KAAK,UAAL;MACI,
|
|
1
|
+
{"version":3,"names":["React","StyleSheet","View","commonColors","ButtonBase","LoadingSpinner","css","useTheme","cloneElementSafely","styles","create","root","alignItems","height","justifyContent","width","loadingSpinner","position","loadingSpinnerSizeMap","small","medium","large","selectIconColor","theme","color","palette","icon","strong","base","static","strongInverse","baseOpacityInverse","status","disabled","IconButton","props","children","colorProp","onPress","iconSize","isLoading","style","otherProps","iconColor","enableV2","fill","size","rootStyle","contentStyle","opacity","loadingSpinnerStyle","handlePress"],"sources":["IconButton.tsx"],"sourcesContent":["import React from 'react';\nimport { StyleSheet, View } from 'react-native';\nimport { commonColors, Theme } from '@fountain-ui/styles';\nimport ButtonBase from '../ButtonBase';\nimport { LoadingSpinner } from '../internal';\nimport { css, useTheme } from '../styles';\nimport type { SvgIconSize } from '../SvgIcon/SvgIconProps';\nimport { cloneElementSafely } from '../utils';\nimport type IconButtonProps from './IconButtonProps';\nimport type { IconButtonColor } from './IconButtonProps';\n\nconst styles = StyleSheet.create({\n root: {\n alignItems: 'center',\n height: 32,\n justifyContent: 'center',\n width: 32,\n },\n loadingSpinner: {\n position: 'absolute',\n },\n});\n\nconst loadingSpinnerSizeMap: Record<SvgIconSize, number> = {\n small: 14,\n medium: 16,\n large: 18,\n};\n\nfunction selectIconColor(theme: Theme, color: IconButtonColor) {\n switch (color) {\n default:\n case 'strong':\n return theme.palette.icon.strong;\n case 'base':\n return theme.palette.icon.base;\n case 'staticStrongInverse':\n return commonColors.static.strongInverse;\n case 'staticBaseOpacityInverse':\n return commonColors.static.baseOpacityInverse;\n case 'disabled':\n return theme.palette.status.disabled;\n }\n}\n\nexport default function IconButton(props: IconButtonProps) {\n const {\n children,\n color: colorProp = 'strong' as IconButtonColor,\n disabled = false,\n onPress,\n iconSize = 'medium' as SvgIconSize,\n isLoading = false,\n style,\n ...otherProps\n } = props;\n\n const theme = useTheme();\n\n const color: IconButtonColor = disabled ? 'disabled' : colorProp;\n const iconColor = selectIconColor(theme, color);\n\n const icon = cloneElementSafely(children, {\n enableV2: true,\n fill: iconColor,\n size: iconSize,\n });\n\n const rootStyle = css([\n styles.root,\n style,\n ]);\n\n const contentStyle = css({\n opacity: isLoading ? 0 : 1,\n });\n\n const loadingSpinnerStyle = css([\n styles.loadingSpinner,\n {\n height: loadingSpinnerSizeMap[iconSize],\n width: loadingSpinnerSizeMap[iconSize],\n },\n ]);\n\n const handlePress = () => {\n if (disabled) {\n return;\n }\n\n onPress?.();\n };\n\n return (\n <ButtonBase\n disabled={disabled}\n onPress={handlePress}\n style={rootStyle}\n {...otherProps}\n >\n <View style={contentStyle}>\n {icon}\n </View>\n\n {isLoading ? (\n <LoadingSpinner style={loadingSpinnerStyle}/>\n ) : null}\n </ButtonBase>\n );\n};\n"],"mappings":"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"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
export const iconButtonColors = ['strong', 'base', 'staticStrongInverse', 'disabled'];
|
|
1
|
+
export const iconButtonColors = ['strong', 'base', 'staticStrongInverse', 'staticBaseOpacityInverse', 'disabled'];
|
|
2
2
|
//# sourceMappingURL=IconButtonProps.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["iconButtonColors"],"sources":["IconButtonProps.ts"],"sourcesContent":["import React from 'react';\nimport type { ButtonBaseProps } from '../ButtonBase';\nimport type { SvgIconSize } from '../SvgIcon/SvgIconProps';\nimport type { OverridableComponentProps } from '../types';\n\nexport const iconButtonColors = [\n 'strong',\n 'base',\n 'staticStrongInverse',\n 'disabled',\n] as const;\nexport type IconButtonColor = typeof iconButtonColors[number];\n\nexport default interface IconButtonProps extends OverridableComponentProps<ButtonBaseProps, {\n /**\n * The icon element.\n */\n children: React.ReactElement;\n\n /**\n * The color of the component. It supports those theme colors that make sense for this component.\n * @default 'strong'\n */\n color?: IconButtonColor;\n\n /**\n * Determines the size of the icon that goes inside the button.\n * @default 'medium'\n */\n iconSize?: SvgIconSize;\n\n /**\n * Determines whether to show the loading status or not.\n * @default false\n */\n isLoading?: boolean;\n}> {}\n"],"mappings":"AAKA,OAAO,MAAMA,gBAAgB,GAAG,CAC5B,QAD4B,EAE5B,MAF4B,EAG5B,qBAH4B,EAI5B,
|
|
1
|
+
{"version":3,"names":["iconButtonColors"],"sources":["IconButtonProps.ts"],"sourcesContent":["import React from 'react';\nimport type { ButtonBaseProps } from '../ButtonBase';\nimport type { SvgIconSize } from '../SvgIcon/SvgIconProps';\nimport type { OverridableComponentProps } from '../types';\n\nexport const iconButtonColors = [\n 'strong',\n 'base',\n 'staticStrongInverse',\n 'staticBaseOpacityInverse',\n 'disabled',\n] as const;\nexport type IconButtonColor = typeof iconButtonColors[number];\n\nexport default interface IconButtonProps extends OverridableComponentProps<ButtonBaseProps, {\n /**\n * The icon element.\n */\n children: React.ReactElement;\n\n /**\n * The color of the component. It supports those theme colors that make sense for this component.\n * @default 'strong'\n */\n color?: IconButtonColor;\n\n /**\n * Determines the size of the icon that goes inside the button.\n * @default 'medium'\n */\n iconSize?: SvgIconSize;\n\n /**\n * Determines whether to show the loading status or not.\n * @default false\n */\n isLoading?: boolean;\n}> {}\n"],"mappings":"AAKA,OAAO,MAAMA,gBAAgB,GAAG,CAC5B,QAD4B,EAE5B,MAF4B,EAG5B,qBAH4B,EAI5B,0BAJ4B,EAK5B,UAL4B,CAAzB"}
|
|
@@ -2,7 +2,7 @@ import React from 'react';
|
|
|
2
2
|
import type { ButtonBaseProps } from '../ButtonBase';
|
|
3
3
|
import type { SvgIconSize } from '../SvgIcon/SvgIconProps';
|
|
4
4
|
import type { OverridableComponentProps } from '../types';
|
|
5
|
-
export declare const iconButtonColors: readonly ["strong", "base", "staticStrongInverse", "disabled"];
|
|
5
|
+
export declare const iconButtonColors: readonly ["strong", "base", "staticStrongInverse", "staticBaseOpacityInverse", "disabled"];
|
|
6
6
|
export declare type IconButtonColor = typeof iconButtonColors[number];
|
|
7
7
|
export default interface IconButtonProps extends OverridableComponentProps<ButtonBaseProps, {
|
|
8
8
|
/**
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@fountain-ui/core",
|
|
3
|
-
"version": "3.0.0-alpha.
|
|
3
|
+
"version": "3.0.0-alpha.13",
|
|
4
4
|
"author": "Fountain-UI Team",
|
|
5
5
|
"description": "React components that implement Tappytoon's Fountain Design.",
|
|
6
6
|
"license": "MIT",
|
|
@@ -67,5 +67,5 @@
|
|
|
67
67
|
"publishConfig": {
|
|
68
68
|
"access": "public"
|
|
69
69
|
},
|
|
70
|
-
"gitHead": "
|
|
70
|
+
"gitHead": "edefc67f0ec818a5590cf7357f4f5154121e4e31"
|
|
71
71
|
}
|
|
@@ -36,6 +36,8 @@ function selectIconColor(theme: Theme, color: IconButtonColor) {
|
|
|
36
36
|
return theme.palette.icon.base;
|
|
37
37
|
case 'staticStrongInverse':
|
|
38
38
|
return commonColors.static.strongInverse;
|
|
39
|
+
case 'staticBaseOpacityInverse':
|
|
40
|
+
return commonColors.static.baseOpacityInverse;
|
|
39
41
|
case 'disabled':
|
|
40
42
|
return theme.palette.status.disabled;
|
|
41
43
|
}
|