starticket-react-admin-theme

Admin Blue Look and Feel Theme

Admin Blue Look and Feel Theme presents simple and clean theme which can be used in many Starticket backend internal projects. The theme contains already predefined Layouts, Menus, Forms, Form controls, List, Dialog etc. with appropriate colors scheme which fits with Starticket brand colors as well.

Table of Contents

• Installation
• Example usage
• Components API
  • Layout
  • LayoutDashboard
  • Panel
  • Form
  • List
  • Dialog
  • DialogError
  • Alert
  • Title
• Licence
• Versioning
• Authors

Installation

 
npm install starticket-admin-theme
 

After npm installation is finished you have to include those links (or some other font you opt for) in index.html.

google fonts

<link href="https://fonts.googleapis.com/css?family=Roboto+Condensed" rel="stylesheet">

bootstrap css

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

After that, in main index.js file you have to put this code (<App/> component should be replaced with appropriate component related to your project).

import React                 from 'react';
import ReactDOM              from 'react-dom';
import {BrowserRouter}       from 'react-router-dom';
import registerServiceWorker from './registerServiceWorker';
import App                   from './App';
 
ReactDOM.render(<BrowserRouter><App/></BrowserRouter>, document.getElementById('root'));
registerServiceWorker();

Example usage

Now, when you have all prerequsities set, next you need to create a wrapper component which will house our Layout (in the future you will use that wrapper component as your layout component). It should be located in separate folder, for example components folder. This component won't just be a wrapper to our Layout component but it will hold all props need to be passed to Layout component.

Layout.js

import React, { Component } from 'react';
import { Layout }           from 'starticket-react-admin-theme';
 
import '../../node_modules/starticket-react-admin-theme/style.css';
 
/**
 * @class src/components/LayoutWrapper
 */
class LayoutWrapper extends Component
{
    state = {
        selectedId : '10',
        section : 'show',
        selectedMenuItem : 'Show Management',
        name : 'New Show',
        topNavigationMenuItems : {
            'Dashboard' : {
                'href' : '/',
                'icon' : {
                    'path' : './images/home.svg',
                    'alt' : 'Home'
                },
                'dropdown' : null
            }
        },
        sidebarNavigationMenuItems : {
            'Show Management' : {
                'items' : {
                    'Shows' : {
                        'href' : '/shows',
                        'number' : 10
                    },
                    'Devices' : {
                        'href' : '/devices',
                        'number' : 50
                    },
                    'Actions' : {
                        'href' : '/actions',
                        'number' : 5
                    }
                }
            }
        }
    };
 
    /**
     * Logs out user.
     */
    logout = () =>
    {
        // Logout functionality
    };
 
    /**
     * @returns {XML} 
     */
    render()
    {
        return (
            <Layout topNavigationMenuItems={this.state.topNavigationMenuItems}
                          sidebarNavigationMenuItems={this.state.sidebarNavigationMenuItems}
                          selectedMenuItem={this.state.selectedMenuItem}
                          id={this.state.selectedId}
                          section={this.state.section} name={this.state.name}
                          logoutFunction={this.logout}>
                {this.props.children}
            </Layout>
        );
    };
}
 
export default LayoutWrapper;

After that, next thing you need to do, is to make a route wrapper which will be used to render certain scene with certain layout for certain path. It should be located in your main application component (in this example it is <App/> component) and it will be just a simple component like it is shown bellow.

App.js

import { Route }           from 'react-router-dom';
 
/**
 * Route wrapper.
 *
 * @param {XML} Component 
 * @param {XML} Layout 
 * @param {Object} rest 
 *
 * @returns {XML} 
 */
const RouteWrapper = ({ component: Component, layout: Layout, ...rest }) => (
    <Route {...rest} render={props => (
        <Layout>
            <Component {...props} />
        </Layout>
    )} />
);

Next, everything you have to do is to use this RouteWrapper component, inside your render method, and pass to it path, layout (the layout wrapper you created few steps ago) and scene you want to render.

