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 - [email protected]
• Stevan Tošić - Developer - [email protected]
• Nikola Radović - Developer - [email protected]
• Milivoje Vujadinović - Team Lead - [email protected]

Built With

• React JS - The JavaScript Library Used