@artsy/palette-mobile 22.0.1--canary.423.5065.0 → 22.1.0--canary.424.5073.0

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 (5) hide show
  1. package/dist/elements/Tabs/TabMasonry.js +1 -1
  2. package/dist/elements/Tabs/Tabs.stories.d.ts +7 -1
  3. package/dist/elements/Tabs/Tabs.stories.js +17 -2
  4. package/dist/storybook/decorators.js +1 -1
  5. package/package.json +2 -2
package/dist/elements/Tabs/TabMasonry.js CHANGED
@@ -6,7 +6,7 @@ export function TabMasonry(props) {
6
6
  useListenForTabContentScroll();
7
7
  const space = useSpace();
8
8
  const contentContainerStyle = (props.contentContainerStyle ?? {});
9
- return (_jsx(Tabs.MasonryFlashList, { contentContainerStyle: {
9
+ return (_jsx(Tabs.FlashList, { masonry: true, contentContainerStyle: {
10
10
  paddingHorizontal: space(2),
11
11
  ...contentContainerStyle,
12
12
  }, ...props, ref: props.innerRef }));
package/dist/elements/Tabs/Tabs.stories.d.ts CHANGED
@@ -15,7 +15,13 @@ export declare const TabsWithAnimatedHeader: {
15
15
  name: string;
16
16
  };
17
17
  };
18
- export declare const _TabsWithHeader: {
18
+ export declare const TabsWithHeader: {
19
+ (): import("react/jsx-runtime").JSX.Element;
20
+ story: {
21
+ name: string;
22
+ };
23
+ };
24
+ export declare const MasonryTabsWithHeader: {
19
25
  (): import("react/jsx-runtime").JSX.Element;
20
26
  story: {
21
27
  name: string;
package/dist/elements/Tabs/Tabs.stories.js CHANGED
@@ -15,7 +15,22 @@ export const TabsWithAnimatedHeader = () => (_jsxs(Screen, { children: [_jsx(Scr
15
15
  TabsWithAnimatedHeader.story = {
16
16
  name: "Tabs with AnimatedHeader",
17
17
  };
18
- export const _TabsWithHeader = () => (_jsxs(Tabs.TabsWithHeader, { title: "Artist Header", showLargeHeaderText: false, BelowTitleHeaderComponent: () => (_jsxs(Flex, { pointerEvents: "none", p: 2, children: [_jsx(Text, { children: "Info" }), _jsx(Text, { children: "More Info" })] })), children: [_jsx(Tabs.Tab, { name: "tab1", label: "Tab 1", children: _jsx(Tabs.ScrollView, { children: _jsx(Text, { children: "Some long text ".repeat(150) }) }) }), _jsx(Tabs.Tab, { name: "tab2", label: "Tab 2", children: _jsx(Text, { children: "Some long text ".repeat(150) }) })] }));
19
- _TabsWithHeader.story = {
18
+ export const TabsWithHeader = () => {
19
+ return (_jsxs(Tabs.TabsWithHeader, { title: "Artist Header", showLargeHeaderText: false, BelowTitleHeaderComponent: () => (_jsxs(Flex, { pointerEvents: "none", p: 2, children: [_jsx(Text, { children: "Info" }), _jsx(Text, { children: "More Info" })] })), children: [_jsx(Tabs.Tab, { name: "tab1", label: "Tab 1", children: _jsx(Tabs.ScrollView, { children: _jsx(Text, { children: "Some long text ".repeat(150) }) }) }), _jsx(Tabs.Tab, { name: "tab2", label: "Tab 2", children: _jsx(Text, { children: "Some long text ".repeat(150) }) })] }));
20
+ };
21
+ TabsWithHeader.story = {
20
22
  name: "Tabs with header",
21
23
  };
24
+ export const MasonryTabsWithHeader = () => {
25
+ return (_jsxs(Tabs.TabsWithHeader, { title: "Tabs with Masonry", children: [_jsx(Tabs.Tab, { name: "tab1", label: "Tab 1", children: _jsx(Tabs.FlatList, { data: Array.from({ length: 20 }), contentContainerStyle: {
26
+ paddingHorizontal: 0,
27
+ }, renderItem: () => _jsx(Flex, { backgroundColor: randomHexColor(), height: 80, width: "100%" }) }) }), _jsx(Tabs.Tab, { name: "tab2", label: "Tab 2", children: _jsx(Tabs.FlatList, { contentContainerStyle: {
28
+ paddingHorizontal: 0,
29
+ }, data: Array.from({ length: 20 }), renderItem: () => _jsx(Flex, { backgroundColor: randomHexColor(), height: 80, width: "100%" }) }) })] }));
30
+ };
31
+ const randomHexColor = () => {
32
+ return `#${Math.floor(Math.random() * 16777215).toString(16)}`;
33
+ };
34
+ MasonryTabsWithHeader.story = {
35
+ name: "Masonry Tabs with header",
36
+ };
package/dist/storybook/decorators.js CHANGED
@@ -41,5 +41,5 @@ export const useDarkModeSwitcher = (story) => {
41
41
  // We are keeping the status bar white on darkmode on ios because background isn't a supported prop on iOS
42
42
  , {
43
43
  // We are keeping the status bar white on darkmode on ios because background isn't a supported prop on iOS
44
- barStyle: isDarkMode && Platform.OS === "android" ? "light-content" : "dark-content", backgroundColor: isDarkMode && Platform.OS === "android" ? "black" : "white", translucent: true }), _jsxs(Flex, { flex: 1, backgroundColor: "background", children: [_jsxs(Flex, { flexDirection: "row", justifyContent: "space-around", py: 1, backgroundColor: "mono5", children: [_jsx(Text, { color: "mono100", children: "Dark mode" }), _jsxs(Flex, { flexDirection: "row", gap: 1, children: [_jsx(Pill, { variant: "default", selected: mode === "light", onPress: () => setMode("light"), children: "Light" }), _jsx(Pill, { variant: "default", selected: mode === "dark", onPress: () => setMode("dark"), children: "Dark" }), _jsx(Pill, { variant: "default", selected: mode === "system", onPress: () => setMode("system"), children: "System" })] })] }), _jsx(Flex, { p: 2, children: story() })] })] }) }) }));
44
+ barStyle: isDarkMode && Platform.OS === "android" ? "light-content" : "dark-content", backgroundColor: isDarkMode && Platform.OS === "android" ? "black" : "white", translucent: true }), _jsxs(Flex, { flex: 1, backgroundColor: "background", children: [_jsxs(Flex, { flexDirection: "row", justifyContent: "space-around", py: 1, backgroundColor: "mono5", children: [_jsx(Text, { color: "mono100", children: "Dark mode" }), _jsxs(Flex, { flexDirection: "row", gap: 1, children: [_jsx(Pill, { variant: "default", selected: mode === "light", onPress: () => setMode("light"), children: "Light" }), _jsx(Pill, { variant: "default", selected: mode === "dark", onPress: () => setMode("dark"), children: "Dark" }), _jsx(Pill, { variant: "default", selected: mode === "system", onPress: () => setMode("system"), children: "System" })] })] }), _jsx(Flex, { flex: 1, justifyContent: "center", alignItems: "center", children: story() })] })] }) }) }));
45
45
  };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@artsy/palette-mobile",
3
- "version": "22.0.1--canary.423.5065.0",
3
+ "version": "22.1.0--canary.424.5073.0",
4
4
  "description": "Artsy's design system for React Native",
5
5
  "workspaces": [
6
6
  "Example"
@@ -45,7 +45,7 @@
45
45
  "@artsy/palette-tokens": "7.0.0",
46
46
  "@d11/react-native-fast-image": "8.12.0",
47
47
  "@react-spring/native": "^10.0.3",
48
- "@shopify/flash-list": "^2.0.0",
48
+ "@shopify/flash-list": "2.2.0",
49
49
  "@styled-system/theme-get": "^5.1.2",
50
50
  "events": "^3.3.0",
51
51
  "lodash": "^4.17.21",