@quadrats/react 0.7.8 → 1.1.0

package/toolbar/toolbar.scss

@@ -1,58 +1,99 @@
-$qdr-toolbar-popup-gap: 8px;
+$qdr-toolbar-popup-gap: --qdr-spacing-4;
 $qdr-toolbar-arrow-size: $qdr-toolbar-popup-gap;
-$qdr-toolbar-height: 48px;
-$qdr-toolbar-padding-vertical: 8px;
-$qdr-toolbar-padding-horizontal: 8px;
-$qdr-toolbar-input-cross-size: 14px;
+$qdr-toolbar-height: --qdr-spacing-14;
+$qdr-toolbar-padding-vertical: --qdr-spacing-4;
+$qdr-toolbar-padding-horizontal: --qdr-spacing-4;
+$qdr-toolbar-input-cross-size: --qdr-spacing-7;
 
 .qdr-toolbar {
   display: flex;
   align-items: center;
-  gap: 8px;
-  font-size: 24px;
-  height: $qdr-toolbar-height;
-  padding: $qdr-toolbar-padding-vertical $qdr-toolbar-padding-horizontal;
+  gap: var(--qdr-spacing-4);
+  height: var(#{$qdr-toolbar-height});
+  padding: var(#{$qdr-toolbar-padding-vertical}) var(#{$qdr-toolbar-padding-horizontal});
   background-color: var(--qdr-surface);
   border: 1px solid var(--qdr-border);
   box-sizing: border-box;
 
   &--radius {
-    border-radius: 8px;
+    border-radius: var(--qdr-radius-3);
   }
 
   &--shadow {
-    box-shadow: 0 4px 8px -2px rgb(0 0 0 / 10%), 0 2px 4px -2px rgb(0 0 0 / 4%);
+    box-shadow: var(--qdr-shadow-s);
+  }
+
+  &__input {
+    font-size: 0.8125rem;
+    background: var(--qdr-block);
+    color: var(--qdr-text-secondary);
+    width: calc(100% - var(#{$qdr-toolbar-input-cross-size}));
+    height: 100%;
+    border: none;
+    padding: 0;
+    outline: none;
+
+    &__wrapper {
+      display: flex;
+      align-items: center;
+      position: absolute;
+      top: var(#{$qdr-toolbar-padding-vertical});
+      left: var(#{$qdr-toolbar-padding-horizontal});
+      width: calc(100% - var(#{$qdr-toolbar-padding-horizontal}) * 2);
+      height: calc(100% - (var(#{$qdr-toolbar-padding-vertical}) * 2 + var(#{$qdr-toolbar-popup-gap})));
+      background: var(--qdr-block);
+      box-sizing: border-box;
+    }
+
+    &__cross {
+      fill: var(--qdr-text-secondary);
+      font-size: var(#{$qdr-toolbar-input-cross-size});
+      width: var(#{$qdr-toolbar-input-cross-size});
+      height: var(#{$qdr-toolbar-input-cross-size});
+      cursor: pointer;
+    }
   }
 
   &__wrapper {
     box-sizing: content-box;
-    height: $qdr-toolbar-height;
+    height: var(#{$qdr-toolbar-height});
 
     &--fixed {
       position: sticky;
       top: 0;
       z-index: 1;
+
+      .qdr-toolbar {
+        &__input {
+          &__wrapper {
+            height: calc(100% - (var(#{$qdr-toolbar-padding-vertical}) * 2));
+          }
+        }
+      }
     }
 
     &--float {
       position: absolute;
       z-index: 1;
-      padding-bottom: $qdr-toolbar-popup-gap;
+      padding-bottom: var(#{$qdr-toolbar-popup-gap});
+
+      .qdr-toolbar {
+        background-color: var(--qdr-block);
+      }
     }
 
     &--inputting {
       min-width: 250px;
-      max-width: 350px;
     }
   }
 
   &__arrow {
     position: absolute;
-    top: calc(100% - #{$qdr-toolbar-popup-gap});
+    top: calc(100% - var(#{$qdr-toolbar-popup-gap}));
     left: 50%;
     content: '';
-    width: $qdr-toolbar-arrow-size;
-    height: $qdr-toolbar-arrow-size;
+    width: var(#{$qdr-toolbar-arrow-size});
+    height: var(#{$qdr-toolbar-arrow-size});
     background: var(--qdr-surface);
     border: 1px solid var(--qdr-border);
     border-top: none;
@@ -62,60 +103,170 @@ $qdr-toolbar-input-cross-size: 14px;
 
   &__divider {
     width: 1px;
-    height: 20px;
+    height: var(--qdr-spacing-8);
     background-color: var(--qdr-divider);
   }
 
   &__icon {
     position: relative;
-    color: var(--qdr-icon);
+    color: var(--qdr-action-inactive);
     font-size: 24px;
     display: inline-flex;
     justify-content: center;
     align-items: center;
+    gap: var(--qdr-spacing-1);
     border: 0;
     background-color: transparent;
-    padding: 4px;
+    padding: var(--qdr-spacing-2);
     outline: none;
     box-shadow: none;
-    border-radius: 0;
-    transition: color 0.2s ease-out;
+    border-radius: var(--qdr-radius-1);
+    transition:
+      color var(--qdr-duration-short) var(--qdr-easing-standard),
+      background var(--qdr-duration-short) var(--qdr-easing-standard);
     cursor: pointer;
 
     &:hover,
+    &--expanded {
+      color: var(--qdr-action-active);
+      background: var(--qdr-secondary-hover-bg);
+    }
+
     &--active {
       color: var(--qdr-primary);
     }
-  }
 
-  &__input {
-    font-size: 13px;
-    background: var(--qdr-surface);
-    color: var(--qdr-placeholder);
-    width: calc(100% - #{$qdr-toolbar-input-cross-size});
-    height: 100%;
-    border: none;
-    padding: 0;
-    outline: none;
+    &--with-name {
+      display: flex;
+      align-items: center;
+      justify-content: flex-start;
+      border-radius: 0;
+      gap: var(--qdr-spacing-4);
+      padding: 0 var(--qdr-spacing-6);
+
+      &:hover {
+        color: var(--qdr-action-inactive);
+        background: var(--qdr-primary-hover-bg);
+      }
+
+      &--active {
+        color: var(--qdr-action-inactive);
+        background: var(--qdr-primary-active-bg);
+      }
+    }
 
     &__wrapper {
       display: flex;
       align-items: center;
+      justify-content: center;
+      position: relative;
+    }
+
+    &__arrow {
+      color: var(--qdr-action-disabled);
+    }
+
+    &__name {
+      flex: 1;
+      margin: 0;
+      font-size: var(--qdr-typography-basic-input1-font-size);
+      line-height: var(--qdr-typography-basic-input1-line-height);
+      letter-spacing: var(--qdr-typography-basic-input1-letter-spacing);
+      font-weight: var(--qdr-typography-basic-input1-font-weight);
+      color: var(--qdr-text-primary);
+    }
+
+    &__check {
+      color: var(--qdr-primary);
+    }
+
+    &__menu {
+      opacity: 0;
       position: absolute;
-      top: $qdr-toolbar-padding-vertical;
-      left: $qdr-toolbar-padding-horizontal;
-      width: calc(100% - #{$qdr-toolbar-padding-horizontal * 2});
-      height: calc(100% - #{$qdr-toolbar-padding-vertical * 2 + $qdr-toolbar-popup-gap});
       background: var(--qdr-surface);
-      box-sizing: border-box;
+      border: 1px solid var(--qdr-border);
+      padding: var(--qdr-spacing-2) 0;
+      width: 200px;
+      max-height: 240px;
+      box-shadow: var(--qdr-shadow-xl);
+      pointer-events: none;
+      overflow-y: auto;
+      transition: opacity var(--qdr-duration-short) var(--qdr-easing-standard);
+
+      &--expanded {
+        pointer-events: auto;
+        opacity: 1;
+      }
+
+      &--top {
+        bottom: var(--qdr-spacing-14);
+      }
+
+      &--bottom {
+        top: var(--qdr-spacing-14);
+      }
     }
+  }
+}
 
-    &__cross {
-      fill: var(--qdr-placeholder);
-      font-size: $qdr-toolbar-input-cross-size;
-      width: 1em;
-      height: 1em;
-      cursor: pointer;
+.qdr-inline-toolbar {
+  position: absolute;
+  top: var(--qdr-spacing-4);
+  right: var(--qdr-spacing-4);
+  display: flex;
+  align-items: center;
+  justify-content: flex-start;
+  gap: var(--qdr-spacing-3);
+  background-color: var(--qdr-bg);
+  padding: var(--qdr-spacing-3);
+  border: 1px solid var(--qdr-border);
+  border-radius: var(--qdr-radius-3);
+  pointer-events: none;
+  opacity: 0;
+  transition: opacity var(--qdr-duration-short) var(--qdr-easing-standard);
+  z-index: 1;
+
+  &__wrapper {
+    display: flex;
+    align-items: center;
+    justify-content: flex-start;
+    gap: var(--qdr-spacing-1);
+    padding: var(--qdr-spacing-1);
+    border-radius: var(--qdr-radius-1);
+
+    &--enabledBgColor {
+      background-color: var(--qdr-divider);
+    }
+  }
+
+  &__divider {
+    width: 1px;
+    height: 16px;
+    background-color: var(--qdr-divider);
+  }
+
+  &__icon {
+    color: var(--qdr-action-inactive);
+    border-radius: var(--qdr-radius-1);
+    transition:
+      color var(--qdr-duration-short) var(--qdr-easing-standard),
+      background-color var(--qdr-duration-short) var(--qdr-easing-standard);
+    cursor: pointer;
+
+    &:hover {
+      color: var(--qdr-primary-light);
+    }
+
+    &--active {
+      color: var(--qdr-primary-light);
+      background-color: var(--qdr-block);
+    }
+
+    &--disabled {
+      &:hover {
+        color: var(--qdr-action-inactive);
+        cursor: not-allowed;
+      }
     }
   }
 }

package/utils/index.cjs.js

@@ -1,5 +1,9 @@
 'use strict';
 
+var core = require('@quadrats/core');
+var tslib = require('tslib');
+var react = require('react');
+
 /**
  * Compose all refs to single one.
  * It's helpful if you want to use useRef in an forwardRef component.
@@ -31,4 +35,159 @@ function composeRefs(refs) {
     };
 }
 
+function removePreviousElement({ event, editor, type, confirmModal, doConfirm, }) {
+    const { selection } = editor;
+    if (selection && core.Range.isCollapsed(selection)) {
+        const currentEntry = core.Editor.above(editor, {
+            match: (n) => core.Element.isElement(n),
+        });
+        if (currentEntry) {
+            const [, currentPath] = currentEntry;
+            if (core.Editor.isStart(editor, selection.anchor, currentPath)) {
+                // const previousEntry = Editor.previous(editor, {
+                //   at: currentPath,
+                //   match: (n) => Element.isElement(n) && (n as QuadratsElement).type === type,
+                // });
+                let prevPath = currentPath;
+                try {
+                    prevPath = core.Path.previous(currentPath);
+                }
+                catch (ex) {
+                    // error
+                }
+                const prevNode = core.Node.get(editor, prevPath);
+                if (core.Element.isElement(prevNode) && prevNode.type === type) {
+                    event.preventDefault();
+                    const remove = () => {
+                        core.Transforms.removeNodes(editor, {
+                            at: prevPath,
+                        });
+                    };
+                    if (confirmModal) {
+                        doConfirm(remove);
+                    }
+                    else {
+                        remove();
+                    }
+                    return;
+                }
+            }
+        }
+    }
+}
+
+function readFileAsBase64(file) {
+    return new Promise((resolve, reject) => {
+        const reader = new FileReader();
+        reader.onload = () => {
+            if (typeof reader.result === 'string') {
+                resolve(reader.result);
+            }
+        };
+        reader.onerror = () => reject(reader.error);
+        reader.readAsDataURL(file);
+    });
+}
+function upload(_a) {
+    return tslib.__awaiter(this, arguments, void 0, function* ({ file, getBody, getHeaders, getUrl, uploader, onProgress, }) {
+        const headers = yield (getHeaders === null || getHeaders === void 0 ? void 0 : getHeaders(file));
+        const xhr = uploader || new XMLHttpRequest();
+        return new Promise((resolve, reject) => {
+            let sent = false;
+            xhr.upload.onprogress = ({ loaded, total }) => onProgress((loaded * 100) / total);
+            xhr.onload = () => {
+                if (xhr.status >= 200 && xhr.status < 300) {
+                    resolve(xhr.response);
+                }
+                else {
+                    reject(new Error(`Upload failed with status ${xhr.status}: ${xhr.response}`));
+                }
+            };
+            xhr.open('POST', getUrl(file));
+            if (headers) {
+                for (const headerName in headers) {
+                    xhr.setRequestHeader(headerName, headers[headerName]);
+                }
+            }
+            if (!sent) {
+                sent = true;
+                xhr.send(getBody(file));
+            }
+        });
+    });
+}
+function mockUpload(base64, onProgress) {
+    return new Promise((resolve) => {
+        let progress = 0;
+        const interval = setInterval(() => {
+            progress += 10;
+            onProgress(progress);
+            if (progress >= 100) {
+                clearInterval(interval);
+                setTimeout(() => resolve(base64), 200);
+            }
+        }, 250);
+    });
+}
+
+function usePreviousValue(value) {
+    const ref = react.useRef(value);
+    react.useEffect(() => {
+        ref.current = value;
+    }, [value]);
+    return ref.current;
+}
+
+const useIsomorphicLayoutEffect = typeof window !== 'undefined' &&
+    window.document &&
+    !!window.document.createElement
+    ? react.useLayoutEffect
+    : react.useEffect;
+
+function useDocumentEvents(factory, deps) {
+    useIsomorphicLayoutEffect(() => {
+        const handlers = factory();
+        if (!handlers) {
+            return;
+        }
+        const entries = Object.entries(handlers);
+        entries.forEach(([event, handler]) => {
+            document.addEventListener(event, handler);
+        });
+        return () => {
+            entries.forEach(([event, handler]) => {
+                document.removeEventListener(event, handler);
+            });
+        };
+    }, deps);
+}
+
+function useClickAway(factory, containerRef, deps) {
+    useDocumentEvents(() => {
+        const clickAwayHandler = factory();
+        if (!clickAwayHandler) {
+            return;
+        }
+        const handler = (event) => {
+            const target = event.target;
+            const container = containerRef.current;
+            if (!((container === null || container === void 0 ? void 0 : container.contains(target)) || !document.contains(target))) {
+                clickAwayHandler(event);
+            }
+        };
+        return {
+            click: handler,
+            touchend: handler,
+        };
+    }, deps);
+}
+
 exports.composeRefs = composeRefs;
+exports.mockUpload = mockUpload;
+exports.readFileAsBase64 = readFileAsBase64;
+exports.removePreviousElement = removePreviousElement;
+exports.upload = upload;
+exports.useClickAway = useClickAway;
+exports.useDocumentEvents = useDocumentEvents;
+exports.useIsomorphicLayoutEffect = useIsomorphicLayoutEffect;
+exports.usePreviousValue = usePreviousValue;

package/utils/index.d.ts

@@ -1 +1,7 @@
 export { composeRefs } from './composeRefs';
+export * from './removePreviousElement';
+export * from './upload';
+export * from './usePreviousValue';
+export * from './useClickAway';
+export * from './useDocumentEvents';
+export * from './useIsomorphicLayoutEffect';

package/utils/index.js

@@ -1 +1,7 @@
 export { composeRefs } from './composeRefs.js';
+export { removePreviousElement } from './removePreviousElement.js';
+export { mockUpload, readFileAsBase64, upload } from './upload.js';
+export { usePreviousValue } from './usePreviousValue.js';
+export { useClickAway } from './useClickAway.js';
+export { useDocumentEvents } from './useDocumentEvents.js';
+export { useIsomorphicLayoutEffect } from './useIsomorphicLayoutEffect.js';

package/utils/removePreviousElement.d.ts

@@ -0,0 +1,9 @@
+import { KeyboardEvent } from 'react';
+import { QuadratsEditor, Editor } from '@quadrats/core';
+export declare function removePreviousElement({ event, editor, type, confirmModal, doConfirm, }: {
+    event: KeyboardEvent<HTMLElement>;
+    editor: QuadratsEditor & Editor;
+    type: string;
+    confirmModal: boolean;
+    doConfirm: (remove: VoidFunction) => void;
+}): void;

package/utils/removePreviousElement.js

@@ -0,0 +1,44 @@
+import { Range, Editor, Element, Path, Node, Transforms } from '@quadrats/core';
+
+function removePreviousElement({ event, editor, type, confirmModal, doConfirm, }) {
+    const { selection } = editor;
+    if (selection && Range.isCollapsed(selection)) {
+        const currentEntry = Editor.above(editor, {
+            match: (n) => Element.isElement(n),
+        });
+        if (currentEntry) {
+            const [, currentPath] = currentEntry;
+            if (Editor.isStart(editor, selection.anchor, currentPath)) {
+                // const previousEntry = Editor.previous(editor, {
+                //   at: currentPath,
+                //   match: (n) => Element.isElement(n) && (n as QuadratsElement).type === type,
+                // });
+                let prevPath = currentPath;
+                try {
+                    prevPath = Path.previous(currentPath);
+                }
+                catch (ex) {
+                    // error
+                }
+                const prevNode = Node.get(editor, prevPath);
+                if (Element.isElement(prevNode) && prevNode.type === type) {
+                    event.preventDefault();
+                    const remove = () => {
+                        Transforms.removeNodes(editor, {
+                            at: prevPath,
+                        });
+                    };
+                    if (confirmModal) {
+                        doConfirm(remove);
+                    }
+                    else {
+                        remove();
+                    }
+                    return;
+                }
+            }
+        }
+    }
+}
+
+export { removePreviousElement };

package/utils/upload.d.ts

@@ -0,0 +1,11 @@
+import { FileUploaderGetBody, FileUploaderGetHeaders, FileUploaderGetUrl, FileUploaderImplement } from '@quadrats/common/file-uploader';
+export declare function readFileAsBase64(file: File): Promise<string>;
+export declare function upload({ file, getBody, getHeaders, getUrl, uploader, onProgress, }: {
+    file: File;
+    getBody: FileUploaderGetBody;
+    getHeaders?: FileUploaderGetHeaders;
+    getUrl: FileUploaderGetUrl;
+    uploader?: FileUploaderImplement;
+    onProgress: (percent: number) => void;
+}): Promise<string>;
+export declare function mockUpload(base64: string, onProgress: (percent: number) => void): Promise<string>;

package/utils/upload.js

@@ -0,0 +1,57 @@
+import { __awaiter } from 'tslib';
+
+function readFileAsBase64(file) {
+    return new Promise((resolve, reject) => {
+        const reader = new FileReader();
+        reader.onload = () => {
+            if (typeof reader.result === 'string') {
+                resolve(reader.result);
+            }
+        };
+        reader.onerror = () => reject(reader.error);
+        reader.readAsDataURL(file);
+    });
+}
+function upload(_a) {
+    return __awaiter(this, arguments, void 0, function* ({ file, getBody, getHeaders, getUrl, uploader, onProgress, }) {
+        const headers = yield (getHeaders === null || getHeaders === void 0 ? void 0 : getHeaders(file));
+        const xhr = uploader || new XMLHttpRequest();
+        return new Promise((resolve, reject) => {
+            let sent = false;
+            xhr.upload.onprogress = ({ loaded, total }) => onProgress((loaded * 100) / total);
+            xhr.onload = () => {
+                if (xhr.status >= 200 && xhr.status < 300) {
+                    resolve(xhr.response);
+                }
+                else {
+                    reject(new Error(`Upload failed with status ${xhr.status}: ${xhr.response}`));
+                }
+            };
+            xhr.open('POST', getUrl(file));
+            if (headers) {
+                for (const headerName in headers) {
+                    xhr.setRequestHeader(headerName, headers[headerName]);
+                }
+            }
+            if (!sent) {
+                sent = true;
+                xhr.send(getBody(file));
+            }
+        });
+    });
+}
+function mockUpload(base64, onProgress) {
+    return new Promise((resolve) => {
+        let progress = 0;
+        const interval = setInterval(() => {
+            progress += 10;
+            onProgress(progress);
+            if (progress >= 100) {
+                clearInterval(interval);
+                setTimeout(() => resolve(base64), 200);
+            }
+        }, 250);
+    });
+}
+
+export { mockUpload, readFileAsBase64, upload };

package/utils/useClickAway.d.ts

@@ -0,0 +1,5 @@
+import { RefObject, DependencyList } from 'react';
+export type ClickAwayEvent = MouseEvent | TouchEvent | PointerEvent;
+export type ClickAwayHandler = (event: ClickAwayEvent) => void;
+export type ClickAwayHandlerFactory = () => ClickAwayHandler | undefined;
+export declare function useClickAway(factory: ClickAwayHandlerFactory, containerRef: RefObject<HTMLElement | null>, deps?: DependencyList): void;

package/utils/useClickAway.js

@@ -0,0 +1,23 @@
+import { useDocumentEvents } from './useDocumentEvents.js';
+
+function useClickAway(factory, containerRef, deps) {
+    useDocumentEvents(() => {
+        const clickAwayHandler = factory();
+        if (!clickAwayHandler) {
+            return;
+        }
+        const handler = (event) => {
+            const target = event.target;
+            const container = containerRef.current;
+            if (!((container === null || container === void 0 ? void 0 : container.contains(target)) || !document.contains(target))) {
+                clickAwayHandler(event);
+            }
+        };
+        return {
+            click: handler,
+            touchend: handler,
+        };
+    }, deps);
+}
+
+export { useClickAway };

package/utils/useDocumentEvents.d.ts

@@ -0,0 +1,5 @@
+import { DependencyList } from 'react';
+export type DocumentEventHandlersFactory = () => {
+    [event in keyof DocumentEventMap]?: (event: DocumentEventMap[event]) => void;
+} | undefined;
+export declare function useDocumentEvents(factory: DocumentEventHandlersFactory, deps?: DependencyList): void;

package/utils/useDocumentEvents.js

@@ -0,0 +1,21 @@
+import { useIsomorphicLayoutEffect } from './useIsomorphicLayoutEffect.js';
+
+function useDocumentEvents(factory, deps) {
+    useIsomorphicLayoutEffect(() => {
+        const handlers = factory();
+        if (!handlers) {
+            return;
+        }
+        const entries = Object.entries(handlers);
+        entries.forEach(([event, handler]) => {
+            document.addEventListener(event, handler);
+        });
+        return () => {
+            entries.forEach(([event, handler]) => {
+                document.removeEventListener(event, handler);
+            });
+        };
+    }, deps);
+}
+
+export { useDocumentEvents };

package/utils/useIsomorphicLayoutEffect.d.ts

@@ -0,0 +1,2 @@
+import { useEffect } from 'react';
+export declare const useIsomorphicLayoutEffect: typeof useEffect;