@quadrats/react 0.7.8 → 1.0.0

package/carousel/carousel.scss

@@ -0,0 +1,356 @@
+.qdr-carousel {
+  position: relative;
+  margin: var(--qdr-spacing-14) 0;
+
+  &__image-wrapper {
+    flex: 0 0 100%;
+    width: 100%;
+    position: relative;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    border-radius: var(--qdr-radius-1);
+
+    &::after {
+      content: '';
+      position: absolute;
+      inset: 0;
+      background-color: transparent;
+      transition: background-color var(--qdr-duration-short) var(--qdr-easing-standard);
+    }
+  }
+
+  &--with-inline-toolbar {
+    &:hover {
+      .qdr-carousel__image-wrapper {
+        &::after {
+          background-color: var(--qdr-overlay-dark);
+        }
+      }
+    }
+  }
+
+  &:hover {
+    .qdr-carousel__inline-toolbar {
+      opacity: 1;
+      pointer-events: auto;
+    }
+  }
+
+  &-modal {
+    &__side {
+      display: flex;
+      flex-direction: column;
+      justify-content: flex-start;
+      align-items: center;
+      gap: var(--qdr-spacing-9);
+
+      &__hints-wrapper {
+        width: 100%;
+      }
+
+      &__hints-title {
+        color: var(--qdr-text-primary);
+        font-size: var(--qdr-typography-basic-h6-font-size);
+        line-height: var(--qdr-typography-basic-h6-line-height);
+        letter-spacing: var(--qdr-typography-basic-h6-letter-spacing);
+        font-weight: var(--qdr-typography-basic-h6-font-weight);
+        margin-bottom: var(--qdr-spacing-4);
+      }
+
+      &__upload {
+        width: 100%;
+      }
+    }
+
+    &__main {
+      display: flex;
+      flex-direction: column;
+      position: relative;
+      background-color: var(--qdr-bg);
+      overflow-y: unset;
+      padding: unset;
+    }
+
+    &__counter {
+      color: var(--qdr-text-secondary);
+      font-size: var(--qdr-typography-basic-body2-font-size);
+      line-height: var(--qdr-typography-basic-body2-line-height);
+      letter-spacing: var(--qdr-typography-basic-body2-letter-spacing);
+      font-weight: var(--qdr-typography-basic-body2-font-weight);
+    }
+
+    &__placeholder {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      pointer-events: none;
+      height: 100%;
+
+      &__block {
+        display: flex;
+        flex-direction: column;
+        justify-content: flex-start;
+        align-items: center;
+        width: 360px;
+        padding-bottom: var(--qdr-spacing-14);
+      }
+
+      &__icon {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        color: var(--qdr-action-inactive);
+        padding: var(--qdr-spacing-4);
+        border: 1px solid var(--qdr-divider);
+        background-color: var(--qdr-surface);
+        border-radius: var(--qdr-radius-5);
+      }
+
+      &__title {
+        color: var(--qdr-text-primary);
+        font-size: var(--qdr-typography-basic-h5-font-size);
+        line-height: var(--qdr-typography-basic-h5-line-height);
+        letter-spacing: var(--qdr-typography-basic-h5-letter-spacing);
+        font-weight: var(--qdr-typography-basic-h5-font-weight);
+        text-align: center;
+        margin-top: var(--qdr-spacing-9);
+      }
+
+      &__hint {
+        color: var(--qdr-text-secondary);
+        font-size: var(--qdr-typography-basic-body2-font-size);
+        line-height: var(--qdr-typography-basic-body2-line-height);
+        letter-spacing: var(--qdr-typography-basic-body2-letter-spacing);
+        font-weight: var(--qdr-typography-basic-body2-font-weight);
+        text-align: center;
+        margin-top: var(--qdr-spacing-2);
+      }
+    }
+
+    &__zone {
+      flex: 1;
+      align-self: stretch;
+      overflow-y: auto;
+      padding: var(--qdr-spacing-9);
+
+      &__wrapper {
+        position: absolute;
+        inset: 0;
+        width: 100%;
+        height: 100%;
+        z-index: 101;
+        display: flex;
+        align-items: flex-end;
+        justify-content: center;
+        background-color: var(--qdr-primary-hover-bg);
+        pointer-events: none;
+      }
+
+      &__block {
+        display: flex;
+        align-items: center;
+        justify-content: flex-start;
+        gap: var(--qdr-spacing-2);
+        background-color: var(--qdr-primary);
+        color: var(--qdr-on-primary);
+        padding: var(--qdr-spacing-7) var(--qdr-spacing-14);
+        box-shadow: var(--qdr-shadow-xl);
+        margin-bottom: var(--qdr-spacing-7);
+        border-radius: 9999px;
+      }
+    }
+
+    &__grid {
+      display: grid;
+      grid-template-columns: repeat(3, 1fr);
+      gap: var(--qdr-spacing-6);
+
+      &--isDragging {
+        opacity: 0;
+        pointer-events: none;
+      }
+    }
+
+    &__image-wrapper {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      position: relative;
+
+      &::after {
+        content: '';
+        position: absolute;
+        inset: 0;
+        background-color: transparent;
+        transition: background-color var(--qdr-duration-short) var(--qdr-easing-standard);
+      }
+    }
+
+    &__error-wrapper {
+      width: 100%;
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      justify-content: center;
+      gap: var(--qdr-spacing-4);
+      background-color: var(--qdr-error-hover-bg);
+    }
+
+    &__error-icon {
+      color: var(--qdr-error);
+    }
+
+    &__error-text {
+      color: var(--qdr-error);
+      font-size: var(--qdr-typography-basic-h6-font-size);
+      line-height: var(--qdr-typography-basic-h6-line-height);
+      letter-spacing: var(--qdr-typography-basic-h6-letter-spacing);
+      font-weight: var(--qdr-typography-basic-h6-font-weight);
+      margin: 0;
+    }
+
+    &__item {
+      display: flex;
+      flex-direction: column;
+      position: relative;
+      border: 1px solid var(--qdr-divider);
+      border-radius: var(--qdr-radius-2);
+      overflow: hidden;
+      transition: box-shadow var(--qdr-duration-short) var(--qdr-easing-standard);
+      z-index: 100;
+
+      &:hover {
+        box-shadow:
+          0 0 0 2px var(--qdr-surface),
+          0 0 0 4px var(--qdr-primary-light);
+
+        .qdr-carousel-modal__image-wrapper {
+          &::after {
+            background-color: var(--qdr-overlay-dark);
+          }
+        }
+
+        .qdr-carousel-modal__inline-toolbar {
+          opacity: 1;
+          pointer-events: auto;
+        }
+      }
+
+      &--isDragging {
+        border-style: dashed;
+        border-color: var(--qdr-primary);
+        box-shadow: var(--qdr-shadow-xl);
+        cursor: grabbing;
+
+        > * {
+          display: none;
+        }
+      }
+
+      &--isOver {
+        box-shadow:
+          0 0 0 2px var(--qdr-surface),
+          0 0 0 4px var(--qdr-primary-light);
+      }
+    }
+
+    &__image {
+      width: 100%;
+    }
+
+    &__input-wrapper {
+      border-top: 1px solid var(--qdr-divider);
+      background-color: var(--qdr-surface);
+      padding: var(--qdr-spacing-6);
+    }
+  }
+
+  &__placeholder {
+    margin: var(--qdr-spacing-14) 0;
+
+    &__icon-wrapper {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      width: 100%;
+      border-radius: var(--qdr-radius-1);
+      border: 1px solid var(--qdr-divider);
+      background-color: var(--qdr-block);
+    }
+
+    &__icon {
+      color: var(--qdr-action-inactive);
+    }
+  }
+
+  &__dots {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    margin-top: var(--qdr-spacing-4);
+  }
+
+  &__dot {
+    width: 5px;
+    height: 5px;
+    border-radius: 50%;
+    background-color: var(--qdr-action-disabled-bg);
+    margin: 2.5px;
+
+    &:hover {
+      cursor: pointer;
+    }
+
+    &--active {
+      background-color: var(--qdr-primary);
+    }
+  }
+
+  &__images-wrapper {
+    display: flex;
+    flex-direction: column;
+  }
+
+  &__slider-wrapper {
+    width: 100%;
+    overflow-x: hidden;
+    border-radius: var(--qdr-radius-1);
+
+    &:hover {
+      cursor: grab;
+    }
+
+    &--isDragging {
+      &:hover {
+        cursor: grabbing;
+      }
+    }
+  }
+
+  &__slider {
+    width: 100%;
+    display: flex;
+    align-items: flex-start;
+    justify-content: flex-start;
+    transition: transform var(--qdr-duration-short) var(--qdr-easing-standard);
+
+    &--isDragging {
+      transition: none;
+    }
+  }
+
+  &__image {
+    width: 100%;
+    border-radius: var(--qdr-radius-1);
+  }
+
+  &__caption {
+    color: var(--qdr-text-primary);
+    font-size: var(--qdr-typography-basic-body2-font-size);
+    line-height: var(--qdr-typography-basic-body2-line-height);
+    letter-spacing: var(--qdr-typography-basic-body2-letter-spacing);
+    font-weight: var(--qdr-typography-basic-body2-font-weight);
+    margin-top: var(--qdr-spacing-6);
+  }
+}

