@sbnpmiamldw/ui-library 0.1.1

package/dist/components/Select/selectTag.d.ts

@@ -0,0 +1,7 @@
+import React from "react";
+export interface SelectTagProps {
+    value: string;
+    handleTagClick?: (value: string) => void;
+}
+declare const SelectTag: React.FC<SelectTagProps>;
+export default SelectTag;

package/dist/components/Select/selectTag.js

@@ -0,0 +1,12 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import Button from '../Button/button';
+import Icon from "../Icon/icon";
+import { faXmark } from "@fortawesome/free-solid-svg-icons";
+const SelectTag = ({ value, handleTagClick, }) => {
+    const handleClick = () => {
+        if (handleTagClick)
+            handleTagClick(value);
+    };
+    return (_jsxs("div", { className: "select-tag", children: [_jsx("div", { className: "select-tag-value", children: value }), _jsx(Button, { className: "select-tag-button", "aria-label": `select tag button ${value}`, onClick: () => handleClick(), children: _jsx(Icon, { icon: faXmark }) })] }));
+};
+export default SelectTag;

package/dist/components/Tabs/index.d.ts

@@ -0,0 +1,8 @@
+import { FC } from "react";
+import { TabsProps } from "./tabs";
+import { TabItemProps } from "./tabItem";
+export type ITabsComponent = FC<TabsProps> & {
+    Item: FC<TabItemProps>;
+};
+declare const TransTabs: ITabsComponent;
+export default TransTabs;

package/dist/components/Tabs/index.js

@@ -0,0 +1,5 @@
+import Tabs from "./tabs";
+import TabItem from "./tabItem";
+const TransTabs = Tabs;
+TransTabs.Item = TabItem;
+export default TransTabs;

package/dist/components/Tabs/tabItem.d.ts

@@ -0,0 +1,10 @@
+import React from 'react';
+export interface TabItemProps {
+    index?: number;
+    disabled?: boolean;
+    className?: string;
+    label: string;
+    children?: React.ReactNode;
+}
+declare const TabItem: React.FC<TabItemProps>;
+export default TabItem;

package/dist/components/Tabs/tabItem.js

@@ -0,0 +1,19 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useContext } from 'react';
+import classNames from 'classnames';
+import { TabContext } from './tabs';
+const TabItem = ({ index, disabled = false, className, label }) => {
+    const context = useContext(TabContext);
+    const classes = classNames('tab-item', className, {
+        'is-disabled': disabled,
+        'is-active': index === context.index
+    });
+    const handleClick = () => {
+        if (!disabled && context.onSelect && typeof index == 'number') {
+            context.onSelect(index);
+        }
+    };
+    return (_jsx("li", { className: classes, onClick: handleClick, children: label }));
+};
+TabItem.displayName = 'TabItem';
+export default TabItem;

package/dist/components/Tabs/tabs.d.ts

@@ -0,0 +1,15 @@
+import React from 'react';
+type selectCallback = (selectIndex: number) => void;
+export interface TabsProps {
+    defaultIndex?: number;
+    onSelect?: selectCallback;
+    className?: string;
+    children: React.ReactNode;
+}
+interface ITabContext {
+    index: number;
+    onSelect?: selectCallback;
+}
+export declare const TabContext: React.Context<ITabContext>;
+declare const Tabs: React.FC<TabsProps>;
+export default Tabs;

package/dist/components/Tabs/tabs.js

@@ -0,0 +1,37 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React, { useState, createContext } from 'react';
+import classNames from 'classnames';
+export const TabContext = createContext({ index: 0 });
+const Tabs = ({ defaultIndex = 0, onSelect, className, children }) => {
+    const [currentActive, setActive] = useState(defaultIndex);
+    const classes = classNames('tabs', className);
+    const ActiveContent = (index) => {
+        var _a;
+        const tabItems = React.Children.toArray(children);
+        return (_a = tabItems.find((tab, i) => i === index)) === null || _a === void 0 ? void 0 : _a.props.children;
+    };
+    const handleClick = (index) => {
+        setActive(index);
+        if (onSelect) {
+            onSelect(index);
+        }
+    };
+    const renderChildren = () => {
+        return React.Children.map(children, (child, index) => {
+            const childElement = child;
+            if (typeof childElement.type === 'function' &&
+                childElement.type.displayName === 'TabItem') {
+                return React.cloneElement(childElement, { index });
+            }
+            else {
+                console.error('Warning: Tab has a child which is not a TabItem component');
+            }
+        });
+    };
+    const passedContext = {
+        index: currentActive,
+        onSelect: handleClick
+    };
+    return (_jsxs("div", { className: classes, children: [_jsx("ul", { className: 'tabs-items', children: _jsx(TabContext.Provider, { value: passedContext, children: renderChildren() }) }), _jsx("div", { className: 'tabs-content', children: ActiveContent(currentActive) })] }));
+};
+export default Tabs;

