@quadrats/react 1.1.8 → 1.1.10

package/carousel/src/components/Carousel.tsx

@@ -1,102 +0,0 @@
-import React, { useState } from 'react';
-import { Transforms } from '@quadrats/core';
-import { RenderElementProps, useSlateStatic, ReactEditor, useModal } from '@quadrats/react';
-import { InlineToolbar } from '@quadrats/react/toolbar';
-import { Edit, Trash } from '@quadrats/icons';
-import { CarouselContext } from '../contexts/CarouselContext';
-import { RenderCarouselElementProps } from '../typings';
-
-export function Carousel({
-  attributes,
-  children,
-  element,
-  controller,
-}: {
-  attributes?: RenderElementProps['attributes'];
-  children: RenderElementProps['children'];
-  element: RenderCarouselElementProps['element'];
-  controller: RenderCarouselElementProps['controller'];
-}) {
-  const { setCarouselModalConfig, setConfirmModalConfig } = useModal();
-  const [activeIndex, setActiveIndex] = useState<number>(0);
-  const editor = useSlateStatic();
-  const path = ReactEditor.findPath(editor, element);
-
-  return (
-    <CarouselContext.Provider
-      value={{
-        activeIndex,
-        setActiveIndex,
-      }}
-    >
-      <div {...attributes} contentEditable={false} className="qdr-carousel qdr-carousel--with-inline-toolbar">
-        <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}
-      </div>
-    </CarouselContext.Provider>
-  );
-}
-
-export function CarouselWithoutToolbar({
-  attributes,
-  children,
-}: {
-  attributes?: RenderElementProps['attributes'];
-  children: RenderElementProps['children'];
-  element: RenderCarouselElementProps['element'];
-}) {
-  const [activeIndex, setActiveIndex] = useState<number>(0);
-
-  return (
-    <CarouselContext.Provider
-      value={{
-        activeIndex,
-        setActiveIndex,
-      }}
-    >
-      <div {...attributes} contentEditable={false} className="qdr-carousel">
-        {children}
-      </div>
-    </CarouselContext.Provider>
-  );
-}
-
-export default Carousel;

package/carousel/src/components/CarouselCaption.tsx

@@ -1,27 +0,0 @@
-import React, { useMemo } from 'react';
-import { RenderElementProps } from '@quadrats/react';
-import { useCarousel } from '../hooks/useCarousel';
-import { RenderCarouselCaptionElementProps } from '../typings';
-
-export function CarouselCaption({
-  attributes,
-  element,
-}: {
-  attributes?: RenderElementProps['attributes'];
-  children: RenderElementProps['children'];
-  element: RenderCarouselCaptionElementProps['element'];
-}) {
-  const { activeIndex } = useCarousel();
-
-  const currentCaption = useMemo(() => element.captions[activeIndex], [activeIndex, element.captions]);
-
-  if (!currentCaption) return null;
-
-  return (
-    <div {...attributes} contentEditable={false} className="qdr-carousel__caption">
-      {currentCaption}
-    </div>
-  );
-}
-
-export default CarouselCaption;

package/carousel/src/components/CarouselImages.tsx

@@ -1,97 +0,0 @@
-import React, { useCallback, useMemo, useRef, useState } from 'react';
-import clsx from 'clsx';
-import { RenderElementProps } from '@quadrats/react';
-import { useCarousel } from '../hooks/useCarousel';
-import { RenderCarouselImagesElementProps } from '../typings';
-
-const deltaLimit = 100;
-
-export function CarouselImages({
-  attributes,
-  element,
-}: {
-  attributes?: RenderElementProps['attributes'];
-  children: RenderElementProps['children'];
-  element: RenderCarouselImagesElementProps['element'];
-}) {
-  const imageRef = useRef<HTMLImageElement | null>(null);
-  const { activeIndex, setActiveIndex } = useCarousel();
-  const [isDragging, setIsDragging] = useState<boolean>(false);
-  const [startX, setStartX] = useState<number>(0);
-  const [delta, setDelta] = useState(0);
-
-  const images = useMemo(() => element.images, [element.images]);
-
-  const onMouseUp = useCallback(() => {
-    setIsDragging(false);
-
-    if (delta < -deltaLimit && 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 (
-    <div {...attributes} contentEditable={false} className="qdr-carousel__images-wrapper">
-      <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}
-      >
-        <div
-          className={clsx('qdr-carousel__slider', {
-            'qdr-carousel__slider--isDragging': isDragging,
-          })}
-          style={{
-            transform: `translateX(${delta - activeIndex * (imageRef.current?.clientWidth ?? 0)}px)`,
-          }}
-        >
-          {images.map((image) => (
-            <div key={image} className="qdr-carousel__image-wrapper">
-              <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',
-                }}
-              />
-            </div>
-          ))}
-        </div>
-      </div>
-      <div className="qdr-carousel__dots">
-        {images.map((_, index) => (
-          <div
-            key={index}
-            onClick={() => {
-              setActiveIndex(index);
-            }}
-            className={clsx('qdr-carousel__dot', {
-              'qdr-carousel__dot--active': index === activeIndex,
-            })}
-          />
-        ))}
-      </div>
-    </div>
-  );
-}
-
-export default CarouselImages;

