@artsy/palette-mobile 13.1.4 → 13.1.5

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.
Files changed (3) hide show
  1. package/dist/elements/Screen/Header.js +26 -32
  2. package/dist/elements/Screen/StickySubHeader.js +13 -6
  3. package/package.json +1 -1
package/dist/elements/Screen/Header.js CHANGED
@@ -25,6 +25,7 @@ var __importStar = (this && this.__importStar) || function (mod) {
25
25
  Object.defineProperty(exports, "__esModule", { value: true });
26
26
  exports.Header = exports.AnimatedHeader = void 0;
27
27
  const jsx_runtime_1 = require("react/jsx-runtime");
28
+ const moti_1 = require("moti");
28
29
  const react_native_reanimated_1 = __importStar(require("react-native-reanimated"));
29
30
  const ScreenScrollContext_1 = require("./ScreenScrollContext");
30
31
  const constants_1 = require("./constants");
@@ -35,39 +36,32 @@ const Spacer_1 = require("../Spacer");
35
36
  const Text_1 = require("../Text");
36
37
  const Touchable_1 = require("../Touchable");
37
38
  const AnimatedHeader = (props) => {
38
- const { currentScrollY, scrollYOffset } = (0, ScreenScrollContext_1.useScreenScrollContext)();
39
- return ((0, jsx_runtime_1.jsx)(exports.Header, { scrollY: currentScrollY, scrollYOffset: scrollYOffset, animated: true, ...props }));
39
+ return (0, jsx_runtime_1.jsx)(exports.Header, { animated: true, ...props });
40
40
  };
41
41
  exports.AnimatedHeader = AnimatedHeader;
42
- const Header = ({ animated = false, hideLeftElements, hideRightElements, hideTitle, leftElements, onBack, rightElements, scrollY = 0, scrollYOffset = 0, title, titleProps = {}, }) => {
43
- const Left = () => {
44
- if (hideLeftElements) {
45
- return null;
46
- }
47
- return ((0, jsx_runtime_1.jsxs)(Flex_1.Flex, { pr: 1, width: 50, children: [leftElements ? ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: leftElements })) : (
48
- // If no left elements passed, show back button
49
- (0, jsx_runtime_1.jsx)(Touchable_1.Touchable, { onPress: onBack, underlayColor: "transparent", hitSlop: constants_2.DEFAULT_HIT_SLOP, children: (0, jsx_runtime_1.jsx)(ArrowLeftIcon_1.ArrowLeftIcon, { fill: "onBackgroundHigh", top: "2px" }) })), (0, jsx_runtime_1.jsx)(Spacer_1.Spacer, { x: 1 })] }));
50
- };
51
- const Center = () => {
52
- if (hideTitle) {
53
- return null;
54
- }
55
- if (!animated) {
56
- return ((0, jsx_runtime_1.jsx)(Flex_1.Flex, { flex: 1, flexDirection: "row", children: (0, jsx_runtime_1.jsx)(Flex_1.Flex, { alignItems: "center", width: "100%", ...titleProps, children: (0, jsx_runtime_1.jsx)(Text_1.Text, { variant: "sm-display", numberOfLines: 1, children: title }) }) }));
57
- }
58
- // Show / hide the title to avoid rerenders, which retrigger the animation
59
- const display = scrollY < constants_1.NAVBAR_HEIGHT + scrollYOffset ? "none" : "flex";
60
- return ((0, jsx_runtime_1.jsx)(Flex_1.Flex, { flex: 1, flexDirection: "row", children: (0, jsx_runtime_1.jsx)(react_native_reanimated_1.default.View, { entering: react_native_reanimated_1.FadeIn.duration(400).easing(react_native_reanimated_1.Easing.out(react_native_reanimated_1.Easing.exp)), exiting: react_native_reanimated_1.FadeOut.duration(400).easing(react_native_reanimated_1.Easing.out(react_native_reanimated_1.Easing.exp)), style: {
61
- display,
62
- flex: 1,
63
- }, children: (0, jsx_runtime_1.jsx)(Flex_1.Flex, { alignItems: "center", width: "100%", ...titleProps, children: (0, jsx_runtime_1.jsx)(Text_1.Text, { variant: "sm-display", numberOfLines: 1, children: title }) }) }) }));
64
- };
65
- const Right = () => {
66
- if (hideRightElements) {
67
- return null;
68
- }
69
- return ((0, jsx_runtime_1.jsxs)(Flex_1.Flex, { width: 50, alignItems: "flex-end", children: [(0, jsx_runtime_1.jsx)(Spacer_1.Spacer, { x: 1 }), rightElements] }));
70
- };
71
- return ((0, jsx_runtime_1.jsxs)(Flex_1.Flex, { height: constants_1.NAVBAR_HEIGHT, flexDirection: "row", px: 2, py: 1, zIndex: constants_1.ZINDEX.header, backgroundColor: "background", alignItems: "center", width: "100%", children: [(0, jsx_runtime_1.jsx)(Left, {}), (0, jsx_runtime_1.jsx)(Center, {}), (0, jsx_runtime_1.jsx)(Right, {})] }));
42
+ const Header = ({ animated = false, hideLeftElements, hideRightElements, hideTitle, leftElements, onBack, rightElements, title, titleProps = {}, }) => {
43
+ return ((0, jsx_runtime_1.jsxs)(Flex_1.Flex, { height: constants_1.NAVBAR_HEIGHT, flexDirection: "row", px: 2, py: 1, zIndex: constants_1.ZINDEX.header, backgroundColor: "background", alignItems: "center", width: "100%", children: [!hideLeftElements && (0, jsx_runtime_1.jsx)(Left, { leftElements: leftElements, onBack: onBack }), !hideTitle && (0, jsx_runtime_1.jsx)(Center, { animated: animated, titleProps: titleProps, title: title }), !hideRightElements && !!rightElements && (0, jsx_runtime_1.jsx)(Right, { rightElements: rightElements })] }));
72
44
  };