package/carousel/components/Carousel.d.ts

@@ -0,0 +1,15 @@
+import React from 'react';
+import { RenderElementProps } from '@quadrats/react';
+import { RenderCarouselElementProps } from '../typings';
+export declare function Carousel({ attributes, children, element, controller, }: {
+    attributes?: RenderElementProps['attributes'];
+    children: RenderElementProps['children'];
+    element: RenderCarouselElementProps['element'];
+    controller: RenderCarouselElementProps['controller'];
+}): React.JSX.Element;
+export declare function CarouselWithoutToolbar({ attributes, children, }: {
+    attributes?: RenderElementProps['attributes'];
+    children: RenderElementProps['children'];
+    element: RenderCarouselElementProps['element'];
+}): React.JSX.Element;
+export default Carousel;

package/carousel/components/Carousel.js

@@ -0,0 +1,62 @@
+import React, { useState } from 'react';
+import { Transforms } from '@quadrats/core';
+import { useModal, useSlateStatic, ReactEditor } from '@quadrats/react';
+import { InlineToolbar } from '@quadrats/react/toolbar';
+import { Edit, Trash } from '@quadrats/icons';
+import { CarouselContext } from '../contexts/CarouselContext.js';
+
+function Carousel({ attributes, children, element, controller, }) {
+    const { setCarouselModalConfig, setConfirmModalConfig } = useModal();
+    const [activeIndex, setActiveIndex] = useState(0);
+    const editor = useSlateStatic();
+    const path = ReactEditor.findPath(editor, element);
+    return (React.createElement(CarouselContext.Provider, { value: {
+            activeIndex,
+            setActiveIndex,
+        } },
+        React.createElement("div", Object.assign({}, attributes, { contentEditable: false, className: "qdr-carousel qdr-carousel--with-inline-toolbar" }),
+            React.createElement(InlineToolbar, { className: "qdr-carousel__inline-toolbar", leftIcons: [], rightIcons: [
+                    {
+                        icon: Edit,
+                        onClick: () => {
+                            setCarouselModalConfig({
+                                controller,
+                                initialValue: element.items,
+                                onConfirm: (items) => {
+                                    controller.updateCarouselElement({ editor, items, path });
+                                },
+                            });
+                        },
+                    },
+                    {
+                        icon: Trash,
+                        onClick: () => {
+                            if (controller.confirmModal) {
+                                // TODO: i18n
+                                setConfirmModalConfig({
+                                    title: '刪除輪播',
+                                    content: '是否確認刪除此輪播？刪除後將立即移除，且此操作無法復原。',
+                                    confirmText: '刪除輪播',
+                                    onConfirm: () => {
+                                        Transforms.removeNodes(editor, { at: path });
+                                    },
+                                });
+                            }
+                            else {
+                                Transforms.removeNodes(editor, { at: path });
+                            }
+                        },
+                    },
+                ] }),
+            children)));
+}
+function CarouselWithoutToolbar({ attributes, children, }) {
+    const [activeIndex, setActiveIndex] = useState(0);
+    return (React.createElement(CarouselContext.Provider, { value: {
+            activeIndex,
+            setActiveIndex,
+        } },
+        React.createElement("div", Object.assign({}, attributes, { contentEditable: false, className: "qdr-carousel" }), children)));
+}
+
+export { Carousel, CarouselWithoutToolbar, Carousel as default };

