Skip to content

Commit

Permalink
Added New Component: TabView (#2919)
Browse files Browse the repository at this point in the history 
* Added to README

* Added Tab Component

* Added Docs

* Added Test

* Exported

* Exported
  • Loading branch information
@arpitBhalla
arpitBhalla committed Apr 12, 2021
1 parent 19566ea commit 5c2d6b6
Show file tree
Hide file tree
Showing 9 changed files with 539 additions and 0 deletions.
1 change: 1 addition & 0 deletions README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -75,6 +75,7 @@ import { Button } from 'react-native-elements';
- [x] [Speed Dial](https://reactnativeelements.com/docs/speeddial)
- [x] [Switch](https://reactnativeelements.com/docs/switch)
- [x] [Tile](https://reactnativeelements.com/docs/tile)
- [x] [Tab](https://reactnativeelements.com/docs/tab)
- [x] [Tooltip](https://reactnativeelements.com/docs/tooltip)

## React Native Web support
Expand Down
4 changes: 4 additions & 0 deletions src/index.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -39,6 +39,7 @@ import Tooltip, { TooltipProps } from './tooltip/Tooltip';
import BottomSheet, { BottomSheetProps } from './bottomSheet/BottomSheet';
import LinearProgress, { LinearProgressProps } from './linearProgress';
import Switch, { SwitchProps } from './switch/switch';
import Tab, { TabItemProps, TabProps } from './tab/tab';
import {
AirbnbRating as BaseAirbnbRating,
Rating as BaseRating,
Expand Down Expand Up @@ -107,6 +108,7 @@ export {
Image,
FAB,
SpeedDial,
Tab,
};
export type {
AvatarProps,
Expand Down Expand Up @@ -146,5 +148,7 @@ export type {
SpeedDialActionProps,
SpeedDialProps,
ThemeProps,
TabItemProps,
TabProps,
ListItemAccordionProps,
};
254 changes: 254 additions & 0 deletions src/tab/__tests__/__snapshots__/tab.js.snap
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,254 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP

exports[`Tab Component should render without issues 1`] = `
<Fragment>
<View
onLayout={[Function]}
style={
Array [
Object {
"flexDirection": "row",
"position": "relative",
},
Object {
"backgroundColor": "#2089dc",
},
]
}
>
<TabItem
active={true}
key=".0"
onPress={[Function]}
theme={
Object {
"colors": Object {
"black": "#242424",
"disabled": "hsl(208, 8%, 90%)",
"divider": "#bcbbc1",
"error": "#ff190c",
"grey0": "#393e42",
"grey1": "#43484d",
"grey2": "#5e6977",
"grey3": "#86939e",
"grey4": "#bdc6cf",
"grey5": "#e1e8ee",
"greyOutline": "#bbb",
"platform": Object {
"android": Object {
"error": "#f44336",
"grey": "rgba(0, 0, 0, 0.54)",
"primary": "#2196f3",
"searchBg": "#dcdce1",
"secondary": "#9C27B0",
"success": "#4caf50",
"warning": "#ffeb3b",
},
"default": Object {
"error": "#ff3b30",
"grey": "#7d7d7d",
"primary": "#007aff",
"searchBg": "#dcdce1",
"secondary": "#5856d6",
"success": "#4cd964",
"warning": "#ffcc00",
},
"ios": Object {
"error": "#ff3b30",
"grey": "#7d7d7d",
"primary": "#007aff",
"searchBg": "#dcdce1",
"secondary": "#5856d6",
"success": "#4cd964",
"warning": "#ffcc00",
},
"web": Object {
"error": "#ff190c",
"grey": "#393e42",
"primary": "#2089dc",
"searchBg": "#303337",
"secondary": "#ca71eb",
"success": "#52c41a",
"warning": "#faad14",
},
},
"primary": "#2089dc",
"searchBg": "#303337",
"secondary": "#ca71eb",
"success": "#52c41a",
"warning": "#faad14",
"white": "#ffffff",
},
}
}
title="Tab 1"
variant="primary"
/>
<TabItem
active={false}
key=".1"
onPress={[Function]}
theme={
Object {
"colors": Object {
"black": "#242424",
"disabled": "hsl(208, 8%, 90%)",
"divider": "#bcbbc1",
"error": "#ff190c",
"grey0": "#393e42",
"grey1": "#43484d",
"grey2": "#5e6977",
"grey3": "#86939e",
"grey4": "#bdc6cf",
"grey5": "#e1e8ee",
"greyOutline": "#bbb",
"platform": Object {
"android": Object {
"error": "#f44336",
"grey": "rgba(0, 0, 0, 0.54)",
"primary": "#2196f3",
"searchBg": "#dcdce1",
"secondary": "#9C27B0",
"success": "#4caf50",
"warning": "#ffeb3b",
},
"default": Object {
"error": "#ff3b30",
"grey": "#7d7d7d",
"primary": "#007aff",
"searchBg": "#dcdce1",
"secondary": "#5856d6",
"success": "#4cd964",
"warning": "#ffcc00",
},
"ios": Object {
"error": "#ff3b30",
"grey": "#7d7d7d",
"primary": "#007aff",
"searchBg": "#dcdce1",
"secondary": "#5856d6",
"success": "#4cd964",
"warning": "#ffcc00",
},
"web": Object {
"error": "#ff190c",
"grey": "#393e42",
"primary": "#2089dc",
"searchBg": "#303337",
"secondary": "#ca71eb",
"success": "#52c41a",
"warning": "#faad14",
},
},
"primary": "#2089dc",
"searchBg": "#303337",
"secondary": "#ca71eb",
"success": "#52c41a",
"warning": "#faad14",
"white": "#ffffff",
},
}
}
title="Tab 2"
variant="primary"
/>
<TabItem
active={false}
key=".2"
onPress={[Function]}
theme={
Object {
"colors": Object {
"black": "#242424",
"disabled": "hsl(208, 8%, 90%)",
"divider": "#bcbbc1",
"error": "#ff190c",
"grey0": "#393e42",
"grey1": "#43484d",
"grey2": "#5e6977",
"grey3": "#86939e",
"grey4": "#bdc6cf",
"grey5": "#e1e8ee",
"greyOutline": "#bbb",
"platform": Object {
"android": Object {
"error": "#f44336",
"grey": "rgba(0, 0, 0, 0.54)",
"primary": "#2196f3",
"searchBg": "#dcdce1",
"secondary": "#9C27B0",
"success": "#4caf50",
"warning": "#ffeb3b",
},
"default": Object {
"error": "#ff3b30",
"grey": "#7d7d7d",
"primary": "#007aff",
"searchBg": "#dcdce1",
"secondary": "#5856d6",
"success": "#4cd964",
"warning": "#ffcc00",
},
"ios": Object {
"error": "#ff3b30",
"grey": "#7d7d7d",
"primary": "#007aff",
"searchBg": "#dcdce1",
"secondary": "#5856d6",
"success": "#4cd964",
"warning": "#ffcc00",
},
"web": Object {
"error": "#ff190c",
"grey": "#393e42",
"primary": "#2089dc",
"searchBg": "#303337",
"secondary": "#ca71eb",
"success": "#52c41a",
"warning": "#faad14",
},
},
"primary": "#2089dc",
"searchBg": "#303337",
"secondary": "#ca71eb",
"success": "#52c41a",
"warning": "#faad14",
"white": "#ffffff",
},
}
}
title="Tab 3"
variant="primary"
/>
<ForwardRef(AnimatedComponentWrapper)
style={
Array [
Object {
"bottom": 0,
"display": "flex",
"height": 2,
"position": "absolute",
},
Object {
"backgroundColor": "#ca71eb",
"transform": Array [
Object {
"translateX": 0,
},
],
},
undefined,
]
}
>
<View
style={
Object {
"width": 0,
}
}
/>
</ForwardRef(AnimatedComponentWrapper)>
</View>
</Fragment>
`;
20 changes: 20 additions & 0 deletions src/tab/__tests__/tab.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,20 @@
import React from 'react';
import { shallow } from 'enzyme';
import toJson from 'enzyme-to-json';
import { Tab } from '../tab';
import theme from '../../config/theme';

describe('Tab Component', () => {
it('should render without issues', () => {
const onValueChange = jest.fn();
const component = shallow(
<Tab theme={theme} onChange={onValueChange} value={0} variant="primary">
<Tab.Item theme={theme} title="Tab 1" />
<Tab.Item theme={theme} title="Tab 2" />
<Tab.Item theme={theme} title="Tab 3" />
</Tab>
);
expect(component.length).toBe(1);
expect(toJson(component)).toMatchSnapshot();
});
});
Loading

0 comments on commit 5c2d6b6

Please sign in to comment.