lucid-ui/dist/esm/components/LoadingIndicator/LoadingIndicator.stories.js

A UI component library from Xandr.

import _ from 'lodash';
import React, { useState, useEffect } from 'react';
import Button from '../Button/Button';
import LoadingIndicator from './LoadingIndicator';
import BarChart from '../BarChart/BarChart';
import LoadingIcon from '../Icon/LoadingIcon/LoadingIcon';
export default {
    title: 'Loading Indicator/LoadingIndicator',
    component: LoadingIndicator,
    parameters: {
        docs: {
            description: {
                component: LoadingIndicator.peek.description,
            },
        },
    },
};
/* Interactive */
export const Interactive = (args) => {
    const dates = ['2015-01-01', '2015-01-02', '2015-01-03', '2015-01-04'];
    const getData = () => _.map(dates, (date) => ({ x: date, y: _.random(1, 5) }));
    const [state, setState] = useState({
        isLoading: true,
        data: _.map(dates, (date) => ({ x: date, y: 0 })),
        overlayKind: 'dark',
    });
    const handleOverlayKindClick = () => {
        setState({
            ...state,
            overlayKind: state.overlayKind === 'dark' ? 'light' : 'dark',
        });
    };
    useEffect(() => {
        const removeIsLoading = setTimeout(() => setState({ ...state, isLoading: false, data: getData() }), 1000);
        return () => {
            clearTimeout(removeIsLoading);
        };
    }, []);
    return (React.createElement(LoadingIndicator, { ...args, isLoading: state.isLoading, overlayKind: state.overlayKind },
        React.createElement(Button, { style: { margin: 10 }, onClick: () => {
                setState({ ...state, isLoading: true });
                setTimeout(() => setState({ ...state, isLoading: false, data: getData() }), 2000);
            } }, "Get more data"),
        React.createElement(Button, { onClick: handleOverlayKindClick }, `${state.overlayKind} overlay color`),
        React.createElement(BarChart, { width: 750, data: state.data, yAxisTitle: 'Revenue' })));
    // },
};
/* Basic */
export const Basic = (args) => {
    return (React.createElement(LoadingIndicator, { ...args, isLoading: true },
        React.createElement(BarChart, { width: 750, data: [
                { x: '2015-01-01', y: 1 },
                { x: '2015-01-02', y: 2 },
                { x: '2015-01-03', y: 3 },
                { x: '2015-01-04', y: 5 },
            ] })));
};
/* Custom Message */
export const CustomMessage = (args) => {
    const { LoadingMessage, LoadingMessage: { Title, Body, Icon }, } = LoadingIndicator;
    return (React.createElement("div", null,
        React.createElement(LoadingIndicator, { ...args, isLoading: true },
            React.createElement(BarChart, { width: 750, data: [
                    { x: '2015-01-01', y: 1 },
                    { x: '2015-01-02', y: 2 },
                    { x: '2015-01-03', y: 3 },
                    { x: '2015-01-04', y: 5 },
                ] }),
            React.createElement(LoadingMessage, null,
                React.createElement(Icon, null,
                    React.createElement(LoadingIcon, { speed: 'slow' })),
                React.createElement(Title, null, "Custom Title"),
                React.createElement(Body, null, "Custom Body"))),
        React.createElement(LoadingIndicator, { ...args, isLoading: true },
            React.createElement(BarChart, { width: 750, data: [
                    { x: '2015-01-01', y: 1 },
                    { x: '2015-01-02', y: 2 },
                    { x: '2015-01-03', y: 3 },
                    { x: '2015-01-04', y: 5 },
                ] }),
            React.createElement(LoadingMessage, { Icon: React.createElement(LoadingIcon, { speed: 'fast' }), Title: 'Enhancing...', Body: 'Please wait' }))));
};
/* No Title */
export const NoTitle = (args) => {
    return (React.createElement(LoadingIndicator, { ...args, isLoading: true },
        React.createElement(BarChart, { width: 750, data: [
                { x: '2015-01-01', y: 1 },
                { x: '2015-01-02', y: 2 },
                { x: '2015-01-03', y: 3 },
                { x: '2015-01-04', y: 5 },
            ] }),
        React.createElement(LoadingIndicator.LoadingMessage, { Title: null })));
};
NoTitle.args = {
    isLoading: true,
};
/* No Overlay */
export const NoOverlay = (args) => {
    return (React.createElement(LoadingIndicator, { ...args },
        React.createElement(BarChart, { width: 750, data: [
                { x: '2015-01-01', y: 1 },
                { x: '2015-01-02', y: 2 },
                { x: '2015-01-03', y: 3 },
                { x: '2015-01-04', y: 5 },
            ] })));
};
NoOverlay.args = {
    hasOverlay: false,
    isLoading: true,
};
/* Dark Overlay */
export const DarkOverlay = (args) => {
    return (React.createElement(LoadingIndicator, { ...args },
        React.createElement(BarChart, { width: 750, data: [
                { x: '2015-01-01', y: 1 },
                { x: '2015-01-02', y: 2 },
                { x: '2015-01-03', y: 3 },
                { x: '2015-01-04', y: 5 },
            ] })));
};
DarkOverlay.args = {
    isLoading: true,
    overlayKind: 'dark',
};
//# sourceMappingURL=LoadingIndicator.stories.js.map