package/carousel/src/components/CarouselPlaceholder.tsx

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

package/carousel/src/contexts/CarouselContext.ts

@@ -1,4 +0,0 @@
-import { createContext } from 'react';
-import { CarouselContextType } from '../typings';
-
-export const CarouselContext = createContext<CarouselContextType>({ activeIndex: 0, setActiveIndex: () => {} });

package/carousel/src/createReactCarousel.ts

@@ -1,104 +0,0 @@
-import { createCarousel, CreateCarouselOptions, CAROUSEL_PLACEHOLDER_TYPE } from '@quadrats/common/carousel';
-import { createRenderElement, createRenderElements } from '@quadrats/react';
-import { removePreviousElement } from '@quadrats/react/utils';
-import {
-  defaultRenderCarouselElements,
-  defaultRenderCarouselPlaceholderElement,
-} from './defaultRenderCarouselElements';
-import {
-  ReactCarousel,
-  RenderCarouselElementProps,
-  RenderCarouselImagesElementProps,
-  RenderCarouselCaptionElementProps,
-} from './typings';
-
-export type CreateReactCarouselOptions = CreateCarouselOptions;
-
-export function createReactCarousel(options: CreateReactCarouselOptions): ReactCarousel {
-  const core = createCarousel(options);
-
-  const { types, confirmModal } = core;
-
-  return {
-    ...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 as RenderCarouselElementProps;
-
-            return renderCarousel({
-              attributes,
-              element,
-              children,
-              controller: core,
-            });
-          },
-        },
-        {
-          type: types.carousel_images,
-          render: (props) => {
-            const { attributes, children, element } = props as RenderCarouselImagesElementProps;
-
-            return renderCarouselImages({
-              attributes,
-              element,
-              children,
-            });
-          },
-        },
-        {
-          type: types.carousel_caption,
-          render: (props) => {
-            const { attributes, children, element } = props as RenderCarouselCaptionElementProps;
-
-            return renderCarouselCaption({
-              attributes,
-              element,
-              children,
-            });
-          },
-        },
-      ]);
-    },
-    createRenderPlaceholderElement: ({ render = defaultRenderCarouselPlaceholderElement } = {}) =>
-      createRenderElement({
-        type: CAROUSEL_PLACEHOLDER_TYPE,
-        render,
-      }),
-  };
-}

package/carousel/src/defaultRenderCarouselElements.tsx

@@ -1,16 +0,0 @@
-import React from 'react';
-import Carousel from './components/Carousel';
-import CarouselImages from './components/CarouselImages';
-import CarouselCaption from './components/CarouselCaption';
-import CarouselPlaceholder from './components/CarouselPlaceholder';
-import { CarouselRenderElements, RenderCarouselPlaceholderElement } from './typings';
-
-export const defaultRenderCarouselElements: CarouselRenderElements = {
-  carousel: (props) => <Carousel {...props} />,
-  carousel_images: (props) => <CarouselImages {...props} />,
-  carousel_caption: (props) => <CarouselCaption {...props} />,
-};
-
-export const defaultRenderCarouselPlaceholderElement: RenderCarouselPlaceholderElement = (props) => (
-  <CarouselPlaceholder {...props} />
-);

package/carousel/src/hooks/useCarousel.ts

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

package/carousel/src/typings.ts