package/dist/components/Transition/index.d.ts

@@ -0,0 +1,2 @@
+import Transition from "./transition";
+export default Transition;

package/dist/components/Transition/index.js

@@ -0,0 +1,2 @@
+import Transition from "./transition";
+export default Transition;

package/dist/components/Transition/transition.d.ts

@@ -0,0 +1,9 @@
+import React from "react";
+import { CSSTransitionProps } from 'react-transition-group/CSSTransition';
+type AnimationName = 'zoom-in-top' | 'zoom-in-left' | 'zoom-in-right' | 'zoom-in-bottom';
+type TransitionProps = CSSTransitionProps<HTMLElement> & {
+    animation?: AnimationName;
+    wrapper?: boolean;
+};
+declare const Transition: React.FC<TransitionProps>;
+export default Transition;

package/dist/components/Transition/transition.js

@@ -0,0 +1,19 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import React, { useRef } from "react";
+import { CSSTransition } from "react-transition-group";
+const Transition = ({ children, classNames, animation, wrapper = false, appear = true, unmountOnExit = true, ...restProps }) => {
+    const nodeRef = useRef(null);
+    const renderChildren = () => {
+        if (React.isValidElement(children)) {
+            return React.cloneElement(children, {
+                ref: nodeRef
+            });
+        }
+        else
+            return children;
+    };
+    return (_jsx(CSSTransition, { nodeRef: nodeRef, appear: appear, unmountOnExit: unmountOnExit, classNames: classNames ? classNames : animation, ...restProps, children: wrapper ? (
+        // 防止transition冲突
+        _jsx("div", { ref: nodeRef, children: children })) : renderChildren() }));
+};
+export default Transition;

package/dist/components/Upload/dragger.d.ts

@@ -0,0 +1,6 @@
+import React from "react";
+export interface DraggerProps {
+    onFile: (files: FileList) => void;
+    children: React.ReactNode;
+}
+export declare const Dragger: React.FC<DraggerProps>;

package/dist/components/Upload/dragger.js

@@ -0,0 +1,19 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useState } from "react";
+import classNames from "classnames";
+export const Dragger = ({ onFile, children, }) => {
+    const [dragOver, setDragOver] = useState(false);
+    const classes = classNames('upload-dragger', {
+        'is-dragOver': dragOver,
+    });
+    const handleDrop = (e) => {
+        e.preventDefault();
+        setDragOver(false);
+        onFile(e.dataTransfer.files);
+    };
+    const handleDrag = (e, over) => {
+        e.preventDefault();
+        setDragOver(over);
+    };
+    return (_jsx("div", { className: classes, onDragOver: e => handleDrag(e, true), onDragLeave: e => handleDrag(e, false), onDrop: handleDrop, children: children }));
+};

package/dist/components/Upload/index.d.ts

@@ -0,0 +1,13 @@
+import { FC } from "react";
+import { UploadProps, UploadFile } from "./upload";
+import { UploadListProps } from "./uploadList";
+import { ProgressProps } from "./progress";
+import { DraggerProps } from "./dragger";
+export type IUploadComponent = FC<UploadProps> & {
+    List: FC<UploadListProps>;
+    Progress: FC<ProgressProps>;
+    Dragger: FC<DraggerProps>;
+};
+declare const TransUpload: IUploadComponent;
+export default TransUpload;
+export { UploadFile };

package/dist/components/Upload/index.js

@@ -0,0 +1,9 @@
+import { Upload } from "./upload";
+import { UploadList } from "./uploadList";
+import { Progress } from "./progress";
+import { Dragger } from "./dragger";
+const TransUpload = Upload;
+TransUpload.List = UploadList;
+TransUpload.Progress = Progress;
+TransUpload.Dragger = Dragger;
+export default TransUpload;

package/dist/components/Upload/progress.d.ts

@@ -0,0 +1,10 @@
+import React from "react";
+import { ThemeProps } from '../Icon/icon';
+export interface ProgressProps {
+    percent: number;
+    strokeHeight?: number;
+    showText?: boolean;
+    styles?: React.CSSProperties;
+    theme?: ThemeProps;
+}
+export declare const Progress: React.FC<ProgressProps>;

