@quadrats/react 1.1.7 → 1.1.8

package/card/jsx-serializer/createJsxSerializeCard.js

@@ -1,48 +0,0 @@
-import { CARD_TYPES } from '@quadrats/common/card';
-import { createJsxSerializeElements } from '@quadrats/react/jsx-serializer';
-import { defaultRenderCardElements } from './defaultRenderCardElements.js';
-
-function createJsxSerializeCard(options = {}) {
-    const { card = {}, card_image = {}, card_contents = {} } = options;
-    const cardType = card.type || CARD_TYPES.card;
-    const imageType = card_image.type || CARD_TYPES.card_image;
-    const contentsType = card_contents.type || CARD_TYPES.card_contents;
-    const renderCard = card.render || defaultRenderCardElements.card;
-    const renderCardImage = card_image.render || defaultRenderCardElements.card_image;
-    const renderCardContents = card_contents.render || defaultRenderCardElements.card_contents;
-    return createJsxSerializeElements([
-        {
-            type: cardType,
-            render: (props) => {
-                const { children } = props;
-                const element = props.element;
-                return renderCard({
-                    children,
-                    element,
-                });
-            },
-        },
-        {
-            type: imageType,
-            render: (props) => {
-                const { children, element } = props;
-                return renderCardImage({
-                    children,
-                    element,
-                });
-            },
-        },
-        {
-            type: contentsType,
-            render: (props) => {
-                const { children, element } = props;
-                return renderCardContents({
-                    children,
-                    element,
-                });
-            },
-        },
-    ]);
-}
-
-export { createJsxSerializeCard };

package/card/jsx-serializer/defaultRenderCardElements.d.ts

@@ -1,2 +0,0 @@
-import { CardJsxSerializeElements } from './typings';
-export declare const defaultRenderCardElements: CardJsxSerializeElements;

package/card/jsx-serializer/defaultRenderCardElements.js

@@ -1,10 +0,0 @@
-import React from 'react';
-import { CardContents, CardImage, CardWithoutToolbar } from '@quadrats/react/card';
-
-const defaultRenderCardElements = {
-    card: (props) => React.createElement(CardWithoutToolbar, Object.assign({}, props)),
-    card_image: (props) => React.createElement(CardImage, Object.assign({}, props)),
-    card_contents: (props) => React.createElement(CardContents, Object.assign({}, props)),
-};
-
-export { defaultRenderCardElements };

package/card/jsx-serializer/index.cjs.js

@@ -1,58 +0,0 @@
-'use strict';
-
-var React = require('react');
-var card = require('@quadrats/react/card');
-var card$1 = require('@quadrats/common/card');
-var jsxSerializer = require('@quadrats/react/jsx-serializer');
-
-const defaultRenderCardElements = {
-    card: (props) => React.createElement(card.CardWithoutToolbar, Object.assign({}, props)),
-    card_image: (props) => React.createElement(card.CardImage, Object.assign({}, props)),
-    card_contents: (props) => React.createElement(card.CardContents, Object.assign({}, props)),
-};
-
-function createJsxSerializeCard(options = {}) {
-    const { card = {}, card_image = {}, card_contents = {} } = options;
-    const cardType = card.type || card$1.CARD_TYPES.card;
-    const imageType = card_image.type || card$1.CARD_TYPES.card_image;
-    const contentsType = card_contents.type || card$1.CARD_TYPES.card_contents;
-    const renderCard = card.render || defaultRenderCardElements.card;
-    const renderCardImage = card_image.render || defaultRenderCardElements.card_image;
-    const renderCardContents = card_contents.render || defaultRenderCardElements.card_contents;
-    return jsxSerializer.createJsxSerializeElements([
-        {
-            type: cardType,
-            render: (props) => {
-                const { children } = props;
-                const element = props.element;
-                return renderCard({
-                    children,
-                    element,
-                });
-            },
-        },
-        {
-            type: imageType,
-            render: (props) => {
-                const { children, element } = props;
-                return renderCardImage({
-                    children,
-                    element,
-                });
-            },
-        },
-        {
-            type: contentsType,
-            render: (props) => {
-                const { children, element } = props;
-                return renderCardContents({
-                    children,
-                    element,
-                });
-            },
-        },
-    ]);
-}
-
-exports.createJsxSerializeCard = createJsxSerializeCard;
-exports.defaultRenderCardElements = defaultRenderCardElements;

package/card/jsx-serializer/index.js

@@ -1,2 +0,0 @@
-export { defaultRenderCardElements } from './defaultRenderCardElements.js';
-export { createJsxSerializeCard } from './createJsxSerializeCard.js';

