Web: Components: Added property onSelect, renamed tabs to component tabs
This commit is contained in:
parent
5d11a408a8
commit
14a0bc68a3
@ -47,26 +47,27 @@ const Label = styled.label`
|
|||||||
|
|
||||||
const BodyContainer = styled.div`
|
const BodyContainer = styled.div`
|
||||||
margin: 24px 16px 0px 16px;
|
margin: 24px 16px 0px 16px;
|
||||||
|
|
||||||
|
${props => props.isDisabled ? `pointer-events: none;` : ``}
|
||||||
`;
|
`;
|
||||||
|
|
||||||
class TabContainer extends Component {
|
class TabContainer extends Component {
|
||||||
constructor(props) {
|
constructor(props) {
|
||||||
super(props);
|
super(props);
|
||||||
this.state = {
|
this.state = {
|
||||||
activeTab: 0
|
activeTab: 0,
|
||||||
|
selected: props.onSelect
|
||||||
};
|
};
|
||||||
}
|
}
|
||||||
|
|
||||||
titleClick = (index) => {
|
titleClick = (item, index) => {
|
||||||
if (this.state.activeTab !== index) {
|
if (this.state.selected !== item.key) {
|
||||||
this.setState({ activeTab: index});
|
this.setState({ activeTab: index, selected: item.key });
|
||||||
|
this.props.onSelect && this.props.onSelect(item.key);
|
||||||
}
|
}
|
||||||
console.log(this.state.activeTab);
|
|
||||||
|
|
||||||
};
|
};
|
||||||
|
|
||||||
render() {
|
render() {
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<TabsContainer>
|
<TabsContainer>
|
||||||
<NavItem>
|
<NavItem>
|
||||||
@ -74,10 +75,8 @@ class TabContainer extends Component {
|
|||||||
<Label
|
<Label
|
||||||
selected={this.state.activeTab === index}
|
selected={this.state.activeTab === index}
|
||||||
isDisabled={this.props.isDisabled}
|
isDisabled={this.props.isDisabled}
|
||||||
key={item.id}
|
key={item.key}
|
||||||
onClick={() => {
|
onClick={this.titleClick.bind(this, item, index)}>
|
||||||
this.titleClick(index);
|
|
||||||
}}>
|
|
||||||
{item.title}
|
{item.title}
|
||||||
</Label>
|
</Label>
|
||||||
)}
|
)}
|
||||||
@ -88,10 +87,15 @@ class TabContainer extends Component {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
export default TabContainer;
|
|
||||||
|
|
||||||
TabContainer.propTypes = {
|
TabContainer.propTypes = {
|
||||||
children: PropTypes.object,
|
children: PropTypes.PropTypes.arrayOf(
|
||||||
isDisabled: PropTypes.boolean
|
PropTypes.object.isRequired
|
||||||
|
).isRequired,
|
||||||
|
isDisabled: PropTypes.bool,
|
||||||
|
onSelect: PropTypes.oneOfType([
|
||||||
|
PropTypes.number,
|
||||||
|
PropTypes.string
|
||||||
|
])
|
||||||
};
|
};
|
||||||
|
|
||||||
|
export default TabContainer;
|
@ -40,4 +40,4 @@ export { default as RadioButton } from './components/radio-button'
|
|||||||
export { default as TextArea } from './components/text-area'
|
export { default as TextArea } from './components/text-area'
|
||||||
export { default as ToggleButton } from './components/toggle-button'
|
export { default as ToggleButton } from './components/toggle-button'
|
||||||
export { default as LinkWithDropdown } from './components/link-with-dropdown'
|
export { default as LinkWithDropdown } from './components/link-with-dropdown'
|
||||||
export { default as TabContainer } from './components/tabs'
|
export { default as TabContainer } from './components/tabs-container'
|
||||||
|
@ -45,19 +45,17 @@ const array_items = [
|
|||||||
<TabContainer>{array_items}</TabContainer>
|
<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
|
#### Array Items Properties
|
||||||
|
|
||||||
| Props | Type | Required | Values | Default | Description |
|
| Props | Type | Required | Values | Default | Description |
|
||||||
| ---------- | ----------- | :------: | ----------------------------------------- | ------------ | --------------------- |
|
| ---------- | ----------- | :------: | ----------------------------------------- | ------------ | --------------------- |
|
||||||
| `id` | `string` | true | - | - | Index of object array
|
| `id` | `string` | true | - | - | Index of object array
|
||||||
| `title` | `string` | true | - | - | Tabs title
|
| `title` | `string` | true | - | - | Tabs title
|
||||||
| `content` | `object` | true | - | - | Content in Tab
|
| `content` | `object` | true | - | - | Content in Tab
|
||||||
|
|
||||||
|
|
||||||
#### TabContainer Properties
|
|
||||||
|
|
||||||
| Props | Type | Required | Values | Default | Description |
|
|
||||||
| ---------- | ----------- | :------: | ----------------------------------------- | ------------ | --------------------- |
|
|
||||||
| `isDisabled` | `boolean` | - | - | - | Disable the TabContainer
|
|
||||||
|
|
||||||
|
|
@ -5,11 +5,11 @@ import withReadme from 'storybook-readme/with-readme';
|
|||||||
import Readme from './README.md';
|
import Readme from './README.md';
|
||||||
import { TabContainer, Text } from 'asc-web-components';
|
import { TabContainer, Text } from 'asc-web-components';
|
||||||
import Section from '../../.storybook/decorators/section';
|
import Section from '../../.storybook/decorators/section';
|
||||||
import { BooleanValue } from 'react-values';
|
import { action } from '@storybook/addon-actions';
|
||||||
|
|
||||||
const array_items = [
|
const array_items = [
|
||||||
{
|
{
|
||||||
id: "0",
|
key: "tab0",
|
||||||
title: <Text.Body> Title1 </Text.Body>,
|
title: <Text.Body> Title1 </Text.Body>,
|
||||||
content:
|
content:
|
||||||
<div >
|
<div >
|
||||||
@ -19,7 +19,7 @@ const array_items = [
|
|||||||
</div>
|
</div>
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
id: "1",
|
key: "tab1",
|
||||||
title: <Text.Body> Title2 </Text.Body>,
|
title: <Text.Body> Title2 </Text.Body>,
|
||||||
content:
|
content:
|
||||||
<div >
|
<div >
|
||||||
@ -29,7 +29,7 @@ const array_items = [
|
|||||||
</div>
|
</div>
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
id: "2",
|
key: "tab2",
|
||||||
title: <Text.Body> Title3 </Text.Body>,
|
title: <Text.Body> Title3 </Text.Body>,
|
||||||
content:
|
content:
|
||||||
<div>
|
<div>
|
||||||
@ -39,7 +39,7 @@ const array_items = [
|
|||||||
</div>
|
</div>
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
id: "3",
|
key: "tab3",
|
||||||
title: <Text.Body> Title4 </Text.Body>,
|
title: <Text.Body> Title4 </Text.Body>,
|
||||||
content:
|
content:
|
||||||
<div>
|
<div>
|
||||||
@ -49,7 +49,7 @@ const array_items = [
|
|||||||
</div>
|
</div>
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
id: "4",
|
key: "tab4",
|
||||||
title: <Text.Body> Title5 </Text.Body>,
|
title: <Text.Body> Title5 </Text.Body>,
|
||||||
content:
|
content:
|
||||||
<div>
|
<div>
|
||||||
@ -66,11 +66,12 @@ storiesOf('Components|TabContainer', module)
|
|||||||
.add('base', () => {
|
.add('base', () => {
|
||||||
return (
|
return (
|
||||||
<Section>
|
<Section>
|
||||||
<BooleanValue>
|
<TabContainer
|
||||||
<TabContainer isDisabled={boolean('isDisabled', false)}>
|
onSelect={index => action("Selected item")(index)}
|
||||||
{array_items}
|
isDisabled={boolean('isDisabled', false)}
|
||||||
</TabContainer>
|
>
|
||||||
</BooleanValue>
|
{array_items}
|
||||||
|
</TabContainer>
|
||||||
</Section>
|
</Section>
|
||||||
);
|
);
|
||||||
});
|
});
|
Loading…
Reference in New Issue
Block a user