essence-templates
Version:
React Essence Templates - based on Essence Material Design Framework
422 lines (395 loc) • 16.3 kB
JavaScript
import React from 'react';
import ReactDOM from 'react-dom';
import ClassNames from 'classnames';
import Btn from 'essence-button';
import Icon from 'essence-icon';
import {List, ListItem} from 'essence-list';
import BottomSheets from 'essence-bottomsheet';
import {Block, Text, Divider} from 'essence-core';
import {Card, CardHeader, CardContent, CardFooter} from 'essence-card';
class AppBottomSheet extends React.Component {
constructor(props) {
super(props);
this.state = {
visible: {
simple: false,
bigicons: false,
},
classes: ClassNames(
this.props.classes,
this.props.className
)
};
}
showSimple() {
let visible = this.state.visible;
visible.simple = true;
this.setState({
visible: visible
})
}
hideSimple() {
let visible = this.state.visible;
visible.simple = false;
this.setState({
visible: visible
})
}
showBigIcons() {
let visible = this.state.visible;
visible.bigicons = true;
this.setState({
visible: visible
})
}
hideBigIcons() {
let visible = this.state.visible;
visible.bigicons = false;
this.setState({
visible: visible
})
}
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'}>BOTTOM SHEETS</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'}}>
You know those cool looking sheets that pop-up from the bottom of the screen? Yeah, we have those too. Depending on how you want information to be displayed, aligned or arranged, use the appropriate code. Here are some examples to get you started.
</Text>
<Card>
<CardContent>
<Block className={'e-padding-top-25 e-padding-bottom-25'}>
<Text type={'h4'} classes={'e-text-indigo-400'}>LIVE EXAMPLE:</Text>
<Divider classes={'thin short e-background-indigo-400'} />
<Block className={'e-text-center'}>
<Btn
type={'succes'}
label={'Show Simple Bottom Sheets'}
onClick={this.showSimple.bind(this)}
className={'flat e-background-indigo-600'} />
<Btn
type={'info'}
label={'Show Big Icons Bottom Sheets'}
onClick={this.showBigIcons.bind(this)}
className={'flat e-background-grey-700'} />
</Block>
<BottomSheets
classes={'e-background-white'}
onEnd={this.hideSimple.bind(this)}
visible={this.state.visible.simple}>
<List type={'navigation'}>
<ListItem>
<Text type={'a'} href={'#icons'}>
<Icon name={'action-picture-in-picture'} />
<Text>Icons </Text>
<Text type={'sup'}>
<Text type={'strong'} className={'e-text-indigo-400'}>by Essence</Text>
</Text>
</Text>
</ListItem>
<ListItem>
<Text type={'a'} href={'#colors'}>
<Icon name={'image-color-lens'} />
<Text>Colors</Text>
<Text type={'sup'}>
<Text type={'strong'} className={'e-text-indigo-400'}>by Essence</Text>
</Text>
</Text>
</ListItem>
<ListItem>
<Text type={'a'} href={'#button'}>
<Icon name={'toggle-radio-button-on'} />
<Text>Buttons</Text>
<Text type={'sup'}>
<Text type={'strong'} className={'e-text-indigo-400'}>by Essence</Text>
</Text>
</Text>
</ListItem>
<ListItem>
<Text type={'a'} href={'#slider'}>
<Icon name={'image-wb-irradescent'} />
<Text>Sliders</Text>
<Text type={'sup'}>
<Text type={'strong'} className={'e-text-indigo-400'}>by Essence</Text>
</Text>
</Text>
</ListItem>
</List>
</BottomSheets>
<BottomSheets
classes={'e-background-white big-icons'}
onEnd={this.hideBigIcons.bind(this)}
visible={this.state.visible.bigicons}>
<List type={'navigation'} className={'e-text-indigo-400'}>
<ListItem>
<Text type={'a'} href={'#icons'}>
<Icon name={'action-picture-in-picture'} />
<Text>Icons</Text>
</Text>
</ListItem>
<ListItem>
<Text type={'a'} href={'#colors'}>
<Icon name={'image-color-lens'} />
<Text>Colors</Text>
</Text>
</ListItem>
<ListItem>
<Text type={'a'} href={'#button'}>
<Icon name={'toggle-radio-button-on'} />
<Text>Buttons</Text>
</Text>
</ListItem>
<ListItem>
<Text type={'a'} href={'#core'}>
<Icon name={'action-group-work'} />
<Text>Core</Text>
</Text>
</ListItem>
<ListItem>
<Text type={'a'} href={'#slider'}>
<Icon name={'image-wb-irradescent'} />
<Text>Sliders</Text>
</Text>
</ListItem>
<ListItem>
<Text type={'a'} href={'#touchpad'}>
<Icon name={'action-tab-unselected'} />
<Text>TouchPad</Text>
</Text>
</ListItem>
</List>
</BottomSheets>
</Block>
<Divider />
<Block>
<Text type={'h4'} classes={'e-text-indigo-400'}>HOW TO USE:</Text>
<Divider classes={'thin short e-background-indigo-400'} />
<Text type={'p'} classes={'e-body1 e-text-blue-grey-700 padding-top-bottom-10'}>
Use the "BottomSheets" Essence component to render a group of "BottomSheetsItem" components. The "BottomSheets" Essence component will return a div container with class name "e-bottom-sheet". Inside the BottomSheets component you can include only the BottomSheetsItem component. A "BottomSheetsItem" Essence component will render one List component.
</Text>
<pre className={'e-background-grey-100 e-text-black'}>
<code>
npm install <strong>essence-bottomsheet</strong>
</code>
</pre>
<Text type={'p'} classes={'e-body1 e-text-blue-grey-700 padding-top-bottom-10'}>
BottomSheets component has the following options:
<br />
<br />
1. <strong>visible</strong>: <u>true</u> - show the bottom sheet & <u>false</u> (<strong>default</strong>) - hide the bottom sheet
<br />
2. <strong>onStart</strong>: callback function when the BottomSheet has toggled <strong>visible</strong> to <u>true</u>
<br />
3. <strong>onEnd</strong>: callback function when the BottomSheet has toggled <strong>visible</strong> to <u>false</u>
<br />
<br />
</Text>
<Text type={'p'} classes={'e-body1 e-text-indigo-400'}>
BOTTOM SHEETS SIMPLE
</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 BottomSheets from 'essence-bottomsheet';
<br />
<br />
<BottomSheets classes={'e-background-white'} visible={true}>
<br />
<List type={'navigation'}>
<br />
<ListItem>
<br />
<Text type={'a'} href={'#icons'}>
<br />
<Icon name={'action-picture-in-picture'} />
<br />
<Text>Icons </Text>
<br />
<br />
<Text type={'sup'}>
<br />
<Text type={'strong'} className={'e-text-indigo-400'}>by Essence</Text>
<br />
</Text>
<br />
</Text>
<br />
</ListItem>
<br />
<ListItem>
<br />
<Text type={'a'} href={'#colors'}>
<br />
<Icon name={'image-color-lens'} />
<br />
<Text>Colors</Text>
<br />
<br />
<Text type={'sup'}>
<br />
<Text type={'strong'} className={'e-text-indigo-400'}>by Essence</Text>
<br />
</Text>
<br />
</Text>
<br />
</ListItem>
<br />
<ListItem>
<br />
<Text type={'a'} href={'#button'}>
<br />
<Icon name={'toggle-radio-button-on'} />
<br />
<Text>Buttons</Text>
<br />
<br />
<Text type={'sup'}>
<br />
<Text type={'strong'} className={'e-text-indigo-400'}>by Essence</Text>
<br />
</Text>
<br />
</Text>
<br />
</ListItem>
<br />
<ListItem>
<br />
<Text type={'a'} href={'#slider'}>
<br />
<Icon name={'image-wb-irradescent'} />
<br />
<Text>Sliders</Text>
<br />
<br />
<Text type={'sup'}>
<br />
<Text type={'strong'} className={'e-text-indigo-400'}>by Essence</Text>
<br />
</Text>
<br />
</Text>
<br />
</ListItem>
<br />
</List>
<br />
</BottomSheets>
</code>
</pre>
<Text type={'p'} classes={'e-body1 e-text-indigo-400'}>
BOTTOM SHEETS BIG ICONS
</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 BottomSheets from 'essence-bottomsheet';
<br />
<br />
<BottomSheets classes={'e-background-white big-icons'} visible={true}>
<br />
<List type={'navigation'} className={'e-text-indigo-400'}>
<br />
<ListItem>
<br />
<Text type={'a'} href={'#icons'}>
<br />
<Icon name={'action-picture-in-picture'} />
<br />
<Text>Icons</Text>
<br />
</Text>
<br />
</ListItem>
<br />
<ListItem>
<br />
<Text type={'a'} href={'#colors'}>
<br />
<Icon name={'image-color-lens'} />
<br />
<Text>Colors</Text>
<br />
</Text>
<br />
</ListItem>
<br />
<ListItem>
<br />
<Text type={'a'} href={'#button'}>
<br />
<Icon name={'toggle-radio-button-on'} />
<br />
<Text>Buttons</Text>
<br />
</Text>
<br />
</ListItem>
<br />
<ListItem>
<br />
<Text type={'a'} href={'#core'}>
<br />
<Icon name={'action-group-work'} />
<br />
<Text>Core</Text>
<br />
</Text>
<br />
</ListItem>
<br />
<ListItem>
<br />
<Text type={'a'} href={'#slider'}>
<br />
<Icon name={'image-wb-irradescent'} />
<br />
<Text>Sliders</Text>
<br />
</Text>
<br />
</ListItem>
<br />
<ListItem>
<br />
<Text type={'a'} href={'#touchpad'}>
<br />
<Icon name={'action-tab-unselected'} />
<br />
<Text>TouchPad</Text>
<br />
</Text>
<br />
</ListItem>
<br />
</List>
<br />
</BottomSheets>
</code>
</pre>
</Block>
</CardContent>
</Card>
</Block>
</Block>
</Block>
);
}
}
exports.AppBottomSheet = AppBottomSheet;