@aozi6666/bee-design 0.1.0

package/build/components/Input/input.types.d.ts

@@ -0,0 +1,16 @@
+import type { ChangeEvent, InputHTMLAttributes, ReactElement } from 'react';
+import type { IconProp } from '@fortawesome/fontawesome-svg-core';
+export type InputSize = 'lg' | 'sm';
+export interface InputProps extends Omit<InputHTMLAttributes<HTMLElement>, 'size'> {
+    /** 是否禁用 Input */
+    disabled?: boolean;
+    /** 设置 input 大小，支持 lg 或者是 sm */
+    size?: InputSize;
+    /** 添加图标，在右侧悬浮添加一个图标，用于提示 */
+    icon?: IconProp;
+    /** 添加前缀 用于配置一些固定组合 */
+    prepend?: string | ReactElement;
+    /** 添加后缀 用于配置一些固定组合 */
+    append?: string | ReactElement;
+    onChange?: (e: ChangeEvent<HTMLInputElement>) => void;
+}

package/build/components/Input/input.types.js

@@ -0,0 +1 @@
+export {};

package/build/components/Menu/index.d.ts

@@ -0,0 +1,10 @@
+import type { FC } from 'react';
+import { type MenuProps } from './menu';
+import { type SubMenuProps } from './subMenu';
+import { type MenuItemProps } from './menuItem';
+export type IMenuComponent = FC<MenuProps> & {
+    Item: FC<MenuItemProps>;
+    SubMenu: FC<SubMenuProps>;
+};
+declare const TransMenu: IMenuComponent;
+export default TransMenu;

package/build/components/Menu/index.js

@@ -0,0 +1,9 @@
+import Menu, {} from './menu';
+import SubMenu, {} from './subMenu';
+import MenuItem, {} from './menuItem';
+// Menu 做类型转换
+const TransMenu = Menu;
+// 把子组件挂到 Menu 上
+TransMenu.Item = MenuItem;
+TransMenu.SubMenu = SubMenu;
+export default TransMenu;

package/build/components/Menu/menu.d.ts

@@ -0,0 +1,34 @@
+import React from 'react';
+import type { FC, CSSProperties, ReactNode } from 'react';
+type MenuMode = 'horizontal' | 'vertical';
+export interface MenuProps {
+    /**默认 active 的菜单项的索引值 */
+    defaultIndex?: string;
+    className?: string;
+    /**菜单类型 横向或者纵向 */
+    mode?: MenuMode;
+    style?: CSSProperties;
+    /**点击菜单项触发的回掉函数 */
+    onSelect?: (selectedIndex: string) => void;
+    /**设置子菜单的默认打开 只在纵向模式下生效 */
+    defaultOpenSubMenus?: string[];
+    children?: ReactNode;
+}
+interface IMenuContext {
+    index: string;
+    onSelect?: (selectedIndex: string) => void;
+    mode?: MenuMode;
+    defaultOpenSubMenus?: string[];
+}
+export declare const MenuContext: React.Context<IMenuContext>;
+/**
+ * 为网站提供导航功能的菜单。支持横向纵向两种模式，支持下拉菜单。
+ *
+ * ```javascript
+ * import { Menu } from 'vikingship'
+ *
+ * //然后可以使用 Menu.Item 和 Menu.Submenu 访问选项和子下拉菜单组件
+ * ```
+ */
+export declare const Menu: FC<MenuProps>;
+export default Menu;

package/build/components/Menu/menu.js

