@fountain-ui/core 3.0.0-alpha.35 → 3.0.0-alpha.37
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 +1 -6
- 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/commonjs/Toolbar/Toolbar.js +14 -8
- package/build/commonjs/Toolbar/Toolbar.js.map +1 -1
- package/build/commonjs/Toolbar/ToolbarProps.js.map +1 -1
- package/build/module/AppBar/AppBar.js +1 -5
- 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/build/module/Toolbar/Toolbar.js +13 -9
- package/build/module/Toolbar/Toolbar.js.map +1 -1
- package/build/module/Toolbar/ToolbarProps.js.map +1 -1
- package/build/typescript/Toolbar/ToolbarProps.d.ts +0 -5
- package/package.json +2 -2
- package/src/AppBar/AppBar.tsx +1 -5
- package/src/Tabs/useTabsStyle.ts +8 -6
- package/src/Toolbar/Toolbar.tsx +20 -16
- package/src/Toolbar/ToolbarProps.ts +0 -6
|
@@ -9,8 +9,6 @@ var _react = _interopRequireDefault(require("react"));
|
|
|
9
9
|
|
|
10
10
|
var _reactNative = require("react-native");
|
|
11
11
|
|
|
12
|
-
var _hooks = require("../hooks");
|
|
13
|
-
|
|
14
12
|
var _styles = require("../styles");
|
|
15
13
|
|
|
16
14
|
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
@@ -36,7 +34,6 @@ const AppBar = /*#__PURE__*/_react.default.forwardRef(function AppBar(props, ref
|
|
|
36
34
|
...otherProps
|
|
37
35
|
} = props;
|
|
38
36
|
const theme = (0, _styles.useTheme)();
|
|
39
|
-
const isDesktop = (0, _hooks.useBreakpointUp)('md', true, false);
|
|
40
37
|
const styles = useStyles();
|
|
41
38
|
const backgroundColorMap = {
|
|
42
39
|
default: theme.palette.background.base,
|
|
@@ -44,9 +41,7 @@ const AppBar = /*#__PURE__*/_react.default.forwardRef(function AppBar(props, ref
|
|
|
44
41
|
};
|
|
45
42
|
const paperStyle = (0, _styles.css)([styles.root, {
|
|
46
43
|
backgroundColor: backgroundColorMap[color]
|
|
47
|
-
},
|
|
48
|
-
paddingHorizontal: 8
|
|
49
|
-
} : undefined, style]);
|
|
44
|
+
}, style]);
|
|
50
45
|
return /*#__PURE__*/_react.default.createElement(_reactNative.View, _extends({
|
|
51
46
|
ref: ref,
|
|
52
47
|
style: paperStyle
|
|
@@ -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","styles","backgroundColorMap","default","palette","background","base","alt","paperStyle","css","backgroundColor"],"sources":["AppBar.tsx"],"sourcesContent":["import React from 'react';\nimport { View } from 'react-native';\nimport type { NamedStylesStringUnion, UseStyles } from '@fountain-ui/styles';\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 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 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;;;;;;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,MAAM,GAAGjB,SAAS,EAAxB;EAEA,MAAMkB,kBAA+C,GAAG;IACpDC,OAAO,EAAElB,KAAK,CAACmB,OAAN,CAAcC,UAAd,CAAyBC,IADkB;IAEpDC,GAAG,EAAEtB,KAAK,CAACmB,OAAN,CAAcC,UAAd,CAAyBE;EAFsB,CAAxD;EAKA,MAAMC,UAAU,GAAG,IAAAC,WAAA,EAAI,CACnBR,MAAM,CAACd,IADY,EAEnB;IAAEuB,eAAe,EAAER,kBAAkB,CAACJ,KAAD;EAArC,CAFmB,EAGnBC,KAHmB,CAAJ,CAAnB;EAMA,oBACI,6BAAC,iBAAD;IACI,GAAG,EAAEF,GADT;IAEI,KAAK,EAAEW;EAFX,GAGQR,UAHR,EADJ;AAOH,CA7Bc,CAAf;;eA+BeP,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"}
|
|
@@ -7,8 +7,12 @@ exports.default = void 0;
|
|
|
7
7
|
|
|
8
8
|
var _react = _interopRequireDefault(require("react"));
|
|
9
9
|
|
|
10
|
+
var _reactNative = require("react-native");
|
|
11
|
+
|
|
10
12
|
var _Row = _interopRequireDefault(require("../Row"));
|
|
11
13
|
|
|
14
|
+
var _hooks = require("../hooks");
|
|
15
|
+
|
|
12
16
|
var _styles = require("../styles");
|
|
13
17
|
|
|
14
18
|
var _BackButton = _interopRequireDefault(require("./BackButton"));
|
|
@@ -18,14 +22,14 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
|
|
|
18
22
|
function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
|
|
19
23
|
|
|
20
24
|
const useStyles = function () {
|
|
21
|
-
const
|
|
25
|
+
const shouldApplyHorizontalPadding = (0, _hooks.useBreakpointUp)('sm', true, false);
|
|
22
26
|
return {
|
|
27
|
+
container: {
|
|
28
|
+
paddingHorizontal: shouldApplyHorizontalPadding ? 8 : 0
|
|
29
|
+
},
|
|
23
30
|
root: {
|
|
24
31
|
alignItems: 'center',
|
|
25
32
|
flexWrap: 'nowrap'
|
|
26
|
-
},
|
|
27
|
-
gutters: {
|
|
28
|
-
paddingHorizontal: theme.spacing(4)
|
|
29
33
|
}
|
|
30
34
|
};
|
|
31
35
|
};
|
|
@@ -44,15 +48,17 @@ const sizeMap = {
|
|
|
44
48
|
|
|
45
49
|
const Toolbar = props => {
|
|
46
50
|
const {
|
|
47
|
-
disableGutters = false,
|
|
48
51
|
size = 'medium',
|
|
49
52
|
style,
|
|
50
53
|
...otherProps
|
|
51
54
|
} = props;
|
|
52
55
|
const styles = useStyles();
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
+
const rootStyle = (0, _styles.css)([styles.root, sizeMap[size], style]);
|
|
57
|
+
return /*#__PURE__*/_react.default.createElement(_reactNative.View, {
|
|
58
|
+
style: styles.container
|
|
59
|
+
}, /*#__PURE__*/_react.default.createElement(_Row.default, _extends({
|
|
60
|
+
style: rootStyle
|
|
61
|
+
}, otherProps)));
|
|
56
62
|
};
|
|
57
63
|
|
|
58
64
|
Toolbar.BackButton = _BackButton.default;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["useStyles","
|
|
1
|
+
{"version":3,"names":["useStyles","shouldApplyHorizontalPadding","useBreakpointUp","container","paddingHorizontal","root","alignItems","flexWrap","sizeMap","small","height","medium","large","Toolbar","props","size","style","otherProps","styles","rootStyle","css","BackButton"],"sources":["Toolbar.tsx"],"sourcesContent":["import React from 'react';\nimport { View } from 'react-native';\nimport type { FountainUiStyle, NamedStylesStringUnion, UseStyles } from '@fountain-ui/styles';\nimport Row from '../Row';\nimport { useBreakpointUp } from '../hooks';\nimport { css } from '../styles';\nimport BackButton from './BackButton';\nimport type ToolbarProps from './ToolbarProps';\nimport type { ToolbarSize } from './ToolbarProps';\n\ntype ToolbarStyles = NamedStylesStringUnion<'container' | 'root'>;\n\nconst useStyles: UseStyles<ToolbarStyles> = function (): ToolbarStyles {\n const shouldApplyHorizontalPadding = useBreakpointUp('sm', true, false);\n\n return {\n container: {\n paddingHorizontal: shouldApplyHorizontalPadding ? 8 : 0,\n },\n root: {\n alignItems: 'center',\n flexWrap: 'nowrap',\n },\n };\n};\n\nconst sizeMap: Record<ToolbarSize, FountainUiStyle> = {\n small: { height: 48 },\n medium: { height: 50 },\n large: { height: 56 },\n};\n\nconst Toolbar = (props: ToolbarProps) => {\n const {\n size = 'medium',\n style,\n ...otherProps\n } = props;\n\n const styles = useStyles();\n\n const rootStyle = css([\n styles.root,\n sizeMap[size],\n style,\n ]);\n\n return (\n <View style={styles.container}>\n <Row\n style={rootStyle}\n {...otherProps}\n />\n </View>\n );\n};\n\nToolbar.BackButton = BackButton;\n\nexport default Toolbar;\n"],"mappings":";;;;;;;AAAA;;AACA;;AAEA;;AACA;;AACA;;AACA;;;;;;AAMA,MAAMA,SAAmC,GAAG,YAA2B;EACnE,MAAMC,4BAA4B,GAAG,IAAAC,sBAAA,EAAgB,IAAhB,EAAsB,IAAtB,EAA4B,KAA5B,CAArC;EAEA,OAAO;IACHC,SAAS,EAAE;MACPC,iBAAiB,EAAEH,4BAA4B,GAAG,CAAH,GAAO;IAD/C,CADR;IAIHI,IAAI,EAAE;MACFC,UAAU,EAAE,QADV;MAEFC,QAAQ,EAAE;IAFR;EAJH,CAAP;AASH,CAZD;;AAcA,MAAMC,OAA6C,GAAG;EAClDC,KAAK,EAAE;IAAEC,MAAM,EAAE;EAAV,CAD2C;EAElDC,MAAM,EAAE;IAAED,MAAM,EAAE;EAAV,CAF0C;EAGlDE,KAAK,EAAE;IAAEF,MAAM,EAAE;EAAV;AAH2C,CAAtD;;AAMA,MAAMG,OAAO,GAAIC,KAAD,IAAyB;EACrC,MAAM;IACFC,IAAI,GAAG,QADL;IAEFC,KAFE;IAGF,GAAGC;EAHD,IAIFH,KAJJ;EAMA,MAAMI,MAAM,GAAGlB,SAAS,EAAxB;EAEA,MAAMmB,SAAS,GAAG,IAAAC,WAAA,EAAI,CAClBF,MAAM,CAACb,IADW,EAElBG,OAAO,CAACO,IAAD,CAFW,EAGlBC,KAHkB,CAAJ,CAAlB;EAMA,oBACI,6BAAC,iBAAD;IAAM,KAAK,EAAEE,MAAM,CAACf;EAApB,gBACI,6BAAC,YAAD;IACI,KAAK,EAAEgB;EADX,GAEQF,UAFR,EADJ,CADJ;AAQH,CAvBD;;AAyBAJ,OAAO,CAACQ,UAAR,GAAqBA,mBAArB;eAEeR,O"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["toolbarSizes"],"sources":["ToolbarProps.ts"],"sourcesContent":["import React from 'react';\nimport type { RowProps } from '../Row';\nimport type { OverridableComponentProps } from '../types';\n\nexport const toolbarSizes = ['small', 'medium', 'large'] as const;\nexport type ToolbarSize = typeof toolbarSizes[number];\n\nexport default interface ToolbarProps extends OverridableComponentProps<RowProps, {\n /**\n * The content of the component.\n */\n children: React.ReactNode,\n\n /**\n *
|
|
1
|
+
{"version":3,"names":["toolbarSizes"],"sources":["ToolbarProps.ts"],"sourcesContent":["import React from 'react';\nimport type { RowProps } from '../Row';\nimport type { OverridableComponentProps } from '../types';\n\nexport const toolbarSizes = ['small', 'medium', 'large'] as const;\nexport type ToolbarSize = typeof toolbarSizes[number];\n\nexport default interface ToolbarProps extends OverridableComponentProps<RowProps, {\n /**\n * The content of the component.\n */\n children: React.ReactNode,\n\n /**\n * Determines the height of the toolbar.\n * @default 'medium'\n */\n size?: ToolbarSize;\n}> {}\n"],"mappings":";;;;;;AAIO,MAAMA,YAAY,GAAG,CAAC,OAAD,EAAU,QAAV,EAAoB,OAApB,CAArB"}
|
|
@@ -2,7 +2,6 @@ function _extends() { _extends = Object.assign ? Object.assign.bind() : function
|
|
|
2
2
|
|
|
3
3
|
import React from 'react';
|
|
4
4
|
import { View } from 'react-native';
|
|
5
|
-
import { useBreakpointUp } from '../hooks';
|
|
6
5
|
import { css, useTheme } from '../styles';
|
|
7
6
|
|
|
8
7
|
const useStyles = function () {
|
|
@@ -24,7 +23,6 @@ const AppBar = /*#__PURE__*/React.forwardRef(function AppBar(props, ref) {
|
|
|
24
23
|
...otherProps
|
|
25
24
|
} = props;
|
|
26
25
|
const theme = useTheme();
|
|
27
|
-
const isDesktop = useBreakpointUp('md', true, false);
|
|
28
26
|
const styles = useStyles();
|
|
29
27
|
const backgroundColorMap = {
|
|
30
28
|
default: theme.palette.background.base,
|
|
@@ -32,9 +30,7 @@ const AppBar = /*#__PURE__*/React.forwardRef(function AppBar(props, ref) {
|
|
|
32
30
|
};
|
|
33
31
|
const paperStyle = css([styles.root, {
|
|
34
32
|
backgroundColor: backgroundColorMap[color]
|
|
35
|
-
},
|
|
36
|
-
paddingHorizontal: 8
|
|
37
|
-
} : undefined, style]);
|
|
33
|
+
}, style]);
|
|
38
34
|
return /*#__PURE__*/React.createElement(View, _extends({
|
|
39
35
|
ref: ref,
|
|
40
36
|
style: paperStyle
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["React","View","
|
|
1
|
+
{"version":3,"names":["React","View","css","useTheme","useStyles","theme","root","flexDirection","flexShrink","width","zIndex","appBar","AppBar","forwardRef","props","ref","color","style","otherProps","styles","backgroundColorMap","default","palette","background","base","alt","paperStyle","backgroundColor"],"sources":["AppBar.tsx"],"sourcesContent":["import React from 'react';\nimport { View } from 'react-native';\nimport type { NamedStylesStringUnion, UseStyles } from '@fountain-ui/styles';\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 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 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,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,gBAAGZ,KAAK,CAACa,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,MAAM,GAAGf,SAAS,EAAxB;EAEA,MAAMgB,kBAA+C,GAAG;IACpDC,OAAO,EAAEhB,KAAK,CAACiB,OAAN,CAAcC,UAAd,CAAyBC,IADkB;IAEpDC,GAAG,EAAEpB,KAAK,CAACiB,OAAN,CAAcC,UAAd,CAAyBE;EAFsB,CAAxD;EAKA,MAAMC,UAAU,GAAGxB,GAAG,CAAC,CACnBiB,MAAM,CAACb,IADY,EAEnB;IAAEqB,eAAe,EAAEP,kBAAkB,CAACJ,KAAD;EAArC,CAFmB,EAGnBC,KAHmB,CAAD,CAAtB;EAMA,oBACI,oBAAC,IAAD;IACI,GAAG,EAAEF,GADT;IAEI,KAAK,EAAEW;EAFX,GAGQR,UAHR,EADJ;AAOH,CA7Bc,CAAf;AA+BA,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"}
|
|
@@ -1,19 +1,21 @@
|
|
|
1
1
|
function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
|
|
2
2
|
|
|
3
3
|
import React from 'react';
|
|
4
|
+
import { View } from 'react-native';
|
|
4
5
|
import Row from '../Row';
|
|
5
|
-
import {
|
|
6
|
+
import { useBreakpointUp } from '../hooks';
|
|
7
|
+
import { css } from '../styles';
|
|
6
8
|
import BackButton from './BackButton';
|
|
7
9
|
|
|
8
10
|
const useStyles = function () {
|
|
9
|
-
const
|
|
11
|
+
const shouldApplyHorizontalPadding = useBreakpointUp('sm', true, false);
|
|
10
12
|
return {
|
|
13
|
+
container: {
|
|
14
|
+
paddingHorizontal: shouldApplyHorizontalPadding ? 8 : 0
|
|
15
|
+
},
|
|
11
16
|
root: {
|
|
12
17
|
alignItems: 'center',
|
|
13
18
|
flexWrap: 'nowrap'
|
|
14
|
-
},
|
|
15
|
-
gutters: {
|
|
16
|
-
paddingHorizontal: theme.spacing(4)
|
|
17
19
|
}
|
|
18
20
|
};
|
|
19
21
|
};
|
|
@@ -32,15 +34,17 @@ const sizeMap = {
|
|
|
32
34
|
|
|
33
35
|
const Toolbar = props => {
|
|
34
36
|
const {
|
|
35
|
-
disableGutters = false,
|
|
36
37
|
size = 'medium',
|
|
37
38
|
style,
|
|
38
39
|
...otherProps
|
|
39
40
|
} = props;
|
|
40
41
|
const styles = useStyles();
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
42
|
+
const rootStyle = css([styles.root, sizeMap[size], style]);
|
|
43
|
+
return /*#__PURE__*/React.createElement(View, {
|
|
44
|
+
style: styles.container
|
|
45
|
+
}, /*#__PURE__*/React.createElement(Row, _extends({
|
|
46
|
+
style: rootStyle
|
|
47
|
+
}, otherProps)));
|
|
44
48
|
};
|
|
45
49
|
|
|
46
50
|
Toolbar.BackButton = BackButton;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["React","Row","
|
|
1
|
+
{"version":3,"names":["React","View","Row","useBreakpointUp","css","BackButton","useStyles","shouldApplyHorizontalPadding","container","paddingHorizontal","root","alignItems","flexWrap","sizeMap","small","height","medium","large","Toolbar","props","size","style","otherProps","styles","rootStyle"],"sources":["Toolbar.tsx"],"sourcesContent":["import React from 'react';\nimport { View } from 'react-native';\nimport type { FountainUiStyle, NamedStylesStringUnion, UseStyles } from '@fountain-ui/styles';\nimport Row from '../Row';\nimport { useBreakpointUp } from '../hooks';\nimport { css } from '../styles';\nimport BackButton from './BackButton';\nimport type ToolbarProps from './ToolbarProps';\nimport type { ToolbarSize } from './ToolbarProps';\n\ntype ToolbarStyles = NamedStylesStringUnion<'container' | 'root'>;\n\nconst useStyles: UseStyles<ToolbarStyles> = function (): ToolbarStyles {\n const shouldApplyHorizontalPadding = useBreakpointUp('sm', true, false);\n\n return {\n container: {\n paddingHorizontal: shouldApplyHorizontalPadding ? 8 : 0,\n },\n root: {\n alignItems: 'center',\n flexWrap: 'nowrap',\n },\n };\n};\n\nconst sizeMap: Record<ToolbarSize, FountainUiStyle> = {\n small: { height: 48 },\n medium: { height: 50 },\n large: { height: 56 },\n};\n\nconst Toolbar = (props: ToolbarProps) => {\n const {\n size = 'medium',\n style,\n ...otherProps\n } = props;\n\n const styles = useStyles();\n\n const rootStyle = css([\n styles.root,\n sizeMap[size],\n style,\n ]);\n\n return (\n <View style={styles.container}>\n <Row\n style={rootStyle}\n {...otherProps}\n />\n </View>\n );\n};\n\nToolbar.BackButton = BackButton;\n\nexport default Toolbar;\n"],"mappings":";;AAAA,OAAOA,KAAP,MAAkB,OAAlB;AACA,SAASC,IAAT,QAAqB,cAArB;AAEA,OAAOC,GAAP,MAAgB,QAAhB;AACA,SAASC,eAAT,QAAgC,UAAhC;AACA,SAASC,GAAT,QAAoB,WAApB;AACA,OAAOC,UAAP,MAAuB,cAAvB;;AAMA,MAAMC,SAAmC,GAAG,YAA2B;EACnE,MAAMC,4BAA4B,GAAGJ,eAAe,CAAC,IAAD,EAAO,IAAP,EAAa,KAAb,CAApD;EAEA,OAAO;IACHK,SAAS,EAAE;MACPC,iBAAiB,EAAEF,4BAA4B,GAAG,CAAH,GAAO;IAD/C,CADR;IAIHG,IAAI,EAAE;MACFC,UAAU,EAAE,QADV;MAEFC,QAAQ,EAAE;IAFR;EAJH,CAAP;AASH,CAZD;;AAcA,MAAMC,OAA6C,GAAG;EAClDC,KAAK,EAAE;IAAEC,MAAM,EAAE;EAAV,CAD2C;EAElDC,MAAM,EAAE;IAAED,MAAM,EAAE;EAAV,CAF0C;EAGlDE,KAAK,EAAE;IAAEF,MAAM,EAAE;EAAV;AAH2C,CAAtD;;AAMA,MAAMG,OAAO,GAAIC,KAAD,IAAyB;EACrC,MAAM;IACFC,IAAI,GAAG,QADL;IAEFC,KAFE;IAGF,GAAGC;EAHD,IAIFH,KAJJ;EAMA,MAAMI,MAAM,GAAGjB,SAAS,EAAxB;EAEA,MAAMkB,SAAS,GAAGpB,GAAG,CAAC,CAClBmB,MAAM,CAACb,IADW,EAElBG,OAAO,CAACO,IAAD,CAFW,EAGlBC,KAHkB,CAAD,CAArB;EAMA,oBACI,oBAAC,IAAD;IAAM,KAAK,EAAEE,MAAM,CAACf;EAApB,gBACI,oBAAC,GAAD;IACI,KAAK,EAAEgB;EADX,GAEQF,UAFR,EADJ,CADJ;AAQH,CAvBD;;AAyBAJ,OAAO,CAACb,UAAR,GAAqBA,UAArB;AAEA,eAAea,OAAf"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["toolbarSizes"],"sources":["ToolbarProps.ts"],"sourcesContent":["import React from 'react';\nimport type { RowProps } from '../Row';\nimport type { OverridableComponentProps } from '../types';\n\nexport const toolbarSizes = ['small', 'medium', 'large'] as const;\nexport type ToolbarSize = typeof toolbarSizes[number];\n\nexport default interface ToolbarProps extends OverridableComponentProps<RowProps, {\n /**\n * The content of the component.\n */\n children: React.ReactNode,\n\n /**\n *
|
|
1
|
+
{"version":3,"names":["toolbarSizes"],"sources":["ToolbarProps.ts"],"sourcesContent":["import React from 'react';\nimport type { RowProps } from '../Row';\nimport type { OverridableComponentProps } from '../types';\n\nexport const toolbarSizes = ['small', 'medium', 'large'] as const;\nexport type ToolbarSize = typeof toolbarSizes[number];\n\nexport default interface ToolbarProps extends OverridableComponentProps<RowProps, {\n /**\n * The content of the component.\n */\n children: React.ReactNode,\n\n /**\n * Determines the height of the toolbar.\n * @default 'medium'\n */\n size?: ToolbarSize;\n}> {}\n"],"mappings":"AAIA,OAAO,MAAMA,YAAY,GAAG,CAAC,OAAD,EAAU,QAAV,EAAoB,OAApB,CAArB"}
|
|
@@ -8,11 +8,6 @@ export default interface ToolbarProps extends OverridableComponentProps<RowProps
|
|
|
8
8
|
* The content of the component.
|
|
9
9
|
*/
|
|
10
10
|
children: React.ReactNode;
|
|
11
|
-
/**
|
|
12
|
-
* If `true`, disables gutter padding.
|
|
13
|
-
* @default false
|
|
14
|
-
*/
|
|
15
|
-
disableGutters?: boolean;
|
|
16
11
|
/**
|
|
17
12
|
* Determines the height of the toolbar.
|
|
18
13
|
* @default 'medium'
|
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.37",
|
|
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": "a4ac87a8723547c1a5b301651689a2e37736b395"
|
|
71
71
|
}
|
package/src/AppBar/AppBar.tsx
CHANGED
|
@@ -1,7 +1,6 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
2
|
import { View } from 'react-native';
|
|
3
|
-
import { NamedStylesStringUnion, UseStyles } from '@fountain-ui/styles';
|
|
4
|
-
import { useBreakpointUp } from '../hooks';
|
|
3
|
+
import type { NamedStylesStringUnion, UseStyles } from '@fountain-ui/styles';
|
|
5
4
|
import { css, useTheme } from '../styles';
|
|
6
5
|
import type AppBarProps from './AppBarProps';
|
|
7
6
|
import type { AppBarColor } from './AppBarProps';
|
|
@@ -32,8 +31,6 @@ const AppBar = React.forwardRef<View, AppBarProps>(function AppBar(props, ref) {
|
|
|
32
31
|
|
|
33
32
|
const theme = useTheme();
|
|
34
33
|
|
|
35
|
-
const isDesktop = useBreakpointUp('md', true, false);
|
|
36
|
-
|
|
37
34
|
const styles = useStyles();
|
|
38
35
|
|
|
39
36
|
const backgroundColorMap: Record<AppBarColor, string> = {
|
|
@@ -44,7 +41,6 @@ const AppBar = React.forwardRef<View, AppBarProps>(function AppBar(props, ref) {
|
|
|
44
41
|
const paperStyle = css([
|
|
45
42
|
styles.root,
|
|
46
43
|
{ backgroundColor: backgroundColorMap[color] },
|
|
47
|
-
isDesktop ? { paddingHorizontal: 8 } : undefined,
|
|
48
44
|
style,
|
|
49
45
|
]);
|
|
50
46
|
|
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
|
}
|
package/src/Toolbar/Toolbar.tsx
CHANGED
|
@@ -1,24 +1,26 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
|
+
import { View } from 'react-native';
|
|
2
3
|
import type { FountainUiStyle, NamedStylesStringUnion, UseStyles } from '@fountain-ui/styles';
|
|
3
4
|
import Row from '../Row';
|
|
4
|
-
import {
|
|
5
|
+
import { useBreakpointUp } from '../hooks';
|
|
6
|
+
import { css } from '../styles';
|
|
5
7
|
import BackButton from './BackButton';
|
|
6
8
|
import type ToolbarProps from './ToolbarProps';
|
|
7
9
|
import type { ToolbarSize } from './ToolbarProps';
|
|
8
10
|
|
|
9
|
-
type ToolbarStyles = NamedStylesStringUnion<'
|
|
11
|
+
type ToolbarStyles = NamedStylesStringUnion<'container' | 'root'>;
|
|
10
12
|
|
|
11
13
|
const useStyles: UseStyles<ToolbarStyles> = function (): ToolbarStyles {
|
|
12
|
-
const
|
|
14
|
+
const shouldApplyHorizontalPadding = useBreakpointUp('sm', true, false);
|
|
13
15
|
|
|
14
16
|
return {
|
|
17
|
+
container: {
|
|
18
|
+
paddingHorizontal: shouldApplyHorizontalPadding ? 8 : 0,
|
|
19
|
+
},
|
|
15
20
|
root: {
|
|
16
21
|
alignItems: 'center',
|
|
17
22
|
flexWrap: 'nowrap',
|
|
18
23
|
},
|
|
19
|
-
gutters: {
|
|
20
|
-
paddingHorizontal: theme.spacing(4),
|
|
21
|
-
},
|
|
22
24
|
};
|
|
23
25
|
};
|
|
24
26
|
|
|
@@ -30,7 +32,6 @@ const sizeMap: Record<ToolbarSize, FountainUiStyle> = {
|
|
|
30
32
|
|
|
31
33
|
const Toolbar = (props: ToolbarProps) => {
|
|
32
34
|
const {
|
|
33
|
-
disableGutters = false,
|
|
34
35
|
size = 'medium',
|
|
35
36
|
style,
|
|
36
37
|
...otherProps
|
|
@@ -38,16 +39,19 @@ const Toolbar = (props: ToolbarProps) => {
|
|
|
38
39
|
|
|
39
40
|
const styles = useStyles();
|
|
40
41
|
|
|
42
|
+
const rootStyle = css([
|
|
43
|
+
styles.root,
|
|
44
|
+
sizeMap[size],
|
|
45
|
+
style,
|
|
46
|
+
]);
|
|
47
|
+
|
|
41
48
|
return (
|
|
42
|
-
<
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
])}
|
|
49
|
-
{...otherProps}
|
|
50
|
-
/>
|
|
49
|
+
<View style={styles.container}>
|
|
50
|
+
<Row
|
|
51
|
+
style={rootStyle}
|
|
52
|
+
{...otherProps}
|
|
53
|
+
/>
|
|
54
|
+
</View>
|
|
51
55
|
);
|
|
52
56
|
};
|
|
53
57
|
|
|
@@ -11,12 +11,6 @@ export default interface ToolbarProps extends OverridableComponentProps<RowProps
|
|
|
11
11
|
*/
|
|
12
12
|
children: React.ReactNode,
|
|
13
13
|
|
|
14
|
-
/**
|
|
15
|
-
* If `true`, disables gutter padding.
|
|
16
|
-
* @default false
|
|
17
|
-
*/
|
|
18
|
-
disableGutters?: boolean,
|
|
19
|
-
|
|
20
14
|
/**
|
|
21
15
|
* Determines the height of the toolbar.
|
|
22
16
|
* @default 'medium'
|