@@ -1,55 +0,0 @@
-import { Dispatch, SetStateAction } from 'react';
-import {
-  Carousel,
-  CarouselElement,
-  CarouselImagesElement,
-  CarouselCaptionElement,
-  CarouselPlaceholderElement,
-  CarouselTypeKey,
-  CarouselImagesTypeKey,
-  CarouselCaptionTypeKey,
-} from '@quadrats/common/carousel';
-import { RenderElementProps, Editor, WithCreateRenderElement, Handlers, ConfirmModalConfig } from '@quadrats/react';
-import { LocaleDefinition } from '@quadrats/locales';
-
-export type CarouselContextType = {
-  activeIndex: number;
-  setActiveIndex: Dispatch<SetStateAction<number>>;
-};
-
-export interface RenderCarouselElementProps extends RenderElementProps<CarouselElement> {
-  controller: Carousel<Editor>;
-}
-
-export interface RenderCarouselImagesElementProps extends RenderElementProps<CarouselImagesElement> {}
-
-export type RenderCarouselCaptionElementProps = RenderElementProps<CarouselCaptionElement>;
-
-export interface RenderCarouselPlaceholderElementProps extends RenderElementProps<CarouselPlaceholderElement> {}
-
-export type RenderCarouselPlaceholderElement = (
-  props: RenderCarouselPlaceholderElementProps,
-) => JSX.Element | null | undefined;
-
-export type CarouselRenderElements = Record<
-  CarouselTypeKey,
-  (props: RenderCarouselElementProps) => JSX.Element | null | undefined
-> &
-  Record<CarouselImagesTypeKey, (props: RenderCarouselImagesElementProps) => JSX.Element | null | undefined> &
-  Record<CarouselCaptionTypeKey, (props: RenderCarouselCaptionElementProps) => JSX.Element | null | undefined>;
-
-export type ReactCarouselCreateRenderElementOptions = {
-  [K in CarouselTypeKey | CarouselImagesTypeKey | CarouselCaptionTypeKey]?: CarouselRenderElements[K];
-};
-
-export interface ReactCarousel
-  extends Carousel<Editor>,
-    WithCreateRenderElement<[ReactCarouselCreateRenderElementOptions?]> {
-  createHandlers: (
-    setNeedConfirmModal?: Dispatch<SetStateAction<ConfirmModalConfig | null>>,
-    locale?: LocaleDefinition,
-  ) => Handlers;
-  createRenderPlaceholderElement: (params_0?: {
-    render?: RenderCarouselPlaceholderElement;
-  }) => (props: RenderElementProps) => JSX.Element | null | undefined;
-}

package/carousel/toolbar/src/CarouselToolbarIcon.tsx

@@ -1,17 +0,0 @@
-import React from 'react';
-import { ToolbarIcon, ToolbarIconProps } from '@quadrats/react/toolbar';
-import { ReactCarousel } from '@quadrats/react/carousel';
-import { useCarouselTool } from './useCarouselTool';
-
-export interface CarouselToolbarIconProps extends Omit<ToolbarIconProps, 'active' | 'onClick'> {
-  controller: ReactCarousel;
-}
-
-function CarouselToolbarIcon(props: CarouselToolbarIconProps) {
-  const { controller, ...rest } = props;
-  const { onClick } = useCarouselTool(controller);
-
-  return <ToolbarIcon {...rest} onClick={onClick} />;
-}
-
-export default CarouselToolbarIcon;

package/carousel/toolbar/src/useCarouselTool.tsx

@@ -1,34 +0,0 @@
-import { useEffect } from 'react';
-import { useSlateStatic, useModal } from '@quadrats/react';
-import { ReactCarousel } from '@quadrats/react/carousel';
-
-export function useCarouselTool(controller: ReactCarousel) {
-  const editor = useSlateStatic();
-  const { setCarouselModalConfig, isModalClosed, setIsModalClosed } = useModal();
-
-  useEffect(() => {
-    if (isModalClosed) {
-      setTimeout(() => {
-        controller.removeCarouselPlaceholder(editor);
-        setIsModalClosed(false);
-      }, 250);
-    }
-  }, [controller, editor, isModalClosed, setIsModalClosed]);
-
-  return {
-    onClick: () => {
-      controller.insertCarouselPlaceholder(editor);
-      setCarouselModalConfig({
-        controller,
-        onConfirm: (items) => {
-          controller.insertCarousel({
-            editor,
-            items,
-          });
-
-          controller.removeCarouselPlaceholder(editor);
-        },
-      });
-    },
-  };
-}

package/carousel/toolbar/tsconfig.build.json

