@fountain-ui/core 2.0.0-beta.84 → 2.0.0-beta.86
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/Image/Image.js +1 -1
- package/build/commonjs/Image/Image.js.map +1 -1
- package/build/commonjs/Tab/Tab.js +20 -3
- package/build/commonjs/Tab/Tab.js.map +1 -1
- package/build/commonjs/Tab/TabProps.js.map +1 -1
- package/build/module/Image/Image.js +1 -1
- package/build/module/Image/Image.js.map +1 -1
- package/build/module/Tab/Tab.js +20 -3
- package/build/module/Tab/Tab.js.map +1 -1
- package/build/module/Tab/TabProps.js.map +1 -1
- package/build/typescript/Tab/TabProps.d.ts +1 -1
- package/package.json +2 -2
- package/src/Image/Image.tsx +1 -1
- package/src/Tab/Tab.tsx +17 -9
- package/src/Tab/TabProps.ts +2 -2
|
@@ -108,7 +108,7 @@ function Image(props) {
|
|
|
108
108
|
children: alt,
|
|
109
109
|
style: styles.errorText
|
|
110
110
|
})) : source.uri ? /*#__PURE__*/_react.default.createElement(_ImageCore.default, {
|
|
111
|
-
alt:
|
|
111
|
+
alt: alt,
|
|
112
112
|
cache: cache,
|
|
113
113
|
disableDrag: disableDrag,
|
|
114
114
|
disableLongClick: disableLongClick,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["useStyles","theme","useTheme","root","rounded","borderRadius","shape","roundness","overflow","placeholder","backgroundColor","palette","paper","grey","outlined","borderWidth","StyleSheet","hairlineWidth","borderStyle","borderColor","error","alignItems","height","justifyContent","width","errorText","color","text","primary","fontFamily","fontSize","letterSpacing","lineHeight","textAlign","determinePlaceholderMode","props","disablePlaceholder","Image","alt","cache","disableDrag","disableLongClick","disableOutline","loading","onError","onErrorProp","onLoad","onLoadProp","overlaidChildren","resizeMode","source","style","square","otherProps","failed","setFailed","useState","styles","placeholderMode","css","undefined","absoluteFill","zIndex","uri"],"sources":["Image.tsx"],"sourcesContent":["import React, { useState } from 'react';\nimport { Text, View } from 'react-native';\nimport type { NamedStylesStringUnion, UseStyles } from '@fountain-ui/styles';\nimport type { ImageCoreProps } from '../ImageCore';\nimport ImageCore from '../ImageCore';\nimport { css, StyleSheet, useTheme } from '../styles';\nimport type ImageProps from './ImageProps';\n\ntype PlaceholderMode =\n | 'default'\n | 'custom'\n | 'none';\n\ntype ImageStyleKeys =\n | 'root'\n | 'rounded'\n | 'placeholder'\n | 'outlined'\n | 'error'\n | 'errorText';\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 error: {\n alignItems: 'center',\n height: '100%',\n justifyContent: 'center',\n width: '100%',\n },\n errorText: {\n color: theme.palette.text.primary,\n fontFamily: 'Inter-Medium',\n fontSize: 12,\n letterSpacing: 0,\n lineHeight: 18,\n textAlign: 'center',\n },\n };\n};\n\nfunction determinePlaceholderMode(props: ImageProps): PlaceholderMode {\n if (props.disablePlaceholder) {\n return 'none';\n }\n\n return props.placeholder ? 'custom' : 'default';\n}\n\nexport default function Image(props: ImageProps) {\n const {\n alt,\n cache = 'immutable',\n disableDrag,\n disableLongClick,\n disableOutline,\n disablePlaceholder,\n error,\n loading = 'lazy',\n onError: onErrorProp,\n onLoad: onLoadProp,\n overlaidChildren,\n placeholder,\n resizeMode = 'cover',\n source,\n style,\n square = false,\n ...otherProps\n } = props;\n\n const [failed, setFailed] = useState(false);\n\n const styles = useStyles();\n\n const onLoad: ImageCoreProps['onLoad'] = () => {\n setFailed(false);\n\n onLoadProp?.();\n };\n\n const onError: ImageCoreProps['onError'] = () => {\n setFailed(true);\n\n onErrorProp?.();\n };\n\n const placeholderMode = determinePlaceholderMode(props);\n\n return (\n <View\n style={css([\n styles.root,\n !disableOutline ? styles.outlined : undefined,\n !square ? styles.rounded : undefined,\n placeholderMode === 'default' ? styles.placeholder : undefined,\n style,\n ])}\n {...otherProps}\n >\n {placeholderMode === 'custom' ? (\n <View\n style={css([\n StyleSheet.absoluteFill,\n { zIndex: -1 },\n ])}\n >\n {placeholder}\n </View>\n ) : null}\n\n {failed ? (\n <View style={styles.error}>\n {error ?? (\n <Text\n children={alt}\n style={styles.errorText}\n />\n )}\n </View>\n ) : source.uri ? (\n <ImageCore\n alt={
|
|
1
|
+
{"version":3,"names":["useStyles","theme","useTheme","root","rounded","borderRadius","shape","roundness","overflow","placeholder","backgroundColor","palette","paper","grey","outlined","borderWidth","StyleSheet","hairlineWidth","borderStyle","borderColor","error","alignItems","height","justifyContent","width","errorText","color","text","primary","fontFamily","fontSize","letterSpacing","lineHeight","textAlign","determinePlaceholderMode","props","disablePlaceholder","Image","alt","cache","disableDrag","disableLongClick","disableOutline","loading","onError","onErrorProp","onLoad","onLoadProp","overlaidChildren","resizeMode","source","style","square","otherProps","failed","setFailed","useState","styles","placeholderMode","css","undefined","absoluteFill","zIndex","uri"],"sources":["Image.tsx"],"sourcesContent":["import React, { useState } from 'react';\nimport { Text, View } from 'react-native';\nimport type { NamedStylesStringUnion, UseStyles } from '@fountain-ui/styles';\nimport type { ImageCoreProps } from '../ImageCore';\nimport ImageCore from '../ImageCore';\nimport { css, StyleSheet, useTheme } from '../styles';\nimport type ImageProps from './ImageProps';\n\ntype PlaceholderMode =\n | 'default'\n | 'custom'\n | 'none';\n\ntype ImageStyleKeys =\n | 'root'\n | 'rounded'\n | 'placeholder'\n | 'outlined'\n | 'error'\n | 'errorText';\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 error: {\n alignItems: 'center',\n height: '100%',\n justifyContent: 'center',\n width: '100%',\n },\n errorText: {\n color: theme.palette.text.primary,\n fontFamily: 'Inter-Medium',\n fontSize: 12,\n letterSpacing: 0,\n lineHeight: 18,\n textAlign: 'center',\n },\n };\n};\n\nfunction determinePlaceholderMode(props: ImageProps): PlaceholderMode {\n if (props.disablePlaceholder) {\n return 'none';\n }\n\n return props.placeholder ? 'custom' : 'default';\n}\n\nexport default function Image(props: ImageProps) {\n const {\n alt,\n cache = 'immutable',\n disableDrag,\n disableLongClick,\n disableOutline,\n disablePlaceholder,\n error,\n loading = 'lazy',\n onError: onErrorProp,\n onLoad: onLoadProp,\n overlaidChildren,\n placeholder,\n resizeMode = 'cover',\n source,\n style,\n square = false,\n ...otherProps\n } = props;\n\n const [failed, setFailed] = useState(false);\n\n const styles = useStyles();\n\n const onLoad: ImageCoreProps['onLoad'] = () => {\n setFailed(false);\n\n onLoadProp?.();\n };\n\n const onError: ImageCoreProps['onError'] = () => {\n setFailed(true);\n\n onErrorProp?.();\n };\n\n const placeholderMode = determinePlaceholderMode(props);\n\n return (\n <View\n style={css([\n styles.root,\n !disableOutline ? styles.outlined : undefined,\n !square ? styles.rounded : undefined,\n placeholderMode === 'default' ? styles.placeholder : undefined,\n style,\n ])}\n {...otherProps}\n >\n {placeholderMode === 'custom' ? (\n <View\n style={css([\n StyleSheet.absoluteFill,\n { zIndex: -1 },\n ])}\n >\n {placeholder}\n </View>\n ) : null}\n\n {failed ? (\n <View style={styles.error}>\n {error ?? (\n <Text\n children={alt}\n style={styles.errorText}\n />\n )}\n </View>\n ) : source.uri ? (\n <ImageCore\n alt={alt}\n cache={cache}\n disableDrag={disableDrag}\n disableLongClick={disableLongClick}\n height={'100%'}\n loading={loading}\n onError={onError}\n onLoad={onLoad}\n resizeMode={resizeMode}\n source={source}\n width={'100%'}\n />\n ) : null}\n\n {overlaidChildren ? (\n <View style={StyleSheet.absoluteFill}>\n {overlaidChildren}\n </View>\n ) : null}\n </View>\n );\n};"],"mappings":";;;;;;;AAAA;;AACA;;AAGA;;AACA;;;;;;;;;;AAkBA,MAAMA,SAAiC,GAAG,YAAyB;EAC/D,MAAMC,KAAK,GAAG,IAAAC,gBAAA,GAAd;EAEA,OAAO;IACHC,IAAI,EAAE,EADH;IAEHC,OAAO,EAAE;MACLC,YAAY,EAAEJ,KAAK,CAACK,KAAN,CAAYC,SADrB;MAELC,QAAQ,EAAE;IAFL,CAFN;IAMHC,WAAW,EAAE;MACTC,eAAe,EAAET,KAAK,CAACU,OAAN,CAAcC,KAAd,CAAoBC;IAD5B,CANV;IASHC,QAAQ,EAAE;MACNC,WAAW,EAAEC,kBAAA,CAAWC,aADlB;MAENC,WAAW,EAAE,OAFP;MAGNC,WAAW,EAAElB,KAAK,CAACU,OAAN,CAAcC,KAAd,CAAoBC;IAH3B,CATP;IAcHO,KAAK,EAAE;MACHC,UAAU,EAAE,QADT;MAEHC,MAAM,EAAE,MAFL;MAGHC,cAAc,EAAE,QAHb;MAIHC,KAAK,EAAE;IAJJ,CAdJ;IAoBHC,SAAS,EAAE;MACPC,KAAK,EAAEzB,KAAK,CAACU,OAAN,CAAcgB,IAAd,CAAmBC,OADnB;MAEPC,UAAU,EAAE,cAFL;MAGPC,QAAQ,EAAE,EAHH;MAIPC,aAAa,EAAE,CAJR;MAKPC,UAAU,EAAE,EALL;MAMPC,SAAS,EAAE;IANJ;EApBR,CAAP;AA6BH,CAhCD;;AAkCA,SAASC,wBAAT,CAAkCC,KAAlC,EAAsE;EAClE,IAAIA,KAAK,CAACC,kBAAV,EAA8B;IAC1B,OAAO,MAAP;EACH;;EAED,OAAOD,KAAK,CAAC1B,WAAN,GAAoB,QAApB,GAA+B,SAAtC;AACH;;AAEc,SAAS4B,KAAT,CAAeF,KAAf,EAAkC;EAC7C,MAAM;IACFG,GADE;IAEFC,KAAK,GAAG,WAFN;IAGFC,WAHE;IAIFC,gBAJE;IAKFC,cALE;IAMFN,kBANE;IAOFhB,KAPE;IAQFuB,OAAO,GAAG,MARR;IASFC,OAAO,EAAEC,WATP;IAUFC,MAAM,EAAEC,UAVN;IAWFC,gBAXE;IAYFvC,WAZE;IAaFwC,UAAU,GAAG,OAbX;IAcFC,MAdE;IAeFC,KAfE;IAgBFC,MAAM,GAAG,KAhBP;IAiBF,GAAGC;EAjBD,IAkBFlB,KAlBJ;EAoBA,MAAM,CAACmB,MAAD,EAASC,SAAT,IAAsB,IAAAC,eAAA,EAAS,KAAT,CAA5B;EAEA,MAAMC,MAAM,GAAGzD,SAAS,EAAxB;;EAEA,MAAM8C,MAAgC,GAAG,MAAM;IAC3CS,SAAS,CAAC,KAAD,CAAT;IAEAR,UAAU,SAAV,IAAAA,UAAU,WAAV,YAAAA,UAAU;EACb,CAJD;;EAMA,MAAMH,OAAkC,GAAG,MAAM;IAC7CW,SAAS,CAAC,IAAD,CAAT;IAEAV,WAAW,SAAX,IAAAA,WAAW,WAAX,YAAAA,WAAW;EACd,CAJD;;EAMA,MAAMa,eAAe,GAAGxB,wBAAwB,CAACC,KAAD,CAAhD;EAEA,oBACI,6BAAC,iBAAD;IACI,KAAK,EAAE,IAAAwB,WAAA,EAAI,CACPF,MAAM,CAACtD,IADA,EAEP,CAACuC,cAAD,GAAkBe,MAAM,CAAC3C,QAAzB,GAAoC8C,SAF7B,EAGP,CAACR,MAAD,GAAUK,MAAM,CAACrD,OAAjB,GAA2BwD,SAHpB,EAIPF,eAAe,KAAK,SAApB,GAAgCD,MAAM,CAAChD,WAAvC,GAAqDmD,SAJ9C,EAKPT,KALO,CAAJ;EADX,GAQQE,UARR,GAUKK,eAAe,KAAK,QAApB,gBACG,6BAAC,iBAAD;IACI,KAAK,EAAE,IAAAC,WAAA,EAAI,CACP3C,kBAAA,CAAW6C,YADJ,EAEP;MAAEC,MAAM,EAAE,CAAC;IAAX,CAFO,CAAJ;EADX,GAMKrD,WANL,CADH,GASG,IAnBR,EAqBK6C,MAAM,gBACH,6BAAC,iBAAD;IAAM,KAAK,EAAEG,MAAM,CAACrC;EAApB,GACKA,KAAK,iBACF,6BAAC,iBAAD;IACI,QAAQ,EAAEkB,GADd;IAEI,KAAK,EAAEmB,MAAM,CAAChC;EAFlB,EAFR,CADG,GASHyB,MAAM,CAACa,GAAP,gBACA,6BAAC,kBAAD;IACI,GAAG,EAAEzB,GADT;IAEI,KAAK,EAAEC,KAFX;IAGI,WAAW,EAAEC,WAHjB;IAII,gBAAgB,EAAEC,gBAJtB;IAKI,MAAM,EAAE,MALZ;IAMI,OAAO,EAAEE,OANb;IAOI,OAAO,EAAEC,OAPb;IAQI,MAAM,EAAEE,MARZ;IASI,UAAU,EAAEG,UAThB;IAUI,MAAM,EAAEC,MAVZ;IAWI,KAAK,EAAE;EAXX,EADA,GAcA,IA5CR,EA8CKF,gBAAgB,gBACb,6BAAC,iBAAD;IAAM,KAAK,EAAEhC,kBAAA,CAAW6C;EAAxB,GACKb,gBADL,CADa,GAIb,IAlDR,CADJ;AAsDH;;AAAA"}
|
|
@@ -69,9 +69,26 @@ function Tab(props) {
|
|
|
69
69
|
const tabBaseStyle = (0, _styles.css)([styles.root, variant === 'bottom-navigation' && styles.bottomNavigation, variant === 'contained' && containedStyle, style]);
|
|
70
70
|
const tabInnerStyle = (0, _styles.css)([styles.root, styles.filledInner]);
|
|
71
71
|
const fontStyle = (0, _styles.createFontStyle)(theme, {
|
|
72
|
-
selector: typo =>
|
|
73
|
-
|
|
74
|
-
|
|
72
|
+
selector: typo => {
|
|
73
|
+
switch (variant) {
|
|
74
|
+
case 'primary':
|
|
75
|
+
return typo.h2;
|
|
76
|
+
|
|
77
|
+
case 'secondary':
|
|
78
|
+
return typo.button2;
|
|
79
|
+
|
|
80
|
+
case 'tertiary':
|
|
81
|
+
return typo.h3;
|
|
82
|
+
|
|
83
|
+
case 'contained':
|
|
84
|
+
return selected ? { ...typo.subtitle2,
|
|
85
|
+
fontWeight: typo.fontWeight.medium
|
|
86
|
+
} : typo.body2;
|
|
87
|
+
|
|
88
|
+
default:
|
|
89
|
+
return typo.flag;
|
|
90
|
+
}
|
|
91
|
+
},
|
|
75
92
|
color
|
|
76
93
|
});
|
|
77
94
|
const pressEffect = selected ? 'none' : 'opacity';
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["styles","StyleSheet","create","root","Platform","OS","minWidth","minHeight","bottomNavigation","filledInner","justifyContent","Tab","props","badgeVisible","children","enableIndicator","icon","defaultIcon","indicatorColor","indicatorSize","selected","selectedIcon","variant","style","onTabInnerLayout","otherProps","theme","useTheme","vertical","color","palette","text","primary","secondary","hint","containedStyle","borderColor","main","border","borderRadius","shape","roundnessExtra","borderWidth","paddingHorizontal","spacing","paddingVertical","tabBaseStyle","css","tabInnerStyle","fontStyle","createFontStyle","selector","typo","h2","button2","subtitle2","fontWeight","medium","body2","flag","pressEffect","iconElement","cloneElement","fill","tabElement","React","tabIndicator"],"sources":["Tab.tsx"],"sourcesContent":["import React, { cloneElement } from 'react';\nimport { Platform, Text, View } from 'react-native';\nimport Badge from '../Badge';\nimport TabBase from '../TabBase';\nimport
|
|
1
|
+
{"version":3,"names":["styles","StyleSheet","create","root","Platform","OS","minWidth","minHeight","bottomNavigation","filledInner","justifyContent","Tab","props","badgeVisible","children","enableIndicator","icon","defaultIcon","indicatorColor","indicatorSize","selected","selectedIcon","variant","style","onTabInnerLayout","otherProps","theme","useTheme","vertical","color","palette","text","primary","secondary","hint","containedStyle","borderColor","main","border","borderRadius","shape","roundnessExtra","borderWidth","paddingHorizontal","spacing","paddingVertical","tabBaseStyle","css","tabInnerStyle","fontStyle","createFontStyle","selector","typo","h2","button2","h3","subtitle2","fontWeight","medium","body2","flag","pressEffect","iconElement","cloneElement","fill","tabElement","React","tabIndicator"],"sources":["Tab.tsx"],"sourcesContent":["import React, { cloneElement } from 'react';\nimport { Platform, Text, View } from 'react-native';\nimport Badge from '../Badge';\nimport TabBase from '../TabBase';\nimport { createFontStyle, css, StyleSheet, useTheme } from '../styles';\nimport type TabProps from './TabProps';\nimport TabIndicator from './TabIndicator';\n\nconst styles = StyleSheet.create({\n root: {\n // TODO: Remove redundant platform checking\n ...(Platform.OS === 'web' ? { minWidth: 'auto' } : {}),\n minHeight: 40,\n },\n bottomNavigation: {\n minHeight: 56,\n },\n filledInner: {\n justifyContent: 'center',\n },\n});\n\nexport default function Tab(props: TabProps) {\n const {\n badgeVisible = false,\n children,\n enableIndicator = false,\n icon: defaultIcon,\n indicatorColor = 'primary',\n indicatorSize = 'full',\n selected = false,\n selectedIcon,\n variant = 'primary',\n style,\n onTabInnerLayout,\n ...otherProps\n } = props;\n\n const theme = useTheme();\n\n const vertical = variant === 'bottom-navigation';\n\n const color = selected\n ? theme.palette.text.primary\n : variant === 'contained'\n ? theme.palette.text.secondary\n : theme.palette.text.hint;\n\n const containedStyle = {\n borderColor: selected ? theme.palette.primary.main : theme.palette.border,\n borderRadius: theme.shape.roundnessExtra,\n borderWidth: selected ? 1.5 : 1,\n minHeight: 'auto',\n paddingHorizontal: theme.spacing(3),\n paddingVertical: theme.spacing(1.5),\n };\n\n const tabBaseStyle = css([\n styles.root,\n variant === 'bottom-navigation' && styles.bottomNavigation,\n variant === 'contained' && containedStyle,\n style,\n ]);\n\n const tabInnerStyle = css([\n styles.root,\n styles.filledInner,\n ]);\n\n const fontStyle = createFontStyle(theme, {\n selector: (typo) => {\n switch (variant) {\n case 'primary':\n return typo.h2;\n case 'secondary':\n return typo.button2;\n case 'tertiary':\n return typo.h3;\n case 'contained':\n return selected\n ? { ...typo.subtitle2, fontWeight: typo.fontWeight.medium }\n : typo.body2;\n default:\n return typo.flag;\n }\n },\n color,\n });\n const pressEffect = selected ? 'none' : 'opacity';\n\n const icon = selected ? (selectedIcon || defaultIcon) : defaultIcon;\n const iconElement = icon ? cloneElement(icon, { fill: color }) : null;\n\n const tabElement = typeof children !== 'string' ? (\n React.cloneElement(children, {\n selected,\n })\n ) : (\n <React.Fragment>\n <Badge\n children={iconElement}\n invisible={!badgeVisible}\n />\n\n <Text\n children={children}\n style={css(fontStyle)}\n />\n </React.Fragment>\n );\n const tabIndicator = (enableIndicator && selected)\n ? <TabIndicator indicatorSize={indicatorSize} color={indicatorColor}/>\n : null;\n\n return (\n <TabBase\n pressEffect={pressEffect}\n style={tabBaseStyle}\n vertical={vertical}\n {...otherProps}\n >\n {indicatorSize === 'fit-content' ? (\n <View onLayout={onTabInnerLayout} style={tabInnerStyle}>\n {tabElement}\n\n {tabIndicator}\n </View>\n ) : (\n <React.Fragment>\n {tabElement}\n\n {tabIndicator}\n </React.Fragment>\n )}\n </TabBase>\n );\n};\n"],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":[],"sources":["TabProps.ts"],"sourcesContent":["import React from 'react';\nimport type { LayoutChangeEvent } from 'react-native';\nimport type { TabBaseProps } from '../TabBase';\nimport type { OverridableComponentProps } from '../types';\n\nexport type TabVariant = 'primary' | 'secondary' | 'bottom-navigation' | 'contained';\nexport type TabIndicatorColor = 'primary' | 'secondary'
|
|
1
|
+
{"version":3,"names":[],"sources":["TabProps.ts"],"sourcesContent":["import React from 'react';\nimport type { LayoutChangeEvent } from 'react-native';\nimport type { TabBaseProps } from '../TabBase';\nimport type { OverridableComponentProps } from '../types';\n\nexport type TabVariant = 'primary' | 'secondary' | 'tertiary' | 'bottom-navigation' | 'contained';\nexport type TabIndicatorColor = 'primary' | 'secondary';\nexport type TabIndicatorSize = 'full' | 'fit-content';\n\nexport default interface TabProps extends OverridableComponentProps<TabBaseProps, {\n /**\n * If `true`, the badge is visible.\n * @default false\n */\n badgeVisible?: boolean;\n\n /**\n * The label of the Tab.\n */\n children: string | React.ReactElement;\n\n /**\n * If `true`, the indicator is enabled.\n * @default false\n */\n enableIndicator?: boolean;\n\n /**\n * If `true`, the component is selected.\n * @default false\n */\n selected?: boolean;\n\n /**\n * Element placed before the children.\n */\n icon?: React.ReactElement;\n\n /**\n * Tab indicator color\n * @default 'primary'\n */\n indicatorColor?: TabIndicatorColor;\n\n /**\n * The size of tab indicator.\n * 'full' adjusts the indicator to the size of the Tab,\n * while 'fit-content' adjusts the indicator to the size of the content inside the Tab.\n * @default 'full'\n */\n indicatorSize?: TabIndicatorSize;\n\n /**\n * If supplied, use this icon on selected state.\n */\n selectedIcon?: React.ReactElement;\n\n /**\n * The variant to use.\n * @default 'primary'\n */\n variant?: TabVariant;\n\n /**\n * Function to be passed to the child component's onLayout prop.\n */\n onTabInnerLayout?: (event: LayoutChangeEvent) => void;\n}> {}\n"],"mappings":""}
|
|
@@ -92,7 +92,7 @@ export default function Image(props) {
|
|
|
92
92
|
children: alt,
|
|
93
93
|
style: styles.errorText
|
|
94
94
|
})) : source.uri ? /*#__PURE__*/React.createElement(ImageCore, {
|
|
95
|
-
alt:
|
|
95
|
+
alt: alt,
|
|
96
96
|
cache: cache,
|
|
97
97
|
disableDrag: disableDrag,
|
|
98
98
|
disableLongClick: disableLongClick,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["React","useState","Text","View","ImageCore","css","StyleSheet","useTheme","useStyles","theme","root","rounded","borderRadius","shape","roundness","overflow","placeholder","backgroundColor","palette","paper","grey","outlined","borderWidth","hairlineWidth","borderStyle","borderColor","error","alignItems","height","justifyContent","width","errorText","color","text","primary","fontFamily","fontSize","letterSpacing","lineHeight","textAlign","determinePlaceholderMode","props","disablePlaceholder","Image","alt","cache","disableDrag","disableLongClick","disableOutline","loading","onError","onErrorProp","onLoad","onLoadProp","overlaidChildren","resizeMode","source","style","square","otherProps","failed","setFailed","styles","placeholderMode","undefined","absoluteFill","zIndex","uri"],"sources":["Image.tsx"],"sourcesContent":["import React, { useState } from 'react';\nimport { Text, View } from 'react-native';\nimport type { NamedStylesStringUnion, UseStyles } from '@fountain-ui/styles';\nimport type { ImageCoreProps } from '../ImageCore';\nimport ImageCore from '../ImageCore';\nimport { css, StyleSheet, useTheme } from '../styles';\nimport type ImageProps from './ImageProps';\n\ntype PlaceholderMode =\n | 'default'\n | 'custom'\n | 'none';\n\ntype ImageStyleKeys =\n | 'root'\n | 'rounded'\n | 'placeholder'\n | 'outlined'\n | 'error'\n | 'errorText';\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 error: {\n alignItems: 'center',\n height: '100%',\n justifyContent: 'center',\n width: '100%',\n },\n errorText: {\n color: theme.palette.text.primary,\n fontFamily: 'Inter-Medium',\n fontSize: 12,\n letterSpacing: 0,\n lineHeight: 18,\n textAlign: 'center',\n },\n };\n};\n\nfunction determinePlaceholderMode(props: ImageProps): PlaceholderMode {\n if (props.disablePlaceholder) {\n return 'none';\n }\n\n return props.placeholder ? 'custom' : 'default';\n}\n\nexport default function Image(props: ImageProps) {\n const {\n alt,\n cache = 'immutable',\n disableDrag,\n disableLongClick,\n disableOutline,\n disablePlaceholder,\n error,\n loading = 'lazy',\n onError: onErrorProp,\n onLoad: onLoadProp,\n overlaidChildren,\n placeholder,\n resizeMode = 'cover',\n source,\n style,\n square = false,\n ...otherProps\n } = props;\n\n const [failed, setFailed] = useState(false);\n\n const styles = useStyles();\n\n const onLoad: ImageCoreProps['onLoad'] = () => {\n setFailed(false);\n\n onLoadProp?.();\n };\n\n const onError: ImageCoreProps['onError'] = () => {\n setFailed(true);\n\n onErrorProp?.();\n };\n\n const placeholderMode = determinePlaceholderMode(props);\n\n return (\n <View\n style={css([\n styles.root,\n !disableOutline ? styles.outlined : undefined,\n !square ? styles.rounded : undefined,\n placeholderMode === 'default' ? styles.placeholder : undefined,\n style,\n ])}\n {...otherProps}\n >\n {placeholderMode === 'custom' ? (\n <View\n style={css([\n StyleSheet.absoluteFill,\n { zIndex: -1 },\n ])}\n >\n {placeholder}\n </View>\n ) : null}\n\n {failed ? (\n <View style={styles.error}>\n {error ?? (\n <Text\n children={alt}\n style={styles.errorText}\n />\n )}\n </View>\n ) : source.uri ? (\n <ImageCore\n alt={
|
|
1
|
+
{"version":3,"names":["React","useState","Text","View","ImageCore","css","StyleSheet","useTheme","useStyles","theme","root","rounded","borderRadius","shape","roundness","overflow","placeholder","backgroundColor","palette","paper","grey","outlined","borderWidth","hairlineWidth","borderStyle","borderColor","error","alignItems","height","justifyContent","width","errorText","color","text","primary","fontFamily","fontSize","letterSpacing","lineHeight","textAlign","determinePlaceholderMode","props","disablePlaceholder","Image","alt","cache","disableDrag","disableLongClick","disableOutline","loading","onError","onErrorProp","onLoad","onLoadProp","overlaidChildren","resizeMode","source","style","square","otherProps","failed","setFailed","styles","placeholderMode","undefined","absoluteFill","zIndex","uri"],"sources":["Image.tsx"],"sourcesContent":["import React, { useState } from 'react';\nimport { Text, View } from 'react-native';\nimport type { NamedStylesStringUnion, UseStyles } from '@fountain-ui/styles';\nimport type { ImageCoreProps } from '../ImageCore';\nimport ImageCore from '../ImageCore';\nimport { css, StyleSheet, useTheme } from '../styles';\nimport type ImageProps from './ImageProps';\n\ntype PlaceholderMode =\n | 'default'\n | 'custom'\n | 'none';\n\ntype ImageStyleKeys =\n | 'root'\n | 'rounded'\n | 'placeholder'\n | 'outlined'\n | 'error'\n | 'errorText';\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 error: {\n alignItems: 'center',\n height: '100%',\n justifyContent: 'center',\n width: '100%',\n },\n errorText: {\n color: theme.palette.text.primary,\n fontFamily: 'Inter-Medium',\n fontSize: 12,\n letterSpacing: 0,\n lineHeight: 18,\n textAlign: 'center',\n },\n };\n};\n\nfunction determinePlaceholderMode(props: ImageProps): PlaceholderMode {\n if (props.disablePlaceholder) {\n return 'none';\n }\n\n return props.placeholder ? 'custom' : 'default';\n}\n\nexport default function Image(props: ImageProps) {\n const {\n alt,\n cache = 'immutable',\n disableDrag,\n disableLongClick,\n disableOutline,\n disablePlaceholder,\n error,\n loading = 'lazy',\n onError: onErrorProp,\n onLoad: onLoadProp,\n overlaidChildren,\n placeholder,\n resizeMode = 'cover',\n source,\n style,\n square = false,\n ...otherProps\n } = props;\n\n const [failed, setFailed] = useState(false);\n\n const styles = useStyles();\n\n const onLoad: ImageCoreProps['onLoad'] = () => {\n setFailed(false);\n\n onLoadProp?.();\n };\n\n const onError: ImageCoreProps['onError'] = () => {\n setFailed(true);\n\n onErrorProp?.();\n };\n\n const placeholderMode = determinePlaceholderMode(props);\n\n return (\n <View\n style={css([\n styles.root,\n !disableOutline ? styles.outlined : undefined,\n !square ? styles.rounded : undefined,\n placeholderMode === 'default' ? styles.placeholder : undefined,\n style,\n ])}\n {...otherProps}\n >\n {placeholderMode === 'custom' ? (\n <View\n style={css([\n StyleSheet.absoluteFill,\n { zIndex: -1 },\n ])}\n >\n {placeholder}\n </View>\n ) : null}\n\n {failed ? (\n <View style={styles.error}>\n {error ?? (\n <Text\n children={alt}\n style={styles.errorText}\n />\n )}\n </View>\n ) : source.uri ? (\n <ImageCore\n alt={alt}\n cache={cache}\n disableDrag={disableDrag}\n disableLongClick={disableLongClick}\n height={'100%'}\n loading={loading}\n onError={onError}\n onLoad={onLoad}\n resizeMode={resizeMode}\n source={source}\n width={'100%'}\n />\n ) : null}\n\n {overlaidChildren ? (\n <View style={StyleSheet.absoluteFill}>\n {overlaidChildren}\n </View>\n ) : null}\n </View>\n );\n};"],"mappings":"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"}
|
package/build/module/Tab/Tab.js
CHANGED
|
@@ -49,9 +49,26 @@ export default function Tab(props) {
|
|
|
49
49
|
const tabBaseStyle = css([styles.root, variant === 'bottom-navigation' && styles.bottomNavigation, variant === 'contained' && containedStyle, style]);
|
|
50
50
|
const tabInnerStyle = css([styles.root, styles.filledInner]);
|
|
51
51
|
const fontStyle = createFontStyle(theme, {
|
|
52
|
-
selector: typo =>
|
|
53
|
-
|
|
54
|
-
|
|
52
|
+
selector: typo => {
|
|
53
|
+
switch (variant) {
|
|
54
|
+
case 'primary':
|
|
55
|
+
return typo.h2;
|
|
56
|
+
|
|
57
|
+
case 'secondary':
|
|
58
|
+
return typo.button2;
|
|
59
|
+
|
|
60
|
+
case 'tertiary':
|
|
61
|
+
return typo.h3;
|
|
62
|
+
|
|
63
|
+
case 'contained':
|
|
64
|
+
return selected ? { ...typo.subtitle2,
|
|
65
|
+
fontWeight: typo.fontWeight.medium
|
|
66
|
+
} : typo.body2;
|
|
67
|
+
|
|
68
|
+
default:
|
|
69
|
+
return typo.flag;
|
|
70
|
+
}
|
|
71
|
+
},
|
|
55
72
|
color
|
|
56
73
|
});
|
|
57
74
|
const pressEffect = selected ? 'none' : 'opacity';
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["React","cloneElement","Platform","Text","View","Badge","TabBase","createFontStyle","css","StyleSheet","useTheme","TabIndicator","styles","create","root","OS","minWidth","minHeight","bottomNavigation","filledInner","justifyContent","Tab","props","badgeVisible","children","enableIndicator","icon","defaultIcon","indicatorColor","indicatorSize","selected","selectedIcon","variant","style","onTabInnerLayout","otherProps","theme","vertical","color","palette","text","primary","secondary","hint","containedStyle","borderColor","main","border","borderRadius","shape","roundnessExtra","borderWidth","paddingHorizontal","spacing","paddingVertical","tabBaseStyle","tabInnerStyle","fontStyle","selector","typo","h2","button2","subtitle2","fontWeight","medium","body2","flag","pressEffect","iconElement","fill","tabElement","tabIndicator"],"sources":["Tab.tsx"],"sourcesContent":["import React, { cloneElement } from 'react';\nimport { Platform, Text, View } from 'react-native';\nimport Badge from '../Badge';\nimport TabBase from '../TabBase';\nimport
|
|
1
|
+
{"version":3,"names":["React","cloneElement","Platform","Text","View","Badge","TabBase","createFontStyle","css","StyleSheet","useTheme","TabIndicator","styles","create","root","OS","minWidth","minHeight","bottomNavigation","filledInner","justifyContent","Tab","props","badgeVisible","children","enableIndicator","icon","defaultIcon","indicatorColor","indicatorSize","selected","selectedIcon","variant","style","onTabInnerLayout","otherProps","theme","vertical","color","palette","text","primary","secondary","hint","containedStyle","borderColor","main","border","borderRadius","shape","roundnessExtra","borderWidth","paddingHorizontal","spacing","paddingVertical","tabBaseStyle","tabInnerStyle","fontStyle","selector","typo","h2","button2","h3","subtitle2","fontWeight","medium","body2","flag","pressEffect","iconElement","fill","tabElement","tabIndicator"],"sources":["Tab.tsx"],"sourcesContent":["import React, { cloneElement } from 'react';\nimport { Platform, Text, View } from 'react-native';\nimport Badge from '../Badge';\nimport TabBase from '../TabBase';\nimport { createFontStyle, css, StyleSheet, useTheme } from '../styles';\nimport type TabProps from './TabProps';\nimport TabIndicator from './TabIndicator';\n\nconst styles = StyleSheet.create({\n root: {\n // TODO: Remove redundant platform checking\n ...(Platform.OS === 'web' ? { minWidth: 'auto' } : {}),\n minHeight: 40,\n },\n bottomNavigation: {\n minHeight: 56,\n },\n filledInner: {\n justifyContent: 'center',\n },\n});\n\nexport default function Tab(props: TabProps) {\n const {\n badgeVisible = false,\n children,\n enableIndicator = false,\n icon: defaultIcon,\n indicatorColor = 'primary',\n indicatorSize = 'full',\n selected = false,\n selectedIcon,\n variant = 'primary',\n style,\n onTabInnerLayout,\n ...otherProps\n } = props;\n\n const theme = useTheme();\n\n const vertical = variant === 'bottom-navigation';\n\n const color = selected\n ? theme.palette.text.primary\n : variant === 'contained'\n ? theme.palette.text.secondary\n : theme.palette.text.hint;\n\n const containedStyle = {\n borderColor: selected ? theme.palette.primary.main : theme.palette.border,\n borderRadius: theme.shape.roundnessExtra,\n borderWidth: selected ? 1.5 : 1,\n minHeight: 'auto',\n paddingHorizontal: theme.spacing(3),\n paddingVertical: theme.spacing(1.5),\n };\n\n const tabBaseStyle = css([\n styles.root,\n variant === 'bottom-navigation' && styles.bottomNavigation,\n variant === 'contained' && containedStyle,\n style,\n ]);\n\n const tabInnerStyle = css([\n styles.root,\n styles.filledInner,\n ]);\n\n const fontStyle = createFontStyle(theme, {\n selector: (typo) => {\n switch (variant) {\n case 'primary':\n return typo.h2;\n case 'secondary':\n return typo.button2;\n case 'tertiary':\n return typo.h3;\n case 'contained':\n return selected\n ? { ...typo.subtitle2, fontWeight: typo.fontWeight.medium }\n : typo.body2;\n default:\n return typo.flag;\n }\n },\n color,\n });\n const pressEffect = selected ? 'none' : 'opacity';\n\n const icon = selected ? (selectedIcon || defaultIcon) : defaultIcon;\n const iconElement = icon ? cloneElement(icon, { fill: color }) : null;\n\n const tabElement = typeof children !== 'string' ? (\n React.cloneElement(children, {\n selected,\n })\n ) : (\n <React.Fragment>\n <Badge\n children={iconElement}\n invisible={!badgeVisible}\n />\n\n <Text\n children={children}\n style={css(fontStyle)}\n />\n </React.Fragment>\n );\n const tabIndicator = (enableIndicator && selected)\n ? <TabIndicator indicatorSize={indicatorSize} color={indicatorColor}/>\n : null;\n\n return (\n <TabBase\n pressEffect={pressEffect}\n style={tabBaseStyle}\n vertical={vertical}\n {...otherProps}\n >\n {indicatorSize === 'fit-content' ? (\n <View onLayout={onTabInnerLayout} style={tabInnerStyle}>\n {tabElement}\n\n {tabIndicator}\n </View>\n ) : (\n <React.Fragment>\n {tabElement}\n\n {tabIndicator}\n </React.Fragment>\n )}\n </TabBase>\n );\n};\n"],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":[],"sources":["TabProps.ts"],"sourcesContent":["import React from 'react';\nimport type { LayoutChangeEvent } from 'react-native';\nimport type { TabBaseProps } from '../TabBase';\nimport type { OverridableComponentProps } from '../types';\n\nexport type TabVariant = 'primary' | 'secondary' | 'bottom-navigation' | 'contained';\nexport type TabIndicatorColor = 'primary' | 'secondary'
|
|
1
|
+
{"version":3,"names":[],"sources":["TabProps.ts"],"sourcesContent":["import React from 'react';\nimport type { LayoutChangeEvent } from 'react-native';\nimport type { TabBaseProps } from '../TabBase';\nimport type { OverridableComponentProps } from '../types';\n\nexport type TabVariant = 'primary' | 'secondary' | 'tertiary' | 'bottom-navigation' | 'contained';\nexport type TabIndicatorColor = 'primary' | 'secondary';\nexport type TabIndicatorSize = 'full' | 'fit-content';\n\nexport default interface TabProps extends OverridableComponentProps<TabBaseProps, {\n /**\n * If `true`, the badge is visible.\n * @default false\n */\n badgeVisible?: boolean;\n\n /**\n * The label of the Tab.\n */\n children: string | React.ReactElement;\n\n /**\n * If `true`, the indicator is enabled.\n * @default false\n */\n enableIndicator?: boolean;\n\n /**\n * If `true`, the component is selected.\n * @default false\n */\n selected?: boolean;\n\n /**\n * Element placed before the children.\n */\n icon?: React.ReactElement;\n\n /**\n * Tab indicator color\n * @default 'primary'\n */\n indicatorColor?: TabIndicatorColor;\n\n /**\n * The size of tab indicator.\n * 'full' adjusts the indicator to the size of the Tab,\n * while 'fit-content' adjusts the indicator to the size of the content inside the Tab.\n * @default 'full'\n */\n indicatorSize?: TabIndicatorSize;\n\n /**\n * If supplied, use this icon on selected state.\n */\n selectedIcon?: React.ReactElement;\n\n /**\n * The variant to use.\n * @default 'primary'\n */\n variant?: TabVariant;\n\n /**\n * Function to be passed to the child component's onLayout prop.\n */\n onTabInnerLayout?: (event: LayoutChangeEvent) => void;\n}> {}\n"],"mappings":""}
|
|
@@ -2,7 +2,7 @@ import React from 'react';
|
|
|
2
2
|
import type { LayoutChangeEvent } from 'react-native';
|
|
3
3
|
import type { TabBaseProps } from '../TabBase';
|
|
4
4
|
import type { OverridableComponentProps } from '../types';
|
|
5
|
-
export declare type TabVariant = 'primary' | 'secondary' | 'bottom-navigation' | 'contained';
|
|
5
|
+
export declare type TabVariant = 'primary' | 'secondary' | 'tertiary' | 'bottom-navigation' | 'contained';
|
|
6
6
|
export declare type TabIndicatorColor = 'primary' | 'secondary';
|
|
7
7
|
export declare type TabIndicatorSize = 'full' | 'fit-content';
|
|
8
8
|
export default interface TabProps extends OverridableComponentProps<TabBaseProps, {
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@fountain-ui/core",
|
|
3
|
-
"version": "2.0.0-beta.
|
|
3
|
+
"version": "2.0.0-beta.86",
|
|
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": "c122e06e3dd153781e39bdd5aa47917860453a05"
|
|
71
71
|
}
|
package/src/Image/Image.tsx
CHANGED
package/src/Tab/Tab.tsx
CHANGED
|
@@ -2,8 +2,8 @@ import React, { cloneElement } from 'react';
|
|
|
2
2
|
import { Platform, Text, View } from 'react-native';
|
|
3
3
|
import Badge from '../Badge';
|
|
4
4
|
import TabBase from '../TabBase';
|
|
5
|
-
import type TabProps from './TabProps';
|
|
6
5
|
import { createFontStyle, css, StyleSheet, useTheme } from '../styles';
|
|
6
|
+
import type TabProps from './TabProps';
|
|
7
7
|
import TabIndicator from './TabIndicator';
|
|
8
8
|
|
|
9
9
|
const styles = StyleSheet.create({
|
|
@@ -68,16 +68,24 @@ export default function Tab(props: TabProps) {
|
|
|
68
68
|
]);
|
|
69
69
|
|
|
70
70
|
const fontStyle = createFontStyle(theme, {
|
|
71
|
-
selector: (typo) =>
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
71
|
+
selector: (typo) => {
|
|
72
|
+
switch (variant) {
|
|
73
|
+
case 'primary':
|
|
74
|
+
return typo.h2;
|
|
75
|
+
case 'secondary':
|
|
76
|
+
return typo.button2;
|
|
77
|
+
case 'tertiary':
|
|
78
|
+
return typo.h3;
|
|
79
|
+
case 'contained':
|
|
80
|
+
return selected
|
|
81
|
+
? { ...typo.subtitle2, fontWeight: typo.fontWeight.medium }
|
|
82
|
+
: typo.body2;
|
|
83
|
+
default:
|
|
84
|
+
return typo.flag;
|
|
85
|
+
}
|
|
86
|
+
},
|
|
78
87
|
color,
|
|
79
88
|
});
|
|
80
|
-
|
|
81
89
|
const pressEffect = selected ? 'none' : 'opacity';
|
|
82
90
|
|
|
83
91
|
const icon = selected ? (selectedIcon || defaultIcon) : defaultIcon;
|
package/src/Tab/TabProps.ts
CHANGED
|
@@ -3,8 +3,8 @@ import type { LayoutChangeEvent } from 'react-native';
|
|
|
3
3
|
import type { TabBaseProps } from '../TabBase';
|
|
4
4
|
import type { OverridableComponentProps } from '../types';
|
|
5
5
|
|
|
6
|
-
export type TabVariant = 'primary' | 'secondary' | 'bottom-navigation' | 'contained';
|
|
7
|
-
export type TabIndicatorColor = 'primary' | 'secondary'
|
|
6
|
+
export type TabVariant = 'primary' | 'secondary' | 'tertiary' | 'bottom-navigation' | 'contained';
|
|
7
|
+
export type TabIndicatorColor = 'primary' | 'secondary';
|
|
8
8
|
export type TabIndicatorSize = 'full' | 'fit-content';
|
|
9
9
|
|
|
10
10
|
export default interface TabProps extends OverridableComponentProps<TabBaseProps, {
|