@quadrats/react 1.1.8 → 1.1.10

package/toolbar/components/toolbarIconName.js

@@ -0,0 +1,86 @@
+function getIconNameInGroup(iconOriginName, locale) {
+    switch (iconOriginName) {
+        case 'accordion':
+            return locale.editor.toolbar.accordion;
+        case 'align-center':
+            return locale.editor.toolbar.alignCenter;
+        case 'align-left':
+            return locale.editor.toolbar.alignLeft;
+        case 'align-right':
+            return locale.editor.toolbar.alignRight;
+        case 'blockquote':
+            return locale.editor.toolbar.quote;
+        case 'bold':
+            return locale.editor.toolbar.bold;
+        case 'card':
+            return locale.editor.toolbar.card;
+        case 'carousel':
+            return locale.editor.toolbar.carousel;
+        case 'dance':
+            return locale.editor.toolbar.dance;
+        case 'divider':
+            return locale.editor.toolbar.divider;
+        case 'drama':
+            return locale.editor.toolbar.drama;
+        case 'erase':
+            return locale.editor.toolbar.erase;
+        case 'facebook':
+            return locale.editor.toolbar.facebook;
+        case 'fn':
+            return locale.editor.toolbar.footnote;
+        case 'heading1':
+            return locale.editor.toolbar.heading1;
+        case 'heading2':
+            return locale.editor.toolbar.heading2;
+        case 'heading3':
+            return locale.editor.toolbar.heading3;
+        case 'heading4':
+            return locale.editor.toolbar.heading4;
+        case 'heading5':
+            return locale.editor.toolbar.heading5;
+        case 'heading6':
+            return locale.editor.toolbar.heading6;
+        case 'highlight':
+            return locale.editor.toolbar.highlight;
+        case 'image':
+            return locale.editor.toolbar.image;
+        case 'instagram':
+            return locale.editor.toolbar.instagram;
+        case 'italic':
+            return locale.editor.toolbar.italic;
+        case 'link':
+            return locale.editor.toolbar.link;
+        case 'ordered list':
+            return locale.editor.toolbar.orderedList;
+        case 'paragraph':
+            return locale.editor.toolbar.paragraph;
+        case 'podcast-apple':
+            return locale.editor.toolbar.podcastApple;
+        case 'read-more':
+            return locale.editor.toolbar.readMore;
+        case 'sheet-music':
+            return locale.editor.toolbar.sheetMusic;
+        case 'spotify':
+            return locale.editor.toolbar.spotify;
+        case 'strikethrough':
+            return locale.editor.toolbar.strikethrough;
+        case 'twitter':
+            return locale.editor.toolbar.twitter;
+        case 'underline':
+            return locale.editor.toolbar.underline;
+        case 'unlink':
+            return locale.editor.toolbar.unlink;
+        case 'unordered list':
+            return locale.editor.toolbar.unorderedList;
+        case 'video':
+            return locale.editor.toolbar.video;
+        case 'vimeo':
+            return locale.editor.toolbar.vimeo;
+        case 'youtube':
+            return locale.editor.toolbar.youtube;
+        default:
+            return '';
+    }
+}
+
+export { getIconNameInGroup };

package/toolbar/constants.d.ts

@@ -0,0 +1,5 @@
+import React from 'react';
+/**
+ * A react element constant of toolbar divider.
+ */
+export declare const TOOLBAR_DIVIDER: React.JSX.Element;

package/toolbar/constants.js

@@ -0,0 +1,8 @@
+import React from 'react';
+
+/**
+ * A react element constant of toolbar divider.
+ */
+const TOOLBAR_DIVIDER = React.createElement("span", { className: "qdr-toolbar__divider" });
+
+export { TOOLBAR_DIVIDER };

package/toolbar/contexts/StartToolInputContext.d.ts

@@ -0,0 +1,2 @@
+import { StartToolInput } from '../typings';
+export declare const StartToolInputContext: import("react").Context<StartToolInput>;

package/toolbar/contexts/StartToolInputContext.js

@@ -0,0 +1,5 @@
+import { createContext } from 'react';
+
+const StartToolInputContext = createContext(() => { });
+
+export { StartToolInputContext };

package/toolbar/contexts/toolbar.d.ts

@@ -0,0 +1,7 @@
+import { RefObject } from 'react';
+export interface ToolbarContextValue {
+    fixed: boolean;
+    toolbarRef?: RefObject<HTMLDivElement | null>;
+}
+export declare const ToolbarContext: import("react").Context<ToolbarContextValue>;
+export declare function useToolbar(): ToolbarContextValue;

package/toolbar/contexts/toolbar.js

@@ -0,0 +1,10 @@
+import { createContext, useContext } from 'react';
+
+const ToolbarContext = createContext({
+    fixed: false,
+});
+function useToolbar() {
+    return useContext(ToolbarContext);
+}
+
+export { ToolbarContext, useToolbar };

package/toolbar/contexts/toolbarMenu.d.ts

@@ -0,0 +1,6 @@
+export interface ToolbarMenuContextValue {
+    isInGroup: boolean;
+    menuExpanded: boolean;
+}
+export declare const ToolbarMenuContext: import("react").Context<ToolbarMenuContextValue>;
+export declare function useToolbarMenu(): ToolbarMenuContextValue;

