filecoin-project/slate
1
1
Fork 0
mirror of https://github.com/filecoin-project/slate.git synced 2024-11-23 14:07:20 +03:00
Code Issues Packages Projects Releases Wiki Activity

Component usage update

Browse Source 
https://github.com/filecoin-project/slate/pull/45
This commit is contained in:
jasonleyser 2020-07-03 22:05:39 -07:00
parent 4f65da84dc
commit 18dc2aeb3f
12 changed files with 484 additions and 498 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

180
pages/system/buttons.js
View File

@ -56,36 +56,36 @@ import {
<br />
<br />
<System.CodeBlock>
{`const ButtonPrimary = () => {
return (
<div>
<ButtonPrimary>
Primary Button
</ButtonPrimary>
</div>
);
}`}
<br />
<br />
{`const ButtonSecondary = () => {
return (
<div>
<ButtonSecondary>
Secondary Button
</ButtonSecondary>
</div>
);
}`}
<br />
<br />
{`const ButtonDisabled = () => {
return (
<div>
<ButtonDisabled>
Disabled Button
</ButtonDisabled>
</div>
);
{`class ExamplePrimary extends React.Component {
render() {
return(
<ButtonPrimary>
Primary Button
</ButtonPrimary>
)
}
}
class ExampleSecondary extends React.Component {
render() {
return(
<ButtonSecondary>
Secondary Button
</ButtonSecondary>
)
}
}
class ExampleDisabled extends React.Component {
render() {
return(
<ButtonDisabled>
Disabled Button
</ButtonDisabled>
)
}
}`}
</System.CodeBlock>
<br />
@ -107,36 +107,36 @@ import {
<br />
<br />
<System.CodeBlock>
{`const ButtonPrimaryFull = () => {
return (
<div>
<ButtonPrimaryFull>
Primary Button Full
</ButtonPrimaryFull>
</div>
);
}`}
<br />
<br />
{`const ButtonSecondaryFull = () => {
return (
<div>
<ButtonSecondaryFull>
Secondary Button Full
</ButtonSecondaryFull>
</div>
);
}`}
<br />
<br />
{`const ButtonDisabledFull = () => {
return (
<div>
<ButtonDisabledFull>
Disabled Button Full
</ButtonDisabledFull>
</div>
);
{`class ExamplePrimaryFull extends React.Component {
render() {
return(
<ButtonPrimaryFull>
Primary Button Full
</ButtonPrimaryFull>
)
}
}
class ExampleSecondaryFull extends React.Component {
render() {
return(
<ButtonSecondaryFull>
Secondary Button Full
</ButtonSecondaryFull>
)
}
}
class ExampleDisabledFull extends React.Component {
render() {
return(
<ButtonDisabledFull>
Disabled Button Full
</ButtonDisabledFull>
)
}
}`}
</System.CodeBlock>
<br />
@ -155,36 +155,36 @@ import {
<br />
<br />
<System.CodeBlock>
{`const ButtonPrimaryLabel = () => {
return (
<div>
<ButtonPrimary type="label">
Primary Button Label
</ButtonPrimary>
</div>
);
}`}
<br />
<br />
{`const ButtonSecondaryLabel = () => {
return (
<div>
<ButtonSecondary type="label">
Secondary Button Label
</ButtonSecondary>
</div>
);
}`}
<br />
<br />
{`const ButtonDisabledLabel = () => {
return (
<div>
<ButtonDisabled type="label">
Disabled Button Label
</ButtonDisabled>
</div>
);
{`class ExamplePrimaryLabel extends React.Component {
render() {
return(
<ButtonPrimary type="label">
Primary Button Label
</ButtonPrimary>
)
}
}
class ExampleSecondaryLabel extends React.Component {
render() {
return(
<ButtonSecondary type="label">
Secondary Button Label
</ButtonSecondary>
)
}
}
class ExampleDisabledLabel extends React.Component {
render() {
return(
<ButtonDisabled type="label">
Disabled Button Label
</ButtonDisabled>
)
}
}`}
</System.CodeBlock>
</SystemPage>

85
pages/system/card-tabs.js
View File

@ -18,8 +18,8 @@ const TAB_GROUP_FOUR = [
export default class SystemPageCardTabs extends React.Component {
state = {
eighteen: '2',
nineteen: null,
exampleOne: '1',
exampleTwo: '4',
};
_handleChange = (e) => {
@ -42,7 +42,7 @@ export default class SystemPageCardTabs extends React.Component {
<hr />
<br />
<System.P>
Import React and the ButtonPrimary, ButtonPrimaryFull and/or the ButtonDisabled Components.
Import React and the CardTabGroup Component.
</System.P>
<br />
<br />
@ -69,50 +69,49 @@ const TAB_GROUP_FOUR = [
{ value: '3', label: 'Pisces' },
{ value: '4', label: 'Aries' },
];`}
</System.CodeBlock>
<br />
<System.P>Define the CardTab value states and handle the state when a tab is changed.</System.P>
<br />
<System.CodeBlock>
{`state = {
eighteen: '2',
nineteen: null,
};
_handleChange = (e) => {
this.setState({ [e.target.name]: e.target.value });
};`}
</System.CodeBlock>
<br />
<System.P>Declare the CardTabGroup component.</System.P>
<br />
<System.CodeBlock>
{`
const CardTabGroupOne = () => {
return (
<div>
<CardTabGroup
name="eighteen"
options={TAB_GROUP_TWO}
value={this.state.eighteen}
onChange={this._handleChange}
/>
</div>
);
{`class ExampleOne extends React.Component {
state = { exampleOne: '1' }
_handleChange = (e) => this._handleChange(
{ [e.target.name]: e.target.value }
)
render() {
return(
<CardTabGroup
name="exampleOne"
options={TAB_GROUP_TWO}
value={this.state.exampleOne}
onChange={this._handleChange}
/>
)
}
}
const CardTabGroupTwo = () => {
return (
<div>
<CardTabGroup
name="nineteen"
options={TAB_GROUP_FOUR}
value={this.state.nineteen}
onChange={this._handleChange}
/>
</div>
);
class ExampleTwo extends React.Component {
state = { exampleTwo: '4' }
_handleChange = (e) => this._handleChange(
{ [e.target.name]: e.target.value }
)
render() {
return(
<CardTabGroup
name="exampleTwo"
options={TAB_GROUP_FOUR}
value={this.state.exampleTwo}
onChange={this._handleChange}
/>
)
}
}`}
</System.CodeBlock>
<br />
<br />
@ -120,17 +119,17 @@ const CardTabGroupTwo = () => {
<hr />
<br />
<System.CardTabGroup
name="eighteen"
name="exampleOne"
options={TAB_GROUP_TWO}
value={this.state.eighteen}
value={this.state.exampleOne}
onChange={this._handleChange}
/>
<br />
<br />
<System.CardTabGroup
name="nineteen"
name="exampleTwo"
options={TAB_GROUP_FOUR}
value={this.state.nineteen}
value={this.state.exampleTwo}
onChange={this._handleChange}
/>
</SystemPage>

89
pages/system/checkboxes.js
View File

@ -6,8 +6,8 @@ import ViewSourceLink from '~/components/system/ViewSourceLink';
export default class SystemPageCheckboxes extends React.Component {
state = {
six: false,
seven: true,
exampleOne: false,
exampleTwo: true,
};
_handleChange = (e) => {
@ -45,58 +45,53 @@ import { CheckBox } from 'slate-react-system';`}
<System.H2>Usage</System.H2>
<hr />
<br />
<System.P>
Define the boolean Checkbox states and handle the state change the when user checks or unchecks the CheckBox.
</System.P>
<br />
<System.CodeBlock>
{`state = {
six: false,
seven: true,
};
_handleChange = (e) => {
this.setState({ [e.target.name]: e.target.value });
}; `}
</System.CodeBlock>
<br />
<br />
<System.P>Declare the CheckBox component.</System.P>
<br />
<System.CodeBlock>
{`const CheckboxUnchecked = () => {
return (
<div>
<CheckBox
name="six"
value={this.state.six}
onChange={this._handleChange}>
{`class ExampleOne extends React.Component {
state = { exampleOne: false }
<strong>Unchecked</strong>
<br />
This CheckBox default is unchecked.
_handleChange = (e) => this._handleChange(
{ [e.target.name]: e.target.value }
)
</CheckBox>
</div>
);
render() {
return(
<CheckBox
name="exampleOne"
value={this.state.exampleOne}
onChange={this._handleChange}>
<strong>Unchecked</strong>
<br />
This CheckBox default is unchecked.
</CheckBox>
)
}
}
const CheckboxChecked = () => {
return (
<div>
<CheckBox
name="seven"
value={this.state.seven}
onChange={this._handleChange}>
<strong>Unchecked</strong>
<br />
This CheckBox default is unchecked.
</CheckBox>
</div>
);
class ExampleTwo extends React.Component {
state = { ExampleTwo: true }
_handleChange = (e) => this._handleChange(
{ [e.target.name]: e.target.value }
)
render() {
return(
<CheckBox
name="ExampleTwo"
value={this.state.ExampleTwo}
onChange={this._handleChange}>
<strong>Checked</strong>
<br />
This CheckBox default is checked.
</CheckBox>
)
}
}`}
</System.CodeBlock>
<br />
@ -104,14 +99,14 @@ const CheckboxChecked = () => {
<System.H2>Output</System.H2>
<hr />
<br />
<System.CheckBox name="six" value={this.state.six} onChange={this._handleChange}>
<System.CheckBox name="exampleOne" value={this.state.exampleOne} onChange={this._handleChange}>
<strong>Unchecked</strong>
<br />
This CheckBox default is unchecked.
</System.CheckBox>
<br />
<br />
<System.CheckBox name="seven" value={this.state.seven} onChange={this._handleChange}>
<System.CheckBox name="exampleTwo" value={this.state.exampleTwo} onChange={this._handleChange}>
<strong>Checked</strong>
<br />
This CheckBox default is checked.

88
pages/system/dropdowns.js
View File

@ -36,9 +36,8 @@ const SELECT_MENU_MAP = {
export default class SystemPageDropdowns extends React.Component {
state = {
one: '1',
two: '3',
three: '1',
exampleOne: '1',
exampleTwo: '3',
};
_handleChange = (e) => {
@ -107,57 +106,54 @@ const SELECT_MENU_MAP = {
'10': 'Libra',
'11': 'Scorpio',
'12': 'Sagittarus',
};`}
</System.CodeBlock>
<br />
<System.P>
Define the Dropdown value states and handle the state change the when a dropdown value is selected.
</System.P>
<br />
<System.CodeBlock>
{`state = {
one: '1',
two: '3',
three: '1',
};
_handleChange = (e) => {
this.setState({ [e.target.name]: e.target.value });
};`}
</System.CodeBlock>
<br />
<System.P>Declare the Dropdown component.</System.P>
<br />
<System.CodeBlock>
{`const Select = () => {
return (
<div>
<SelectMenu
name="one"
value={this.state.one}
category="horoscope"
onChange={this._handleChange}
options={SELECT_MENU_OPTIONS}>
{SELECT_MENU_MAP[this.state.one]}
</SelectMenu>
</div>
);
{`class ExampleOne extends React.Component {
state = { exampleOne: '1' }
_handleChange = (e) => this._handleChange(
{ [e.target.name]: e.target.value }
)
render() {
return(
<SelectMenu
name="exampleOne"
value={this.state.exampleOne}
category="horoscope"
onChange={this._handleChange}
options={SELECT_MENU_OPTIONS}>
{SELECT_MENU_MAP[this.state.exampleOne]}
</SelectMenu>
)
}
}
const SelectFull = () => {
return (
<div>
class ExampleTwo extends React.Component {
state = { exampleTwo: '3' }
_handleChange = (e) => this._handleChange(
{ [e.target.name]: e.target.value }
)
render() {
return(
<SelectMenuFull
label="Pick a horoscope"
name="three"
value={this.state.three}
name="exampleTwo"
value={this.state.exampleTwo}
category="horoscope"
onChange={this._handleChange}
options={SELECT_MENU_OPTIONS}>
{SELECT_MENU_MAP[this.state.three]}
{SELECT_MENU_MAP[this.state.exampleTwo]}
</SelectMenuFull>
</div>
);
)
}
}`}
</System.CodeBlock>
<br />
@ -166,23 +162,23 @@ const SelectFull = () => {
<hr />
<br />
<System.SelectMenu
name="one"
value={this.state.one}
name="exampleOne"
value={this.state.exampleOne}
category="horoscope"
onChange={this._handleChange}
options={SELECT_MENU_OPTIONS}>
{SELECT_MENU_MAP[this.state.one]}
{SELECT_MENU_MAP[this.state.exampleOne]}
</System.SelectMenu>
<br />
<br />
<System.SelectMenuFull
label="Pick a horoscope"
name="three"
value={this.state.three}
name="exampleTwo"
value={this.state.exampleTwo}
category="horoscope"
onChange={this._handleChange}
options={SELECT_MENU_OPTIONS}>
{SELECT_MENU_MAP[this.state.three]}
{SELECT_MENU_MAP[this.state.exampleTwo]}
</System.SelectMenuFull>
</SystemPage>
);

10
pages/system/globe.js
View File

@ -38,12 +38,12 @@ import { GLRenderer } from 'slate-react-system';`}
<System.P>Declare the Globe component.</System.P>
<br />
<System.CodeBlock>
{`const Globe = () => {
return (
<div>
{`class ExampleOne extends React.Component {
render() {
return(
<GLRenderer width={768} height={480} />
</div>
);
)
}
}`}</System.CodeBlock>
<br />
<br />

231
pages/system/inputs.js
View File

@ -7,12 +7,11 @@ import ViewSourceLink from '~/components/system/ViewSourceLink';
export default class SystemPageInputs extends React.Component {
state = {
twelve: 'Replace me friend.',
thirteen: '',
fourteen: '',
fifteen: 'aaaaa-bbbbb-ccccc-ddddd-eeee',
sixteen: '',
seventeen: `Example text`,
exampleOne: 'Example text',
exampleTwo: '',
exampleThree: '',
exampleFour: 'aaaaa-bbbbb-ccccc-ddddd-eeee',
exampleFive: '',
};
_handleChange = (e) => {
@ -45,46 +44,30 @@ import { Input, Textarea } from 'slate-react-system';`}
</System.CodeBlock>
<br />
<br />
<System.H2>Usage</System.H2>
<hr />
<br />
<System.P>Define the Input value states and handle the state change the when a change is made.</System.P>
<br />
<System.CodeBlock>
{`state = {
twelve: 'Replace me friend.',
thirteen: '',
fourteen: '',
fifteen: 'aaaaa-bbbbb-ccccc-ddddd-eeee',
sixteen: '',
seventeen: 'Example text',
};
_handleChange = (e) => {
this.setState({ [e.target.name]: e.target.value });
};`}
</System.CodeBlock>
<br />
<br />
<br />
<System.H2>Textarea</System.H2>
<hr />
<br />
<System.P>Declare the Textarea component.</System.P>
<br />
<System.Textarea name="seventeen" value={this.state.seventeen} onChange={this._handleChange} />
<System.Textarea name="exampleOne" value={this.state.exampleOne} onChange={this._handleChange} />
<br />
<System.CodeBlock>
{`const Textarea = () => {
return (
<div>
<Textarea
name="seventeen"
value={this.state.seventeen}
onChange={this._handleChange}
/>
</div>
);
{`class ExampleTextarea extends React.Component {
state = { exampleOne: 'Example text' }
_handleChange = (e) => this._handleChange(
{ [e.target.name]: e.target.value }
)
render() {
return(
<Textarea
name="exampleOne"
value={this.state.exampleOne}
onChange={this._handleChange}
/>
)
}
}`}
</System.CodeBlock>
<br />
@ -99,27 +82,33 @@ _handleChange = (e) => {
label="Location of your pastries"
description="We need to know the location of your pastries."
tooltip="Hey friends."
name="fourteen"
value={this.state.fourteen}
name="exampleTwo"
value={this.state.exampleTwo}
placeholder="Pastry Location"
onChange={this._handleChange}
/>
<br />
<System.CodeBlock>
{`const InputLabel = () => {
return (
<div>
<Input
label="Location of your pastries"
description="We need to know the location of your pastries."
tooltip="Hey friends."
name="fourteen"
value={this.state.fourteen}
placeholder="Pastry Location"
onChange={this._handleChange}
/>
</div>
);
{`class ExampleLabel extends React.Component {
state = { exampleTwo: null }
_handleChange = (e) => this._handleChange(
{ [e.target.name]: e.target.value }
)
render() {
return(
<Input
label="Location of your pastries"
description="We need to know the location of your pastries."
tooltip="Hey friends."
name="exampleTwo"
value={this.state.exampleTwo}
placeholder="Pastry Location"
onChange={this._handleChange}
/>
)
}
}`}
</System.CodeBlock>
<br />
@ -133,24 +122,30 @@ _handleChange = (e) => {
<System.Input
label="Max length is 14"
max={14}
name="sixteen"
value={this.state.sixteen}
name="exampleThree"
value={this.state.exampleThree}
onChange={this._handleChange}
/>
<br />
<System.CodeBlock>
{`const InputMax = () => {
return (
<div>
<Input
label="Max length is 14"
max={14}
name="sixteen"
value={this.state.sixteen}
onChange={this._handleChange}
/>
</div>
);
{`class ExampleMax extends React.Component {
state = { exampleThree: null }
_handleChange = (e) => this._handleChange(
{ [e.target.name]: e.target.value }
)
render() {
return(
<Input
label="Max length is 14"
max={14}
name="exampleThree"
value={this.state.exampleThree}
onChange={this._handleChange}
/>
)
}
}`}
</System.CodeBlock>
<br />
@ -164,26 +159,32 @@ _handleChange = (e) => {
<System.Input
label="Copy and paste (read only)"
readOnly
name="fifteen"
name="exampleFour"
copyable
value={this.state.fifteen}
value={this.state.exampleFour}
onChange={this._handleChange}
/>
<br />
<System.CodeBlock>
{`const InputCopyPaste = () => {
return (
<div>
<Input
label="Copy and paste (read only)"
readOnly
name="fifteen"
copyable
value={this.state.fifteen}
onChange={this._handleChange}
/>
</div>
);
{`class ExampleCopyPaste extends React.Component {
state = { exampleFour: 'aaaaa-bbbbb-ccccc-ddddd-eeee' }
_handleChange = (e) => this._handleChange(
{ [e.target.name]: e.target.value }
)
render() {
return(
<Input
label="Copy and paste (read only)"
readOnly
name="exampleFour"
copyable
value={this.state.exampleFour}
onChange={this._handleChange}
/>
)
}
}`}
</System.CodeBlock>
@ -204,46 +205,46 @@ _handleChange = (e) => {
<System.Input label="Error" placeholder="This is an uncontrolled input for error." validation="ERROR" />
<br />
<System.CodeBlock>
{`const InputSuccess = () => {
return (
<div>
<Input
label="Success"
placeholder="This is an uncontrolled input for success."
validation="SUCCESS"
/>
</div>
);
{`class ExampleSuccess extends React.Component {
render() {
return(
<Input
label="Success"
placeholder="This is an uncontrolled input for success."
validation="SUCCESS"
/>
)
}
}
const InputWarning = () => {
return (
<div>
<Input
label="Success"
placeholder="This is an uncontrolled input for warning."
validation="WARNING"
/>
</div>
);
class ExampleWarning extends React.Component {
render() {
return(
<Input
label="Warning"
placeholder="This is an uncontrolled input for warning."
validation="WARNING"
/>
)
}
}
const InputError = () => {
return (
<div>
<Input
label="Success"
placeholder="This is an uncontrolled input for error."
validation="ERROR"
/>
</div>
);
class ExampleError extends React.Component {
render() {
return(
<Input
label="Error"
placeholder="This is an uncontrolled input for error."
validation="ERROR"
/>
)
}
}`}
</System.CodeBlock>
<br />
<br />
<br />
<System.H2>Props</System.H2>
<System.H2>Accepted React Properties</System.H2>
<hr />
<br />
<Group title="Inputs">

48
pages/system/radios.js
View File

@ -37,7 +37,7 @@ const RADIO_GROUP_OPTIONS = [
export default class SystemPageRadios extends React.Component {
state = {
five: '2',
exampleOne: '2',
};
_handleChange = (e) => {
@ -107,36 +107,28 @@ import { RadioGroup } from 'slate-react-system';`}
),
}
];`}
</System.CodeBlock>
<br />
<System.P>
Define the default selected option and handle the state changes when the users selects a different option.
</System.P>
<br />
<System.CodeBlock>
{`state = {
default: '2',
};
_handleChange = (e) => {
this.setState({ [e.target.name]: e.target.value });
};`}
</System.CodeBlock>
<br />
<System.P>Declare the RadioGroup component.</System.P>
<br />
<System.CodeBlock>
{`const Radios = () => {
return (
<div>
<RadioGroup
name="five"
options={RADIO_GROUP_OPTIONS}
selected={this.state.default}
onChange={this._handleChange}
/>
</div>
);
{`class ExampleOne extends React.Component {
state = { ExampleOne: '2' }
_handleChange = (e) => this._handleChange(
{ [e.target.name]: e.target.value }
)
render() {
return(
<RadioGroup
name="ExampleOne"
options={RADIO_GROUP_OPTIONS}
selected={this.state.ExampleOne}
onChange={this._handleChange}
/>
)
}
}`}
</System.CodeBlock>
<br />
@ -145,9 +137,9 @@ _handleChange = (e) => {
<hr />
<br />
<System.RadioGroup
name="five"
name="exampleOne"
options={RADIO_GROUP_OPTIONS}
selected={this.state.five}
selected={this.state.exampleOne}
onChange={this._handleChange}
/>
<br />

24
pages/system/stats.js
View File

@ -37,20 +37,20 @@ import { StatUpload, StatDownload } from 'slate-react-system';`}
<System.P>Delcare the StatUpload and/or the StatDownload components.</System.P>
<br />
<System.CodeBlock>
{`const Upload = () => {
return (
<div>
<StatUpload>40 mb</StatUpload>
</div>
);
{`class ExampleOne extends React.Component {
render() {
return(
<StatUpload>40 mb</StatUpload>
)
}
}
const Download = () => {
return (
<div>
<StatDownload>40 mb</StatDownload>
</div>
);
class ExampleTwo extends React.Component {
render() {
return(
<StatDownload>40 mb</StatDownload>
)
}
}`}
</System.CodeBlock>
<br />

75
pages/system/tables.js
View File

@ -26,57 +26,60 @@ export default class SystemPageTables extends React.Component {
<hr />
<br />
<System.P>
Import React and the TableContent, TableColumn and Group Components.
Import React and the TableContent, TableColumn Components.
</System.P>
<br />
<br />
<System.CodeBlock>
{`import * as React from 'react';
import { TableContent, TableColumn, Group } from 'slate-react-system';`}
import { TableContent, TableColumn } from 'slate-react-system';`}
</System.CodeBlock>
<br />
<br />
<System.H2>Usage</System.H2>
<hr />
<br />
<System.P>Define the table data states.</System.P>
<br />
<System.CodeBlock>
{`state = {
table_data: null,
};`}
</System.CodeBlock>
<br />
<System.P>Declare the Group and Table components.</System.P>
<br />
<System.CodeBlock>
{`const Table = () => {
return (
<div>
<Group title="Table example">
<Table
data={{
columns: [
{ key: 'a', name: 'Link', type: 'FILE_LINK' },
{ key: 'b', name: 'Value', width: '88px' },
{ key: 'c', name: 'Tooltip', tooltip: 'A tooltip.', width: '128px' },
{ key: 'd', name: 'Copyable', copyable: true, width: '88px' },
],
rows: [
{ id: 1, a: 'col 1 row 1', b: 'col 1 row 2', c: 'col 1 row 3', d: 'col 1 row 4' },
{ id: 2, a: 'col 2 row 1', b: 'col 2 row 2', c: 'col 2 row 3', d: 'col 2 row 4'},
{ id: 3, a: 'col 3 row 1', b: 'col 3 row 2', c: 'col 3 row 3', d: 'col 3 row 4' },
{ id: 3, a: 'col 4 row 1', b: 'col 4 row 2', c: 'col 4 row 3', d: 'col 4 row 4' },
],
}}
selectedRowId={this.state.table_data}
onChange={this._handleChange}
name="table_data"
/>
</Group>
</div>
);
{`class ExampleOne extends React.Component {
state = { exampleOne: null }
_handleChange = (e) => this._handleChange(
{ [e.target.name]: e.target.value }
)
render() {
return(
<Table
data={{
columns: [
{ key: 'a', name: 'Link', type: 'FILE_LINK' },
{ key: 'b', name: 'Value', width: '88px' },
{ key: 'c', name: 'Tooltip', tooltip: 'A tooltip.',
width: '128px' },
{ key: 'd', name: 'Copyable', copyable: true, width:
'88px' },
],
rows: [
{ id: 1, a: 'col 1 row 1', b: 'col 1 row 2', c: 'col
1 row 3', d: 'col 1 row 4' },
{ id: 2, a: 'col 2 row 1', b: 'col 2 row 2', c: 'col
2 row 3', d: 'col 2 row 4'},
{ id: 3, a: 'col 3 row 1', b: 'col 3 row 2', c: 'col
3 row 3', d: 'col 3 row 4' },
{ id: 3, a: 'col 4 row 1', b: 'col 4 row 2', c: 'col
4 row 3', d: 'col 4 row 4' },
],
}}
selectedRowId={this.state.exampleOne}
onChange={this._handleChange}
name="exampleOne"
/>
)
}
}`}
</System.CodeBlock>
<br />

74
pages/system/tabs.js
View File

@ -24,8 +24,9 @@ const TAB_GROUP_FOUR = [
export default class SystemPageTabs extends React.Component {
state = {
default: '1',
eight: '1',
nine: '1',
nine: '3',
ten: '1',
};
@ -75,49 +76,48 @@ const TAB_GROUP_THREE = [
{ value: '2', label: 'Aquarius' },
{ value: '3', label: 'Pisces' },
];`}
</System.CodeBlock>
<br />
<System.P>Define the Tab value states and handle the state when a tab is changed.</System.P>
<br />
<System.CodeBlock>
{`state = {
eight: '1',
nine: '1',
ten: '1',
};
_handleChange = (e) => {
this.setState({ [e.target.name]: e.target.value });
};`}
</System.CodeBlock>
<br />
<System.P>Declare the TabGroup component.</System.P>
<br />
<System.CodeBlock>
{`const TabsTwo = () => {
return (
<div>
<TabGroup
name="eight"
options={TAB_GROUP_TWO}
value={this.state.eight}
onChange={this._handleChange}
/>
</div>
);
{`class ExampleOne extends React.Component {
state = { exampleOne: '1' }
_handleChange = (e) => this._handleChange(
{ [e.target.name]: e.target.value }
)
render() {
return(
<TabGroup
name="exampleOne"
value={this.state.exampleOne}
option={TAB_GROUP_TWO}
onChange={this._handleChange}
/>
)
}
}
const TabsThree = () => {
return (
<div>
<TabGroup
name="nine"
options={TAB_GROUP_THREE}
value={this.state.nine}
onChange={this._handleChange}
/>
</div>
);
class ExampleTwo extends React.Component {
state = { exampleTwo: '3' }
_handleChange = (e) => this._handleChange(
{ [e.target.name]: e.target.value }
)
render() {
return(
<TabGroup
name="exampleTwo"
value={this.state.exampleTwo}
option={TAB_GROUP_THREE}
onChange={this._handleChange}
/>
)
}
}`}
</System.CodeBlock>
<br />

66
pages/system/toggles.js
View File

@ -43,44 +43,44 @@ import { Toggle } from 'slate-react-system';`}
<System.H2>Usage</System.H2>
<hr />
<br />
<System.P>Define the Toggle boolean state and handle the state change the when a toggle is changed.</System.P>
<br />
<System.CodeBlock>
{`state = {
three: true,
four: false,
};
_handleChange = (e) => {
this.setState({ [e.target.name]: e.target.value });
};`}
</System.CodeBlock>
<br />
<System.P>Declare the Toggle component.</System.P>
<br />
<System.CodeBlock>
{`const ToggleOn = () => {
return (
<div>
<Toggle
active={this.state.three}
name="three"
onChange={this._handleChange}
/>
</div>
);
{`class ExampleOne extends React.Component {
state = { exampleOne: true }
_handleChange = (e) => this._handleChange(
{ [e.target.name]: e.target.value }
)
render() {
return(
<Toggle
active={this.state.exampleOne}
name="exampleOne"
onChange={this._handleChange}
/>
)
}
}
const ToggleOff = () => {
return (
<div>
<Toggle
active={this.state.four}
name="four"
onChange={this._handleChange}
/>
</div>
);
class ExampleTwo extends React.Component {
state = { exampleTwo: false }
_handleChange = (e) => this._handleChange(
{ [e.target.name]: e.target.value }
)
render() {
return(
<Toggle
active={this.state.exampleTwo}
name="exampleTwo"
onChange={this._handleChange}
/>
)
}
}`}
</System.CodeBlock>

12
pages/system/tooltips.js
View File

@ -40,12 +40,12 @@ import { TooltipAnchor } from 'slate-react-system';`}
<br />
<System.P>Declare the Tooltip component.</System.P>
<br />
<System.CodeBlock>{`const Tooltip = () => {
return (
<div>
<TooltipAnchor tooltip="Hello friends!!" />
</div>
);
<System.CodeBlock>{`class ExampleOne extends React.Component {
render() {
return(
<TooltipAnchor tooltip="Hello friends!!" />
)
}
}`}</System.CodeBlock>
<br />
<br />