essence-templates
Version:
React Essence Templates - based on Essence Material Design Framework
167 lines (156 loc) • 7 kB
JavaScript
import React from 'react';
import ReactDOM from 'react-dom';
import ClassNames from 'classnames';
import Input from 'essence-input';
import {Block, Text, Divider} from 'essence-core';
import {Card, CardHeader, CardContent, CardFooter} from 'essence-card';
class AppInput extends React.Component {
constructor(props) {
super(props);
this.state = {
classes: ClassNames(
this.props.classes,
this.props.className
)
};
}
render() {
return (
<Block classes={ClassNames('e-container e-padding-top-25', this.state.classes)}>
<Block className={'e-row'}>
<Block classes={'brick brick-12'}>
<Text type={'h3'} classes={'e-text-indigo-400'}>TEXT FIELDS</Text>
<Divider classes={'thick short e-background-indigo-400'} />
<Text type={'p'} classes={'e-body1 e-text-blue-grey-700 e-padding-top-25 e-padding-bottom-25'} style={{fontSize:'14px'}}>
Text fields allow the user to input text. They can be single line, with or without scrolling, or multi-line, and can have an icon. Touching a text field places the cursor and automatically displays the keyboard. Check out our examples and use the one that fits your scenario.
</Text>
<Card>
<CardContent>
<Block classes={'e-text-center'}>
<Block className={ClassNames('e-row e-padding-bottom-25')}>
<Block className={'brick brick-4'} style={{padding:'0'}}>
<Input
classes={'has-success'}
type={'text'}
name={'label'}
placeholder={'Input + Placeholder and has-success'}/>
</Block>
<Block className={'brick brick-4'} style={{padding:'0'}}>
<Input
classes={'has-success'}
type={'text'}
name={'label'}
placeholder={'Input + Placeholder, has-success, Counter = 50'}
counter={50}/>
</Block>
<Block className={'brick brick-4'} style={{padding:'0'}}>
<Input
classes={'has-error'}
type={'text'}
name={'label'}
placeholder={'Input + Placeholder, has-error, Counter = 20'}
counter={20}/>
</Block>
</Block>
<Block className={ClassNames('e-row e-padding-bottom-25')}>
<Block className={'brick brick-6'} style={{padding:'0'}}>
<Input
type={'text'}
name={'label'}
placeholder={'Disabled input'}
disabled={true}/>
<Input
type={'text'}
name={'label'}
label={'Input with label'}/>
</Block>
<Block className={'brick brick-6'} style={{padding:'0'}}>
<Input
type={'email'}
name={'label'}
label={'Email input'}/>
<Input
type={'number'}
name={'label'}
placeholder={'Number input'}
hint={'Number input'}/>
</Block>
</Block>
<Block className={ClassNames('e-row e-padding-bottom-25')}>
<Block className={'brick brick-6'} style={{padding:'0'}}>
<Input
type={'textarea'}
name={'label'}
rows={5}
label={'Textarea + Label with 5 rows'}/>
</Block>
<Block className={'brick brick-6'} style={{padding:'0'}}>
<Input
type={'textarea'}
name={'label'}
rows={3}
placeholder={'Textarea + Placeholder with 3 rows'}/>
</Block>
</Block>
</Block>
<Divider />
<Block>
<Text type={'h4'} classes={'e-text-indigo-400'}>HOW TO USE:</Text>
<Divider classes={'thin short e-background-indigo-400'} />
<pre className={'e-background-grey-100 e-text-black'}>
<code>
npm install <strong>essence-input</strong>
</code>
</pre>
<Text type={'p'} classes={'e-body1 e-text-blue-grey-700 padding-top-bottom-10'}>
Input component has the following options:
<br />
<br />
1. <strong>placeholder</strong>: <u>string</u> for a placeholder text
<br />
2. <strong>label</strong>: <u>string</u> for a label text which will float above the input when text is typed
<br />
3. <strong>hint</strong>: <u>string</u> for a hint text which will show below the input as an informative text
<br />
4. <strong>counter</strong>: <u>integer</u> for limit the input value length, also it will show the current / maximum value length
<br />
5. <strong>disabled</strong>: prop for disabling the input
</Text>
<Text type={'p'} classes={'e-body1 e-text-blue-grey-700 padding-top-bottom-10'}>
Create a new ReactJS file with the code bellow.
</Text>
<pre className={'e-background-grey-100 e-text-black'}>
<code>
import Image from 'essence-input';
<br />
<br />
<Input classes={'has-success'} type={'text'} name={'label'} placeholder={'Input + Placeholder and has-success'}/>
<br />
<Input classes={'has-success'} type={'text'} name={'label'} placeholder={'Input + Placeholder, has-success, Counter = 50'} counter={50}/>
<br />
<Input classes={'has-error'} type={'text'} name={'label'} placeholder={'Input + Placeholder, has-error, Counter = 20'} counter={20}/>
<br />
<Input type={'text'} name={'label'} placeholder={'Disabled input'} disabled={true}/>
<br />
<Input type={'text'} name={'label'} label={'Input with label'}/>
<br />
<Input type={'email'} name={'label'} label={'Email input'}/>
<br />
<Input type={'number'} name={'label'} placeholder={'Number input'} hint={'Number input'}/>
<br />
<Input type={'textarea'} name={'label'} rows={5} label={'Textarea + Label with 5 rows'}/>
<br />
<Input type={'textarea'} name={'label'} rows={3} placeholder={'Textarea + Placeholder with 3 rows'}/>
<br />
</code>
</pre>
</Block>
</CardContent>
</Card>
</Block>
</Block>
</Block>
);
}
}
exports.AppInput = AppInput;