@fountain-ui/core 3.0.0-alpha.35 → 3.0.0-alpha.36
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/AppBar/AppBar.js +2 -2
- package/build/commonjs/AppBar/AppBar.js.map +1 -1
- package/build/commonjs/Tabs/useTabsStyle.js +7 -6
- package/build/commonjs/Tabs/useTabsStyle.js.map +1 -1
- package/build/module/AppBar/AppBar.js +2 -2
- package/build/module/AppBar/AppBar.js.map +1 -1
- package/build/module/Tabs/useTabsStyle.js +7 -6
- package/build/module/Tabs/useTabsStyle.js.map +1 -1
- package/package.json +2 -2
- package/src/AppBar/AppBar.tsx +2 -2
- package/src/Tabs/useTabsStyle.ts +8 -6
|
@@ -36,7 +36,7 @@ const AppBar = /*#__PURE__*/_react.default.forwardRef(function AppBar(props, ref
|
|
|
36
36
|
...otherProps
|
|
37
37
|
} = props;
|
|
38
38
|
const theme = (0, _styles.useTheme)();
|
|
39
|
-
const
|
|
39
|
+
const shouldApplyHorizontalPadding = (0, _hooks.useBreakpointUp)('sm', true, false);
|
|
40
40
|
const styles = useStyles();
|
|
41
41
|
const backgroundColorMap = {
|
|
42
42
|
default: theme.palette.background.base,
|
|
@@ -44,7 +44,7 @@ const AppBar = /*#__PURE__*/_react.default.forwardRef(function AppBar(props, ref
|
|
|
44
44
|
};
|
|
45
45
|
const paperStyle = (0, _styles.css)([styles.root, {
|
|
46
46
|
backgroundColor: backgroundColorMap[color]
|
|
47
|
-
},
|
|
47
|
+
}, shouldApplyHorizontalPadding ? {
|
|
48
48
|
paddingHorizontal: 8
|
|
49
49
|
} : undefined, style]);
|
|
50
50
|
return /*#__PURE__*/_react.default.createElement(_reactNative.View, _extends({
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["useStyles","theme","useTheme","root","flexDirection","flexShrink","width","zIndex","appBar","AppBar","React","forwardRef","props","ref","color","style","otherProps","
|
|
1
|
+
{"version":3,"names":["useStyles","theme","useTheme","root","flexDirection","flexShrink","width","zIndex","appBar","AppBar","React","forwardRef","props","ref","color","style","otherProps","shouldApplyHorizontalPadding","useBreakpointUp","styles","backgroundColorMap","default","palette","background","base","alt","paperStyle","css","backgroundColor","paddingHorizontal","undefined"],"sources":["AppBar.tsx"],"sourcesContent":["import React from 'react';\nimport { View } from 'react-native';\nimport { NamedStylesStringUnion, UseStyles } from '@fountain-ui/styles';\nimport { useBreakpointUp } from '../hooks';\nimport { css, useTheme } from '../styles';\nimport type AppBarProps from './AppBarProps';\nimport type { AppBarColor } from './AppBarProps';\n\ntype AppBarStyleKeys = 'root';\n\ntype AppBarStyles = NamedStylesStringUnion<AppBarStyleKeys>;\n\nconst useStyles: UseStyles<AppBarStyles> = function (): AppBarStyles {\n const theme = useTheme();\n\n return {\n root: {\n flexDirection: 'column',\n flexShrink: 0,\n width: '100%',\n zIndex: theme.zIndex.appBar,\n },\n };\n};\n\nconst AppBar = React.forwardRef<View, AppBarProps>(function AppBar(props, ref) {\n const {\n color = 'default',\n style,\n ...otherProps\n } = props;\n\n const theme = useTheme();\n\n const shouldApplyHorizontalPadding = useBreakpointUp('sm', true, false);\n\n const styles = useStyles();\n\n const backgroundColorMap: Record<AppBarColor, string> = {\n default: theme.palette.background.base,\n alt: theme.palette.background.alt,\n };\n\n const paperStyle = css([\n styles.root,\n { backgroundColor: backgroundColorMap[color] },\n shouldApplyHorizontalPadding ? { paddingHorizontal: 8 } : undefined,\n style,\n ]);\n\n return (\n <View\n ref={ref}\n style={paperStyle}\n {...otherProps}\n />\n );\n});\n\nexport default AppBar;\n"],"mappings":";;;;;;;AAAA;;AACA;;AAEA;;AACA;;;;;;AAQA,MAAMA,SAAkC,GAAG,YAA0B;EACjE,MAAMC,KAAK,GAAG,IAAAC,gBAAA,GAAd;EAEA,OAAO;IACHC,IAAI,EAAE;MACFC,aAAa,EAAE,QADb;MAEFC,UAAU,EAAE,CAFV;MAGFC,KAAK,EAAE,MAHL;MAIFC,MAAM,EAAEN,KAAK,CAACM,MAAN,CAAaC;IAJnB;EADH,CAAP;AAQH,CAXD;;AAaA,MAAMC,MAAM,gBAAGC,cAAA,CAAMC,UAAN,CAAoC,SAASF,MAAT,CAAgBG,KAAhB,EAAuBC,GAAvB,EAA4B;EAC3E,MAAM;IACFC,KAAK,GAAG,SADN;IAEFC,KAFE;IAGF,GAAGC;EAHD,IAIFJ,KAJJ;EAMA,MAAMX,KAAK,GAAG,IAAAC,gBAAA,GAAd;EAEA,MAAMe,4BAA4B,GAAG,IAAAC,sBAAA,EAAgB,IAAhB,EAAsB,IAAtB,EAA4B,KAA5B,CAArC;EAEA,MAAMC,MAAM,GAAGnB,SAAS,EAAxB;EAEA,MAAMoB,kBAA+C,GAAG;IACpDC,OAAO,EAAEpB,KAAK,CAACqB,OAAN,CAAcC,UAAd,CAAyBC,IADkB;IAEpDC,GAAG,EAAExB,KAAK,CAACqB,OAAN,CAAcC,UAAd,CAAyBE;EAFsB,CAAxD;EAKA,MAAMC,UAAU,GAAG,IAAAC,WAAA,EAAI,CACnBR,MAAM,CAAChB,IADY,EAEnB;IAAEyB,eAAe,EAAER,kBAAkB,CAACN,KAAD;EAArC,CAFmB,EAGnBG,4BAA4B,GAAG;IAAEY,iBAAiB,EAAE;EAArB,CAAH,GAA8BC,SAHvC,EAInBf,KAJmB,CAAJ,CAAnB;EAOA,oBACI,6BAAC,iBAAD;IACI,GAAG,EAAEF,GADT;IAEI,KAAK,EAAEa;EAFX,GAGQV,UAHR,EADJ;AAOH,CAhCc,CAAf;;eAkCeP,M"}
|
|
@@ -13,12 +13,13 @@ var _styles = require("../styles");
|
|
|
13
13
|
|
|
14
14
|
function useTabsStyle(variant, size, scrollable) {
|
|
15
15
|
const theme = (0, _styles.useTheme)();
|
|
16
|
-
const
|
|
16
|
+
const isSmallUp = (0, _hooks.useBreakpointUp)('sm', true, false);
|
|
17
|
+
const isMediumUp = (0, _hooks.useBreakpointUp)('md', true, false);
|
|
17
18
|
return (0, _react.useMemo)(() => {
|
|
18
19
|
switch (variant) {
|
|
19
20
|
case 'circular':
|
|
20
21
|
{
|
|
21
|
-
const paddingHorizontal =
|
|
22
|
+
const paddingHorizontal = isSmallUp ? 20 : size === 'small' ? 8 : 12;
|
|
22
23
|
return {
|
|
23
24
|
container: {
|
|
24
25
|
paddingBottom: 8,
|
|
@@ -32,7 +33,7 @@ function useTabsStyle(variant, size, scrollable) {
|
|
|
32
33
|
|
|
33
34
|
case 'circular-home':
|
|
34
35
|
{
|
|
35
|
-
const paddingHorizontal =
|
|
36
|
+
const paddingHorizontal = isSmallUp ? 20 : 8;
|
|
36
37
|
return {
|
|
37
38
|
container: {
|
|
38
39
|
paddingBottom: 8,
|
|
@@ -48,7 +49,7 @@ function useTabsStyle(variant, size, scrollable) {
|
|
|
48
49
|
{
|
|
49
50
|
const paddingHorizontal = 24;
|
|
50
51
|
return {
|
|
51
|
-
container: { ...(
|
|
52
|
+
container: { ...(isMediumUp ? {
|
|
52
53
|
alignSelf: 'center',
|
|
53
54
|
minWidth: 460
|
|
54
55
|
} : {}),
|
|
@@ -64,7 +65,7 @@ function useTabsStyle(variant, size, scrollable) {
|
|
|
64
65
|
case 'default':
|
|
65
66
|
default:
|
|
66
67
|
{
|
|
67
|
-
const paddingHorizontal =
|
|
68
|
+
const paddingHorizontal = isSmallUp ? 14 : 6;
|
|
68
69
|
return {
|
|
69
70
|
container: {
|
|
70
71
|
paddingHorizontal: scrollable ? 0 : paddingHorizontal
|
|
@@ -75,6 +76,6 @@ function useTabsStyle(variant, size, scrollable) {
|
|
|
75
76
|
};
|
|
76
77
|
}
|
|
77
78
|
}
|
|
78
|
-
}, [theme, variant,
|
|
79
|
+
}, [theme, variant, isMediumUp, isSmallUp, size, scrollable]);
|
|
79
80
|
}
|
|
80
81
|
//# sourceMappingURL=useTabsStyle.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["useTabsStyle","variant","size","scrollable","theme","useTheme","
|
|
1
|
+
{"version":3,"names":["useTabsStyle","variant","size","scrollable","theme","useTheme","isSmallUp","useBreakpointUp","isMediumUp","useMemo","paddingHorizontal","container","paddingBottom","contentContainer","alignSelf","minWidth","justifyContent"],"sources":["useTabsStyle.ts"],"sourcesContent":["import { useMemo } from 'react';\nimport type { FountainUiStyle } from '@fountain-ui/styles';\nimport { useBreakpointUp } from '../hooks';\nimport { useTheme } from '../styles';\nimport type { TabSize, TabVariant } from '../Tab';\n\ninterface TabsStyle {\n container: FountainUiStyle;\n contentContainer?: FountainUiStyle;\n}\n\nexport default function useTabsStyle(variant: TabVariant, size: TabSize, scrollable: boolean) {\n const theme = useTheme();\n\n const isSmallUp = useBreakpointUp('sm', true, false);\n\n const isMediumUp = useBreakpointUp('md', true, false);\n\n return useMemo<TabsStyle>(() => {\n switch (variant) {\n case 'circular': {\n const paddingHorizontal = isSmallUp ? 20 : (size === 'small' ? 8 : 12);\n\n return {\n container: {\n paddingBottom: 8,\n paddingHorizontal: scrollable ? 0 : paddingHorizontal,\n },\n contentContainer: {\n paddingHorizontal: scrollable ? paddingHorizontal : 0,\n },\n };\n }\n case 'circular-home': {\n const paddingHorizontal = isSmallUp ? 20 : 8;\n\n return {\n container: {\n paddingBottom: 8,\n paddingHorizontal: scrollable ? 0 : paddingHorizontal,\n },\n contentContainer: {\n paddingHorizontal: scrollable ? paddingHorizontal : 0,\n },\n };\n }\n case 'bottom-navigation': {\n const paddingHorizontal = 24;\n\n return {\n container: {\n ...(isMediumUp ? {\n alignSelf: 'center',\n minWidth: 460,\n } : {}),\n justifyContent: 'space-between',\n paddingHorizontal: scrollable ? 0 : paddingHorizontal,\n },\n contentContainer: {\n paddingHorizontal: scrollable ? paddingHorizontal : 0,\n },\n };\n }\n case 'default':\n default: {\n const paddingHorizontal = isSmallUp ? 14 : 6;\n\n return {\n container: {\n paddingHorizontal: scrollable ? 0 : paddingHorizontal,\n },\n contentContainer: {\n paddingHorizontal: scrollable ? paddingHorizontal : 0,\n },\n };\n }\n }\n }, [theme, variant, isMediumUp, isSmallUp, size, scrollable]);\n}\n"],"mappings":";;;;;;;AAAA;;AAEA;;AACA;;AAQe,SAASA,YAAT,CAAsBC,OAAtB,EAA2CC,IAA3C,EAA0DC,UAA1D,EAA+E;EAC1F,MAAMC,KAAK,GAAG,IAAAC,gBAAA,GAAd;EAEA,MAAMC,SAAS,GAAG,IAAAC,sBAAA,EAAgB,IAAhB,EAAsB,IAAtB,EAA4B,KAA5B,CAAlB;EAEA,MAAMC,UAAU,GAAG,IAAAD,sBAAA,EAAgB,IAAhB,EAAsB,IAAtB,EAA4B,KAA5B,CAAnB;EAEA,OAAO,IAAAE,cAAA,EAAmB,MAAM;IAC5B,QAAQR,OAAR;MACI,KAAK,UAAL;QAAiB;UACb,MAAMS,iBAAiB,GAAGJ,SAAS,GAAG,EAAH,GAASJ,IAAI,KAAK,OAAT,GAAmB,CAAnB,GAAuB,EAAnE;UAEA,OAAO;YACHS,SAAS,EAAE;cACPC,aAAa,EAAE,CADR;cAEPF,iBAAiB,EAAEP,UAAU,GAAG,CAAH,GAAOO;YAF7B,CADR;YAKHG,gBAAgB,EAAE;cACdH,iBAAiB,EAAEP,UAAU,GAAGO,iBAAH,GAAuB;YADtC;UALf,CAAP;QASH;;MACD,KAAK,eAAL;QAAsB;UAClB,MAAMA,iBAAiB,GAAGJ,SAAS,GAAG,EAAH,GAAQ,CAA3C;UAEA,OAAO;YACHK,SAAS,EAAE;cACPC,aAAa,EAAE,CADR;cAEPF,iBAAiB,EAAEP,UAAU,GAAG,CAAH,GAAOO;YAF7B,CADR;YAKHG,gBAAgB,EAAE;cACdH,iBAAiB,EAAEP,UAAU,GAAGO,iBAAH,GAAuB;YADtC;UALf,CAAP;QASH;;MACD,KAAK,mBAAL;QAA0B;UACtB,MAAMA,iBAAiB,GAAG,EAA1B;UAEA,OAAO;YACHC,SAAS,EAAE,EACP,IAAIH,UAAU,GAAG;gBACbM,SAAS,EAAE,QADE;gBAEbC,QAAQ,EAAE;cAFG,CAAH,GAGV,EAHJ,CADO;cAKPC,cAAc,EAAE,eALT;cAMPN,iBAAiB,EAAEP,UAAU,GAAG,CAAH,GAAOO;YAN7B,CADR;YASHG,gBAAgB,EAAE;cACdH,iBAAiB,EAAEP,UAAU,GAAGO,iBAAH,GAAuB;YADtC;UATf,CAAP;QAaH;;MACD,KAAK,SAAL;MACA;QAAS;UACL,MAAMA,iBAAiB,GAAGJ,SAAS,GAAG,EAAH,GAAQ,CAA3C;UAEA,OAAO;YACHK,SAAS,EAAE;cACPD,iBAAiB,EAAEP,UAAU,GAAG,CAAH,GAAOO;YAD7B,CADR;YAIHG,gBAAgB,EAAE;cACdH,iBAAiB,EAAEP,UAAU,GAAGO,iBAAH,GAAuB;YADtC;UAJf,CAAP;QAQH;IAxDL;EA0DH,CA3DM,EA2DJ,CAACN,KAAD,EAAQH,OAAR,EAAiBO,UAAjB,EAA6BF,SAA7B,EAAwCJ,IAAxC,EAA8CC,UAA9C,CA3DI,CAAP;AA4DH"}
|
|
@@ -24,7 +24,7 @@ const AppBar = /*#__PURE__*/React.forwardRef(function AppBar(props, ref) {
|
|
|
24
24
|
...otherProps
|
|
25
25
|
} = props;
|
|
26
26
|
const theme = useTheme();
|
|
27
|
-
const
|
|
27
|
+
const shouldApplyHorizontalPadding = useBreakpointUp('sm', true, false);
|
|
28
28
|
const styles = useStyles();
|
|
29
29
|
const backgroundColorMap = {
|
|
30
30
|
default: theme.palette.background.base,
|
|
@@ -32,7 +32,7 @@ const AppBar = /*#__PURE__*/React.forwardRef(function AppBar(props, ref) {
|
|
|
32
32
|
};
|
|
33
33
|
const paperStyle = css([styles.root, {
|
|
34
34
|
backgroundColor: backgroundColorMap[color]
|
|
35
|
-
},
|
|
35
|
+
}, shouldApplyHorizontalPadding ? {
|
|
36
36
|
paddingHorizontal: 8
|
|
37
37
|
} : undefined, style]);
|
|
38
38
|
return /*#__PURE__*/React.createElement(View, _extends({
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["React","View","useBreakpointUp","css","useTheme","useStyles","theme","root","flexDirection","flexShrink","width","zIndex","appBar","AppBar","forwardRef","props","ref","color","style","otherProps","
|
|
1
|
+
{"version":3,"names":["React","View","useBreakpointUp","css","useTheme","useStyles","theme","root","flexDirection","flexShrink","width","zIndex","appBar","AppBar","forwardRef","props","ref","color","style","otherProps","shouldApplyHorizontalPadding","styles","backgroundColorMap","default","palette","background","base","alt","paperStyle","backgroundColor","paddingHorizontal","undefined"],"sources":["AppBar.tsx"],"sourcesContent":["import React from 'react';\nimport { View } from 'react-native';\nimport { NamedStylesStringUnion, UseStyles } from '@fountain-ui/styles';\nimport { useBreakpointUp } from '../hooks';\nimport { css, useTheme } from '../styles';\nimport type AppBarProps from './AppBarProps';\nimport type { AppBarColor } from './AppBarProps';\n\ntype AppBarStyleKeys = 'root';\n\ntype AppBarStyles = NamedStylesStringUnion<AppBarStyleKeys>;\n\nconst useStyles: UseStyles<AppBarStyles> = function (): AppBarStyles {\n const theme = useTheme();\n\n return {\n root: {\n flexDirection: 'column',\n flexShrink: 0,\n width: '100%',\n zIndex: theme.zIndex.appBar,\n },\n };\n};\n\nconst AppBar = React.forwardRef<View, AppBarProps>(function AppBar(props, ref) {\n const {\n color = 'default',\n style,\n ...otherProps\n } = props;\n\n const theme = useTheme();\n\n const shouldApplyHorizontalPadding = useBreakpointUp('sm', true, false);\n\n const styles = useStyles();\n\n const backgroundColorMap: Record<AppBarColor, string> = {\n default: theme.palette.background.base,\n alt: theme.palette.background.alt,\n };\n\n const paperStyle = css([\n styles.root,\n { backgroundColor: backgroundColorMap[color] },\n shouldApplyHorizontalPadding ? { paddingHorizontal: 8 } : undefined,\n style,\n ]);\n\n return (\n <View\n ref={ref}\n style={paperStyle}\n {...otherProps}\n />\n );\n});\n\nexport default AppBar;\n"],"mappings":";;AAAA,OAAOA,KAAP,MAAkB,OAAlB;AACA,SAASC,IAAT,QAAqB,cAArB;AAEA,SAASC,eAAT,QAAgC,UAAhC;AACA,SAASC,GAAT,EAAcC,QAAd,QAA8B,WAA9B;;AAQA,MAAMC,SAAkC,GAAG,YAA0B;EACjE,MAAMC,KAAK,GAAGF,QAAQ,EAAtB;EAEA,OAAO;IACHG,IAAI,EAAE;MACFC,aAAa,EAAE,QADb;MAEFC,UAAU,EAAE,CAFV;MAGFC,KAAK,EAAE,MAHL;MAIFC,MAAM,EAAEL,KAAK,CAACK,MAAN,CAAaC;IAJnB;EADH,CAAP;AAQH,CAXD;;AAaA,MAAMC,MAAM,gBAAGb,KAAK,CAACc,UAAN,CAAoC,SAASD,MAAT,CAAgBE,KAAhB,EAAuBC,GAAvB,EAA4B;EAC3E,MAAM;IACFC,KAAK,GAAG,SADN;IAEFC,KAFE;IAGF,GAAGC;EAHD,IAIFJ,KAJJ;EAMA,MAAMT,KAAK,GAAGF,QAAQ,EAAtB;EAEA,MAAMgB,4BAA4B,GAAGlB,eAAe,CAAC,IAAD,EAAO,IAAP,EAAa,KAAb,CAApD;EAEA,MAAMmB,MAAM,GAAGhB,SAAS,EAAxB;EAEA,MAAMiB,kBAA+C,GAAG;IACpDC,OAAO,EAAEjB,KAAK,CAACkB,OAAN,CAAcC,UAAd,CAAyBC,IADkB;IAEpDC,GAAG,EAAErB,KAAK,CAACkB,OAAN,CAAcC,UAAd,CAAyBE;EAFsB,CAAxD;EAKA,MAAMC,UAAU,GAAGzB,GAAG,CAAC,CACnBkB,MAAM,CAACd,IADY,EAEnB;IAAEsB,eAAe,EAAEP,kBAAkB,CAACL,KAAD;EAArC,CAFmB,EAGnBG,4BAA4B,GAAG;IAAEU,iBAAiB,EAAE;EAArB,CAAH,GAA8BC,SAHvC,EAInBb,KAJmB,CAAD,CAAtB;EAOA,oBACI,oBAAC,IAAD;IACI,GAAG,EAAEF,GADT;IAEI,KAAK,EAAEY;EAFX,GAGQT,UAHR,EADJ;AAOH,CAhCc,CAAf;AAkCA,eAAeN,MAAf"}
|
|
@@ -3,12 +3,13 @@ import { useBreakpointUp } from '../hooks';
|
|
|
3
3
|
import { useTheme } from '../styles';
|
|
4
4
|
export default function useTabsStyle(variant, size, scrollable) {
|
|
5
5
|
const theme = useTheme();
|
|
6
|
-
const
|
|
6
|
+
const isSmallUp = useBreakpointUp('sm', true, false);
|
|
7
|
+
const isMediumUp = useBreakpointUp('md', true, false);
|
|
7
8
|
return useMemo(() => {
|
|
8
9
|
switch (variant) {
|
|
9
10
|
case 'circular':
|
|
10
11
|
{
|
|
11
|
-
const paddingHorizontal =
|
|
12
|
+
const paddingHorizontal = isSmallUp ? 20 : size === 'small' ? 8 : 12;
|
|
12
13
|
return {
|
|
13
14
|
container: {
|
|
14
15
|
paddingBottom: 8,
|
|
@@ -22,7 +23,7 @@ export default function useTabsStyle(variant, size, scrollable) {
|
|
|
22
23
|
|
|
23
24
|
case 'circular-home':
|
|
24
25
|
{
|
|
25
|
-
const paddingHorizontal =
|
|
26
|
+
const paddingHorizontal = isSmallUp ? 20 : 8;
|
|
26
27
|
return {
|
|
27
28
|
container: {
|
|
28
29
|
paddingBottom: 8,
|
|
@@ -38,7 +39,7 @@ export default function useTabsStyle(variant, size, scrollable) {
|
|
|
38
39
|
{
|
|
39
40
|
const paddingHorizontal = 24;
|
|
40
41
|
return {
|
|
41
|
-
container: { ...(
|
|
42
|
+
container: { ...(isMediumUp ? {
|
|
42
43
|
alignSelf: 'center',
|
|
43
44
|
minWidth: 460
|
|
44
45
|
} : {}),
|
|
@@ -54,7 +55,7 @@ export default function useTabsStyle(variant, size, scrollable) {
|
|
|
54
55
|
case 'default':
|
|
55
56
|
default:
|
|
56
57
|
{
|
|
57
|
-
const paddingHorizontal =
|
|
58
|
+
const paddingHorizontal = isSmallUp ? 14 : 6;
|
|
58
59
|
return {
|
|
59
60
|
container: {
|
|
60
61
|
paddingHorizontal: scrollable ? 0 : paddingHorizontal
|
|
@@ -65,6 +66,6 @@ export default function useTabsStyle(variant, size, scrollable) {
|
|
|
65
66
|
};
|
|
66
67
|
}
|
|
67
68
|
}
|
|
68
|
-
}, [theme, variant,
|
|
69
|
+
}, [theme, variant, isMediumUp, isSmallUp, size, scrollable]);
|
|
69
70
|
}
|
|
70
71
|
//# sourceMappingURL=useTabsStyle.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["useMemo","useBreakpointUp","useTheme","useTabsStyle","variant","size","scrollable","theme","
|
|
1
|
+
{"version":3,"names":["useMemo","useBreakpointUp","useTheme","useTabsStyle","variant","size","scrollable","theme","isSmallUp","isMediumUp","paddingHorizontal","container","paddingBottom","contentContainer","alignSelf","minWidth","justifyContent"],"sources":["useTabsStyle.ts"],"sourcesContent":["import { useMemo } from 'react';\nimport type { FountainUiStyle } from '@fountain-ui/styles';\nimport { useBreakpointUp } from '../hooks';\nimport { useTheme } from '../styles';\nimport type { TabSize, TabVariant } from '../Tab';\n\ninterface TabsStyle {\n container: FountainUiStyle;\n contentContainer?: FountainUiStyle;\n}\n\nexport default function useTabsStyle(variant: TabVariant, size: TabSize, scrollable: boolean) {\n const theme = useTheme();\n\n const isSmallUp = useBreakpointUp('sm', true, false);\n\n const isMediumUp = useBreakpointUp('md', true, false);\n\n return useMemo<TabsStyle>(() => {\n switch (variant) {\n case 'circular': {\n const paddingHorizontal = isSmallUp ? 20 : (size === 'small' ? 8 : 12);\n\n return {\n container: {\n paddingBottom: 8,\n paddingHorizontal: scrollable ? 0 : paddingHorizontal,\n },\n contentContainer: {\n paddingHorizontal: scrollable ? paddingHorizontal : 0,\n },\n };\n }\n case 'circular-home': {\n const paddingHorizontal = isSmallUp ? 20 : 8;\n\n return {\n container: {\n paddingBottom: 8,\n paddingHorizontal: scrollable ? 0 : paddingHorizontal,\n },\n contentContainer: {\n paddingHorizontal: scrollable ? paddingHorizontal : 0,\n },\n };\n }\n case 'bottom-navigation': {\n const paddingHorizontal = 24;\n\n return {\n container: {\n ...(isMediumUp ? {\n alignSelf: 'center',\n minWidth: 460,\n } : {}),\n justifyContent: 'space-between',\n paddingHorizontal: scrollable ? 0 : paddingHorizontal,\n },\n contentContainer: {\n paddingHorizontal: scrollable ? paddingHorizontal : 0,\n },\n };\n }\n case 'default':\n default: {\n const paddingHorizontal = isSmallUp ? 14 : 6;\n\n return {\n container: {\n paddingHorizontal: scrollable ? 0 : paddingHorizontal,\n },\n contentContainer: {\n paddingHorizontal: scrollable ? paddingHorizontal : 0,\n },\n };\n }\n }\n }, [theme, variant, isMediumUp, isSmallUp, size, scrollable]);\n}\n"],"mappings":"AAAA,SAASA,OAAT,QAAwB,OAAxB;AAEA,SAASC,eAAT,QAAgC,UAAhC;AACA,SAASC,QAAT,QAAyB,WAAzB;AAQA,eAAe,SAASC,YAAT,CAAsBC,OAAtB,EAA2CC,IAA3C,EAA0DC,UAA1D,EAA+E;EAC1F,MAAMC,KAAK,GAAGL,QAAQ,EAAtB;EAEA,MAAMM,SAAS,GAAGP,eAAe,CAAC,IAAD,EAAO,IAAP,EAAa,KAAb,CAAjC;EAEA,MAAMQ,UAAU,GAAGR,eAAe,CAAC,IAAD,EAAO,IAAP,EAAa,KAAb,CAAlC;EAEA,OAAOD,OAAO,CAAY,MAAM;IAC5B,QAAQI,OAAR;MACI,KAAK,UAAL;QAAiB;UACb,MAAMM,iBAAiB,GAAGF,SAAS,GAAG,EAAH,GAASH,IAAI,KAAK,OAAT,GAAmB,CAAnB,GAAuB,EAAnE;UAEA,OAAO;YACHM,SAAS,EAAE;cACPC,aAAa,EAAE,CADR;cAEPF,iBAAiB,EAAEJ,UAAU,GAAG,CAAH,GAAOI;YAF7B,CADR;YAKHG,gBAAgB,EAAE;cACdH,iBAAiB,EAAEJ,UAAU,GAAGI,iBAAH,GAAuB;YADtC;UALf,CAAP;QASH;;MACD,KAAK,eAAL;QAAsB;UAClB,MAAMA,iBAAiB,GAAGF,SAAS,GAAG,EAAH,GAAQ,CAA3C;UAEA,OAAO;YACHG,SAAS,EAAE;cACPC,aAAa,EAAE,CADR;cAEPF,iBAAiB,EAAEJ,UAAU,GAAG,CAAH,GAAOI;YAF7B,CADR;YAKHG,gBAAgB,EAAE;cACdH,iBAAiB,EAAEJ,UAAU,GAAGI,iBAAH,GAAuB;YADtC;UALf,CAAP;QASH;;MACD,KAAK,mBAAL;QAA0B;UACtB,MAAMA,iBAAiB,GAAG,EAA1B;UAEA,OAAO;YACHC,SAAS,EAAE,EACP,IAAIF,UAAU,GAAG;gBACbK,SAAS,EAAE,QADE;gBAEbC,QAAQ,EAAE;cAFG,CAAH,GAGV,EAHJ,CADO;cAKPC,cAAc,EAAE,eALT;cAMPN,iBAAiB,EAAEJ,UAAU,GAAG,CAAH,GAAOI;YAN7B,CADR;YASHG,gBAAgB,EAAE;cACdH,iBAAiB,EAAEJ,UAAU,GAAGI,iBAAH,GAAuB;YADtC;UATf,CAAP;QAaH;;MACD,KAAK,SAAL;MACA;QAAS;UACL,MAAMA,iBAAiB,GAAGF,SAAS,GAAG,EAAH,GAAQ,CAA3C;UAEA,OAAO;YACHG,SAAS,EAAE;cACPD,iBAAiB,EAAEJ,UAAU,GAAG,CAAH,GAAOI;YAD7B,CADR;YAIHG,gBAAgB,EAAE;cACdH,iBAAiB,EAAEJ,UAAU,GAAGI,iBAAH,GAAuB;YADtC;UAJf,CAAP;QAQH;IAxDL;EA0DH,CA3Da,EA2DX,CAACH,KAAD,EAAQH,OAAR,EAAiBK,UAAjB,EAA6BD,SAA7B,EAAwCH,IAAxC,EAA8CC,UAA9C,CA3DW,CAAd;AA4DH"}
|
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.36",
|
|
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": "b51f2b7d229d5b004c1823bb6bd12fdfd0bc6bc2"
|
|
71
71
|
}
|
package/src/AppBar/AppBar.tsx
CHANGED
|
@@ -32,7 +32,7 @@ const AppBar = React.forwardRef<View, AppBarProps>(function AppBar(props, ref) {
|
|
|
32
32
|
|
|
33
33
|
const theme = useTheme();
|
|
34
34
|
|
|
35
|
-
const
|
|
35
|
+
const shouldApplyHorizontalPadding = useBreakpointUp('sm', true, false);
|
|
36
36
|
|
|
37
37
|
const styles = useStyles();
|
|
38
38
|
|
|
@@ -44,7 +44,7 @@ const AppBar = React.forwardRef<View, AppBarProps>(function AppBar(props, ref) {
|
|
|
44
44
|
const paperStyle = css([
|
|
45
45
|
styles.root,
|
|
46
46
|
{ backgroundColor: backgroundColorMap[color] },
|
|
47
|
-
|
|
47
|
+
shouldApplyHorizontalPadding ? { paddingHorizontal: 8 } : undefined,
|
|
48
48
|
style,
|
|
49
49
|
]);
|
|
50
50
|
|
package/src/Tabs/useTabsStyle.ts
CHANGED
|
@@ -12,12 +12,14 @@ interface TabsStyle {
|
|
|
12
12
|
export default function useTabsStyle(variant: TabVariant, size: TabSize, scrollable: boolean) {
|
|
13
13
|
const theme = useTheme();
|
|
14
14
|
|
|
15
|
-
const
|
|
15
|
+
const isSmallUp = useBreakpointUp('sm', true, false);
|
|
16
|
+
|
|
17
|
+
const isMediumUp = useBreakpointUp('md', true, false);
|
|
16
18
|
|
|
17
19
|
return useMemo<TabsStyle>(() => {
|
|
18
20
|
switch (variant) {
|
|
19
21
|
case 'circular': {
|
|
20
|
-
const paddingHorizontal =
|
|
22
|
+
const paddingHorizontal = isSmallUp ? 20 : (size === 'small' ? 8 : 12);
|
|
21
23
|
|
|
22
24
|
return {
|
|
23
25
|
container: {
|
|
@@ -30,7 +32,7 @@ export default function useTabsStyle(variant: TabVariant, size: TabSize, scrolla
|
|
|
30
32
|
};
|
|
31
33
|
}
|
|
32
34
|
case 'circular-home': {
|
|
33
|
-
const paddingHorizontal =
|
|
35
|
+
const paddingHorizontal = isSmallUp ? 20 : 8;
|
|
34
36
|
|
|
35
37
|
return {
|
|
36
38
|
container: {
|
|
@@ -47,7 +49,7 @@ export default function useTabsStyle(variant: TabVariant, size: TabSize, scrolla
|
|
|
47
49
|
|
|
48
50
|
return {
|
|
49
51
|
container: {
|
|
50
|
-
...(
|
|
52
|
+
...(isMediumUp ? {
|
|
51
53
|
alignSelf: 'center',
|
|
52
54
|
minWidth: 460,
|
|
53
55
|
} : {}),
|
|
@@ -61,7 +63,7 @@ export default function useTabsStyle(variant: TabVariant, size: TabSize, scrolla
|
|
|
61
63
|
}
|
|
62
64
|
case 'default':
|
|
63
65
|
default: {
|
|
64
|
-
const paddingHorizontal =
|
|
66
|
+
const paddingHorizontal = isSmallUp ? 14 : 6;
|
|
65
67
|
|
|
66
68
|
return {
|
|
67
69
|
container: {
|
|
@@ -73,5 +75,5 @@ export default function useTabsStyle(variant: TabVariant, size: TabSize, scrolla
|
|
|
73
75
|
};
|
|
74
76
|
}
|
|
75
77
|
}
|
|
76
|
-
}, [theme, variant,
|
|
78
|
+
}, [theme, variant, isMediumUp, isSmallUp, size, scrollable]);
|
|
77
79
|
}
|