package/toolbar/contexts/toolbarMenu.js

@@ -0,0 +1,11 @@
+import { createContext, useContext } from 'react';
+
+const ToolbarMenuContext = createContext({
+    isInGroup: false,
+    menuExpanded: false,
+});
+function useToolbarMenu() {
+    return useContext(ToolbarMenuContext);
+}
+
+export { ToolbarMenuContext, useToolbarMenu };

package/toolbar/hooks/useAutoGroupIcons.d.ts

@@ -0,0 +1,12 @@
+import React from 'react';
+export declare function useAutoGroupIcons(tools: JSX.Element | null | undefined, renderExpandedStatus: boolean): {
+    fakeTools: React.JSX.Element;
+    takeCount: number;
+    shownElements: {
+        id: number;
+        type: string | React.JSXElementConstructor<any>;
+        props: unknown;
+        key: string | null;
+    }[];
+    groupElements: any;
+};

package/toolbar/hooks/useAutoGroupIcons.js

@@ -0,0 +1,68 @@
+import React, { useMemo, useState, useCallback, useLayoutEffect, useEffect, useRef } from 'react';
+
+function usePreviousValue(value) {
+    const ref = useRef(value);
+    useEffect(() => {
+        ref.current = value;
+    }, [value]);
+    return ref.current;
+}
+function useAutoGroupIcons(tools, renderExpandedStatus) {
+    const preRenderExpandedStatus = usePreviousValue(renderExpandedStatus);
+    const fakeToolbarId = useMemo(() => (renderExpandedStatus ? 'fake-expanded-tools-wrapper' : 'fake-tools-wrapper'), [renderExpandedStatus]);
+    const fakeTools = useMemo(() => (React.createElement("div", { id: fakeToolbarId, className: "qdr-toolbar", style: { position: 'absolute', top: 0, left: 0, visibility: 'hidden', pointerEvents: 'none' } }, tools)), [fakeToolbarId, tools]);
+    const [takeCount, setTakeCount] = useState(0);
+    const toolsElements = useMemo(() => {
+        var _a, _b;
+        return (_b = (_a = tools === null || tools === void 0 ? void 0 : tools.props.children) === null || _a === void 0 ? void 0 : _a.filter(c => !!c).map((c, index) => (Object.assign(Object.assign({}, c), { id: index })))) !== null && _b !== void 0 ? _b : [];
+    }, [tools]);
+    const calcGroupIcons = useCallback(() => {
+        const fakeToolsWrapper = document.getElementById(fakeToolbarId);
+        if (fakeToolsWrapper) {
+            const toolbarRect = fakeToolsWrapper.getBoundingClientRect();
+            if (toolbarRect.right - window.innerWidth > 0) {
+                const iconWrappers = fakeToolsWrapper.getElementsByClassName('qdr-toolbar__icon__wrapper');
+                const targetIndex = Array.from(iconWrappers).findIndex((wrapper) => {
+                    const rect = wrapper.getBoundingClientRect();
+                    return rect.right > window.innerWidth;
+                });
+                const groupIcons = Array.from(iconWrappers).slice(targetIndex - 1, iconWrappers.length);
+                setTakeCount(groupIcons.length);
+            }
+            else {
+                setTakeCount(0);
+            }
+        }
+    }, [fakeToolbarId]);
+    useLayoutEffect(() => {
+        calcGroupIcons();
+        window.addEventListener('resize', calcGroupIcons);
+        return () => {
+            window.removeEventListener('resize', calcGroupIcons);
+        };
+    }, [calcGroupIcons]);
+    useEffect(() => {
+        if (renderExpandedStatus !== preRenderExpandedStatus) {
+            calcGroupIcons();
+        }
+    }, [renderExpandedStatus, preRenderExpandedStatus, calcGroupIcons]);
+    const takeIndex = useMemo(() => toolsElements.findIndex(el => el.id === toolsElements.filter(e => e.type !== 'span').slice(-takeCount)[0].id), [toolsElements, takeCount]);
+    const shownElements = useMemo(() => toolsElements.slice(0, takeIndex), [toolsElements, takeIndex]);
+    const groupElements = useMemo(() => toolsElements.slice(takeIndex).filter(g => g.type !== 'span').map((g) => {
+        var _a, _b;
+        if (((_b = (_a = g.props) === null || _a === void 0 ? void 0 : _a.children) === null || _b === void 0 ? void 0 : _b.length) > 0) {
+            return g.props.children;
+        }
+        return g;
+    }).reduce((acc, val) => {
+        return acc.concat(val);
+    }, []), [toolsElements, takeIndex]);
+    return {
+        fakeTools,
+        takeCount,
+        shownElements,
+        groupElements,
+    };
+}
+
+export { useAutoGroupIcons };

package/toolbar/hooks/useStartToolInput.d.ts

@@ -0,0 +1 @@
+export declare function useStartToolInput(): import("..").StartToolInput;

package/toolbar/hooks/useStartToolInput.js

@@ -0,0 +1,8 @@
+import { useContext } from 'react';
+import { StartToolInputContext } from '../contexts/StartToolInputContext.js';
+
+function useStartToolInput() {
+    return useContext(StartToolInputContext);
+}
+
+export { useStartToolInput };