mirror of
https://github.com/filecoin-project/slate.git
synced 2024-12-25 18:13:10 +03:00
TableContent props and example update
https://github.com/filecoin-project/slate/issues/14
This commit is contained in:
jasonleyser
parent
eb1b23473e
commit
0e75567b73
@ -87,27 +87,25 @@ import { TableContent, TableColumn } from 'slate-react-system';`}
|
||||
<System.H2>Output</System.H2>
|
||||
<hr />
|
||||
<br />
|
||||
<Group title="Table example">
|
||||
<System.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>
|
||||
<System.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"
|
||||
/>
|
||||
<br />
|
||||
<br />
|
||||
<System.H2>Accepted React Properties</System.H2>
|
||||
@ -130,7 +128,7 @@ import { TableContent, TableColumn } from 'slate-react-system';`}
|
||||
{ id: 5, a: 'data', b: 'string', c: 'null', d: 'Table content data' },
|
||||
{ id: 6, a: 'tooltip', b: 'string', c: 'null', d: 'If not null, a tooltip will be visible' },
|
||||
{ id: 7, a: 'copyable', b: 'boolean', c: 'false', d: 'If true, a copyable icon will be visible' },
|
||||
{ id: 8, a: 'type', b: 'string', c: 'null', d: 'Use FILE_LINK to add a linkable column' },
|
||||
{ id: 8, a: 'type', b: 'string', c: 'null', d: 'Use the TableContent properties below' },
|
||||
{ id: 9, a: 'width', b: 'number', c: 'null', d: 'Width of the column' },
|
||||
{ id: 10, a: 'action', b: 'string', c: 'null', d: 'Row action' },
|
||||
{ id: 11, a: 'hideLabel', b: 'boolean', c: 'null', d: 'If true, column label will be hidden' },
|
||||
@ -146,6 +144,118 @@ import { TableContent, TableColumn } from 'slate-react-system';`}
|
||||
name="table_data"
|
||||
/>
|
||||
</Group>
|
||||
<br />
|
||||
<br />
|
||||
<br />
|
||||
<System.H2>TableContents</System.H2>
|
||||
<hr />
|
||||
<br />
|
||||
<System.P>The Table Component has many TableContent properties that can be added to alter the column using the <i>type</i> props.</System.P>
|
||||
<br />
|
||||
<System.CodeBlock>
|
||||
{`class ExampleTwo extends React.Component {
|
||||
state = { exampleTwo: null }
|
||||
|
||||
_handleChange = e => this.setState(
|
||||
{ [e.target.name]: e.target.value }
|
||||
);
|
||||
|
||||
render() {
|
||||
return(
|
||||
<Table
|
||||
data={{
|
||||
columns: [
|
||||
{ key: 'a', name: 'Upload', width: '112px',
|
||||
type: 'BANDWIDTH_UPLOAD' },
|
||||
{ key: 'b', name: 'Download', width: '112px',
|
||||
type: 'BANDWIDTH_DOWNLOAD' },
|
||||
{ key: 'c', name: 'Tranaction Status', width: '128px',
|
||||
type: "TRANSACTION_STATUS" },
|
||||
{ key: 'd', name: 'Deal Status', width:'184px',
|
||||
type: "DEAL_STATUS" },
|
||||
{ key: 'e', name: 'Icon', width: '88px', type: "ICON" },
|
||||
|
||||
],
|
||||
rows: [
|
||||
{ id: 1, a: '500', b: '200', c: '2', d: '1', e: 'PNG' },
|
||||
{ id: 2, a: '20', b: '10', c: '1', d: '2', e: 'FOLDER' },
|
||||
{ id: 3, a: '100', b: '250', c: '2', d: '3', e: 'PNG' },
|
||||
{ id: 3, a: '4', b: '135', c: '1', d: '4', e: 'FOLDER' },
|
||||
],
|
||||
}}
|
||||
selectedRowId={this.state.exampleTwo}
|
||||
onChange={this._handleChange}
|
||||
name="exampleTwo"
|
||||
/>
|
||||
)
|
||||
}
|
||||
}`}
|
||||
</System.CodeBlock>
|
||||
<br />
|
||||
<br />
|
||||
<System.H2>Output</System.H2>
|
||||
<hr />
|
||||
<br />
|
||||
<System.Table
|
||||
data={{
|
||||
columns: [
|
||||
{ key: 'a', name: 'Upload', width: '112px', type: 'BANDWIDTH_UPLOAD' },
|
||||
{ key: 'b', name: 'Download', width: '112px', type: 'BANDWIDTH_DOWNLOAD' },
|
||||
{ key: 'c', name: 'Tranaction Status', width: '128px', type: "TRANSACTION_STATUS" },
|
||||
{ key: 'd', name: 'Deal Status', width:'168px', type: "DEAL_STATUS" },
|
||||
{ key: 'e', name: 'Icon', width: '88px', type: "ICON" },
|
||||
|
||||
],
|
||||
rows: [
|
||||
{ id: 1, a: '500', b: '200', c: '2', d: '1', e: 'PNG' },
|
||||
{ id: 2, a: '20', b: '10', c: '1', d: '2', e: 'FOLDER' },
|
||||
{ id: 3, a: '100', b: '250', c: '2', d: '3', e: 'PNG' },
|
||||
{ id: 3, a: '4', b: '135', c: '1', d: '4', e: 'FOLDER' },
|
||||
],
|
||||
}}
|
||||
selectedRowId={this.state.exampleOne}
|
||||
onChange={this._handleChange}
|
||||
name="exampleOne"
|
||||
/>
|
||||
<br />
|
||||
<br />
|
||||
<System.H2>Accepted <i>Type</i> Properties</System.H2>
|
||||
<hr />
|
||||
<br />
|
||||
<Group title="TableContent">
|
||||
<System.Table
|
||||
data={{
|
||||
columns: [
|
||||
{ key: 'a', name: 'Name', width: '184px' },
|
||||
{ key: 'b', name: 'Type', width: '88px' },
|
||||
{ key: 'c', name: 'Description', width: '100%' },
|
||||
],
|
||||
rows: [
|
||||
{ id: 1, a: 'DEAL_CATEGORY', b: 'number', c: '"1": "Storage", else: "Retrieval"' },
|
||||
{ id: 2, a: 'LOCATION', b: 'string', c: 'String for location' },
|
||||
{ id: 3, a: 'BUTTON', b: 'string', c: 'String for button text' },
|
||||
{ id: 4, a: 'TRANSACTION_DIRECTION', b: 'number', c: '"1": incoming badge, "2": outgoing badge' },
|
||||
{ id: 5, a: 'TRANSACTION_STATUS', b: 'number', c: '"1": complete badge, "2": pending badge' },
|
||||
{ id: 6, a: 'ICON', b: 'string', c: '"PNG": image icon, "FOLDER": folder icon' },
|
||||
{ id: 7, a: 'AVATAR', b: 'null', c: 'Adds the users avatar and online status' },
|
||||
{ id: 8, a: 'DEAL_STATUS_RETRIEVAL', b: 'number', c: '"0": "Local file", "1": "Available on network", "2": "Retrieval deal proposed.", "3": "Retrieval deal accepted.", "4": "Data transfer in progress.", "5": "Data transfer completed.", "6": "Retrieved from network.",' },
|
||||
{ id: 9, a: 'DEAL_STATUS', b: 'number', c: '"0": "Local file", "1": "Available on network", "2": "Retrieval deal proposed.", "3": "Retrieval deal accepted.", "4": "Data transfer in progress.", "5": "Data transfer completed.", "6": "Retrieved from network.",' },
|
||||
{ id: 10, a: 'BANDWIDTH_UPLOAD', b: 'number', c: 'Outputs an upload icon with the {number} of bytes' },
|
||||
{ id: 11, a: 'BANDWIDTH_DOWNLOAD', b: 'number', c: 'Outputs a download icon with the {number} of bytes' },
|
||||
{ id: 12, a: 'MINER_AVAILABILITY', b: 'number', c: '"1": "true", "2": null' },
|
||||
{ id: 13, a: 'DEAL_AUTO_RENEW', b: 'number', c: '"1": "true", else: "false"' },
|
||||
{ id: 14, a: 'NOTIFICATION_ERROR', b: 'string', c: 'String with error notification badge' },
|
||||
{ id: 15, a: 'FILE_DATE', b: 'string', c: 'String to date' },
|
||||
{ id: 16, a: 'FILE_SIZE', b: 'number', c: 'Outputs "{number} Bytes"' },
|
||||
{ id: 17, a: 'FILE_LINK', b: 'string', c: 'String of file link' }
|
||||
],
|
||||
}}
|
||||
selectedRowId={this.state.table_data}
|
||||
onChange={this._handleChange}
|
||||
name="table_data"
|
||||
/>
|
||||
</Group>
|
||||
|
||||
</SystemPage>
|
||||
);
|
||||
}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user