package/carousel/components/CarouselCaption.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+import { RenderElementProps } from '@quadrats/react';
+import { RenderCarouselCaptionElementProps } from '../typings';
+export declare function CarouselCaption({ attributes, element, }: {
+    attributes?: RenderElementProps['attributes'];
+    children: RenderElementProps['children'];
+    element: RenderCarouselCaptionElementProps['element'];
+}): React.JSX.Element | null;
+export default CarouselCaption;

package/carousel/components/CarouselCaption.js

@@ -0,0 +1,12 @@
+import React, { useMemo } from 'react';
+import { useCarousel } from '../hooks/useCarousel.js';
+
+function CarouselCaption({ attributes, element, }) {
+    const { activeIndex } = useCarousel();
+    const currentCaption = useMemo(() => element.captions[activeIndex], [activeIndex, element.captions]);
+    if (!currentCaption)
+        return null;
+    return (React.createElement("div", Object.assign({}, attributes, { contentEditable: false, className: "qdr-carousel__caption" }), currentCaption));
+}
+
+export { CarouselCaption, CarouselCaption as default };

package/carousel/components/CarouselImages.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+import { RenderElementProps } from '@quadrats/react';
+import { RenderCarouselImagesElementProps } from '../typings';
+export declare function CarouselImages({ attributes, element, }: {
+    attributes?: RenderElementProps['attributes'];
+    children: RenderElementProps['children'];
+    element: RenderCarouselImagesElementProps['element'];
+}): React.JSX.Element;
+export default CarouselImages;

