@fountain-ui/core 1.12.1 → 1.14.1
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/CHANGELOG.md +32 -0
- package/build/commonjs/Accordion/Accordion.js +20 -10
- package/build/commonjs/Accordion/Accordion.js.map +1 -1
- package/build/commonjs/ButtonBase/ButtonBase.js +8 -1
- package/build/commonjs/ButtonBase/ButtonBase.js.map +1 -1
- package/build/commonjs/ButtonBase/useDisabledReaction/index.js +23 -0
- package/build/commonjs/ButtonBase/useDisabledReaction/index.js.map +1 -0
- package/build/commonjs/ButtonBase/useDisabledReaction/index.native.js +9 -0
- package/build/commonjs/ButtonBase/useDisabledReaction/index.native.js.map +1 -0
- package/build/commonjs/Chip/Chip.js +4 -4
- package/build/commonjs/Chip/Chip.js.map +1 -1
- package/build/commonjs/Snackbar/Snackbar.js +5 -1
- package/build/commonjs/Snackbar/Snackbar.js.map +1 -1
- package/build/commonjs/SnackbarContent/SnackbarContent.js +31 -4
- package/build/commonjs/SnackbarContent/SnackbarContent.js.map +1 -1
- package/build/commonjs/Tooltip/Tooltip.js +1 -0
- package/build/commonjs/Tooltip/Tooltip.js.map +1 -1
- package/build/commonjs/hooks/useCollapsibleAppBar.js +5 -5
- package/build/commonjs/hooks/useCollapsibleAppBar.js.map +1 -1
- package/build/module/Accordion/Accordion.js +6 -1
- package/build/module/Accordion/Accordion.js.map +1 -1
- package/build/module/ButtonBase/ButtonBase.js +4 -2
- package/build/module/ButtonBase/ButtonBase.js.map +1 -1
- package/build/module/ButtonBase/useDisabledReaction/index.js +12 -0
- package/build/module/ButtonBase/useDisabledReaction/index.js.map +1 -0
- package/build/module/ButtonBase/useDisabledReaction/index.native.js +2 -0
- package/build/module/ButtonBase/useDisabledReaction/index.native.js.map +1 -0
- package/build/module/Chip/Chip.js +3 -3
- package/build/module/Chip/Chip.js.map +1 -1
- package/build/module/Snackbar/Snackbar.js +5 -1
- package/build/module/Snackbar/Snackbar.js.map +1 -1
- package/build/module/SnackbarContent/SnackbarContent.js +29 -4
- package/build/module/SnackbarContent/SnackbarContent.js.map +1 -1
- package/build/module/Tooltip/Tooltip.js +1 -0
- package/build/module/Tooltip/Tooltip.js.map +1 -1
- package/build/module/hooks/useCollapsibleAppBar.js +1 -1
- package/build/module/hooks/useCollapsibleAppBar.js.map +1 -1
- package/build/typescript/ButtonBase/ButtonBase.d.ts +2 -0
- package/build/typescript/ButtonBase/useDisabledReaction/index.d.ts +2 -0
- package/build/typescript/ButtonBase/useDisabledReaction/index.native.d.ts +2 -0
- package/build/typescript/Slider/Slider.d.ts +1 -1
- package/build/typescript/Snackbar/SnackbarProps.d.ts +8 -0
- package/build/typescript/SnackbarContent/SnackbarContentProps.d.ts +8 -0
- package/package.json +4 -4
- package/src/Accordion/Accordion.tsx +7 -1
- package/src/ButtonBase/ButtonBase.tsx +5 -2
- package/src/ButtonBase/useDisabledReaction/index.native.ts +4 -0
- package/src/ButtonBase/useDisabledReaction/index.ts +15 -0
- package/src/Chip/Chip.tsx +4 -4
- package/src/Snackbar/Snackbar.tsx +7 -1
- package/src/Snackbar/SnackbarProps.ts +10 -0
- package/src/SnackbarContent/SnackbarContent.tsx +40 -3
- package/src/SnackbarContent/SnackbarContentProps.ts +10 -0
- package/src/Tooltip/Tooltip.tsx +4 -1
- package/src/hooks/useCollapsibleAppBar.ts +1 -1
package/CHANGELOG.md
CHANGED
|
@@ -3,6 +3,38 @@
|
|
|
3
3
|
All notable changes to this project will be documented in this file.
|
|
4
4
|
See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
|
|
5
5
|
|
|
6
|
+
## [1.14.1](https://github.com/tappytoon/tappytoon/compare/@fountain-ui/core@1.11.0...@fountain-ui/core@1.14.1) (2022-01-07)
|
|
7
|
+
|
|
8
|
+
**Note:** Version bump only for package @fountain-ui/core
|
|
9
|
+
|
|
10
|
+
|
|
11
|
+
|
|
12
|
+
|
|
13
|
+
|
|
14
|
+
# [1.14.0](https://github.com/tappytoon/tappytoon/compare/@fountain-ui/core@1.11.0...@fountain-ui/core@1.14.0) (2021-12-27)
|
|
15
|
+
|
|
16
|
+
**Note:** Version bump only for package @fountain-ui/core
|
|
17
|
+
|
|
18
|
+
|
|
19
|
+
|
|
20
|
+
|
|
21
|
+
|
|
22
|
+
## [1.13.1](https://github.com/tappytoon/tappytoon/compare/@fountain-ui/core@1.11.0...@fountain-ui/core@1.13.1) (2021-11-15)
|
|
23
|
+
|
|
24
|
+
**Note:** Version bump only for package @fountain-ui/core
|
|
25
|
+
|
|
26
|
+
|
|
27
|
+
|
|
28
|
+
|
|
29
|
+
|
|
30
|
+
# [1.13.0](https://github.com/tappytoon/tappytoon/compare/@fountain-ui/core@1.11.0...@fountain-ui/core@1.13.0) (2021-11-10)
|
|
31
|
+
|
|
32
|
+
**Note:** Version bump only for package @fountain-ui/core
|
|
33
|
+
|
|
34
|
+
|
|
35
|
+
|
|
36
|
+
|
|
37
|
+
|
|
6
38
|
## [1.12.1](https://github.com/tappytoon/tappytoon/compare/@fountain-ui/core@1.11.0...@fountain-ui/core@1.12.1) (2021-11-08)
|
|
7
39
|
|
|
8
40
|
**Note:** Version bump only for package @fountain-ui/core
|
|
@@ -11,7 +11,17 @@ var _reactNativeReanimated = _interopRequireDefault(require("react-native-reanim
|
|
|
11
11
|
|
|
12
12
|
var _icons = require("../internal/icons");
|
|
13
13
|
|
|
14
|
-
var
|
|
14
|
+
var _ButtonBase = _interopRequireDefault(require("../ButtonBase"));
|
|
15
|
+
|
|
16
|
+
var _Column = _interopRequireDefault(require("../Column"));
|
|
17
|
+
|
|
18
|
+
var _Divider = _interopRequireDefault(require("../Divider"));
|
|
19
|
+
|
|
20
|
+
var _Spacer = _interopRequireDefault(require("../Spacer"));
|
|
21
|
+
|
|
22
|
+
var _Typography = _interopRequireDefault(require("../Typography"));
|
|
23
|
+
|
|
24
|
+
var _styles = require("../styles");
|
|
15
25
|
|
|
16
26
|
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
17
27
|
|
|
@@ -24,7 +34,7 @@ const ANIMATION_OPTION = {
|
|
|
24
34
|
};
|
|
25
35
|
|
|
26
36
|
const useStyles = function () {
|
|
27
|
-
const theme = (0,
|
|
37
|
+
const theme = (0, _styles.useTheme)();
|
|
28
38
|
return {
|
|
29
39
|
root: {
|
|
30
40
|
flexDirection: 'row',
|
|
@@ -57,19 +67,19 @@ function Accordion(props) {
|
|
|
57
67
|
rotate.value = _reactNativeReanimated.default.withTiming(!isExpanded ? 180 : 0, ANIMATION_OPTION);
|
|
58
68
|
};
|
|
59
69
|
|
|
60
|
-
return /*#__PURE__*/_react.default.createElement(
|
|
70
|
+
return /*#__PURE__*/_react.default.createElement(_Column.default, null, /*#__PURE__*/_react.default.createElement(_ButtonBase.default, {
|
|
61
71
|
onPress: onPress,
|
|
62
72
|
style: styles.root
|
|
63
|
-
}, LeftIcon ? /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, LeftIcon, /*#__PURE__*/_react.default.createElement(
|
|
73
|
+
}, LeftIcon ? /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, LeftIcon, /*#__PURE__*/_react.default.createElement(_Spacer.default, {
|
|
64
74
|
size: 2
|
|
65
|
-
})) : null, /*#__PURE__*/_react.default.createElement(
|
|
75
|
+
})) : null, /*#__PURE__*/_react.default.createElement(_Typography.default, {
|
|
66
76
|
children: title,
|
|
67
77
|
variant: titleVariant
|
|
68
|
-
}), /*#__PURE__*/_react.default.createElement(
|
|
78
|
+
}), /*#__PURE__*/_react.default.createElement(_Spacer.default, {
|
|
69
79
|
flex: 1
|
|
70
|
-
}), /*#__PURE__*/_react.default.createElement(
|
|
80
|
+
}), /*#__PURE__*/_react.default.createElement(_Spacer.default, {
|
|
71
81
|
size: 2
|
|
72
|
-
}), /*#__PURE__*/_react.default.createElement(
|
|
82
|
+
}), /*#__PURE__*/_react.default.createElement(_Column.default, null, /*#__PURE__*/_react.default.createElement(_reactNativeReanimated.default.View, {
|
|
73
83
|
style: animatedChevronDownStyles
|
|
74
84
|
}, RightIcon ? RightIcon :
|
|
75
85
|
/*#__PURE__*/
|
|
@@ -77,10 +87,10 @@ function Accordion(props) {
|
|
|
77
87
|
_react.default.createElement(_icons.ChevronDown, {
|
|
78
88
|
height: 24,
|
|
79
89
|
width: 24
|
|
80
|
-
})))), isExpanded ? /*#__PURE__*/_react.default.isValidElement(content) ? content : /*#__PURE__*/_react.default.createElement(
|
|
90
|
+
})))), isExpanded ? /*#__PURE__*/_react.default.isValidElement(content) ? content : /*#__PURE__*/_react.default.createElement(_Typography.default, {
|
|
81
91
|
children: content,
|
|
82
92
|
color: 'textSecondary',
|
|
83
93
|
variant: 'body2'
|
|
84
|
-
}) : null, /*#__PURE__*/_react.default.createElement(
|
|
94
|
+
}) : null, /*#__PURE__*/_react.default.createElement(_Divider.default, null));
|
|
85
95
|
}
|
|
86
96
|
//# sourceMappingURL=Accordion.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["Accordion.tsx"],"names":["ANIMATION_OPTION","duration","useStyles","theme","root","flexDirection","paddingVertical","spacing","Accordion","props","content","LeftIcon","RightIcon","title","titleVariant","styles","isExpanded","setIsExpanded","rotate","Animated","useSharedValue","animatedChevronDownStyles","useAnimatedStyle","transform","value","onPress","prev","withTiming","isValidElement"],"mappings":";;;;;;;AAAA;;AACA;;AAEA;;AACA;;;;;;;;
|
|
1
|
+
{"version":3,"sources":["Accordion.tsx"],"names":["ANIMATION_OPTION","duration","useStyles","theme","root","flexDirection","paddingVertical","spacing","Accordion","props","content","LeftIcon","RightIcon","title","titleVariant","styles","isExpanded","setIsExpanded","rotate","Animated","useSharedValue","animatedChevronDownStyles","useAnimatedStyle","transform","value","onPress","prev","withTiming","isValidElement"],"mappings":";;;;;;;AAAA;;AACA;;AAEA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;;;;;;;AAMA,MAAMA,gBAAgB,GAAG;AAAEC,EAAAA,QAAQ,EAAE;AAAZ,CAAzB;;AAEA,MAAMC,SAAqC,GAAG,YAA6B;AACvE,QAAMC,KAAK,GAAG,uBAAd;AAEA,SAAO;AACHC,IAAAA,IAAI,EAAE;AACFC,MAAAA,aAAa,EAAE,KADb;AAEFC,MAAAA,eAAe,EAAEH,KAAK,CAACI,OAAN,CAAc,CAAd;AAFf;AADH,GAAP;AAMH,CATD;;AAWe,SAASC,SAAT,CAAmBC,KAAnB,EAA0C;AACrD,QAAM;AACFC,IAAAA,OADE;AAEFC,IAAAA,QAFE;AAGFC,IAAAA,SAHE;AAIFC,IAAAA,KAJE;AAKFC,IAAAA,YAAY,GAAG;AALb,MAMFL,KANJ;AAQA,QAAMM,MAAM,GAAGb,SAAS,EAAxB;AAEA,QAAM,CAACc,UAAD,EAAaC,aAAb,IAA8B,qBAAS,KAAT,CAApC;;AACA,QAAMC,MAAM,GAAGC,+BAASC,cAAT,CAAwB,CAAxB,CAAf;;AAEA,QAAMC,yBAAyB,GAAGF,+BAASG,gBAAT,CAA0B,OAAO;AAC/DC,IAAAA,SAAS,EAAE,CAAC;AAAEL,MAAAA,MAAM,EAAG,GAAEA,MAAM,CAACM,KAAM;AAA1B,KAAD;AADoD,GAAP,CAA1B,CAAlC;;AAIA,QAAMC,OAAO,GAAG,MAAM;AAClBR,IAAAA,aAAa,CAACS,IAAI,IAAI,CAACA,IAAV,CAAb;AACAR,IAAAA,MAAM,CAACM,KAAP,GAAeL,+BAASQ,UAAT,CAAoB,CAACX,UAAD,GAAc,GAAd,GAAoB,CAAxC,EAA2ChB,gBAA3C,CAAf;AACH,GAHD;;AAKA,sBACI,6BAAC,eAAD,qBACI,6BAAC,mBAAD;AACI,IAAA,OAAO,EAAEyB,OADb;AAEI,IAAA,KAAK,EAAEV,MAAM,CAACX;AAFlB,KAIKO,QAAQ,gBACL,6BAAC,cAAD,CAAO,QAAP,QACKA,QADL,eAEI,6BAAC,eAAD;AAAQ,IAAA,IAAI,EAAE;AAAd,IAFJ,CADK,GAKL,IATR,eAWI,6BAAC,mBAAD;AACI,IAAA,QAAQ,EAAEE,KADd;AAEI,IAAA,OAAO,EAAEC;AAFb,IAXJ,eAgBI,6BAAC,eAAD;AAAQ,IAAA,IAAI,EAAE;AAAd,IAhBJ,eAkBI,6BAAC,eAAD;AAAQ,IAAA,IAAI,EAAE;AAAd,IAlBJ,eAoBI,6BAAC,eAAD,qBACI,6BAAC,8BAAD,CAAU,IAAV;AAAe,IAAA,KAAK,EAAEO;AAAtB,KACKT,SAAS,GAAGA,SAAH;AAAA;AACN;AACA,+BAAC,kBAAD;AAAiB,IAAA,MAAM,EAAE,EAAzB;AAA6B,IAAA,KAAK,EAAE;AAApC,IAHR,CADJ,CApBJ,CADJ,EA+BKI,UAAU,GACP,4BAAMY,cAAN,CAAqBlB,OAArB,IAAiCA,OAAjC,gBACI,6BAAC,mBAAD;AACI,IAAA,QAAQ,EAAEA,OADd;AAEI,IAAA,KAAK,EAAE,eAFX;AAGI,IAAA,OAAO,EAAE;AAHb,IAFG,GAQP,IAvCR,eAyCI,6BAAC,gBAAD,OAzCJ,CADJ;AA6CH","sourcesContent":["import React, { useState } from 'react';\nimport Animated from 'react-native-reanimated';\nimport { NamedStylesStringUnion, UseStyles } from '@fountain-ui/styles';\nimport { ChevronDown as ChevronDownIcon } from '../internal/icons';\nimport ButtonBase from '../ButtonBase';\nimport Column from '../Column';\nimport Divider from '../Divider';\nimport Spacer from '../Spacer';\nimport Typography from '../Typography';\nimport { useTheme } from '../styles';\n\nimport AccordionProps from './AccordionProps';\n\ntype AccordionStyles = NamedStylesStringUnion<'root'>;\n\nconst ANIMATION_OPTION = { duration: 250 };\n\nconst useStyles: UseStyles<AccordionStyles> = function (): AccordionStyles {\n const theme = useTheme();\n\n return {\n root: {\n flexDirection: 'row',\n paddingVertical: theme.spacing(3),\n },\n };\n};\n\nexport default function Accordion(props: AccordionProps) {\n const {\n content,\n LeftIcon,\n RightIcon,\n title,\n titleVariant = 'subtitle2',\n } = props;\n\n const styles = useStyles();\n\n const [isExpanded, setIsExpanded] = useState(false);\n const rotate = Animated.useSharedValue(0);\n\n const animatedChevronDownStyles = Animated.useAnimatedStyle(() => ({\n transform: [{ rotate: `${rotate.value}deg` }],\n }));\n\n const onPress = () => {\n setIsExpanded(prev => !prev);\n rotate.value = Animated.withTiming(!isExpanded ? 180 : 0, ANIMATION_OPTION);\n };\n\n return (\n <Column>\n <ButtonBase\n onPress={onPress}\n style={styles.root}\n >\n {LeftIcon ? (\n <React.Fragment>\n {LeftIcon}\n <Spacer size={2}/>\n </React.Fragment>\n ) : null}\n\n <Typography\n children={title}\n variant={titleVariant}\n />\n\n <Spacer flex={1}/>\n\n <Spacer size={2}/>\n\n <Column>\n <Animated.View style={animatedChevronDownStyles}>\n {RightIcon ? RightIcon : (\n // @ts-ignore\n <ChevronDownIcon height={24} width={24}/>\n )}\n </Animated.View>\n </Column>\n </ButtonBase>\n\n {isExpanded ? (\n React.isValidElement(content) ? (content) : (\n <Typography\n children={content}\n color={'textSecondary'}\n variant={'body2'}\n />\n )\n ) : null}\n\n <Divider/>\n </Column>\n );\n}\n"]}
|
|
@@ -4,6 +4,7 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
4
4
|
value: true
|
|
5
5
|
});
|
|
6
6
|
exports.default = ButtonBase;
|
|
7
|
+
exports.DISABLED_OPACITY = exports.ORIGINAL_OPACITY = void 0;
|
|
7
8
|
|
|
8
9
|
var _react = _interopRequireDefault(require("react"));
|
|
9
10
|
|
|
@@ -15,13 +16,17 @@ var _animated = require("../animated");
|
|
|
15
16
|
|
|
16
17
|
var _styles = require("../styles");
|
|
17
18
|
|
|
19
|
+
var _useDisabledReaction = _interopRequireDefault(require("./useDisabledReaction"));
|
|
20
|
+
|
|
18
21
|
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
19
22
|
|
|
20
23
|
function _extends() { _extends = Object.assign || 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); }
|
|
21
24
|
|
|
22
25
|
const ORIGINAL_OPACITY = 1;
|
|
23
|
-
|
|
26
|
+
exports.ORIGINAL_OPACITY = ORIGINAL_OPACITY;
|
|
24
27
|
const DISABLED_OPACITY = .3;
|
|
28
|
+
exports.DISABLED_OPACITY = DISABLED_OPACITY;
|
|
29
|
+
const ACTIVE_OPACITY = .65;
|
|
25
30
|
const ORIGINAL_SCALE = 1;
|
|
26
31
|
const MINIFIED_SCALE = .96;
|
|
27
32
|
const animationTimingConfig = {
|
|
@@ -64,6 +69,8 @@ function ButtonBase(props) {
|
|
|
64
69
|
}]
|
|
65
70
|
}));
|
|
66
71
|
|
|
72
|
+
(0, _useDisabledReaction.default)(disabled, opacity);
|
|
73
|
+
|
|
67
74
|
const startAnimation = (pressIn, isHovered = false) => {
|
|
68
75
|
if (pressEffect === 'none') {
|
|
69
76
|
return;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["ButtonBase.tsx"],"names":["ORIGINAL_OPACITY","
|
|
1
|
+
{"version":3,"sources":["ButtonBase.tsx"],"names":["ORIGINAL_OPACITY","DISABLED_OPACITY","ACTIVE_OPACITY","ORIGINAL_SCALE","MINIFIED_SCALE","animationTimingConfig","duration","styles","StyleSheet","create","disabled","opacity","transform","scale","ButtonBase","props","children","disableThrottle","onPress","pressEffect","style","throttleMillis","otherProps","handlePress","periodMillis","callback","Animated","useSharedValue","animatedStyle","useAnimatedStyle","value","startAnimation","pressIn","isHovered","withTiming","withDelay","undefined","hovered"],"mappings":"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","sourcesContent":["import React from 'react';\nimport Animated from 'react-native-reanimated';\nimport { useThrottle } from '../hooks';\nimport { AnimatedPressable } from '../animated';\nimport { StyleSheet } from '../styles';\nimport type ButtonBaseProps from './ButtonBaseProps';\nimport useDisabledReaction from './useDisabledReaction';\n\nexport const ORIGINAL_OPACITY = 1;\nexport const DISABLED_OPACITY = .3;\nconst ACTIVE_OPACITY = .65;\n\nconst ORIGINAL_SCALE = 1;\nconst MINIFIED_SCALE = .96;\n\nconst animationTimingConfig: Animated.WithTimingConfig = { duration: 150 };\n\nconst styles = StyleSheet.create({\n disabled: {\n opacity: DISABLED_OPACITY,\n transform: [{ scale: ORIGINAL_SCALE }],\n },\n});\n\nexport default function ButtonBase(props: ButtonBaseProps) {\n const {\n children,\n disabled = false,\n disableThrottle = false,\n onPress,\n pressEffect = 'opacity',\n style,\n throttleMillis = 650,\n ...otherProps\n } = props;\n\n const handlePress = useThrottle({\n periodMillis: disableThrottle ? 0 : throttleMillis,\n callback: onPress,\n });\n\n const opacity = Animated.useSharedValue(ORIGINAL_OPACITY);\n const scale = Animated.useSharedValue(ORIGINAL_SCALE);\n\n const animatedStyle = Animated.useAnimatedStyle(() => ({\n opacity: opacity.value,\n transform: [{ scale: scale.value }],\n }));\n\n useDisabledReaction(disabled, opacity);\n\n const startAnimation = (pressIn: boolean, isHovered: boolean = false) => {\n if (pressEffect === 'none') {\n return;\n }\n\n if (pressEffect === 'opacity') {\n if (pressIn) {\n opacity.value = ACTIVE_OPACITY;\n } else {\n opacity.value = Animated.withTiming(ORIGINAL_OPACITY, animationTimingConfig);\n }\n } else if (!isHovered) {\n if (pressIn) {\n scale.value = Animated.withDelay(\n 100,\n Animated.withTiming(MINIFIED_SCALE, animationTimingConfig),\n );\n } else {\n scale.value = Animated.withTiming(ORIGINAL_SCALE, animationTimingConfig);\n }\n }\n };\n\n return (\n <AnimatedPressable\n disabled={disabled}\n onPress={handlePress}\n onPressIn={() => startAnimation(true)}\n onPressOut={() => startAnimation(false)}\n style={[\n animatedStyle,\n disabled ? styles.disabled : undefined,\n style,\n ]}\n {...otherProps}\n >\n {typeof children !== 'function' ? (\n ({ hovered }) => {\n if (hovered !== undefined && !disabled) {\n startAnimation(hovered, true);\n }\n\n return children;\n }\n ) : children}\n </AnimatedPressable>\n );\n};\n"]}
|
|
@@ -0,0 +1,23 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
Object.defineProperty(exports, "__esModule", {
|
|
4
|
+
value: true
|
|
5
|
+
});
|
|
6
|
+
exports.default = useDisabledReaction;
|
|
7
|
+
|
|
8
|
+
var _reactNativeReanimated = _interopRequireDefault(require("react-native-reanimated"));
|
|
9
|
+
|
|
10
|
+
var _ButtonBase = require("../ButtonBase");
|
|
11
|
+
|
|
12
|
+
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
13
|
+
|
|
14
|
+
function useDisabledReaction(disabled, opacity) {
|
|
15
|
+
_reactNativeReanimated.default.useAnimatedReaction(() => disabled, result => {
|
|
16
|
+
if (result) {
|
|
17
|
+
opacity.value = _ButtonBase.DISABLED_OPACITY;
|
|
18
|
+
} else {
|
|
19
|
+
opacity.value = _ButtonBase.ORIGINAL_OPACITY;
|
|
20
|
+
}
|
|
21
|
+
});
|
|
22
|
+
}
|
|
23
|
+
//# sourceMappingURL=index.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["index.ts"],"names":["useDisabledReaction","disabled","opacity","Animated","useAnimatedReaction","result","value","DISABLED_OPACITY","ORIGINAL_OPACITY"],"mappings":";;;;;;;AAAA;;AACA;;;;AAEe,SAASA,mBAAT,CAA6BC,QAA7B,EAAgDC,OAAhD,EAAuF;AAClGC,iCAASC,mBAAT,CACI,MAAMH,QADV,EAEKI,MAAD,IAAY;AACR,QAAIA,MAAJ,EAAY;AACRH,MAAAA,OAAO,CAACI,KAAR,GAAgBC,4BAAhB;AACH,KAFD,MAEO;AACHL,MAAAA,OAAO,CAACI,KAAR,GAAgBE,4BAAhB;AACH;AACJ,GARL;AAUH","sourcesContent":["import Animated from 'react-native-reanimated';\nimport { DISABLED_OPACITY, ORIGINAL_OPACITY } from '../ButtonBase';\n\nexport default function useDisabledReaction(disabled: boolean, opacity: Animated.SharedValue<number>) {\n Animated.useAnimatedReaction(\n () => disabled,\n (result) => {\n if (result) {\n opacity.value = DISABLED_OPACITY;\n } else {\n opacity.value = ORIGINAL_OPACITY;\n }\n },\n );\n}"]}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["index.native.ts"],"names":["useDisabledReaction","disabled","opacity"],"mappings":";;;;;;;AAEe,SAASA,mBAAT,CAA6BC,QAA7B,EAAgDC,OAAhD,EAAuF,CACrG","sourcesContent":["import Animated from 'react-native-reanimated';\n\nexport default function useDisabledReaction(disabled: boolean, opacity: Animated.SharedValue<number>) {\n}"]}
|
|
@@ -11,7 +11,7 @@ var _reactNative = require("react-native");
|
|
|
11
11
|
|
|
12
12
|
var _styles = require("../styles");
|
|
13
13
|
|
|
14
|
-
var
|
|
14
|
+
var _ButtonBase = _interopRequireDefault(require("../ButtonBase"));
|
|
15
15
|
|
|
16
16
|
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
17
17
|
|
|
@@ -51,7 +51,7 @@ function Chip(props) {
|
|
|
51
51
|
outlined: {
|
|
52
52
|
backgroundColor: theme.palette.paper.default,
|
|
53
53
|
borderColor: theme.palette.border,
|
|
54
|
-
borderWidth:
|
|
54
|
+
borderWidth: 2
|
|
55
55
|
},
|
|
56
56
|
filled: {
|
|
57
57
|
backgroundColor: theme.palette.paper.grey
|
|
@@ -59,7 +59,7 @@ function Chip(props) {
|
|
|
59
59
|
bold: {
|
|
60
60
|
backgroundColor: theme.palette.paper.grey,
|
|
61
61
|
borderColor: theme.palette.primary.main,
|
|
62
|
-
borderWidth:
|
|
62
|
+
borderWidth: 2
|
|
63
63
|
}
|
|
64
64
|
};
|
|
65
65
|
const chipStyle = (0, _styles.css)([styles.root, variantStyleMap[variant], styleProp]);
|
|
@@ -84,7 +84,7 @@ function Chip(props) {
|
|
|
84
84
|
size: ICON_SIZE,
|
|
85
85
|
color: fontColor
|
|
86
86
|
});
|
|
87
|
-
return /*#__PURE__*/_react.default.createElement(
|
|
87
|
+
return /*#__PURE__*/_react.default.createElement(_ButtonBase.default, _extends({
|
|
88
88
|
onPress: onPress,
|
|
89
89
|
style: chipStyle
|
|
90
90
|
}, otherProps), startIcon, /*#__PURE__*/_react.default.createElement(_reactNative.Text, {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["Chip.tsx"],"names":["ICON_SIZE","useStyles","theme","root","alignItems","borderRadius","flexDirection","height","justifyContent","paddingLeft","spacing","paddingRight","Chip","props","children","endIcon","endIconProp","onPress","startIcon","startIconProp","style","styleProp","variant","otherProps","styles","fontColor","palette","tertiary","main","primary","variantStyleMap","outlined","backgroundColor","paper","default","borderColor","border","borderWidth","filled","grey","bold","chipStyle","fontStyle","selector","typo","subtitle2","color","textMarginSize","textMarginStyle","marginLeft","marginRight","undefined","textStyle","textAlign","size"],"mappings":"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
|
|
1
|
+
{"version":3,"sources":["Chip.tsx"],"names":["ICON_SIZE","useStyles","theme","root","alignItems","borderRadius","flexDirection","height","justifyContent","paddingLeft","spacing","paddingRight","Chip","props","children","endIcon","endIconProp","onPress","startIcon","startIconProp","style","styleProp","variant","otherProps","styles","fontColor","palette","tertiary","main","primary","variantStyleMap","outlined","backgroundColor","paper","default","borderColor","border","borderWidth","filled","grey","bold","chipStyle","fontStyle","selector","typo","subtitle2","color","textMarginSize","textMarginStyle","marginLeft","marginRight","undefined","textStyle","textAlign","size"],"mappings":"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","sourcesContent":["import React from 'react';\nimport { Text } from 'react-native';\nimport { NamedStylesStringUnion, UseStyles } from '@fountain-ui/styles';\nimport { cloneSvgIcon, createFontStyle, css, useTheme } from '../styles';\nimport ButtonBase from '../ButtonBase';\nimport type ChipProps from './ChipProps';\n\ntype ChipStyles = NamedStylesStringUnion<'root'>;\n\nconst ICON_SIZE = 'tiny';\n\nconst useStyles: UseStyles<ChipStyles> = function (): ChipStyles {\n const theme = useTheme();\n\n return {\n root: {\n alignItems: 'center',\n borderRadius: 20,\n flexDirection: 'row',\n height: 32,\n justifyContent: 'center',\n paddingLeft: theme.spacing(2),\n paddingRight: theme.spacing(2),\n },\n };\n};\n\nexport default function Chip(props: ChipProps) {\n const {\n children,\n endIcon: endIconProp,\n onPress,\n startIcon: startIconProp,\n style: styleProp,\n variant = 'outlined',\n ...otherProps\n } = props;\n\n const theme = useTheme();\n const styles = useStyles();\n\n const fontColor = variant === 'outlined'\n ? theme.palette.tertiary.main\n : theme.palette.primary.main;\n\n const variantStyleMap = {\n outlined: {\n backgroundColor: theme.palette.paper.default,\n borderColor: theme.palette.border,\n borderWidth: 2,\n },\n filled: {\n backgroundColor: theme.palette.paper.grey,\n },\n bold: {\n backgroundColor: theme.palette.paper.grey,\n borderColor: theme.palette.primary.main,\n borderWidth: 2,\n },\n };\n\n const chipStyle = css([\n styles.root,\n variantStyleMap[variant],\n styleProp,\n ]);\n\n const fontStyle = createFontStyle(theme, {\n selector: (typo) => typo.subtitle2,\n color: fontColor,\n });\n\n const textMarginSize = theme.spacing(1);\n const textMarginStyle = startIconProp\n ? { marginLeft: textMarginSize }\n : endIconProp\n ? { marginRight: textMarginSize }\n : undefined;\n\n const textStyle = css([\n fontStyle,\n textMarginStyle,\n { textAlign: 'center' },\n ]);\n\n const startIcon = cloneSvgIcon(startIconProp, { size: ICON_SIZE, color: fontColor });\n const endIcon = cloneSvgIcon(endIconProp, { size: ICON_SIZE, color: fontColor });\n\n return (\n <ButtonBase\n onPress={onPress}\n style={chipStyle}\n {...otherProps}\n >\n {startIcon}\n\n <Text\n children={children}\n style={textStyle}\n />\n\n {endIcon}\n </ButtonBase>\n );\n}\n"]}
|
|
@@ -43,10 +43,12 @@ const useStyles = function () {
|
|
|
43
43
|
|
|
44
44
|
function Snackbar(props) {
|
|
45
45
|
const {
|
|
46
|
+
actionLabel,
|
|
46
47
|
animatedY,
|
|
47
48
|
autoHideDuration = null,
|
|
48
49
|
children,
|
|
49
50
|
message,
|
|
51
|
+
onActionPress,
|
|
50
52
|
onClose,
|
|
51
53
|
style,
|
|
52
54
|
visible = false,
|
|
@@ -95,7 +97,9 @@ function Snackbar(props) {
|
|
|
95
97
|
onEnter: () => setExited(false),
|
|
96
98
|
onExited: () => setExited(true)
|
|
97
99
|
}, children ? children : /*#__PURE__*/_react.default.createElement(_SnackbarContent.default, {
|
|
98
|
-
|
|
100
|
+
actionLabel: actionLabel,
|
|
101
|
+
message: message,
|
|
102
|
+
onActionPress: onActionPress
|
|
99
103
|
})));
|
|
100
104
|
}
|
|
101
105
|
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["Snackbar.tsx"],"names":["useStyles","theme","insets","root","alignSelf","bottom","spacing","maxWidth","paddingBottom","paddingHorizontal","position","width","zIndex","Snackbar","props","animatedY","autoHideDuration","children","message","onClose","style","visible","otherProps","autoHideTimer","React","useRef","clearAutoHideTimeout","current","clearTimeout","useEffect","setTimeout","styles","exited","setExited","useState"],"mappings":";;;;;;;AAAA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;;;;;AAKA,MAAMA,SAAoC,GAAG,YAA4B;AACrE,QAAMC,KAAK,GAAG,wBAAd;AACA,QAAMC,MAAM,GAAG,oDAAf;AAEA,SAAO;AACHC,IAAAA,IAAI,EAAE;AACFC,MAAAA,SAAS,EAAE,QADT;AAEFC,MAAAA,MAAM,EAAEJ,KAAK,CAACK,OAAN,CAAc,CAAd,CAFN;AAGFC,MAAAA,QAAQ,EAAE,GAHR;AAIFC,MAAAA,aAAa,EAAEN,MAAM,CAACG,MAJpB;AAKFI,MAAAA,iBAAiB,EAAER,KAAK,CAACK,OAAN,CAAc,CAAd,CALjB;AAMFI,MAAAA,QAAQ,EAAE,UANR;AAOFC,MAAAA,KAAK,EAAE,MAPL;AAQF;AACAC,MAAAA,MAAM,EAAE;AATN;AADH,GAAP;AAaH,CAjBD;;AAmBe,SAASC,QAAT,CAAkBC,KAAlB,EAAwC;AACnD,QAAM;AACFC,IAAAA,
|
|
1
|
+
{"version":3,"sources":["Snackbar.tsx"],"names":["useStyles","theme","insets","root","alignSelf","bottom","spacing","maxWidth","paddingBottom","paddingHorizontal","position","width","zIndex","Snackbar","props","actionLabel","animatedY","autoHideDuration","children","message","onActionPress","onClose","style","visible","otherProps","autoHideTimer","React","useRef","clearAutoHideTimeout","current","clearTimeout","useEffect","setTimeout","styles","exited","setExited","useState"],"mappings":";;;;;;;AAAA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;;;;;AAKA,MAAMA,SAAoC,GAAG,YAA4B;AACrE,QAAMC,KAAK,GAAG,wBAAd;AACA,QAAMC,MAAM,GAAG,oDAAf;AAEA,SAAO;AACHC,IAAAA,IAAI,EAAE;AACFC,MAAAA,SAAS,EAAE,QADT;AAEFC,MAAAA,MAAM,EAAEJ,KAAK,CAACK,OAAN,CAAc,CAAd,CAFN;AAGFC,MAAAA,QAAQ,EAAE,GAHR;AAIFC,MAAAA,aAAa,EAAEN,MAAM,CAACG,MAJpB;AAKFI,MAAAA,iBAAiB,EAAER,KAAK,CAACK,OAAN,CAAc,CAAd,CALjB;AAMFI,MAAAA,QAAQ,EAAE,UANR;AAOFC,MAAAA,KAAK,EAAE,MAPL;AAQF;AACAC,MAAAA,MAAM,EAAE;AATN;AADH,GAAP;AAaH,CAjBD;;AAmBe,SAASC,QAAT,CAAkBC,KAAlB,EAAwC;AACnD,QAAM;AACFC,IAAAA,WADE;AAEFC,IAAAA,SAFE;AAGFC,IAAAA,gBAAgB,GAAG,IAHjB;AAIFC,IAAAA,QAJE;AAKFC,IAAAA,OALE;AAMFC,IAAAA,aANE;AAOFC,IAAAA,OAPE;AAQFC,IAAAA,KARE;AASFC,IAAAA,OAAO,GAAG,KATR;AAUF,OAAGC;AAVD,MAWFV,KAXJ;;AAaA,QAAMW,aAAa,GAAGC,eAAMC,MAAN,CAA4B,IAA5B,CAAtB;;AAEA,QAAMC,oBAAoB,GAAG,MAAM;AAC/B,QAAIH,aAAa,CAACI,OAAd,KAA0B,IAA9B,EAAoC;AAChCC,MAAAA,YAAY,CAACL,aAAa,CAACI,OAAf,CAAZ;AACH;AACJ,GAJD;;AAMAH,iBAAMK,SAAN,CAAgB,MAAM;AAClB,WAAO,MAAM;AACTH,MAAAA,oBAAoB;AACvB,KAFD;AAGH,GAJD,EAIG,EAJH;;AAMAF,iBAAMK,SAAN,CAAgB,MAAM;AAClB,QAAIR,OAAO,IAAIN,gBAAgB,KAAK,IAApC,EAA0C;AACtCW,MAAAA,oBAAoB,GADkB,CAGtC;;AACAH,MAAAA,aAAa,CAACI,OAAd,GAAwBG,UAAU,CAAC,MAAM;AACrC,YAAIX,OAAJ,EAAa;AACTA,UAAAA,OAAO;AACV;AACJ,OAJiC,EAI/BJ,gBAJ+B,CAAlC;AAKH;AACJ,GAXD,EAWG,CAACM,OAAD,EAAUN,gBAAV,EAA4BI,OAA5B,CAXH;;AAaA,QAAMY,MAAM,GAAGjC,SAAS,EAAxB;;AAEA,QAAM,CAACkC,MAAD,EAASC,SAAT,IAAsBT,eAAMU,QAAN,CAAe,IAAf,CAA5B;;AAEA,MAAI,CAACb,OAAD,IAAYW,MAAhB,EAAwB;AACpB,WAAO,IAAP;AACH;;AAED,sBACI,6BAAC,iBAAD;AACI,IAAA,KAAK,EAAE,iBAAI,CACPD,MAAM,CAAC9B,IADA,EAEPmB,KAFO,CAAJ;AADX,KAKQE,UALR,gBAOI,6BAAC,cAAD;AACI,IAAA,SAAS,EAAER,SADf;AAEI,IAAA,MAAM,EAAEO,OAFZ;AAGI,IAAA,OAAO,EAAE,MAAMY,SAAS,CAAC,KAAD,CAH5B;AAII,IAAA,QAAQ,EAAE,MAAMA,SAAS,CAAC,IAAD;AAJ7B,KAMKjB,QAAQ,GAAGA,QAAH,gBACL,6BAAC,wBAAD;AACI,IAAA,WAAW,EAAEH,WADjB;AAEI,IAAA,OAAO,EAAEI,OAFb;AAGI,IAAA,aAAa,EAAEC;AAHnB,IAPR,CAPJ,CADJ;AAwBH;;AAAA","sourcesContent":["import React from 'react';\nimport { View } from 'react-native';\nimport { useSafeAreaInsets } from 'react-native-safe-area-context';\nimport { css, NamedStylesStringUnion, UseStyles } from '@fountain-ui/styles';\nimport Slide from '../Slide';\nimport SnackbarContent from '../SnackbarContent';\nimport { useTheme } from '../styles';\nimport type SnackbarProps from './SnackbarProps';\n\ntype SnackBarStyles = NamedStylesStringUnion<'root'>;\n\nconst useStyles: UseStyles<SnackBarStyles> = function (): SnackBarStyles {\n const theme = useTheme();\n const insets = useSafeAreaInsets();\n\n return {\n root: {\n alignSelf: 'center',\n bottom: theme.spacing(2),\n maxWidth: 480,\n paddingBottom: insets.bottom,\n paddingHorizontal: theme.spacing(2),\n position: 'absolute',\n width: '100%',\n // TODO: Need to remove zIndex.\n zIndex: 32,\n },\n };\n};\n\nexport default function Snackbar(props: SnackbarProps) {\n const {\n actionLabel,\n animatedY,\n autoHideDuration = null,\n children,\n message,\n onActionPress,\n onClose,\n style,\n visible = false,\n ...otherProps\n } = props;\n\n const autoHideTimer = React.useRef<number | null>(null);\n\n const clearAutoHideTimeout = () => {\n if (autoHideTimer.current !== null) {\n clearTimeout(autoHideTimer.current);\n }\n };\n\n React.useEffect(() => {\n return () => {\n clearAutoHideTimeout();\n };\n }, []);\n\n React.useEffect(() => {\n if (visible && autoHideDuration !== null) {\n clearAutoHideTimeout();\n\n // @ts-ignore\n autoHideTimer.current = setTimeout(() => {\n if (onClose) {\n onClose();\n }\n }, autoHideDuration);\n }\n }, [visible, autoHideDuration, onClose]);\n\n const styles = useStyles();\n\n const [exited, setExited] = React.useState(true);\n\n if (!visible && exited) {\n return null;\n }\n\n return (\n <View\n style={css([\n styles.root,\n style,\n ])}\n {...otherProps}\n >\n <Slide\n animatedY={animatedY}\n appear={visible}\n onEnter={() => setExited(false)}\n onExited={() => setExited(true)}\n >\n {children ? children : (\n <SnackbarContent\n actionLabel={actionLabel}\n message={message}\n onActionPress={onActionPress}\n />\n )}\n </Slide>\n </View>\n );\n};\n"]}
|
|
@@ -13,8 +13,12 @@ var _utils = require("@fountain-ui/utils");
|
|
|
13
13
|
|
|
14
14
|
var _styles = require("../styles");
|
|
15
15
|
|
|
16
|
+
var _ButtonBase = _interopRequireDefault(require("../ButtonBase"));
|
|
17
|
+
|
|
16
18
|
var _Paper = _interopRequireDefault(require("../Paper"));
|
|
17
19
|
|
|
20
|
+
var _Spacer = _interopRequireDefault(require("../Spacer"));
|
|
21
|
+
|
|
18
22
|
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
19
23
|
|
|
20
24
|
function _extends() { _extends = Object.assign || 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); }
|
|
@@ -31,29 +35,52 @@ const useStyles = function () {
|
|
|
31
35
|
borderRadius: theme.shape.roundness,
|
|
32
36
|
paddingHorizontal: theme.spacing(4),
|
|
33
37
|
paddingVertical: theme.spacing(3)
|
|
38
|
+
},
|
|
39
|
+
action: {
|
|
40
|
+
alignItems: 'center',
|
|
41
|
+
flexDirection: 'row',
|
|
42
|
+
justifyContent: 'space-between',
|
|
43
|
+
paddingVertical: theme.spacing(2)
|
|
34
44
|
}
|
|
35
45
|
};
|
|
36
46
|
};
|
|
37
47
|
|
|
38
48
|
function SnackbarContent(props) {
|
|
39
49
|
const {
|
|
50
|
+
actionLabel,
|
|
40
51
|
message,
|
|
52
|
+
onActionPress,
|
|
41
53
|
style,
|
|
42
54
|
...otherProps
|
|
43
55
|
} = props;
|
|
44
56
|
const styles = useStyles();
|
|
45
57
|
const theme = (0, _styles.useTheme)();
|
|
46
|
-
const
|
|
58
|
+
const messageFontStyle = (0, _styles.createFontStyle)(theme, {
|
|
47
59
|
selector: typo => typo.body2,
|
|
48
60
|
color: theme.palette.primary.contrastTextColor
|
|
49
61
|
});
|
|
62
|
+
const labelFontStyle = (0, _styles.createFontStyle)(theme, {
|
|
63
|
+
selector: typo => typo.button2,
|
|
64
|
+
color: theme.palette.primary.contrastTextColor
|
|
65
|
+
});
|
|
66
|
+
const labelStyle = (0, _styles.css)([labelFontStyle, {
|
|
67
|
+
padding: theme.spacing(2)
|
|
68
|
+
}]);
|
|
50
69
|
return /*#__PURE__*/_react.default.createElement(_Paper.default, _extends({
|
|
51
70
|
elevation: 0,
|
|
52
|
-
style: (0, _styles.css)([styles.root, style])
|
|
71
|
+
style: (0, _styles.css)([styles.root, actionLabel ? styles.action : undefined, style])
|
|
53
72
|
}, otherProps), /*#__PURE__*/_react.default.createElement(_reactNative.Text, {
|
|
54
73
|
children: message,
|
|
55
|
-
style: (0, _styles.css)([
|
|
56
|
-
})
|
|
74
|
+
style: (0, _styles.css)([messageFontStyle])
|
|
75
|
+
}), actionLabel ? /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_Spacer.default, {
|
|
76
|
+
size: 1
|
|
77
|
+
}), /*#__PURE__*/_react.default.createElement(_ButtonBase.default, {
|
|
78
|
+
onPress: onActionPress,
|
|
79
|
+
pressEffect: 'none'
|
|
80
|
+
}, /*#__PURE__*/_react.default.createElement(_reactNative.Text, {
|
|
81
|
+
children: actionLabel,
|
|
82
|
+
style: labelStyle
|
|
83
|
+
}))) : null);
|
|
57
84
|
}
|
|
58
85
|
|
|
59
86
|
;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["SnackbarContent.tsx"],"names":["useStyles","theme","backgroundColor","palette","primary","main","r","g","b","React","useMemo","root","borderRadius","shape","roundness","paddingHorizontal","spacing","paddingVertical","SnackbarContent","props","message","style","otherProps","styles","
|
|
1
|
+
{"version":3,"sources":["SnackbarContent.tsx"],"names":["useStyles","theme","backgroundColor","palette","primary","main","r","g","b","React","useMemo","root","borderRadius","shape","roundness","paddingHorizontal","spacing","paddingVertical","action","alignItems","flexDirection","justifyContent","SnackbarContent","props","actionLabel","message","onActionPress","style","otherProps","styles","messageFontStyle","selector","typo","body2","color","contrastTextColor","labelFontStyle","button2","labelStyle","padding","undefined"],"mappings":";;;;;;;AAAA;;AACA;;AAEA;;AACA;;AACA;;AACA;;AACA;;;;;;AAKA,MAAMA,SAA2C,GAAG,YAAmC;AACnF,QAAMC,KAAK,GAAG,uBAAd;AAEA,QAAMC,eAAe,GAAGD,KAAK,CAACE,OAAN,CAAcC,OAAd,CAAsBC,IAA9C;;AACA,QAAM,CAACC,CAAD,EAAIC,CAAJ,EAAOC,CAAP,IAAYC,eAAMC,OAAN,CAAc,MAAM,gBAAIR,eAAJ,CAApB,EAA0C,CAACA,eAAD,CAA1C,CAAlB;;AAEA,SAAO;AACHS,IAAAA,IAAI,EAAE;AACFT,MAAAA,eAAe,EAAG,QAAOI,CAAE,KAAIC,CAAE,KAAIC,CAAE,OADrC;AAEFI,MAAAA,YAAY,EAAEX,KAAK,CAACY,KAAN,CAAYC,SAFxB;AAGFC,MAAAA,iBAAiB,EAAEd,KAAK,CAACe,OAAN,CAAc,CAAd,CAHjB;AAIFC,MAAAA,eAAe,EAAEhB,KAAK,CAACe,OAAN,CAAc,CAAd;AAJf,KADH;AAOHE,IAAAA,MAAM,EAAE;AACJC,MAAAA,UAAU,EAAE,QADR;AAEJC,MAAAA,aAAa,EAAE,KAFX;AAGJC,MAAAA,cAAc,EAAE,eAHZ;AAIJJ,MAAAA,eAAe,EAAEhB,KAAK,CAACe,OAAN,CAAc,CAAd;AAJb;AAPL,GAAP;AAcH,CApBD;;AAsBe,SAASM,eAAT,CAAyBC,KAAzB,EAAsD;AACjE,QAAM;AACFC,IAAAA,WADE;AAEFC,IAAAA,OAFE;AAGFC,IAAAA,aAHE;AAIFC,IAAAA,KAJE;AAKF,OAAGC;AALD,MAMFL,KANJ;AAQA,QAAMM,MAAM,GAAG7B,SAAS,EAAxB;AAEA,QAAMC,KAAK,GAAG,uBAAd;AAEA,QAAM6B,gBAAgB,GAAG,6BAAgB7B,KAAhB,EAAuB;AAC5C8B,IAAAA,QAAQ,EAAGC,IAAD,IAAUA,IAAI,CAACC,KADmB;AAE5CC,IAAAA,KAAK,EAAEjC,KAAK,CAACE,OAAN,CAAcC,OAAd,CAAsB+B;AAFe,GAAvB,CAAzB;AAKA,QAAMC,cAAc,GAAG,6BAAgBnC,KAAhB,EAAuB;AAC1C8B,IAAAA,QAAQ,EAAGC,IAAD,IAAUA,IAAI,CAACK,OADiB;AAE1CH,IAAAA,KAAK,EAAEjC,KAAK,CAACE,OAAN,CAAcC,OAAd,CAAsB+B;AAFa,GAAvB,CAAvB;AAKA,QAAMG,UAAU,GAAG,iBAAI,CACnBF,cADmB,EAEnB;AAAEG,IAAAA,OAAO,EAAEtC,KAAK,CAACe,OAAN,CAAc,CAAd;AAAX,GAFmB,CAAJ,CAAnB;AAKA,sBACI,6BAAC,cAAD;AACI,IAAA,SAAS,EAAE,CADf;AAEI,IAAA,KAAK,EAAE,iBAAI,CACPa,MAAM,CAAClB,IADA,EAEPa,WAAW,GAAGK,MAAM,CAACX,MAAV,GAAmBsB,SAFvB,EAGPb,KAHO,CAAJ;AAFX,KAOQC,UAPR,gBASI,6BAAC,iBAAD;AACI,IAAA,QAAQ,EAAEH,OADd;AAEI,IAAA,KAAK,EAAE,iBAAI,CACPK,gBADO,CAAJ;AAFX,IATJ,EAgBKN,WAAW,gBACR,6BAAC,cAAD,CAAO,QAAP,qBACI,6BAAC,eAAD;AAAQ,IAAA,IAAI,EAAE;AAAd,IADJ,eAGI,6BAAC,mBAAD;AACI,IAAA,OAAO,EAAEE,aADb;AAEI,IAAA,WAAW,EAAE;AAFjB,kBAII,6BAAC,iBAAD;AACI,IAAA,QAAQ,EAAEF,WADd;AAEI,IAAA,KAAK,EAAEc;AAFX,IAJJ,CAHJ,CADQ,GAcR,IA9BR,CADJ;AAkCH;;AAAA","sourcesContent":["import React from 'react';\nimport { Text } from 'react-native';\nimport type { NamedStylesStringUnion, UseStyles } from '@fountain-ui/styles';\nimport { rgb } from '@fountain-ui/utils';\nimport { createFontStyle, css, useTheme } from '../styles';\nimport ButtonBase from '../ButtonBase';\nimport Paper from '../Paper';\nimport Spacer from '../Spacer';\nimport type SnackbarContentProps from './SnackbarContentProps';\n\ntype SnackBarContentStyles = NamedStylesStringUnion<'root' | 'action'>;\n\nconst useStyles: UseStyles<SnackBarContentStyles> = function (): SnackBarContentStyles {\n const theme = useTheme();\n\n const backgroundColor = theme.palette.primary.main;\n const [r, g, b] = React.useMemo(() => rgb(backgroundColor), [backgroundColor]);\n\n return {\n root: {\n backgroundColor: `rgba(${r}, ${g}, ${b}, .9)`,\n borderRadius: theme.shape.roundness,\n paddingHorizontal: theme.spacing(4),\n paddingVertical: theme.spacing(3),\n },\n action: {\n alignItems: 'center',\n flexDirection: 'row',\n justifyContent: 'space-between',\n paddingVertical: theme.spacing(2),\n },\n };\n};\n\nexport default function SnackbarContent(props: SnackbarContentProps) {\n const {\n actionLabel,\n message,\n onActionPress,\n style,\n ...otherProps\n } = props;\n\n const styles = useStyles();\n\n const theme = useTheme();\n\n const messageFontStyle = createFontStyle(theme, {\n selector: (typo) => typo.body2,\n color: theme.palette.primary.contrastTextColor,\n });\n\n const labelFontStyle = createFontStyle(theme, {\n selector: (typo) => typo.button2,\n color: theme.palette.primary.contrastTextColor,\n });\n\n const labelStyle = css([\n labelFontStyle,\n { padding: theme.spacing(2) },\n ]);\n\n return (\n <Paper\n elevation={0}\n style={css([\n styles.root,\n actionLabel ? styles.action : undefined,\n style,\n ])}\n {...otherProps}\n >\n <Text\n children={message}\n style={css([\n messageFontStyle,\n ])}\n />\n\n {actionLabel ? (\n <React.Fragment>\n <Spacer size={1}/>\n\n <ButtonBase\n onPress={onActionPress}\n pressEffect={'none'}\n >\n <Text\n children={actionLabel}\n style={labelStyle}\n />\n </ButtonBase>\n </React.Fragment>\n ) : null}\n </Paper>\n );\n};\n"]}
|
|
@@ -94,6 +94,7 @@ function Tooltip(props) {
|
|
|
94
94
|
}]);
|
|
95
95
|
|
|
96
96
|
const buttonElem = /*#__PURE__*/_react.default.createElement(_reactNativeGestureHandler.TouchableWithoutFeedback, {
|
|
97
|
+
disallowInterruption: true,
|
|
97
98
|
onPress: onClose
|
|
98
99
|
}, /*#__PURE__*/_react.default.createElement(_reactNative.View, {
|
|
99
100
|
style: (0, _styles.css)(touchableStyle)
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["Tooltip.tsx"],"names":["defaultOpacity","initialLayout","width","height","x","y","animationTimingConfig","duration","Tooltip","props","children","left","onClose","placement","right","style","title","tooltipStyle","verticalOffset","visible","theme","layout","setLayout","React","useState","scale","Animated","useSharedValue","tooltipAnimatedStyle","useAnimatedStyle","transform","value","r","g","b","palette","primary","main","totalVerticalOffset","tooltipLayoutStyle","alignItems","bottom","undefined","position","top","zIndex","tooltip","overflow","useEffect","nextValue","withTiming","touchableStyle","backgroundColor","borderRadius","shape","roundness","flexDirection","padding","spacing","fontStyle","selector","typo","caption2","color","contrastTextColor","textStyle","marginRight","buttonElem","arrowElem","event","nativeEvent"],"mappings":"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
|
|
1
|
+
{"version":3,"sources":["Tooltip.tsx"],"names":["defaultOpacity","initialLayout","width","height","x","y","animationTimingConfig","duration","Tooltip","props","children","left","onClose","placement","right","style","title","tooltipStyle","verticalOffset","visible","theme","layout","setLayout","React","useState","scale","Animated","useSharedValue","tooltipAnimatedStyle","useAnimatedStyle","transform","value","r","g","b","palette","primary","main","totalVerticalOffset","tooltipLayoutStyle","alignItems","bottom","undefined","position","top","zIndex","tooltip","overflow","useEffect","nextValue","withTiming","touchableStyle","backgroundColor","borderRadius","shape","roundness","flexDirection","padding","spacing","fontStyle","selector","typo","caption2","color","contrastTextColor","textStyle","marginRight","buttonElem","arrowElem","event","nativeEvent"],"mappings":"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","sourcesContent":["import React from 'react';\nimport { Text, View, ViewProps } from 'react-native';\nimport { TouchableWithoutFeedback } from 'react-native-gesture-handler';\nimport Animated from 'react-native-reanimated';\nimport { rgb } from '@fountain-ui/utils';\nimport { createFontStyle, css, useTheme } from '../styles';\nimport { Close as CloseIcon } from '../internal/icons';\nimport type TooltipProps from './TooltipProps';\nimport UpArrow from './UpArrow';\n\nconst defaultOpacity = 0.8;\nconst initialLayout = { width: 0, height: 0, x: 0, y: 0 };\n\nconst animationTimingConfig: Animated.WithTimingConfig = { duration: 150 };\n\nexport default function Tooltip(props: TooltipProps) {\n const {\n children,\n left,\n onClose,\n placement = 'top',\n right,\n style,\n title,\n tooltipStyle,\n verticalOffset = 4,\n visible = false,\n } = props;\n\n const theme = useTheme();\n\n const [layout, setLayout] = React.useState(initialLayout);\n\n const scale = Animated.useSharedValue(0);\n\n const tooltipAnimatedStyle = Animated.useAnimatedStyle(() => ({\n transform: [{ scale: scale.value }],\n }));\n\n const [r, g, b] = rgb(theme.palette.primary.main);\n\n const totalVerticalOffset = -(layout.height + verticalOffset);\n const tooltipLayoutStyle: ViewProps['style'] = {\n alignItems: 'center',\n bottom: placement === 'bottom' ? totalVerticalOffset : undefined,\n left,\n position: 'absolute',\n right,\n top: placement === 'top' ? totalVerticalOffset : undefined,\n zIndex: theme.zIndex.tooltip,\n height: visible ? undefined : 0,\n overflow: visible ? undefined : 'hidden',\n };\n\n React.useEffect(() => {\n const nextValue = visible ? 1 : 0;\n\n scale.value = Animated.withTiming(nextValue, animationTimingConfig);\n }, [visible]);\n\n const touchableStyle: ViewProps['style'] = {\n alignItems: 'center',\n backgroundColor: `rgba(${r}, ${g}, ${b}, ${defaultOpacity})`,\n borderRadius: theme.shape.roundness,\n flexDirection: 'row',\n padding: theme.spacing(2),\n };\n\n const fontStyle = createFontStyle(theme, {\n selector: (typo) => typo.caption2,\n color: theme.palette.primary.contrastTextColor,\n });\n\n const textStyle = css([\n fontStyle,\n { marginRight: theme.spacing(2) },\n ]);\n\n const buttonElem = (\n <TouchableWithoutFeedback\n disallowInterruption={true}\n onPress={onClose}\n >\n <View style={css(touchableStyle)}>\n <Text\n children={title}\n // TODO: Should we provide text prop customization?\n numberOfLines={1}\n style={textStyle}\n />\n <CloseIcon\n fill={theme.palette.primary.contrastTextColor}\n width={20}\n height={20}\n />\n </View>\n </TouchableWithoutFeedback>\n );\n\n const arrowElem = (\n <UpArrow\n upsideDown={placement === 'top'}\n fill={theme.palette.primary.main}\n opacity={defaultOpacity}\n />\n );\n\n return (\n <View style={style}>\n {children}\n\n <Animated.View\n onLayout={(event) => setLayout(event.nativeEvent.layout)}\n style={[\n tooltipAnimatedStyle,\n tooltipLayoutStyle,\n tooltipStyle,\n ]}\n >\n {placement === 'top' ? (\n <React.Fragment>\n {buttonElem}\n {arrowElem}\n </React.Fragment>\n ) : (\n <React.Fragment>\n {arrowElem}\n {buttonElem}\n </React.Fragment>\n )}\n </Animated.View>\n </View>\n );\n};\n"]}
|
|
@@ -13,9 +13,9 @@ var _reactNativeReanimated = _interopRequireDefault(require("react-native-reanim
|
|
|
13
13
|
|
|
14
14
|
var _reactNativeSafeAreaContext = require("react-native-safe-area-context");
|
|
15
15
|
|
|
16
|
-
var _hooks = require("../hooks");
|
|
16
|
+
var _hooks = require("../internal/hooks");
|
|
17
17
|
|
|
18
|
-
var
|
|
18
|
+
var _useElevationStyle = _interopRequireDefault(require("./useElevationStyle"));
|
|
19
19
|
|
|
20
20
|
var _useAppbarStyles = _interopRequireDefault(require("./useAppbarStyles"));
|
|
21
21
|
|
|
@@ -35,8 +35,8 @@ function useCollapsibleAppBar(userOptions = defaultOptions) {
|
|
|
35
35
|
};
|
|
36
36
|
const styles = (0, _useAppbarStyles.default)();
|
|
37
37
|
const safeAreaInsets = (0, _reactNativeSafeAreaContext.useSafeAreaInsets)();
|
|
38
|
-
const [appBarHeight, onAppBarLayout] = (0,
|
|
39
|
-
const [collapsibleToolbarHeight, onCollapsibleToolbarLayout] = (0,
|
|
38
|
+
const [appBarHeight, onAppBarLayout] = (0, _hooks.useHeight)();
|
|
39
|
+
const [collapsibleToolbarHeight, onCollapsibleToolbarLayout] = (0, _hooks.useHeight)();
|
|
40
40
|
|
|
41
41
|
const maxTranslateY = _reactNativeReanimated.default.useDerivedValue(() => -collapsibleToolbarHeight);
|
|
42
42
|
|
|
@@ -48,7 +48,7 @@ function useCollapsibleAppBar(userOptions = defaultOptions) {
|
|
|
48
48
|
|
|
49
49
|
const overlapped = _reactNativeReanimated.default.useSharedValue(false);
|
|
50
50
|
|
|
51
|
-
const elevationStyle = (0,
|
|
51
|
+
const elevationStyle = (0, _useElevationStyle.default)(4);
|
|
52
52
|
|
|
53
53
|
const animatedStyle = _reactNativeReanimated.default.useAnimatedStyle(() => {
|
|
54
54
|
return _reactNative.Platform.OS === 'web' ? {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["useCollapsibleAppBar.ts"],"names":["defaultOptions","translucent","ANIMATION_DURATION_MILLIS","SUPPORTS_DRAG_DETECTION","Platform","OS","useCollapsibleAppBar","userOptions","styles","safeAreaInsets","appBarHeight","onAppBarLayout","collapsibleToolbarHeight","onCollapsibleToolbarLayout","maxTranslateY","Animated","useDerivedValue","translateY","useSharedValue","lastTranslateY","lastOffsetY","overlapped","elevationStyle","animatedStyle","useAnimatedStyle","transform","value","boxShadow","elevation","shadowColor","shadowOffset","shadowRadius","shadowOpacity","indexRef","React","useRef","offsetsRef","onScrollViewChanged","nextIndex","prevIndex","current","savedOffsetY","withTiming","duration","scrollHandler","useAnimatedScrollHandler","onBeginDrag","onMomentumBegin","onScroll","event","offsetY","contentOffset","y","ty","maxTy","dy","Math","min","max","onEndDrag","onMomentumEnd","threshold","nextTranslateY","hasCollapsible","appBarStyle","paddingTop","top","undefined","floating","scrollContentInsets"],"mappings":"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","sourcesContent":["import React from 'react';\nimport { Falsy, Platform, RegisteredStyle, ScrollViewProps, ViewProps, ViewStyle } from 'react-native';\nimport Animated from 'react-native-reanimated';\nimport { useSafeAreaInsets } from 'react-native-safe-area-context';\nimport { useElevationStyle } from '../hooks';\nimport { useHeight } from '../internal/hooks';\nimport useAppbarStyles from './useAppbarStyles';\n\ntype WebOnlyStyle = { boxShadow: any };\n\ntype ViewStyleProp = Array<ViewStyle | RegisteredStyle<ViewStyle> | WebOnlyStyle | Falsy>;\n\ntype OnScroll = ScrollViewProps['onScroll'];\n\ntype OnLayoutCallback = ViewProps['onLayout'];\n\nexport interface ContentInsets {\n top?: number;\n bottom?: number;\n left?: number;\n right?: number;\n}\n\nexport interface Options {\n translucent?: boolean;\n}\n\nexport interface CollapsibleAppBar {\n appBarStyle: ViewStyleProp;\n onAppBarLayout: OnLayoutCallback;\n onCollapsibleToolbarLayout: OnLayoutCallback;\n onScroll: OnScroll;\n onScrollViewChanged: (index: number) => void;\n scrollContentInsets: ContentInsets;\n}\n\nconst defaultOptions: Required<Options> = {\n translucent: false,\n};\n\nconst ANIMATION_DURATION_MILLIS = 100;\n\nconst SUPPORTS_DRAG_DETECTION = Platform.OS !== 'web';\n\nexport default function useCollapsibleAppBar(userOptions: Options = defaultOptions): CollapsibleAppBar {\n const { translucent }: Required<Options> = {\n ...defaultOptions,\n ...userOptions,\n };\n\n const styles = useAppbarStyles();\n\n const safeAreaInsets = useSafeAreaInsets();\n\n const [appBarHeight, onAppBarLayout] = useHeight();\n const [collapsibleToolbarHeight, onCollapsibleToolbarLayout] = useHeight();\n\n const maxTranslateY = Animated.useDerivedValue(() => -collapsibleToolbarHeight);\n\n const translateY = Animated.useSharedValue<number>(0);\n const lastTranslateY = Animated.useSharedValue<number>(0);\n const lastOffsetY = Animated.useSharedValue<number>(0);\n const overlapped = Animated.useSharedValue<boolean>(false);\n\n const elevationStyle = useElevationStyle(4);\n const animatedStyle = Animated.useAnimatedStyle(() => {\n return Platform.OS === 'web' ? ({\n transform: [{ translateY: translateY.value }],\n boxShadow: overlapped.value ? elevationStyle?.boxShadow : 0,\n }) : ({\n transform: [{ translateY: translateY.value }],\n elevation: overlapped.value ? elevationStyle?.elevation : 0,\n shadowColor: elevationStyle?.shadowColor,\n shadowOffset: elevationStyle?.shadowOffset,\n shadowRadius: elevationStyle?.shadowRadius,\n shadowOpacity: overlapped.value ? elevationStyle?.shadowOpacity : 0,\n });\n });\n\n const indexRef = React.useRef<number>(0);\n const offsetsRef = React.useRef<Array<number>>([]);\n\n const onScrollViewChanged = (nextIndex: number) => {\n const prevIndex = indexRef.current;\n if (prevIndex === nextIndex) {\n return;\n }\n\n offsetsRef.current[prevIndex] = lastOffsetY.value;\n\n const savedOffsetY = offsetsRef.current[nextIndex] ?? 0;\n lastOffsetY.value = savedOffsetY;\n\n indexRef.current = nextIndex;\n\n // Determine whether to overlap every time index is changed.\n overlapped.value = savedOffsetY > 0;\n\n // If next ScrollView's offset is too short, expand app bar.\n if (translateY.value < 0 && savedOffsetY < appBarHeight) {\n translateY.value = Animated.withTiming(0, {\n duration: ANIMATION_DURATION_MILLIS,\n });\n }\n };\n\n const scrollHandler = Animated.useAnimatedScrollHandler({\n onBeginDrag: () => {\n lastTranslateY.value = translateY.value;\n },\n onMomentumBegin: () => {\n lastTranslateY.value = translateY.value;\n },\n onScroll: (event) => {\n const offsetY = event.contentOffset.y;\n\n const ty = translateY.value;\n const maxTy = maxTranslateY.value;\n\n if (SUPPORTS_DRAG_DETECTION) {\n const dy = offsetY - lastOffsetY.value;\n\n translateY.value = offsetY <= 0 ? 0 : Math.min(Math.max(lastTranslateY.value - dy, maxTy), 0);\n\n overlapped.value = offsetY + translateY.value > 0;\n } else {\n if (offsetY > -maxTy) {\n if (ty === 0) {\n translateY.value = Animated.withTiming(Math.min(Math.max(-offsetY, maxTy), 0), {\n duration: ANIMATION_DURATION_MILLIS,\n });\n }\n } else {\n if (ty === maxTy) {\n translateY.value = Animated.withTiming(0, {\n duration: ANIMATION_DURATION_MILLIS,\n });\n }\n }\n\n overlapped.value = offsetY > 0;\n\n lastOffsetY.value = offsetY;\n }\n },\n onEndDrag: (event) => {\n lastOffsetY.value = event.contentOffset.y;\n },\n onMomentumEnd: (event) => {\n const offsetY = event.contentOffset.y;\n\n lastOffsetY.value = offsetY;\n\n const ty = translateY.value;\n const maxTy = maxTranslateY.value;\n\n // If toolbar is already positioned on edge, do nothing.\n if (ty <= maxTy || ty >= 0) {\n return;\n }\n\n const threshold = maxTy * 0.5;\n\n const nextTranslateY = (ty > threshold || offsetY < appBarHeight) ? 0 : maxTy;\n\n overlapped.value = offsetY + nextTranslateY > 0;\n\n translateY.value = Animated.withTiming(nextTranslateY, {\n duration: ANIMATION_DURATION_MILLIS,\n });\n },\n });\n\n const hasCollapsible = collapsibleToolbarHeight > 0;\n\n const appBarStyle = [\n animatedStyle,\n translucent ? { paddingTop: safeAreaInsets.top } : undefined,\n hasCollapsible ? styles.floating : undefined,\n ];\n\n return {\n appBarStyle,\n onAppBarLayout,\n onCollapsibleToolbarLayout,\n onScroll: scrollHandler,\n onScrollViewChanged,\n scrollContentInsets: { top: hasCollapsible ? appBarHeight : 0 },\n };\n};\n"]}
|
|
1
|
+
{"version":3,"sources":["useCollapsibleAppBar.ts"],"names":["defaultOptions","translucent","ANIMATION_DURATION_MILLIS","SUPPORTS_DRAG_DETECTION","Platform","OS","useCollapsibleAppBar","userOptions","styles","safeAreaInsets","appBarHeight","onAppBarLayout","collapsibleToolbarHeight","onCollapsibleToolbarLayout","maxTranslateY","Animated","useDerivedValue","translateY","useSharedValue","lastTranslateY","lastOffsetY","overlapped","elevationStyle","animatedStyle","useAnimatedStyle","transform","value","boxShadow","elevation","shadowColor","shadowOffset","shadowRadius","shadowOpacity","indexRef","React","useRef","offsetsRef","onScrollViewChanged","nextIndex","prevIndex","current","savedOffsetY","withTiming","duration","scrollHandler","useAnimatedScrollHandler","onBeginDrag","onMomentumBegin","onScroll","event","offsetY","contentOffset","y","ty","maxTy","dy","Math","min","max","onEndDrag","onMomentumEnd","threshold","nextTranslateY","hasCollapsible","appBarStyle","paddingTop","top","undefined","floating","scrollContentInsets"],"mappings":"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","sourcesContent":["import React from 'react';\nimport { Falsy, Platform, RegisteredStyle, ScrollViewProps, ViewProps, ViewStyle } from 'react-native';\nimport Animated from 'react-native-reanimated';\nimport { useSafeAreaInsets } from 'react-native-safe-area-context';\nimport { useHeight } from '../internal/hooks';\nimport useElevationStyle from './useElevationStyle';\nimport useAppbarStyles from './useAppbarStyles';\n\ntype WebOnlyStyle = { boxShadow: any };\n\ntype ViewStyleProp = Array<ViewStyle | RegisteredStyle<ViewStyle> | WebOnlyStyle | Falsy>;\n\ntype OnScroll = ScrollViewProps['onScroll'];\n\ntype OnLayoutCallback = ViewProps['onLayout'];\n\nexport interface ContentInsets {\n top?: number;\n bottom?: number;\n left?: number;\n right?: number;\n}\n\nexport interface Options {\n translucent?: boolean;\n}\n\nexport interface CollapsibleAppBar {\n appBarStyle: ViewStyleProp;\n onAppBarLayout: OnLayoutCallback;\n onCollapsibleToolbarLayout: OnLayoutCallback;\n onScroll: OnScroll;\n onScrollViewChanged: (index: number) => void;\n scrollContentInsets: ContentInsets;\n}\n\nconst defaultOptions: Required<Options> = {\n translucent: false,\n};\n\nconst ANIMATION_DURATION_MILLIS = 100;\n\nconst SUPPORTS_DRAG_DETECTION = Platform.OS !== 'web';\n\nexport default function useCollapsibleAppBar(userOptions: Options = defaultOptions): CollapsibleAppBar {\n const { translucent }: Required<Options> = {\n ...defaultOptions,\n ...userOptions,\n };\n\n const styles = useAppbarStyles();\n\n const safeAreaInsets = useSafeAreaInsets();\n\n const [appBarHeight, onAppBarLayout] = useHeight();\n const [collapsibleToolbarHeight, onCollapsibleToolbarLayout] = useHeight();\n\n const maxTranslateY = Animated.useDerivedValue(() => -collapsibleToolbarHeight);\n\n const translateY = Animated.useSharedValue<number>(0);\n const lastTranslateY = Animated.useSharedValue<number>(0);\n const lastOffsetY = Animated.useSharedValue<number>(0);\n const overlapped = Animated.useSharedValue<boolean>(false);\n\n const elevationStyle = useElevationStyle(4);\n const animatedStyle = Animated.useAnimatedStyle(() => {\n return Platform.OS === 'web' ? ({\n transform: [{ translateY: translateY.value }],\n boxShadow: overlapped.value ? elevationStyle?.boxShadow : 0,\n }) : ({\n transform: [{ translateY: translateY.value }],\n elevation: overlapped.value ? elevationStyle?.elevation : 0,\n shadowColor: elevationStyle?.shadowColor,\n shadowOffset: elevationStyle?.shadowOffset,\n shadowRadius: elevationStyle?.shadowRadius,\n shadowOpacity: overlapped.value ? elevationStyle?.shadowOpacity : 0,\n });\n });\n\n const indexRef = React.useRef<number>(0);\n const offsetsRef = React.useRef<Array<number>>([]);\n\n const onScrollViewChanged = (nextIndex: number) => {\n const prevIndex = indexRef.current;\n if (prevIndex === nextIndex) {\n return;\n }\n\n offsetsRef.current[prevIndex] = lastOffsetY.value;\n\n const savedOffsetY = offsetsRef.current[nextIndex] ?? 0;\n lastOffsetY.value = savedOffsetY;\n\n indexRef.current = nextIndex;\n\n // Determine whether to overlap every time index is changed.\n overlapped.value = savedOffsetY > 0;\n\n // If next ScrollView's offset is too short, expand app bar.\n if (translateY.value < 0 && savedOffsetY < appBarHeight) {\n translateY.value = Animated.withTiming(0, {\n duration: ANIMATION_DURATION_MILLIS,\n });\n }\n };\n\n const scrollHandler = Animated.useAnimatedScrollHandler({\n onBeginDrag: () => {\n lastTranslateY.value = translateY.value;\n },\n onMomentumBegin: () => {\n lastTranslateY.value = translateY.value;\n },\n onScroll: (event) => {\n const offsetY = event.contentOffset.y;\n\n const ty = translateY.value;\n const maxTy = maxTranslateY.value;\n\n if (SUPPORTS_DRAG_DETECTION) {\n const dy = offsetY - lastOffsetY.value;\n\n translateY.value = offsetY <= 0 ? 0 : Math.min(Math.max(lastTranslateY.value - dy, maxTy), 0);\n\n overlapped.value = offsetY + translateY.value > 0;\n } else {\n if (offsetY > -maxTy) {\n if (ty === 0) {\n translateY.value = Animated.withTiming(Math.min(Math.max(-offsetY, maxTy), 0), {\n duration: ANIMATION_DURATION_MILLIS,\n });\n }\n } else {\n if (ty === maxTy) {\n translateY.value = Animated.withTiming(0, {\n duration: ANIMATION_DURATION_MILLIS,\n });\n }\n }\n\n overlapped.value = offsetY > 0;\n\n lastOffsetY.value = offsetY;\n }\n },\n onEndDrag: (event) => {\n lastOffsetY.value = event.contentOffset.y;\n },\n onMomentumEnd: (event) => {\n const offsetY = event.contentOffset.y;\n\n lastOffsetY.value = offsetY;\n\n const ty = translateY.value;\n const maxTy = maxTranslateY.value;\n\n // If toolbar is already positioned on edge, do nothing.\n if (ty <= maxTy || ty >= 0) {\n return;\n }\n\n const threshold = maxTy * 0.5;\n\n const nextTranslateY = (ty > threshold || offsetY < appBarHeight) ? 0 : maxTy;\n\n overlapped.value = offsetY + nextTranslateY > 0;\n\n translateY.value = Animated.withTiming(nextTranslateY, {\n duration: ANIMATION_DURATION_MILLIS,\n });\n },\n });\n\n const hasCollapsible = collapsibleToolbarHeight > 0;\n\n const appBarStyle = [\n animatedStyle,\n translucent ? { paddingTop: safeAreaInsets.top } : undefined,\n hasCollapsible ? styles.floating : undefined,\n ];\n\n return {\n appBarStyle,\n onAppBarLayout,\n onCollapsibleToolbarLayout,\n onScroll: scrollHandler,\n onScrollViewChanged,\n scrollContentInsets: { top: hasCollapsible ? appBarHeight : 0 },\n };\n};\n"]}
|