mirror of
https://github.com/filecoin-project/slate.git
synced 2024-12-20 07:32:01 +03:00
86 lines
2.6 KiB
JavaScript
86 lines
2.6 KiB
JavaScript
import * as React from 'react';
|
|
import * as System from '~/components/system';
|
|
|
|
import SystemPage from '~/components/system/SystemPage';
|
|
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`,
|
|
};
|
|
|
|
_handleChange = (e) => {
|
|
this.setState({ [e.target.name]: e.target.value });
|
|
};
|
|
|
|
render() {
|
|
return (
|
|
<SystemPage title="FCDS: Inputs" description="Lorem Ipsum." url="https://fps.onrender.com/system/inputs">
|
|
<System.H1>
|
|
Inputs <ViewSourceLink file="inputs.js" />
|
|
</System.H1>
|
|
<br />
|
|
<br />
|
|
<System.P>An example of input components.</System.P>
|
|
<br /> <br />
|
|
<System.Textarea name="seventeen" value={this.state.seventeen} onChange={this._handleChange} />
|
|
<br />
|
|
<br />
|
|
<System.Input name="twelve" value={this.state.twelve} onChange={this._handleChange} />
|
|
<br />
|
|
<br />
|
|
<System.Input
|
|
name="thireteen"
|
|
value={this.state.thirteen}
|
|
placeholder="Enter your favorite year"
|
|
onChange={this._handleChange}
|
|
/>
|
|
<br />
|
|
<br />
|
|
<System.Input
|
|
label="Location of your pastries"
|
|
description="We need to know the location of your pastries to sell them to other people."
|
|
tooltip="Hey friends."
|
|
name="fourteen"
|
|
value={this.state.fourteen}
|
|
placeholder="Pastry Location"
|
|
onChange={this._handleChange}
|
|
/>
|
|
<br />
|
|
<br />
|
|
<System.Input
|
|
label="Max length is 14"
|
|
max={14}
|
|
name="sixteen"
|
|
value={this.state.sixteen}
|
|
onChange={this._handleChange}
|
|
/>
|
|
<br />
|
|
<br />
|
|
<System.Input
|
|
label="Copy and paste (read only)"
|
|
readOnly
|
|
name="fifteen"
|
|
copyable
|
|
value={this.state.fifteen}
|
|
onChange={this._handleChange}
|
|
/>
|
|
<br />
|
|
<br />
|
|
<System.Input label="Success" placeholder="This is an uncontrolled input for success." validation="SUCCESS" />
|
|
<br />
|
|
<br />
|
|
<System.Input label="Warning" placeholder="This is an uncontrolled input for warning." validation="WARNING" />
|
|
<br />
|
|
<br />
|
|
<System.Input label="Error" placeholder="This is an uncontrolled input for error." validation="ERROR" />
|
|
</SystemPage>
|
|
);
|
|
}
|
|
}
|