@ilo-org/react 0.0.18 → 0.1.1

package/lib/esm/components/Tag/Tag.js

@@ -0,0 +1,52 @@
+import { __rest } from 'tslib';
+import { jsx, Fragment, jsxs } from 'react/jsx-runtime';
+import { useContext } from 'react';
+import classNames from 'classnames';
+import useGlobalSettings from '../../hooks/useGlobalSettings.js';
+import Icon from '../Icon/Icon.js';
+import { getUpdatedItems } from '@ilo-org/utils';
+import { T as TagSetContext } from '../../TagCtx-34c545fe.js';
+import '../../GlobalCtx-7fb23cfa.js';
+import '@ilo-org/icons-react';
+
+const Tag = (_a) => {
+    var { className, children, id, url, type, callback } = _a, rest = __rest(_a, ["className", "children", "id", "url", "type", "callback"]);
+    const { prefix } = useGlobalSettings();
+    const { activeItems, setActiveItems, allowMultipleActive } = useContext(TagSetContext);
+    const active = activeItems.indexOf(id) > -1;
+    const baseClass = `${prefix}--tag`;
+    const itemClass = `${prefix}--tag-set__item`;
+    const stringType = type;
+    const tagClasses = classNames(className, {
+        [baseClass]: true,
+        [`${baseClass}--active`]: active,
+        [`${baseClass}--${type}`]: type,
+        [`icon icon__position--right`]: true,
+    });
+    let visible = active;
+    /**
+     * On click, get id of clicked item, and set that item in state to 'active', all others to 'closed'
+     */
+    const handleClick = (e) => {
+        setActiveItems(getUpdatedItems({
+            id,
+            itemStatuses: activeItems,
+            allowMultipleExpanded: allowMultipleActive,
+        }));
+        visible = false;
+        if (callback) {
+            callback(e);
+        }
+    };
+    // @ts-ignore
+    const renderButton = () => {
+        let button;
+        if (visible) {
+            button = (jsx("li", Object.assign({ className: itemClass }, { children: jsxs("button", Object.assign({ type: "button", className: tagClasses, onClick: (e) => handleClick(e), id: id }, rest, { children: [children, jsx(Icon, { name: "close", hidden: true })] })) })));
+        }
+        return button;
+    };
+    return (jsx(Fragment, { children: stringType === "button" ? (jsx(Fragment, { children: renderButton() })) : (jsxs("li", Object.assign({ className: itemClass }, { children: [type === "anchor" && (jsx("a", Object.assign({ className: tagClasses, href: active ? url : "", id: id }, rest, { children: children }))), type === "display" && (jsx("span", Object.assign({ className: tagClasses, id: id }, rest, { children: children })))] }))) }));
+};
+
+export { Tag as default };

package/lib/esm/components/Tag/TagSet.js

@@ -0,0 +1,44 @@
+import { __rest } from 'tslib';
+import { jsx } from 'react/jsx-runtime';
+import classNames from 'classnames';
+import { useState, useEffect, Children } from 'react';
+import useGlobalSettings from '../../hooks/useGlobalSettings.js';
+import { checkArrayDuplicates } from '../../utils/checkArrayDuplicates.js';
+import { T as TagSetContext } from '../../TagCtx-34c545fe.js';
+import '../../GlobalCtx-7fb23cfa.js';
+
+const TagSet = (_a) => {
+    var { className, children, onButtonClick, defaultTagActive = [], allowMultipleActive = true } = _a, rest = __rest(_a, ["className", "children", "onButtonClick", "defaultTagActive", "allowMultipleActive"]);
+    const { prefix } = useGlobalSettings();
+    const baseClass = `${prefix}--tag-set`;
+    const [activeItems, setActiveItems] = useState([]);
+    const defaultTagActiveString = JSON.stringify(defaultTagActive);
+    useEffect(() => {
+        const tagOnLoad = allowMultipleActive
+            ? defaultTagActive
+            : defaultTagActive.length > 0
+                ? [defaultTagActive[0]]
+                : defaultTagActive;
+        setActiveItems(tagOnLoad);
+    }, [defaultTagActiveString, allowMultipleActive]); //eslint-disable-line react-hooks/exhaustive-deps
+    if (children) {
+        const ids = [];
+        Children.forEach(children, (child) => {
+            ids.push(child.props.id);
+        });
+        if (checkArrayDuplicates(ids)) {
+            console.warn("Warning: Tags must have unique ids.");
+        }
+    }
+    const tagClasses = classNames(className, {
+        [baseClass]: true,
+    });
+    return (jsx(TagSetContext.Provider, Object.assign({ value: {
+            activeItems,
+            setActiveItems,
+            allowMultipleActive,
+            onButtonClick,
+        } }, { children: jsx("ul", Object.assign({ className: tagClasses }, rest, { children: children })) })));
+};
+
+export { TagSet as default };

