@pinnacle0/web-ui 0.3.22 → 0.3.23

package/test/ui-test/src/component/core/RelativeTimeDemo.tsx

@@ -0,0 +1,35 @@
+import React, {useEffect} from "react";
+import moment from "moment";
+import type {Props as RelativeTimeProps} from "@pinnacle0/web-ui/core/RelativeTime";
+import {RelativeTime} from "@pinnacle0/web-ui/core/RelativeTime";
+import type {DemoHelperGroupConfig} from "../DemoHelper";
+import {DemoHelper} from "../DemoHelper";
+
+const RelativeTimeDisplay = (props: RelativeTimeProps) => {
+    const [initialRepaintTimeout, setInitialRepaintTimeout] = React.useState("-");
+    const ref = React.useRef<RelativeTime>(null);
+    useEffect(() => {
+        const timeout = setTimeout(() => setInitialRepaintTimeout(`${ref.current!["timeoutDuration"] / 1000}`), 10);
+        return () => clearTimeout(timeout);
+    }, []);
+    return (
+        <div>
+            <div>{moment(props.date).format()}</div>
+            <div>Update in {initialRepaintTimeout} seconds</div>
+            <RelativeTime {...props} ref={ref} />
+        </div>
+    );
+};
+
+const groups: DemoHelperGroupConfig[] = [
+    {
+        title: "RelativeTime",
+        components: [
+            <RelativeTimeDisplay date={new Date()} />,
+            <RelativeTimeDisplay date={new Date("2020-08-13T14:00:00+08:00")} />,
+            //
+        ],
+    },
+];
+
+export const RelativeTimeDemo = () => <DemoHelper groups={groups} />;

package/test/ui-test/src/component/core/SelectDemo/index.tsx