package/card/jsx-serializer/typings.d.ts

@@ -1,9 +0,0 @@
-import { CardElement, CardImageElement, CardContentsElement, CardTypeKey, CardImageTypeKey, CardContentsTypeKey } from '@quadrats/common/card';
-import { JsxSerializeElementProps } from '@quadrats/react/jsx-serializer';
-export interface JsxSerializeCardElementProps extends JsxSerializeElementProps<CardElement> {
-}
-export interface JsxSerializeCardImageElementProps extends JsxSerializeElementProps<CardImageElement> {
-}
-export interface JsxSerializeCardContentsElementProps extends JsxSerializeElementProps<CardContentsElement> {
-}
-export type CardJsxSerializeElements = Record<CardTypeKey, (props: JsxSerializeCardElementProps) => JSX.Element | null | undefined> & Record<CardImageTypeKey, (props: JsxSerializeCardImageElementProps) => JSX.Element | null | undefined> & Record<CardContentsTypeKey, (props: JsxSerializeCardContentsElementProps) => JSX.Element | null | undefined>;

package/card/toolbar/CardToolbarIcon.d.ts

@@ -1,8 +0,0 @@
-import React from 'react';
-import { ToolbarIconProps } from '@quadrats/react/toolbar';
-import { ReactCard } from '@quadrats/react/card';
-export interface CardToolbarIconProps extends Omit<ToolbarIconProps, 'active' | 'onClick'> {
-    controller: ReactCard;
-}
-declare function CardToolbarIcon(props: CardToolbarIconProps): React.JSX.Element;
-export default CardToolbarIcon;

package/card/toolbar/CardToolbarIcon.js

@@ -1,12 +0,0 @@
-import { __rest } from 'tslib';
-import React from 'react';
-import { ToolbarIcon } from '@quadrats/react/toolbar';
-import { useCardTool } from './useCardTool.js';
-
-function CardToolbarIcon(props) {
-    const { controller } = props, rest = __rest(props, ["controller"]);
-    const { onClick } = useCardTool(controller);
-    return React.createElement(ToolbarIcon, Object.assign({}, rest, { onClick: onClick }));
-}
-
-export { CardToolbarIcon as default };

package/card/toolbar/index.cjs.js

@@ -1,52 +0,0 @@
-'use strict';
-
-var React = require('react');
-var react = require('@quadrats/react');
-var tslib = require('tslib');
-var toolbar = require('@quadrats/react/toolbar');
-
-function useCardTool(controller) {
-    const editor = react.useSlateStatic();
-    const { setCardModalConfig, isModalClosed, setIsModalClosed } = react.useModal();
-    React.useEffect(() => {
-        if (isModalClosed) {
-            setTimeout(() => {
-                controller.removeCardPlaceholder(editor);
-                setIsModalClosed(false);
-            }, 250);
-        }
-    }, [controller, editor, isModalClosed, setIsModalClosed]);
-    return {
-        onClick: () => {
-            controller.insertCardPlaceholder(editor);
-            setCardModalConfig({
-                controller,
-                onConfirm: ({ values, imageItem, haveLink }) => {
-                    controller.insertCard({
-                        editor,
-                        cardValues: {
-                            alignment: values.alignment,
-                            imageItem,
-                            title: values.title,
-                            description: values.description,
-                            remark: values.remark,
-                            haveLink,
-                            linkText: values.linkText,
-                            linkUrl: values.linkUrl,
-                        },
-                    });
-                    controller.removeCardPlaceholder(editor);
-                },
-            });
-        },
-    };
-}
-
-function CardToolbarIcon(props) {
-    const { controller } = props, rest = tslib.__rest(props, ["controller"]);
-    const { onClick } = useCardTool(controller);
-    return React.createElement(toolbar.ToolbarIcon, Object.assign({}, rest, { onClick: onClick }));
-}
-
-exports.CardToolbarIcon = CardToolbarIcon;
-exports.useCardTool = useCardTool;

package/card/toolbar/index.js

@@ -1,2 +0,0 @@
-export { useCardTool } from './useCardTool.js';
-export { default as CardToolbarIcon } from './CardToolbarIcon.js';

package/card/toolbar/useCardTool.d.ts

@@ -1,4 +0,0 @@
-import { ReactCard } from '@quadrats/react/card';
-export declare function useCardTool(controller: ReactCard): {
-    onClick: () => void;
-};

package/card/toolbar/useCardTool.js

