<FileTabs /> #8

itsmepetrov · 2017-01-17T16:13:36Z

No description provided.

itsmepetrov · 2017-01-17T17:09:26Z

src/ColoredTabs/Item.js

+  render() {
+    const {
+      color,
+      name,


add active prop here

itsmepetrov · 2017-01-17T17:10:58Z

src/ColoredTabs/Item.js

+            this.props.active ? styles.tabContainerActive : styles.tabContainer,
+               { backgroundColor: color },
+          ]}>
+          <Text style={styles.text}>{name.toUpperCase()}</Text>


remove forced toUpperCase

itsmepetrov · 2017-01-17T17:15:16Z

src/ColoredTabs/ColoredTabs.js

+          {Children.map(this.props.children.filter(c => c), child => (
+            child.props.id === this.state.selected ?
+              cloneElement(child, { active: true, onPress: this.handleTabPress }) :
+              cloneElement(child, { active: false, onPress: this.handleTabPress })


rewrite like:

{Children.map(children, child => cloneElement(child, { active: child.props.id === this.state.selected, onPress: this.handleTabPress }))}

itsmepetrov · 2017-01-17T17:19:24Z

src/ColoredTabs/ColoredTabs.js

+
+  static Item = Item
+
+  constructor(props) {


use class properties for initial state instead of constructor:

class Example { state = { value: 10 } }

itsmepetrov · 2017-01-17T18:59:39Z

src/ColoredTabs/Item.js

+}
+
+const styles = StyleSheet.create({
+  tabContainer: {


rename to container

itsmepetrov · 2017-01-17T19:00:03Z

src/ColoredTabs/Item.js

+    alignItems: 'center',
+    height: 40,
+  },
+  tabContainerActive: {


rename to active

itsmepetrov · 2017-01-17T19:04:07Z

src/ColoredTabs/Item.js

+        onPress={this.handlePress}>
+        <View
+          style={[
+            active ? styles.tabContainerActive : styles.tabContainer,


move container styles logic to render body:

const containerStyles = [ styles.container, { backgroundColor: color }, active && styles.active ]

itsmepetrov · 2017-01-17T19:04:37Z

src/ColoredTabs/Item.js

+
+  static defaultProps = {
+    active: false,
+    onPess: () => (console.log('onPess')),


remove console.log

itsmepetrov · 2017-01-17T19:04:57Z

src/ColoredTabs/Item.js

+
+export default class Item extends Component {
+  static propTypes = {
+    id: PropTypes.string,


make required

itsmepetrov · 2017-01-17T19:05:39Z

src/ColoredTabs/Item.js

+    id: PropTypes.string,
+    active: PropTypes.bool,
+    color: PropTypes.string,
+    name: PropTypes.string,


itsmepetrov · 2017-01-17T19:05:47Z

src/ColoredTabs/Item.js

+    active: PropTypes.bool,
+    color: PropTypes.string,
+    name: PropTypes.string,
+    onPress: PropTypes.func,


The same as with "active" - we don't pas "onPress" to every item. So, if we make it required and pass single onPress to entire component, we have warning.

itsmepetrov · 2017-01-17T19:06:22Z

src/ColoredTabs/Item.js

+import React, { Component, PropTypes } from 'react'
+import { View, Text, TouchableWithoutFeedback, StyleSheet } from 'react-native'
+
+export default class Item extends Component {


Change name to ColoredTabsItem

itsmepetrov · 2017-01-17T19:08:40Z

src/ColoredTabs/ColoredTabs.js

+  render() {
+    return (
+      <View style={styles.container}>
+        <View style={styles.tabContainer}>


do we really need this View wrapper?

I think we can get rid it.

itsmepetrov · 2017-01-17T19:08:55Z

src/ColoredTabs/ColoredTabs.js

+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  tabContainer: {


change name to wrapper

itsmepetrov · 2017-01-18T10:01:13Z

Blocked by #4

itsmepetrov · 2017-01-19T06:38:37Z

@fAns1k please rebase

itsmepetrov · 2017-01-19T15:44:54Z

Rename to FileTabs, make text font size larger and bold, add more examples.

itsmepetrov · 2017-01-19T15:49:45Z

uiexplorer/examples/ColoredTabs.js

+        <ColoredTabs.Item id="1" name="Two" color="orange" />
+        <ColoredTabs.Item id="2" name="Three" color="chartreuse" />
+        <ColoredTabs.Item id="3" name="Four" color="dodgerblue" />
+      < /ColoredTabs>


remove empty space

isnifer · 2017-01-24T05:26:23Z

README.md

+
+| Name | Desc | Type | Default
+| --- | --- | --- | --- |
+| `name` | Text of tab. | String | `undefined`


It would be nice if you rename this prop into title like in other components // @itsmepetrov

* Implemented Carousel component * Implemented Carousel tests * Updated tests for Carousel, some fixes in openExamplesFor method * Updated e2e tests * Updated e2e tests * Updated e2e tests * Updated e2e tests * Added Dash component * Added info about Carousel component n README.md * Updated info about Carousel component in README.md * Added info about Dash component in README.md * Updated Carousel.Item component * Updated unit tests * Updated openExamplesFor tests

…examples.

# Conflicts: # __tests__/unit/__snapshots__/Storyshots.test.js.snap

isnifer · 2017-01-24T15:49:26Z

README.md

+| Name | Desc | Type | Default
+| --- | --- | --- | --- |
+| `selected` | id of selected tab.  | String | `undefined`
+| `onPress` | Handle press on tab action. Receive id of selected tab as argument. | Function | `undefined`


this function has default value () => {}

isnifer · 2017-01-24T15:50:03Z

README.md

+| `color` | Color of tab | String | `undefined`
+| `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 | `undefined`


this function has default value () => {}

isnifer · 2017-01-24T15:52:46Z

README.md

+      <ColoredTabs.Item id="2" name="Three" color="chartreuse" />
+      <ColoredTabs.Item id="3" name="Four" color="dodgerblue" />
+    < /ColoredTabs>
+)


your example is not working, rewrite like this:

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 = () => ( <ColoredTabs onPress={this.handlePress}> <ColoredTabs.Item id="0" title="One" color="crimson" /> <ColoredTabs.Item id="1" title="Two" color="orange" /> <ColoredTabs.Item id="2" title="Three" color="chartreuse" /> <ColoredTabs.Item id="3" title="Four" color="dodgerblue" /> </ColoredTabs> ) }

Also please check eslint-plugin in your editor. We use 2 spaces as tab length

isnifer · 2017-01-26T07:02:11Z

src/FileTabs/FileTabs.js

+  container: { backgroundColor: ThemeConstants.BLACK },
+})
+
+export default themeable('Label', baseStyles, {


FileTabs, not Label

- when 'selected' does not defined - set first tab, as selected.

isnifer · 2017-01-26T07:02:35Z

README.md

@@ -3,6 +3,52 @@ React Native Tipsi custom UI elements

 ## Components

+### `<ColoredTabs />`


No description provided.

isnifer · 2017-01-26T07:02:44Z

README.md

+
+Customizable colored tabs.
+
+#### ColoredTabs Props


isnifer · 2017-01-26T07:02:55Z

README.md

+| `onPress` | Handle press on tab action. Receive id of selected tab as argument. | Function | `undefined`
+
+
+#### ColoredTabs.Item Props


isnifer · 2017-01-26T07:03:13Z

README.md

+
+```js
+import React from 'react'
+import { ColoredTabs } from 'tipsi-ui-kit'


isnifer · 2017-01-26T07:03:19Z

README.md

+handlePress = (id) => (console.log(`Tab with id ${id} is clicked!`)
+
+const Example = () => (
+    <ColoredTabs onPress={this.handlePress}>


isnifer · 2017-01-26T07:03:24Z

README.md

+
+const Example = () => (
+    <ColoredTabs onPress={this.handlePress}>
+      <ColoredTabs.Item id="0" name="One" color="crimson" />


isnifer · 2017-02-09T03:01:31Z

README.md

+
+```js
+import React, { PureComponent } from 'react'
+import { ColoredTabs } from 'tipsi-ui-kit'


isnifer · 2017-02-09T03:01:44Z

README.md

+      <ColoredTabs.Item id="1" title="Two" color="orange" />
+      <ColoredTabs.Item id="2" title="Three" color="chartreuse" />
+      <ColoredTabs.Item id="3" title="Four" color="dodgerblue" />
+    </ColoredTabs>


itsmepetrov · 2017-02-14T11:45:39Z

Please rebase

isnifer · 2017-02-14T15:40:47Z

Also, don't forget check my messages too :)

itsmepetrov requested a review from isnifer January 17, 2017 16:13

itsmepetrov commented Jan 17, 2017

View reviewed changes

itsmepetrov changed the title ~~[WIP] <ColoredTabs />~~ <ColoredTabs /> Jan 18, 2017

itsmepetrov commented Jan 19, 2017

View reviewed changes

isnifer reviewed Jan 24, 2017

View reviewed changes

itsmepetrov changed the title ~~<ColoredTabs />~~ <FileTabs /> Jan 24, 2017

dmitriy and others added 20 commits January 24, 2017 14:10

- first iteration

12cc28f

- added onPress listener

7395dc6

- added unit and e2e tests

aadc6f9

- updated readme

dc55d6e

- first iteration

a03438a

- added unit and e2e tests

72fe6a5

- fixes after review

a3c8461

- updated unit tests and paths in e2e tests

bb5f175

- fixes after review 2

862c7a7

- first iteration

2fc4eb3

- added unit and e2e tests

59535c6

- first iteration

1545afa

- added unit and e2e tests

8e02f8b

- Renamed to FileTabs, make text font size larger and bold, add more …

15a4280

…examples.

- Used our themes for FileTabs

e30ef36

- first iteration

43d17b6

- added onPress listener

a7d8959

- added unit and e2e tests

b45bf95

- first iteration

47fbda7

dmitriy and others added 17 commits January 24, 2017 14:34

- added unit and e2e tests

70ae34c

- fixes after review

e77882d

- updated unit tests and paths in e2e tests

a3805fc

- fixes after review 2

33e2cb1

- Renamed to FileTabs, make text font size larger and bold, add more …

f2ecbe5

…examples.

- Used our themes for FileTabs

39a8739

- first iteration

b21df44

- added onPress listener

2932729

- added unit and e2e tests

65c89a5

- first iteration

4b06aea

- added unit and e2e tests

b128c4b

- fixes after review

dfe1c47

- updated unit tests and paths in e2e tests

9565047

- fixes after review 2

539700d

- e2e test fixes

c9e24e7

# Conflicts: # __tests__/unit/__snapshots__/Storyshots.test.js.snap

- remove duplicate ColoredTabs classes and tests

a63c737

Rebase done right

00a6a34

itsmepetrov force-pushed the colored_tabs branch from 0076b8b to 00a6a34 Compare January 24, 2017 07:41

isnifer reviewed Jan 24, 2017

View reviewed changes

isnifer reviewed Jan 26, 2017

View reviewed changes

- changes after review

50d3316

- when 'selected' does not defined - set first tab, as selected.

isnifer reviewed Feb 9, 2017

View reviewed changes

README.md

```js

import React, { PureComponent } from 'react'

import { ColoredTabs } from 'tipsi-ui-kit'

Copy link

Contributor

isnifer Feb 9, 2017

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

FileTabs

isnifer reviewed Feb 9, 2017

View reviewed changes

		@@ -3,6 +3,52 @@ React Native Tipsi custom UI elements

		## Components

		### `<ColoredTabs />`

		\| `onPress` \| Handle press on tab action. Receive id of selected tab as argument. \| Function \| `undefined`


		#### ColoredTabs.Item Props

<FileTabs /> #8

Are you sure you want to change the base?

<FileTabs /> #8

Conversation

itsmepetrov commented Jan 17, 2017

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

itsmepetrov commented Jan 18, 2017

itsmepetrov commented Jan 19, 2017

itsmepetrov commented Jan 19, 2017

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

itsmepetrov commented Feb 14, 2017

isnifer commented Feb 14, 2017