@@ -0,0 +1,48 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import React, { useState, createContext } from 'react';
+import classNames from 'classnames';
+export const MenuContext = createContext({ index: '0' });
+/**
+ * 为网站提供导航功能的菜单。支持横向纵向两种模式，支持下拉菜单。
+ *
+ * ```javascript
+ * import { Menu } from 'vikingship'
+ *
+ * //然后可以使用 Menu.Item 和 Menu.Submenu 访问选项和子下拉菜单组件
+ * ```
+ */
+export const Menu = ({ className, mode = 'horizontal', style, children, defaultIndex = '0', onSelect, defaultOpenSubMenus = [], }) => {
+    const [currentActive, setActive] = useState(defaultIndex);
+    const classes = classNames('viking-menu', className, {
+        'menu-vertical': mode === 'vertical',
+        'menu-horizontal': mode !== 'vertical',
+    });
+    const handleClick = (index) => {
+        setActive(index);
+        if (onSelect) {
+            onSelect(index);
+        }
+    };
+    const passedContext = {
+        index: currentActive ? currentActive : '0',
+        onSelect: handleClick,
+        mode,
+        defaultOpenSubMenus,
+    };
+    const renderChildren = () => {
+        return React.Children.map(children, (child, index) => {
+            const childElement = child;
+            const { displayName } = childElement.type;
+            if (displayName === 'MenuItem' || displayName === 'SubMenu') {
+                return React.cloneElement(childElement, {
+                    index: index.toString()
+                });
+            }
+            else {
+                console.error("Warning: Menu has a child which is not a MenuItem component");
+            }
+        });
+    };
+    return (_jsx("ul", { className: classes, style: style, "data-testid": "test-menu", children: _jsx(MenuContext.Provider, { value: passedContext, children: renderChildren() }) }));
+};
+export default Menu;

package/build/components/Menu/menuItem.d.ts

@@ -0,0 +1,14 @@
+import React from 'react';
+import type { FC, ReactNode } from 'react';
+export interface MenuItemProps {
+    index?: string;
+    /**选项是否被禁用 */
+    disabled?: boolean;
+    /**选项扩展的 className */
+    className?: string;
+    /**选项的自定义 style */
+    style?: React.CSSProperties;
+    children?: ReactNode;
+}
+export declare const MenuItem: FC<MenuItemProps>;
+export default MenuItem;

package/build/components/Menu/menuItem.js

@@ -0,0 +1,20 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import React, { useContext } from 'react';
+import classNames from 'classnames';
+import { MenuContext } from './menu';
+export const MenuItem = (props) => {
+    const { index, disabled, className, style, children } = props;
+    const context = useContext(MenuContext);
+    const classes = classNames('menu-item', className, {
+        'is-disabled': disabled,
+        'is-active': context.index === index
+    });
+    const handleClick = () => {
+        if (context.onSelect && !disabled && (typeof index === 'string')) {
+            context.onSelect(index);
+        }
+    };
+    return (_jsx("li", { className: classes, style: style, onClick: handleClick, children: children }));
+};
+MenuItem.displayName = 'MenuItem';
+export default MenuItem;

package/build/components/Menu/subMenu.d.ts

@@ -0,0 +1,11 @@
+import type { FC, ReactNode } from 'react';
+export interface SubMenuProps {
+    index?: string;
+    /**下拉菜单选项的文字 */
+    title: string;
+    /**下拉菜单选型的扩展类名 */
+    className?: string;
+    children?: ReactNode;
+}
+export declare const SubMenu: FC<SubMenuProps>;
+export default SubMenu;

package/build/components/Menu/subMenu.js