@@ -0,0 +1,141 @@
+import React from "react";
+import {EnumRadio} from "@pinnacle0/web-ui/core/EnumRadio";
+import {EnumSelect} from "@pinnacle0/web-ui/core/EnumSelect";
+import {MultipleEnumSelect} from "@pinnacle0/web-ui/core/MultipleEnumSelect";
+import {BoolRadio} from "@pinnacle0/web-ui/core/BoolRadio";
+import {Select} from "@pinnacle0/web-ui/core/Select";
+import {withUncontrolledInitialValue} from "../../../util/withUncontrolledInitialValue";
+import {DemoHelper} from "../../DemoHelper";
+import type {DemoHelperGroupConfig} from "../../DemoHelper";
+
+const UncontrolledEnumRadio = withUncontrolledInitialValue(EnumRadio);
+const UncontrolledBoolRadio = withUncontrolledInitialValue(BoolRadio);
+const UncontrolledEnumRadioNullable = withUncontrolledInitialValue(EnumRadio.Nullable);
+const UncontrolledEnumRadioInitialNullable = withUncontrolledInitialValue(EnumRadio.InitialNullable);
+const UncontrolledMultipleSelect = withUncontrolledInitialValue(MultipleEnumSelect);
+const UncontrolledEnumSelect = withUncontrolledInitialValue(EnumSelect);
+const UncontrolledEnumSelectNullable = withUncontrolledInitialValue(EnumSelect.Nullable);
+const UncontrolledEnumSelectInitialNullable = withUncontrolledInitialValue(EnumSelect.InitialNullable);
+
+enum TestEnum {
+    ONE,
+    TWO,
+    THREE,
+}
+
+const groups: DemoHelperGroupConfig[] = [
+    {
+        title: "Enum Radio Demo",
+        components: [<UncontrolledEnumRadio list={[1, 2, 3]} translator={_ => _ + ""} initialValue={1} />],
+    },
+    {
+        title: "Nullable Enum Radio Demo",
+        components: [<UncontrolledEnumRadioNullable list={[1, 2, 3]} translator={_ => _ + ""} initialValue={1} />],
+    },
+    {
+        title: "Initial Nullable Enum Radio Demo",
+        components: [<UncontrolledEnumRadioInitialNullable list={[1, 2, 3]} translator={_ => _ + ""} initialValue={null} />],
+    },
+    {
+        title: "Enum Radio Button Demo",
+        components: [
+            <UncontrolledEnumRadio list={[1, 2, 3]} translator={_ => _ + ""} initialValue={1} useButtonMode />,
+            <UncontrolledEnumRadio
+                list={[TestEnum.ONE, TestEnum.TWO, TestEnum.THREE]}
+                translator={_ => (_ === TestEnum.ONE ? "One" : _ === TestEnum.TWO ? "Two" : "Three")}
+                initialValue={TestEnum.ONE}
+                useButtonMode
+            />,
+        ],
+    },
+    {
+        title: "Boolean Radio Nullable",
+        components: [<UncontrolledBoolRadio allowNull initialValue={null} />],
+    },
+    {
+        title: "Boolean Radio Initial Nullable",
+        components: [<UncontrolledBoolRadio initialValue />],
+    },
+    {
+        title: "Select",
+        components: [
+            <Select
+                options={[
+                    {
+                        label: "Apple",
+                        value: "Apple",
+                    },
+                    {
+                        label: "Disabled",
+                        value: "Disabled",
+                        disabled: true,
+                    },
+                ]}
+                style={{width: 200}}
+            />,
+        ],
+    },
+    {
+        title: "MultipleEnumSelect",
+        components: [<UncontrolledMultipleSelect list={["apple", "boy", "c++"]} translator={_ => _.toString()} initialValue={["apple"]} style={{width: 200}} />],
+    },
+    {
+        title: "Enum Dropdown Demo",
+        components: [
+            <UncontrolledEnumSelect
+                list={["apple🍏", "banana🍌", "canadian🍁", "donki🐧"]}
+                initialValue="apple"
+                translator={_ => String(_).toUpperCase()}
+                style={{
+                    width: 200,
+                }}
+            />,
+            <UncontrolledEnumSelect
+                list={["apple🍏", "banana🍌", "canadian🍁", "donki🐧"]}
+                initialValue="banana"
+                translator={_ => String(_).toUpperCase()}
+                style={{
+                    width: 200,
+                }}
+            />,
+        ],
+    },
+    {
+        title: "Nullable Enum Dropdown Demo",
+        components: [
+            <UncontrolledEnumSelectNullable
+                list={["apple🍏", "banana🍌", "canadian🍁", "donki🐧"]}
+                initialValue={null}
+                translator={_ => String(_).toUpperCase()}
+                nullText="Pick your food"
+                style={{
+                    width: 200,
+                }}
+            />,
+            <UncontrolledEnumSelectNullable
+                list={["apple🍏", "banana🍌", "canadian🍁", "donki🐧"]}
+                initialValue="apple"
+                translator={_ => String(_).toUpperCase()}
+                style={{
+                    width: 200,
+                }}
+            />,
+        ],
+    },
+    {
+        title: "Initial Nullable Enum Dropdown Demo",
+        components: [
+            <UncontrolledEnumSelectInitialNullable
+                list={["apple🍏", "banana🍌", "canadian🍁", "donki🐧"]}
+                initialValue={null}
+                placeholder="Please select ..."
+                translator={_ => String(_).toUpperCase()}
+                style={{
+                    width: 200,
+                }}
+            />,
+        ],
+    },
+];
+
+export const SelectDemo = () => <DemoHelper groups={groups} />;

package/test/ui-test/src/component/core/SliderDemo.tsx

