@fountain-ui/core 3.0.0-alpha.8 → 3.0.0-alpha.9
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.
|
@@ -66,7 +66,11 @@ const Typography = /*#__PURE__*/_react.default.forwardRef(function Typography(pr
|
|
|
66
66
|
} = props;
|
|
67
67
|
const theme = (0, _styles.useTheme)();
|
|
68
68
|
const fontStyle = (0, _styles.createFontStyle)(theme, {
|
|
69
|
-
selector: typography =>
|
|
69
|
+
selector: typography => {
|
|
70
|
+
var _typography$variant;
|
|
71
|
+
|
|
72
|
+
return (_typography$variant = typography[variant]) === null || _typography$variant === void 0 ? void 0 : _typography$variant[weight];
|
|
73
|
+
},
|
|
70
74
|
color: selectColor(theme, colorProp)
|
|
71
75
|
}); // To prevent white-space: pre, word-wrap:break-word style conflicting issue at safari browser.
|
|
72
76
|
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["accessibilityMap","selectColor","theme","colorProp","Platform","OS","undefined","palette","text","styles","StyleSheet","create","root","flexShrink","maxWidth","Typography","React","forwardRef","props","ref","accessibilityRole","align","ariaLevel","disableFontScaling","children","color","ellipsizeMode","href","numberOfLines","onPress","selectable","style","variant","weight","onLayout","onTextLayout","useTheme","fontStyle","createFontStyle","selector","typography","textWrapStyle","wordWrap","textStyle","css","textAlign","accessibility","variantRole","variantLevel","memo"],"sources":["Typography.tsx"],"sourcesContent":["import React from 'react';\nimport type { TextProps, TextStyle } from 'react-native';\nimport { Platform, Text } from 'react-native';\nimport type { FontVariant, FontWeight, Theme } from '@fountain-ui/styles';\nimport { createFontStyle, css, StyleSheet, useTheme } from '../styles';\nimport type TypographyProps from './TypographyProps';\nimport type { AccessibilityMap, TypographyAlign, TypographyColor } from './TypographyProps';\n\nconst accessibilityMap: AccessibilityMap = {\n // TODO: set accessibilityRole.\n // h1: { accessibilityRole: 'header', 'aria-level': 1 },\n // h2: { accessibilityRole: 'header', 'aria-level': 2 },\n // h3: { accessibilityRole: 'header', 'aria-level': 3 },\n // subtitle1: { accessibilityRole: 'header', 'aria-level': 6 },\n // subtitle2: { accessibilityRole: 'header', 'aria-level': 6 },\n // body1: { accessibilityRole: 'text' },\n // body2: { accessibilityRole: 'text' },\n // caption1: { accessibilityRole: 'text' },\n // caption2: { accessibilityRole: 'text' },\n // flag: { accessibilityRole: 'text' },\n};\n\nfunction selectColor(theme: Theme, colorProp: TypographyColor): string | undefined {\n switch (colorProp) {\n case 'inherit':\n return Platform.OS === 'web' ? 'inherit' : undefined;\n default:\n return theme.palette.text[colorProp];\n }\n}\n\nconst styles = StyleSheet.create({\n root: {\n flexShrink: 1,\n ...(Platform.OS === 'web' ? { maxWidth: '100%' } : {}),\n },\n});\n\nconst Typography = React.forwardRef<Text, TypographyProps>(function Typography(props, ref) {\n const {\n accessibilityRole,\n align = 'inherit' as TypographyAlign,\n ariaLevel,\n disableFontScaling = false,\n children,\n color: colorProp = 'inherit' as TypographyColor,\n ellipsizeMode = 'tail' as TextProps['ellipsizeMode'],\n href,\n numberOfLines,\n onPress,\n selectable,\n style,\n variant = 'body1' as FontVariant,\n weight = 'medium' as FontWeight,\n onLayout,\n onTextLayout,\n } = props;\n\n const theme = useTheme();\n\n const fontStyle = createFontStyle(theme, {\n selector: (typography) => typography[variant][weight],\n color: selectColor(theme, colorProp),\n });\n\n // To prevent white-space: pre, word-wrap:break-word style conflicting issue at safari browser.\n const textWrapStyle = numberOfLines && numberOfLines > 0 && Platform.OS === 'web' ? { wordWrap: 'normal' } : {};\n\n const textStyle = css([\n styles.root,\n { textAlign: align === 'inherit' ? 'auto' : align },\n textWrapStyle as TextStyle,\n fontStyle,\n style,\n ]);\n\n const accessibility = accessibilityMap[variant];\n const variantRole = href !== undefined ? 'link' : accessibility?.accessibilityRole;\n const variantLevel = accessibility?.['area-level'];\n\n return (\n <Text\n ref={ref}\n accessibilityRole={accessibilityRole || variantRole}\n allowFontScaling={!disableFontScaling}\n aria-level={ariaLevel || variantLevel}\n children={children}\n ellipsizeMode={ellipsizeMode}\n // @ts-ignore\n href={href}\n numberOfLines={numberOfLines}\n onPress={onPress}\n selectable={selectable}\n style={textStyle}\n onLayout={onLayout}\n onTextLayout={onTextLayout}\n />\n );\n});\n\nexport default React.memo(Typography);\n"],"mappings":";;;;;;;AAAA;;AAEA;;AAEA;;;;AAIA,MAAMA,gBAAkC,GAAG,CACvC;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;AAXuC,CAA3C;;AAcA,SAASC,WAAT,CAAqBC,KAArB,EAAmCC,SAAnC,EAAmF;EAC/E,QAAQA,SAAR;IACI,KAAK,SAAL;MACI,OAAOC,qBAAA,CAASC,EAAT,KAAgB,KAAhB,GAAwB,SAAxB,GAAoCC,SAA3C;;IACJ;MACI,OAAOJ,KAAK,CAACK,OAAN,CAAcC,IAAd,CAAmBL,SAAnB,CAAP;EAJR;AAMH;;AAED,MAAMM,MAAM,GAAGC,kBAAA,CAAWC,MAAX,CAAkB;EAC7BC,IAAI,EAAE;IACFC,UAAU,EAAE,CADV;IAEF,IAAIT,qBAAA,CAASC,EAAT,KAAgB,KAAhB,GAAwB;MAAES,QAAQ,EAAE;IAAZ,CAAxB,GAA+C,EAAnD;EAFE;AADuB,CAAlB,CAAf;;AAOA,MAAMC,UAAU,gBAAGC,cAAA,CAAMC,UAAN,CAAwC,SAASF,UAAT,CAAoBG,KAApB,EAA2BC,GAA3B,EAAgC;EACvF,MAAM;IACFC,iBADE;IAEFC,KAAK,GAAG,SAFN;IAGFC,SAHE;IAIFC,kBAAkB,GAAG,KAJnB;IAKFC,QALE;IAMFC,KAAK,EAAEtB,SAAS,GAAG,SANjB;IAOFuB,aAAa,GAAG,MAPd;IAQFC,IARE;IASFC,aATE;IAUFC,OAVE;IAWFC,UAXE;IAYFC,KAZE;IAaFC,OAAO,GAAG,OAbR;IAcFC,MAAM,GAAG,QAdP;IAeFC,QAfE;IAgBFC;EAhBE,IAiBFjB,KAjBJ;EAmBA,MAAMhB,KAAK,GAAG,IAAAkC,gBAAA,GAAd;EAEA,MAAMC,SAAS,GAAG,IAAAC,uBAAA,EAAgBpC,KAAhB,EAAuB;IACrCqC,QAAQ,EAAGC,UAAD,
|
|
1
|
+
{"version":3,"names":["accessibilityMap","selectColor","theme","colorProp","Platform","OS","undefined","palette","text","styles","StyleSheet","create","root","flexShrink","maxWidth","Typography","React","forwardRef","props","ref","accessibilityRole","align","ariaLevel","disableFontScaling","children","color","ellipsizeMode","href","numberOfLines","onPress","selectable","style","variant","weight","onLayout","onTextLayout","useTheme","fontStyle","createFontStyle","selector","typography","textWrapStyle","wordWrap","textStyle","css","textAlign","accessibility","variantRole","variantLevel","memo"],"sources":["Typography.tsx"],"sourcesContent":["import React from 'react';\nimport type { TextProps, TextStyle } from 'react-native';\nimport { Platform, Text } from 'react-native';\nimport type { FontVariant, FontWeight, Theme } from '@fountain-ui/styles';\nimport { createFontStyle, css, StyleSheet, useTheme } from '../styles';\nimport type TypographyProps from './TypographyProps';\nimport type { AccessibilityMap, TypographyAlign, TypographyColor } from './TypographyProps';\n\nconst accessibilityMap: AccessibilityMap = {\n // TODO: set accessibilityRole.\n // h1: { accessibilityRole: 'header', 'aria-level': 1 },\n // h2: { accessibilityRole: 'header', 'aria-level': 2 },\n // h3: { accessibilityRole: 'header', 'aria-level': 3 },\n // subtitle1: { accessibilityRole: 'header', 'aria-level': 6 },\n // subtitle2: { accessibilityRole: 'header', 'aria-level': 6 },\n // body1: { accessibilityRole: 'text' },\n // body2: { accessibilityRole: 'text' },\n // caption1: { accessibilityRole: 'text' },\n // caption2: { accessibilityRole: 'text' },\n // flag: { accessibilityRole: 'text' },\n};\n\nfunction selectColor(theme: Theme, colorProp: TypographyColor): string | undefined {\n switch (colorProp) {\n case 'inherit':\n return Platform.OS === 'web' ? 'inherit' : undefined;\n default:\n return theme.palette.text[colorProp];\n }\n}\n\nconst styles = StyleSheet.create({\n root: {\n flexShrink: 1,\n ...(Platform.OS === 'web' ? { maxWidth: '100%' } : {}),\n },\n});\n\nconst Typography = React.forwardRef<Text, TypographyProps>(function Typography(props, ref) {\n const {\n accessibilityRole,\n align = 'inherit' as TypographyAlign,\n ariaLevel,\n disableFontScaling = false,\n children,\n color: colorProp = 'inherit' as TypographyColor,\n ellipsizeMode = 'tail' as TextProps['ellipsizeMode'],\n href,\n numberOfLines,\n onPress,\n selectable,\n style,\n variant = 'body1' as FontVariant,\n weight = 'medium' as FontWeight,\n onLayout,\n onTextLayout,\n } = props;\n\n const theme = useTheme();\n\n const fontStyle = createFontStyle(theme, {\n selector: (typography) => typography[variant]?.[weight],\n color: selectColor(theme, colorProp),\n });\n\n // To prevent white-space: pre, word-wrap:break-word style conflicting issue at safari browser.\n const textWrapStyle = numberOfLines && numberOfLines > 0 && Platform.OS === 'web' ? { wordWrap: 'normal' } : {};\n\n const textStyle = css([\n styles.root,\n { textAlign: align === 'inherit' ? 'auto' : align },\n textWrapStyle as TextStyle,\n fontStyle,\n style,\n ]);\n\n const accessibility = accessibilityMap[variant];\n const variantRole = href !== undefined ? 'link' : accessibility?.accessibilityRole;\n const variantLevel = accessibility?.['area-level'];\n\n return (\n <Text\n ref={ref}\n accessibilityRole={accessibilityRole || variantRole}\n allowFontScaling={!disableFontScaling}\n aria-level={ariaLevel || variantLevel}\n children={children}\n ellipsizeMode={ellipsizeMode}\n // @ts-ignore\n href={href}\n numberOfLines={numberOfLines}\n onPress={onPress}\n selectable={selectable}\n style={textStyle}\n onLayout={onLayout}\n onTextLayout={onTextLayout}\n />\n );\n});\n\nexport default React.memo(Typography);\n"],"mappings":";;;;;;;AAAA;;AAEA;;AAEA;;;;AAIA,MAAMA,gBAAkC,GAAG,CACvC;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;AAXuC,CAA3C;;AAcA,SAASC,WAAT,CAAqBC,KAArB,EAAmCC,SAAnC,EAAmF;EAC/E,QAAQA,SAAR;IACI,KAAK,SAAL;MACI,OAAOC,qBAAA,CAASC,EAAT,KAAgB,KAAhB,GAAwB,SAAxB,GAAoCC,SAA3C;;IACJ;MACI,OAAOJ,KAAK,CAACK,OAAN,CAAcC,IAAd,CAAmBL,SAAnB,CAAP;EAJR;AAMH;;AAED,MAAMM,MAAM,GAAGC,kBAAA,CAAWC,MAAX,CAAkB;EAC7BC,IAAI,EAAE;IACFC,UAAU,EAAE,CADV;IAEF,IAAIT,qBAAA,CAASC,EAAT,KAAgB,KAAhB,GAAwB;MAAES,QAAQ,EAAE;IAAZ,CAAxB,GAA+C,EAAnD;EAFE;AADuB,CAAlB,CAAf;;AAOA,MAAMC,UAAU,gBAAGC,cAAA,CAAMC,UAAN,CAAwC,SAASF,UAAT,CAAoBG,KAApB,EAA2BC,GAA3B,EAAgC;EACvF,MAAM;IACFC,iBADE;IAEFC,KAAK,GAAG,SAFN;IAGFC,SAHE;IAIFC,kBAAkB,GAAG,KAJnB;IAKFC,QALE;IAMFC,KAAK,EAAEtB,SAAS,GAAG,SANjB;IAOFuB,aAAa,GAAG,MAPd;IAQFC,IARE;IASFC,aATE;IAUFC,OAVE;IAWFC,UAXE;IAYFC,KAZE;IAaFC,OAAO,GAAG,OAbR;IAcFC,MAAM,GAAG,QAdP;IAeFC,QAfE;IAgBFC;EAhBE,IAiBFjB,KAjBJ;EAmBA,MAAMhB,KAAK,GAAG,IAAAkC,gBAAA,GAAd;EAEA,MAAMC,SAAS,GAAG,IAAAC,uBAAA,EAAgBpC,KAAhB,EAAuB;IACrCqC,QAAQ,EAAGC,UAAD;MAAA;;MAAA,8BAAgBA,UAAU,CAACR,OAAD,CAA1B,wDAAgB,oBAAsBC,MAAtB,CAAhB;IAAA,CAD2B;IAErCR,KAAK,EAAExB,WAAW,CAACC,KAAD,EAAQC,SAAR;EAFmB,CAAvB,CAAlB,CAtBuF,CA2BvF;;EACA,MAAMsC,aAAa,GAAGb,aAAa,IAAIA,aAAa,GAAG,CAAjC,IAAsCxB,qBAAA,CAASC,EAAT,KAAgB,KAAtD,GAA8D;IAAEqC,QAAQ,EAAE;EAAZ,CAA9D,GAAuF,EAA7G;EAEA,MAAMC,SAAS,GAAG,IAAAC,WAAA,EAAI,CAClBnC,MAAM,CAACG,IADW,EAElB;IAAEiC,SAAS,EAAExB,KAAK,KAAK,SAAV,GAAsB,MAAtB,GAA+BA;EAA5C,CAFkB,EAGlBoB,aAHkB,EAIlBJ,SAJkB,EAKlBN,KALkB,CAAJ,CAAlB;EAQA,MAAMe,aAAa,GAAG9C,gBAAgB,CAACgC,OAAD,CAAtC;EACA,MAAMe,WAAW,GAAGpB,IAAI,KAAKrB,SAAT,GAAqB,MAArB,GAA8BwC,aAA9B,aAA8BA,aAA9B,uBAA8BA,aAAa,CAAE1B,iBAAjE;EACA,MAAM4B,YAAY,GAAGF,aAAH,aAAGA,aAAH,uBAAGA,aAAa,CAAG,YAAH,CAAlC;EAEA,oBACI,6BAAC,iBAAD;IACI,GAAG,EAAE3B,GADT;IAEI,iBAAiB,EAAEC,iBAAiB,IAAI2B,WAF5C;IAGI,gBAAgB,EAAE,CAACxB,kBAHvB;IAII,cAAYD,SAAS,IAAI0B,YAJ7B;IAKI,QAAQ,EAAExB,QALd;IAMI,aAAa,EAAEE,aANnB,CAOI;IAPJ;IAQI,IAAI,EAAEC,IARV;IASI,aAAa,EAAEC,aATnB;IAUI,OAAO,EAAEC,OAVb;IAWI,UAAU,EAAEC,UAXhB;IAYI,KAAK,EAAEa,SAZX;IAaI,QAAQ,EAAET,QAbd;IAcI,YAAY,EAAEC;EAdlB,EADJ;AAkBH,CA5DkB,CAAnB;;4BA8DenB,cAAA,CAAMiC,IAAN,CAAWlC,UAAX,C"}
|
|
@@ -53,7 +53,11 @@ const Typography = /*#__PURE__*/React.forwardRef(function Typography(props, ref)
|
|
|
53
53
|
} = props;
|
|
54
54
|
const theme = useTheme();
|
|
55
55
|
const fontStyle = createFontStyle(theme, {
|
|
56
|
-
selector: typography =>
|
|
56
|
+
selector: typography => {
|
|
57
|
+
var _typography$variant;
|
|
58
|
+
|
|
59
|
+
return (_typography$variant = typography[variant]) === null || _typography$variant === void 0 ? void 0 : _typography$variant[weight];
|
|
60
|
+
},
|
|
57
61
|
color: selectColor(theme, colorProp)
|
|
58
62
|
}); // To prevent white-space: pre, word-wrap:break-word style conflicting issue at safari browser.
|
|
59
63
|
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["React","Platform","Text","createFontStyle","css","StyleSheet","useTheme","accessibilityMap","selectColor","theme","colorProp","OS","undefined","palette","text","styles","create","root","flexShrink","maxWidth","Typography","forwardRef","props","ref","accessibilityRole","align","ariaLevel","disableFontScaling","children","color","ellipsizeMode","href","numberOfLines","onPress","selectable","style","variant","weight","onLayout","onTextLayout","fontStyle","selector","typography","textWrapStyle","wordWrap","textStyle","textAlign","accessibility","variantRole","variantLevel","memo"],"sources":["Typography.tsx"],"sourcesContent":["import React from 'react';\nimport type { TextProps, TextStyle } from 'react-native';\nimport { Platform, Text } from 'react-native';\nimport type { FontVariant, FontWeight, Theme } from '@fountain-ui/styles';\nimport { createFontStyle, css, StyleSheet, useTheme } from '../styles';\nimport type TypographyProps from './TypographyProps';\nimport type { AccessibilityMap, TypographyAlign, TypographyColor } from './TypographyProps';\n\nconst accessibilityMap: AccessibilityMap = {\n // TODO: set accessibilityRole.\n // h1: { accessibilityRole: 'header', 'aria-level': 1 },\n // h2: { accessibilityRole: 'header', 'aria-level': 2 },\n // h3: { accessibilityRole: 'header', 'aria-level': 3 },\n // subtitle1: { accessibilityRole: 'header', 'aria-level': 6 },\n // subtitle2: { accessibilityRole: 'header', 'aria-level': 6 },\n // body1: { accessibilityRole: 'text' },\n // body2: { accessibilityRole: 'text' },\n // caption1: { accessibilityRole: 'text' },\n // caption2: { accessibilityRole: 'text' },\n // flag: { accessibilityRole: 'text' },\n};\n\nfunction selectColor(theme: Theme, colorProp: TypographyColor): string | undefined {\n switch (colorProp) {\n case 'inherit':\n return Platform.OS === 'web' ? 'inherit' : undefined;\n default:\n return theme.palette.text[colorProp];\n }\n}\n\nconst styles = StyleSheet.create({\n root: {\n flexShrink: 1,\n ...(Platform.OS === 'web' ? { maxWidth: '100%' } : {}),\n },\n});\n\nconst Typography = React.forwardRef<Text, TypographyProps>(function Typography(props, ref) {\n const {\n accessibilityRole,\n align = 'inherit' as TypographyAlign,\n ariaLevel,\n disableFontScaling = false,\n children,\n color: colorProp = 'inherit' as TypographyColor,\n ellipsizeMode = 'tail' as TextProps['ellipsizeMode'],\n href,\n numberOfLines,\n onPress,\n selectable,\n style,\n variant = 'body1' as FontVariant,\n weight = 'medium' as FontWeight,\n onLayout,\n onTextLayout,\n } = props;\n\n const theme = useTheme();\n\n const fontStyle = createFontStyle(theme, {\n selector: (typography) => typography[variant][weight],\n color: selectColor(theme, colorProp),\n });\n\n // To prevent white-space: pre, word-wrap:break-word style conflicting issue at safari browser.\n const textWrapStyle = numberOfLines && numberOfLines > 0 && Platform.OS === 'web' ? { wordWrap: 'normal' } : {};\n\n const textStyle = css([\n styles.root,\n { textAlign: align === 'inherit' ? 'auto' : align },\n textWrapStyle as TextStyle,\n fontStyle,\n style,\n ]);\n\n const accessibility = accessibilityMap[variant];\n const variantRole = href !== undefined ? 'link' : accessibility?.accessibilityRole;\n const variantLevel = accessibility?.['area-level'];\n\n return (\n <Text\n ref={ref}\n accessibilityRole={accessibilityRole || variantRole}\n allowFontScaling={!disableFontScaling}\n aria-level={ariaLevel || variantLevel}\n children={children}\n ellipsizeMode={ellipsizeMode}\n // @ts-ignore\n href={href}\n numberOfLines={numberOfLines}\n onPress={onPress}\n selectable={selectable}\n style={textStyle}\n onLayout={onLayout}\n onTextLayout={onTextLayout}\n />\n );\n});\n\nexport default React.memo(Typography);\n"],"mappings":"AAAA,OAAOA,KAAP,MAAkB,OAAlB;AAEA,SAASC,QAAT,EAAmBC,IAAnB,QAA+B,cAA/B;AAEA,SAASC,eAAT,EAA0BC,GAA1B,EAA+BC,UAA/B,EAA2CC,QAA3C,QAA2D,WAA3D;AAIA,MAAMC,gBAAkC,GAAG,CACvC;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;AAXuC,CAA3C;;AAcA,SAASC,WAAT,CAAqBC,KAArB,EAAmCC,SAAnC,EAAmF;EAC/E,QAAQA,SAAR;IACI,KAAK,SAAL;MACI,OAAOT,QAAQ,CAACU,EAAT,KAAgB,KAAhB,GAAwB,SAAxB,GAAoCC,SAA3C;;IACJ;MACI,OAAOH,KAAK,CAACI,OAAN,CAAcC,IAAd,CAAmBJ,SAAnB,CAAP;EAJR;AAMH;;AAED,MAAMK,MAAM,GAAGV,UAAU,CAACW,MAAX,CAAkB;EAC7BC,IAAI,EAAE;IACFC,UAAU,EAAE,CADV;IAEF,IAAIjB,QAAQ,CAACU,EAAT,KAAgB,KAAhB,GAAwB;MAAEQ,QAAQ,EAAE;IAAZ,CAAxB,GAA+C,EAAnD;EAFE;AADuB,CAAlB,CAAf;AAOA,MAAMC,UAAU,gBAAGpB,KAAK,CAACqB,UAAN,CAAwC,SAASD,UAAT,CAAoBE,KAApB,EAA2BC,GAA3B,EAAgC;EACvF,MAAM;IACFC,iBADE;IAEFC,KAAK,GAAG,SAFN;IAGFC,SAHE;IAIFC,kBAAkB,GAAG,KAJnB;IAKFC,QALE;IAMFC,KAAK,EAAEnB,SAAS,GAAG,SANjB;IAOFoB,aAAa,GAAG,MAPd;IAQFC,IARE;IASFC,aATE;IAUFC,OAVE;IAWFC,UAXE;IAYFC,KAZE;IAaFC,OAAO,GAAG,OAbR;IAcFC,MAAM,GAAG,QAdP;IAeFC,QAfE;IAgBFC;EAhBE,IAiBFjB,KAjBJ;EAmBA,MAAMb,KAAK,GAAGH,QAAQ,EAAtB;EAEA,MAAMkC,SAAS,GAAGrC,eAAe,CAACM,KAAD,EAAQ;IACrCgC,QAAQ,EAAGC,UAAD,
|
|
1
|
+
{"version":3,"names":["React","Platform","Text","createFontStyle","css","StyleSheet","useTheme","accessibilityMap","selectColor","theme","colorProp","OS","undefined","palette","text","styles","create","root","flexShrink","maxWidth","Typography","forwardRef","props","ref","accessibilityRole","align","ariaLevel","disableFontScaling","children","color","ellipsizeMode","href","numberOfLines","onPress","selectable","style","variant","weight","onLayout","onTextLayout","fontStyle","selector","typography","textWrapStyle","wordWrap","textStyle","textAlign","accessibility","variantRole","variantLevel","memo"],"sources":["Typography.tsx"],"sourcesContent":["import React from 'react';\nimport type { TextProps, TextStyle } from 'react-native';\nimport { Platform, Text } from 'react-native';\nimport type { FontVariant, FontWeight, Theme } from '@fountain-ui/styles';\nimport { createFontStyle, css, StyleSheet, useTheme } from '../styles';\nimport type TypographyProps from './TypographyProps';\nimport type { AccessibilityMap, TypographyAlign, TypographyColor } from './TypographyProps';\n\nconst accessibilityMap: AccessibilityMap = {\n // TODO: set accessibilityRole.\n // h1: { accessibilityRole: 'header', 'aria-level': 1 },\n // h2: { accessibilityRole: 'header', 'aria-level': 2 },\n // h3: { accessibilityRole: 'header', 'aria-level': 3 },\n // subtitle1: { accessibilityRole: 'header', 'aria-level': 6 },\n // subtitle2: { accessibilityRole: 'header', 'aria-level': 6 },\n // body1: { accessibilityRole: 'text' },\n // body2: { accessibilityRole: 'text' },\n // caption1: { accessibilityRole: 'text' },\n // caption2: { accessibilityRole: 'text' },\n // flag: { accessibilityRole: 'text' },\n};\n\nfunction selectColor(theme: Theme, colorProp: TypographyColor): string | undefined {\n switch (colorProp) {\n case 'inherit':\n return Platform.OS === 'web' ? 'inherit' : undefined;\n default:\n return theme.palette.text[colorProp];\n }\n}\n\nconst styles = StyleSheet.create({\n root: {\n flexShrink: 1,\n ...(Platform.OS === 'web' ? { maxWidth: '100%' } : {}),\n },\n});\n\nconst Typography = React.forwardRef<Text, TypographyProps>(function Typography(props, ref) {\n const {\n accessibilityRole,\n align = 'inherit' as TypographyAlign,\n ariaLevel,\n disableFontScaling = false,\n children,\n color: colorProp = 'inherit' as TypographyColor,\n ellipsizeMode = 'tail' as TextProps['ellipsizeMode'],\n href,\n numberOfLines,\n onPress,\n selectable,\n style,\n variant = 'body1' as FontVariant,\n weight = 'medium' as FontWeight,\n onLayout,\n onTextLayout,\n } = props;\n\n const theme = useTheme();\n\n const fontStyle = createFontStyle(theme, {\n selector: (typography) => typography[variant]?.[weight],\n color: selectColor(theme, colorProp),\n });\n\n // To prevent white-space: pre, word-wrap:break-word style conflicting issue at safari browser.\n const textWrapStyle = numberOfLines && numberOfLines > 0 && Platform.OS === 'web' ? { wordWrap: 'normal' } : {};\n\n const textStyle = css([\n styles.root,\n { textAlign: align === 'inherit' ? 'auto' : align },\n textWrapStyle as TextStyle,\n fontStyle,\n style,\n ]);\n\n const accessibility = accessibilityMap[variant];\n const variantRole = href !== undefined ? 'link' : accessibility?.accessibilityRole;\n const variantLevel = accessibility?.['area-level'];\n\n return (\n <Text\n ref={ref}\n accessibilityRole={accessibilityRole || variantRole}\n allowFontScaling={!disableFontScaling}\n aria-level={ariaLevel || variantLevel}\n children={children}\n ellipsizeMode={ellipsizeMode}\n // @ts-ignore\n href={href}\n numberOfLines={numberOfLines}\n onPress={onPress}\n selectable={selectable}\n style={textStyle}\n onLayout={onLayout}\n onTextLayout={onTextLayout}\n />\n );\n});\n\nexport default React.memo(Typography);\n"],"mappings":"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"}
|
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.9",
|
|
4
4
|
"author": "Fountain-UI Team",
|
|
5
5
|
"description": "React components that implement Tappytoon's Fountain Design.",
|
|
6
6
|
"license": "MIT",
|
|
@@ -14,7 +14,7 @@
|
|
|
14
14
|
"prepare": "bob build"
|
|
15
15
|
},
|
|
16
16
|
"dependencies": {
|
|
17
|
-
"@fountain-ui/styles": "^3.0.0-alpha.
|
|
17
|
+
"@fountain-ui/styles": "^3.0.0-alpha.6",
|
|
18
18
|
"@fountain-ui/utils": "^3.0.0-alpha.1"
|
|
19
19
|
},
|
|
20
20
|
"peerDependencies": {
|
|
@@ -67,5 +67,5 @@
|
|
|
67
67
|
"publishConfig": {
|
|
68
68
|
"access": "public"
|
|
69
69
|
},
|
|
70
|
-
"gitHead": "
|
|
70
|
+
"gitHead": "2ebd0656fc8bed0a494846f52ac75300cbef4917"
|
|
71
71
|
}
|
|
@@ -59,7 +59,7 @@ const Typography = React.forwardRef<Text, TypographyProps>(function Typography(p
|
|
|
59
59
|
const theme = useTheme();
|
|
60
60
|
|
|
61
61
|
const fontStyle = createFontStyle(theme, {
|
|
62
|
-
selector: (typography) => typography[variant][weight],
|
|
62
|
+
selector: (typography) => typography[variant]?.[weight],
|
|
63
63
|
color: selectColor(theme, colorProp),
|
|
64
64
|
});
|
|
65
65
|
|