@@ -1,41 +0,0 @@
-import { useEffect } from 'react';
-import { useSlateStatic, useModal } from '@quadrats/react';
-
-function useCardTool(controller) {
-    const editor = useSlateStatic();
-    const { setCardModalConfig, isModalClosed, setIsModalClosed } = useModal();
-    useEffect(() => {
-        if (isModalClosed) {
-            setTimeout(() => {
-                controller.removeCardPlaceholder(editor);
-                setIsModalClosed(false);
-            }, 250);
-        }
-    }, [controller, editor, isModalClosed, setIsModalClosed]);
-    return {
-        onClick: () => {
-            controller.insertCardPlaceholder(editor);
-            setCardModalConfig({
-                controller,
-                onConfirm: ({ values, imageItem, haveLink }) => {
-                    controller.insertCard({
-                        editor,
-                        cardValues: {
-                            alignment: values.alignment,
-                            imageItem,
-                            title: values.title,
-                            description: values.description,
-                            remark: values.remark,
-                            haveLink,
-                            linkText: values.linkText,
-                            linkUrl: values.linkUrl,
-                        },
-                    });
-                    controller.removeCardPlaceholder(editor);
-                },
-            });
-        },
-    };
-}
-
-export { useCardTool };

package/card/typings.d.ts

@@ -1,24 +0,0 @@
-import { Dispatch, SetStateAction } from 'react';
-import { Card, CardElement, CardImageElement, CardContentsElement, CardPlaceholderElement, CardTypeKey, CardImageTypeKey, CardContentsTypeKey } from '@quadrats/common/card';
-import { RenderElementProps, Editor, WithCreateRenderElement, Handlers, ConfirmModalConfig } from '@quadrats/react';
-import { LocaleDefinition } from '@quadrats/locales';
-export interface RenderCardElementProps extends RenderElementProps<CardElement> {
-    controller: Card<Editor>;
-}
-export interface RenderCardImageElementProps extends RenderElementProps<CardImageElement> {
-}
-export interface RenderCardContentsElementProps extends RenderElementProps<CardContentsElement> {
-}
-export interface RenderCardPlaceholderElementProps extends RenderElementProps<CardPlaceholderElement> {
-}
-export type RenderCardPlaceholderElement = (props: RenderCardPlaceholderElementProps) => JSX.Element | null | undefined;
-export type CardRenderElements = Record<CardTypeKey, (props: RenderCardElementProps) => JSX.Element | null | undefined> & Record<CardImageTypeKey, (props: RenderCardImageElementProps) => JSX.Element | null | undefined> & Record<CardContentsTypeKey, (props: RenderCardContentsElementProps) => JSX.Element | null | undefined>;
-export type ReactCardCreateRenderElementOptions = {
-    [K in CardTypeKey | CardImageTypeKey | CardContentsTypeKey]?: CardRenderElements[K];
-};
-export interface ReactCard extends Card<Editor>, WithCreateRenderElement<[ReactCardCreateRenderElementOptions?]> {
-    createHandlers: (setNeedConfirmModal?: Dispatch<SetStateAction<ConfirmModalConfig | null>>, locale?: LocaleDefinition) => Handlers;
-    createRenderPlaceholderElement: (params_0?: {
-        render?: RenderCardPlaceholderElement;
-    }) => (props: RenderElementProps) => JSX.Element | null | undefined;
-}

package/carousel/carousel.css

