katoikia-app/web-ui/web-react/src/templates/ButtonDemo.js

import React, { useState } from 'react';
import { Button } from 'primereact/button';
import { SplitButton } from 'primereact/splitbutton';

const ButtonDemo = () => {
    const [loading1, setLoading1] = useState(false);
    const [loading2, setLoading2] = useState(false);
    const [loading3, setLoading3] = useState(false);
    const [loading4, setLoading4] = useState(false);

    const onLoadingClick1 = () => {
        setLoading1(true);

        setTimeout(() => {
            setLoading1(false);
        }, 2000);
    }

    const onLoadingClick2 = () => {
        setLoading2(true);

        setTimeout(() => {
            setLoading2(false);
        }, 2000);
    }

    const onLoadingClick3 = () => {
        setLoading3(true);

        setTimeout(() => {
            setLoading3(false);
        }, 2000);
    }

    const onLoadingClick4 = () => {
        setLoading4(true);

        setTimeout(() => {
            setLoading4(false);
        }, 2000);
    }

    const items = [
        {
            label: 'Update',
            icon: 'pi pi-refresh'
        },
        {
            label: 'Delete',
            icon: 'pi pi-times'
        },
        {
            label: 'Home',
            icon: 'pi pi-home'
        }
    ];

    return (
        <div className="grid">
            <div className="col-12 md:col-6">
                <div className="card">
                    <h5>Default</h5>
                    <Button label="Submit" className="mr-2 mb-2"></Button>
                    <Button label="Disabled" className="mr-2 mb-2" disabled></Button>
                    <Button label="Link" className="p-button-link mb-2 mr-2"></Button>
                </div>

                <div className="card">
                    <h5>Severities</h5>
                    <Button label="Primary" className="mr-2 mb-2" />
                    <Button label="Secondary" className="p-button-secondary mr-2 mb-2" />
                    <Button label="Success" className="p-button-success mr-2 mb-2" />
                    <Button label="Info" className="p-button-info mr-2 mb-2" />
                    <Button label="Warning" className="p-button-warning mr-2 mb-2" />
                    <Button label="Danger" className="p-button-danger mr-2 mb-2" />
                </div>

                <div className="card">
                    <h5>Text</h5>
                    <Button label="Primary" className="p-button-text mr-2 mb-2" />
                    <Button label="Secondary" className="p-button-secondary p-button-text mr-2 mb-2" />
                    <Button label="Success" className="p-button-success p-button-text mr-2 mb-2" />
                    <Button label="Info" className="p-button-info p-button-text mr-2 mb-2" />
                    <Button label="Warning" className="p-button-warning p-button-text mr-2 mb-2" />
                    <Button label="Help" className="p-button-help p-button-text mr-2 mb-2" />
                    <Button label="Danger" className="p-button-danger p-button-text mr-2 mb-2" />
                    <Button label="Plain" className="p-button-plain p-button-text mr-2 mb-2" />
                </div>

                <div className="card">
                    <h5>Outlined</h5>
                    <Button label="Primary" className="p-button-outlined mr-2 mb-2" />
                    <Button label="Secondary" className="p-button-outlined p-button-secondary mr-2 mb-2" />
                    <Button label="Success" className="p-button-outlined p-button-success mr-2 mb-2" />
                    <Button label="Info" className="p-button-outlined p-button-info mr-2 mb-2" />
                    <Button label="Warning" className="p-button-outlined p-button-warning mr-2 mb-2" />
                    <Button label="Help" className="p-button-outlined p-button-help mr-2 mb-2" />
                    <Button label="Danger" className="p-button-outlined p-button-danger mr-2 mb-2" />
                </div>

                <div className="card">
                    <h5>Button Group</h5>
                    <span className="p-buttonset">
                        <Button label="Save" icon="pi pi-check" />
                        <Button label="Delete" icon="pi pi-trash" />
                        <Button label="Cancel" icon="pi pi-times" />
                    </span>
                </div>

                <div className="card">
                    <h5>SplitButton</h5>
                    <SplitButton label="Save" icon="pi pi-check" model={items} className="p-button-secondary mr-2 mb-2"></SplitButton>
                    <SplitButton label="Save" icon="pi pi-check" model={items} className="p-button-success mr-2 mb-2"></SplitButton>
                    <SplitButton label="Save" icon="pi pi-check" model={items} className="p-button-info mr-2 mb-2"></SplitButton>
                    <SplitButton label="Save" icon="pi pi-check" model={items} className="p-button-warning mr-2 mb-2"></SplitButton>
                    <SplitButton label="Save" icon="pi pi-check" model={items} className="p-button-danger mr-2 mb-2"></SplitButton>
                </div>
            </div>

            <div className="col-12 md:col-6">
                <div className="card">
                    <h5>Icons</h5>
                    <Button icon="pi pi-star-fill" className="mr-2 mb-2"></Button>
                    <Button label="Bookmark" icon="pi pi-bookmark" className="mr-2 mb-2"></Button>
                    <Button label="Bookmark" icon="pi pi-bookmark" iconPos="right" className="mr-2 mb-2"></Button>
                </div>

                <div className="card">
                    <h5>Raised</h5>
                    <Button label="Primary" className="p-button-raised mr-2 mb-2" />
                    <Button label="Secondary" className="p-button-raised p-button-secondary mr-2 mb-2" />
                    <Button label="Success" className="p-button-raised p-button-success mr-2 mb-2" />
                    <Button label="Info" className="p-button-raised p-button-info mr-2 mb-2" />
                    <Button label="Warning" className="p-button-raised p-button-warning mr-2 mb-2" />
                    <Button label="Danger" className="p-button-raised p-button-danger mr-2 mb-2" />
                </div>

                <div className="card">
                    <h5>Rounded</h5>
                    <Button label="Primary" className="p-button-rounded mr-2 mb-2" />
                    <Button label="Secondary" className="p-button-rounded p-button-secondary mr-2 mb-2" />
                    <Button label="Success" className="p-button-rounded p-button-success mr-2 mb-2" />
                    <Button label="Info" className="p-button-rounded p-button-info mr-2 mb-2" />
                    <Button label="Warning" className="p-button-rounded p-button-warning mr-2 mb-2" />
                    <Button label="Danger" className="p-button-rounded p-button-danger mr-2 mb-2" />
                </div>

                <div className="card">
                    <h5>Rounded Icons</h5>
                    <Button icon="pi pi-star" className="p-button-rounded mr-2 mb-2" />
                    <Button icon="pi pi-bookmark" className="p-button-rounded p-button-secondary mr-2 mb-2" />
                    <Button icon="pi pi-check" className="p-button-rounded p-button-success mr-2 mb-2" />
                    <Button icon="pi pi-search" className="p-button-rounded p-button-info mr-2 mb-2" />
                    <Button icon="pi pi-user" className="p-button-rounded p-button-warning mr-2 mb-2" />
                    <Button icon="pi pi-sign-out" className="p-button-rounded p-button-danger mr-2 mb-2" />
                </div>

                <div className="card">
                    <h5>Rounded Text</h5>
                    <Button icon="pi pi-check" className="p-button-rounded p-button-text mr-2 mb-2" />
                    <Button icon="pi pi-bookmark" className="p-button-rounded p-button-secondary p-button-text mr-2 mb-2" />
                    <Button icon="pi pi-search" className="p-button-rounded p-button-success p-button-text mr-2 mb-2" />
                    <Button icon="pi pi-user" className="p-button-rounded p-button-info p-button-text mr-2 mb-2" />
                    <Button icon="pi pi-bell" className="p-button-rounded p-button-warning p-button-text mr-2 mb-2" />
                    <Button icon="pi pi-heart" className="p-button-rounded p-button-help p-button-text mr-2 mb-2" />
                    <Button icon="pi pi-times" className="p-button-rounded p-button-danger p-button-text mr-2 mb-2" />
                    <Button icon="pi pi-filter" className="p-button-rounded p-button-plain p-button-text mr-2 mb-2" />
                </div>

                <div className="card">
                    <h5>Rounded Outlined</h5>
                    <Button icon="pi pi-check" className="p-button-rounded p-button-outlined mr-2 mb-2" />
                    <Button icon="pi pi-bookmark" className="p-button-rounded p-button-secondary p-button-outlined mr-2 mb-2" />
                    <Button icon="pi pi-search" className="p-button-rounded p-button-success p-button-outlined mr-2 mb-2" />
                    <Button icon="pi pi-user" className="p-button-rounded p-button-info p-button-outlined mr-2 mb-2" />
                    <Button icon="pi pi-bell" className="p-button-rounded p-button-warning p-button-outlined mr-2 mb-2" />
                    <Button icon="pi pi-heart" className="p-button-rounded p-button-help p-button-outlined mr-2 mb-2" />
                    <Button icon="pi pi-times" className="p-button-rounded p-button-danger p-button-outlined mr-2 mb-2" />
                </div>

                <div className="card">
                    <h5>Loading</h5>
                    <Button className="mr-2 mb-2" label="Search" icon="pi pi-search" loading={loading1} onClick={onLoadingClick1} />
                    <Button className="mr-2 mb-2" label="Search" icon="pi pi-search" iconPos="right" loading={loading2} onClick={onLoadingClick2} />
                    <Button className="mr-2 mb-2" icon="pi pi-search" loading={loading3} onClick={onLoadingClick3} />
                    <Button className="mr-2 mb-2" label="Search" loading={loading4} onClick={onLoadingClick4} />
                </div>
            </div>
        </div>
    )
}

const comparisonFn = function (prevProps, nextProps) {
    return prevProps.location.pathname === nextProps.location.pathname;
};

export default React.memo(ButtonDemo, comparisonFn);