package/carousel/components/CarouselImages.js

@@ -0,0 +1,52 @@
+import React, { useRef, useState, useMemo, useCallback } from 'react';
+import clsx from 'clsx';
+import { useCarousel } from '../hooks/useCarousel.js';
+
+const deltaLimit = 100;
+function CarouselImages({ attributes, element, }) {
+    var _a, _b;
+    const imageRef = useRef(null);
+    const { activeIndex, setActiveIndex } = useCarousel();
+    const [isDragging, setIsDragging] = useState(false);
+    const [startX, setStartX] = useState(0);
+    const [delta, setDelta] = useState(0);
+    const images = useMemo(() => element.images, [element.images]);
+    const onMouseUp = useCallback(() => {
+        setIsDragging(false);
+        if (delta < -100 && activeIndex < images.length - 1) {
+            setActiveIndex((prev) => prev + 1);
+        }
+        else if (delta > deltaLimit && activeIndex > 0) {
+            setActiveIndex((prev) => prev - 1);
+        }
+        setDelta(0);
+    }, [activeIndex, delta, images.length, setActiveIndex]);
+    return (React.createElement("div", Object.assign({}, attributes, { contentEditable: false, className: "qdr-carousel__images-wrapper" }),
+        React.createElement("div", { className: clsx('qdr-carousel__slider-wrapper', {
+                'qdr-carousel__slider-wrapper--isDragging': isDragging,
+            }), onMouseDown: (e) => {
+                setIsDragging(true);
+                setStartX(e.clientX);
+            }, onMouseMove: (e) => {
+                if (isDragging) {
+                    const delta = e.clientX - startX;
+                    setDelta(delta);
+                }
+            }, onMouseUp: onMouseUp },
+            React.createElement("div", { className: clsx('qdr-carousel__slider', {
+                    'qdr-carousel__slider--isDragging': isDragging,
+                }), style: {
+                    transform: `translateX(${delta - activeIndex * ((_b = (_a = imageRef.current) === null || _a === void 0 ? void 0 : _a.clientWidth) !== null && _b !== void 0 ? _b : 0)}px)`,
+                } }, images.map((image) => (React.createElement("div", { key: image, className: "qdr-carousel__image-wrapper" },
+                React.createElement("img", { ref: imageRef, draggable: false, className: "qdr-carousel__image", src: image, style: {
+                        objectFit: element.ratio ? 'cover' : 'contain',
+                        aspectRatio: element.ratio ? `${element.ratio[0]} / ${element.ratio[1]}` : '3 / 2',
+                    } })))))),
+        React.createElement("div", { className: "qdr-carousel__dots" }, images.map((_, index) => (React.createElement("div", { key: index, onClick: () => {
+                setActiveIndex(index);
+            }, className: clsx('qdr-carousel__dot', {
+                'qdr-carousel__dot--active': index === activeIndex,
+            }) }))))));
+}
+
+export { CarouselImages, CarouselImages as default };

