@fountain-ui/core 3.0.0-alpha.22 → 3.0.0-alpha.23
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/TextField/useVariantStyleMap.js +7 -5
- package/build/commonjs/TextField/useVariantStyleMap.js.map +1 -1
- package/build/commonjs/hooks/useContentContainerStyle.js +24 -3
- package/build/commonjs/hooks/useContentContainerStyle.js.map +1 -1
- package/build/module/Image/Image.js +1 -1
- package/build/module/Image/Image.js.map +1 -1
- package/build/module/TextField/useVariantStyleMap.js +7 -5
- package/build/module/TextField/useVariantStyleMap.js.map +1 -1
- package/build/module/hooks/useContentContainerStyle.js +24 -3
- package/build/module/hooks/useContentContainerStyle.js.map +1 -1
- package/build/typescript/hooks/useContentContainerStyle.d.ts +1 -0
- package/package.json +2 -2
- package/src/Image/Image.tsx +2 -2
- package/src/TextField/useVariantStyleMap.ts +4 -3
- package/src/hooks/useContentContainerStyle.ts +22 -2
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["useStyles","theme","useTheme","root","rounded","borderRadius","shape","roundness","overflow","placeholder","backgroundColor","palette","paper","grey","outlined","borderWidth","
|
|
1
|
+
{"version":3,"names":["useStyles","theme","useTheme","root","rounded","borderRadius","shape","roundness","overflow","placeholder","backgroundColor","palette","paper","grey","outlined","borderWidth","borderStyle","borderColor","border","weak","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","StyleSheet","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: 0.5,\n borderStyle: 'solid',\n borderColor: theme.palette.border.weak,\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};\n"],"mappings":"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"}
|
|
@@ -48,12 +48,12 @@ function useVariantStyleMap(variant, status, isFocused) {
|
|
|
48
48
|
containerStyle: {
|
|
49
49
|
borderBottomColor: status === 'default' && isFocused ? theme.palette.border.strong : borderColor,
|
|
50
50
|
borderBottomWidth: 1,
|
|
51
|
-
minHeight: 60
|
|
51
|
+
minHeight: 60,
|
|
52
|
+
paddingVertical: 16
|
|
52
53
|
},
|
|
53
54
|
inputStyle: {
|
|
54
|
-
|
|
55
|
-
paddingRight:
|
|
56
|
-
paddingVertical: theme.spacing(4),
|
|
55
|
+
padding: 0,
|
|
56
|
+
paddingRight: 16,
|
|
57
57
|
...(0, _styles2.createFontStyle)(theme, {
|
|
58
58
|
selector: _ => (0, _styles.typographyOf)({
|
|
59
59
|
fontSize: 18,
|
|
@@ -84,7 +84,9 @@ function useVariantStyleMap(variant, status, isFocused) {
|
|
|
84
84
|
paddingHorizontal: 39,
|
|
85
85
|
paddingTop: 11
|
|
86
86
|
},
|
|
87
|
-
inputStyle: {
|
|
87
|
+
inputStyle: {
|
|
88
|
+
padding: 0,
|
|
89
|
+
...(0, _styles2.createFontStyle)(theme, {
|
|
88
90
|
selector: _ => (0, _styles.typographyOf)({
|
|
89
91
|
fontSize: 16,
|
|
90
92
|
lineHeight: 19.2,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["useStatusColor","theme","status","borderColor","palette","border","base","hintColor","text","weak","success","danger","useVariantStyleMap","variant","isFocused","useTheme","useMemo","containerStyle","borderBottomColor","strong","borderBottomWidth","minHeight","
|
|
1
|
+
{"version":3,"names":["useStatusColor","theme","status","borderColor","palette","border","base","hintColor","text","weak","success","danger","useVariantStyleMap","variant","isFocused","useTheme","useMemo","containerStyle","borderBottomColor","strong","borderBottomWidth","minHeight","paddingVertical","inputStyle","padding","paddingRight","createFontStyle","selector","_","typographyOf","fontSize","lineHeight","fontFamily","letterSpacing","color","hintStyle","marginTop","spacing","typography","caption1","backgroundColor","surface","supportive","borderRadius","shape","radius","md","borderWidth","paddingBottom","paddingHorizontal","paddingTop"],"sources":["useVariantStyleMap.ts"],"sourcesContent":["import { useMemo } from 'react';\nimport type { FountainUiStyle, Theme } from '@fountain-ui/styles';\nimport { typographyOf } from '@fountain-ui/styles';\nimport { createFontStyle, useTheme } from '../styles';\nimport type { TextFieldStatus, TextFieldVariant } from './TextFieldProps';\n\ninterface VariantStyleMap {\n containerStyle?: FountainUiStyle;\n inputStyle?: FountainUiStyle;\n hintStyle?: FountainUiStyle;\n}\n\nfunction useStatusColor(theme: Theme, status: TextFieldStatus): { borderColor: string; hintColor: string; } {\n switch (status) {\n default:\n case 'default':\n return {\n borderColor: theme.palette.border.base,\n hintColor: theme.palette.text.weak,\n };\n case 'success':\n return {\n borderColor: theme.palette.status.success,\n hintColor: theme.palette.status.success,\n };\n case 'error':\n return {\n borderColor: theme.palette.status.danger,\n hintColor: theme.palette.status.danger,\n };\n }\n}\n\nexport default function useVariantStyleMap(variant: TextFieldVariant, status: TextFieldStatus, isFocused: boolean): VariantStyleMap {\n const theme = useTheme();\n\n const {\n borderColor,\n hintColor,\n } = useStatusColor(theme, status);\n\n return useMemo(() => {\n switch (variant) {\n default:\n case 'default':\n return {\n containerStyle: {\n borderBottomColor: status === 'default' && isFocused ? theme.palette.border.strong : borderColor,\n borderBottomWidth: 1,\n minHeight: 60,\n paddingVertical: 16,\n },\n inputStyle: {\n padding: 0,\n paddingRight: 16,\n ...createFontStyle(theme, {\n selector: (_) => typographyOf({\n fontSize: 18,\n lineHeight: 27,\n fontFamily: 'PretendardStd-SemiBold',\n letterSpacing: 0,\n }),\n color: theme.palette.text.strong,\n }),\n },\n hintStyle: {\n marginTop: theme.spacing(2),\n ...createFontStyle(theme, {\n selector: (typography) => typography.caption1['regular'],\n color: hintColor,\n }),\n },\n };\n case 'search':\n return {\n containerStyle: {\n backgroundColor: theme.palette.surface.supportive,\n borderColor: theme.palette.border.base,\n borderRadius: theme.shape.radius.md,\n borderWidth: 0.5,\n paddingBottom: 12,\n paddingHorizontal: 39,\n paddingTop: 11,\n },\n inputStyle: {\n padding: 0,\n ...createFontStyle(theme, {\n selector: (_) => typographyOf({\n fontSize: 16,\n lineHeight: 19.2,\n fontFamily: 'PretendardStd-SemiBold',\n letterSpacing: -0.16,\n }),\n color: theme.palette.text.strong,\n }),\n },\n };\n }\n }, [theme, borderColor, hintColor, variant, isFocused]);\n}\n"],"mappings":"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"}
|
|
@@ -18,7 +18,27 @@ function getMaxWidth(theme, breakpoint, customMaxWidth) {
|
|
|
18
18
|
}
|
|
19
19
|
}
|
|
20
20
|
|
|
21
|
-
function
|
|
21
|
+
function getHomeScreenPaddingHorizontal(theme, breakpoint) {
|
|
22
|
+
switch (breakpoint) {
|
|
23
|
+
case 'xxs':
|
|
24
|
+
case 'xs':
|
|
25
|
+
return theme.spacing(3);
|
|
26
|
+
|
|
27
|
+
case 'sm':
|
|
28
|
+
return theme.spacing(6);
|
|
29
|
+
|
|
30
|
+
case 'md':
|
|
31
|
+
case 'lg':
|
|
32
|
+
default:
|
|
33
|
+
return theme.spacing(4);
|
|
34
|
+
}
|
|
35
|
+
}
|
|
36
|
+
|
|
37
|
+
function getPaddingHorizontal(theme, breakpoint, isHomeScreen) {
|
|
38
|
+
if (isHomeScreen) {
|
|
39
|
+
return getHomeScreenPaddingHorizontal(theme, breakpoint);
|
|
40
|
+
}
|
|
41
|
+
|
|
22
42
|
switch (breakpoint) {
|
|
23
43
|
case 'sm':
|
|
24
44
|
return theme.spacing(6);
|
|
@@ -32,7 +52,8 @@ function useContentContainerStyle() {
|
|
|
32
52
|
let config = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
|
|
33
53
|
const {
|
|
34
54
|
maxWidth: customMaxWidth,
|
|
35
|
-
styleProvider
|
|
55
|
+
styleProvider,
|
|
56
|
+
isHomeScreen = false
|
|
36
57
|
} = config;
|
|
37
58
|
const theme = (0, _styles.useTheme)();
|
|
38
59
|
const currentBreakpoint = theme.breakpoints.current;
|
|
@@ -40,7 +61,7 @@ function useContentContainerStyle() {
|
|
|
40
61
|
return (0, _styles.css)([{
|
|
41
62
|
alignSelf: 'center',
|
|
42
63
|
maxWidth: getMaxWidth(theme, currentBreakpoint, customMaxWidth),
|
|
43
|
-
paddingHorizontal: getPaddingHorizontal(theme, currentBreakpoint),
|
|
64
|
+
paddingHorizontal: getPaddingHorizontal(theme, currentBreakpoint, isHomeScreen),
|
|
44
65
|
width: '100%'
|
|
45
66
|
}, additionalStyle]);
|
|
46
67
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["getMaxWidth","theme","breakpoint","customMaxWidth","breakpoints","values","undefined","
|
|
1
|
+
{"version":3,"names":["getMaxWidth","theme","breakpoint","customMaxWidth","breakpoints","values","undefined","getHomeScreenPaddingHorizontal","spacing","getPaddingHorizontal","isHomeScreen","useContentContainerStyle","config","maxWidth","styleProvider","useTheme","currentBreakpoint","current","additionalStyle","css","alignSelf","paddingHorizontal","width"],"sources":["useContentContainerStyle.ts"],"sourcesContent":["import type { FountainUiStyle } from '@fountain-ui/styles';\nimport { css, useTheme } from '../styles';\nimport type { Theme } from '../types';\n\ntype Breakpoint = keyof Theme['breakpoints']['values'];\n\nexport interface Config {\n maxWidth?: number;\n styleProvider?: (theme: Theme) => FountainUiStyle;\n isHomeScreen?: boolean;\n}\n\nfunction getMaxWidth(theme: Theme, breakpoint: Breakpoint, customMaxWidth?: number): number | undefined {\n switch (breakpoint) {\n case 'lg':\n case 'md':\n return customMaxWidth ?? theme.breakpoints.values[breakpoint];\n default:\n return undefined;\n }\n}\n\nfunction getHomeScreenPaddingHorizontal(theme: Theme, breakpoint: Breakpoint): number {\n switch (breakpoint) {\n case 'xxs':\n case 'xs':\n return theme.spacing(3);\n case 'sm':\n return theme.spacing(6);\n case 'md':\n case 'lg':\n default:\n return theme.spacing(4);\n }\n}\n\nfunction getPaddingHorizontal(theme: Theme, breakpoint: Breakpoint, isHomeScreen?: boolean): number {\n if (isHomeScreen) {\n return getHomeScreenPaddingHorizontal(theme, breakpoint);\n }\n\n switch (breakpoint) {\n case 'sm':\n return theme.spacing(6);\n default:\n return theme.spacing(4);\n }\n}\n\nexport default function useContentContainerStyle(config: Config = {}): FountainUiStyle {\n const {\n maxWidth: customMaxWidth,\n styleProvider,\n isHomeScreen = false,\n } = config;\n\n const theme = useTheme();\n\n const currentBreakpoint = theme.breakpoints.current;\n\n const additionalStyle = styleProvider?.(theme);\n\n return css([\n {\n alignSelf: 'center',\n maxWidth: getMaxWidth(theme, currentBreakpoint, customMaxWidth),\n paddingHorizontal: getPaddingHorizontal(theme, currentBreakpoint, isHomeScreen),\n width: '100%',\n },\n additionalStyle,\n ]);\n};\n"],"mappings":";;;;;;;AACA;;AAWA,SAASA,WAAT,CAAqBC,KAArB,EAAmCC,UAAnC,EAA2DC,cAA3D,EAAwG;EACpG,QAAQD,UAAR;IACI,KAAK,IAAL;IACA,KAAK,IAAL;MACI,OAAOC,cAAc,IAAIF,KAAK,CAACG,WAAN,CAAkBC,MAAlB,CAAyBH,UAAzB,CAAzB;;IACJ;MACI,OAAOI,SAAP;EALR;AAOH;;AAED,SAASC,8BAAT,CAAwCN,KAAxC,EAAsDC,UAAtD,EAAsF;EAClF,QAAQA,UAAR;IACI,KAAK,KAAL;IACA,KAAK,IAAL;MACI,OAAOD,KAAK,CAACO,OAAN,CAAc,CAAd,CAAP;;IACJ,KAAK,IAAL;MACI,OAAOP,KAAK,CAACO,OAAN,CAAc,CAAd,CAAP;;IACJ,KAAK,IAAL;IACA,KAAK,IAAL;IACA;MACI,OAAOP,KAAK,CAACO,OAAN,CAAc,CAAd,CAAP;EATR;AAWH;;AAED,SAASC,oBAAT,CAA8BR,KAA9B,EAA4CC,UAA5C,EAAoEQ,YAApE,EAAoG;EAChG,IAAIA,YAAJ,EAAkB;IACd,OAAOH,8BAA8B,CAACN,KAAD,EAAQC,UAAR,CAArC;EACH;;EAED,QAAQA,UAAR;IACI,KAAK,IAAL;MACI,OAAOD,KAAK,CAACO,OAAN,CAAc,CAAd,CAAP;;IACJ;MACI,OAAOP,KAAK,CAACO,OAAN,CAAc,CAAd,CAAP;EAJR;AAMH;;AAEc,SAASG,wBAAT,GAAwE;EAAA,IAAtCC,MAAsC,uEAArB,EAAqB;EACnF,MAAM;IACFC,QAAQ,EAAEV,cADR;IAEFW,aAFE;IAGFJ,YAAY,GAAG;EAHb,IAIFE,MAJJ;EAMA,MAAMX,KAAK,GAAG,IAAAc,gBAAA,GAAd;EAEA,MAAMC,iBAAiB,GAAGf,KAAK,CAACG,WAAN,CAAkBa,OAA5C;EAEA,MAAMC,eAAe,GAAGJ,aAAH,aAAGA,aAAH,uBAAGA,aAAa,CAAGb,KAAH,CAArC;EAEA,OAAO,IAAAkB,WAAA,EAAI,CACP;IACIC,SAAS,EAAE,QADf;IAEIP,QAAQ,EAAEb,WAAW,CAACC,KAAD,EAAQe,iBAAR,EAA2Bb,cAA3B,CAFzB;IAGIkB,iBAAiB,EAAEZ,oBAAoB,CAACR,KAAD,EAAQe,iBAAR,EAA2BN,YAA3B,CAH3C;IAIIY,KAAK,EAAE;EAJX,CADO,EAOPJ,eAPO,CAAJ,CAAP;AASH;;AAAA"}
|
|
@@ -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","
|
|
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","borderStyle","borderColor","border","weak","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: 0.5,\n borderStyle: 'solid',\n borderColor: theme.palette.border.weak,\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};\n"],"mappings":"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"}
|
|
@@ -39,12 +39,12 @@ export default function useVariantStyleMap(variant, status, isFocused) {
|
|
|
39
39
|
containerStyle: {
|
|
40
40
|
borderBottomColor: status === 'default' && isFocused ? theme.palette.border.strong : borderColor,
|
|
41
41
|
borderBottomWidth: 1,
|
|
42
|
-
minHeight: 60
|
|
42
|
+
minHeight: 60,
|
|
43
|
+
paddingVertical: 16
|
|
43
44
|
},
|
|
44
45
|
inputStyle: {
|
|
45
|
-
|
|
46
|
-
paddingRight:
|
|
47
|
-
paddingVertical: theme.spacing(4),
|
|
46
|
+
padding: 0,
|
|
47
|
+
paddingRight: 16,
|
|
48
48
|
...createFontStyle(theme, {
|
|
49
49
|
selector: _ => typographyOf({
|
|
50
50
|
fontSize: 18,
|
|
@@ -75,7 +75,9 @@ export default function useVariantStyleMap(variant, status, isFocused) {
|
|
|
75
75
|
paddingHorizontal: 39,
|
|
76
76
|
paddingTop: 11
|
|
77
77
|
},
|
|
78
|
-
inputStyle: {
|
|
78
|
+
inputStyle: {
|
|
79
|
+
padding: 0,
|
|
80
|
+
...createFontStyle(theme, {
|
|
79
81
|
selector: _ => typographyOf({
|
|
80
82
|
fontSize: 16,
|
|
81
83
|
lineHeight: 19.2,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["useMemo","typographyOf","createFontStyle","useTheme","useStatusColor","theme","status","borderColor","palette","border","base","hintColor","text","weak","success","danger","useVariantStyleMap","variant","isFocused","containerStyle","borderBottomColor","strong","borderBottomWidth","minHeight","
|
|
1
|
+
{"version":3,"names":["useMemo","typographyOf","createFontStyle","useTheme","useStatusColor","theme","status","borderColor","palette","border","base","hintColor","text","weak","success","danger","useVariantStyleMap","variant","isFocused","containerStyle","borderBottomColor","strong","borderBottomWidth","minHeight","paddingVertical","inputStyle","padding","paddingRight","selector","_","fontSize","lineHeight","fontFamily","letterSpacing","color","hintStyle","marginTop","spacing","typography","caption1","backgroundColor","surface","supportive","borderRadius","shape","radius","md","borderWidth","paddingBottom","paddingHorizontal","paddingTop"],"sources":["useVariantStyleMap.ts"],"sourcesContent":["import { useMemo } from 'react';\nimport type { FountainUiStyle, Theme } from '@fountain-ui/styles';\nimport { typographyOf } from '@fountain-ui/styles';\nimport { createFontStyle, useTheme } from '../styles';\nimport type { TextFieldStatus, TextFieldVariant } from './TextFieldProps';\n\ninterface VariantStyleMap {\n containerStyle?: FountainUiStyle;\n inputStyle?: FountainUiStyle;\n hintStyle?: FountainUiStyle;\n}\n\nfunction useStatusColor(theme: Theme, status: TextFieldStatus): { borderColor: string; hintColor: string; } {\n switch (status) {\n default:\n case 'default':\n return {\n borderColor: theme.palette.border.base,\n hintColor: theme.palette.text.weak,\n };\n case 'success':\n return {\n borderColor: theme.palette.status.success,\n hintColor: theme.palette.status.success,\n };\n case 'error':\n return {\n borderColor: theme.palette.status.danger,\n hintColor: theme.palette.status.danger,\n };\n }\n}\n\nexport default function useVariantStyleMap(variant: TextFieldVariant, status: TextFieldStatus, isFocused: boolean): VariantStyleMap {\n const theme = useTheme();\n\n const {\n borderColor,\n hintColor,\n } = useStatusColor(theme, status);\n\n return useMemo(() => {\n switch (variant) {\n default:\n case 'default':\n return {\n containerStyle: {\n borderBottomColor: status === 'default' && isFocused ? theme.palette.border.strong : borderColor,\n borderBottomWidth: 1,\n minHeight: 60,\n paddingVertical: 16,\n },\n inputStyle: {\n padding: 0,\n paddingRight: 16,\n ...createFontStyle(theme, {\n selector: (_) => typographyOf({\n fontSize: 18,\n lineHeight: 27,\n fontFamily: 'PretendardStd-SemiBold',\n letterSpacing: 0,\n }),\n color: theme.palette.text.strong,\n }),\n },\n hintStyle: {\n marginTop: theme.spacing(2),\n ...createFontStyle(theme, {\n selector: (typography) => typography.caption1['regular'],\n color: hintColor,\n }),\n },\n };\n case 'search':\n return {\n containerStyle: {\n backgroundColor: theme.palette.surface.supportive,\n borderColor: theme.palette.border.base,\n borderRadius: theme.shape.radius.md,\n borderWidth: 0.5,\n paddingBottom: 12,\n paddingHorizontal: 39,\n paddingTop: 11,\n },\n inputStyle: {\n padding: 0,\n ...createFontStyle(theme, {\n selector: (_) => typographyOf({\n fontSize: 16,\n lineHeight: 19.2,\n fontFamily: 'PretendardStd-SemiBold',\n letterSpacing: -0.16,\n }),\n color: theme.palette.text.strong,\n }),\n },\n };\n }\n }, [theme, borderColor, hintColor, variant, isFocused]);\n}\n"],"mappings":"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"}
|
|
@@ -11,7 +11,27 @@ function getMaxWidth(theme, breakpoint, customMaxWidth) {
|
|
|
11
11
|
}
|
|
12
12
|
}
|
|
13
13
|
|
|
14
|
-
function
|
|
14
|
+
function getHomeScreenPaddingHorizontal(theme, breakpoint) {
|
|
15
|
+
switch (breakpoint) {
|
|
16
|
+
case 'xxs':
|
|
17
|
+
case 'xs':
|
|
18
|
+
return theme.spacing(3);
|
|
19
|
+
|
|
20
|
+
case 'sm':
|
|
21
|
+
return theme.spacing(6);
|
|
22
|
+
|
|
23
|
+
case 'md':
|
|
24
|
+
case 'lg':
|
|
25
|
+
default:
|
|
26
|
+
return theme.spacing(4);
|
|
27
|
+
}
|
|
28
|
+
}
|
|
29
|
+
|
|
30
|
+
function getPaddingHorizontal(theme, breakpoint, isHomeScreen) {
|
|
31
|
+
if (isHomeScreen) {
|
|
32
|
+
return getHomeScreenPaddingHorizontal(theme, breakpoint);
|
|
33
|
+
}
|
|
34
|
+
|
|
15
35
|
switch (breakpoint) {
|
|
16
36
|
case 'sm':
|
|
17
37
|
return theme.spacing(6);
|
|
@@ -25,7 +45,8 @@ export default function useContentContainerStyle() {
|
|
|
25
45
|
let config = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
|
|
26
46
|
const {
|
|
27
47
|
maxWidth: customMaxWidth,
|
|
28
|
-
styleProvider
|
|
48
|
+
styleProvider,
|
|
49
|
+
isHomeScreen = false
|
|
29
50
|
} = config;
|
|
30
51
|
const theme = useTheme();
|
|
31
52
|
const currentBreakpoint = theme.breakpoints.current;
|
|
@@ -33,7 +54,7 @@ export default function useContentContainerStyle() {
|
|
|
33
54
|
return css([{
|
|
34
55
|
alignSelf: 'center',
|
|
35
56
|
maxWidth: getMaxWidth(theme, currentBreakpoint, customMaxWidth),
|
|
36
|
-
paddingHorizontal: getPaddingHorizontal(theme, currentBreakpoint),
|
|
57
|
+
paddingHorizontal: getPaddingHorizontal(theme, currentBreakpoint, isHomeScreen),
|
|
37
58
|
width: '100%'
|
|
38
59
|
}, additionalStyle]);
|
|
39
60
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["css","useTheme","getMaxWidth","theme","breakpoint","customMaxWidth","breakpoints","values","undefined","
|
|
1
|
+
{"version":3,"names":["css","useTheme","getMaxWidth","theme","breakpoint","customMaxWidth","breakpoints","values","undefined","getHomeScreenPaddingHorizontal","spacing","getPaddingHorizontal","isHomeScreen","useContentContainerStyle","config","maxWidth","styleProvider","currentBreakpoint","current","additionalStyle","alignSelf","paddingHorizontal","width"],"sources":["useContentContainerStyle.ts"],"sourcesContent":["import type { FountainUiStyle } from '@fountain-ui/styles';\nimport { css, useTheme } from '../styles';\nimport type { Theme } from '../types';\n\ntype Breakpoint = keyof Theme['breakpoints']['values'];\n\nexport interface Config {\n maxWidth?: number;\n styleProvider?: (theme: Theme) => FountainUiStyle;\n isHomeScreen?: boolean;\n}\n\nfunction getMaxWidth(theme: Theme, breakpoint: Breakpoint, customMaxWidth?: number): number | undefined {\n switch (breakpoint) {\n case 'lg':\n case 'md':\n return customMaxWidth ?? theme.breakpoints.values[breakpoint];\n default:\n return undefined;\n }\n}\n\nfunction getHomeScreenPaddingHorizontal(theme: Theme, breakpoint: Breakpoint): number {\n switch (breakpoint) {\n case 'xxs':\n case 'xs':\n return theme.spacing(3);\n case 'sm':\n return theme.spacing(6);\n case 'md':\n case 'lg':\n default:\n return theme.spacing(4);\n }\n}\n\nfunction getPaddingHorizontal(theme: Theme, breakpoint: Breakpoint, isHomeScreen?: boolean): number {\n if (isHomeScreen) {\n return getHomeScreenPaddingHorizontal(theme, breakpoint);\n }\n\n switch (breakpoint) {\n case 'sm':\n return theme.spacing(6);\n default:\n return theme.spacing(4);\n }\n}\n\nexport default function useContentContainerStyle(config: Config = {}): FountainUiStyle {\n const {\n maxWidth: customMaxWidth,\n styleProvider,\n isHomeScreen = false,\n } = config;\n\n const theme = useTheme();\n\n const currentBreakpoint = theme.breakpoints.current;\n\n const additionalStyle = styleProvider?.(theme);\n\n return css([\n {\n alignSelf: 'center',\n maxWidth: getMaxWidth(theme, currentBreakpoint, customMaxWidth),\n paddingHorizontal: getPaddingHorizontal(theme, currentBreakpoint, isHomeScreen),\n width: '100%',\n },\n additionalStyle,\n ]);\n};\n"],"mappings":"AACA,SAASA,GAAT,EAAcC,QAAd,QAA8B,WAA9B;;AAWA,SAASC,WAAT,CAAqBC,KAArB,EAAmCC,UAAnC,EAA2DC,cAA3D,EAAwG;EACpG,QAAQD,UAAR;IACI,KAAK,IAAL;IACA,KAAK,IAAL;MACI,OAAOC,cAAc,IAAIF,KAAK,CAACG,WAAN,CAAkBC,MAAlB,CAAyBH,UAAzB,CAAzB;;IACJ;MACI,OAAOI,SAAP;EALR;AAOH;;AAED,SAASC,8BAAT,CAAwCN,KAAxC,EAAsDC,UAAtD,EAAsF;EAClF,QAAQA,UAAR;IACI,KAAK,KAAL;IACA,KAAK,IAAL;MACI,OAAOD,KAAK,CAACO,OAAN,CAAc,CAAd,CAAP;;IACJ,KAAK,IAAL;MACI,OAAOP,KAAK,CAACO,OAAN,CAAc,CAAd,CAAP;;IACJ,KAAK,IAAL;IACA,KAAK,IAAL;IACA;MACI,OAAOP,KAAK,CAACO,OAAN,CAAc,CAAd,CAAP;EATR;AAWH;;AAED,SAASC,oBAAT,CAA8BR,KAA9B,EAA4CC,UAA5C,EAAoEQ,YAApE,EAAoG;EAChG,IAAIA,YAAJ,EAAkB;IACd,OAAOH,8BAA8B,CAACN,KAAD,EAAQC,UAAR,CAArC;EACH;;EAED,QAAQA,UAAR;IACI,KAAK,IAAL;MACI,OAAOD,KAAK,CAACO,OAAN,CAAc,CAAd,CAAP;;IACJ;MACI,OAAOP,KAAK,CAACO,OAAN,CAAc,CAAd,CAAP;EAJR;AAMH;;AAED,eAAe,SAASG,wBAAT,GAAwE;EAAA,IAAtCC,MAAsC,uEAArB,EAAqB;EACnF,MAAM;IACFC,QAAQ,EAAEV,cADR;IAEFW,aAFE;IAGFJ,YAAY,GAAG;EAHb,IAIFE,MAJJ;EAMA,MAAMX,KAAK,GAAGF,QAAQ,EAAtB;EAEA,MAAMgB,iBAAiB,GAAGd,KAAK,CAACG,WAAN,CAAkBY,OAA5C;EAEA,MAAMC,eAAe,GAAGH,aAAH,aAAGA,aAAH,uBAAGA,aAAa,CAAGb,KAAH,CAArC;EAEA,OAAOH,GAAG,CAAC,CACP;IACIoB,SAAS,EAAE,QADf;IAEIL,QAAQ,EAAEb,WAAW,CAACC,KAAD,EAAQc,iBAAR,EAA2BZ,cAA3B,CAFzB;IAGIgB,iBAAiB,EAAEV,oBAAoB,CAACR,KAAD,EAAQc,iBAAR,EAA2BL,YAA3B,CAH3C;IAIIU,KAAK,EAAE;EAJX,CADO,EAOPH,eAPO,CAAD,CAAV;AASH;AAAA"}
|
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.23",
|
|
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": "dbe78bda34eeeb856ce85619c48e3591fbe9bd86"
|
|
71
71
|
}
|
package/src/Image/Image.tsx
CHANGED
|
@@ -34,7 +34,7 @@ const useStyles: UseStyles<ImageStyles> = function (): ImageStyles {
|
|
|
34
34
|
backgroundColor: theme.palette.paper.grey,
|
|
35
35
|
},
|
|
36
36
|
outlined: {
|
|
37
|
-
borderWidth:
|
|
37
|
+
borderWidth: 0.5,
|
|
38
38
|
borderStyle: 'solid',
|
|
39
39
|
borderColor: theme.palette.border.weak,
|
|
40
40
|
},
|
|
@@ -156,4 +156,4 @@ export default function Image(props: ImageProps) {
|
|
|
156
156
|
) : null}
|
|
157
157
|
</View>
|
|
158
158
|
);
|
|
159
|
-
};
|
|
159
|
+
};
|
|
@@ -48,11 +48,11 @@ export default function useVariantStyleMap(variant: TextFieldVariant, status: Te
|
|
|
48
48
|
borderBottomColor: status === 'default' && isFocused ? theme.palette.border.strong : borderColor,
|
|
49
49
|
borderBottomWidth: 1,
|
|
50
50
|
minHeight: 60,
|
|
51
|
+
paddingVertical: 16,
|
|
51
52
|
},
|
|
52
53
|
inputStyle: {
|
|
53
|
-
|
|
54
|
-
paddingRight:
|
|
55
|
-
paddingVertical: theme.spacing(4),
|
|
54
|
+
padding: 0,
|
|
55
|
+
paddingRight: 16,
|
|
56
56
|
...createFontStyle(theme, {
|
|
57
57
|
selector: (_) => typographyOf({
|
|
58
58
|
fontSize: 18,
|
|
@@ -83,6 +83,7 @@ export default function useVariantStyleMap(variant: TextFieldVariant, status: Te
|
|
|
83
83
|
paddingTop: 11,
|
|
84
84
|
},
|
|
85
85
|
inputStyle: {
|
|
86
|
+
padding: 0,
|
|
86
87
|
...createFontStyle(theme, {
|
|
87
88
|
selector: (_) => typographyOf({
|
|
88
89
|
fontSize: 16,
|
|
@@ -7,6 +7,7 @@ type Breakpoint = keyof Theme['breakpoints']['values'];
|
|
|
7
7
|
export interface Config {
|
|
8
8
|
maxWidth?: number;
|
|
9
9
|
styleProvider?: (theme: Theme) => FountainUiStyle;
|
|
10
|
+
isHomeScreen?: boolean;
|
|
10
11
|
}
|
|
11
12
|
|
|
12
13
|
function getMaxWidth(theme: Theme, breakpoint: Breakpoint, customMaxWidth?: number): number | undefined {
|
|
@@ -19,7 +20,25 @@ function getMaxWidth(theme: Theme, breakpoint: Breakpoint, customMaxWidth?: numb
|
|
|
19
20
|
}
|
|
20
21
|
}
|
|
21
22
|
|
|
22
|
-
function
|
|
23
|
+
function getHomeScreenPaddingHorizontal(theme: Theme, breakpoint: Breakpoint): number {
|
|
24
|
+
switch (breakpoint) {
|
|
25
|
+
case 'xxs':
|
|
26
|
+
case 'xs':
|
|
27
|
+
return theme.spacing(3);
|
|
28
|
+
case 'sm':
|
|
29
|
+
return theme.spacing(6);
|
|
30
|
+
case 'md':
|
|
31
|
+
case 'lg':
|
|
32
|
+
default:
|
|
33
|
+
return theme.spacing(4);
|
|
34
|
+
}
|
|
35
|
+
}
|
|
36
|
+
|
|
37
|
+
function getPaddingHorizontal(theme: Theme, breakpoint: Breakpoint, isHomeScreen?: boolean): number {
|
|
38
|
+
if (isHomeScreen) {
|
|
39
|
+
return getHomeScreenPaddingHorizontal(theme, breakpoint);
|
|
40
|
+
}
|
|
41
|
+
|
|
23
42
|
switch (breakpoint) {
|
|
24
43
|
case 'sm':
|
|
25
44
|
return theme.spacing(6);
|
|
@@ -32,6 +51,7 @@ export default function useContentContainerStyle(config: Config = {}): FountainU
|
|
|
32
51
|
const {
|
|
33
52
|
maxWidth: customMaxWidth,
|
|
34
53
|
styleProvider,
|
|
54
|
+
isHomeScreen = false,
|
|
35
55
|
} = config;
|
|
36
56
|
|
|
37
57
|
const theme = useTheme();
|
|
@@ -44,7 +64,7 @@ export default function useContentContainerStyle(config: Config = {}): FountainU
|
|
|
44
64
|
{
|
|
45
65
|
alignSelf: 'center',
|
|
46
66
|
maxWidth: getMaxWidth(theme, currentBreakpoint, customMaxWidth),
|
|
47
|
-
paddingHorizontal: getPaddingHorizontal(theme, currentBreakpoint),
|
|
67
|
+
paddingHorizontal: getPaddingHorizontal(theme, currentBreakpoint, isHomeScreen),
|
|
48
68
|
width: '100%',
|
|
49
69
|
},
|
|
50
70
|
additionalStyle,
|