73
45
  exports.Header = Header;
46
+ const Right = ({ rightElements }) => {
47
+ return ((0, jsx_runtime_1.jsxs)(Flex_1.Flex, { width: 50, alignItems: "flex-end", children: [(0, jsx_runtime_1.jsx)(Spacer_1.Spacer, { x: 1 }), rightElements] }));
48
+ };
49
+ const Center = ({ animated, titleProps, title }) => {
50
+ const { scrollYOffset = 0, currentScrollY = 0 } = (0, ScreenScrollContext_1.useScreenScrollContext)();
51
+ if (!animated) {
52
+ return ((0, jsx_runtime_1.jsx)(Flex_1.Flex, { flex: 1, flexDirection: "row", children: (0, jsx_runtime_1.jsx)(Flex_1.Flex, { alignItems: "center", width: "100%", ...titleProps, children: (0, jsx_runtime_1.jsx)(Text_1.Text, { variant: "sm-display", numberOfLines: 1, children: title }) }) }));
53
+ }
54
+ // Show / hide the title to avoid rerenders, which retrigger the animation
55
+ const display = currentScrollY < constants_1.NAVBAR_HEIGHT + scrollYOffset ? "none" : "flex";
56
+ return ((0, jsx_runtime_1.jsx)(Flex_1.Flex, { flex: 1, flexDirection: "row", children: (0, jsx_runtime_1.jsx)(react_native_reanimated_1.default.View, { entering: react_native_reanimated_1.FadeIn.duration(400).easing(react_native_reanimated_1.Easing.out(react_native_reanimated_1.Easing.exp)), exiting: react_native_reanimated_1.FadeOut.duration(400).easing(react_native_reanimated_1.Easing.out(react_native_reanimated_1.Easing.exp)), style: {
57
+ display,
58
+ flex: 1,
59
+ }, children: (0, jsx_runtime_1.jsx)(Flex_1.Flex, { alignItems: "center", width: "100%", ...titleProps, children: (0, jsx_runtime_1.jsx)(moti_1.MotiView, { animate: {
60
+ opacity: display === "flex" ? 1 : 0,
61
+ }, children: (0, jsx_runtime_1.jsx)(Text_1.Text, { variant: "sm-display", numberOfLines: 1, children: title }) }) }) }) }));
62
+ };
63
+ const Left = ({ leftElements, onBack }) => {
64
+ return ((0, jsx_runtime_1.jsxs)(Flex_1.Flex, { pr: 1, width: 50, children: [leftElements ? ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: leftElements })) : (
65
+ // If no left elements passed, show back button
66
+ (0, jsx_runtime_1.jsx)(Touchable_1.Touchable, { onPress: onBack, underlayColor: "transparent", hitSlop: constants_2.DEFAULT_HIT_SLOP, children: (0, jsx_runtime_1.jsx)(ArrowLeftIcon_1.ArrowLeftIcon, { fill: "onBackgroundHigh", top: "2px" }) })), (0, jsx_runtime_1.jsx)(Spacer_1.Spacer, { x: 1 })] }));
67
+ };
package/dist/elements/Screen/StickySubHeader.js CHANGED
@@ -4,6 +4,7 @@ exports.StickySubHeader = void 0;
4
4
  const jsx_runtime_1 = require("react/jsx-runtime");
5
5
  const moti_1 = require("moti");
6
6
  const react_1 = require("react");
7
+ const react_native_reanimated_1 = require("react-native-reanimated");
7
8
  const ScreenScrollContext_1 = require("./ScreenScrollContext");
8
9
  const constants_1 = require("./constants");