@@ -0,0 +1,44 @@
+import React from "react";
+import {Slider} from "@pinnacle0/web-ui/core/Slider";
+import type {SafeReactChildren} from "@pinnacle0/web-ui/internal/type";
+import {withUncontrolledInitialValue} from "../../util/withUncontrolledInitialValue";
+import type {DemoHelperGroupConfig} from "../DemoHelper";
+import {DemoHelper} from "../DemoHelper";
+
+const UncontrolledSlider = withUncontrolledInitialValue(Slider);
+
+const UncontrolledRangeSlider = withUncontrolledInitialValue(Slider.Range);
+
+// <Slider> will fill parent's width if unspecified
+const HasWidth = ({children, width = 200}: {children: SafeReactChildren; width?: number}) => <div style={{width}}>{children}</div>;
+
+const groups: DemoHelperGroupConfig[] = [
+    {
+        title: "Slider Demo",
+        showPropsHint: true,
+        components: [
+            <HasWidth>
+                <UncontrolledSlider initialValue={0} />
+            </HasWidth>,
+            <UncontrolledSlider initialValue={3} min={2} max={9} style={{width: 300}} />,
+            <UncontrolledSlider initialValue={3} min={-5} max={9} style={{width: 300}} />,
+            "-",
+            <UncontrolledSlider initialValue={3} min={-5} max={9} style={{width: 300}} marks={{3: "Initial", [-5]: "min", 9: "max"}} />,
+            "-",
+            <UncontrolledSlider initialValue={3} min={-5} max={9} style={{width: 300}} marks={{3: "Initial", [-5]: "min(-5)", 9: "max(9)"}} showButton />,
+            "-",
+            <UncontrolledSlider initialValue={3} min={-5} max={9} style={{width: 500}} showButton />,
+        ],
+    },
+    {
+        title: "Slider.Range Demo",
+        showPropsHint: false,
+        components: [
+            <HasWidth>
+                <UncontrolledRangeSlider initialValue={[5, 50]} />
+            </HasWidth>,
+        ],
+    },
+];
+
+export const SliderDemo = () => <DemoHelper groups={groups} />;

package/test/ui-test/src/component/core/StepContainerDemo.tsx

@@ -0,0 +1,53 @@
+import React from "react";
+import type {StepItem} from "@pinnacle0/web-ui/core/StepFormContainer";
+import {StepFormContainer} from "@pinnacle0/web-ui/core/StepFormContainer";
+import {Form} from "@pinnacle0/web-ui/core/Form";
+import {Input} from "@pinnacle0/web-ui/core/Input";
+import type {DemoHelperGroupConfig} from "../DemoHelper";
+import {DemoHelper} from "../DemoHelper";
+
+const FormItem = () => {
+    const [value, setValue] = React.useState("");
+    const validator = () => (value.length >= 2 ? new Promise<null>(resolve => setTimeout(() => resolve(null), 300)) : "Length at least 2");
+    return (
+        <Form.Item label="Name" extra="Length at least 2" validator={validator}>
+            <Input value={value} onChange={setValue} />
+        </Form.Item>
+    );
+};
+
+const steps: StepItem[] = [
+    {title: "one", content: <FormItem />},
+    {title: "too", content: <FormItem />},
+    {title: "free", content: <FormItem />},
+];
+
+const containerStyle: React.CSSProperties = {width: 800};
+
+export const StepContainerDemo = () => {
+    const [currentStep, setCurrentStep] = React.useState(1);
+
+    const group: DemoHelperGroupConfig[] = [
+        {
+            title: "Step Container",
+            showPropsHint: false,
+            components: [<StepFormContainer currentStep={currentStep} steps={steps} onStepChange={setCurrentStep} onFinish={() => alert("Done")} style={containerStyle} />],
+        },
+        {
+            title: "Step Container (Vertical Label)",
+            showPropsHint: false,
+            components: [
+                <StepFormContainer
+                    stepLabelPlacement="vertical"
+                    currentStep={currentStep}
+                    steps={steps}
+                    onStepChange={setCurrentStep}
+                    onFinish={() => alert("All steps finished")}
+                    style={containerStyle}
+                />,
+            ],
+        },
+    ];
+
+    return <DemoHelper groups={group} />;
+};

package/test/ui-test/src/component/core/TableDemo.tsx