package/lib/esm/components/Tag/index.js

@@ -0,0 +1,13 @@
+export { default as Tag } from './Tag.js';
+export { default as TagSet } from './TagSet.js';
+import 'tslib';
+import 'react/jsx-runtime';
+import 'react';
+import 'classnames';
+import '../../hooks/useGlobalSettings.js';
+import '../../GlobalCtx-7fb23cfa.js';
+import '../Icon/Icon.js';
+import '@ilo-org/icons-react';
+import '@ilo-org/utils';
+import '../../TagCtx-34c545fe.js';
+import '../../utils/checkArrayDuplicates.js';

package/lib/esm/components/Textarea/Textarea.js

@@ -0,0 +1,30 @@
+import { jsx } from 'react/jsx-runtime';
+import classNames from 'classnames';
+import useGlobalSettings from '../../hooks/useGlobalSettings.js';
+import Fieldset from '../Fieldset/Fieldset.js';
+import FormElement from '../FormElement/FormElement.js';
+import 'tslib';
+import 'react';
+import '../../GlobalCtx-7fb23cfa.js';
+import '../Tooltip/Tooltip.js';
+import 'react-dom';
+
+const Textarea = ({ callback, disabled = false, error, helper, id, label, maxlength, minlength, name, placeholder, required, spellcheck, tooltip, }) => {
+    const { prefix } = useGlobalSettings();
+    const baseClass = `${prefix}--textarea`;
+    const TextareaClasses = classNames("", {
+        [baseClass]: true,
+        [`error`]: error,
+    });
+    /**
+     * On change, if there is a callback, call it
+     */
+    const handleChange = (e) => {
+        if (callback) {
+            callback(e);
+        }
+    };
+    return (jsx(Fieldset, { children: jsx(FormElement, Object.assign({ elemid: name, label: label, helper: helper, error: error, required: required, tooltip: tooltip }, { children: jsx("textarea", { id: id, name: name, onChange: handleChange, disabled: disabled, placeholder: placeholder, required: required, className: TextareaClasses, maxLength: maxlength, minLength: minlength, spellCheck: spellcheck }) })) }));
+};
+
+export { Textarea as default };

package/lib/esm/components/Textarea/index.js

@@ -0,0 +1,11 @@
+export { default as Textarea } from './Textarea.js';
+import 'react/jsx-runtime';
+import 'classnames';
+import '../../hooks/useGlobalSettings.js';
+import 'tslib';
+import 'react';
+import '../../GlobalCtx-7fb23cfa.js';
+import '../Fieldset/Fieldset.js';
+import '../Tooltip/Tooltip.js';
+import 'react-dom';
+import '../FormElement/FormElement.js';

package/lib/esm/components/Tooltip/Tooltip.js

