essence-templates
Version:
React Essence Templates - based on Essence Material Design Framework
214 lines (197 loc) • 8.29 kB
JavaScript
import React from 'react';
import ReactDOM from 'react-dom';
import ClassNames from 'classnames';
import Stepper from 'essence-stepper';
import {Block, Text, Divider} from 'essence-core';
import {Card, CardHeader, CardContent, CardFooter} from 'essence-card';
const Steps = {
'editable': [
{
'title': (<Text>Select campaign settings</Text>),
'content': (<Text className={'e-caption'}>Campaign settings</Text>)
},
{
'title': (<Text>Create an ad group</Text>),
'optional': (<Text>Optional</Text>),
'content': (<Text className={'e-caption'}>Ad group</Text>)
},
{
'title': (<Text>Create an ad</Text>),
'content': (<Text className={'e-caption'}>Ad details</Text>)
}
],
'non-editable': [
{
'title': (<Text>Select campaign settings</Text>),
'content': (<Text className={'e-caption'}>Campaign settings</Text>)
},
{
'title': (<Text>Create an ad group</Text>),
'content': (<Text className={'e-caption'}>Ad group</Text>)
},
{
'title': (<Text>Create an ad</Text>),
'content': (<Text className={'e-caption'}>Ad details</Text>)
}
]
};
class AppStepper extends React.Component {
constructor(props) {
super(props);
this.state = {
classes: ClassNames(
this.props.classes,
this.props.className
)
};
}
continueStep(currentStep) {
console.log('continueStep', currentStep);
}
backStep(currentStep) {
console.log('backStep', currentStep);
}
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'}>STEPPERS</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'}}>
Steppers convey progress through numbered steps. They may also be used for navigation.
</Text>
<Card>
<CardContent>
<Block>
<Text type={'h4'} classes={'e-text-indigo-400'}>LIVE EXAMPLE:</Text>
<Divider classes={'thin short e-background-indigo-400'} />
<Text type={'h3'} classes={'e-text-indigo-400 e-caption e-padding-top-25'}>EDITABLE:</Text>
<Stepper steps={Steps['editable']}/>
<Text type={'h3'} classes={'e-text-indigo-400 e-caption e-padding-top-25'}>NON EDITABLE:</Text>
<Stepper editable={false} steps={Steps['non-editable']} onContinue={this.continueStep.bind(this)} onBack={this.backStep.bind(this)} />
<Text type={'h3'} classes={'e-text-indigo-400 e-caption e-padding-top-25'}>VERTICAL:</Text>
<Stepper type={'vertical'} editable={false} steps={Steps['non-editable']} onContinue={this.continueStep.bind(this)} onBack={this.backStep.bind(this)} />
</Block>
<Block className={'e-padding-top-50'}>
<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-stepper</strong>
</code>
</pre>
<Text type={'p'} classes={'e-body1 e-text-blue-grey-700 padding-top-bottom-10'}>
Stepper component has the following options:
<br />
<br />
1. <strong>steps</strong>: default <u>{}</u> empty object, see the example bellow to customize
<br />
2. <strong>editable</strong>: default <u>true</u> or <u>false</u>
<br />
3. <strong>type</strong>: default <u>horizontal</u> or <u>vertical</u>
<br />
4. <strong>currentStep</strong>: initial step <u>0</u>
<br />
5. <strong>onContinue</strong>: default callback <u>null</u>
<br />
6. <strong>onBack</strong>: default callback <u>null</u>
<br />
7. <strong>activeColor</strong>: default color <u>e-background-indigo-400</u>, use a background color class to change the default active color
<br />
8. <strong>inactiveColor</strong>: default color <u>e-background-grey-400</u>, use a background color class to change the default inactive color
<br />
</Text>
<pre className={'e-background-grey-100 e-text-black'}>
<code>
import Stepper from 'essence-stepper';
<br />
<br />
const Steps = {
<br />
'editable': [
<br />
{
<br />
'title': (<Text>Select campaign settings</Text>),
<br />
'content': (<Text className={'e-caption'}>Campaign settings</Text>)
<br />
},
<br />
{
<br />
'title': (<Text>Create an ad group</Text>),
<br />
'optional': (<Text>Optional</Text>),
<br />
'content': (<Text className={'e-caption'}>Ad group</Text>)
<br />
},
<br />
{
<br />
'title': (<Text>Create an ad</Text>),
<br />
'content': (<Text className={'e-caption'}>Ad details</Text>)
<br />
}
<br />
],
<br />
'non-editable': [
<br />
{
<br />
'title': (<Text>Select campaign settings</Text>),
<br />
'content': (<Text className={'e-caption'}>Campaign settings</Text>)
<br />
},
<br />
{
<br />
'title': (<Text>Create an ad group</Text>),
<br />
'content': (<Text className={'e-caption'}>Ad group</Text>)
<br />
},
<br />
{
<br />
'title': (<Text>Create an ad</Text>),
<br />
'content': (<Text className={'e-caption'}>Ad details</Text>)
<br />
},
<br />
{
<br />
'content': (<Text className={'e-caption'}>Summary</Text>)
<br />
}
<br />
]
<br />
};
<br />
<br />
<Stepper steps={Steps['editable']} />
<br />
<br />
<Stepper editable={false} steps={Steps['non-editable']} onContinue={this.continueStep.bind(this)} onBack={this.backStep.bind(this)} />
<br />
<br />
<Stepper type={'vertical'} editable={false} steps={Steps['non-editable']} onContinue={this.continueStep.bind(this)} onBack={this.backStep.bind(this)} />
</code>
</pre>
</Block>
</CardContent>
</Card>
</Block>
</Block>
</Block>
);
}
}
exports.AppStepper = AppStepper;