package/carousel/components/CarouselPlaceholder.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import { RenderCarouselPlaceholderElementProps } from '../typings';
+export declare function CarouselPlaceholder({ attributes, element }: RenderCarouselPlaceholderElementProps): React.JSX.Element;
+export default CarouselPlaceholder;

package/carousel/components/CarouselPlaceholder.js

@@ -0,0 +1,17 @@
+import React from 'react';
+import { Icon } from '@quadrats/react/components';
+import { Image } from '@quadrats/icons';
+
+function CarouselPlaceholder({ attributes, element }) {
+    return (React.createElement("div", Object.assign({}, attributes, { className: "qdr-carousel__placeholder", contentEditable: false }),
+        React.createElement("div", { className: "qdr-carousel__placeholder__icon-wrapper", style: { aspectRatio: element.ratio ? `${element.ratio[0]} / ${element.ratio[1]}` : '3 / 2' } },
+            React.createElement(Icon, { className: "qdr-carousel__placeholder__icon", icon: Image, width: 48, height: 48 })),
+        React.createElement("div", { className: "qdr-carousel__dots" },
+            React.createElement("div", { className: "qdr-carousel__dot qdr-carousel__dot--active" }),
+            React.createElement("div", { className: "qdr-carousel__dot" }),
+            React.createElement("div", { className: "qdr-carousel__dot" }),
+            React.createElement("div", { className: "qdr-carousel__dot" }),
+            React.createElement("div", { className: "qdr-carousel__dot" }))));
+}
+
+export { CarouselPlaceholder, CarouselPlaceholder as default };

package/carousel/contexts/CarouselContext.d.ts

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

package/carousel/contexts/CarouselContext.js

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

package/carousel/createReactCarousel.d.ts

@@ -0,0 +1,4 @@
+import { CreateCarouselOptions } from '@quadrats/common/carousel';
+import { ReactCarousel } from './typings';
+export type CreateReactCarouselOptions = CreateCarouselOptions;
+export declare function createReactCarousel(options: CreateReactCarouselOptions): ReactCarousel;

package/carousel/createReactCarousel.js

