Skip to content

Commit

Permalink
[Docs] Converted EuiTabs and EuiToastList examples to functional comp…
Browse files Browse the repository at this point in the history 
…onents (#3322)

* Converted controlled tabs to functional component

* Converted tabbed content to functional component

* Converted condensed tabs and tabs example to functional component

* Converted toast list examples to functional component
  • Loading branch information
@ashikmeerankutty
ashikmeerankutty authored Apr 15, 2020
1 parent a939869 commit 971754b
Show file tree
Hide file tree
Showing 5 changed files with 303 additions and 368 deletions.
217 changes: 101 additions & 116 deletions src-docs/src/views/tabs/controlled.js
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import React, { Component, Fragment } from 'react';
import React, { Fragment, useState } from 'react';

import {
EuiButton,
Expand All @@ -9,127 +9,112 @@ import {
EuiSpacer,
} from '../../../../src/components';

class EuiTabsExample extends Component {
constructor(props) {
super(props);

this.tabs = [
{
id: 'cobalt',
name: 'Cobalt',
content: (
<Fragment>
<EuiSpacer />
<EuiTitle>
<h3>Cobalt</h3>
</EuiTitle>
<EuiText>
Cobalt is a chemical element with symbol Co and atomic number 27.
Like nickel, cobalt is found in the Earth&rsquo;s crust only in
chemically combined form, save for small deposits found in alloys
of natural meteoric iron. The free element, produced by reductive
smelting, is a hard, lustrous, silver-gray metal.
</EuiText>
</Fragment>
),
},
{
id: 'dextrose',
name: 'Dextrose',
content: (
<Fragment>
<EuiSpacer />
<EuiTitle>
<h3>Dextrose</h3>
</EuiTitle>
<EuiText>
Intravenous sugar solution, also known as dextrose solution, is a
mixture of dextrose (glucose) and water. It is used to treat low
blood sugar or water loss without electrolyte loss.
</EuiText>
</Fragment>
),
},
{
id: 'hydrogen',
name: (
<span>
<EuiIcon type="heatmap" />
&nbsp;Hydrogen
</span>
),
content: (
<Fragment>
<EuiSpacer />
<EuiTitle>
<h3>Hydrogen</h3>
</EuiTitle>
<EuiText>
Hydrogen is a chemical element with symbol H and atomic number 1.
With a standard atomic weight of 1.008, hydrogen is the lightest
element on the periodic table
</EuiText>
</Fragment>
),
},
{
id: 'monosodium_glutammate',
name: 'Monosodium Glutamate',
content: (
<Fragment>
<EuiSpacer />
<EuiTitle>
<h3>Monosodium Glutamate</h3>
</EuiTitle>
<EuiText>
Monosodium glutamate (MSG, also known as sodium glutamate) is the
sodium salt of glutamic acid, one of the most abundant naturally
occurring non-essential amino acids. Monosodium glutamate is found
naturally in tomatoes, cheese and other foods.
</EuiText>
</Fragment>
),
},
];
const tabs = [
{
id: 'cobalt',
name: 'Cobalt',
content: (
<Fragment>
<EuiSpacer />
<EuiTitle>
<h3>Cobalt</h3>
</EuiTitle>
<EuiText>
Cobalt is a chemical element with symbol Co and atomic number 27. Like
nickel, cobalt is found in the Earth&rsquo;s crust only in chemically
combined form, save for small deposits found in alloys of natural
meteoric iron. The free element, produced by reductive smelting, is a
hard, lustrous, silver-gray metal.
</EuiText>
</Fragment>
),
},
{
id: 'dextrose',
name: 'Dextrose',
content: (
<Fragment>
<EuiSpacer />
<EuiTitle>
<h3>Dextrose</h3>
</EuiTitle>
<EuiText>
Intravenous sugar solution, also known as dextrose solution, is a
mixture of dextrose (glucose) and water. It is used to treat low blood
sugar or water loss without electrolyte loss.
</EuiText>
</Fragment>
),
},
{
id: 'hydrogen',
name: (
<span>
<EuiIcon type="heatmap" />
&nbsp;Hydrogen
</span>
),
content: (
<Fragment>
<EuiSpacer />
<EuiTitle>
<h3>Hydrogen</h3>
</EuiTitle>
<EuiText>
Hydrogen is a chemical element with symbol H and atomic number 1. With
a standard atomic weight of 1.008, hydrogen is the lightest element on
the periodic table
</EuiText>
</Fragment>
),
},
{
id: 'monosodium_glutammate',
name: 'Monosodium Glutamate',
content: (
<Fragment>
<EuiSpacer />
<EuiTitle>
<h3>Monosodium Glutamate</h3>
</EuiTitle>
<EuiText>
Monosodium glutamate (MSG, also known as sodium glutamate) is the
sodium salt of glutamic acid, one of the most abundant naturally
occurring non-essential amino acids. Monosodium glutamate is found
naturally in tomatoes, cheese and other foods.
</EuiText>
</Fragment>
),
},
];

this.state = {
selectedTab: this.tabs[1],
};
}
export default () => {
const [selectedTab, setSelectedTab] = useState(tabs[1]);

onTabClick = selectedTab => {
this.setState({ selectedTab });
const onTabClick = selectedTab => {
setSelectedTab(selectedTab);
};

cycleTab = () => {
const selectedTabIndex = this.tabs.indexOf(this.state.selectedTab);
const cycleTab = () => {
const selectedTabIndex = tabs.indexOf(selectedTab);
const nextTabIndex =
selectedTabIndex < this.tabs.length - 1 ? selectedTabIndex + 1 : 0;
this.setState({
selectedTab: this.tabs[nextTabIndex],
});
selectedTabIndex < tabs.length - 1 ? selectedTabIndex + 1 : 0;
setSelectedTab(tabs[nextTabIndex]);
};

render() {
return (
<Fragment>
<EuiButton
iconType="arrowRight"
iconSide="right"
onClick={this.cycleTab}>
Cycle through the tabs
</EuiButton>

<EuiSpacer size="m" />
return (
<Fragment>
<EuiButton iconType="arrowRight" iconSide="right" onClick={cycleTab}>
Cycle through the tabs
</EuiButton>

<EuiTabbedContent
tabs={this.tabs}
selectedTab={this.state.selectedTab}
onTabClick={this.onTabClick}
/>
</Fragment>
);
}
}
<EuiSpacer size="m" />

export default EuiTabsExample;
<EuiTabbedContent
tabs={tabs}
selectedTab={selectedTab}
onTabClick={onTabClick}
/>
</Fragment>
);
};
Loading

0 comments on commit 971754b

Please sign in to comment.