@@ -0,0 +1,56 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React, { useContext, useState } from 'react';
+import classNames from 'classnames';
+import { MenuContext } from './menu';
+import Icon from '../Icon/icon';
+import Transition from '../Transition/transition';
+export const SubMenu = ({ index, title, children, className }) => {
+    const context = useContext(MenuContext);
+    const openedSubMenus = context.defaultOpenSubMenus;
+    const isOpend = (index && context.mode === 'vertical') ? openedSubMenus.includes(index) : false;
+    const [menuOpen, setOpen] = useState(isOpend);
+    const classes = classNames('menu-item submenu-item', className, {
+        'is-active': context.index === index,
+        'is-opened': menuOpen,
+        'is-vertical': context.mode === 'vertical'
+    });
+    const handleClick = (e) => {
+        e.preventDefault();
+        setOpen(!menuOpen);
+    };
+    let timer;
+    const handleMouse = (e, toggle) => {
+        clearTimeout(timer);
+        e.preventDefault();
+        timer = setTimeout(() => {
+            setOpen(toggle);
+        }, 300);
+    };
+    const clickEvents = context.mode === 'vertical' ? {
+        onClick: handleClick
+    } : {};
+    const hoverEvents = context.mode !== 'vertical' ? {
+        onMouseEnter: (e) => { handleMouse(e, true); },
+        onMouseLeave: (e) => { handleMouse(e, false); }
+    } : {};
+    const renderChildren = () => {
+        const subMenuClasses = classNames('viking-submenu', {
+            'menu-opened': menuOpen
+        });
+        const childrenComponent = React.Children.map(children, (child, i) => {
+            const childElement = child;
+            if (childElement.type.displayName === 'MenuItem') {
+                return React.cloneElement(childElement, {
+                    index: `${index}-${i}`
+                });
+            }
+            else {
+                console.error("Warning: SubMenu has a child which is not a MenuItem component");
+            }
+        });
+        return (_jsx(Transition, { in: menuOpen, timeout: 300, animation: "zoom-in-top", children: _jsx("ul", { className: subMenuClasses, children: childrenComponent }) }));
+    };
+    return (_jsxs("li", { className: classes, ...hoverEvents, children: [_jsxs("div", { className: "submenu-title", ...clickEvents, children: [title, _jsx(Icon, { icon: "angle-down", className: "arrow-icon" })] }), renderChildren()] }, index));
+};
+SubMenu.displayName = 'SubMenu';
+export default SubMenu;

package/build/components/Progress/index.d.ts

@@ -0,0 +1,2 @@
+import Progress from './progress';
+export default Progress;

package/build/components/Progress/index.js

@@ -0,0 +1,2 @@
+import Progress from './progress';
+export default Progress;

package/build/components/Progress/progress.d.ts

@@ -0,0 +1,4 @@
+import type { FC } from 'react';
+import type { ProgressProps } from './progress.types';
+declare const Progress: FC<ProgressProps>;
+export default Progress;

package/build/components/Progress/progress.js

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

package/build/components/Progress/progress.types.d.ts

@@ -0,0 +1,9 @@
+import type { CSSProperties } from 'react';
+import type { ThemeProps } from '../Icon/icon.types';
+export interface ProgressProps {
+    percent: number;
+    strokeHeight?: number;
+    showText?: boolean;
+    styles?: CSSProperties;
+    theme?: ThemeProps;
+}

package/build/components/Progress/progress.types.js

@@ -0,0 +1,2 @@
+// Progress 组件的类型定义，单独拆分成文件，便于复用
+export {};

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

@@ -0,0 +1,3 @@
+import Transition from './transition';
+export default Transition;
+export type { AnimationName, TransitionProps } from './transition';

package/build/components/Transition/index.js

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

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

@@ -0,0 +1,4 @@
+import type { TransitionProps } from './transition.types';
+export type { AnimationName, TransitionProps } from './transition.types';
+declare const Transition: (props: TransitionProps) => import("react/jsx-runtime").JSX.Element;
+export default Transition;

package/build/components/Transition/transition.js

@@ -0,0 +1,18 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useRef } from 'react';
+import { CSSTransition } from 'react-transition-group';
+const Transition = (props) => {
+    const { children, classNames: classNamesProp, animation, wrapper = false, unmountOnExit = true, appear = true, addEndListener, ...restProps } = props;
+    const cls = animation ? animation : classNamesProp;
+    const nodeRef = useRef(null);
+    const transitionProps = {
+        classNames: cls,
+        unmountOnExit,
+        appear,
+        ...restProps,
+    };
+    if (addEndListener)
+        transitionProps.addEndListener = addEndListener;
+    return (_jsx(CSSTransition, { nodeRef: nodeRef, ...transitionProps, children: _jsx("div", { ref: nodeRef, "data-transition-wrapper": wrapper ? 'true' : 'false', children: children }) }));
+};
+export default Transition;