App.js

import { Switch }           from 'react-router-dom';
import { LayoutWrapper }    from './components';
import { HomeScene }        from './scenes/Home';
 
...
 
/**
 * @returns {XML} 
 */
render() {
    return (
      <div className="App">
          <Switch>
              <RouteWrapper path='/' exact component={HomeScene} layout={LayoutWrapper} />
          </Switch>
      </div>
    );
}

Here you may see the example of HomeScene component with registration form:

HomeScene.js

import { SceneTitle,
         Panel,
         Form,
         Input,
         Email,
         Button }           from 'starticket-react-admin-theme';
 
...
 
/**
 * @returns {XML} 
 */
render()
{
    return (
        <div>
            <SceneTitle text="Home Scene"/>
            <Panel title="Registration Form">
                <Form>
                    <Input label="First name" name="first-name" getValue={this.getFirstNameValue} />
                    <Input label="Last name" name="last-name" getValue={this.getLastNameValue} />
                    <Email label="Email" name="email" getValue={this.getEmailValue} />
                </Form>
                <Button onClickHandler={this.submitForm}>Submit form</Theme.Button>
            </Panel>
        </div>
    );
};

Components API

Layout

Usage example

import React, { Component } from 'react';
import { Layout }           from 'starticket-react-admin-theme';
 
/**
 * @class src/scenes/Home/Home
 */
class Home extends Component
{
    state = {
        selectedId : '10',
        section : 'show',
        selectedMenuItem : 'Show Management',
        name : 'New Show',
        topNavigationMenuItems : {
            'Dashboard' : {
                'href' : '/',
                'icon' : {
                    'path' : './images/home.svg',
                    'alt' : 'Home'
                },
                'dropdown' : null
            }
        },
        sidebarNavigationMenuItems : {
            'Show Management' : {
                'items' : {
                    'Shows' : {
                        'href' : '/shows',
                        'number' : 10
                    },
                    'Devices' : {
                        'href' : '/devices',
                        'number' : 50
                    },
                    'Actions' : {
                        'href' : '/actions',
                        'number' : 5
                    }
                }
            }
        }
    };
    
    /**
     * Logs out user.
     */
    logout = () =>
    {
        // Logout functionality
    };
 
    /**
     * Return user one step backward.
     */
    goBack = () =>
    {
        // Go back functionality
    };
    
    /**
     * @returns {XML} 
     */
    render()
    {
        return (
            <Layout  topNavigationMenuItems={this.state.topNavigationMenuItems}
                     sidebarNavigationMenuItems={this.state.sidebarNavigationMenuItems}
                     selectedMenuItem={this.state.selectedMenuItem}
                     id={this.state.selectedId}
                     section={this.state.section} 
                     name={this.state.name}
                     logoutFunction={this.logout}
                     goBack={this.goBack}>
                {this.props.children}
            </Layout>
        );
    };
}
 
export default Home;

Options

Option	Type	Required	Defaults	Description
topNavigationMenuItems	object	true		Items for top (header) navigation.
sidebarNavigationMenuItems	object	true		Items for sidebar navigation.
selectedMenuItem	string	true		Selected menu item from previous page, for example Show Management, Device Management...
section	string	true		Represent admin area (section) for example show, venue, device...
name	string	true		Name of selected show, venue, event...
id	string	true		Id of selected show, venue, event...
withoutSidebar		false		Renders layout without sidebar.

Interaction Options

Option	Type	Required	Description
logoutFunction	function	true	Handles logout functionallity.
goBack	function	true	Handles returning user one step backward.

LayoutDashboard

Usage example

import React, { Component } from 'react';
import { LayoutDashboard }  from 'starticket-react-admin-theme';
 
/**
 * @class src/scenes/Home/Home
 */
