react-miui 0.9.4 → 0.11.0

package/src/components/icons/Icon.tsx

@@ -6,6 +6,9 @@ import { Back } from "./Back.js";
 import { Forward } from "./Forward.js";
 import { Search } from "./Search.js";
 import { Battery } from "./Battery.js";
+import { Heart } from "./Heart.js";
+import { Trash } from "./Trash.js";
+import { Config } from "./Config.js";
 
 enum ICON {
     checkmark = "checkmark",
@@ -13,6 +16,9 @@ enum ICON {
     forward = "forward",
     search = "search",
     battery = "battery",
+    heart = "heart",
+    trash = "trash",
+    config = "config",
 }
 
 interface Props {
@@ -26,6 +32,9 @@ const iconsMap = new Map<ICON, AnyComponent>([
     [ICON.forward, Forward],
     [ICON.search, Search],
     [ICON.battery, Battery],
+    [ICON.heart, Heart],
+    [ICON.trash, Trash],
+    [ICON.config, Config],
 ]);
 
 const Icon: React.FC<Props> = ({ name: iconName, ...props }) => {

package/src/components/icons/Search.tsx

@@ -7,9 +7,9 @@ interface Props {
 const Search: React.FC<Props> = (props) => {
     return (
         <svg
-            baseProfile={"basic"}
             width={"16"}
             height={"16"}
+            viewBox={"0 0 16 16"}
             xmlns={"http://www.w3.org/2000/svg"}
             className={props.className}
         >

package/src/components/icons/Trash.tsx

@@ -0,0 +1,21 @@
+import React from "react";
+
+interface Props {
+    className?: string;
+}
+
+const Trash: React.FC<Props> = (props) => {
+    return (
+        <svg
+            width={"16"}
+            height={"16"}
+            viewBox={"0 0 41 37"}
+            xmlns={"http://www.w3.org/2000/svg"}
+            className={props.className}
+        >
+            <path d={"M35.7 9.25h3.95q1.4-.4 1.35-1.6-.1-1.2-1.35-1.45H25.6V1.25Q25.6 0 24.4 0h-8.7q-1.1-.05-1.2 1.25V6.2H1.35Q-.1 6.6 0 7.75.1 9 1.35 9.25H5.4v26.5q.15 1.2 1.25 1.25H34.5q1.1-.1 1.2-1.25V9.25M22.6 6.2h-5.05V3.1h5.05v3.1M8.45 33.9V9.25H32.7V33.9H8.45"} />
+        </svg>
+    );
+};
+
+export { Trash };

package/src/components/ui/message/Message.module.scss

@@ -0,0 +1,31 @@
+.container {
+    border-top: 1px solid var(--border);
+    border-bottom: 1px solid var(--border);
+    padding: calc(47px / var(--ratio-dimensions)) calc(83px / var(--ratio-dimensions));
+    font-weight: 500;
+    line-height: 1.25;
+}
+
+.box {
+    border-left: 1px solid var(--border);
+    border-right: 1px solid var(--border);
+    margin: 12px;
+}
+
+.warning {
+    background-color: var(--yellow3);
+    border-color: var(--yellow1);
+    color: var(--yellow2);
+}
+
+.error {
+    background-color: var(--pinky3);
+    border-color: var(--pinky1);
+    color: var(--pinky2);
+}
+
+.info {
+    background-color: var(--blue3);
+    border-color: var(--blue2);
+    color: var(--blue1);
+}

package/src/components/ui/message/Message.tsx

@@ -0,0 +1,21 @@
+import React from "react";
+import classnames from "classnames";
+
+import styles from "./Message.module.scss";
+
+interface Props {
+    type: "warning" | "error" | "info" | "tip";
+    variant?: "box";
+}
+
+const Message: React.FC<Props> = (props) => {
+    const cls = classnames(styles.container, {
+        [styles.box]: props.variant === "box",
+        [styles.warning]: props.type === "warning",
+        [styles.error]: props.type === "error",
+        [styles.info]: props.type === "info",
+    });
+    return <div className={cls}>{props.children}</div>;
+};
+
+export { Message };

package/src/components/ui/pop/HandleEsc.tsx

@@ -0,0 +1,21 @@
+import type React from "react";
+import { useKeyPress } from "react-use";
+import { useEffect } from "react";
+
+interface Props {
+    onPress: () => void;
+}
+
+const HandleEsc: React.FC<Props> = (props) => {
+    const [pressed] = useKeyPress("Escape");
+
+    useEffect(() => {
+        if (pressed) {
+            props.onPress();
+        }
+    }, [pressed]);
+
+    return null;
+};
+
+export { HandleEsc };

package/src/components/ui/pop/OnButtonClick.tsx

@@ -0,0 +1,31 @@
+import React, { useEffect, useRef } from "react";
+
+interface Props {
+    onClick: () => void;
+}
+
+const OnButtonClick: React.FC<Props> = (props) => {
+    const theRef = useRef<HTMLDivElement>(null);
+
+    useEffect(() => {
+        const div = theRef.current;
+        if (!div) {
+            return;
+        }
+
+        const cb = (e: MouseEvent) => {
+            if ((e.target as HTMLDivElement).nodeName.toLowerCase() === "button") {
+                setTimeout(() => {
+                    props.onClick();
+                }, 0);
+            }
+        };
+
+        div.addEventListener("click", cb);
+        return () => { div.removeEventListener("click", cb); };
+    }, [theRef]);
+
+    return <div ref={theRef}>{props.children}</div>;
+};
+
+export { OnButtonClick };

package/src/components/ui/pop/Pop.module.scss

@@ -0,0 +1,58 @@
+.overlay {
+    position: fixed;
+    background: #0000004c;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    z-index: 4;
+}
+
+.pop {
+    z-index: 5;
+    position: absolute;
+    background: white;
+    margin: 0;
+    padding: 0;
+
+    ul, li {
+        margin: 0;
+        padding: 0;
+        list-style-type: none;
+    }
+
+    li + li {
+        border-top: 1px solid var(--border);
+    }
+
+    button {
+        border: none;
+        background: white;
+        height: calc(116px / var(--ratio-dimensions));
+        padding: 0 calc(42px / var(--ratio-dimensions));
+        box-sizing: border-box;
+        width: 100%;
+        min-width: calc(460px / var(--ratio-dimensions));
+        text-align: left;
+        color: var(--pop-text);
+        font-size: calc(26px / var(--ratio-font));
+        display: flex;
+        align-items: center;
+
+        svg {
+            fill: currentColor;
+            margin-right: calc(42px / var(--ratio-dimensions));
+        }
+
+        &:hover {
+            background: var(--active-bg);
+        }
+    }
+}
+
+.fakeIcon {
+    display: inline-block;
+    width: 16px;
+    height: 16px;
+    margin-right: calc(42px / var(--ratio-dimensions));
+}

package/src/components/ui/pop/Pop.tsx

@@ -0,0 +1,153 @@
+import React, { Component, createRef } from "react";
+
+import { HandleEsc } from "./HandleEsc";
+import { OnButtonClick } from "./OnButtonClick";
+import { PopOption } from "./PopOption";
+import styles from "./Pop.module.scss";
+
+interface Props {
+    open: boolean;
+    onClose: () => void;
+    anchor?: HTMLElement | "prev" | "next";
+}
+
+interface State {
+    x: number;
+    y: number;
+    vertical: "top" | "bottom";
+    horizontal: "left" | "right";
+}
+
+const html = typeof document === "object" ? document.getElementsByTagName("html")[0] : null;
+
+const getElementDimensions = (elem: HTMLElement) => {
+    return {
+        width: elem.clientWidth,
+        height: elem.clientHeight,
+    };
+};
+
+const getElementLocation = (element: HTMLElement, outerElement = html): [State["vertical"], State["horizontal"]] => {
+    const outer = getElementDimensions(outerElement!);
+    const rect = element.getBoundingClientRect();
+
+    const distanceToBottom = outer.height - rect.bottom;
+    const distanceToTop = rect.top;
+
+    const verticalLocation = distanceToTop > distanceToBottom ? "bottom" : "top";
+
+    const distanceToLeft = rect.left;
+    const distanceToRight = outer.width - rect.right;
+
+    const horizontalLocation = distanceToLeft > distanceToRight ? "right" : "left";
+
+    return [verticalLocation, horizontalLocation];
+};
+
+class Pop extends Component<Props, State> {
+    public constructor(props: Props) {
+        super(props);
+
+        this.state = {
+            x: 0,
+            y: 0,
+            vertical: "top",
+            horizontal: "left",
+        };
+        this.rootRef = createRef();
+    }
+
+    public componentDidUpdate(prevProps: Props) {
+        if (!prevProps.open && this.props.open) {
+            this.onOpen();
+        }
+    }
+
+    public static Option: typeof PopOption = PopOption;
+
+    private readonly rootRef: React.RefObject<HTMLDivElement>;
+
+    private getAnchorElement() {
+        if (this.props.anchor instanceof HTMLElement) {
+            return this.props.anchor;
+        }
+        if (!this.rootRef.current) {
+            return null;
+        }
+
+        if (this.props.anchor === "prev") {
+            return this.rootRef.current.previousElementSibling;
+        }
+        if (this.props.anchor === "next") {
+            return this.rootRef.current.nextElementSibling;
+        }
+    }
+
+    private readonly onOpen = () => {
+        const anchorElement = this.getAnchorElement();
+        if (!anchorElement) {
+            console.warn("PopOptions can not find anchor element");
+            return;
+        }
+        // @todo use get derived state
+
+        const [vertical, horizontal] = getElementLocation(anchorElement as HTMLElement);
+        const dimensions = getElementDimensions(html!);
+        const rect = anchorElement.getBoundingClientRect();
+
+        const x = horizontal === "left" ? rect.left : dimensions.width - rect.right;
+        const y = vertical === "top" ? rect.bottom : dimensions.height - rect.top;
+
+        this.setState({
+            vertical,
+            horizontal,
+            x,
+            y,
+        });
+    };
+
+    private readonly handleOverlayClick = (e: React.MouseEvent) => {
+        if (e.target === e.currentTarget) {
+            this.props.onClose();
+        }
+    };
+
+    private readonly handleEsc = () => {
+        this.props.onClose();
+    };
+
+    public render() {
+        const style: React.CSSProperties = {};
+
+        if (this.state.vertical === "top") {
+            style.top = this.state.y;
+        }
+        else {
+            style.bottom = this.state.y;
+        }
+
+        if (this.state.horizontal === "left") {
+            style.left = this.state.x;
+        }
+        else {
+            style.right = this.state.x;
+        }
+
+        if (!this.props.open) {
+            return null;
+        }
+
+        return (
+            <div className={styles.overlay} ref={this.rootRef} onClick={this.handleOverlayClick}>
+                <HandleEsc onPress={this.handleEsc} />
+                <OnButtonClick onClick={this.handleEsc}>
+                    <ul className={styles.pop} style={style}>
+                        {this.props.children}
+                    </ul>
+                </OnButtonClick>
+            </div>
+        );
+    }
+}
+
+export { Pop };

package/src/components/ui/pop/PopOption.tsx

@@ -0,0 +1,24 @@
+import React from "react";
+
+import type { ICON } from "../../icons/Icon";
+import { Icon } from "../../icons/Icon";
+
+import styles from "./Pop.module.scss";
+
+interface Props {
+    icon?: ICON;
+    forceEmptyIcon?: boolean;
+    onClick: () => void;
+}
+
+const PopOption: React.FC<Props> = (props) => {
+    const ic = props.icon
+        ? <Icon name={props.icon} />
+        : ((props.forceEmptyIcon ?? true) ? <span className={styles.fakeIcon} /> : null);
+
+    return (
+        <li><button onClick={props.onClick}>{ic}{props.children}</button></li>
+    );
+};
+
+export { PopOption };

package/src/demo/components/ui/message/Message.tsx

@@ -0,0 +1,27 @@
+import React from "react";
+
+import { Message } from "../../../../components/ui/message/Message";
+
+interface Props {}
+
+const MessageDemo: React.FC<Props> = () => {
+    return (
+        <>
+            <Message type={"warning"}>Files will be removed after 30 days.</Message>
+            <br /><br />
+            <Message type={"error"}>Files will be removed after 30 days.</Message>
+            <br /><br />
+            <Message type={"info"}>
+                Files will be removed after 30 days. Files will be removed after 30 days.
+            </Message>
+            <br /><br />
+            <Message type={"warning"} variant={"box"}>Files will be removed after 30 days.</Message>
+            <Message type={"error"} variant={"box"}>Files will be removed after 30 days.</Message>
+            <Message type={"info"} variant={"box"}>
+                Files will be removed after 30 days. Files will be removed after 30 days.
+            </Message>
+        </>
+    );
+};
+
+export { MessageDemo };

package/src/demo/components/ui/pop/Pop.tsx

@@ -0,0 +1,80 @@
+import React, { useCallback, useState } from "react";
+import { Pop } from "../../../../components/ui/pop/Pop";
+import { Header } from "../../../../components/layout/header/Header";
+import { StickyHeader } from "../../../../components/layout/header/StickyHeader";
+import { HeaderIconAction } from "../../../../components/layout/header/HeaderIconAction";
+import { ICON } from "../../../../components/icons/Icon";
+import { PopOption } from "../../../../components/ui/pop/PopOption";
+import { Section } from "../../../../components/layout/section/Section";
+
+interface Props {}
+
+const handleClick = () => {
+    console.info("Clicked an option");
+};
+
+// eslint-disable-next-line max-lines-per-function
+const PopDemo: React.FC<Props> = () => {
+    // eslint-disable-next-line @typescript-eslint/no-shadow
+    const [open, setOpen] = useState(false);
+    const [leftOpen, setLeftOpen] = useState(false);
+
+    const handleToggle = useCallback(() => {
+        setOpen(p => !p);
+    }, []);
+
+    const handleLeftToggle = useCallback(() => {
+        setLeftOpen(p => !p);
+    }, []);
+
+    const handleClose = useCallback(() => {
+        setOpen(false);
+    }, []);
+
+    const handleLeftClose = useCallback(() => {
+        setLeftOpen(false);
+    }, []);
+
+    const after = (
+        <>
+            <HeaderIconAction icon={ICON.config} onClick={handleToggle} />
+            <Pop anchor={"prev"} open={open} onClose={handleClose}>
+                <PopOption icon={ICON.heart} onClick={handleClick}>Add new list</PopOption>
+                <PopOption icon={ICON.trash} onClick={handleClick}>Remove empty lists</PopOption>
+                <PopOption onClick={handleClick}>Configure</PopOption>
+            </Pop>
+        </>
+    );
+
+    const left = (
+        <>
+            <HeaderIconAction icon={ICON.checkmark} onClick={handleLeftToggle} />
+            <Pop anchor={"prev"} open={leftOpen} onClose={handleLeftClose}>
+                <PopOption icon={ICON.heart} onClick={handleClick}>Add new list</PopOption>
+                <PopOption icon={ICON.trash} onClick={handleClick}>Remove empty lists</PopOption>
+                <PopOption onClick={handleClick}>Configure</PopOption>
+                <PopOption icon={ICON.heart} onClick={handleClick}>Add new list</PopOption>
+                <PopOption icon={ICON.trash} onClick={handleClick}>Remove empty lists</PopOption>
+                <PopOption onClick={handleClick}>Configure</PopOption>
+                <PopOption icon={ICON.heart} onClick={handleClick}>Add new list</PopOption>
+                <PopOption icon={ICON.trash} onClick={handleClick}>Remove empty lists</PopOption>
+                <PopOption onClick={handleClick}>Configure</PopOption>
+            </Pop>
+        </>
+    );
+
+    return (
+        <StickyHeader>
+            <Header before={left} after={after}>
+                Some place
+            </Header>
+            <StickyHeader.Content>
+                <Section variant={["vertical", "horizontal"]}>
+                    Click on the left or right icon to open the menu
+                </Section>
+            </StickyHeader.Content>
+        </StickyHeader>
+    );
+};
+
+export { PopDemo };

package/src/demo/componentsMap.ts

@@ -40,6 +40,8 @@ import { ListInsetDemo } from "./components/layout/list/Inset";
 import { ListSelectionDemo } from "./components/layout/list/Selection";
 import { TabsDemo } from "./components/ui/tabs/Tabs";
 import { ChoiceDemo } from "./components/form/Choice";
+import { MessageDemo } from "./components/ui/message/Message";
+import { PopDemo } from "./components/ui/pop/Pop";
 
 interface TheMap {
     // eslint-disable-next-line @typescript-eslint/no-use-before-define
@@ -213,6 +215,10 @@ const componentsMap: TheMap = {
         name: "Toaster",
         Component: ToasterDemo,
     },
+    Message: {
+        name: "Message",
+        Component: MessageDemo,
+    },
     Modal: {
         name: "Modal",
         Component: ModalDemo,
@@ -227,6 +233,10 @@ const componentsMap: TheMap = {
             },
         },
     },
+    Pop: {
+        name: "Pop up menu",
+        Component: PopDemo,
+    },
 };
 
 export {

package/src/global.scss

@@ -27,6 +27,8 @@
     --text: #323232;
     --sub: #959595;
 
+    --pop-text: #666;
+
     --toolbar-border: #ababab;
     --toolbar-bg: #f8f8f8;
     --modal-bg: #f7f7f7;
@@ -47,6 +49,8 @@
 
     // Shades: https://maketintsandshades.com/#038bf4,ff7200,7357e8,3ec234,3ec234,ff388f,ea2700
     --blue1: #038bf4;
+    --blue2: #b7d6f5;
+    --blue3: #dbe6ff;
     --orange1: #ff7200;
     --orange1-darker: #cc5b00;
     --purple1: #7357e8;
@@ -54,6 +58,12 @@
     --green1-darker: #38af2f;
     --pink1: #ff388f;
     --red1: #ea2700;
+    --yellow1: #ffde9d;
+    --yellow2: #e4a429;
+    --yellow3: #fff5db;
+    --pinky1: #f5c0b7;
+    --pinky2: #e07b67;
+    --pinky3: #ffe1db;
 
     --grey1: #737373;
 

package/src/index.ts

@@ -20,7 +20,9 @@ export * from "./components/ui/action/Action.js";
 export * from "./components/ui/action/EqualActions.js";
 export * from "./components/ui/button/Button.js";
 export * from "./components/ui/directionPad/Pad.js";
+export * from "./components/ui/message/Message.js";
 export * from "./components/ui/modal/Modal.js";
 export * from "./components/ui/modal/ModalButtons.js";
+export * from "./components/ui/pop/Pop.js";
 export * from "./components/ui/tabs/Selector.js";
 export * from "./components/ui/toaster/Toaster.js";

package/src/utils/useKeyPress.ts

@@ -0,0 +1,32 @@
+import { useEffect, useState } from "react";
+
+const useKeyPress = (targetKey: string) => {
+    const [keyPressed, setKeyPressed] = useState(false);
+
+    useEffect(() => {
+        const handleKeyDown = ({ key }: KeyboardEvent): void => {
+            if (key === targetKey) {
+                setKeyPressed(true);
+            }
+        };
+
+        const handleKeyUp = ({ key }: KeyboardEvent): void => {
+            if (key === targetKey) {
+                setKeyPressed(false);
+            }
+        };
+
+        window.addEventListener("keydown", handleKeyDown);
+        window.addEventListener("keyup", handleKeyUp);
+        return () => {
+            window.removeEventListener("keydown", handleKeyDown);
+            window.removeEventListener("keyup", handleKeyUp);
+        };
+    }, [targetKey]);
+
+    return keyPressed;
+};
+
+export {
+    useKeyPress,
+};

package/ATTRIBUTION.md

@@ -1,10 +0,0 @@
-Icons made by
-- [Freepik][1]
-
-from [www.flaticon.com][999].
-
-Icons used:
-- https://www.flaticon.com/free-icon/check-mark_64484
-
-[1]: https://www.freepik.com
-[999]: https://www.flaticon.com/