@@ -0,0 +1,82 @@
+import { createCarousel, CAROUSEL_PLACEHOLDER_TYPE } from '@quadrats/common/carousel';
+import { createRenderElement, createRenderElements } from '@quadrats/react';
+import { removePreviousElement } from '@quadrats/react/utils';
+import { defaultRenderCarouselPlaceholderElement, defaultRenderCarouselElements } from './defaultRenderCarouselElements.js';
+
+function createReactCarousel(options) {
+    const core = createCarousel(options);
+    const { types, confirmModal } = core;
+    return Object.assign(Object.assign({}, core), { createHandlers: (setNeedConfirmModal, locale) => ({
+            onKeyDown(event, editor, next) {
+                if (event.key === 'Backspace') {
+                    removePreviousElement({
+                        event,
+                        editor,
+                        type: types.carousel,
+                        confirmModal,
+                        doConfirm: (remove) => {
+                            if (setNeedConfirmModal) {
+                                // TODO: i18n
+                                console.log('locale', locale);
+                                setNeedConfirmModal({
+                                    title: '刪除輪播',
+                                    content: '是否確認刪除此輪播？刪除後將立即移除，且此操作無法復原。',
+                                    confirmText: '刪除輪播',
+                                    onConfirm: () => {
+                                        remove();
+                                        setNeedConfirmModal(null);
+                                    },
+                                });
+                            }
+                        },
+                    });
+                }
+                next();
+            },
+        }), createRenderElement: (options = {}) => {
+            const renderCarousel = options.carousel || defaultRenderCarouselElements.carousel;
+            const renderCarouselImages = options.carousel_images || defaultRenderCarouselElements.carousel_images;
+            const renderCarouselCaption = options.carousel_caption || defaultRenderCarouselElements.carousel_caption;
+            return createRenderElements([
+                {
+                    type: types.carousel,
+                    render: (props) => {
+                        const { attributes, children, element } = props;
+                        return renderCarousel({
+                            attributes,
+                            element,
+                            children,
+                            controller: core,
+                        });
+                    },
+                },
+                {
+                    type: types.carousel_images,
+                    render: (props) => {
+                        const { attributes, children, element } = props;
+                        return renderCarouselImages({
+                            attributes,
+                            element,
+                            children,
+                        });
+                    },
+                },
+                {
+                    type: types.carousel_caption,
+                    render: (props) => {
+                        const { attributes, children, element } = props;
+                        return renderCarouselCaption({
+                            attributes,
+                            element,
+                            children,
+                        });
+                    },
+                },
+            ]);
+        }, createRenderPlaceholderElement: ({ render = defaultRenderCarouselPlaceholderElement } = {}) => createRenderElement({
+            type: CAROUSEL_PLACEHOLDER_TYPE,
+            render,
+        }) });
+}
+
+export { createReactCarousel };

package/carousel/defaultRenderCarouselElements.d.ts

@@ -0,0 +1,3 @@
+import { CarouselRenderElements, RenderCarouselPlaceholderElement } from './typings';
+export declare const defaultRenderCarouselElements: CarouselRenderElements;
+export declare const defaultRenderCarouselPlaceholderElement: RenderCarouselPlaceholderElement;

package/carousel/defaultRenderCarouselElements.js

@@ -0,0 +1,14 @@
+import React from 'react';
+import { Carousel } from './components/Carousel.js';
+import { CarouselImages } from './components/CarouselImages.js';
+import { CarouselCaption } from './components/CarouselCaption.js';
+import { CarouselPlaceholder } from './components/CarouselPlaceholder.js';
+
+const defaultRenderCarouselElements = {
+    carousel: (props) => React.createElement(Carousel, Object.assign({}, props)),
+    carousel_images: (props) => React.createElement(CarouselImages, Object.assign({}, props)),
+    carousel_caption: (props) => React.createElement(CarouselCaption, Object.assign({}, props)),
+};
+const defaultRenderCarouselPlaceholderElement = (props) => (React.createElement(CarouselPlaceholder, Object.assign({}, props)));
+
+export { defaultRenderCarouselElements, defaultRenderCarouselPlaceholderElement };

package/carousel/hooks/useCarousel.d.ts

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

package/carousel/hooks/useCarousel.js

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