class Home extends Component
{
    state = {
            topNavigationMenuItems : {
                'Dashboard' : {
                    'href' : '/',
                    'icon' : {
                        'path' : './images/home.svg',
                        'alt' : 'Home'
                    },
                    'dropdown' : null
                }
            },
            dashboardMenuItems : {
                'Action Management' : {
                    'href' : '/dashboard/actions'
                }
            },
            path : '/dashboard/actions'
        };
 
    /**
     * Logs out user.
     */
    logout = () =>
    {
        // Logout functionality
    };
 
    /**
     * Change tab handler.
     */
    changeTab = (tab) =>
    {
        this.setState({
            path : tab
        });
    };
 
    /**
     * @returns {XML} 
     */
    render()
    {
        return (
            <Theme.LayoutDashboard  topNavigationMenuItems={this.state.topNavigationMenuItems}
                                    logoutFunction={this.logout}
                                    dashboardMenuItems={this.state.dashboardMenuItems}
                                    path={this.state.path}
                                    changeTabHandler={this.changeTab}
                                    withoutSidebar>
                {this.props.children}
            </Theme.LayoutDashboard>
        );
    };
}
 
export default Home;

Options

Option	Type	Required	Defaults	Description
topNavigationMenuItems	object	true		Items for top (header) navigation.
dashboardMenuItems	object	true		Items for dashboard navigation (tabs).
withoutSidebar		true		Removes blue background color from header hamburger menu.
path	string	true		Path for the default selected tab.

Interaction Options

Option	Type	Required	Description
logoutFunction	function	true	Handles logout functionallity.
changeTabHandler	function	true	Handles tab changing functionallity.

Panel

Usage example

import React, { Component } from 'react';
import { Panel }            from 'starticket-react-admin-theme';
 
/**
 * @class src/scenes/Home/Home
 */
class Home extends Component
{
    /**
     * @returns {XML} 
     */
    render()
    {
        return (
            <Panel title="Home Scene" colorize>
                {/*Panel content*/}
            </Panel>
        );
    };
}
 
export default Home;

Options

Option	Type	Required	Defaults	Description
title	string	true		Title shows at panel header.
className	string	false	''	By adding one of <edit / remove / up / down>.
colorize	bool	false		This options mark panel header with gray background.
layersIcon	bool	false		Shows icons at left side of panel header.
draggable	bool	false		Allow panel to be dragged.

Interaction Options

Option	Type	Required	Description
removeHandler	function	conditional	Required if panel has class remove.
editHandler	function	conditional	Required if panel has class edit.
directionDownHandler	function	conditional	Required if panel has class down.
directionUpHandler	function	conditional	Required if panel has class up.

Form

• Button
• Checkbox
• Email
• Password
• RadioGroup
• Search
• Select
• Switch
• Text
• Textarea
• ToggleSwitch

Button

Usage example

import React, { Component } from 'react';
import { Button }           from 'starticket-react-admin-theme';
 
/**
 * @class src/scenes/Home/Home
 */
class Home extends Component
{
    /**
     * Handles button click.
     */
    buttonClick = () => 
    {
        
    };
    
    /**
     * @returns {XML} 
     */
    render()
    {
        return (
            <Button onClickHandler={this.buttonClick}>Click me!</Button>
        );
    };
}
 
export default Home;

Options

Option	Type	Required	Defaults	Description
size	ButtonSizeMedium, ButtonSizeSmall, ButtonSizeTiny, ButtonEmptyAttribute, ButtonSizeLarge	false	medium	Button size.
type	ButtonTypeSocial, ButtonTypeGhost, ButtonEmptyAttribute, ButtonTypeCancel	false	''	Button type.
status	ButtonStatusDisabled, ButtonEmptyAttribute	false	''	Button status.
className	string	false	''	Additional button classes.

Interaction Options

Option	Type	Required	Description
onClickHandler	function	false	Handles click on button.

Checkbox

Usage example

import React, { Component } from 'react';
import { Form,
         Checkbox }         from 'starticket-react-admin-theme';
 
/**
 * @class src/scenes/Home/Home
 */
class Home extends Component
{
    state = {
        isChecked : false
    };
    
