@canlooks/can-ui 0.0.1

package/dist/esm/components/typography/typography.style.js

@@ -0,0 +1,159 @@
+import { css, keyframes } from '@emotion/react';
+import { defineClasses, useColor, useCss } from '../../utils';
+import Color from 'color';
+export const classes = defineClasses('typography', [
+    'text',
+    'ellipsis',
+    'expand',
+    'action',
+    'copied',
+    'editWrap',
+    'editComponent'
+]);
+export function useStyle({ color }) {
+    const colorValue = useColor(color);
+    return useCss(({ mode, colors, gray, borderRadius, easing }) => {
+        const lighter = Color(colorValue).lighten(.1).hex();
+        return css `
+            color: ${colorValue};
+
+            &[data-component=p] {
+                margin: 1em 0;
+            }
+
+            &[data-component=h1],
+            &[data-component=h2],
+            &[data-component=h3],
+            &[data-component=h4],
+            &[data-component=h5],
+            &[data-component=h6] {
+                margin-top: 1em;
+                margin-bottom: 0.5em;
+            }
+            
+            &[data-component=h1] {
+                font-size: ${38 / 14}em;
+            }
+            
+            &[data-component=h2] {
+                font-size: ${30 / 14}em;
+            }
+            
+            &[data-component=h3] {
+                font-size: ${24 / 14}em;
+            }
+            
+            &[data-component=h4] {
+                font-size: ${20 / 14}em;
+            }
+            
+            &[data-component=h5] {
+                font-size: ${17 / 14}em;
+            }
+            
+            &[data-component=h6] {
+                font-size: 1em;
+            }
+
+            &[data-component=mark] {
+                background-color: ${Color(colors.warning).lighten(.2).hex()};
+            }
+
+            &[data-component=kbd] {
+                background-color: ${gray(mode === 'light' ? .06 : .22)};
+                font-size: ${13 / 14}em;
+                padding: 4px 6px;
+                border-radius: ${borderRadius / 2}px;
+                box-shadow: ${mode === 'light'
+            ? '0 1px 2px rgba(0, 0, 0, .4), -1px 2px rgba(255, 255, 255, .4)'
+            : '-1px 2px rgba(255, 255, 255, .2), 0 1px 2px rgba(0, 0, 0, .6)'};
+                margin: 0 3px;
+            }
+
+            &[data-component=code] {
+                background-color: ${gray(.08)};
+                border: 1px solid ${gray(.3)};
+                font-size: ${13 / 14}em;
+                padding: 3px 6px;
+                border-radius: .15em;
+                margin: 0 3px;
+            }
+
+            &[data-component=a] {
+                color: ${colors.primary};
+                transition: color .2s ${easing.easeOut};
+
+                &:hover {
+                    color: ${lighter};
+                }
+
+                &:active {
+                    transition: color 0s;
+                    color: ${lighter};
+                }
+            }
+
+            &:not([data-ellipsis-rows="0"]) {
+                display: flex;
+                max-width: 100%;
+                align-items: flex-end;
+
+                &[data-component=mark],
+                &[data-component=kbd],
+                &[data-component=code],
+                &[data-component=a] {
+                    display: inline-flex;
+                }
+
+                .${classes.text} {
+                    overflow: hidden;
+                }
+
+                &[data-ellipsis-rows="1"] {
+                    .${classes.text} {
+                        white-space: nowrap;
+                        text-overflow: ellipsis;
+                    }
+                }
+
+                &:not([data-ellipsis-rows="1"]) {
+                    .${classes.text} {
+                        display: -webkit-box;
+                        -webkit-box-orient: vertical;
+                    }
+                }
+            }
+
+            .${classes.action},
+            .${classes.copied} {
+                height: 1.5em;
+                vertical-align: text-bottom;
+                margin-left: .5em;
+                white-space: nowrap;
+            }
+
+            .${classes.copied} {
+                align-items: center;
+                color: ${colors.success};
+                animation: ${copyCheckAnim} .2s ${easing.swing};
+            }
+        `;
+    }, [colorValue]);
+}
+const copyCheckAnim = keyframes `
+    0% {
+        transform: scale(0);
+    }
+
+    100% {
+        transform: scale(1);
+    }
+`;
+export const editStyle = css `
+    display: flex;
+    align-items: center;
+
+    .${classes.editComponent} {
+        flex: 1;
+    }
+`;

package/dist/esm/components/upload/dropArea.d.ts

