@fountain-ui/core 3.0.0-alpha.36 → 3.0.0-alpha.38
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/BottomSheetTitle/BottomSheetTitle.js +1 -0
- package/build/commonjs/BottomSheetTitle/BottomSheetTitle.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/BottomSheetTitle/BottomSheetTitle.js +1 -0
- package/build/module/BottomSheetTitle/BottomSheetTitle.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/BottomSheetTitle/BottomSheetTitle.tsx +1 -0
- 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 shouldApplyHorizontalPadding = (0, _hooks.useBreakpointUp)('sm', 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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["useStyles","theme","useTheme","root","alignItems","gap","spacing","justifyContent","marginBottom","paddingHorizontal","title","paddingBottom","paddingTop","minWidth","actionButton","BottomSheetTitle","props","actionButtonProps","children","style","styleProp","otherProps","styles","rootStyle","css","titleFontStyle","createFontStyle","selector","typography","header3","semiBold","color","palette","text","strong","titleStyle","disabled","onPress"],"sources":["BottomSheetTitle.tsx"],"sourcesContent":["import React from 'react';\nimport { Text } from 'react-native';\nimport type { NamedStylesStringUnion, UseStyles } from '@fountain-ui/styles';\nimport Button from '../Button/Button';\nimport Row from '../Row';\nimport { createFontStyle, css, useTheme } from '../styles';\nimport type BottomSheetTitleProps from './BottomSheetTitleProps';\n\ntype BottomSheetTitleStyles = NamedStylesStringUnion<'root' | 'title' | 'actionButton'>;\n\nconst useStyles: UseStyles<BottomSheetTitleStyles> = function (): BottomSheetTitleStyles {\n const theme = useTheme();\n\n return {\n root: {\n alignItems: 'flex-start',\n gap: theme.spacing(8),\n justifyContent: 'space-between',\n marginBottom: theme.spacing(4),\n paddingHorizontal: theme.spacing(6),\n },\n title: {\n paddingBottom: theme.spacing(1.25),\n paddingTop: theme.spacing(1),\n minWidth: 0,\n },\n actionButton: {\n paddingBottom: theme.spacing(1.75),\n paddingHorizontal: 0,\n paddingTop: theme.spacing(1.25),\n },\n };\n};\n\nexport default function BottomSheetTitle(props: BottomSheetTitleProps) {\n const {\n actionButtonProps,\n children,\n style: styleProp,\n ...otherProps\n } = props;\n\n const theme = useTheme();\n\n const styles = useStyles();\n\n const rootStyle = css([\n styles.root,\n styleProp,\n ]);\n\n const titleFontStyle = createFontStyle(theme, {\n selector: (typography) => typography.header3.semiBold,\n color: theme.palette.text.strong,\n });\n\n const titleStyle = css([\n styles.title,\n titleFontStyle,\n ]);\n\n return (\n <Row\n style={rootStyle}\n {...otherProps}\n >\n <Text\n children={children}\n style={titleStyle}\n />\n\n {actionButtonProps ? (\n <Button\n children={actionButtonProps.title}\n color={'accent'}\n disabled={actionButtonProps.disabled ?? false}\n disableMinWidth={true}\n onPress={actionButtonProps.onPress}\n size={'large'}\n style={styles.actionButton}\n variant={'text'}\n />\n ) : null}\n </Row>\n );\n}\n"],"mappings":";;;;;;;AAAA;;AACA;;AAEA;;AACA;;AACA;;;;;;AAKA,MAAMA,SAA4C,GAAG,YAAoC;EACrF,MAAMC,KAAK,GAAG,IAAAC,gBAAA,GAAd;EAEA,OAAO;IACHC,IAAI,EAAE;MACFC,UAAU,EAAE,YADV;MAEFC,GAAG,EAAEJ,KAAK,CAACK,OAAN,CAAc,CAAd,CAFH;MAGFC,cAAc,EAAE,eAHd;MAIFC,YAAY,EAAEP,KAAK,CAACK,OAAN,CAAc,CAAd,CAJZ;MAKFG,iBAAiB,EAAER,KAAK,CAACK,OAAN,CAAc,CAAd;IALjB,CADH;IAQHI,KAAK,EAAE;MACHC,aAAa,
|
|
1
|
+
{"version":3,"names":["useStyles","theme","useTheme","root","alignItems","gap","spacing","justifyContent","marginBottom","paddingHorizontal","title","flexShrink","paddingBottom","paddingTop","minWidth","actionButton","BottomSheetTitle","props","actionButtonProps","children","style","styleProp","otherProps","styles","rootStyle","css","titleFontStyle","createFontStyle","selector","typography","header3","semiBold","color","palette","text","strong","titleStyle","disabled","onPress"],"sources":["BottomSheetTitle.tsx"],"sourcesContent":["import React from 'react';\nimport { Text } from 'react-native';\nimport type { NamedStylesStringUnion, UseStyles } from '@fountain-ui/styles';\nimport Button from '../Button/Button';\nimport Row from '../Row';\nimport { createFontStyle, css, useTheme } from '../styles';\nimport type BottomSheetTitleProps from './BottomSheetTitleProps';\n\ntype BottomSheetTitleStyles = NamedStylesStringUnion<'root' | 'title' | 'actionButton'>;\n\nconst useStyles: UseStyles<BottomSheetTitleStyles> = function (): BottomSheetTitleStyles {\n const theme = useTheme();\n\n return {\n root: {\n alignItems: 'flex-start',\n gap: theme.spacing(8),\n justifyContent: 'space-between',\n marginBottom: theme.spacing(4),\n paddingHorizontal: theme.spacing(6),\n },\n title: {\n flexShrink: 1,\n paddingBottom: theme.spacing(1.25),\n paddingTop: theme.spacing(1),\n minWidth: 0,\n },\n actionButton: {\n paddingBottom: theme.spacing(1.75),\n paddingHorizontal: 0,\n paddingTop: theme.spacing(1.25),\n },\n };\n};\n\nexport default function BottomSheetTitle(props: BottomSheetTitleProps) {\n const {\n actionButtonProps,\n children,\n style: styleProp,\n ...otherProps\n } = props;\n\n const theme = useTheme();\n\n const styles = useStyles();\n\n const rootStyle = css([\n styles.root,\n styleProp,\n ]);\n\n const titleFontStyle = createFontStyle(theme, {\n selector: (typography) => typography.header3.semiBold,\n color: theme.palette.text.strong,\n });\n\n const titleStyle = css([\n styles.title,\n titleFontStyle,\n ]);\n\n return (\n <Row\n style={rootStyle}\n {...otherProps}\n >\n <Text\n children={children}\n style={titleStyle}\n />\n\n {actionButtonProps ? (\n <Button\n children={actionButtonProps.title}\n color={'accent'}\n disabled={actionButtonProps.disabled ?? false}\n disableMinWidth={true}\n onPress={actionButtonProps.onPress}\n size={'large'}\n style={styles.actionButton}\n variant={'text'}\n />\n ) : null}\n </Row>\n );\n}\n"],"mappings":";;;;;;;AAAA;;AACA;;AAEA;;AACA;;AACA;;;;;;AAKA,MAAMA,SAA4C,GAAG,YAAoC;EACrF,MAAMC,KAAK,GAAG,IAAAC,gBAAA,GAAd;EAEA,OAAO;IACHC,IAAI,EAAE;MACFC,UAAU,EAAE,YADV;MAEFC,GAAG,EAAEJ,KAAK,CAACK,OAAN,CAAc,CAAd,CAFH;MAGFC,cAAc,EAAE,eAHd;MAIFC,YAAY,EAAEP,KAAK,CAACK,OAAN,CAAc,CAAd,CAJZ;MAKFG,iBAAiB,EAAER,KAAK,CAACK,OAAN,CAAc,CAAd;IALjB,CADH;IAQHI,KAAK,EAAE;MACHC,UAAU,EAAE,CADT;MAEHC,aAAa,EAAEX,KAAK,CAACK,OAAN,CAAc,IAAd,CAFZ;MAGHO,UAAU,EAAEZ,KAAK,CAACK,OAAN,CAAc,CAAd,CAHT;MAIHQ,QAAQ,EAAE;IAJP,CARJ;IAcHC,YAAY,EAAE;MACVH,aAAa,EAAEX,KAAK,CAACK,OAAN,CAAc,IAAd,CADL;MAEVG,iBAAiB,EAAE,CAFT;MAGVI,UAAU,EAAEZ,KAAK,CAACK,OAAN,CAAc,IAAd;IAHF;EAdX,CAAP;AAoBH,CAvBD;;AAyBe,SAASU,gBAAT,CAA0BC,KAA1B,EAAwD;EACnE,MAAM;IACFC,iBADE;IAEFC,QAFE;IAGFC,KAAK,EAAEC,SAHL;IAIF,GAAGC;EAJD,IAKFL,KALJ;EAOA,MAAMhB,KAAK,GAAG,IAAAC,gBAAA,GAAd;EAEA,MAAMqB,MAAM,GAAGvB,SAAS,EAAxB;EAEA,MAAMwB,SAAS,GAAG,IAAAC,WAAA,EAAI,CAClBF,MAAM,CAACpB,IADW,EAElBkB,SAFkB,CAAJ,CAAlB;EAKA,MAAMK,cAAc,GAAG,IAAAC,uBAAA,EAAgB1B,KAAhB,EAAuB;IAC1C2B,QAAQ,EAAGC,UAAD,IAAgBA,UAAU,CAACC,OAAX,CAAmBC,QADH;IAE1CC,KAAK,EAAE/B,KAAK,CAACgC,OAAN,CAAcC,IAAd,CAAmBC;EAFgB,CAAvB,CAAvB;EAKA,MAAMC,UAAU,GAAG,IAAAX,WAAA,EAAI,CACnBF,MAAM,CAACb,KADY,EAEnBgB,cAFmB,CAAJ,CAAnB;EAKA,oBACI,6BAAC,YAAD;IACI,KAAK,EAAEF;EADX,GAEQF,UAFR,gBAII,6BAAC,iBAAD;IACI,QAAQ,EAAEH,QADd;IAEI,KAAK,EAAEiB;EAFX,EAJJ,EASKlB,iBAAiB,gBACd,6BAAC,eAAD;IACI,QAAQ,EAAEA,iBAAiB,CAACR,KADhC;IAEI,KAAK,EAAE,QAFX;IAGI,QAAQ,EAAEQ,iBAAiB,CAACmB,QAAlB,IAA8B,KAH5C;IAII,eAAe,EAAE,IAJrB;IAKI,OAAO,EAAEnB,iBAAiB,CAACoB,OAL/B;IAMI,IAAI,EAAE,OANV;IAOI,KAAK,EAAEf,MAAM,CAACR,YAPlB;IAQI,OAAO,EAAE;EARb,EADc,GAWd,IApBR,CADJ;AAwBH"}
|
|
@@ -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 shouldApplyHorizontalPadding = useBreakpointUp('sm', 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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["React","Text","Button","Row","createFontStyle","css","useTheme","useStyles","theme","root","alignItems","gap","spacing","justifyContent","marginBottom","paddingHorizontal","title","paddingBottom","paddingTop","minWidth","actionButton","BottomSheetTitle","props","actionButtonProps","children","style","styleProp","otherProps","styles","rootStyle","titleFontStyle","selector","typography","header3","semiBold","color","palette","text","strong","titleStyle","disabled","onPress"],"sources":["BottomSheetTitle.tsx"],"sourcesContent":["import React from 'react';\nimport { Text } from 'react-native';\nimport type { NamedStylesStringUnion, UseStyles } from '@fountain-ui/styles';\nimport Button from '../Button/Button';\nimport Row from '../Row';\nimport { createFontStyle, css, useTheme } from '../styles';\nimport type BottomSheetTitleProps from './BottomSheetTitleProps';\n\ntype BottomSheetTitleStyles = NamedStylesStringUnion<'root' | 'title' | 'actionButton'>;\n\nconst useStyles: UseStyles<BottomSheetTitleStyles> = function (): BottomSheetTitleStyles {\n const theme = useTheme();\n\n return {\n root: {\n alignItems: 'flex-start',\n gap: theme.spacing(8),\n justifyContent: 'space-between',\n marginBottom: theme.spacing(4),\n paddingHorizontal: theme.spacing(6),\n },\n title: {\n paddingBottom: theme.spacing(1.25),\n paddingTop: theme.spacing(1),\n minWidth: 0,\n },\n actionButton: {\n paddingBottom: theme.spacing(1.75),\n paddingHorizontal: 0,\n paddingTop: theme.spacing(1.25),\n },\n };\n};\n\nexport default function BottomSheetTitle(props: BottomSheetTitleProps) {\n const {\n actionButtonProps,\n children,\n style: styleProp,\n ...otherProps\n } = props;\n\n const theme = useTheme();\n\n const styles = useStyles();\n\n const rootStyle = css([\n styles.root,\n styleProp,\n ]);\n\n const titleFontStyle = createFontStyle(theme, {\n selector: (typography) => typography.header3.semiBold,\n color: theme.palette.text.strong,\n });\n\n const titleStyle = css([\n styles.title,\n titleFontStyle,\n ]);\n\n return (\n <Row\n style={rootStyle}\n {...otherProps}\n >\n <Text\n children={children}\n style={titleStyle}\n />\n\n {actionButtonProps ? (\n <Button\n children={actionButtonProps.title}\n color={'accent'}\n disabled={actionButtonProps.disabled ?? false}\n disableMinWidth={true}\n onPress={actionButtonProps.onPress}\n size={'large'}\n style={styles.actionButton}\n variant={'text'}\n />\n ) : null}\n </Row>\n );\n}\n"],"mappings":";;AAAA,OAAOA,KAAP,MAAkB,OAAlB;AACA,SAASC,IAAT,QAAqB,cAArB;AAEA,OAAOC,MAAP,MAAmB,kBAAnB;AACA,OAAOC,GAAP,MAAgB,QAAhB;AACA,SAASC,eAAT,EAA0BC,GAA1B,EAA+BC,QAA/B,QAA+C,WAA/C;;AAKA,MAAMC,SAA4C,GAAG,YAAoC;EACrF,MAAMC,KAAK,GAAGF,QAAQ,EAAtB;EAEA,OAAO;IACHG,IAAI,EAAE;MACFC,UAAU,EAAE,YADV;MAEFC,GAAG,EAAEH,KAAK,CAACI,OAAN,CAAc,CAAd,CAFH;MAGFC,cAAc,EAAE,eAHd;MAIFC,YAAY,EAAEN,KAAK,CAACI,OAAN,CAAc,CAAd,CAJZ;MAKFG,iBAAiB,EAAEP,KAAK,CAACI,OAAN,CAAc,CAAd;IALjB,CADH;IAQHI,KAAK,EAAE;MACHC,aAAa,
|
|
1
|
+
{"version":3,"names":["React","Text","Button","Row","createFontStyle","css","useTheme","useStyles","theme","root","alignItems","gap","spacing","justifyContent","marginBottom","paddingHorizontal","title","flexShrink","paddingBottom","paddingTop","minWidth","actionButton","BottomSheetTitle","props","actionButtonProps","children","style","styleProp","otherProps","styles","rootStyle","titleFontStyle","selector","typography","header3","semiBold","color","palette","text","strong","titleStyle","disabled","onPress"],"sources":["BottomSheetTitle.tsx"],"sourcesContent":["import React from 'react';\nimport { Text } from 'react-native';\nimport type { NamedStylesStringUnion, UseStyles } from '@fountain-ui/styles';\nimport Button from '../Button/Button';\nimport Row from '../Row';\nimport { createFontStyle, css, useTheme } from '../styles';\nimport type BottomSheetTitleProps from './BottomSheetTitleProps';\n\ntype BottomSheetTitleStyles = NamedStylesStringUnion<'root' | 'title' | 'actionButton'>;\n\nconst useStyles: UseStyles<BottomSheetTitleStyles> = function (): BottomSheetTitleStyles {\n const theme = useTheme();\n\n return {\n root: {\n alignItems: 'flex-start',\n gap: theme.spacing(8),\n justifyContent: 'space-between',\n marginBottom: theme.spacing(4),\n paddingHorizontal: theme.spacing(6),\n },\n title: {\n flexShrink: 1,\n paddingBottom: theme.spacing(1.25),\n paddingTop: theme.spacing(1),\n minWidth: 0,\n },\n actionButton: {\n paddingBottom: theme.spacing(1.75),\n paddingHorizontal: 0,\n paddingTop: theme.spacing(1.25),\n },\n };\n};\n\nexport default function BottomSheetTitle(props: BottomSheetTitleProps) {\n const {\n actionButtonProps,\n children,\n style: styleProp,\n ...otherProps\n } = props;\n\n const theme = useTheme();\n\n const styles = useStyles();\n\n const rootStyle = css([\n styles.root,\n styleProp,\n ]);\n\n const titleFontStyle = createFontStyle(theme, {\n selector: (typography) => typography.header3.semiBold,\n color: theme.palette.text.strong,\n });\n\n const titleStyle = css([\n styles.title,\n titleFontStyle,\n ]);\n\n return (\n <Row\n style={rootStyle}\n {...otherProps}\n >\n <Text\n children={children}\n style={titleStyle}\n />\n\n {actionButtonProps ? (\n <Button\n children={actionButtonProps.title}\n color={'accent'}\n disabled={actionButtonProps.disabled ?? false}\n disableMinWidth={true}\n onPress={actionButtonProps.onPress}\n size={'large'}\n style={styles.actionButton}\n variant={'text'}\n />\n ) : null}\n </Row>\n );\n}\n"],"mappings":";;AAAA,OAAOA,KAAP,MAAkB,OAAlB;AACA,SAASC,IAAT,QAAqB,cAArB;AAEA,OAAOC,MAAP,MAAmB,kBAAnB;AACA,OAAOC,GAAP,MAAgB,QAAhB;AACA,SAASC,eAAT,EAA0BC,GAA1B,EAA+BC,QAA/B,QAA+C,WAA/C;;AAKA,MAAMC,SAA4C,GAAG,YAAoC;EACrF,MAAMC,KAAK,GAAGF,QAAQ,EAAtB;EAEA,OAAO;IACHG,IAAI,EAAE;MACFC,UAAU,EAAE,YADV;MAEFC,GAAG,EAAEH,KAAK,CAACI,OAAN,CAAc,CAAd,CAFH;MAGFC,cAAc,EAAE,eAHd;MAIFC,YAAY,EAAEN,KAAK,CAACI,OAAN,CAAc,CAAd,CAJZ;MAKFG,iBAAiB,EAAEP,KAAK,CAACI,OAAN,CAAc,CAAd;IALjB,CADH;IAQHI,KAAK,EAAE;MACHC,UAAU,EAAE,CADT;MAEHC,aAAa,EAAEV,KAAK,CAACI,OAAN,CAAc,IAAd,CAFZ;MAGHO,UAAU,EAAEX,KAAK,CAACI,OAAN,CAAc,CAAd,CAHT;MAIHQ,QAAQ,EAAE;IAJP,CARJ;IAcHC,YAAY,EAAE;MACVH,aAAa,EAAEV,KAAK,CAACI,OAAN,CAAc,IAAd,CADL;MAEVG,iBAAiB,EAAE,CAFT;MAGVI,UAAU,EAAEX,KAAK,CAACI,OAAN,CAAc,IAAd;IAHF;EAdX,CAAP;AAoBH,CAvBD;;AAyBA,eAAe,SAASU,gBAAT,CAA0BC,KAA1B,EAAwD;EACnE,MAAM;IACFC,iBADE;IAEFC,QAFE;IAGFC,KAAK,EAAEC,SAHL;IAIF,GAAGC;EAJD,IAKFL,KALJ;EAOA,MAAMf,KAAK,GAAGF,QAAQ,EAAtB;EAEA,MAAMuB,MAAM,GAAGtB,SAAS,EAAxB;EAEA,MAAMuB,SAAS,GAAGzB,GAAG,CAAC,CAClBwB,MAAM,CAACpB,IADW,EAElBkB,SAFkB,CAAD,CAArB;EAKA,MAAMI,cAAc,GAAG3B,eAAe,CAACI,KAAD,EAAQ;IAC1CwB,QAAQ,EAAGC,UAAD,IAAgBA,UAAU,CAACC,OAAX,CAAmBC,QADH;IAE1CC,KAAK,EAAE5B,KAAK,CAAC6B,OAAN,CAAcC,IAAd,CAAmBC;EAFgB,CAAR,CAAtC;EAKA,MAAMC,UAAU,GAAGnC,GAAG,CAAC,CACnBwB,MAAM,CAACb,KADY,EAEnBe,cAFmB,CAAD,CAAtB;EAKA,oBACI,oBAAC,GAAD;IACI,KAAK,EAAED;EADX,GAEQF,UAFR,gBAII,oBAAC,IAAD;IACI,QAAQ,EAAEH,QADd;IAEI,KAAK,EAAEe;EAFX,EAJJ,EASKhB,iBAAiB,gBACd,oBAAC,MAAD;IACI,QAAQ,EAAEA,iBAAiB,CAACR,KADhC;IAEI,KAAK,EAAE,QAFX;IAGI,QAAQ,EAAEQ,iBAAiB,CAACiB,QAAlB,IAA8B,KAH5C;IAII,eAAe,EAAE,IAJrB;IAKI,OAAO,EAAEjB,iBAAiB,CAACkB,OAL/B;IAMI,IAAI,EAAE,OANV;IAOI,KAAK,EAAEb,MAAM,CAACR,YAPlB;IAQI,OAAO,EAAE;EARb,EADc,GAWd,IApBR,CADJ;AAwBH"}
|
|
@@ -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.38",
|
|
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": "9853f9d12d166e3894e3405eafd29e1e785e1040"
|
|
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 shouldApplyHorizontalPadding = useBreakpointUp('sm', 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
|
-
shouldApplyHorizontalPadding ? { paddingHorizontal: 8 } : undefined,
|
|
48
44
|
style,
|
|
49
45
|
]);
|
|
50
46
|
|
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'
|