@@ -0,0 +1,101 @@
+import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
+import { useState, useRef } from 'react';
+import classNames from 'classnames';
+import useGlobalSettings from '../../hooks/useGlobalSettings.js';
+import ReactDOM from 'react-dom';
+import 'tslib';
+import '../../GlobalCtx-7fb23cfa.js';
+
+const Tooltip = ({ className, children, icon, label, theme, }) => {
+    const { prefix } = useGlobalSettings();
+    const baseClass = `${prefix}--tooltip`;
+    const [isVisible, setIsVisible] = useState(false);
+    const [position, setPosition] = useState({
+        x: 0,
+        y: 0,
+    });
+    const [arrowPlacement, setArrowPlacement] = useState("center");
+    const [arrowAlignment, setArrowAlignment] = useState("left");
+    const tooltipRef = useRef(null);
+    const tooltipClasses = classNames(className, {
+        [baseClass]: true,
+        [`${baseClass}--${theme}`]: theme,
+        [`${baseClass}--alignment-${arrowAlignment}`]: arrowAlignment,
+        [`${baseClass}--visible`]: isVisible,
+    });
+    const tooltipArrowClasses = classNames(className, {
+        [`${baseClass}--arrow`]: true,
+        [`${baseClass}--arrow--placement-${arrowPlacement}`]: arrowPlacement,
+    });
+    const handleOnMouseOver = (e) => {
+        // get hovered element reference
+        const target = e.currentTarget;
+        if (target) {
+            const rect = target.getBoundingClientRect();
+            setIsVisible(true);
+            postMouseOver(rect);
+        }
+    };
+    const postMouseOver = (hoverRect) => {
+        // position the tooltip after showing it
+        let placement = "center";
+        let alignment = "left";
+        const ttNode = ReactDOM.findDOMNode(tooltipRef.current);
+        if (ttNode != null) {
+            let x = 0, y = 0;
+            const docWidth = document.documentElement.clientWidth, docHeight = document.documentElement.clientHeight;
+            const rx = hoverRect.x + hoverRect.width, // most right x
+            lx = hoverRect.x, // most left x
+            ty = hoverRect.y, // most top y
+            by = hoverRect.y + hoverRect.height; // most bottom y
+            // tool tip rectange
+            const ttRect = ttNode.getBoundingClientRect();
+            const bRight = rx + ttRect.width <= window.scrollX + docWidth &&
+                ty + ttRect.height <= window.scrollY + docHeight;
+            const bLeft = lx - ttRect.width >= 0 &&
+                ty + ttRect.height <= window.scrollY + docHeight;
+            const bAbove = ty - ttRect.height >= 0;
+            const bBellow = by + ttRect.height <= window.scrollY + docHeight;
+            // the tooltip doesn't fit to the left
+            if (bRight) {
+                x = hoverRect.width + 16;
+                y = icon ? -8 : 0;
+                placement = "negative";
+                alignment = "right";
+            }
+            else if (bBellow) {
+                x = icon ? -8 : 0;
+                y = hoverRect.height + 16;
+                placement = "center";
+                alignment = "bottom";
+            }
+            else if (bLeft) {
+                x = -ttRect.width - 16;
+                y = icon ? -8 : 0;
+                placement = "negative";
+                alignment = "left";
+            }
+            else if (bAbove) {
+                x = icon ? -8 : 0;
+                y = -ttRect.height - 16;
+                placement = "center";
+                alignment = "top";
+            }
+            setPosition({ x: x, y: y });
+            setArrowPlacement(placement);
+            setArrowAlignment(alignment);
+        }
+    };
+    const handleOnMouseOut = () => {
+        setIsVisible(false);
+    };
+    const style = {
+        // left: ((position.x + window.scrollX) + 'px'),
+        // top: ((position.y + window.scrollY) + 'px')
+        left: position.x + "px",
+        top: position.y + "px",
+    };
+    return (jsxs("div", Object.assign({ className: `${baseClass}--wrapper ${icon && "has-icon"}`, onMouseOver: handleOnMouseOver, onFocus: handleOnMouseOver, onMouseOut: handleOnMouseOut, onBlur: handleOnMouseOut }, { children: [!icon && jsx(Fragment, { children: children }), jsxs("span", Object.assign({ className: tooltipClasses, style: style, ref: tooltipRef }, { children: [jsx("span", { className: tooltipArrowClasses, role: "presentation" }), label] }))] })));
+};
+
+export { Tooltip as default };

package/lib/esm/components/Tooltip/index.js

@@ -0,0 +1,8 @@
+export { default as Tooltip } from './Tooltip.js';
+import 'react/jsx-runtime';
+import 'react';
+import 'classnames';
+import '../../hooks/useGlobalSettings.js';
+import 'tslib';
+import '../../GlobalCtx-7fb23cfa.js';
+import 'react-dom';

package/lib/esm/components/Video/Video.js

@@ -0,0 +1,27 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import classNames from 'classnames';
+import useGlobalSettings from '../../hooks/useGlobalSettings.js';
+import VideoPlayer from './VideoPlayer.js';
+import 'tslib';
+import 'react';
+import '../../GlobalCtx-7fb23cfa.js';
+import '../../_commonjsHelpers-849bcf65.js';
+import '../../patterns-3a3fa9d6.js';
+import '../../index-8ebb2cc1.js';
+import 'react-dom';
+import '../../utils/hoursMinutesSeconds.js';
+import 'screenfull';
+
+const Video = ({ className, caption, poster, video }) => {
+    const { prefix } = useGlobalSettings();
+    const baseClass = `${prefix}--video`;
+    const videoClasses = classNames(className, {
+        [baseClass]: true,
+    });
+    const captionClasses = classNames("", {
+        [`${baseClass}--caption`]: true,
+    });
+    return (jsxs("figure", Object.assign({ className: videoClasses }, { children: [jsx("div", Object.assign({ className: `${videoClasses}--wrapper` }, { children: video && jsx(VideoPlayer, Object.assign({}, video, { poster: poster })) })), caption && jsx("figcaption", Object.assign({ className: captionClasses }, { children: caption }))] })));
+};
+
+export { Video as default };