essence-templates
Version:
React Essence Templates - based on Essence Material Design Framework
185 lines (171 loc) • 6.62 kB
JavaScript
import React from 'react';
import ReactDOM from 'react-dom';
import ClassNames from 'classnames';
import {Block, Text, Divider} from 'essence-core';
import {Card, CardHeader, CardContent, CardFooter} from 'essence-card';
import Chip from 'essence-chip';
var ChipDeletable = {
name: 'deletable',
text: [<strong>Chip</strong>, <span> (deletable)</span>],
icon: 'D',
deletable: true,
onClose: ( function () { console.log('deletable chip'); } )
};
var ChipNonDeletable = {
name: 'nondeletable',
text: [<strong>Chip</strong>, <span> (non deletable)</span>],
icon: 'N',
deletable: false,
onClose: ( function () { console.log('non deletable chip'); } )
};
var ChipNoIconDeletable = {
name: 'noicondeletable',
text: [<strong>Chip</strong>, <span> (no icon deletable)</span>],
deletable: true,
onClose: ( function () { console.log('no icon deletable chip'); } )
};
var ChipNoIconNonDeletable = {
name: 'noiconnondeletable',
text: [<strong>Chip</strong>, <span> (no icon non deletable)</span>],
deletable: false,
onClose: ( function () { console.log('no icon non deletable chip'); } )
};
class AppChip 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 classes={'e-row'}>
<Block classes={'brick brick-12'}>
<Text type={'h3'} classes={'e-text-indigo-400'}>CHIPS</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'}>
They cannot be eaten. But can be used to show complex information, such as calendar events or contacts. Use them wisely by adding the e-chip-image/text/address class, as well as desired button class to your nifty code.
</Text>
<Card>
<CardContent>
<Block classes={'e-text-center'}>
<Block className={ClassNames('e-padding-top-15 e-padding-bottom-25')}>
<Chip data={ChipDeletable} iconColor='e-background-indigo-400' />
<Chip data={ChipNonDeletable} iconColor='e-background-grey-600' />
<Chip data={ChipNoIconDeletable} />
<Chip data={ChipNoIconNonDeletable} />
</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-chip</strong>
</code>
</pre>
<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>
<Text type={'p'} classes={'e-body1 e-text-blue-grey-700 padding-top-bottom-10'}>
Chip component has the following options:
<br />
<br />
1. <strong>data</strong>: object with properties:
<br />
2. <strong>name</strong>: string for input name, default: chip
<br />
3. <strong>text</strong>: string or html or component
<br />
4. <strong>icon</strong>: string or image url
<br />
5. <strong>deletable</strong>: boolean ( <strong>true</strong> or <strong>false</strong> ) - default: <strong>false</strong>
<br />
6. <strong>onClose</strong>: callback for on closing chip component
<br />
7. <strong>iconColor</strong>: string from the Colors list
<br />
<br />
</Text>
<pre className={'e-background-grey-100 e-text-black'}>
<code>
import Chip from 'essence-chip';
<br />
<br />
var ChipDeletable = {
<br />
name: 'ChipDeletable',
<br />
text: [<strong>Chip</strong>, <span> (deletable)</span>],
<br />
icon: 'D',
<br />
deletable: true,
<br />
onClose: ( function () { console.log('deletable chip'); } )
<br />
}
<br />
<br />
var ChipNonDeletable = {
<br />
name: 'ChipNonDeletable',
<br />
text: [<strong>Chip</strong>, <span> (non deletable)</span>],
<br />
icon: 'N',
<br />
deletable: false,
<br />
onClose: ( function () { console.log('non deletable chip'); } )
<br />
}
<br />
<br />var ChipNoIconDeletable = {
<br />
name: 'ChipNoIconDeletable',
<br />
text: [<strong>Chip</strong>, <span> (no icon deletable)</span>],
<br />
deletable: true,
<br />
onClose: ( function () { console.log('no icon deletable chip'); } )
<br />
}<br />
<br />var ChipNoIconNonDeletable = {
<br />
name: 'ChipNoIconNonDeletable',
<br />
text: [<strong>Chip</strong>, <span> (no icon non deletable)</span>],
<br />
deletable: false,
<br />
onClose: ( function () { console.log('no icon non deletable chip'); } )
<br />
}
<br />
<br />
<Chip data={ChipDeletable}/>
<br />
<Chip data={ChipNonDeletable}/>
<br />
<Chip data={ChipNoIconDeletable}/>
<br />
<Chip data={ChipNoIconNonDeletable}/>
</code>
</pre>
</Block>
</CardContent>
</Card>
</Block>
</Block>
</Block>
);
}
}
exports.AppChip = AppChip;