@@ -0,0 +1,81 @@
+import {Button} from "@pinnacle0/web-ui/core/Button";
+import type {TableColumns} from "@pinnacle0/web-ui/core/Table";
+import {Table} from "@pinnacle0/web-ui/core/Table";
+import React from "react";
+import type {DemoHelperGroupConfig} from "../DemoHelper";
+import {DemoHelper} from "../DemoHelper";
+
+interface Profile {
+    key: React.Key;
+    name: string;
+    age: number;
+    address: string;
+}
+
+const data: Profile[] = [
+    {
+        key: "1",
+        name: "John Brown",
+        age: 32,
+        address: "New York No. 1 Lake Park",
+    },
+    {
+        key: "2",
+        name: "Jim Green",
+        age: 42,
+        address: "London No. 1 Lake Park",
+    },
+    {
+        key: "3",
+        name: "Joe Black",
+        age: 32,
+        address: "Sidney No. 1 Lake Park",
+    },
+    {
+        key: "4",
+        name: "Disabled User",
+        age: 99,
+        address: "Sidney No. 1 Lake Park",
+    },
+];
+
+const TableWithActionButton = ({hasData = false}: {hasData?: boolean}) => {
+    const columns: TableColumns<Profile> = [
+        {
+            title: "Name",
+            renderData: _ => _.name,
+            onCell: _ => ({
+                colSpan: _.key === "4" ? 2 : 1,
+            }),
+        },
+        {
+            title: "Address",
+            renderData: _ => _.address,
+        },
+        {
+            title: "age",
+            renderData: _ => _.age,
+        },
+        {
+            title: "action",
+            renderData: () => <Button>Click Me</Button>,
+        },
+    ];
+
+    return <Table rowKey="index" dataSource={hasData ? data : []} columns={columns} />;
+};
+
+const groups: DemoHelperGroupConfig[] = [
+    {
+        title: "Table with Action button",
+        showPropsHint: false,
+        components: [<TableWithActionButton hasData />],
+    },
+    {
+        title: "Table without Data",
+        showPropsHint: false,
+        components: [<TableWithActionButton />],
+    },
+];
+
+export const TableDemo = () => <DemoHelper groups={groups} />;

package/test/ui-test/src/component/core/TabsDemo.tsx

@@ -0,0 +1,136 @@
+import React from "react";
+import type {TypedTabMap, TypedTabList} from "@pinnacle0/web-ui/core/TypedTabs";
+import {TypedTabs} from "@pinnacle0/web-ui/core/TypedTabs";
+import type {DemoHelperGroupConfig} from "../DemoHelper";
+import {DemoHelper} from "../DemoHelper";
+
+type TabKey = "FB" | "AMZN" | "AAPL" | "NFLX" | "GOOGL" | "MSFT";
+
+const maxVisibleTabCount = 3.5;
+
+const demoTabPaneStyle: React.CSSProperties = {
+    textAlign: "center",
+    height: "100%",
+    display: "flex",
+    justifyContent: "center",
+    alignItems: "center",
+    color: "yellow",
+    fontWeight: "bold",
+    fontSize: 30,
+    background: "orange",
+};
+
+const tabs: TypedTabMap<TabKey> = {
+    FB: {
+        title: "FB",
+        content: <div style={demoTabPaneStyle}>Facebook, Inc.</div>,
+    },
+    AMZN: {
+        title: "AMZN",
+        content: <div style={demoTabPaneStyle}>Amazon, Inc.</div>,
+    },
+    AAPL: {
+        title: "AAPL",
+        content: <div style={demoTabPaneStyle}>Apple, Inc.</div>,
+    },
+    NFLX: {
+        title: "NFLX",
+        content: <div style={demoTabPaneStyle}>Netflix, Inc.</div>,
+    },
+    GOOGL: {
+        title: "GOOGL",
+        content: <div style={demoTabPaneStyle}>Alphabet Inc.</div>,
+    },
+    MSFT: {
+        title: "MSFT",
+        content: <div style={demoTabPaneStyle}>Microsoft Corporation</div>,
+    },
+};
+
+const Card = () => {
+    const [activeKey, setCurrentKey] = React.useState<TabKey>("FB");
+    return <TypedTabs activeKey={activeKey} onChange={setCurrentKey} tabs={tabs} />;
+};
+
+const Line = () => {
+    const [activeKey, setCurrentKey] = React.useState<TabKey>("FB");
+    return <TypedTabs type="line" activeKey={activeKey} onChange={setCurrentKey} tabs={tabs} />;
+};
+
+const LineWithMaxVisible = () => {
+    const [activeKey, setCurrentKey] = React.useState<TabKey>("FB");
+    return (
+        <div style={{width: 550, height: 300, backgroundColor: "#cc6", padding: 12}}>
+            <TypedTabs
+                style={{backgroundColor: "#ffffff"}}
+                tabBarStyle={{backgroundColor: "#efefe2"}}
+                initialMaxVisibleTabCount={maxVisibleTabCount}
+                type="line"
+                activeKey={activeKey}
+                onChange={setCurrentKey}
+                tabs={tabs}
+            />
+        </div>
+    );
+};
+
+const CardWithMaxVisible = () => {
+    const [activeKey, setCurrentKey] = React.useState<TabKey>("FB");
+
+    return (
+        <div style={{width: 380}}>
+            <TypedTabs initialMaxVisibleTabCount={maxVisibleTabCount} type="card" activeKey={activeKey} onChange={setCurrentKey} tabs={tabs} />
+        </div>
+    );
+};
+
+const WithExtra = () => {
+    const [activeKey, setCurrentKey] = React.useState<TabKey>("FB");
+    return (
+        <TypedTabs
+            type="line"
+            activeKey={activeKey}
+            onChange={setCurrentKey}
+            tabs={tabs}
+            tabBarPrefix={<div style={{width: 40, height: 40, background: "blue"}}>Left</div>}
+            tabBarSuffix={<div style={{width: 40, height: 40, background: "red"}}>Right</div>}
+        />
+    );
+};
+
+const ArrayMode = () => {
+    const [activeKey, setCurrentKey] = React.useState<TabKey>("FB");
+    const tabsInArray: TypedTabList<TabKey> = [
+        {
+            key: "FB",
+            title: "FB",
+            content: <div>FB content 1</div>,
+        },
+        {
+            key: "AMZN",
+            title: "AMZN",
+            content: <div>AMZN content 2</div>,
+        },
+    ];
+    return <TypedTabs activeKey={activeKey} onChange={setCurrentKey} tabs={tabsInArray} />;
+};
+
+const groups: DemoHelperGroupConfig[] = [
+    {
+        title: "Simple Tabs",
+        showPropsHint: false,
+        components: [<Card />, "-", <Line />, "-", <ArrayMode />],
+    },
+    {
+        title: "With Extra",
+        showPropsHint: false,
+        components: [<WithExtra />],
+    },
+    {
+        title: `With Max Visible (${maxVisibleTabCount})`,
+        showPropsHint: false,
+        components: [<LineWithMaxVisible />, "-", <CardWithMaxVisible />],
+    },
+];
+
+export const TabsDemo = () => <DemoHelper groups={groups} />;