    /**
     * Returns checkbox object with name and value.
     * 
     * @param {Object} checkbox 
     */
    getValue = (checkbox) => 
    {
        if (this.state.isChecked !== checkbox.value) {
            this.state({
                isChecked : checkbox.value
            });
        }
    };
    
    /**
     * @returns {XML} 
     */
    render()
    {
        return (
            <Form>
                <Checkbox name="terms" label="Terms and conditions" checked={this.state.isChecked} 
                          getValue={this.getValue}/>
            </Form>
        );
    };
}
 
export default Home;

Options

Option	Type	Required	Defaults	Description
label	string	true		Checkbox label.
name	string	true		Checkbox name.
checked	bool	true		Makes checkbox checked or not.
disabled	bool	false	false	Disabled checkbox.
className	string	false	''	Additional checkbox classes.

Interaction Options

Option	Type	Required	Description
getValue	function	true	Returns checkbox value.

Email

Usage example

import React, { Component } from 'react';
import { Form,
         Email }            from 'starticket-react-admin-theme';
 
/**
 * @class src/scenes/Home/Home
 */
class Home extends Component
{
    /**
     * Returns email object with name and value.
     * 
     * @param {Object} email 
     */
    getValue = (email) => 
    {
        
    };
    
    /**
     * @returns {XML} 
     */
    render()
    {
        return (
            <Form>
                <Email label="Email" name="email" getValue={this.getValue} />
            </Form>
        );
    };
}
 
export default Home;

Options

Option	Type	Required	Defaults	Description
label	string	false	''	Email label.
name	string	true	''	Email name.
className	string	false	''	Additional email classes.
value	bool	false		Predefined email value.
readOnly	bool	false	false	Makes email readonly.
disabled	bool	false	false	Makes email disabled.
placeholder	string	false	Email	Email placeholder.

Interaction Options

Option	Type	Required	Description
getValue	function	true	Returns email object with name and value.
onKeyUp	function	false	Handles onKeyUp event.
onBlur	function	false	Handles onBlur event.

Password

Usage example

import React, { Component } from 'react';
import { Form,
         Password }         from 'starticket-react-admin-theme';
 
/**
 * @class src/scenes/Home/Home
 */
class Home extends Component
{
    /**
     * Returns password object with name and value.
     * 
     * @param {Object} password 
     */
    getValue = (password) => 
    {
        
    };
    
    /**
     * @returns {XML} 
     */
    render()
    {
        return (
            <Form>
                <Password label="Password" name="password" getValue={this.getValue} />
            </Form>
        );
    };
}
 
export default Home;

Options

Option	Type	Required	Defaults	Description
label	string	false	''	Password label.
name	string	true	''	Password name.
value	bool	false		Predefined password value.
readOnly	bool	false	false	Makes password readonly.
disabled	bool	false	false	Makes password disabled.
placeholder	string	false	''	Password placeholder.
className	string	false	''	Additional password classes.