@@ -0,0 +1,7 @@
+import { ReactNode } from 'react';
+import { DIVProps } from '../../../types';
+export interface DropAreaProps extends Omit<DIVProps, 'onDrop'> {
+    description?: ReactNode;
+    onDrop?(files: FileList): void;
+}
+export declare const DropArea: import("react").MemoExoticComponent<import("react").ForwardRefExoticComponent<Omit<DropAreaProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>>;

package/dist/esm/components/upload/dropArea.js

@@ -0,0 +1,33 @@
+import { jsx as _jsx, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
+import { forwardRef, memo, useEffect, useState } from 'react';
+import { classes, style } from './dropArea.style';
+import { classnames } from '../../utils';
+import { InboxOutlined } from '@ant-design/icons';
+export const DropArea = memo(forwardRef(({ description = '将文件拖拽到这里', onDrop, ...props }, ref) => {
+    const [draggingOver, setDraggingOver] = useState(false);
+    useEffect(() => {
+        const fn = (e) => e.preventDefault();
+        document.body.addEventListener('dragenter', fn);
+        document.body.addEventListener('dragover', fn);
+        document.body.addEventListener('drop', fn);
+        return () => {
+            document.body.removeEventListener('dragenter', fn);
+            document.body.removeEventListener('dragover', fn);
+            document.body.removeEventListener('drop', fn);
+        };
+    }, []);
+    const dropHandler = (e) => {
+        e.preventDefault();
+        e.stopPropagation();
+        const { files } = e.dataTransfer;
+        files.length && onDrop?.(files);
+        setDraggingOver(false);
+    };
+    return (_jsxs("div", { ...props, ref: ref, css: style, className: classnames(classes.root, props.className), "data-over": draggingOver, onDragEnter: e => {
+            props.onDragEnter?.(e);
+            setDraggingOver(true);
+        }, onDragLeave: e => {
+            props.onDragLeave?.(e);
+            setDraggingOver(false);
+        }, onDrop: dropHandler, children: [_jsx(InboxOutlined, { className: classes.icon }), _jsx("div", { className: classes.description, children: description })] }));
+}));

package/dist/esm/components/upload/dropArea.style.d.ts

@@ -0,0 +1,7 @@
+export declare const classes: {
+    icon: string;
+    description: string;
+} & {
+    root: string;
+};
+export declare const style: () => import("@emotion/react").SerializedStyles;

package/dist/esm/components/upload/dropArea.style.js

@@ -0,0 +1,31 @@
+import { css } from '@emotion/react';
+import { defineClasses, defineCss } from '../../utils';
+export const classes = defineClasses('upload-drop-area', [
+    'icon',
+    'description'
+]);
+export const style = defineCss(({ spacing, gray, divider, borderRadius, text, colors }) => css `
+    height: 100px;
+    display: flex;
+    gap: ${spacing[1]}px;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    border: 1px dashed ${divider};
+    background-color: ${gray(.1)};
+    border-radius: ${borderRadius}px;
+    color: ${text.disabled};
+
+    .${classes.icon}, .${classes.description} {
+        pointer-events: none;
+    }
+
+    .${classes.icon} {
+        font-size: ${30 / 14}em;
+    }
+
+    &[data-over=true] {
+        border-color: ${colors.primary};
+        color: ${colors.primary};
+    }
+`);

package/dist/esm/components/upload/fileItem.d.ts

@@ -0,0 +1,5 @@
+import { ReactElement, Ref } from 'react';
+import { ItemProps, ItemRef } from './itemStatus';
+export declare const FileItem: <R, A extends any[]>(props: ItemProps<R, A> & {
+    ref?: Ref<ItemRef<R, A>>;
+}) => ReactElement;

package/dist/esm/components/upload/fileItem.js

@@ -0,0 +1,21 @@
+import { jsx as _jsx, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
+import { forwardRef, memo } from 'react';
+import { classes } from './upload.style';
+import { CheckCircleFilled, CloseCircleFilled, CloseOutlined, PaperClipOutlined } from '@ant-design/icons';
+import { LoadingIndicator } from '../loadingIndicator';
+import { Button } from '../button';
+import { Progress } from '../progress';
+import { useTheme } from '../app';
+import { useItemStatus } from './itemStatus';
+export const FileItem = memo(forwardRef((props, ref) => {
+    const { status, progress } = useItemStatus(props, ref);
+    const { colors } = useTheme();
+    const statusToIcon = {
+        'default': _jsx(PaperClipOutlined, {}),
+        uploading: _jsx(LoadingIndicator, {}),
+        success: _jsx(CheckCircleFilled, { style: { color: colors.success } }),
+        error: _jsx(CloseCircleFilled, { style: { color: colors.error } })
+    };
+    return (_jsxs("div", { className: classes.file, "data-status": status, children: [_jsx("div", { className: classes.icon, children: statusToIcon[status] }), _jsxs("div", { className: classes.info, children: [_jsx("div", { className: classes.name, children: props.file.name }), status !== 'default' &&
+                        _jsx(Progress, { className: classes.progress, barWidth: 2, showInfo: false, value: progress, status: status === 'uploading' ? 'processing' : status })] }), _jsx("div", { className: classes.control, children: _jsx(Button, { variant: "plain", color: "error", onClick: props.onRemove, children: _jsx(CloseOutlined, {}) }) })] }));
+}));

package/dist/esm/components/upload/imageItem.d.ts

@@ -0,0 +1,5 @@
+import { ReactElement, Ref } from 'react';
+import { ItemProps, ItemRef } from './itemStatus';
+export declare const ImageItem: <R, A extends any[]>(props: ItemProps<R, A> & {
+    ref?: Ref<ItemRef<R, A>>;
+}) => ReactElement;

package/dist/esm/components/upload/imageItem.js

@@ -0,0 +1,21 @@
+import { jsx as _jsx } from "@emotion/react/jsx-runtime";
+import { forwardRef, memo, useState } from 'react';
+import { useItemStatus } from './itemStatus';
+import { classes } from './upload.style';
+import { Image } from '../image';
+import { Button } from '../button';
+import { DeleteOutlined, EyeOutlined } from '@ant-design/icons';
+import { Progress } from '../progress';
+import { classnames } from '../../utils';
+export const ImageItem = memo(forwardRef((props, ref) => {
+    const [previewOpen, setPreviewOpen] = useState(false);
+    const { status, progress } = useItemStatus(props, ref);
+    return (_jsx("div", { className: classes.imageWrap, children: _jsx(Image, { className: classes.image, src: props.file.url, previewProps: {
+                open: previewOpen,
+                onOpenChange: setPreviewOpen
+            }, actions: [
+                _jsx(Button, { size: "small", variant: "text", shape: "circular", color: "text", onClick: () => setPreviewOpen(true), children: _jsx(EyeOutlined, {}) }, "preview"),
+                _jsx(Button, { size: "small", variant: "text", shape: "circular", color: "error", onClick: props.onRemove, children: _jsx(DeleteOutlined, {}) }, "delete")
+            ], children: status !== 'default' &&
+                _jsx("div", { className: classnames(classes.progress), children: _jsx(Progress, { variant: "circular", showInfo: status !== 'uploading', value: progress, status: status === 'uploading' ? 'processing' : status }) }) }) }));
+}));

package/dist/esm/components/upload/index.d.ts

@@ -0,0 +1,2 @@
+export * from './dropArea';
+export * from './upload';

package/dist/esm/components/upload/index.js

@@ -0,0 +1,2 @@
+export * from './dropArea';
+export * from './upload';

package/dist/esm/components/upload/itemStatus.d.ts

@@ -0,0 +1,15 @@
+import { Dispatch, Ref, SetStateAction } from 'react';
+import { UploadSharedProps, UploadFile, UploadStatus } from './upload';
+export type ItemRef<R, A extends any[]> = {
+    upload(...args: A): Promise<R>;
+    setStatus: Dispatch<SetStateAction<UploadStatus>>;
+    setProgress: Dispatch<SetStateAction<number>>;
+};
+export interface ItemProps<R, A extends any[]> extends UploadSharedProps<R, A> {
+    file: UploadFile<R, A>;
+    onRemove(): void;
+}
+export declare function useItemStatus<R, A extends any[]>(props: ItemProps<R, A>, ref: Ref<ItemRef<R, A>>): {
+    status: "success" | "error" | "default" | "uploading";
+    progress: number;
+};

package/dist/esm/components/upload/itemStatus.js

@@ -0,0 +1,26 @@
+import { useImperativeHandle, useState } from 'react';
+export function useItemStatus(props, ref) {
+    if (props.type === 'image') {
+        props.file.url ||= URL.createObjectURL(props.file);
+    }
+    const upload = props.file.upload = async (...args) => {
+        try {
+            setStatus('uploading');
+            setProgress(0);
+            const ret = await props.onUpload([props.file], setProgress, ...args);
+            setStatus('success');
+            setProgress(100);
+            return ret;
+        }
+        catch (e) {
+            setStatus('error');
+            throw e;
+        }
+    };
+    const [status, setStatus] = useState(props.file.status || 'default');
+    props.file.status = status;
+    const [progress, setProgress] = useState(0);
+    props.file.progress = progress;
+    useImperativeHandle(ref, () => ({ upload, setStatus, setProgress }));
+    return { status, progress };
+}

package/dist/esm/components/upload/upload.d.ts

@@ -0,0 +1,46 @@
+import { Dispatch, ReactElement, ReactNode, Ref, SetStateAction } from 'react';
+import { DIVProps } from '../../../types';
+import { ButtonProps } from '../button';
+import { DropArea } from './dropArea';
+export type UploadStatus = 'default' | 'uploading' | 'success' | 'error';
+export interface UploadFile<R, A extends any[]> extends File {
+    id: string;
+    progress?: number;
+    status?: UploadStatus;
+    url?: string;
+    upload?(...args: A): Promise<R>;
+}
+export interface UploadSharedProps<R, A extends any[]> {
+    type?: 'file' | 'image';
+    onUpload(files: UploadFile<R, A>[], setProgress: Dispatch<SetStateAction<number>>, ...args: A): Promise<R>;
+}
+export interface UploadProps<R, A extends any[]> extends UploadSharedProps<R, A>, Omit<DIVProps, 'defaultValue' | 'onChange'> {
+    inputProps?: JSX.IntrinsicElements['input'];
+    inputRef?: Ref<HTMLInputElement>;
+    accept?: string;
+    max?: number;
+    /**
+     * 是否显示"选择文件"按钮
+     * {@link type}为"file"生效
+     * @default true
+     */
+    showButton?: boolean;
+    buttonProps?: ButtonProps;
+    buttonText?: ReactNode;
+    /** {@link type}为"image"生效 */
+    variant?: 'square' | 'circular';
+    size?: number;
+    /** 是否支持“将文件拖拽到此处” */
+    droppable?: boolean;
+    sortable?: boolean;
+    defaultValue?: UploadFile<R, A>[];
+    value?: UploadFile<R, A>[];
+    onChange?(value: UploadFile<R, A>[]): void;
+}
+export interface UploadRef<R = any, A extends any[] = any[]> extends HTMLDivElement {
+    upload(...args: A): Promise<R>;
+}
+export declare const Upload: {
+    <R, A extends any[]>(props: UploadProps<R, A>): ReactElement;
+    DropArea: typeof DropArea;
+};

package/dist/esm/components/upload/upload.js

@@ -0,0 +1,98 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
+import { forwardRef, memo, useImperativeHandle, useRef } from 'react';
+import { classes, style } from './upload.style';
+import { classnames, cloneRef, getShortID, onDndDragEnd, useControlled, useDndSensors } from '../../utils';
+import { Button } from '../button';
+import { PlusOutlined, UploadOutlined } from '@ant-design/icons';
+import { FileItem } from './fileItem';
+import { TransitionGroup } from 'react-transition-group';
+import { Collapse, Grow } from '../transitionBase';
+import { ImageItem } from './imageItem';
+import { DndContext } from '@dnd-kit/core';
+import { SortableContext } from '@dnd-kit/sortable';
+import { SortableItem } from '../sortableItem';
+import { DropArea } from './dropArea';
+const markFileId = (files) => {
+    if (files) {
+        for (const file of files) {
+            file.id ||= getShortID();
+        }
+    }
+};
+export const Upload = memo(forwardRef(({ inputProps, inputRef, type = 'file', accept = type === 'image' ? 'image/*' : void 0, max = Infinity, showButton = true, buttonProps, buttonText = '选择文件', variant = 'square', sortable, droppable, defaultValue = [], value, onChange, onUpload, ...props }, ref) => {
+    const wrapperRef = useRef(null);
+    const itemRefs = useRef(new Map());
+    useImperativeHandle(ref, () => {
+        wrapperRef.current.upload = async (...args) => {
+            for (const [, itemRef] of itemRefs.current) {
+                itemRef?.setStatus('uploading');
+                itemRef?.setProgress(0);
+            }
+            try {
+                const ret = await onUpload(innerValue.current, progress => {
+                    for (const [, itemRef] of itemRefs.current) {
+                        itemRef?.setProgress(progress);
+                    }
+                }, ...args);
+                for (const [, itemRef] of itemRefs.current) {
+                    itemRef?.setStatus('success');
+                    itemRef?.setProgress(100);
+                }
+                return ret;
+            }
+            catch (e) {
+                for (const [, itemRef] of itemRefs.current) {
+                    itemRef?.setStatus('error');
+                }
+                throw e;
+            }
+        };
+        return wrapperRef.current;
+    });
+    const [innerValue, setInnerValue] = useControlled(defaultValue, value, value => {
+        markFileId(value);
+        onChange?.(value);
+    });
+    markFileId(innerValue.current);
+    const innerInputRef = useRef(null);
+    const buttonClick = (e) => {
+        buttonProps?.onClick?.(e);
+        innerInputRef.current.click();
+    };
+    const inputChangeHandler = (e) => {
+        inputProps?.onChange?.(e);
+        changeFn(e.target.files);
+        // 触发onChange后需要清空输入框的值，避免下次上传相同文件时不触发onChange
+        e.target.value = '';
+    };
+    const changeFn = (files) => {
+        if (!files?.length) {
+            return;
+        }
+        if (max === 1) {
+            setInnerValue([files[0]]);
+        }
+        else {
+            const remain = max - innerValue.current.length;
+            remain > 0 && setInnerValue(o => {
+                const newValue = [
+                    ...o,
+                    ...[...files].slice(0, remain)
+                ];
+                return type === 'file' ? newValue : newValue.reverse();
+            });
+        }
+    };
+    const removeHandler = (id) => {
+        setInnerValue(o => o.filter(f => f.id !== id));
+    };
+    const dragEndHandler = (e) => {
+        const newValue = onDndDragEnd(e, innerValue.current);
+        newValue && setInnerValue(newValue);
+    };
+    return (_jsxs("div", { ...props, ref: wrapperRef, css: style, className: classnames(classes.root, props.className), "data-file-type": type, "data-variant": variant, "data-sortable": sortable, children: [_jsx("input", { type: "file", accept: accept, multiple: max !== 1, ...inputProps, ref: cloneRef(innerInputRef, inputRef), className: classnames(classes.input, inputProps?.className), onChange: inputChangeHandler, "data-hidden": "true" }), _jsx(DndContext, { sensors: useDndSensors(), onDragEnd: dragEndHandler, children: _jsx(SortableContext, { items: innerValue.current, disabled: !sortable, children: type === 'file'
+                        ? _jsxs(_Fragment, { children: [showButton &&
+                                    _jsx(Button, { variant: "outlined", prefix: _jsx(UploadOutlined, {}), ...buttonProps, onClick: buttonClick, children: buttonText }), _jsx(TransitionGroup, { className: classes.files, children: innerValue.current.map(file => _jsx(SortableItem, { component: Collapse, className: classes.sortable, id: file.id, children: _jsx(FileItem, { ref: r => itemRefs.current.set(file.id, r), file: file, onRemove: () => removeHandler(file.id), onUpload: onUpload }) }, file.id)) })] })
+                        : _jsxs(TransitionGroup, { className: classes.images, children: [_jsx(Grow, { children: _jsx("div", { className: classes.imageWrap, "data-clickable": "true", children: _jsx("div", { className: classes.image, onClick: () => innerInputRef.current.click(), children: _jsx(PlusOutlined, {}) }) }) }), innerValue.current.map(file => _jsx(SortableItem, { component: Collapse, className: classes.sortable, id: file.id, orientation: "horizontal", children: _jsx(ImageItem, { ref: r => itemRefs.current.set(file.id, r), type: type, file: file, onRemove: () => removeHandler(file.id), onUpload: onUpload }, file.id) }, file.id))] }) }) })] }));
+}));
+Upload.DropArea = DropArea;

package/dist/esm/components/upload/upload.style.d.ts

@@ -0,0 +1,17 @@
+export declare const classes: {
+    info: string;
+    input: string;
+    progress: string;
+    image: string;
+    icon: string;
+    name: string;
+    file: string;
+    control: string;
+    files: string;
+    images: string;
+    imageWrap: string;
+    sortable: string;
+} & {
+    root: string;
+};
+export declare const style: () => import("@emotion/react").SerializedStyles;