package/build/components/Transition/transition.types.d.ts

@@ -0,0 +1,10 @@
+import type { ReactNode } from 'react';
+import type { CSSTransitionProps } from 'react-transition-group/CSSTransition';
+export type AnimationName = 'zoom-in-top' | 'zoom-in-left' | 'zoom-in-bottom' | 'zoom-in-right';
+export type TransitionProps = Omit<CSSTransitionProps<HTMLElement>, 'addEndListener' | 'timeout'> & {
+    animation?: AnimationName;
+    wrapper?: boolean;
+    children?: ReactNode;
+    timeout: CSSTransitionProps<HTMLElement>['timeout'];
+    addEndListener?: (node: HTMLElement, done: () => void) => void;
+};

package/build/components/Transition/transition.types.js

@@ -0,0 +1 @@
+export {};

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

@@ -0,0 +1,7 @@
+import type { FC, ReactNode } from 'react';
+interface DraggerProps {
+    onFile: (files: FileList) => void;
+    children?: ReactNode;
+}
+export declare const Dragger: FC<DraggerProps>;
+export default Dragger;

package/build/components/Upload/dragger.js

@@ -0,0 +1,42 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+/* Dragger 是专门处理拖拽上传逻辑的子组件：
+  - 只负责获取拖拽的文件
+  - 上传文件还是靠 Upload
+监听浏览器拖拽事件 → 拿到拖进来的文件 → 传回 Upload 组件
+
+  浏览器 Drag & Drop API 事件：
+    dragenter  → 进入区域
+    dragover   → 在区域上方拖动
+    dragleave  → 离开区域
+    drop       → 松手放下文件（包含拖进来的文件）
+*/
+import { useState } from 'react';
+import classNames from 'classnames';
+export const Dragger = (props) => {
+    const { onFile, children } = props;
+    // 负责拖拽样式
+    const [dragOver, setDragOver] = useState(false);
+    // 使用 `classNames` 拼 `className`：
+    const klass = classNames('viking-uploader-dragger', {
+        // 如果 `dragOver === true` 时，再加一个：`is-dragover`
+        'is-dragover': dragOver
+    });
+    // 上传流程
+    const handleDrop = (e) => {
+        e.preventDefault(); // 阻止默认行为
+        setDragOver(false); // 拖拽结束：改变拖拽样式
+        // dataTransfer： 浏览器 drop-API 的对象
+        // 包含: files(文件列表FileList)、items、types
+        // 通过 onFile回调 传回 Upload 处理
+        onFile(e.dataTransfer.files);
+    };
+    // 回调： 控制拖拽状态（改变样式）
+    const handleDrag = (e, over) => {
+        e.preventDefault();
+        setDragOver(over);
+    };
+    return (_jsx("div", { className: klass, 
+        // e： 监听DragEvent拖拽事件对象
+        onDragOver: e => { handleDrag(e, true); }, onDragLeave: e => { handleDrag(e, false); }, onDrop: handleDrop, children: children }));
+};
+export default Dragger;

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

@@ -0,0 +1,2 @@
+import Upload from './upload';
+export default Upload;

package/build/components/Upload/index.js

@@ -0,0 +1,2 @@
+import Upload from './upload';
+export default Upload;

package/build/components/Upload/native/axios-react.d.ts

@@ -0,0 +1,2 @@
+declare const AxiosReact: React.FC;
+export default AxiosReact;

package/build/components/Upload/native/axios-react.js