9
10
  const hooks_1 = require("../../utils/hooks");
@@ -15,21 +16,27 @@ const StickySubHeader = ({ title, subTitle, children }) => {
15
16
  const { currentScrollY, scrollYOffset = 0 } = (0, ScreenScrollContext_1.useScreenScrollContext)();
16
17
  const space = (0, hooks_1.useSpace)();
17
18
  const [stickyBarHeight, setStickyHeaderHeight] = (0, react_1.useState)(null);
18
- const visible = currentScrollY >= constants_1.NAVBAR_HEIGHT + scrollYOffset ? false : true;
19
+ const visible = (0, react_native_reanimated_1.useDerivedValue)(() => {
20
+ if (stickyBarHeight === null) {
21
+ return true;
22
+ }
23
+ return currentScrollY >= constants_1.NAVBAR_HEIGHT + scrollYOffset;
24
+ });
19
25
  const handleLayout = (event) => {
20
26
  setStickyHeaderHeight(event.nativeEvent.layout.height);
21
27
  };
22
28
  // The styles are kept in a variable to make sure they're always in sync with the hidden text component
23
29
  const styles = {
24
- paddingVertical: space(1),
25
30
  paddingHorizontal: space(2),
26
31
  };
27
- return ((0, jsx_runtime_1.jsxs)(Flex_1.Flex, { children: [stickyBarHeight === null && ((0, jsx_runtime_1.jsxs)(Flex_1.Flex, { onLayout: (event) => handleLayout(event), position: "absolute", backgroundColor: "white100", zIndex: -1000, style: styles, children: [(0, jsx_runtime_1.jsx)(Text_1.Text, { variant: "lg-display", color: "white100", children: title }), !!subTitle && ((0, jsx_runtime_1.jsx)(Text_1.Text, { variant: "xs", mt: 0.5, color: "white100", children: subTitle }))] })), (0, jsx_runtime_1.jsx)(moti_1.MotiView, { animate: {
28
- height: visible ? stickyBarHeight || undefined : 0,
29
- transform: [{ translateY: visible ? 0 : -(stickyBarHeight || STICKY_BAR_HEIGHT) }],
32
+ return ((0, jsx_runtime_1.jsxs)(Flex_1.Flex, { children: [stickyBarHeight === null && ((0, jsx_runtime_1.jsx)(Flex_1.Flex, { onLayout: (event) => handleLayout(event), position: "absolute", backgroundColor: "white100", zIndex: -1000, style: styles, children: (0, jsx_runtime_1.jsxs)(Flex_1.Flex, { mb: 1, children: [(0, jsx_runtime_1.jsx)(Text_1.Text, { variant: "lg-display", color: "white100", children: title }), !!subTitle && ((0, jsx_runtime_1.jsx)(Text_1.Text, { variant: "xs", mt: 0.5, color: "white100", children: subTitle }))] }) })), (0, jsx_runtime_1.jsx)(moti_1.MotiView, { animate: {
33
+ height: visible.value ? stickyBarHeight || undefined : 0,
34
+ transform: [{ translateY: visible.value ? 0 : -(stickyBarHeight || STICKY_BAR_HEIGHT) }],
30
35
  }, style: styles, transition: {
31
36
  type: "timing",
32
37
  duration: 100,
33
- }, children: (0, jsx_runtime_1.jsxs)(Flex_1.Flex, { style: { height: stickyBarHeight }, children: [(0, jsx_runtime_1.jsx)(Text_1.Text, { variant: "lg-display", children: title }), subTitle && ((0, jsx_runtime_1.jsx)(Text_1.Text, { variant: "xs", mt: 0.5, children: subTitle }))] }) }), children, (0, jsx_runtime_1.jsx)(Separator_1.Separator, { borderColor: "black10" })] }));
38
+ }, children: (0, jsx_runtime_1.jsx)(Flex_1.Flex, { style: { height: stickyBarHeight }, mb: 1, children: (0, jsx_runtime_1.jsxs)(moti_1.MotiView, { animate: {
39
+ opacity: visible.value ? 1 : 0,
40
+ }, children: [(0, jsx_runtime_1.jsx)(Text_1.Text, { variant: "lg-display", children: title }), subTitle && ((0, jsx_runtime_1.jsx)(Text_1.Text, { variant: "xs", mt: 0.5, children: subTitle }))] }) }) }), children, (0, jsx_runtime_1.jsx)(Separator_1.Separator, { borderColor: "black10" })] }));
34
41
  };
35
42
  exports.StickySubHeader = StickySubHeader;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@artsy/palette-mobile",
3
- "version": "13.1.4",
3
+ "version": "13.1.5",
4
4
  "description": "Artsy's design system for React Native",
5
5
  "scripts": {
6
6
  "android": "RCT_METRO_PORT=8082 react-native run-android --port 8082",