package/dist/components/Upload/progress.js

@@ -0,0 +1,8 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+export const Progress = ({ percent, strokeHeight = 15, showText = true, styles, theme = 'primary', }) => {
+    return (_jsx("div", { className: "progress-bar", style: styles, children: _jsx("div", { className: "progress-bar-outer", style: {
+                height: `${strokeHeight}px`
+            }, children: _jsx("div", { className: `progress-bar-inner color-${theme}`, style: {
+                    width: `${percent}%`
+                }, children: showText && (_jsx("span", { className: "inner-text", children: `${percent}%` })) }) }) }));
+};

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

@@ -0,0 +1,35 @@
+import React from "react";
+export type UploadFileStatus = 'ready' | 'uploading' | 'success' | 'error';
+export interface UploadFile {
+    uid: string;
+    size: number;
+    name: string;
+    status?: UploadFileStatus;
+    percent?: number;
+    raw?: File;
+    response?: any;
+    error?: any;
+}
+export interface UploadProps {
+    action: string;
+    defaultFileList?: UploadFile[];
+    beforUpload?: (file: UploadFile) => boolean | Promise<UploadFile>;
+    onProgress?: (percentage: number, file: UploadFile) => void;
+    onSuccess?: (data: any, file: UploadFile) => void;
+    onError?: (err: any, file: UploadFile) => void;
+    onChange?: (file: UploadFile) => void;
+    onRemove?: (file: UploadFile) => void;
+    headers?: {
+        [key: string]: any;
+    };
+    name?: string;
+    data?: {
+        [key: string]: any;
+    };
+    withCredentials?: boolean;
+    accept?: string;
+    multiple?: boolean;
+    drag?: boolean;
+    children: React.ReactNode;
+}
+export declare const Upload: React.FC<UploadProps>;

package/dist/components/Upload/upload.js

@@ -0,0 +1,126 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from "react";
+import axios from "axios";
+import { UploadList } from "./uploadList";
+import { Dragger } from "./dragger";
+export const Upload = ({ action, defaultFileList, beforUpload, onProgress, onSuccess, onError, onChange, onRemove, headers, name = 'file', data, withCredentials, accept, multiple, drag, children, }) => {
+    const [fileList, setFileList] = useState(defaultFileList || []);
+    const updateFileList = (updateFile, updateObj) => {
+        let targetFile = { ...updateFile, ...updateObj };
+        setFileList(prevList => {
+            return prevList.map(file => {
+                if (file.uid === updateFile.uid) {
+                    targetFile = { ...file, ...updateObj };
+                    return { ...file, ...updateObj };
+                }
+                else
+                    return file;
+            });
+        });
+        return targetFile;
+    };
+    const convertFileToUpLoadFile = (file) => {
+        return {
+            uid: Date.now() + "",
+            status: 'ready',
+            name: file.name,
+            size: file.size,
+            percent: 0,
+            raw: file,
+        };
+    };
+    const post = (file) => {
+        setFileList(prevList => [file, ...prevList]);
+        const formData = new FormData();
+        if (file.raw)
+            formData.append(name || 'file', file.raw);
+        else
+            console.error('empty file');
+        if (data) {
+            Object.keys(data).forEach(key => {
+                formData.append(key, data[key]);
+            });
+        }
+        axios.post(action, formData, {
+            headers: {
+                ...headers,
+                'Content-Type': 'multipart/form-data',
+            },
+            withCredentials: withCredentials,
+            onUploadProgress(progressEvent) {
+                var _a;
+                const total = (_a = progressEvent.total) !== null && _a !== void 0 ? _a : 0;
+                let percentage = total > 0
+                    ? Math.round(progressEvent.loaded / total * 100)
+                    : 0;
+                if (percentage < 100) {
+                    const newFile = updateFileList(file, {
+                        percent: percentage,
+                        status: 'uploading',
+                    });
+                    setFileList(prevList => {
+                        console.log(prevList);
+                        return prevList;
+                    });
+                    onProgress && onProgress(percentage, newFile);
+                }
+            },
+        }).then(resp => {
+            // console.log(resp);
+            const newFile = updateFileList(file, {
+                status: 'success',
+                response: resp.data,
+            });
+            onSuccess && onSuccess(resp.data, newFile);
+            onChange && onChange(newFile);
+            // onChange?.(file);
+        }).catch(err => {
+            // console.error(err);
+            const newFile = updateFileList(file, {
+                status: 'error',
+                error: err,
+            });
+            onError && onError(err, newFile);
+            onChange && onChange(newFile);
+        });
+    };
+    const uploadFiles = (files) => {
+        let postFile = Array.from(files);
+        postFile.forEach(file => {
+            const uploadFile = convertFileToUpLoadFile(file);
+            if (!beforUpload) {
+                post(uploadFile);
+            }
+            else {
+                const result = beforUpload(uploadFile);
+                if (result && result instanceof Promise) {
+                    result.then(processedFile => {
+                        post(processedFile);
+                    });
+                }
+                else if (result) {
+                    post(uploadFile);
+                }
+            }
+        });
+    };
+    const handleFileChange = (e) => {
+        const files = e.target.files;
+        if (!files)
+            return;
+        uploadFiles(files);
+        e.target.value = '';
+    };
+    const handleRemove = (file) => {
+        setFileList(prevList => {
+            return prevList.filter(item => item.uid !== file.uid);
+        });
+        if (onRemove) {
+            onRemove(file);
+        }
+    };
+    // console.log(fileList);
+    return (_jsxs("div", { className: "upload-component", children: [_jsx("label", { className: "upload-input", htmlFor: "fileInput", style: { display: 'inline-block' }, children: drag ?
+                    _jsx(Dragger, { onFile: uploadFiles, children: children }) :
+                    children }), _jsx("input", { className: "file-input", id: "fileInput", style: { display: "none" }, type: "file", onChange: handleFileChange, accept: accept, multiple: multiple }), _jsx(UploadList, { fileList: fileList, onRemove: handleRemove })] }));
+};