@@ -1 +0,0 @@
-.qdr-carousel{position:relative;margin:var(--qdr-spacing-14) 0}.qdr-carousel__image-wrapper{flex:0 0 100%;width:100%;position:relative;display:flex;align-items:center;justify-content:center;border-radius:var(--qdr-radius-1)}.qdr-carousel__image-wrapper::after{content:"";position:absolute;inset:0;background-color:rgba(0,0,0,0);transition:background-color var(--qdr-duration-short) var(--qdr-easing-standard)}.qdr-carousel--with-inline-toolbar:hover .qdr-carousel__image-wrapper::after{background-color:var(--qdr-overlay-dark)}.qdr-carousel:hover .qdr-carousel__inline-toolbar{opacity:1;pointer-events:auto}.qdr-carousel-modal__side{display:flex;flex-direction:column;justify-content:flex-start;align-items:center;gap:var(--qdr-spacing-9)}.qdr-carousel-modal__side__hints-wrapper{width:100%}.qdr-carousel-modal__side__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)}.qdr-carousel-modal__side__upload{width:100%}.qdr-carousel-modal__main{display:flex;flex-direction:column;position:relative;background-color:var(--qdr-bg);overflow-y:unset;padding:unset}.qdr-carousel-modal__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)}.qdr-carousel-modal__placeholder{display:flex;align-items:center;justify-content:center;pointer-events:none;height:100%}.qdr-carousel-modal__placeholder__block{display:flex;flex-direction:column;justify-content:flex-start;align-items:center;width:360px;padding-bottom:var(--qdr-spacing-14)}.qdr-carousel-modal__placeholder__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)}.qdr-carousel-modal__placeholder__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)}.qdr-carousel-modal__placeholder__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)}.qdr-carousel-modal__zone{flex:1;align-self:stretch;overflow-y:auto;padding:var(--qdr-spacing-9)}.qdr-carousel-modal__zone__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}.qdr-carousel-modal__zone__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}.qdr-carousel-modal__grid{display:grid;grid-template-columns:repeat(3, 1fr);gap:var(--qdr-spacing-6)}.qdr-carousel-modal__grid--isDragging{opacity:0;pointer-events:none}.qdr-carousel-modal__image-wrapper{display:flex;align-items:center;justify-content:center;position:relative}.qdr-carousel-modal__image-wrapper::after{content:"";position:absolute;inset:0;background-color:rgba(0,0,0,0);transition:background-color var(--qdr-duration-short) var(--qdr-easing-standard)}.qdr-carousel-modal__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)}.qdr-carousel-modal__error-icon{color:var(--qdr-error)}.qdr-carousel-modal__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}.qdr-carousel-modal__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}.qdr-carousel-modal__item:hover{box-shadow:0 0 0 2px var(--qdr-surface),0 0 0 4px var(--qdr-primary-light)}.qdr-carousel-modal__item:hover .qdr-carousel-modal__image-wrapper::after{background-color:var(--qdr-overlay-dark)}.qdr-carousel-modal__item:hover .qdr-carousel-modal__inline-toolbar{opacity:1;pointer-events:auto}.qdr-carousel-modal__item--isDragging{border-style:dashed;border-color:var(--qdr-primary);box-shadow:var(--qdr-shadow-xl);cursor:grabbing}.qdr-carousel-modal__item--isDragging>*{display:none}.qdr-carousel-modal__item--isOver{box-shadow:0 0 0 2px var(--qdr-surface),0 0 0 4px var(--qdr-primary-light)}.qdr-carousel-modal__image{width:100%}.qdr-carousel-modal__input-wrapper{border-top:1px solid var(--qdr-divider);background-color:var(--qdr-surface);padding:var(--qdr-spacing-6)}.qdr-carousel__placeholder{margin:var(--qdr-spacing-14) 0}.qdr-carousel__placeholder__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)}.qdr-carousel__placeholder__icon{color:var(--qdr-action-inactive)}.qdr-carousel__dots{display:flex;align-items:center;justify-content:center;margin-top:var(--qdr-spacing-4)}.qdr-carousel__dot{width:5px;height:5px;border-radius:50%;background-color:var(--qdr-action-disabled-bg);margin:2.5px}.qdr-carousel__dot:hover{cursor:pointer}.qdr-carousel__dot--active{background-color:var(--qdr-primary)}.qdr-carousel__images-wrapper{display:flex;flex-direction:column}.qdr-carousel__slider-wrapper{width:100%;overflow-x:hidden;border-radius:var(--qdr-radius-1)}.qdr-carousel__slider-wrapper:hover{cursor:grab}.qdr-carousel__slider-wrapper--isDragging:hover{cursor:grabbing}.qdr-carousel__slider{width:100%;display:flex;align-items:flex-start;justify-content:flex-start;transition:transform var(--qdr-duration-short) var(--qdr-easing-standard)}.qdr-carousel__slider--isDragging{transition:none}.qdr-carousel__image{width:100%;border-radius:var(--qdr-radius-1)}.qdr-carousel__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

@@ -1,15 +0,0 @@
-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

@@ -1,66 +0,0 @@
-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", iconGroups: [
-                    {
-                        icons: [
-                            {
-                                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

@@ -1,9 +0,0 @@
-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

@@ -1,12 +0,0 @@
-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

@@ -1,9 +0,0 @@
-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

@@ -1,52 +0,0 @@
-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

@@ -1,4 +0,0 @@
-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

@@ -1,17 +0,0 @@
-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

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

package/carousel/contexts/CarouselContext.js

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

package/carousel/createReactCarousel.d.ts

@@ -1,4 +0,0 @@
-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

@@ -1,82 +0,0 @@
-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

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

package/carousel/defaultRenderCarouselElements.js

@@ -1,14 +0,0 @@
-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

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

package/carousel/hooks/useCarousel.js

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