Interaction Options`

Option	Type	Required	Description
getValue	function	true	Returns password object with name and value.
onKeyUp	function	false	Handles onKeyUp event.
onBlur	function	false	Handles onBlur event.

RadioGroup

Usage example

import React, { Component } from 'react';
import { Form,
         RadioGroup }       from 'starticket-react-admin-theme';
 
/**
 * @class src/scenes/Home/Home
 */
class Home extends Component
{
    state = {
        defaultValue : 'male',
        labels       : {
            'male'   : 'Male',
            'female' : 'Female'
        }
    }
    
    /**
     * Returns event object.
     * 
     * @param {Object} event 
     */
    getValue = (event) => 
    {
        if (this.state.defaultValue !== event.target.value) {
            this.setState({
                defaultValue : event.target.value
            });
        }
    };
    
    /**
     * @returns {XML} 
     */
    render()
    {
        return (
            <Form>
                <RadioGroup name="sex" defaultValue={this.state.defaultValue} 
                            labels={this.state.labels} getValue={this.getValue} />
            </Form>
        );
    };
}
 
export default Home;

Options

Option	Type	Required	Defaults	Description
name	string	true		Radio group name.
defaultValue	string	true		Selected option.
className	string	false		Additional radio group classes.
disabled	bool	false		Makes radio group disabled.
readOnly	bool	false		Makes radio group readonly.
disabledValues	string	false		Makes certain option disabled.
labels	object	true		Radio group options.

Interaction Options

Option	Type	Required	Description
getValue	function	true	Returns event object.

Search

Usage example

import React, { Component } from 'react';
import { Form,
         Search }           from 'starticket-react-admin-theme';
 
/**
 * @class src/scenes/Home/Home
 */
class Home extends Component
{
    /**
     * Returns search object with name and value.
     * 
     * @param {Object} search 
     */
    getValue = (search) => 
    {
        
    };
    
    /**
     * @returns {XML} 
     */
    render()
    {
        return (
            <Form>
                <Search name="search" getValue={this.getValue} />
            </Form>
        );
    };
}
 
export default Home;

Options

Option	Type	Required	Defaults	Description
label	string	false	''	Search label.
name	string	true	''text' + Math.floor(Math.random() * 10)'	Search name.
value	string	false		Search value.
disabled	bool	false	false	Makes Search disabled.
className	string	false	''	Additional Search classes.
readOnly	bool	false	false	Makes Search readonly.
placeholder	string	false	'Enter text here'	Search placeholder.

Interaction Options

Option	Type	Required	Description
getValue	function	true	Returns seacrh object.
onKeyUp	function	false	Handles onKeyUp event.
onBlur	function	false	Handles onBlur event.

Select

Usage example

import React, { Component } from 'react';
import { Form,
         Select }           from 'starticket-react-admin-theme';
 
/**
 * @class src/scenes/Home/Home
 */
class Home extends Component
{
    state = {
        selectData : {
            'sr' : 'Serbia',
            'gr' : 'Greece',
            'it' : 'Italy'
        }
    }
    
    /**
     * Returns select object with uid and value.
     * 
     * @param {Object} select 
     */
    getValue = (select) => 
    {
        
    };
    
    /**
     * @returns {XML} 
     */
    render()
    {
        return (
            <Form>
                <Select name="search" data={this.state.selectData} getValue={this.getValue} />
            </Form>
        );
    };
}
 
export default Home;

Options

Option	Type	Required	Defaults	Description
name	string	true	''select' + Math.floor(Math.random() * 10)'	Select name.
data	object	true		Select data.
uid	string	false		Select uid.
initialValue	string	false		Initialy selected option.
value	string	false		Selected option.
disabled	bool	false	false	Makes select disabled.

Interaction Options

Option	Type	Required	Description
getValue	function	true	Returns select object.

Switch

Usage example

import React, { Component } from 'react';
import { Form,
         Switch }           from 'starticket-react-admin-theme';
 
/**
 * @class src/scenes/Home/Home
 */
class Home extends Component
{
    state = {
        isChecked : false
    }
    
    /**
     * Returns switch value.
     * 
     * @param {Boolean} isChecked 
     */
    getValue = (isChecked) => 
    {
        if (isChecked !== this.state.isChecked) {
            this.setState({
                isChecked : isChecked
            });
        }
    };
    
    /**
     * @returns {XML} 
     */
    render()
    {
        return (
            <Form>
                <Switch name="isActive" label="Is active?" checked={this.state.isChecked} 
                        getValue={this.getValue} />
            </Form>
        );
    };
}
 
export default Home;

Options

Option	Type	Required	Defaults	Description
name	string	true		Switch name.
label	string	true		Switch label.
checked	bool	true		Checks/Unchecks switch.
className	string	false	''	Additional switch classes.
disabled	bool	false	false	Makes switch disabled.

Interaction Options

Option	Type	Required	Description
getValue	function	true	Returns switch value.

Text

Usage example

import React, { Component } from 'react';
import { Form,
         Text }             from 'starticket-react-admin-theme';
 
/**
 * @class src/scenes/Home/Home
 */
class Home extends Component
{
    /**
     * Returns text object with name and value.
     * 
     * @param {Object} text 
     */
    getValue = (text) => 
    {
        
    };
    
    /**
     * @returns {XML} 
     */
    render()
    {
        return (
            <Form>
                <Text label="Company" name="company" getValue={this.getValue} />
            </Form>
        );
    };
}
 
export default Home;

Options

Option	Type	Required	Defaults	Description
label	string	false		Text label.
name	string	true		Text name.
className	string	false	''	Additional text classes.
value	bool	false		Predefined text value.
readOnly	bool	false	false	Makes text readonly.
disabled	bool	false	false	Makes text disabled.
placeholder	string	false	''	Text placeholder.

Interaction Options

Option	Type	Required	Description
getValue	function	true	Returns text object with name and value.
onKeyUp	function	false	Handles onKeyUp event.
onBlur	function	false	Handles onBlur event.

Textarea

Usage example

import React, { Component } from 'react';
import { Form,
         Textarea }         from 'starticket-react-admin-theme';
 
/**
 * @class src/scenes/Home/Home
 */
class Home extends Component
{
    /**
     * Returns event.
     * 
     * @param {Object} event 
     */
    getValue = (event) => 
    {
        
    };
    
    /**
     * @returns {XML} 
     */
    render()
    {
        return (
            <Form>
                <Textarea label="Biography" name="bio" getValue={this.getValue} />
            </Form>
        );
    };
}
 
export default Home;

Options

Option	Type	Required	Defaults	Description
label	string	false	''	Textarea label.
name	string	true	'textarea' + Math.floor(Math.random() * 10)	Textarea name.
readOnly	bool	false	false	Makes textarea readonly.
disabled	bool	false	false	Makes textarea disabled.
placeholder	string	false	''	Textarea placeholder.
className	string	false	''	Additional textarea classes.

Interaction Options

Option	Type	Required	Description
onChangeHandler	function	false	Returns event object.

ToggleSwitch

Usage example

import React, { Component } from 'react';
import { Form,
         ToggleSwitch }     from 'starticket-react-admin-theme';
 
/**
 * @class src/scenes/Home/Home
 */
class Home extends Component
{
    state = {
        labels : {
            '1' : 'superadmin',
            '2' : 'admin',
            '3' : 'contributor',
        }
    }
    
    /**
     * Returns toggle switch event.
     * 
     * @param {Object} event 
     */
    getValue = (event) => 
    {
        
    };
    
    /**
     * @returns {XML} 
     */
    render()
    {
        return (
            <Form>
                <ToggleSwitch name="role" labels={this.state.labels} getValue={this.getValue} />
            </Form>
        );
    };
}
 
export default Home;

Options

Option	Type	Required	Defaults	Description
name	string	true		SwitchToggle name.
disabledValues	string	false		Makes certain option of switchToggle disabled.
readonly	bool	false		Makes switchToggle readonly.
defaultValue	string	false		ToggleSwitch default value.
disabled	bool	false	false	Makes switchToggle disabled.
className	string	false	''	Additional switchToggle classes.
labels	object	true		SwitchToggle options.

Interaction Options

Option	Type	Required	Description
getValue	function	true	Returns switchToggle value.

List

Usage example

import React, { Component } from 'react';
import { List }             from 'starticket-react-admin-theme';
 
/**
 * @class src/scenes/Home/Home
 */
class Home extends Component
{
    state = {
        listColumns : {
            'Id'    : {'subtitle':null},
            'Name'  : {'subtitle':null},
            'Date'  : {'subtitle':null},
        },
        listData : [
            [1,'Show 1','10-10-2020 10:00'],
            [2,'Show 2','12-12-2022 12:00']
        ]
    };
    
    /**
     * @returns {XML} 
     */
    render()
    {
        return (
            <List columns={this.state.listColumns} data={this.state.listData} />
        );
    };
}
 
export default Home;

Options

Option	Type	Required	Defaults	Description
columns	object	true		Name of list columns with optional title property.
data	array	false		List cells data.

Dialog

Usage example

import React, { Component } from 'react';
import { Dialog }           from 'starticket-react-admin-theme';
 
/**
 * @class src/scenes/Home/Home
 */
class Home extends Component
{
    state = {
        showDialog: true
    };
    
    /**
     * Handles dialog confirmation.
     */
    confirmDialog = () =>
    {
 
    };
 
    /**
     * Closes dialog.
     */
    closeDialog = () =>
    {
        this.setState({
            showDialog: false
        });
    };
    
    /**
     * @returns {XML} 
     */
    render()
    {
        return (
            <Dialog title="Theme Dialog" show={this.state.showDialog} 
                          action={this.confirmDialog} closeDialog={this.closeDialog}>
                Starticket Theme Dialog
            </Dialog>
        );
    };
}
 
export default Home;

Options

Option	Type	Required	Defaults	Description
title	string	false		Title shown at dialog header.
additionalTitle	string	false		Subtitle shown beside title at dialog header.
show	bool	true		Shows (pop ups) dialog.
mainButton	string	false	Create	Confirmation button name.
mainButtonDisabled	bool	false		Disables confirmation button.
cancellationButton	string	false	Cancel	Cancelation button name.
hideCancellationButton	bool	false	false	Hides cancelation button.

Interaction Options

Option	Type	Required	Description
action	function	true	Handles dialog confirmation.
closeDialog	function	true	Handles dialog cancelation.

DialogError

Usage example

import React, { Component } from 'react';
import { DialogError }      from 'starticket-react-admin-theme';
 
/**
 * @class src/scenes/Home/Home
 */
class Home extends Component
{
    state = {
        showDialogError: true
    };
    
    /**
     * Closes dialog.
     */
    closeDialog = () =>
    {
        this.setState({
            showDialogError: false
        });
    };
    
    /**
     * @returns {XML} 
     */
    render()
    {
        return (
            <DialogError show={this.state.showDialogError} closeDialog={this.closeDialog}>
                Unfortunatelly an error occurred!
            </DialogError>
        );
    };
}
 
export default Home;

Options

Option	Type	Required	Defaults	Description
show	bool	true		Shows (pop ups) error dialog.

Interaction Options

Option	Type	Required	Description
closeDialog	function	true	Handles error dialog cancelation.

Alert

Usage example

import React, { Component }  from 'react';
import { Alert, 
         AlertTypeSuccess }  from 'starticket-react-admin-theme';
 
/**
 * @class src/scenes/Home/Home
 */
class Home extends Component
{
    /**
     * @returns {XML} 
     */
    render()
    {
        return (
            <Alert type={AlertTypeSuccess}>
                {/*Alert content*/}
            </Alert>
        );
    };
}
 
export default Home;

Options

Option	Type	Required	Defaults	Description
type	AlertTypeSuccess, AlertTypeError, AlertTypeInfo	true		Type of alert.

Title

Usage example

import React, { Component }  from 'react';
import { SceneTitle }        from 'starticket-react-admin-theme';
 
/**
 * @class src/scenes/Home/Home
 */
class Home extends Component
{
    /**
     * @returns {XML} 
     */
    render()
    {
        return (
            <SceneTitle text="Home Scene"/>
        );
    };
}
 
export default Home;

Options

Option	Type	Required	Defaults	Description
text	string	false	''	Scene title text.

Licence

Private

Versioning

We use SemVer for versioning. Current version is v1.0.0-beta

Authors

• Ana Simonović - Developer - [e-mail]
• Stevan Tošić - Developer - [e-mail]
• Nikola Radović - Developer - [e-mail]
• Milivoje Vujadinović - Team Lead - [e-mail]

Built With

• React JS - The JavaScript Library Used