package/dist/components/Upload/uploadList.d.ts

@@ -0,0 +1,7 @@
+import React from "react";
+import { UploadFile } from "./upload";
+export interface UploadListProps {
+    fileList: UploadFile[];
+    onRemove: (_file: UploadFile) => void;
+}
+export declare const UploadList: React.FC<UploadListProps>;

package/dist/components/Upload/uploadList.js

@@ -0,0 +1,9 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Progress } from "./progress";
+import Icon from '../Icon/icon';
+import { faFileAlt, faSpinner, faCheckCircle, faTimesCircle, faTimes } from "@fortawesome/free-solid-svg-icons";
+export const UploadList = ({ fileList, onRemove, }) => {
+    return (_jsx("ul", { className: "upload-list", children: fileList.map(item => {
+            return (_jsxs("li", { className: "upload-list-item", children: [_jsxs("span", { className: `file-name file-name-${item.status}`, children: [_jsx(Icon, { icon: faFileAlt, theme: "secondary" }), item.name] }), _jsxs("span", { className: "file-status", children: [item.status === 'uploading' && _jsx(Icon, { icon: faSpinner, spin: true, theme: "primary" }), item.status === 'success' && _jsx(Icon, { icon: faCheckCircle, theme: "success" }), item.status === 'error' && _jsx(Icon, { icon: faTimesCircle, theme: "danger" })] }), _jsx("span", { className: "file-actions", children: _jsx(Icon, { icon: faTimes, onClick: () => onRemove(item) }) }), item.status === 'uploading' && (_jsx(Progress, { percent: item.percent || 0 }))] }, item.uid));
+        }) }));
+};

package/dist/hooks/useClickOutside.d.ts

@@ -0,0 +1,2 @@
+import React from "react";
+export declare function useClickOutside(ref: React.RefObject<HTMLElement | null>, handler: Function): void;

package/dist/hooks/useClickOutside.js

@@ -0,0 +1,16 @@
+import React from "react";
+export function useClickOutside(ref, handler) {
+    React.useEffect(() => {
+        const listener = (e) => {
+            if (!ref.current || ref.current.contains(e.target)) {
+                return;
+            }
+            else
+                handler(e);
+        };
+        document.addEventListener('click', listener);
+        return () => {
+            document.removeEventListener('click', listener);
+        };
+    }, [ref, handler]);
+}

package/dist/hooks/useDebounce.d.ts

@@ -0,0 +1 @@
+export declare function useDebounce<T>(value: T, delay?: number): T;

package/dist/hooks/useDebounce.js

@@ -0,0 +1,13 @@
+import { useState, useEffect } from 'react';
+export function useDebounce(value, delay = 300) {
+    const [debounceValue, setDebounceValue] = useState(value);
+    useEffect(() => {
+        const handler = setTimeout(() => {
+            setDebounceValue(value);
+        }, delay);
+        return () => {
+            clearTimeout(handler);
+        };
+    }, [value, delay]);
+    return debounceValue;
+}