@@ -0,0 +1,99 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import axios from 'axios';
+const AxiosReact = () => {
+    /*
+      e： 这次变化事件的事件对象 -- “事件说明单”
+        e = {
+          谁触发的这次变化,
+          发生了什么,
+          当前 input 里有什么值
+        }
+  
+      e.target： 触发这次事件的那个 DOM 元素（input 节点本身）
+      e: React.ChangeEvent<HTMLInputElement>: 给参数 e 标注类型
+         - React 里的 ChangeEvent
+         - 这个事件来自 <HTMLInputElement> 泛型参数
+  
+      提前告诉大家：e 是“来自 input 元素的 change 事件对象” （贴标签）
+          - 放心大胆用：e.target.files
+    */
+    const handleFileChange = (e) => {
+        // 1）取出 用户上传的 文件
+        /*
+         input type="file" 文件类型输入框：
+           - 有一个特殊属性 files: 用户当前选中的 文件列表 FileList
+           - 用户一次性可以选3个文件
+               FileList {
+                  // File对象
+                  0: File {
+                       name: "a.png",
+                       size: 12345,
+                       type: "image/png"
+    
+                       //  内部隐藏
+                          [[BinaryData]]: <文件二进制>0100110101...
+                     },
+                
+                  1: File {
+                       name: "b.jpg",
+                       size: 23456,
+                       type: "image/jpeg"
+                     },
+                
+                  2: File {
+                       name: "c.pdf",
+                       size: 34567,
+                       type: "application/pdf"
+                     },
+                
+                  length: 3
+                }
+        */
+        // 获取 文件列表 
+        const files = e.target.files;
+        if (files) {
+            // 从文件列表中取出 第一个 File 对象 ： 文件信息 + 文件内容（二进制）
+            const uploadedFile = files[0];
+            // 2）将 本次文件 放进 formData 
+            const formData = new FormData();
+            // key-value 形式
+            formData.append("file", uploadedFile);
+            // 3）使用 Axios 发送请求
+            /*
+              常见参数: axios.post(url, data, config)
+              - url:地址
+              - data： 请求体body （这次 POST 请求要携带的数据）
+              - config配置项 对象：
+            */
+            axios.post("https://jsonplaceholder.typicode.com/posts", 
+            // Axios 发出去的不是 FormData 对象本身
+            /*
+              FormData 里装的是一个 File 对象引用
+                -> 当 Axios / fetch 看到： body: formData
+                -> 浏览器会开始做“编码
+                -> 先遍历 FormData 里的每一项
+                -> 变成 HTTP body 里的某一个 "part"
+                -> 每一个"part"包含：(文件相关的描述信息 + 二进制内容)
+                    ------WebKitBoundary123【包裹边界】
+                    Content-Disposition: form-data; name="file"; filename="a.png"
+                    Content-Type: image/png
+                    
+                    <文件二进制内容>
+                    ------WebKitBoundary123--【结束边界】
+            */
+            formData, {
+                // 设置 请求头信息
+                headers: {
+                    // 表单文件数据
+                    'Content-Type': 'multipart/form-data'
+                }
+            }).then(resp => {
+                console.log(resp);
+            });
+        }
+    };
+    return (_jsx("div", { className: "AxiosReact", style: { marginTop: '100px', marginLeft: '100px' }, children: _jsx("input", { type: "file", 
+            // {/* 原生必须传，自定义不用传 name="myFile" */}
+            onChange: handleFileChange }) }));
+};
+export default AxiosReact;

package/build/components/Upload/native/from-html.d.ts

@@ -0,0 +1,2 @@
+declare const FromHtml: React.FC;
+export default FromHtml;

package/build/components/Upload/native/from-html.js

@@ -0,0 +1,5 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const FromHtml = () => {
+    return (_jsx("div", { className: "App", style: { marginTop: '100px', marginLeft: '100px' }, children: _jsxs("form", { method: "post", encType: "multipart/form-data", action: "https://jsonplaceholder.typicode.com/posts", children: [_jsx("input", { type: "file", name: "myFile" }), _jsx("button", { type: "submit", children: "Submit" })] }) }));
+};
+export default FromHtml;

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

@@ -0,0 +1,13 @@
+import type { FC } from 'react';
+import type { UploadProps } from './upload.types';
+/**
+ * 通过点击或者拖拽上传文件
+ * ### 引用方法
+ *
+ * ~~~js
+ * import { Upload } from 'vikingship'
+ * ~~~
+ */
+export declare const Upload: FC<UploadProps>;
+export default Upload;
+export type { UploadProps };