package/test/ui-test/src/component/core/UploaderImporterDemo.tsx

@@ -0,0 +1,52 @@
+import React from "react";
+import {ImageUploader} from "@pinnacle0/web-ui/core/ImageUploader";
+import {LocalImporter} from "@pinnacle0/web-ui/core/LocalImporter";
+import {dummyUploadImageUploadURL, dummyUploadImageFormField, dummyUploadCallback, dummyImportCallback} from "../../dummy/dummyUpload";
+import type {TestImageUploadResponse, APIErrorResponse} from "../../type";
+import type {DemoHelperGroupConfig} from "../DemoHelper";
+import {DemoHelper} from "../DemoHelper";
+
+const ImageUploaderDemo = ({removable, width, height}: {removable: boolean; width: number; height: number}) => {
+    const [value, setValue] = React.useState<string | null>(null);
+    return (
+        <div>
+            <ImageUploader<TestImageUploadResponse, APIErrorResponse>
+                width={width}
+                height={height}
+                formField={dummyUploadImageFormField}
+                imageURL={value}
+                onChange={response => setValue(response.imageURL)}
+                onRemove={removable ? () => setValue(null) : undefined}
+                uploadURL={dummyUploadImageUploadURL}
+                onUploadFailure={dummyUploadCallback}
+                onUploadSuccess={dummyUploadCallback}
+            />
+            <br />
+            <p>
+                Size: {width} x {height}
+            </p>
+        </div>
+    );
+};
+
+const LocalImporterDemo = () => <LocalImporter type="txt" style={{width: 500, height: 120}} onImport={dummyImportCallback} />;
+
+const groups: DemoHelperGroupConfig[] = [
+    {
+        title: "Removable Image Uploader",
+        showPropsHint: false,
+        components: [<ImageUploaderDemo removable width={500} height={300} />],
+    },
+    {
+        title: "Un-removable Image Uploader",
+        showPropsHint: false,
+        components: [<ImageUploaderDemo removable={false} width={150} height={100} />],
+    },
+    {
+        title: "Importer (no AJAX call)",
+        showPropsHint: false,
+        components: [<LocalImporterDemo />],
+    },
+];
+
+export const UploaderImporterDemo = () => <DemoHelper groups={groups} />;