@artsy/palette-mobile 11.0.34 → 11.0.36

package/CHANGELOG.md

@@ -1,3 +1,27 @@
+# v11.0.36 (Wed Jun 07 2023)
+
+#### 🐛 Bug Fix
+
+- fix(touchable): underlayColor replace white100 to transparent [#110](https://github.com/artsy/palette-mobile/pull/110) ([@gkartalis](https://github.com/gkartalis))
+
+#### Authors: 1
+
+- George Kartalis ([@gkartalis](https://github.com/gkartalis))
+
+---
+
+# v11.0.35 (Tue Jun 06 2023)
+
+#### 🐛 Bug Fix
+
+- feat(tabs): Add support for Indicators [#109](https://github.com/artsy/palette-mobile/pull/109) ([@damassi](https://github.com/damassi))
+
+#### Authors: 1
+
+- Christopher Pappas ([@damassi](https://github.com/damassi))
+
+---
+
 # v11.0.34 (Tue Jun 06 2023)
 
 #### 🐛 Bug Fix

package/dist/elements/Tabs/Tabs.stories.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/elements/Tabs/Tabs.stories.js

@@ -0,0 +1,10 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_native_1 = require("@storybook/react-native");
+const Tabs_1 = require("./Tabs");
+const Flex_1 = require("../Flex");
+const Text_1 = require("../Text");
+(0, react_native_1.storiesOf)("Tabs", module)
+    .add("Simple Tabs", () => ((0, jsx_runtime_1.jsx)(Flex_1.Flex, { alignSelf: "center", mt: "200px", alignItems: "center", flexWrap: "wrap", children: (0, jsx_runtime_1.jsxs)(Tabs_1.Tabs, { children: [(0, jsx_runtime_1.jsx)(Tabs_1.Tabs.Tab, { name: "Tab 1", label: "Tab 1", children: (0, jsx_runtime_1.jsx)(Tabs_1.Tabs.ScrollView, { children: (0, jsx_runtime_1.jsx)(Text_1.Text, { children: "Tab 1 content" }) }) }), (0, jsx_runtime_1.jsx)(Tabs_1.Tabs.Tab, { name: "Tab 2", label: "Tab 2", children: (0, jsx_runtime_1.jsx)(Tabs_1.Tabs.ScrollView, { children: (0, jsx_runtime_1.jsx)(Text_1.Text, { children: "Tab 2 content" }) }) })] }) })))
+    .add("Tabs with Indicator", () => ((0, jsx_runtime_1.jsx)(Flex_1.Flex, { alignSelf: "center", mt: "200px", flexWrap: "wrap", children: (0, jsx_runtime_1.jsxs)(Tabs_1.Tabs, { indicators: [{ tabName: "tab1", Component: () => (0, jsx_runtime_1.jsx)(Text_1.Text, { textAlign: "right", children: "hi" }) }], children: [(0, jsx_runtime_1.jsx)(Tabs_1.Tabs.Tab, { name: "tab1", label: "Tab 1", children: (0, jsx_runtime_1.jsx)(Tabs_1.Tabs.ScrollView, { children: (0, jsx_runtime_1.jsx)(Text_1.Text, { children: "Tab 1 content" }) }) }), (0, jsx_runtime_1.jsx)(Tabs_1.Tabs.Tab, { name: "tab2", label: "Tab 2", children: (0, jsx_runtime_1.jsx)(Tabs_1.Tabs.ScrollView, { children: (0, jsx_runtime_1.jsx)(Text_1.Text, { children: "Tab 2 content" }) }) })] }) })));

package/dist/elements/Tabs/TabsContainer.d.ts

@@ -1,7 +1,13 @@
 /// <reference types="react" />
-import { CollapsibleProps } from "react-native-collapsible-tab-view";
+import { CollapsibleProps, TabItemProps } from "react-native-collapsible-tab-view";
+interface Indicator {
+    tabName: string;
+    Component: React.FC<TabItemProps<string>>;
+}
 export interface TabsContainerProps extends CollapsibleProps {
+    indicators?: Indicator[];
     onTabPress?: (tabName: string) => void;
     tabScrollEnabled?: boolean;
 }
 export declare const TabsContainer: React.FC<TabsContainerProps>;
+export {};

package/dist/elements/Tabs/TabsContainer.js

@@ -5,8 +5,10 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 const react_native_collapsible_tab_view_1 = require("react-native-collapsible-tab-view");
 const useColor_1 = require("../../utils/hooks/useColor");
 const useSpace_1 = require("../../utils/hooks/useSpace");
+const Box_1 = require("../Box");
+const Flex_1 = require("../Flex");
 const TAB_BAR_HEIGHT = 50;
-const TabsContainer = ({ children, initialTabName, renderHeader, tabScrollEnabled = false, onTabPress, ...tabContainerProps }) => {
+const TabsContainer = ({ children, indicators = [], initialTabName, renderHeader, tabScrollEnabled = false, onTabPress, ...tabContainerProps }) => {
     const space = (0, useSpace_1.useSpace)();
     const color = (0, useColor_1.useColor)();
     return ((0, jsx_runtime_1.jsx)(react_native_collapsible_tab_view_1.Tabs.Container, { ...tabContainerProps, renderHeader: renderHeader, headerContainerStyle: {
@@ -24,6 +26,11 @@ const TabsContainer = ({ children, initialTabName, renderHeader, tabScrollEnable
                         height: TAB_BAR_HEIGHT,
                         borderBottomWidth: 1,
                         borderColor: color("black30"),
+                    }, TabItemComponent: (props) => {
+                        const Indicator = indicators.find((indicator) => {
+                            return indicator.tabName === props.name;
+                        });
+                        return ((0, jsx_runtime_1.jsxs)(Box_1.Box, { flex: 1, children: [(0, jsx_runtime_1.jsx)(Flex_1.Flex, { position: "absolute", width: "100%", children: !!Indicator?.Component && (0, jsx_runtime_1.jsx)(Indicator.Component, { ...props }) }), (0, jsx_runtime_1.jsx)(react_native_collapsible_tab_view_1.MaterialTabItem, { ...props, children: "hi 2" })] }));
                     }, contentContainerStyle: {}, activeColor: color("onBackground"), inactiveColor: color("onBackgroundMedium"), labelStyle: { marginTop: 0 }, indicatorStyle: {
                         backgroundColor: color("onBackground"),
                         height: 1,

package/dist/elements/Touchable/Touchable.js

@@ -28,6 +28,6 @@ const Touchable = ({ children, flex, haptic, noFeedback, onPress, underlayColor,
         }
         onPress(evt);
     };
-    return noFeedback ? ((0, jsx_runtime_1.jsx)(react_native_1.TouchableWithoutFeedback, { ...props, onPress: onPressWrapped, children: inner })) : ((0, jsx_runtime_1.jsx)(react_native_1.TouchableHighlight, { underlayColor: underlayColor ?? color("white100"), activeOpacity: 0.8, ...props, onPress: onPressWrapped, children: inner }));
+    return noFeedback ? ((0, jsx_runtime_1.jsx)(react_native_1.TouchableWithoutFeedback, { ...props, onPress: onPressWrapped, children: inner })) : ((0, jsx_runtime_1.jsx)(react_native_1.TouchableHighlight, { underlayColor: underlayColor ?? "transparent", activeOpacity: 0.8, ...props, onPress: onPressWrapped, children: inner }));
 };
 exports.Touchable = Touchable;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@artsy/palette-mobile",
-  "version": "11.0.34",
+  "version": "11.0.36",
   "description": "Artsy's design system for React Native",
   "scripts": {
     "android": "react-native run-android",