Web: Components: Added property onSelect, renamed tabs to component tabs

web/ASC.Web.Components/src/components/tabs-container/index.js

@@ -47,26 +47,27 @@ const Label = styled.label`
 
 const BodyContainer = styled.div`
   margin: 24px 16px 0px 16px;
+
+  ${props => props.isDisabled ? `pointer-events: none;` : ``}
 `;
 
 class TabContainer extends Component {
   constructor(props) {
     super(props);
     this.state = {
-      activeTab: 0
+      activeTab: 0,
+      selected: props.onSelect
     };
   }
 
-  titleClick = (index) => {
-    if (this.state.activeTab !== index) {
-      this.setState({ activeTab: index});
+  titleClick = (item, index) => {
+    if (this.state.selected !== item.key) {
+      this.setState({ activeTab: index, selected: item.key });
+      this.props.onSelect && this.props.onSelect(item.key);
     }
-    console.log(this.state.activeTab);
-    
   };
 
   render() {
-   
     return (
       <TabsContainer>
         <NavItem>
@@ -74,10 +75,8 @@ class TabContainer extends Component {
             <Label
               selected={this.state.activeTab === index}
               isDisabled={this.props.isDisabled}
-              key={item.id}
-              onClick={() => {
-                this.titleClick(index);
-              }}>
+              key={item.key}
+              onClick={this.titleClick.bind(this, item, index)}>
               {item.title}
             </Label>
           )}
@@ -88,10 +87,15 @@ class TabContainer extends Component {
   }
 }
 
-export default TabContainer;
-
 TabContainer.propTypes = {
-  children: PropTypes.object,
-  isDisabled: PropTypes.boolean
+  children: PropTypes.PropTypes.arrayOf(
+    PropTypes.object.isRequired
+  ).isRequired,
+  isDisabled: PropTypes.bool,
+  onSelect: PropTypes.oneOfType([
+    PropTypes.number,
+    PropTypes.string
+  ])
 };
 
+export default TabContainer;

web/ASC.Web.Components/src/index.js

@@ -40,4 +40,4 @@ export { default as RadioButton } from './components/radio-button'
 export { default as TextArea } from './components/text-area'
 export { default as ToggleButton } from './components/toggle-button'
 export { default as LinkWithDropdown } from './components/link-with-dropdown'
-export { default as TabContainer } from './components/tabs'
+export { default as TabContainer } from './components/tabs-container'

web/ASC.Web.Storybook/stories/tabs-container/README.md

@@ -45,6 +45,13 @@ const array_items = [
 <TabContainer>{array_items}</TabContainer>
 ```
 
+#### TabContainer Properties
+
+| Props      | Type        | Required | Values                                    | Default      | Description           |
+| ---------- | ----------- | :------: | ----------------------------------------- | ------------ | --------------------- |
+| `isDisabled`                | `boolean` |    -    | -                            | -       | Disable the TabContainer
+| `onSelect`             | `func`            |    -     | -                            | -       | Triggered when a title is selected  |
+
 #### Array Items Properties
 
 | Props      | Type        | Required | Values                                    | Default      | Description           |
@@ -52,12 +59,3 @@ const array_items = [
 | `id`                | `string` |    true    | -                            | -       | Index of object array 
 | `title`                | `string` |    true    | -                            | -       | Tabs title         
 | `content`                | `object` |    true   | -                            | -       | Content in Tab
-
-
-#### TabContainer Properties
-
-| Props      | Type        | Required | Values                                    | Default      | Description           |
-| ---------- | ----------- | :------: | ----------------------------------------- | ------------ | --------------------- |
-| `isDisabled`                | `boolean` |    -    | -                            | -       | Disable the TabContainer
-
-

web/ASC.Web.Storybook/stories/tabs-container/index.stories.js

@@ -5,11 +5,11 @@ import withReadme from 'storybook-readme/with-readme';
 import Readme from './README.md';
 import { TabContainer, Text } from 'asc-web-components';
 import Section from '../../.storybook/decorators/section';
-import { BooleanValue } from 'react-values';
+import { action } from '@storybook/addon-actions';
 
 const array_items = [
     {
-        id: "0",
+        key: "tab0",
         title: <Text.Body> Title1 </Text.Body>,
         content:
             <div >
@@ -19,7 +19,7 @@ const array_items = [
             </div>
     },
     {
-        id: "1",
+        key: "tab1",
         title: <Text.Body> Title2 </Text.Body>,
         content:
             <div >
@@ -29,7 +29,7 @@ const array_items = [
             </div>
     },
     {
-        id: "2",
+        key: "tab2",
         title: <Text.Body> Title3 </Text.Body>,
         content:
             <div>
@@ -39,7 +39,7 @@ const array_items = [
             </div>
     },
     {
-        id: "3",
+        key: "tab3",
         title: <Text.Body> Title4 </Text.Body>,
         content:
             <div>
@@ -49,7 +49,7 @@ const array_items = [
             </div>
     },
     {
-        id: "4",
+        key: "tab4",
         title: <Text.Body> Title5 </Text.Body>,
         content:
             <div>
@@ -66,11 +66,12 @@ storiesOf('Components|TabContainer', module)
     .add('base', () => {
         return (
             <Section>
-                <BooleanValue>
-                    <TabContainer isDisabled={boolean('isDisabled', false)}>
+                <TabContainer
+                    onSelect={index => action("Selected item")(index)}
+                    isDisabled={boolean('isDisabled', false)}
+                >
                     {array_items}
                 </TabContainer>
-                </BooleanValue>
             </Section>
         );
     });