diff --git a/README.md b/README.md
index 90b54fc..8d89a11 100644
--- a/README.md
+++ b/README.md
@@ -3,6 +3,54 @@ React Native Tipsi custom UI elements
## Components
+### ``
+
+Customizable colored tabs.
+
+#### ColoredTabs Props
+
+| Name | Desc | Type | Default
+| --- | --- | --- | --- |
+| `selected` | id of selected tab. | String | `first tab`
+| `onPress` | Handle press on tab action. Receive id of selected tab as argument. | Function | `() => {}`
+
+
+#### ColoredTabs.Item Props
+
+| Name | Desc | Type | Default
+| --- | --- | --- | --- |
+| `title` | Text of tab. | String | `undefined`
+| `color` | Color of tab | String | `#82909d`
+| `id` | Tab id. This id will passed to `onPress` for identify action. | String | `undefined`
+| `active` | Show item as active | Boolean | `false`
+| `onPress` | Handle press action | Function | `() => {}`
+
+#### Example
+
+
+```js
+import React, { PureComponent } from 'react'
+import { ColoredTabs } from 'tipsi-ui-kit'
+
+class Example extends PureComponent {
+ handlePress = id => console.log(`Tab with id ${id} is clicked!`)
+
+ const Example = () => (
+
+
+
+
+
+
+ )
+}
+```
+
+#### Preview
+
+
+
+
### ``
Component to draw customisable dashed lines
diff --git a/__tests__/e2e/09_FileTabs.test.js b/__tests__/e2e/09_FileTabs.test.js
new file mode 100644
index 0000000..f332662
--- /dev/null
+++ b/__tests__/e2e/09_FileTabs.test.js
@@ -0,0 +1,46 @@
+import test from 'tape-async'
+import helper from 'tipsi-appium-helper'
+
+const { driver, select, idFromXPath } = helper
+
+test('', async (t) => {
+ const tabsGroupId = select({
+ ios: idFromXPath(`//
+ XCUIElementTypeScrollView[1]/*/*/
+ XCUIElementTypeOther[2]/XCUIElementTypeOther[1]
+ `),
+ android: idFromXPath(`//
+ android.widget.ScrollView[1]/android.view.View[1]/android.view.View[1]
+ `),
+ })
+ const tagItemId = select({
+ ios: idFromXPath(`
+ ${tabsGroupId}/XCUIElementTypeOther[tabId]
+ `),
+ android: idFromXPath(`
+ ${tabsGroupId}/android.view.View[tabId]
+ `),
+ })
+
+ try {
+ await helper.openExampleFor('')
+
+ for (const tabId of [1, 2, 3, 4]) {
+ const currentTabId = select({
+ ios: tagItemId.replace('tabId', tabId),
+ android: tagItemId.replace('tabId', tabId + 1),
+ })
+ await driver.waitForVisible(currentTabId, 20000)
+ await driver.click(currentTabId)
+
+ t.pass(`tab ${tabId} clicked`)
+ }
+
+ t.pass(' example should be visible')
+ } catch (error) {
+ await helper.screenshot()
+ await helper.source()
+
+ throw error
+ }
+})
diff --git a/__tests__/unit/__snapshots__/Storyshots.test.js.snap b/__tests__/unit/__snapshots__/Storyshots.test.js.snap
index 10cb5bd..8005e41 100644
--- a/__tests__/unit/__snapshots__/Storyshots.test.js.snap
+++ b/__tests__/unit/__snapshots__/Storyshots.test.js.snap
@@ -3112,6 +3112,911 @@ exports[`UIExplorer components Thickness of each dash - Prop: dashThick
style={undefined} />
`;
+exports[`UIExplorer components Simple example - Props: color 1`] = `
+
+
+
+ Red
+
+
+
+
+ Orange
+
+
+
+
+ Green
+
+
+
+
+ Blue
+
+
+
+`;
+
+exports[`UIExplorer components Simple example 2 - Props: default 1`] = `
+
+
+
+ Left
+
+
+
+
+ Center
+
+
+
+
+ Right
+
+
+
+`;
+
+exports[`UIExplorer components Simple example 3 - Props: theme 1`] = `
+
+
+
+ One
+
+
+
+
+ Two
+
+
+
+
+ Three
+
+
+
+
+ Four
+
+
+
+`;
+
+exports[`UIExplorer components Simple example 4 - Props: onPress 1`] = `
+
+
+
+ One
+
+
+
+
+ Two
+
+
+
+
+ Three
+
+
+
+
+ Four
+
+
+
+`;
+
exports[`UIExplorer components Custom Text and Custom Background - Label with custom text and style props 1`] = `
{},
+ styles: {},
+ }
+
+ static Item = Item
+
+ state = { selected: this.props.selected || this.props.children[0].props.id }
+
+ handleTabPress = (id) => {
+ this.setState({
+ selected: id,
+ })
+ this.props.onPress(id)
+ }
+
+ render() {
+ const { styles } = this.props
+ return (
+
+ {Children.map(this.props.children, child => cloneElement(child, {
+ active: child.props.id === this.state.selected,
+ onPress: this.handleTabPress,
+ }))}
+
+ )
+ }
+}
+
+const baseStyles = StyleSheet.create({
+ container: {
+ height: 60,
+ flex: 1,
+ flexDirection: 'row',
+ justifyContent: 'space-around',
+ alignItems: 'flex-end',
+ },
+})
+
+const primary = StyleSheet.create({
+ container: { backgroundColor: ThemeConstants.PRIMARY },
+})
+
+const alert = StyleSheet.create({
+ container: { backgroundColor: ThemeConstants.ALERT },
+})
+
+const warning = StyleSheet.create({
+ container: { backgroundColor: ThemeConstants.WARNING },
+})
+
+const success = StyleSheet.create({
+ container: { backgroundColor: ThemeConstants.SUCCESS },
+})
+
+const black = StyleSheet.create({
+ container: { backgroundColor: ThemeConstants.BLACK },
+})
+
+export default themeable('FileTabs', baseStyles, {
+ alert,
+ warning,
+ success,
+ primary,
+ black,
+})(FileTabs)
diff --git a/src/FileTabs/Item.js b/src/FileTabs/Item.js
new file mode 100644
index 0000000..4d58e66
--- /dev/null
+++ b/src/FileTabs/Item.js
@@ -0,0 +1,103 @@
+import React, { Component, PropTypes } from 'react'
+import { View, Text, TouchableWithoutFeedback, StyleSheet } from 'react-native'
+import ThemeConstants from '../utils/ThemeConstants'
+import themeable from '../utils/themeable'
+
+class FileTabsItem extends Component {
+ static propTypes = {
+ id: PropTypes.string.isRequired,
+ active: PropTypes.bool,
+ color: PropTypes.string,
+ title: PropTypes.string.isRequired,
+ onPress: PropTypes.func,
+ styles: PropTypes.object,
+ }
+
+ static defaultProps = {
+ active: false,
+ color: undefined,
+ onPress: () => {},
+ styles: {},
+ }
+
+ handlePress = () => {
+ this.props.onPress(this.props.id)
+ }
+
+ render() {
+ const {
+ color,
+ title,
+ active,
+ styles,
+ } = this.props
+
+ const containerStyles = [
+ styles.container,
+ color && { backgroundColor: color },
+ active && styles.active,
+ ]
+
+ return (
+
+
+ {title}
+
+
+ )
+ }
+}
+
+const baseStyles = StyleSheet.create({
+ container: {
+ margin: -5,
+ borderTopLeftRadius: 5,
+ borderTopRightRadius: 5,
+ flex: 1,
+ justifyContent: 'center',
+ alignItems: 'center',
+ height: 40,
+ backgroundColor: ThemeConstants.SECONDARY,
+ },
+ active: {
+ height: 50,
+ zIndex: 1,
+ },
+ text: {
+ textAlign: 'center',
+ color: 'white',
+ padding: 8,
+ fontSize: 20,
+ fontWeight: 'bold',
+ },
+})
+
+const primary = StyleSheet.create({
+ container: { backgroundColor: ThemeConstants.PRIMARY },
+})
+
+const alert = StyleSheet.create({
+ container: { backgroundColor: ThemeConstants.ALERT },
+})
+
+const warning = StyleSheet.create({
+ container: { backgroundColor: ThemeConstants.WARNING },
+})
+
+const success = StyleSheet.create({
+ container: { backgroundColor: ThemeConstants.SUCCESS },
+})
+
+const black = StyleSheet.create({
+ container: { backgroundColor: ThemeConstants.BLACK },
+})
+
+export default themeable('FileTabsItem', baseStyles, {
+ alert,
+ warning,
+ success,
+ primary,
+ black,
+})(FileTabsItem)
diff --git a/src/FileTabs/index.js b/src/FileTabs/index.js
new file mode 100644
index 0000000..856658e
--- /dev/null
+++ b/src/FileTabs/index.js
@@ -0,0 +1 @@
+export { default } from './FileTabs'
diff --git a/src/index.js b/src/index.js
index 7a16e82..a65790c 100644
--- a/src/index.js
+++ b/src/index.js
@@ -9,6 +9,7 @@ export { default as Carousel } from './Carousel'
export { default as Label } from './Label'
export { default as LabelRating } from './LabelRating'
export { default as RangeSlider } from './RangeSlider'
+export { default as FileTabs } from './FileTabs'
// Utils
export { default as ThemeRegister } from './utils/ThemeRegister'
diff --git a/uiexplorer/examples/FileTabs.js b/uiexplorer/examples/FileTabs.js
new file mode 100644
index 0000000..4b1f443
--- /dev/null
+++ b/uiexplorer/examples/FileTabs.js
@@ -0,0 +1,53 @@
+import React from 'react'
+import register from '../core/utils/register'
+import { FileTabs } from '../../src'
+
+register.addExample({
+ type: 'components',
+ title: '',
+ description: 'Star-rating component',
+ examples: [{
+ title: 'Simple example',
+ description: 'Props: color',
+ render: () => ( // eslint-disable-line react/prop-types
+
+
+
+
+
+
+ ),
+ }, {
+ title: 'Simple example 2',
+ description: 'Props: default',
+ render: () => ( // eslint-disable-line react/prop-types
+
+
+
+
+
+ ),
+ }, {
+ title: 'Simple example 3',
+ description: 'Props: theme',
+ render: () => ( // eslint-disable-line react/prop-types
+
+
+
+
+
+
+ ),
+ }, {
+ title: 'Simple example 4',
+ description: 'Props: onPress',
+ render: ({ action }) => ( // eslint-disable-line react/prop-types
+