@@ -1,5 +0,0 @@
-{
-  "extends": "../../../../tsconfig.base.json",
-  "exclude": ["**/*.spec.*"],
-  "include": ["./src"]
-}

package/carousel/tsconfig.build.json

@@ -1,5 +0,0 @@
-{
-  "extends": "../../../tsconfig.base.json",
-  "exclude": ["**/*.spec.*"],
-  "include": ["./src"]
-}

package/components/src/BaseField/index.tsx

@@ -1,35 +0,0 @@
-import React, { ReactNode } from 'react';
-import { Error } from '@quadrats/icons';
-import clsx from 'clsx';
-import Icon from '../Icon';
-
-export interface BaseFieldProps {
-  label?: string;
-  className?: string;
-  width?: number;
-  children: ReactNode;
-  required?: boolean;
-  errorMessage?: string;
-}
-
-const BaseField = ({ label, className, width, children, required = false, errorMessage }: BaseFieldProps) => {
-  return (
-    <div className={clsx('qdr-base-field', className)} style={{ width }}>
-      {label && (
-        <p className="qdr-base-field__label">
-          {label}
-          {required && <span className="qdr-base-field__required-mark">*</span>}
-        </p>
-      )}
-      {children}
-      {errorMessage && (
-        <div className="qdr-base-field__error-message">
-          <Icon icon={Error} width={16} height={16} />
-          <span>{errorMessage}</span>
-        </div>
-      )}
-    </div>
-  );
-};
-
-export default BaseField;

package/components/src/Button/index.tsx

@@ -1,48 +0,0 @@
-import React, { ReactNode, MouseEventHandler } from 'react';
-import clsx from 'clsx';
-
-export interface ButtonProps {
-  onClick?: MouseEventHandler<HTMLButtonElement>;
-  className?: string;
-  type?: 'submit' | 'reset' | 'button';
-  variant?: 'primary' | 'secondary' | 'outlined' | 'dashed' | 'tertiary';
-  size?: 'small' | 'medium' | 'large';
-  prefix?: ReactNode;
-  danger?: boolean;
-  disabled?: boolean;
-  children: ReactNode;
-}
-
-const Button = ({
-  onClick,
-  className,
-  type = 'button',
-  variant = 'primary',
-  size = 'small',
-  prefix,
-  danger = false,
-  disabled,
-  children,
-}: ButtonProps) => {
-  return (
-    <button
-      className={clsx(
-        'qdr-button',
-        `qdr-button--${variant}`,
-        `qdr-button--${size}`,
-        {
-          'qdr-button--danger': danger,
-        },
-        className,
-      )}
-      type={type}
-      disabled={disabled}
-      onClick={onClick}
-    >
-      {prefix}
-      {children}
-    </button>
-  );
-};
-
-export default Button;

package/components/src/Hint/index.tsx

@@ -1,61 +0,0 @@
-import React, { CSSProperties, useMemo } from 'react';
-import clsx from 'clsx';
-import { Info, Success, Warning, Error } from '@quadrats/icons';
-import Icon from '../Icon';
-
-export interface HintProps {
-  children: string;
-  variant?: 'info' | 'success' | 'warning' | 'error';
-}
-
-const Hint = ({ children, variant = 'info' }: HintProps) => {
-  const icon = useMemo(() => {
-    switch (variant) {
-      case 'info':
-        return Info;
-
-      case 'success':
-        return Success;
-
-      case 'warning':
-        return Warning;
-
-      case 'error':
-        return Error;
-
-      default:
-        return Info;
-    }
-  }, [variant]);
-
-  return (
-    <div className="qdr-hint">
-      <div className={clsx('qdr-hint__icon', `qdr-hint__icon--${variant}`)}>
-        <Icon icon={icon} width={16} height={16} />
-      </div>
-      <div className={clsx('qdr-hint__children', `qdr-hint__children--${variant}`)}>{children}</div>
-    </div>
-  );
-};
-
-export interface HintsProps {
-  hints: {
-    text: string;
-    variant?: 'info' | 'success' | 'warning' | 'error';
-  }[];
-  style?: CSSProperties;
-}
-
-export const Hints = ({ hints, style }: HintsProps) => {
-  return (
-    <div className="qdr-hints" style={style}>
-      {hints.map((hint, index) => (
-        <Hint key={index} variant={hint.variant}>
-          {hint.text}
-        </Hint>
-      ))}
-    </div>
-  );
-};
-
-export default Hint;