@eviljs/reactx/widgets-view-v1/widgets-view.js

Awesome React UI Widgets

import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
import { classes } from '@eviljs/react/classes';
import { times } from '@eviljs/std/iter';
import { useState } from 'react';
import { Accordion, AccordionList } from '../accordion-v1/accordion.js';
import { ButtonArmored } from '../button-armored-v1/button-armored.js';
import { ButtonBusy } from '../button-busy-v1/button-busy.js';
import { Button } from '../button-v1/button.js';
import { CheckboxMark as CheckboxMarkV1 } from '../checkbox-v1/checkbox-mark-shape.js';
import { CheckboxMark as CheckboxMarkV2 } from '../checkbox-v1/checkbox-mark-sign.js';
import { Checkbox } from '../checkbox-v1/checkbox.js';
import { Input as InputV1 } from '../input-v1/input.js';
import { InputLabel as InputLabelV2, Input as InputV2, SecretInput as SecretInputV2 } from '../input-v2/input.js';
import { NotificationBadge } from '../notification-badge-v1/notification-badge.js';
import { ProgressLine } from '../progress-line-v1/progress-line.js';
import { RadioGroup } from '../radio-group-v1/radio-group.js';
import { Range, RangeNumeric } from '../range-v1/range.js';
import { Slide, Slider } from '../slider-v1/slider.js';
import { Spinner as SpinnerV1 } from '../spinner-v1/spinner.js';
import { Spinner as SpinnerV2 } from '../spinner-v2/spinner.js';
import { Spinner as SpinnerV3 } from '../spinner-v3/spinner.js';
import { Spinner as SpinnerV4 } from '../spinner-v4/spinner.js';
import { Switch } from '../switch-v1/switch.js';
import { Tooltip } from '../tooltip-v1/tooltip.js';
export function WidgetsView(props) {
    const { className } = props;
    const [busy, setBusy] = useState(false);
    const [checkbox, setCheckbox] = useState(false);
    const [input, setInput] = useState('');
    const [radio, setRadio] = useState('');
    const [range, setRange] = useState({ start: 50, end: 100 });
    const [slide, setSlide] = useState(0);
    const [spinner, setSpinner] = useState(false);
    return (_jsxs("div", { ...props, className: classes('WidgetsView-a252 std-flex std-flex-wrap', className), children: [_jsxs("div", { className: "section-0234 column", children: [_jsx("h6", { className: "title-74a6", children: "Buttons" }), _jsx(Button, { className: "std-button-dye", children: "Don't Click Me" }), _jsx(ButtonBusy, { className: "+reveal std-button-dye", busy: busy, spinner: _jsx(SpinnerV4, { active: busy }), onClick: () => setBusy(!busy), children: "Reveal Busy Button" }), _jsx(ButtonBusy, { className: "+replace std-button-dye", busy: busy, spinner: _jsx(SpinnerV4, { active: busy }), onClick: () => setBusy(!busy), children: "Replace Busy Button" }), _jsx(ButtonArmored, { children: ({ armor, close }) => _jsxs(_Fragment, { children: [_jsx(Button, { className: "armor std-button-plain std-button-halo", onClick: armor, children: "Armor" }), _jsx(Button, { className: "cancel std-button-plain", onClick: close, children: "Cancel" }), _jsx(Button, { className: "confirm std-button-dye", onClick: close, children: "Confirm" })] }) })] }), _jsxs("div", { className: "section-0234 column", children: [_jsx("h6", { className: "title-74a6", children: "Controls" }), _jsx(Switch, { checked: checkbox, onChange: setCheckbox, style: { fontSize: 'var(--std-icon-size2' } }), _jsx(Switch, { checked: checkbox, onChange: setCheckbox, style: { fontSize: 'var(--std-icon-size4' }, children: _jsx(CheckboxMarkV1, { className: "std-knob std-icon", style: { color: 'var(--std-color-bg1)' } }) }), _jsx(Checkbox, { checked: "mixed", disabled: true, children: _jsx(CheckboxMarkV2, {}) }), _jsx(Checkbox, { checked: checkbox, onChange: setCheckbox, children: _jsx(CheckboxMarkV2, { className: "std-icon std-icon-size1" }) }), _jsx(Checkbox, { className: "round", checked: checkbox, onChange: setCheckbox, children: _jsx(CheckboxMarkV2, { className: "std-icon std-icon-size1" }) }), _jsx(Checkbox, { checked: true, disabled: true, children: _jsx(CheckboxMarkV1, { className: "std-icon std-icon-size1" }) }), _jsx(Checkbox, { checked: checkbox, onChange: setCheckbox, children: _jsx(CheckboxMarkV1, { className: "std-icon std-icon-size1" }) }), _jsx(Checkbox, { className: "round", checked: checkbox, onChange: setCheckbox, children: _jsx(CheckboxMarkV1, { className: "std-icon std-icon-size1" }) }), _jsx(RadioGroup, { items: [
                            { value: 'a', label: 'Apple' },
                            { value: 'b', label: 'Orange' },
                        ], selected: radio, onChange: setRadio }), _jsx(RangeNumeric, { min: 0, start: range.start, end: range.end, max: 200, onChanged: setRange })] }), _jsxs("div", { className: "section-0234 column", children: [_jsx("h6", { className: "title-74a6", children: "Inputs" }), _jsx(InputV1, { placeholder: "Placeholder...", value: input, onChange: setInput }), _jsx(InputV1, { label: "Placeholder...", value: input, onChange: setInput }), _jsx(InputV2, { placeholder: "Placeholder...", value: input, onChange: setInput }), _jsx(SecretInputV2, { placeholder: "Placeholder...", hideIcon: "H", showIcon: "S", defaultValue: "123456789" }), _jsx(InputLabelV2, { title: "Label", children: _jsx(InputV2, { placeholder: "Placeholder...", value: input, onChange: setInput }) })] }), _jsxs("div", { className: "section-0234", children: [_jsx("h6", { className: "title-74a6", children: "Badges" }), "Messages: ", _jsx(NotificationBadge, { value: "199+", style: { color: 'white', backgroundColor: 'Crimson' } })] }), _jsxs("div", { className: "section-0234", children: [_jsx("h6", { className: "title-74a6", children: "Spinners" }), _jsx(Button, { className: "std-button-plain", onClick: event => setSpinner(!spinner), children: spinner ? 'Stop' : 'Start' }), _jsx(SpinnerV1, { className: "std-color-primary-accent", active: spinner }), _jsx(SpinnerV2, { className: "std-color-primary-accent", active: spinner }), _jsx(SpinnerV3, { className: "std-color-primary-accent", active: spinner }), _jsx(SpinnerV4, { className: "std-color-primary-accent", active: spinner }), _jsx(ProgressLine, { active: spinner })] }), _jsxs("div", { className: "section-0234", children: [_jsx("h6", { className: "title-74a6", children: "Tooltip" }), _jsx(Tooltip, { content: "Hello World!", position: "right-center", children: _jsx(Button, { className: "flat", children: "Right Center" }) })] }), _jsxs("div", { className: "section-0234", children: [_jsx("h6", { className: "title-74a6", children: "Slider" }), _jsx(Button, { className: "std-button-plain", onClick: (event) => setSlide(Math.max(0, slide - 1)), children: "Prev." }), _jsx(Slider, { selected: slide, style: {
                            width: '400px',
                            height: '200px',
                            background: 'var(--std-color-bg3)',
                        }, children: times(5).map(it => _jsx(Slide, { className: "std-flex std-flex-stack", children: _jsx("h6", { children: it }) }, it)) }), _jsx(Button, { className: "std-button-plain", onClick: (event) => setSlide(Math.min(4, slide + 1)), children: "Next" })] }), _jsxs("div", { className: "section-0234", children: [_jsx("h6", { className: "title-74a6", children: "Accordion" }), _jsx(AccordionList, { maxOpen: 2, children: [{ name: 'Pizza' }, { name: 'Pasta' }, { name: 'Patate' }].map((it, idx) => _jsx(Accordion, { content: _jsx("div", { className: "std-width-max2 std-text-body2 std-text-weight-1", children: Lorem }), children: it.name }, idx)) })] })] }));
}
export const Lorem = 'Lorem ipsum is simply dummy text of the printing and typesetting industry. Loren Ipsum has been the industries standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularized in the 1960s with the release of Letraset sheets containing Loren Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Loren Ipsum. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Loren Ipsum has been the industries standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularized in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.';