├── .github └── workflows │ ├── index.html │ └── static.yml ├── .gitignore ├── README.md ├── components ├── alert │ └── alert.js ├── badge │ └── badge.js ├── base-calendar │ ├── index.d.ts │ ├── index.less │ ├── index.tsx │ └── utils.js ├── button │ ├── index.d.ts │ ├── index.module.less │ └── index.tsx ├── calendar │ ├── hover.js │ ├── index.d.ts │ ├── index.less │ ├── index.tsx │ └── utils.js ├── checkbox │ ├── index.d.ts │ ├── index.module.less │ └── index.tsx ├── conditional-render │ ├── conditional-render.tsx │ └── index.less ├── date-picker │ ├── index.d.ts │ ├── index.module.less │ └── index.tsx ├── date-time-picker │ └── date-time-picker.js ├── drawer │ ├── index.d.ts │ ├── index.module.less │ └── index.tsx ├── form │ ├── components │ │ ├── form-item │ │ │ └── index.tsx │ │ └── form-list │ │ │ └── index.tsx │ ├── form-api.ts │ ├── index.d.ts │ ├── index.module.less │ └── index.tsx ├── icon │ ├── components │ │ ├── addfile-frame │ │ │ └── index.tsx │ │ ├── addsfile-solid │ │ │ └── index.tsx │ │ ├── adduser-frame │ │ │ └── index.tsx │ │ ├── adduser-solid │ │ │ └── index.tsx │ │ ├── addusers-frame │ │ │ └── index.tsx │ │ ├── advance-frame │ │ │ └── index.tsx │ │ ├── alert-frame │ │ │ └── index.tsx │ │ ├── alignbottom-frame │ │ │ └── index.tsx │ │ ├── aligncenter-frame │ │ │ └── index.tsx │ │ ├── aligntop-frame │ │ │ └── index.tsx │ │ ├── alipay-frame │ │ │ └── index.tsx │ │ ├── alipayfull-solid │ │ │ └── index.tsx │ │ ├── android-frame │ │ │ └── index.tsx │ │ ├── android-solid │ │ │ └── index.tsx │ │ ├── arrobuttom-solid │ │ │ └── index.tsx │ │ ├── arroleft-solid │ │ │ └── index.tsx │ │ ├── arroright-solid │ │ │ └── index.tsx │ │ ├── arrotop-solid │ │ │ └── index.tsx │ │ ├── begin-solid │ │ │ └── index.tsx │ │ ├── bell-solid │ │ │ └── index.tsx │ │ ├── bellfiled-solid │ │ │ └── index.tsx │ │ ├── bgcolor-frame │ │ │ └── index.tsx │ │ ├── bookmark-solid │ │ │ └── index.tsx │ │ ├── bookmarks-frame │ │ │ └── index.tsx │ │ ├── borderbottom-frame │ │ │ └── index.tsx │ │ ├── borderhorizontal-frame │ │ │ └── index.tsx │ │ ├── borderight-frame │ │ │ └── index.tsx │ │ ├── borderleft-frame │ │ │ └── index.tsx │ │ ├── borderlnner-frame │ │ │ └── index.tsx │ │ ├── bordersolid-frame │ │ │ └── index.tsx │ │ ├── bordertop-frame │ │ │ └── index.tsx │ │ ├── borderverticle-frame │ │ │ └── index.tsx │ │ ├── bulb-solid │ │ │ └── index.tsx │ │ ├── carry-frame │ │ │ └── index.tsx │ │ ├── cendas-frame │ │ │ └── index.tsx │ │ ├── clear-frame │ │ │ └── index.tsx │ │ ├── close-frame │ │ │ └── index.tsx │ │ ├── code-frame │ │ │ └── index.tsx │ │ ├── codeblock-frame │ │ │ └── index.tsx │ │ ├── codes-frame │ │ │ └── index.tsx │ │ ├── collapse-frame │ │ │ └── index.tsx │ │ ├── copy-frame │ │ │ └── index.tsx │ │ ├── copy-solid │ │ │ └── index.tsx │ │ ├── delete-frame │ │ │ └── index.tsx │ │ ├── delete-solid │ │ │ └── index.tsx │ │ ├── deletefile-frame │ │ │ └── index.tsx │ │ ├── deleteuser-frame │ │ │ └── index.tsx │ │ ├── deleteusers-frame │ │ │ └── index.tsx │ │ ├── dilate-frome │ │ │ └── index.tsx │ │ ├── disc-frame │ │ │ └── index.tsx │ │ ├── disike-frame │ │ │ └── index.tsx │ │ ├── doubleleft-frame │ │ │ └── index.tsx │ │ ├── doubleright-frame │ │ │ └── index.tsx │ │ ├── downleft-frame │ │ │ └── index.tsx │ │ ├── downleft-solid │ │ │ └── index.tsx │ │ ├── download-frame │ │ │ └── index.tsx │ │ ├── download-solid │ │ │ └── index.tsx │ │ ├── downright-frame │ │ │ └── index.tsx │ │ ├── downright-solid │ │ │ └── index.tsx │ │ ├── downward-frame │ │ │ └── index.tsx │ │ ├── downward-solid │ │ │ └── index.tsx │ │ ├── ellipsis-frame │ │ │ └── index.tsx │ │ ├── empty-solid │ │ │ └── index.tsx │ │ ├── enter-frame │ │ │ └── index.tsx │ │ ├── erasefile-solid │ │ │ └── index.tsx │ │ ├── exitfullscren-frame │ │ │ └── index.tsx │ │ ├── expand-frame │ │ │ └── index.tsx │ │ ├── exprot-frame │ │ │ └── index.tsx │ │ ├── eyes-frame │ │ │ └── index.tsx │ │ ├── eyesopen-frame │ │ │ └── index.tsx │ │ ├── facright-frame │ │ │ └── index.tsx │ │ ├── file-frame │ │ │ └── index.tsx │ │ ├── fileimg-frame │ │ │ └── index.tsx │ │ ├── filezip-frame │ │ │ └── index.tsx │ │ ├── flushed-frame │ │ │ └── index.tsx │ │ ├── folder-frame │ │ │ └── index.tsx │ │ ├── forward-solid │ │ │ └── index.tsx │ │ ├── forwards-frame │ │ │ └── index.tsx │ │ ├── fullscren-frame │ │ │ └── index.tsx │ │ ├── github-solid │ │ │ └── index.tsx │ │ ├── gitlab-frame │ │ │ └── index.tsx │ │ ├── google-frame │ │ │ └── index.tsx │ │ ├── google-solid │ │ │ └── index.tsx │ │ ├── handoff-frame │ │ │ └── index.tsx │ │ ├── handoff-solid │ │ │ └── index.tsx │ │ ├── highlight-frame │ │ │ └── index.tsx │ │ ├── illustrate-solid │ │ │ └── index.tsx │ │ ├── image-solid │ │ │ └── index.tsx │ │ ├── images-frame │ │ │ └── index.tsx │ │ ├── imgjpg-frame │ │ │ └── index.tsx │ │ ├── key-frame │ │ │ └── index.tsx │ │ ├── lament-frame │ │ │ └── index.tsx │ │ ├── lament-solid │ │ │ └── index.tsx │ │ ├── laughing-frame │ │ │ └── index.tsx │ │ ├── left-frame │ │ │ └── index.tsx │ │ ├── leftbottom-frame │ │ │ └── index.tsx │ │ ├── letter-frame │ │ │ └── index.tsx │ │ ├── link-frame │ │ │ └── index.tsx │ │ ├── lists-frame │ │ │ └── index.tsx │ │ ├── loading-frame │ │ │ ├── index.tsx │ │ │ └── loading.module.less │ │ ├── lock-frame │ │ │ └── index.tsx │ │ ├── login-frame │ │ │ └── index.tsx │ │ ├── logout-frame │ │ │ └── index.tsx │ │ ├── menufold-frame │ │ │ └── index.tsx │ │ ├── menuunfold-frame │ │ │ └── index.tsx │ │ ├── messages-frame │ │ │ └── index.tsx │ │ ├── minus-frame │ │ │ └── index.tsx │ │ ├── minusround-frame │ │ │ └── index.tsx │ │ ├── minusround-solid │ │ │ └── index.tsx │ │ ├── moon-frame │ │ │ └── index.tsx │ │ ├── mute-solid │ │ │ └── index.tsx │ │ ├── nocontent-frame │ │ │ └── index.tsx │ │ ├── open-frame │ │ │ └── index.tsx │ │ ├── openfolder-frame │ │ │ └── index.tsx │ │ ├── openoff-frame │ │ │ └── index.tsx │ │ ├── opensound-solid │ │ │ └── index.tsx │ │ ├── panedown-frame │ │ │ └── index.tsx │ │ ├── paneleft-frame │ │ │ └── index.tsx │ │ ├── paneright-frame │ │ │ └── index.tsx │ │ ├── panetop-frame │ │ │ └── index.tsx │ │ ├── paperclip-frame │ │ │ └── index.tsx │ │ ├── partyexits-frame │ │ │ └── index.tsx │ │ ├── picture-frame │ │ │ └── index.tsx │ │ ├── pictureleft-fram │ │ │ └── index.tsx │ │ ├── pictureright-frame │ │ │ └── index.tsx │ │ ├── play-frame │ │ │ └── index.tsx │ │ ├── plus-frame │ │ │ └── index.tsx │ │ ├── plusround-frame │ │ │ └── index.tsx │ │ ├── plusround-solid │ │ │ └── index.tsx │ │ ├── posit-solid │ │ │ └── index.tsx │ │ ├── posits-frame │ │ │ └── index.tsx │ │ ├── poweroff-frame │ │ │ └── index.tsx │ │ ├── previous-frame │ │ │ └── index.tsx │ │ ├── previousstep-frame │ │ │ └── index.tsx │ │ ├── printer-frame │ │ │ └── index.tsx │ │ ├── quesround-frame │ │ │ └── index.tsx │ │ ├── question-frame │ │ │ └── index.tsx │ │ ├── question-solid │ │ │ └── index.tsx │ │ ├── reply-frame │ │ │ └── index.tsx │ │ ├── replys-solid │ │ │ └── index.tsx │ │ ├── rest-frame │ │ │ └── index.tsx │ │ ├── return-frame │ │ │ └── index.tsx │ │ ├── retweet-frame │ │ │ └── index.tsx │ │ ├── rewind-solid │ │ │ └── index.tsx │ │ ├── right-frame │ │ │ └── index.tsx │ │ ├── rightbottom-frame │ │ │ └── index.tsx │ │ ├── rightcircle-frame │ │ │ └── index.tsx │ │ ├── rollback-frame │ │ │ └── index.tsx │ │ ├── rounlament-frame │ │ │ └── index.tsx │ │ ├── save-frame │ │ │ └── index.tsx │ │ ├── search-frame │ │ │ └── index.tsx │ │ ├── send-frame │ │ │ └── index.tsx │ │ ├── setting-frame │ │ │ └── index.tsx │ │ ├── settings-solid │ │ │ └── index.tsx │ │ ├── shrinks-frame │ │ │ └── index.tsx │ │ ├── skin-frame │ │ │ └── index.tsx │ │ ├── sound-frame │ │ │ └── index.tsx │ │ ├── soundoff-frame │ │ │ └── index.tsx │ │ ├── star-solid │ │ │ └── index.tsx │ │ ├── stars-frame │ │ │ └── index.tsx │ │ ├── stepon-solid │ │ │ └── index.tsx │ │ ├── sunny-frame │ │ │ └── index.tsx │ │ ├── support-frame │ │ │ └── index.tsx │ │ ├── swap-frame │ │ │ └── index.tsx │ │ ├── swapleft-frame │ │ │ └── index.tsx │ │ ├── swapright-frame │ │ │ └── index.tsx │ │ ├── sweep-frame │ │ │ └── index.tsx │ │ ├── switchusers-solid │ │ │ └── index.tsx │ │ ├── taobao-frame │ │ │ └── index.tsx │ │ ├── taobao-solid │ │ │ └── index.tsx │ │ ├── thumb-solid │ │ │ └── index.tsx │ │ ├── tick-solid │ │ │ └── index.tsx │ │ ├── timeout-solid │ │ │ └── index.tsx │ │ ├── top-frame │ │ │ └── index.tsx │ │ ├── transfer-frame │ │ │ └── index.tsx │ │ ├── under-frame │ │ │ └── index.tsx │ │ ├── unfold-frame │ │ │ └── index.tsx │ │ ├── unlock-frame │ │ │ └── index.tsx │ │ ├── updatetime-frame │ │ │ └── index.tsx │ │ ├── upleft-frame │ │ │ └── index.tsx │ │ ├── upload-frame │ │ │ └── index.tsx │ │ ├── upload-solid │ │ │ └── index.tsx │ │ ├── upright-frame │ │ │ └── index.tsx │ │ ├── upward-frame │ │ │ └── index.tsx │ │ ├── upward-solid │ │ │ └── index.tsx │ │ ├── user-frame │ │ │ └── index.tsx │ │ ├── user-solid │ │ │ └── index.tsx │ │ ├── userswich-frame │ │ │ └── index.tsx │ │ ├── warning-frame │ │ │ └── index.tsx │ │ ├── wechat-frame │ │ │ └── index.tsx │ │ ├── wechatfull-solid │ │ │ └── index.tsx │ │ ├── weibo-frame │ │ │ └── index.tsx │ │ ├── weibofull-solid │ │ │ └── index.tsx │ │ ├── wifi-frame │ │ │ └── index.tsx │ │ ├── wrong-solid │ │ │ └── index.tsx │ │ └── wrongs-frame │ │ │ └── index.tsx │ ├── icon.ts │ ├── index.d.ts │ └── index.module.less ├── input │ ├── index.d.ts │ ├── index.module.less │ └── index.tsx ├── menu │ └── menu.js ├── message │ ├── index.d.ts │ ├── index.module.less │ └── index.tsx ├── modal │ ├── index.d.ts │ ├── index.module.less │ └── index.tsx ├── mount-dom │ ├── index.d.ts │ └── index.ts ├── notification │ ├── index.d.ts │ ├── index.module.less │ └── index.tsx ├── pagination │ ├── index.d.ts │ ├── index.module.less │ ├── index.tsx │ └── list │ │ └── index.tsx ├── popconfirm │ └── popconfirm.js ├── popover │ └── popover.js ├── progress │ └── progress.js ├── radio │ ├── index.d.ts │ ├── index.module.less │ └── index.tsx ├── range-picker │ ├── index.module.less │ └── index.tsx ├── rate │ ├── index.d.ts │ ├── index.module.less │ └── index.tsx ├── s-h-m │ ├── TimePicker.less │ ├── index.d.ts │ └── index.tsx ├── select │ ├── commo.module.less │ ├── components │ │ ├── lefticon │ │ │ └── index.tsx │ │ ├── multiple │ │ │ ├── components │ │ │ │ └── itme │ │ │ │ │ └── index.tsx │ │ │ └── index.tsx │ │ ├── option │ │ │ ├── index.module.less │ │ │ └── index.tsx │ │ └── single │ │ │ ├── index.module.less │ │ │ └── index.tsx │ ├── index.d.ts │ ├── index.module.less │ └── index.tsx ├── skeleton │ └── skeleton.js ├── slider │ └── slider.js ├── spin │ └── spin.js ├── style-animation │ ├── directionenter.module.less │ └── directionout.module.less ├── switch │ ├── index.d.ts │ ├── index.module.less │ └── index.tsx ├── table │ ├── components │ │ ├── empty │ │ │ └── empty.tsx │ │ ├── group-child-th │ │ │ └── group-child-th.tsx │ │ ├── gtoup-tbody │ │ │ └── group-tbody.tsx │ │ ├── unfold-button │ │ │ ├── index.module.less │ │ │ └── unfold-button.tsx │ │ └── unfold-td │ │ │ └── unfold-td.tsx │ ├── draggable.ts │ ├── group-handle.ts │ ├── index.d.ts │ ├── index.module.less │ └── index.tsx ├── tag │ └── tag.js ├── time-picker │ └── time-picker.js ├── tooltip │ ├── backups │ │ ├── index copy.tsx │ │ └── switchPos.ts │ ├── components │ │ └── trigger │ │ │ ├── getOffsetByPlacement.ts │ │ │ ├── trigger.d.ts │ │ │ ├── trigger.module.less │ │ │ └── trigger.tsx │ ├── index.d.ts │ ├── index.tsx │ └── tooltip.module.less ├── transfer │ └── transfer.js ├── tree-select │ └── tree-select.js ├── tree │ └── tree.js └── upload │ ├── components │ ├── avatar-list │ │ ├── index.less │ │ ├── index.module.less │ │ └── index.tsx │ └── file-list │ │ ├── index.less │ │ ├── index.module.less │ │ └── index.tsx │ ├── fileUpload.ts │ ├── index.d.ts │ ├── index.module.less │ └── index.tsx ├── config ├── style-const.ts └── style.module.less ├── index.ts ├── package.json ├── tsconfig.json ├── typings └── index.d.ts ├── utils └── index.ts ├── vite.config.ts └── yarn.lock /.github/workflows/static.yml: -------------------------------------------------------------------------------- 1 | # Simple workflow for deploying static content to GitHub Pages 2 | name: Deploy static content to Pages 3 | 4 | on: 5 | # Runs on pushes targeting the default branch 6 | push: 7 | branches: ["main"] 8 | 9 | # Allows you to run this workflow manually from the Actions tab 10 | workflow_dispatch: 11 | 12 | # Sets permissions of the GITHUB_TOKEN to allow deployment to GitHub Pages 13 | permissions: 14 | contents: read 15 | pages: write 16 | id-token: write 17 | 18 | # Allow only one concurrent deployment, skipping runs queued between the run in-progress and latest queued. 19 | # However, do NOT cancel in-progress runs as we want to allow these production deployments to complete. 20 | concurrency: 21 | group: "pages" 22 | cancel-in-progress: false 23 | 24 | jobs: 25 | # Single deploy job since we're just deploying 26 | deploy: 27 | environment: 28 | name: github-pages 29 | url: ${{ steps.deployment.outputs.page_url }} 30 | runs-on: ubuntu-latest 31 | steps: 32 | - name: Checkout 33 | uses: actions/checkout@v4 34 | - name: Setup Pages 35 | uses: actions/configure-pages@v4 36 | - name: Upload artifact 37 | uses: actions/upload-pages-artifact@v3 38 | with: 39 | # Upload entire repository 40 | path: '.' 41 | - name: Deploy to GitHub Pages 42 | id: deployment 43 | uses: actions/deploy-pages@v4 44 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | /node_modules 2 | /dist 3 | .idea/ 4 | /ayongUI 5 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | 2 | 3 | ###### image 4 | 5 | ## 在线 组件使用文档 官网地址 6 | https://ayongnice.github.io/ayonguidocs 7 | 8 | 9 | ## 关注微信公众号 阿勇学前端 10 | 11 | 获取组件库最新动态 和最新前端技术博客
12 | image 13 | 14 | 15 | ayongui 是一个功能丰富的 React 组件库，提供了一系列用于构建现代 Web 应用程序的组件。该组件库易于使用和高度可定制，旨在帮助您加快项目开发速度。 16 | 17 | ### 安装 18 | 19 | ```bash 20 | npm install ayongui 21 | ``` 22 | 23 | ## 特点 24 | 25 | 1. 丰富的组件：ayongui 提供了多种常见 UI 组件，如按钮、输入框、单选框等，以满足您的项目需求。 26 | 2. 高度可定制：每个组件都支持各种配置选项，以便根据您的设计和功能要求进行自定义。 27 | 3. 简洁易用：ayongui 遵循直观的设计原则，使组件易于理解和使用。 28 | 29 | ## 组件结构目录说明 30 | 31 | ```json 32 | ———— components 33 | |··· 主体组件 34 | ———— config 组件全局配置 35 | | 36 | ———style.module.less 全局样式 37 | ———style-const.ts 全局样式TS常量 38 | ———— utils 工具类 39 | ———— index.ts 组件总入口文件所有组件导出地方 40 | ———— package.json 组件依赖文件 41 | ———— tsconfig.json 组件TS配置 42 | ———— tsconfig.node.json 组件TS-node配置 43 | ———— vite.config.ts 组件打包配置 44 | ———— yarn.lock 组件打包依赖版本 45 | ``` 46 | 47 | 48 | -------------------------------------------------------------------------------- /components/alert/alert.js: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/AyongNice/ayongUI/d06a6ea9048e3109fb6e2d3f5285f980ccfb633f/components/alert/alert.js -------------------------------------------------------------------------------- /components/badge/badge.js: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/AyongNice/ayongUI/d06a6ea9048e3109fb6e2d3f5285f980ccfb633f/components/badge/badge.js -------------------------------------------------------------------------------- /components/base-calendar/index.d.ts: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | 3 | export interface CalendarProps { 4 | style?: React.CSSProperties; // 自定义样式 5 | className?: string; // 自定义类名 6 | disabled?: boolean; // 禁用 7 | defaultValue?: Date | Date[]; // 默认日期值 8 | value?: Date | Date[]; // 日期值 9 | onChange: (day: DayItem | DayItem[]) => void;//选择变化 10 | dayCellRender?: (day: DayItem) => React.ReactNode | null; // 自定义日期渲染 11 | picker: 'date' | 'month' | 'year' | 'quarter';// 选择器类型, 12 | isRange?: boolean; // 是否是范围选择 13 | value?: Date | Date[]; // 日期值 14 | defaultValue?: Date | Date[]; // 默认日期值 15 | disabledDate?: (day: DayItem) => boolean; // 禁用日期 16 | showToday?: boolean; // 是否展示今天 17 | yearsRange?: number[]; // 年份范围 18 | onChange?: (day: DayItem | DayItem[]) => void; // 日期变化 19 | onClear?: () => void; // 清空 20 | onMonthChange?: (month: number) => void; // 月份变化 21 | showTime?: boolean; 22 | dayFormatter?: (day: DayItem) => string; // 日期格式化 23 | disabledTime?: (day: DayItem) => boolean; // 禁用时间 24 | } 25 | 26 | 27 | export interface DayItem { 28 | "date": string,// 天数日期字符 29 | "comprehensive": Date,// 日期类型 30 | "comprehensiveStr": string,// 日期字符 31 | "monthSortMode": number, // 日期模式 0 上个月 1 当月 2 下个月 32 | "isSelected": boolean, // 是否选中 33 | "isRangeSelected": boolean, // 是否下拉框显示范围内 34 | "isToday": boolean,// 是否是今年今天 35 | } 36 | 37 | declare const Calendar: React.FC; 38 | 39 | export default Calendar; 40 | -------------------------------------------------------------------------------- /components/button/index.d.ts: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | 3 | export interface ButtonProps { 4 | style?: React.CSSProperties; // 自定义样式 5 | time?: number; // 防抖时间设置 0 为不防抖 6 | href?: string; // 跳转连接 7 | text?: string; // 按钮文案 8 | className?: string; // 自定义样式类名 9 | children: React.ReactNode; // 按钮内容 10 | disabled?: boolean; // 禁用 11 | loading?: boolean; 12 | icon?: React.ReactElement; // icon图标 13 | type?: 'primary' | 'dashed' | 'safe' | 'error' | 'warn'|'text'; // 按钮类型 利用样式实现 14 | size?: 'large' | 'default' | 'small'; // 按钮大小 利用样式padding 实现 15 | shape?: 'circle' | 'default' | 'round' | 'strong'; // 按钮形状 利用样式border-radius 实现 16 | htmlType?: 'button' | 'submit' | 'reset'; // 原生button类型 17 | onClick?: () => void; // 点击事件 18 | } 19 | 20 | 21 | declare const Button: React.FC; 22 | 23 | export default Button; 24 | -------------------------------------------------------------------------------- /components/calendar/index.d.ts: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | 3 | export interface CalendarProps { 4 | style?: React.CSSProperties; // 自定义样式 5 | disabled?: boolean; // 禁用 6 | selectedMode: 'noSelect' | 'single' | 'multiple';//选择模式 7 | onChange: (day: DayItem | DayItem[]) => void;//选择变化 8 | dayCellRender?: (day: DayItem) => React.ReactNode | null; // 自定义日期渲染 9 | } 10 | 11 | 12 | export interface DayItem { 13 | "date": string,// 日期字符 14 | "comprehensive": Date,// 日期类型 15 | "comprehensiveStr": "2024-02-02", 16 | "monthSortMode": number, // 日期模式 0 上个月 1 当月 2 下个月 17 | "isSelected": boolean, // 是否选中 18 | "isRangeSelected": boolean, // 是否在范围内 19 | "isToday": boolean,// 是否是今年今天 20 | } 21 | 22 | declare const Calendar: React.FC; 23 | 24 | export default Calendar; 25 | -------------------------------------------------------------------------------- /components/calendar/index.less: -------------------------------------------------------------------------------- 1 | 2 | .day { 3 | color: var(--ayong-font-dark); 4 | width: 100px; 5 | height: 100px; 6 | } 7 | 8 | .notCurMonth { 9 | color: var(--ayong-plaster-grey); 10 | } 11 | 12 | .currentDay { 13 | color: var(--ayong-primary); 14 | } 15 | 16 | .selectDay { 17 | color: var(--ayong-apricot-yellow); 18 | } 19 | 20 | .today { 21 | color: var(--ayong-light); 22 | border-radius:var(--ayong-radius) ; 23 | background: var(--ayong-primary); 24 | } 25 | 26 | // -------------------------------------------------------------------------------- /components/checkbox/index.d.ts: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | 3 | export interface CheckboxProps { 4 | value: string | number;//多个组合时候当前值 5 | className?: string; // 自定义样式类名最外层的样式 6 | checked?: boolean; // 是否选中 7 | disabled: boolean; // 禁用 8 | defaultValue?: string | number | number [] | string[]; // 默认值 9 | children: React.ReactNode; // 插槽内容 10 | size?: 'large' | 'default' | 'small' | 'mini'; // 按钮类型的大小 继承Button组件参数 11 | type?: 'primary' | 'dashed' | 'safe' | 'error' | 'warn'; // 按钮类型 继承Button组件参数 12 | onChange?: (e: React.ChangeEvent) => void; // 点击事件 13 | indeterminate:boolean;//设置 indeterminate 状态，只负责样式控制 14 | } 15 | 16 | export interface CheckboxGroupProps extends CheckboxProps { 17 | options: Option[]; // 按钮类型 继承Button组件参数 18 | value: Option[]; // 默认值 19 | } 20 | 21 | export interface Option { 22 | value: string | number; 23 | label: string | number; 24 | disabled?: boolean; 25 | } 26 | 27 | declare const Checkbox: React.FC; 28 | 29 | export default Checkbox; 30 | -------------------------------------------------------------------------------- /components/conditional-render/conditional-render.tsx: -------------------------------------------------------------------------------- 1 | /** 2 | * @file 条件渲染 容器组件 3 | * 2023/11/07 4 | */ 5 | 6 | import React from 'react'; 7 | import './index.less' 8 | 9 | interface ConditionalRenderPorps { 10 | mode?: 'show' | 'if'; // show: 利用样式 展示隐藏 类似于 vue 的 v-show，if: 利用条件判断展示隐藏 类似于 vue 的 v-if 11 | show: boolean; 12 | children: React.ReactNode; 13 | } 14 | 15 | function ConditionalRender({mode = 'show', show, children, renderIf, renderElse}: ConditionalRenderPorps) { 16 | 17 | if (mode === 'show') { 18 | return
{children}
; 19 | } 20 | if (mode === 'if') { 21 | //react模版标签 只能有一个根节点 22 | return show ? children : null; 23 | } 24 | if (mode === 'else') { 25 | return show ? renderIf() : renderElse() 26 | } 27 | 28 | } 29 | 30 | export default ConditionalRender; 31 | -------------------------------------------------------------------------------- /components/conditional-render/index.less: -------------------------------------------------------------------------------- 1 | .show { 2 | display: block; 3 | } 4 | 5 | .hide { 6 | display: none; 7 | } 8 | -------------------------------------------------------------------------------- /components/date-picker/index.d.ts: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | 3 | export interface DatePickerProps { 4 | style?: React.CSSProperties; // 自定义样式 5 | className?: string; // 自定义类名 6 | disabled?: boolean; // 禁用 7 | onChange: (day: DayItem | DayItem[]) => void;//选择变化 8 | dayCellRender?: (day: DayItem) => React.ReactNode | null; // 自定义日期渲染 9 | picker: 'date' | 'month' | 'year' | 'quarter';// 选择器类型, 10 | isRange?: boolean; // 是否是范围选择 11 | value?: Date | Date[]; // 日期值 12 | defaultValue?: Date | Date[]; // 默认日期值 13 | disabledDate?: (day: DayItem) => boolean; // 禁用日期 14 | showToday?: boolean; // 是否展示今天 15 | yearsRange?: [number, number]; // 年份范围 16 | onChange?: (day: DayItem | DayItem[]) => void; // 日期变化 17 | onClear?: () => void; // 清空 18 | onMonthChange?: (month: number) => void; // 月份变化 19 | showTmie?: boolean; 20 | } 21 | 22 | 23 | export interface DayItem { 24 | "date": string,// 日期字符 25 | "comprehensive": Date,// 日期类型 26 | "comprehensiveStr": "2024-02-02", 27 | "monthSortMode": number, // 日期模式 0 上个月 1 当月 2 下个月 28 | "isSelected": boolean, // 是否选中 29 | "isRangeSelected": boolean, // 是否在范围内 30 | "isToday": boolean,// 是否是今年今天 31 | } 32 | 33 | declare const DatePicker: React.FC; 34 | 35 | export default DatePicker; 36 | -------------------------------------------------------------------------------- /components/date-time-picker/date-time-picker.js: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/AyongNice/ayongUI/d06a6ea9048e3109fb6e2d3f5285f980ccfb633f/components/date-time-picker/date-time-picker.js -------------------------------------------------------------------------------- /components/drawer/index.d.ts: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | 3 | export interface DrawerProps { 4 | title?: React.ReactNode; // 标题 默认值'' 5 | zIndex?: number; // z-index 默认值 999 6 | open?: boolean; // 是否显示 默认值 false 7 | bodyClassName?: string; // 自定义类名 默认值'' 8 | headerClassName?: React.CSSProperties; // 头部样式 默认值'' 9 | getContainer?: boolean; // 容器 默认值 false 10 | size?: 'string'; // 像素大小 top/bottom 时使用 高度 left/right 时使用 宽度 默认值'' 11 | maskClosable?: boolean; // 点击遮罩是否关闭 默认值 true 12 | placement?: 'top' | 'right' | 'bottom' | 'left'; // 位置 默认值 right 13 | onClose?: (e: React.MouseEvent) => void; // 关闭回调 14 | children: React.ReactNode; // 内容 15 | mainRender?: React.ReactNode; // 自定义抽屉内容 16 | headerRender?: React.ReactNode; // 自定义抽屉内容 17 | afterOpenChange?: (visible: boolean) => void; // 显示隐藏回调 18 | closeIcon?: React.ReactNode | null; // 关闭按钮 默认值 null 19 | destroyOnClose?: boolean; // 关闭时销毁 20 | forceRender?: boolean; // 强制渲染 21 | keyboard?: boolean; // 是否支持键盘 esc 关闭 22 | } 23 | 24 | 25 | export interface DayItem { 26 | "date": string,// 日期字符 27 | "comprehensive": Date,// 日期类型 28 | "comprehensiveStr": "2024-02-02", 29 | "monthSortMode": number, // 日期模式 0 上个月 1 当月 2 下个月 30 | "isSelected": boolean, // 是否选中 31 | "isRangeSelected": boolean, // 是否在范围内 32 | "isToday": boolean,// 是否是今年今天 33 | } 34 | 35 | declare const Drawer: React.FC; 36 | 37 | export default Drawer; 38 | -------------------------------------------------------------------------------- /components/form/components/form-list/index.tsx: -------------------------------------------------------------------------------- 1 | import React, {forwardRef, useEffect, useState} from 'react'; 2 | import {FormProps, CloneFormElementProps} from './index.d' 3 | import {FormStore} from './form-api' 4 | import {generateUUID} from '../../../../utils/index.ts' 5 | import FormItem from './components/form-item/index.tsx' 6 | 7 | 8 | const FormList = forwardRef((props, ref) => { 9 | const [fields, setFields] = useState([{restField: {}, key: generateUUID()}]); 10 | const { 11 | name, 12 | value, 13 | onChange = () => { 14 | 15 | }, 16 | children = () => { 17 | }, 18 | _remove = () => { 19 | 20 | } 21 | } = props 22 | 23 | const add = (field) => { 24 | setFields((pre) => { 25 | 26 | return [...pre, {restField: {}, key: generateUUID()}] 27 | }) 28 | 29 | 30 | } 31 | 32 | const remove = key => { 33 | 34 | onChange({operationType:'remove', parentName: name, index: fields.findIndex(_ => key === _.key)}); 35 | setFields(pre => pre.filter(_ => key !== _.key)) 36 | } 37 | return <> 38 | {children(fields, {remove, add, props: {...props, parentName: name, ref}})} 39 | 40 | }) 41 | 42 | FormList.displayName = 'FormList' 43 | export default FormList; 44 | -------------------------------------------------------------------------------- /components/icon/components/addfile-frame/index.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import {IconProps} from "../../index"; 3 | import icon from "../../index.module.less"; 4 | 5 | const Addfile = (props: IconProps) => { 6 | const { 7 | className = "", style = {}, onClick = () => { 8 | } 9 | } = props; 10 | const styleClassName: string = `${icon.default} ${className}`; 11 | return ( 12 | 23 | 24 | 25 | ); 26 | }; 27 | export default Addfile; 28 | -------------------------------------------------------------------------------- /components/icon/components/addsfile-solid/index.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import {IconProps} from "../../index"; 3 | import icon from "../../index.module.less"; 4 | 5 | const Addsfile = (props: IconProps) => { 6 | const { 7 | className = "", style = {}, onClick = () => { 8 | } 9 | } = props; 10 | const styleClassName: string = `${icon.default} ${className}`; 11 | return ( 12 | 23 | 24 | 25 | ); 26 | }; 27 | export default Addsfile; 28 | -------------------------------------------------------------------------------- /components/icon/components/adduser-solid/index.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import {IconProps} from "../../index"; 3 | import icon from "../../index.module.less"; 4 | 5 | const Addser = (props: IconProps) => { 6 | const { 7 | className = "", style = {}, onClick = () => { 8 | } 9 | } = props; 10 | const styleClassName: string = `${icon.default} ${className}`; 11 | return ( 12 | 23 | 24 | 25 | ); 26 | }; 27 | 28 | export default Addser; -------------------------------------------------------------------------------- /components/icon/components/advance-frame/index.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { IconProps } from "../../index"; 3 | import icon from "../../index.module.less"; 4 | 5 | const Advance = (props: IconProps) => { 6 | const { className = "", style = {}, onClick = () => {} } = props; 7 | const styleClassName: string = `${icon.default} ${className}`; 8 | return ( 9 | 20 | 21 | 22 | ); 23 | }; 24 | 25 | export default Advance; 26 | -------------------------------------------------------------------------------- /components/icon/components/alignbottom-frame/index.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import {IconProps} from "../../index"; 3 | import icon from "../../index.module.less"; 4 | 5 | const Alignbottom = (props: IconProps) => { 6 | const { 7 | className = "", style = {}, onClick = () => { 8 | } 9 | } = props; 10 | const styleClassName: string = `${icon.default} ${className}`; 11 | return ( 12 | 23 | 24 | 25 | ); 26 | }; 27 | 28 | 29 | export default Alignbottom; 30 | -------------------------------------------------------------------------------- /components/icon/components/aligncenter-frame/index.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import {IconProps} from "../../index"; 3 | import icon from "../../index.module.less"; 4 | 5 | const Aligncenter = (props: IconProps) => { 6 | const { 7 | className = "", style = {}, onClick = () => { 8 | } 9 | } = props; 10 | const styleClassName: string = `${icon.default} ${className}`; 11 | return ( 12 | 23 | 24 | 25 | ); 26 | }; 27 | 28 | 29 | export default Aligncenter; 30 | -------------------------------------------------------------------------------- /components/icon/components/aligntop-frame/index.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import {IconProps} from "../../index"; 3 | import icon from "../../index.module.less"; 4 | 5 | const Aligntop = (props: IconProps) => { 6 | const { 7 | className = "", style = {}, onClick = () => { 8 | } 9 | } = props; 10 | const styleClassName: string = `${icon.default} ${className}`; 11 | return ( 12 | 23 | 24 | 25 | ); 26 | }; 27 | 28 | 29 | export default Aligntop; 30 | -------------------------------------------------------------------------------- /components/icon/components/alipay-frame/index.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { IconProps } from "../../index"; 3 | import icon from "../../index.module.less"; 4 | 5 | const Alipay = (props: IconProps) => { 6 | const { className = "", style = {}, onClick = () => {} } = props; 7 | const styleClassName: string = `${icon.default} ${className}`; 8 | return ( 9 | 20 | 21 | 22 | ); 23 | }; 24 | 25 | export default Alipay; 26 | -------------------------------------------------------------------------------- /components/icon/components/alipayfull-solid/index.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { IconProps } from "../../index"; 3 | import icon from "../../index.module.less"; 4 | const Alipayfull = (props: IconProps) => { 5 | const { className = "", style = {}, onClick = () => {} } = props; 6 | const styleClassName: string = `${icon.default} ${className}`; 7 | return ( 8 | 19 | 20 | 21 | ); 22 | }; 23 | export default Alipayfull; 24 | -------------------------------------------------------------------------------- /components/icon/components/arrobuttom-solid/index.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { IconProps } from "../../index"; 3 | import icon from "../../index.module.less"; 4 | 5 | const Arrowbuttomfu = (props: IconProps) => { 6 | const { className = "", style = {}, onClick = () => {} } = props; 7 | const styleClassName: string = `${icon.default} ${className}`; 8 | return ( 9 | 20 | 21 | 22 | ); 23 | }; 24 | 25 | 26 | export default Arrowbuttomfu; 27 | -------------------------------------------------------------------------------- /components/icon/components/arroleft-solid/index.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { IconProps } from "../../index"; 3 | import icon from "../../index.module.less"; 4 | 5 | const Arroleft = (props: IconProps) => { 6 | const { className = "", style = {}, onClick = () => {} } = props; 7 | const styleClassName: string = `${icon.default} ${className}`; 8 | return ( 9 | 20 | 21 | 22 | ); 23 | }; 24 | 25 | 26 | export default Arroleft; 27 | -------------------------------------------------------------------------------- /components/icon/components/arroright-solid/index.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { IconProps } from "../../index"; 3 | import icon from "../../index.module.less"; 4 | 5 | const Arroright = (props: IconProps) => { 6 | const { className = "", style = {}, onClick = () => {} } = props; 7 | const styleClassName: string = `${icon.default} ${className}`; 8 | return ( 9 | 20 | 21 | 22 | ); 23 | }; 24 | 25 | 26 | export default Arroright; 27 | -------------------------------------------------------------------------------- /components/icon/components/arrotop-solid/index.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { IconProps } from "../../index"; 3 | import icon from "../../index.module.less"; 4 | 5 | const Arrotopfu = (props: IconProps) => { 6 | const { className = "", style = {}, onClick = () => {} } = props; 7 | const styleClassName: string = `${icon.default} ${className}`; 8 | return ( 9 | 20 | 21 | 22 | ); 23 | }; 24 | 25 | 26 | export default Arrotopfu; 27 | -------------------------------------------------------------------------------- /components/icon/components/begin-solid/index.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import {IconProps} from "../../index"; 3 | import icon from "../../index.module.less"; 4 | 5 | const Begin = (props: IconProps) => { 6 | const { 7 | className = "", style = {}, onClick = () => { 8 | } 9 | } = props; 10 | const styleClassName: string = `${icon.default} ${className}`; 11 | return ( 12 | 23 | 24 | 25 | ); 26 | }; 27 | export default Begin; 28 | -------------------------------------------------------------------------------- /components/icon/components/bell-solid/index.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import {IconProps} from "../../index"; 3 | import icon from "../../index.module.less"; 4 | 5 | const Bell = (props: IconProps) => { 6 | const { 7 | className = "", style = {}, onClick = () => { 8 | } 9 | } = props; 10 | const styleClassName: string = `${icon.default} ${className}`; 11 | return ( 12 | 23 | 24 | 25 | ); 26 | }; 27 | 28 | export default Bell; 29 | -------------------------------------------------------------------------------- /components/icon/components/bellfiled-solid/index.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import {IconProps} from "../../index"; 3 | import icon from "../../index.module.less"; 4 | const Bellfiled = (props: IconProps) => { 5 | const {className = "", style = {}, onClick = () => {}} = props; 6 | const styleClassName: string = `${icon.default} ${className}`; 7 | return ( 8 | 19 | 20 | 21 | ); 22 | }; 23 | export default Bellfiled; -------------------------------------------------------------------------------- /components/icon/components/bgcolor-frame/index.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import {IconProps} from "../../index"; 3 | import icon from "../../index.module.less"; 4 | 5 | const Bgcolor = (props: IconProps) => { 6 | const { 7 | className = "", style = {}, onClick = () => { 8 | } 9 | } = props; 10 | const styleClassName: string = `${icon.default} ${className}`; 11 | return ( 12 | 23 | 25 | 26 | ); 27 | }; 28 | 29 | export default Bgcolor; 30 | -------------------------------------------------------------------------------- /components/icon/components/bordersolid-frame/index.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { IconProps } from "../../index"; 3 | import icon from "../../index.module.less"; 4 | 5 | const Bordersolid = (props: IconProps) => { 6 | const { className = "", style = {}, onClick = () => {} } = props; 7 | const styleClassName: string = `${icon.default} ${className}`; 8 | return ( 9 | 20 | 21 | 22 | ); 23 | }; 24 | 25 | 26 | export default Bordersolid; 27 | -------------------------------------------------------------------------------- /components/icon/components/bulb-solid/index.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import {IconProps} from "../../index"; 3 | import icon from "../../index.module.less"; 4 | const Bulb = (props: IconProps) => { 5 | const {className = "", style = {}, onClick = () => {}} = props; 6 | const styleClassName: string = `${icon.default} ${className}`; 7 | return ( 8 | 19 | 20 | 21 | ); 22 | }; 23 | export default Bulb; -------------------------------------------------------------------------------- /components/icon/components/carry-frame/index.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import {IconProps} from "../../index"; 3 | import icon from "../../index.module.less"; 4 | 5 | const Carry = (props: IconProps) => { 6 | const { 7 | className = "", style = {}, onClick = () => { 8 | } 9 | } = props; 10 | const styleClassName: string = `${icon.default} ${className}`; 11 | return ( 12 | 23 | 24 | 25 | ); 26 | }; 27 | export default Carry; 28 | -------------------------------------------------------------------------------- /components/icon/components/cendas-frame/index.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import {IconProps} from "../../index"; 3 | import icon from "../../index.module.less"; 4 | const Cendas = (props: IconProps) => { 5 | const {className = "", style = {}, onClick = () => {}} = props; 6 | const styleClassName: string = `${icon.default} ${className}`; 7 | return ( 8 | 19 | 20 | 21 | ); 22 | }; 23 | export default Cendas; 24 | -------------------------------------------------------------------------------- /components/icon/components/clear-frame/index.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import {IconProps} from "../../index"; 3 | import icon from "../../index.module.less"; 4 | 5 | const Clear = (props: IconProps) => { 6 | const { 7 | className = "", style = {}, onClick = () => { 8 | } 9 | } = props; 10 | const styleClassName: string = `${icon.default} ${className}`; 11 | return ( 12 | 23 | 24 | 25 | ); 26 | }; 27 | export default Clear; 28 | -------------------------------------------------------------------------------- /components/icon/components/close-frame/index.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import {IconProps} from "../../index"; 3 | import icon from "../../index.module.less"; 4 | const Close = (props: IconProps) => { 5 | const {className = "", style = {}, onClick = () => {}} = props; 6 | const styleClassName: string = `${icon.default} ${className}`; 7 | return ( 8 | 19 | 20 | 21 | ); 22 | }; 23 | 24 | export default Close; 25 | -------------------------------------------------------------------------------- /components/icon/components/code-frame/index.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { IconProps } from "../../index"; 3 | import icon from "../../index.module.less"; 4 | 5 | const CodeDisplay = (props: IconProps) => { 6 | const { className = "", style = {}, onClick = () => {} } = props; 7 | const styleClassName: string = `${icon.default} ${className}`; 8 | return ( 9 | 20 | 21 | 22 | ); 23 | }; 24 | 25 | 26 | export default CodeDisplay; 27 | -------------------------------------------------------------------------------- /components/icon/components/collapse-frame/index.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { IconProps } from "../../index"; 3 | import icon from "../../index.module.less"; 4 | 5 | const Collapse = (props: IconProps) => { 6 | const { className = "", style = {}, onClick = () => {} } = props; 7 | const styleClassName: string = `${icon.default} ${className}`; 8 | return ( 9 | 20 | 21 | 22 | ); 23 | }; 24 | 25 | 26 | export default Collapse; 27 | -------------------------------------------------------------------------------- /components/icon/components/copy-frame/index.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import {IconProps} from "../../index"; 3 | import icon from "../../index.module.less"; 4 | 5 | const FileCopy = (props: IconProps) => { 6 | const { 7 | className = "", style = {}, onClick = () => { 8 | } 9 | } = props; 10 | const styleClassName: string = `${icon.default} ${className}`; 11 | return ( 12 | 23 | 25 | 26 | ); 27 | }; 28 | 29 | 30 | export default FileCopy; 31 | -------------------------------------------------------------------------------- /components/icon/components/copy-solid/index.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import {IconProps} from "../../index"; 3 | import icon from "../../index.module.less"; 4 | 5 | const Fulcopy = (props: IconProps) => { 6 | const { 7 | className = "", style = {}, onClick = () => { 8 | } 9 | } = props; 10 | const styleClassName: string = `${icon.default} ${className}`; 11 | return ( 12 | 23 | 24 | 25 | ); 26 | }; 27 | 28 | 29 | export default Fulcopy; 30 | -------------------------------------------------------------------------------- /components/icon/components/delete-frame/index.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import {IconProps} from "../../index"; 3 | import icon from "../../index.module.less"; 4 | 5 | const Delete = (props: IconProps) => { 6 | const { 7 | className = "", style = {}, onClick = () => { 8 | } 9 | } = props; 10 | const styleClassName: string = `${icon.default} ${className}`; 11 | return ( 12 | 23 | 24 | 25 | ); 26 | }; 27 | 28 | 29 | export default Delete; 30 | -------------------------------------------------------------------------------- /components/icon/components/delete-solid/index.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import {IconProps} from "../../index"; 3 | import icon from "../../index.module.less"; 4 | 5 | const Deletes = (props: IconProps) => { 6 | const { 7 | className = "", style = {}, onClick = () => { 8 | } 9 | } = props; 10 | const styleClassName: string = `${icon.default} ${className}`; 11 | return ( 12 | 23 | 25 | 26 | ); 27 | }; 28 | 29 | export default Deletes; -------------------------------------------------------------------------------- /components/icon/components/dilate-frome/index.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { IconProps } from "../../index"; 3 | import icon from "../../index.module.less"; 4 | 5 | const Dilate = (props: IconProps) => { 6 | const { className = "", style = {}, onClick = () => {} } = props; 7 | const styleClassName: string = `${icon.default} ${className}`; 8 | return ( 9 | 20 | 21 | ); 22 | }; 23 | 24 | 25 | export default Dilate; 26 | -------------------------------------------------------------------------------- /components/icon/components/disc-frame/index.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import {IconProps} from "../../index"; 3 | import icon from "../../index.module.less"; 4 | const Disc = (props: IconProps) => { 5 | const {className = "", style = {}, onClick = () => {}} = props; 6 | const styleClassName: string = `${icon.default} ${className}`; 7 | return ( 8 | 19 | 20 | 21 | ); 22 | }; 23 | 24 | export default Disc; 25 | -------------------------------------------------------------------------------- /components/icon/components/doubleleft-frame/index.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import {IconProps} from "../../index"; 3 | import icon from "../../index.module.less"; 4 | 5 | const Doubleleft = (props: IconProps) => { 6 | const { 7 | className = "", style = {}, onClick = () => { 8 | } 9 | } = props; 10 | const styleClassName: string = `${icon.default} ${className}`; 11 | return ( 12 | 23 | 24 | 25 | ); 26 | }; 27 | 28 | 29 | export default Doubleleft; 30 | -------------------------------------------------------------------------------- /components/icon/components/doubleright-frame/index.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import {IconProps} from "../../index"; 3 | import icon from "../../index.module.less"; 4 | 5 | const Doubleright = (props: IconProps) => { 6 | const { 7 | className = "", style = {}, onClick = () => { 8 | } 9 | } = props; 10 | const styleClassName: string = `${icon.default} ${className}`; 11 | return ( 12 | 23 | 25 | 26 | ); 27 | }; 28 | 29 | 30 | export default Doubleright; 31 | -------------------------------------------------------------------------------- /components/icon/components/downleft-frame/index.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { IconProps } from "../../index"; 3 | import icon from "../../index.module.less"; 4 | 5 | const Downwleft = (props: IconProps) => { 6 | const { className = "", style = {}, onClick = () => {} } = props; 7 | const styleClassName: string = `${icon.default} ${className}`; 8 | return ( 9 | 20 | 21 | 22 | ); 23 | }; 24 | 25 | 26 | export default Downwleft; 27 | -------------------------------------------------------------------------------- /components/icon/components/downleft-solid/index.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { IconProps } from "../../index"; 3 | import icon from "../../index.module.less"; 4 | 5 | const Downwleftfu = (props: IconProps) => { 6 | const { className = "", style = {}, onClick = () => {} } = props; 7 | const styleClassName: string = `${icon.default} ${className}`; 8 | return ( 9 | 20 | 21 | 22 | ); 23 | }; 24 | 25 | 26 | export default Downwleftfu; 27 | -------------------------------------------------------------------------------- /components/icon/components/download-solid/index.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import {IconProps} from "../../index"; 3 | import icon from "../../index.module.less"; 4 | 5 | const Downloads = (props: IconProps) => { 6 | const { 7 | className = "", style = {}, onClick = () => { 8 | } 9 | } = props; 10 | const styleClassName: string = `${icon.default} ${className}`; 11 | return ( 12 | 23 | 24 | 25 | ); 26 | }; 27 | export default Downloads; 28 | -------------------------------------------------------------------------------- /components/icon/components/downright-frame/index.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { IconProps } from "../../index"; 3 | import icon from "../../index.module.less"; 4 | 5 | const Downwright = (props: IconProps) => { 6 | const { className = "", style = {}, onClick = () => {} } = props; 7 | const styleClassName: string = `${icon.default} ${className}`; 8 | return ( 9 | 20 | 21 | 22 | ); 23 | }; 24 | 25 | 26 | export default Downwright; 27 | -------------------------------------------------------------------------------- /components/icon/components/downright-solid/index.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { IconProps } from "../../index"; 3 | import icon from "../../index.module.less"; 4 | 5 | const Downwrightfu = (props: IconProps) => { 6 | const { className = "", style = {}, onClick = () => {} } = props; 7 | const styleClassName: string = `${icon.default} ${className}`; 8 | return ( 9 | 20 | 21 | 22 | ); 23 | }; 24 | 25 | 26 | export default Downwrightfu; 27 | -------------------------------------------------------------------------------- /components/icon/components/downward-frame/index.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { IconProps } from "../../index"; 3 | import icon from "../../index.module.less"; 4 | 5 | const Downward = (props: IconProps) => { 6 | const { className = "", style = {}, onClick = () => {} } = props; 7 | const styleClassName: string = `${icon.default} ${className}`; 8 | return ( 9 | 20 | 21 | 22 | ); 23 | }; 24 | 25 | 26 | export default Downward; 27 | -------------------------------------------------------------------------------- /components/icon/components/downward-solid/index.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { IconProps } from "../../index"; 3 | import icon from "../../index.module.less"; 4 | 5 | const Downwardfu = (props: IconProps) => { 6 | const { className = "", style = {}, onClick = () => {} } = props; 7 | const styleClassName: string = `${icon.default} ${className}`; 8 | return ( 9 | 20 | 21 | ); 22 | }; 23 | 24 | 25 | export default Downwardfu; 26 | -------------------------------------------------------------------------------- /components/icon/components/ellipsis-frame/index.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import {IconProps} from "../../index"; 3 | import icon from "../../index.module.less"; 4 | const Ellipsis = (props: IconProps) => { 5 | const {className = "", style = {}, onClick = () => {}} = props; 6 | const styleClassName: string = `${icon.default} ${className}`; 7 | return ( 8 | 19 | 20 | 21 | ); 22 | }; 23 | 24 | export default Ellipsis; 25 | -------------------------------------------------------------------------------- /components/icon/components/empty-solid/index.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import {IconProps} from "../../index"; 3 | import icon from "../../index.module.less"; 4 | 5 | const Empty = (props: IconProps) => { 6 | const { 7 | className = "", style = {}, onClick = () => { 8 | } 9 | } = props; 10 | const styleClassName: string = `${icon.default} ${className}`; 11 | return ( 12 | 23 | 24 | 25 | ); 26 | }; 27 | export default Empty; 28 | -------------------------------------------------------------------------------- /components/icon/components/enter-frame/index.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import {IconProps} from "../../index"; 3 | import icon from "../../index.module.less"; 4 | 5 | const Enter = (props: IconProps) => { 6 | const { 7 | className = "", style = {}, onClick = () => { 8 | } 9 | } = props; 10 | const styleClassName: string = `${icon.default} ${className}`; 11 | return ( 12 | 23 | 24 | 25 | ); 26 | }; 27 | 28 | 29 | export default Enter; 30 | -------------------------------------------------------------------------------- /components/icon/components/erasefile-solid/index.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import {IconProps} from "../../index"; 3 | import icon from "../../index.module.less"; 4 | 5 | const Erasefile = (props: IconProps) => { 6 | const { 7 | className = "", style = {}, onClick = () => { 8 | } 9 | } = props; 10 | const styleClassName: string = `${icon.default} ${className}`; 11 | return ( 12 | 23 | 24 | 25 | 26 | ); 27 | }; 28 | export default Erasefile; 29 | -------------------------------------------------------------------------------- /components/icon/components/expand-frame/index.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import {IconProps} from "../../index"; 3 | import icon from "../../index.module.less"; 4 | const Expand = (props: IconProps) => { 5 | const {className = "", style = {}, onClick = () => {}} = props; 6 | const styleClassName: string = `${icon.default} ${className}`; 7 | return ( 8 | 19 | 20 | 21 | ); 22 | }; 23 | 24 | export default Expand; 25 | -------------------------------------------------------------------------------- /components/icon/components/exprot-frame/index.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import {IconProps} from "../../index"; 3 | import icon from "../../index.module.less"; 4 | const Exprot = (props: IconProps) => { 5 | const {className = "", style = {}, onClick = () => {}} = props; 6 | const styleClassName: string = `${icon.default} ${className}`; 7 | return ( 8 | 19 | 20 | 21 | ); 22 | }; 23 | 24 | export default Exprot; 25 | -------------------------------------------------------------------------------- /components/icon/components/eyesopen-frame/index.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import {IconProps} from "../../index"; 3 | import icon from "../../index.module.less"; 4 | 5 | const EyesOpen = (props: IconProps) => { 6 | const { 7 | className = "", style = {}, onClick = () => { 8 | } 9 | } = props; 10 | const styleClassName: string = `${icon.default} ${className}`; 11 | return ( 12 | 23 | 24 | 25 | ); 26 | }; 27 | 28 | 29 | export default EyesOpen; 30 | -------------------------------------------------------------------------------- /components/icon/components/facright-frame/index.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import {IconProps} from "../../index"; 3 | import icon from "../../index.module.less"; 4 | 5 | const Facright = (props: IconProps) => { 6 | const { 7 | className = "", style = {}, onClick = () => { 8 | } 9 | } = props; 10 | const styleClassName: string = `${icon.default} ${className}`; 11 | return ( 12 | 23 | 24 | 25 | ); 26 | }; 27 | 28 | export default Facright; -------------------------------------------------------------------------------- /components/icon/components/file-frame/index.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { IconProps } from "../../index"; 3 | import icon from "../../index.module.less"; 4 | 5 | const Fileput = (props: IconProps) => { 6 | const { className = "", style = {}, onClick = () => {} } = props; 7 | const styleClassName: string = `${icon.default} ${className}`; 8 | return ( 9 | 20 | 21 | 22 | ); 23 | }; 24 | 25 | export default Fileput; 26 | -------------------------------------------------------------------------------- /components/icon/components/fileimg-frame/index.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import {IconProps} from "../../index"; 3 | import icon from "../../index.module.less"; 4 | const Fileimg = (props: IconProps) => { 5 | const {className = "", style = {}, onClick = () => {}} = props; 6 | const styleClassName: string = `${icon.default} ${className}`; 7 | return ( 8 | 19 | 20 | 21 | ); 22 | }; 23 | 24 | export default Fileimg; 25 | -------------------------------------------------------------------------------- /components/icon/components/filezip-frame/index.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import {IconProps} from "../../index"; 3 | import icon from "../../index.module.less"; 4 | const Zip = (props: IconProps) => { 5 | const {className = "", style = {}, onClick = () => {}} = props; 6 | const styleClassName: string = `${icon.default} ${className}`; 7 | return ( 8 | 19 | 20 | 21 | ); 22 | }; 23 | export default Zip; 24 | -------------------------------------------------------------------------------- /components/icon/components/flushed-frame/index.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import {IconProps} from "../../index"; 3 | import icon from "../../index.module.less"; 4 | const Flushed = (props: IconProps) => { 5 | const {className = "", style = {}, onClick = () => {}} = props; 6 | const styleClassName: string = `${icon.default} ${className}`; 7 | return ( 8 | 19 | 20 | 21 | ); 22 | }; 23 | 24 | export default Flushed; 25 | -------------------------------------------------------------------------------- /components/icon/components/folder-frame/index.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { IconProps } from "../../index"; 3 | import icon from "../../index.module.less"; 4 | 5 | const Folder = (props: IconProps) => { 6 | const { className = "", style = {}, onClick = () => {} } = props; 7 | const styleClassName: string = `${icon.default} ${className}`; 8 | return ( 9 | 20 | 21 | 22 | ); 23 | }; 24 | 25 | export default Folder; 26 | -------------------------------------------------------------------------------- /components/icon/components/forward-solid/index.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import {IconProps} from "../../index"; 3 | import icon from "../../index.module.less"; 4 | 5 | const Forward = (props: IconProps) => { 6 | const { 7 | className = "", style = {}, onClick = () => { 8 | } 9 | } = props; 10 | const styleClassName: string = `${icon.default} ${className}`; 11 | return ( 12 | 23 | 24 | 25 | ); 26 | } 27 | 28 | 29 | export default Forward; 30 | -------------------------------------------------------------------------------- /components/icon/components/forwards-frame/index.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import {IconProps} from "../../index"; 3 | import icon from "../../index.module.less"; 4 | 5 | const Forwards = (props: IconProps) => { 6 | const { 7 | className = "", style = {}, onClick = () => { 8 | } 9 | } = props; 10 | const styleClassName: string = `${icon.default} ${className}`; 11 | return ( 12 | 23 | 24 | 25 | ); 26 | }; 27 | 28 | export default Forwards; 29 | -------------------------------------------------------------------------------- /components/icon/components/github-solid/index.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { IconProps } from "../../index"; 3 | import icon from "../../index.module.less"; 4 | 5 | const Github = (props: IconProps) => { 6 | const { className = "", style = {}, onClick = () => {} } = props; 7 | const styleClassName: string = `${icon.default} ${className}`; 8 | return ( 9 | 20 | 21 | 22 | ); 23 | }; 24 | 25 | 26 | export default Github; 27 | -------------------------------------------------------------------------------- /components/icon/components/gitlab-frame/index.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { IconProps } from "../../index"; 3 | import icon from "../../index.module.less"; 4 | 5 | const Gitlab = (props: IconProps) => { 6 | const { className = "", style = {}, onClick = () => {} } = props; 7 | const styleClassName: string = `${icon.default} ${className}`; 8 | return ( 9 | 20 | 21 | 22 | ); 23 | }; 24 | 25 | 26 | export default Gitlab; 27 | -------------------------------------------------------------------------------- /components/icon/components/google-frame/index.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { IconProps } from "../../index"; 3 | import icon from "../../index.module.less"; 4 | const Google = (props: IconProps) => { 5 | const { className = "", style = {}, onClick = () => {} } = props; 6 | const styleClassName: string = `${icon.default} ${className}`; 7 | return ( 8 | 19 | 20 | 21 | ); 22 | }; 23 | export default Google; 24 | -------------------------------------------------------------------------------- /components/icon/components/google-solid/index.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { IconProps } from "../../index"; 3 | import icon from "../../index.module.less"; 4 | const Googlefu = (props: IconProps) => { 5 | const { className = "", style = {}, onClick = () => {} } = props; 6 | const styleClassName: string = `${icon.default} ${className}`; 7 | return ( 8 | 19 | 20 | 21 | ); 22 | }; 23 | export default Googlefu; 24 | -------------------------------------------------------------------------------- /components/icon/components/highlight-frame/index.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { IconProps } from "../../index"; 3 | import icon from "../../index.module.less"; 4 | 5 | const Highlight = (props: IconProps) => { 6 | const { className = "", style = {}, onClick = () => {} } = props; 7 | const styleClassName: string = `${icon.default} ${className}`; 8 | return ( 9 | 20 | 21 | ); 22 | }; 23 | 24 | export default Highlight; 25 | -------------------------------------------------------------------------------- /components/icon/components/illustrate-solid/index.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import {IconProps} from "../../index"; 3 | import icon from "../../index.module.less"; 4 | 5 | const Illustrate = (props: IconProps) => { 6 | const { 7 | className = "", style = {}, onClick = () => { 8 | } 9 | } = props; 10 | const styleClassName: string = `${icon.default} ${className}`; 11 | return ( 12 | 23 | 24 | 25 | ); 26 | }; 27 | 28 | 29 | export default Illustrate; 30 | -------------------------------------------------------------------------------- /components/icon/components/image-solid/index.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import {IconProps} from "../../index"; 3 | import icon from "../../index.module.less"; 4 | const Image = (props: IconProps) => { 5 | const {className = "", style = {}, onClick = () => {}} = props; 6 | const styleClassName: string = `${icon.default} ${className}`; 7 | return ( 8 | 19 | 20 | 21 | ); 22 | }; 23 | 24 | export default Image; 25 | -------------------------------------------------------------------------------- /components/icon/components/images-frame/index.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { IconProps } from "../../index"; 3 | import icon from "../../index.module.less"; 4 | 5 | const Images = (props: IconProps) => { 6 | const { className = "", style = {}, onClick = () => {} } = props; 7 | const styleClassName: string = `${icon.default} ${className}`; 8 | return ( 9 | 20 | 21 | 22 | ); 23 | }; 24 | 25 | 26 | export default Images; 27 | -------------------------------------------------------------------------------- /components/icon/components/key-frame/index.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import {IconProps} from "../../index"; 3 | import icon from "../../index.module.less"; 4 | const Key = (props: IconProps) => { 5 | const {className = "", style = {}, onClick = () => {}} = props; 6 | const styleClassName: string = `${icon.default} ${className}`; 7 | return ( 8 | 19 | 20 | 21 | ); 22 | }; 23 | 24 | export default Key; 25 | -------------------------------------------------------------------------------- /components/icon/components/lament-frame/index.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import {IconProps} from "../../index"; 3 | import icon from "../../index.module.less"; 4 | const Laments = (props: IconProps) => { 5 | const {className = "", style = {}, onClick = () => {}} = props; 6 | const styleClassName: string = `${icon.default} ${className}`; 7 | return ( 8 | 19 | 20 | 21 | ); 22 | }; 23 | 24 | export default Laments; 25 | -------------------------------------------------------------------------------- /components/icon/components/lament-solid/index.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import {IconProps} from "../../index"; 3 | import icon from "../../index.module.less"; 4 | 5 | const Lament = (props: IconProps) => { 6 | const { 7 | className = "", style = {}, onClick = () => { 8 | } 9 | } = props; 10 | const styleClassName: string = `${icon.default} ${className}`; 11 | return ( 12 | 23 | 25 | 26 | ); 27 | }; 28 | 29 | 30 | export default Lament; 31 | -------------------------------------------------------------------------------- /components/icon/components/left-frame/index.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import {IconProps} from "../../index"; 3 | import icon from "../../index.module.less"; 4 | 5 | const Left = (props: IconProps) => { 6 | const { 7 | className = "", style = {}, onClick = () => { 8 | } 9 | } = props; 10 | const styleClassName: string = `${icon.default} ${className}`; 11 | return ( 12 | 23 | 24 | 25 | ); 26 | }; 27 | 28 | export default Left; -------------------------------------------------------------------------------- /components/icon/components/letter-frame/index.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import {IconProps} from "../../index"; 3 | import icon from "../../index.module.less"; 4 | const Letter = (props: IconProps) => { 5 | const {className = "", style = {}, onClick = () => {}} = props; 6 | const styleClassName: string = `${icon.default} ${className}`; 7 | return ( 8 | 19 | 20 | 21 | ); 22 | }; 23 | 24 | export default Letter; 25 | -------------------------------------------------------------------------------- /components/icon/components/link-frame/index.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import {IconProps} from "../../index"; 3 | import icon from "../../index.module.less"; 4 | 5 | const Link = (props: IconProps) => { 6 | const { 7 | className = "", style = {}, onClick = () => { 8 | } 9 | } = props; 10 | const styleClassName: string = `${icon.default} ${className}`; 11 | return ( 12 | 23 | 24 | 25 | ); 26 | }; 27 | export default Link; 28 | -------------------------------------------------------------------------------- /components/icon/components/lists-frame/index.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { IconProps } from "../../index"; 3 | import icon from "../../index.module.less"; 4 | 5 | const LabelersLists = (props: IconProps) => { 6 | const { className = "", style = {}, onClick = () => {} } = props; 7 | const styleClassName: string = `${icon.default} ${className}`; 8 | return ( 9 | 20 | 21 | 22 | ); 23 | }; 24 | 25 | 26 | export default LabelersLists; 27 | -------------------------------------------------------------------------------- /components/icon/components/loading-frame/index.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import {IconProps} from "../../index"; 3 | import loading from './loading.module.less' 4 | const Loading = (props: IconProps) => { 5 | const {className = "", style = {}, onClick = () => {}} = props; 6 | const styleClassName: string = `${loading.loading} ${className}`; 7 | return ( 8 | 19 | 20 | 21 | ); 22 | }; 23 | 24 | export default Loading; 25 | -------------------------------------------------------------------------------- /components/icon/components/loading-frame/loading.module.less: -------------------------------------------------------------------------------- 1 | .loading { 2 | width: var(--ayong-icon-size); 3 | height: var(--ayong-icon-size); 4 | //fill: var(--ayong-grey); 5 | fill: var(--ayong-dark-green-gray); 6 | 7 | path { 8 | animation: loading-dash 1.5s infinite linear; 9 | transform-origin: center; 10 | } 11 | 12 | &:hover path { 13 | animation-play-state: paused; 14 | } 15 | } 16 | 17 | @keyframes loading-dash { 18 | 0% { 19 | transform: rotate(0deg); 20 | } 21 | 100% { 22 | transform: rotate(360deg); 23 | } 24 | } 25 | 26 | 27 | -------------------------------------------------------------------------------- /components/icon/components/lock-frame/index.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import {IconProps} from "../../index"; 3 | import icon from "../../index.module.less"; 4 | 5 | const Lock = (props: IconProps) => { 6 | const { 7 | className = "", style = {}, onClick = () => { 8 | } 9 | } = props; 10 | const styleClassName: string = `${icon.default} ${className}`; 11 | return ( 12 | 23 | 24 | 25 | ); 26 | }; 27 | 28 | 29 | export default Lock; 30 | -------------------------------------------------------------------------------- /components/icon/components/menufold-frame/index.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { IconProps } from "../../index"; 3 | import icon from "../../index.module.less"; 4 | 5 | const Menufold = (props: IconProps) => { 6 | const { className = "", style = {}, onClick = () => {} } = props; 7 | const styleClassName: string = `${icon.default} ${className}`; 8 | return ( 9 | 20 | 21 | 22 | ); 23 | }; 24 | 25 | 26 | export default Menufold; 27 | -------------------------------------------------------------------------------- /components/icon/components/menuunfold-frame/index.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { IconProps } from "../../index"; 3 | import icon from "../../index.module.less"; 4 | 5 | const Menuunfold = (props: IconProps) => { 6 | const { className = "", style = {}, onClick = () => {} } = props; 7 | const styleClassName: string = `${icon.default} ${className}`; 8 | return ( 9 | 20 | 21 | 22 | ); 23 | }; 24 | 25 | 26 | export default Menuunfold; 27 | -------------------------------------------------------------------------------- /components/icon/components/minus-frame/index.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import {IconProps} from "../../index"; 3 | import icon from "../../index.module.less"; 4 | 5 | const Minus = (props: IconProps) => { 6 | const { 7 | className = "", style = {}, onClick = () => { 8 | } 9 | } = props; 10 | const styleClassName: string = `${icon.default} ${className}`; 11 | return ( 12 | 23 | 24 | 25 | ); 26 | }; 27 | 28 | export default Minus; 29 | -------------------------------------------------------------------------------- /components/icon/components/minusround-frame/index.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { IconProps } from "../../index"; 3 | import icon from "../../index.module.less"; 4 | 5 | const Minusrfu = (props: IconProps) => { 6 | const { className = "", style = {}, onClick = () => {} } = props; 7 | const styleClassName: string = `${icon.default} ${className}`; 8 | return ( 9 | 20 | 21 | 22 | ); 23 | }; 24 | 25 | 26 | export default Minusrfu; 27 | -------------------------------------------------------------------------------- /components/icon/components/minusround-solid/index.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { IconProps } from "../../index"; 3 | import icon from "../../index.module.less"; 4 | 5 | const Minusrfu = (props: IconProps) => { 6 | const { className = "", style = {}, onClick = () => {} } = props; 7 | const styleClassName: string = `${icon.default} ${className}`; 8 | return ( 9 | 20 | 21 | 22 | ); 23 | }; 24 | 25 | 26 | export default Minusrfu; 27 | -------------------------------------------------------------------------------- /components/icon/components/moon-frame/index.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import {IconProps} from "../../index"; 3 | import icon from "../../index.module.less"; 4 | 5 | const Moon = (props: IconProps) => { 6 | const { 7 | className = "", style = {}, onClick = () => { 8 | } 9 | } = props; 10 | const styleClassName: string = `${icon.default} ${className}`; 11 | return ( 12 | 23 | 24 | ); 25 | }; 26 | 27 | export default Moon; -------------------------------------------------------------------------------- /components/icon/components/nocontent-frame/index.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import {IconProps} from "../../index"; 3 | import icon from "../../index.module.less"; 4 | 5 | const Nocontent = (props: IconProps) => { 6 | const { 7 | className = "", style = {}, onClick = () => { 8 | } 9 | } = props; 10 | const styleClassName: string = `${icon.default} ${className}`; 11 | return ( 12 | 23 | 24 | 25 | ); 26 | }; 27 | export default Nocontent; 28 | -------------------------------------------------------------------------------- /components/icon/components/open-frame/index.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import {IconProps} from "../../index"; 3 | import icon from "../../index.module.less"; 4 | const Open = (props: IconProps) => { 5 | const {className = "", style = {}, onClick = () => {}} = props; 6 | const styleClassName: string = `${icon.default} ${className}`; 7 | return ( 8 | 19 | 20 | 21 | 22 | ); 23 | }; 24 | 25 | export default Open; 26 | -------------------------------------------------------------------------------- /components/icon/components/openfolder-frame/index.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { IconProps } from "../../index"; 3 | import icon from "../../index.module.less"; 4 | 5 | const Openfolder = (props: IconProps) => { 6 | const { className = "", style = {}, onClick = () => {} } = props; 7 | const styleClassName: string = `${icon.default} ${className}`; 8 | return ( 9 | 20 | 21 | 22 | ); 23 | }; 24 | 25 | export default Openfolder; 26 | -------------------------------------------------------------------------------- /components/icon/components/openoff-frame/index.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import {IconProps} from "../../index"; 3 | import icon from "../../index.module.less"; 4 | const Openoff = (props: IconProps) => { 5 | const {className = "", style = {}, onClick = () => {}} = props; 6 | const styleClassName: string = `${icon.default} ${className}`; 7 | return ( 8 | 19 | 20 | 21 | 22 | ); 23 | }; 24 | 25 | export default Openoff; 26 | -------------------------------------------------------------------------------- /components/icon/components/opensound-solid/index.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import {IconProps} from "../../index"; 3 | import icon from "../../index.module.less"; 4 | 5 | const Sounds = (props: IconProps) => { 6 | const { 7 | className = "", style = {}, onClick = () => { 8 | } 9 | } = props; 10 | const styleClassName: string = `${icon.default} ${className}`; 11 | return ( 12 | 23 | 24 | 25 | ); 26 | }; 27 | export default Sounds; 28 | -------------------------------------------------------------------------------- /components/icon/components/panedown-frame/index.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { IconProps } from "../../index"; 3 | import icon from "../../index.module.less"; 4 | 5 | const Panedown = (props: IconProps) => { 6 | const { className = "", style = {}, onClick = () => {} } = props; 7 | const styleClassName: string = `${icon.default} ${className}`; 8 | return ( 9 | 20 | 21 | 22 | ); 23 | }; 24 | 25 | 26 | export default Panedown; 27 | -------------------------------------------------------------------------------- /components/icon/components/paneleft-frame/index.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { IconProps } from "../../index"; 3 | import icon from "../../index.module.less"; 4 | 5 | const Paneleft = (props: IconProps) => { 6 | const { className = "", style = {}, onClick = () => {} } = props; 7 | const styleClassName: string = `${icon.default} ${className}`; 8 | return ( 9 | 20 | 21 | 22 | ); 23 | }; 24 | 25 | 26 | export default Paneleft; 27 | -------------------------------------------------------------------------------- /components/icon/components/paneright-frame/index.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { IconProps } from "../../index"; 3 | import icon from "../../index.module.less"; 4 | 5 | const Paneright = (props: IconProps) => { 6 | const { className = "", style = {}, onClick = () => {} } = props; 7 | const styleClassName: string = `${icon.default} ${className}`; 8 | return ( 9 | 20 | 21 | 22 | ); 23 | }; 24 | 25 | 26 | export default Paneright; 27 | -------------------------------------------------------------------------------- /components/icon/components/panetop-frame/index.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { IconProps } from "../../index"; 3 | import icon from "../../index.module.less"; 4 | 5 | const Panetop = (props: IconProps) => { 6 | const { className = "", style = {}, onClick = () => {} } = props; 7 | const styleClassName: string = `${icon.default} ${className}`; 8 | return ( 9 | 20 | 21 | 22 | ); 23 | }; 24 | 25 | 26 | export default Panetop; 27 | -------------------------------------------------------------------------------- /components/icon/components/picture-frame/index.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { IconProps } from "../../index"; 3 | import icon from "../../index.module.less"; 4 | 5 | const Picture = (props: IconProps) => { 6 | const { className = "", style = {}, onClick = () => {} } = props; 7 | const styleClassName: string = `${icon.default} ${className}`; 8 | return ( 9 | 20 | 21 | 22 | ); 23 | }; 24 | 25 | 26 | export default Picture; 27 | -------------------------------------------------------------------------------- /components/icon/components/pictureleft-fram/index.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { IconProps } from "../../index"; 3 | import icon from "../../index.module.less"; 4 | 5 | const Pictureletf = (props: IconProps) => { 6 | const { className = "", style = {}, onClick = () => {} } = props; 7 | const styleClassName: string = `${icon.default} ${className}`; 8 | return ( 9 | 20 | 21 | 22 | ); 23 | }; 24 | 25 | 26 | export default Pictureletf; 27 | -------------------------------------------------------------------------------- /components/icon/components/pictureright-frame/index.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { IconProps } from "../../index"; 3 | import icon from "../../index.module.less"; 4 | 5 | const Pictureright = (props: IconProps) => { 6 | const { className = "", style = {}, onClick = () => {} } = props; 7 | const styleClassName: string = `${icon.default} ${className}`; 8 | return ( 9 | 20 | 21 | 22 | ); 23 | }; 24 | 25 | 26 | export default Pictureright; 27 | -------------------------------------------------------------------------------- /components/icon/components/play-frame/index.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { IconProps } from "../../index"; 3 | import icon from "../../index.module.less"; 4 | 5 | const Play = (props: IconProps) => { 6 | const { className = "", style = {}, onClick = () => {} } = props; 7 | const styleClassName: string = `${icon.default} ${className}`; 8 | return ( 9 | 20 | 21 | 22 | ); 23 | }; 24 | 25 | 26 | export default Play; 27 | -------------------------------------------------------------------------------- /components/icon/components/plus-frame/index.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import {IconProps} from "../../index"; 3 | import icon from "../../index.module.less"; 4 | 5 | const Plus = (props: IconProps) => { 6 | const { 7 | className = "", style = {}, onClick = () => { 8 | } 9 | } = props; 10 | const styleClassName: string = `${icon.default} ${className}`; 11 | return ( 12 | 23 | 24 | 25 | ); 26 | }; 27 | 28 | export default Plus; 29 | -------------------------------------------------------------------------------- /components/icon/components/plusround-frame/index.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { IconProps } from "../../index"; 3 | import icon from "../../index.module.less"; 4 | 5 | const Plusround = (props: IconProps) => { 6 | const { className = "", style = {}, onClick = () => {} } = props; 7 | const styleClassName: string = `${icon.default} ${className}`; 8 | return ( 9 | 20 | 21 | 22 | ); 23 | }; 24 | 25 | 26 | export default Plusround; 27 | -------------------------------------------------------------------------------- /components/icon/components/plusround-solid/index.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { IconProps } from "../../index"; 3 | import icon from "../../index.module.less"; 4 | 5 | const Plusrofu = (props: IconProps) => { 6 | const { className = "", style = {}, onClick = () => {} } = props; 7 | const styleClassName: string = `${icon.default} ${className}`; 8 | return ( 9 | 20 | 21 | 22 | ); 23 | }; 24 | 25 | 26 | export default Plusrofu; 27 | -------------------------------------------------------------------------------- /components/icon/components/posit-solid/index.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import {IconProps} from "../../index"; 3 | import icon from "../../index.module.less"; 4 | const Posit = (props: IconProps) => { 5 | const {className = "", style = {}, onClick = () => {}} = props; 6 | const styleClassName: string = `${icon.default} ${className}`; 7 | return ( 8 | 19 | 20 | 21 | ); 22 | }; 23 | export default Posit; -------------------------------------------------------------------------------- /components/icon/components/posits-frame/index.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import {IconProps} from "../../index"; 3 | import icon from "../../index.module.less"; 4 | 5 | const Posits = (props: IconProps) => { 6 | const { 7 | className = "", style = {}, onClick = () => { 8 | } 9 | } = props; 10 | const styleClassName: string = `${icon.default} ${className}`; 11 | return ( 12 | 23 | 24 | 25 | 26 | ); 27 | }; 28 | 29 | export default Posits; -------------------------------------------------------------------------------- /components/icon/components/poweroff-frame/index.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import {IconProps} from "../../index"; 3 | import icon from "../../index.module.less"; 4 | const Poweroff = (props: IconProps) => { 5 | const {className = "", style = {}, onClick = () => {}} = props; 6 | const styleClassName: string = `${icon.default} ${className}`; 7 | return ( 8 | 19 | 20 | 21 | ); 22 | }; 23 | 24 | export default Poweroff; 25 | -------------------------------------------------------------------------------- /components/icon/components/previous-frame/index.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { IconProps } from "../../index"; 3 | import icon from "../../index.module.less"; 4 | 5 | const PreviousStep = (props: IconProps) => { 6 | const { className = "", style = {}, onClick = () => {} } = props; 7 | const styleClassName: string = `${icon.default} ${className}`; 8 | return ( 9 | 20 | 21 | 22 | ); 23 | }; 24 | 25 | export default PreviousStep; 26 | -------------------------------------------------------------------------------- /components/icon/components/previousstep-frame/index.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { IconProps } from "../../index"; 3 | import icon from "../../index.module.less"; 4 | 5 | const PreviousStep = (props: IconProps) => { 6 | const { className = "", style = {}, onClick = () => {} } = props; 7 | const styleClassName: string = `${icon.default} ${className}`; 8 | return ( 9 | 20 | 21 | 22 | ); 23 | }; 24 | 25 | export default PreviousStep; 26 | -------------------------------------------------------------------------------- /components/icon/components/printer-frame/index.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import {IconProps} from "../../index"; 3 | import icon from "../../index.module.less"; 4 | const Printer = (props: IconProps) => { 5 | const {className = "", style = {}, onClick = () => {}} = props; 6 | const styleClassName: string = `${icon.default} ${className}`; 7 | return ( 8 | 19 | 20 | 21 | ); 22 | }; 23 | 24 | export default Printer; 25 | -------------------------------------------------------------------------------- /components/icon/components/quesround-frame/index.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import {IconProps} from "../../index"; 3 | import icon from "../../index.module.less"; 4 | const Quesround = (props: IconProps) => { 5 | const {className = "", style = {}, onClick = () => {}} = props; 6 | const styleClassName: string = `${icon.default} ${className}`; 7 | return ( 8 | 19 | 20 | 21 | 22 | ); 23 | }; 24 | 25 | export default Quesround; 26 | -------------------------------------------------------------------------------- /components/icon/components/question-frame/index.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import {IconProps} from "../../index"; 3 | import icon from "../../index.module.less"; 4 | const Question = (props: IconProps) => { 5 | const {className = "", style = {}, onClick = () => {}} = props; 6 | const styleClassName: string = `${icon.default} ${className}`; 7 | return ( 8 | 19 | 20 | 21 | ); 22 | }; 23 | 24 | export default Question; 25 | -------------------------------------------------------------------------------- /components/icon/components/replys-solid/index.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import {IconProps} from "../../index"; 3 | import icon from "../../index.module.less"; 4 | const Replys = (props: IconProps) => { 5 | const {className = "", style = {}, onClick = () => {}} = props; 6 | const styleClassName: string = `${icon.default} ${className}`; 7 | return ( 8 | 19 | 20 | 21 | 22 | ); 23 | }; 24 | 25 | export default Replys; 26 | -------------------------------------------------------------------------------- /components/icon/components/rest-frame/index.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import {IconProps} from "../../index"; 3 | import icon from "../../index.module.less"; 4 | const Rest = (props: IconProps) => { 5 | const {className = "", style = {}, onClick = () => {}} = props; 6 | const styleClassName: string = `${icon.default} ${className}`; 7 | return ( 8 | 19 | 20 | 21 | 22 | 23 | ); 24 | }; 25 | 26 | export default Rest; 27 | -------------------------------------------------------------------------------- /components/icon/components/return-frame/index.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import {IconProps} from "../../index"; 3 | import icon from "../../index.module.less"; 4 | 5 | const Return = (props: IconProps) => { 6 | const { 7 | className = "", style = {}, onClick = () => { 8 | } 9 | } = props; 10 | const styleClassName: string = `${icon.default} ${className}`; 11 | return ( 12 | 23 | 24 | 25 | ); 26 | }; 27 | 28 | export default Return; 29 | -------------------------------------------------------------------------------- /components/icon/components/retweet-frame/index.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import {IconProps} from "../../index"; 3 | import icon from "../../index.module.less"; 4 | 5 | const Retweet = (props: IconProps) => { 6 | const { 7 | className = "", style = {}, onClick = () => { 8 | } 9 | } = props; 10 | const styleClassName: string = `${icon.default} ${className}`; 11 | return ( 12 | 23 | 24 | ); 25 | }; 26 | 27 | 28 | export default Retweet; 29 | -------------------------------------------------------------------------------- /components/icon/components/rewind-solid/index.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import {IconProps} from "../../index"; 3 | import icon from "../../index.module.less"; 4 | 5 | const Rewind = (props: IconProps) => { 6 | const { 7 | className = "", style = {}, onClick = () => { 8 | } 9 | } = props; 10 | const styleClassName: string = `${icon.default} ${className}`; 11 | return ( 12 | 23 | 25 | 26 | ); 27 | } 28 | 29 | 30 | export default Rewind; 31 | -------------------------------------------------------------------------------- /components/icon/components/right-frame/index.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { IconProps } from "../../index"; 3 | import icon from "../../index.module.less"; 4 | 5 | const Right = (props: IconProps) => { 6 | const { className = "", style = {}, onClick = () => {} } = props; 7 | const styleClassName: string = `${icon.default} ${className}`; 8 | return ( 9 | 20 | 21 | 22 | ); 23 | }; 24 | 25 | 26 | export default Right; 27 | -------------------------------------------------------------------------------- /components/icon/components/rightcircle-frame/index.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { IconProps } from "../../index"; 3 | import icon from "../../index.module.less"; 4 | 5 | const Rightcircle = (props: IconProps) => { 6 | const { className = "", style = {}, onClick = () => {} } = props; 7 | const styleClassName: string = `${icon.default} ${className}`; 8 | return ( 9 | 20 | 21 | 22 | 23 | ); 24 | }; 25 | 26 | 27 | export default Rightcircle; 28 | -------------------------------------------------------------------------------- /components/icon/components/rollback-frame/index.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import {IconProps} from "../../index"; 3 | import icon from "../../index.module.less"; 4 | 5 | const Rollback = (props: IconProps) => { 6 | const { 7 | className = "", style = {}, onClick = () => { 8 | } 9 | } = props; 10 | const styleClassName: string = `${icon.default} ${className}`; 11 | return ( 12 | 23 | 24 | 25 | ); 26 | }; 27 | 28 | 29 | export default Rollback; 30 | -------------------------------------------------------------------------------- /components/icon/components/rounlament-frame/index.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import {IconProps} from "../../index"; 3 | import icon from "../../index.module.less"; 4 | const Rounlament = (props: IconProps) => { 5 | const {className = "", style = {}, onClick = () => {}} = props; 6 | const styleClassName: string = `${icon.default} ${className}`; 7 | return ( 8 | 19 | 20 | 21 | 22 | ); 23 | }; 24 | 25 | export default Rounlament; 26 | -------------------------------------------------------------------------------- /components/icon/components/save-frame/index.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import {IconProps} from "../../index"; 3 | import icon from "../../index.module.less"; 4 | 5 | const Save = (props: IconProps) => { 6 | const { 7 | className = "", style = {}, onClick = () => { 8 | } 9 | } = props; 10 | const styleClassName: string = `${icon.default} ${className}`; 11 | return ( 12 | 23 | 24 | 25 | ); 26 | }; 27 | 28 | 29 | export default Save; 30 | -------------------------------------------------------------------------------- /components/icon/components/search-frame/index.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import {IconProps} from "../../index"; 3 | import icon from "../../index.module.less"; 4 | 5 | const Search = (props: IconProps) => { 6 | const { 7 | className = "", style = {}, onClick = () => { 8 | } 9 | } = props; 10 | const styleClassName: string = `${icon.default} ${className}`; 11 | return ( 12 | 23 | 24 | 25 | ); 26 | }; 27 | 28 | 29 | export default Search; 30 | -------------------------------------------------------------------------------- /components/icon/components/send-frame/index.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { IconProps } from "../../index"; 3 | import icon from "../../index.module.less"; 4 | 5 | const Send = (props: IconProps) => { 6 | const { className = "", style = {}, onClick = () => {} } = props; 7 | const styleClassName: string = `${icon.default} ${className}`; 8 | return ( 9 | 20 | 21 | 22 | ); 23 | }; 24 | 25 | export default Send; 26 | -------------------------------------------------------------------------------- /components/icon/components/shrinks-frame/index.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { IconProps } from "../../index"; 3 | import icon from "../../index.module.less"; 4 | 5 | const Shrinks = (props: IconProps) => { 6 | const { className = "", style = {}, onClick = () => {} } = props; 7 | const styleClassName: string = `${icon.default} ${className}`; 8 | return ( 9 | 20 | 21 | 22 | ); 23 | }; 24 | 25 | 26 | export default Shrinks; 27 | -------------------------------------------------------------------------------- /components/icon/components/skin-frame/index.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import {IconProps} from "../../index"; 3 | import icon from "../../index.module.less"; 4 | 5 | const Skin = (props: IconProps) => { 6 | const { 7 | className = "", style = {}, onClick = () => { 8 | } 9 | } = props; 10 | const styleClassName: string = `${icon.default} ${className}`; 11 | return ( 12 | 23 | 24 | 25 | ); 26 | }; 27 | 28 | export default Skin; -------------------------------------------------------------------------------- /components/icon/components/swap-frame/index.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import {IconProps} from "../../index"; 3 | import icon from "../../index.module.less"; 4 | 5 | const Swap = (props: IconProps) => { 6 | const { 7 | className = "", style = {}, onClick = () => { 8 | } 9 | } = props; 10 | const styleClassName: string = `${icon.default} ${className}`; 11 | return ( 12 | 23 | 25 | 26 | 27 | ); 28 | }; 29 | 30 | 31 | export default Swap; -------------------------------------------------------------------------------- /components/icon/components/swapleft-frame/index.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import {IconProps} from "../../index"; 3 | import icon from "../../index.module.less"; 4 | 5 | const Swapleft = (props: IconProps) => { 6 | const { 7 | className = "", style = {}, onClick = () => { 8 | } 9 | } = props; 10 | const styleClassName: string = `${icon.default} ${className}`; 11 | return ( 12 | 23 | 25 | 26 | ); 27 | }; 28 | 29 | 30 | export default Swapleft; -------------------------------------------------------------------------------- /components/icon/components/swapright-frame/index.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import {IconProps} from "../../index"; 3 | import icon from "../../index.module.less"; 4 | 5 | const Swapright = (props: IconProps) => { 6 | const { 7 | className = "", style = {}, onClick = () => { 8 | } 9 | } = props; 10 | const styleClassName: string = `${icon.default} ${className}`; 11 | return ( 12 | 23 | 25 | 26 | ); 27 | }; 28 | 29 | 30 | export default Swapright; -------------------------------------------------------------------------------- /components/icon/components/sweep-frame/index.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import {IconProps} from "../../index"; 3 | import icon from "../../index.module.less"; 4 | const Sweep = (props: IconProps) => { 5 | const {className = "", style = {}, onClick = () => {}} = props; 6 | const styleClassName: string = `${icon.default} ${className}`; 7 | return ( 8 | 19 | 20 | 21 | ); 22 | }; 23 | 24 | export default Sweep; 25 | -------------------------------------------------------------------------------- /components/icon/components/thumb-solid/index.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import {IconProps} from "../../index"; 3 | import icon from "../../index.module.less"; 4 | 5 | const Thumb = (props: IconProps) => { 6 | const { 7 | className = "", style = {}, onClick = () => { 8 | } 9 | } = props; 10 | const styleClassName: string = `${icon.default} ${className}`; 11 | return ( 12 | 23 | 24 | 25 | ); 26 | }; 27 | 28 | export default Thumb; -------------------------------------------------------------------------------- /components/icon/components/timeout-solid/index.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import {IconProps} from "../../index"; 3 | import icon from "../../index.module.less"; 4 | 5 | const Timeout = (props: IconProps) => { 6 | const { 7 | className = "", style = {}, onClick = () => { 8 | } 9 | } = props; 10 | const styleClassName: string = `${icon.default} ${className}`; 11 | return ( 12 | 23 | 24 | 25 | ); 26 | }; 27 | export default Timeout; 28 | -------------------------------------------------------------------------------- /components/icon/components/top-frame/index.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import {IconProps} from "../../index"; 3 | import icon from "../../index.module.less"; 4 | 5 | const Top = (props: IconProps) => { 6 | const { 7 | className = "", style = {}, onClick = () => { 8 | } 9 | } = props; 10 | const styleClassName: string = `${icon.default} ${className}`; 11 | return ( 12 | 23 | 24 | 25 | ); 26 | }; 27 | 28 | export default Top; -------------------------------------------------------------------------------- /components/icon/components/under-frame/index.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import {IconProps} from "../../index"; 3 | import icon from "../../index.module.less"; 4 | 5 | const Under = (props: IconProps) => { 6 | const { 7 | className = "", style = {}, onClick = () => { 8 | } 9 | } = props; 10 | const styleClassName: string = `${icon.default} ${className}`; 11 | return ( 12 | 23 | 24 | 25 | ); 26 | }; 27 | export default Under; 28 | -------------------------------------------------------------------------------- /components/icon/components/unfold-frame/index.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { IconProps } from "../../index"; 3 | import icon from "../../index.module.less"; 4 | 5 | const Unfold = (props: IconProps) => { 6 | const { className = "", style = {}, onClick = () => {} } = props; 7 | const styleClassName: string = `${icon.default} ${className}`; 8 | return ( 9 | 20 | 21 | 22 | ); 23 | }; 24 | 25 | 26 | export default Unfold; 27 | -------------------------------------------------------------------------------- /components/icon/components/unlock-frame/index.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import {IconProps} from "../../index"; 3 | import icon from "../../index.module.less"; 4 | const Unlock = (props: IconProps) => { 5 | const {className = "", style = {}, onClick = () => {}} = props; 6 | const styleClassName: string = `${icon.default} ${className}`; 7 | return ( 8 | 19 | 20 | 21 | ); 22 | }; 23 | 24 | export default Unlock; 25 | -------------------------------------------------------------------------------- /components/icon/components/upload-frame/index.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { IconProps } from "../../index"; 3 | import icon from "../../index.module.less"; 4 | 5 | const Upload = (props: IconProps) => { 6 | const { className = "", style = {}, onClick = () => {} } = props; 7 | const styleClassName: string = `${icon.default} ${className}`; 8 | return ( 9 | 20 | 21 | 22 | ); 23 | }; 24 | 25 | export default Upload; 26 | -------------------------------------------------------------------------------- /components/icon/components/upload-solid/index.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import {IconProps} from "../../index"; 3 | import icon from "../../index.module.less"; 4 | 5 | const Uploadss = (props: IconProps) => { 6 | const { 7 | className = "", style = {}, onClick = () => { 8 | } 9 | } = props; 10 | const styleClassName: string = `${icon.default} ${className}`; 11 | return ( 12 | 23 | 24 | ); 25 | }; 26 | 27 | export default Uploadss; -------------------------------------------------------------------------------- /components/icon/components/upward-frame/index.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { IconProps } from "../../index"; 3 | import icon from "../../index.module.less"; 4 | 5 | const Upward = (props: IconProps) => { 6 | const { className = "", style = {}, onClick = () => {} } = props; 7 | const styleClassName: string = `${icon.default} ${className}`; 8 | return ( 9 | 20 | 21 | 22 | ); 23 | }; 24 | 25 | 26 | export default Upward; 27 | -------------------------------------------------------------------------------- /components/icon/components/upward-solid/index.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { IconProps } from "../../index"; 3 | import icon from "../../index.module.less"; 4 | 5 | const Upwardfu = (props: IconProps) => { 6 | const { className = "", style = {}, onClick = () => {} } = props; 7 | const styleClassName: string = `${icon.default} ${className}`; 8 | return ( 9 | 20 | 21 | 22 | ); 23 | }; 24 | 25 | 26 | export default Upwardfu; 27 | -------------------------------------------------------------------------------- /components/icon/components/user-frame/index.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { IconProps } from "../../index"; 3 | import icon from "../../index.module.less"; 4 | 5 | const UserHollow = (props: IconProps) => { 6 | const { className = "", style = {}, onClick = () => {} } = props; 7 | const styleClassName: string = `${icon.default} ${className}`; 8 | return ( 9 | 20 | 21 | ); 22 | }; 23 | 24 | 25 | export default UserHollow; 26 | -------------------------------------------------------------------------------- /components/icon/components/user-solid/index.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import {IconProps} from "../../index"; 3 | import icon from "../../index.module.less"; 4 | 5 | const User = (props: IconProps) => { 6 | const { 7 | className = "", style = {}, onClick = () => { 8 | } 9 | } = props; 10 | const styleClassName: string = `${icon.default} ${className}`; 11 | return ( 12 | 23 | 24 | 25 | ); 26 | }; 27 | 28 | export default User; -------------------------------------------------------------------------------- /components/icon/components/userswich-frame/index.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import {IconProps} from "../../index"; 3 | import icon from "../../index.module.less"; 4 | const Userswich = (props: IconProps) => { 5 | const {className = "", style = {}, onClick = () => {}} = props; 6 | const styleClassName: string = `${icon.default} ${className}`; 7 | return ( 8 | 19 | 20 | 21 | ); 22 | }; 23 | 24 | export default Userswich; 25 | -------------------------------------------------------------------------------- /components/icon/components/warning-frame/index.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import {IconProps} from "../../index"; 3 | import icon from "../../index.module.less"; 4 | 5 | const Warning = (props: IconProps) => { 6 | const { 7 | className = "", style = {}, onClick = () => { 8 | } 9 | } = props; 10 | const styleClassName: string = `${icon.default} ${className}`; 11 | return ( 12 | 23 | 24 | 25 | ); 26 | }; 27 | export default Warning; 28 | -------------------------------------------------------------------------------- /components/icon/components/wifi-frame/index.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import {IconProps} from "../../index"; 3 | import icon from "../../index.module.less"; 4 | 5 | const Wifi = (props: IconProps) => { 6 | const { 7 | className = "", style = {}, onClick = () => { 8 | } 9 | } = props; 10 | const styleClassName: string = `${icon.default} ${className}`; 11 | return ( 12 | 23 | 24 | 25 | ); 26 | }; 27 | export default Wifi; 28 | -------------------------------------------------------------------------------- /components/icon/index.d.ts: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | 3 | export interface IconProps { 4 | className?: string;//样式类名 5 | style?: {};//填充颜色 6 | onClick?: () => void;//点击事件 7 | } 8 | declare const Icon: React.FC; 9 | export default Icon; 10 | -------------------------------------------------------------------------------- /components/icon/index.module.less: -------------------------------------------------------------------------------- 1 | //默认 2 | .default { 3 | width: var(--ayong-icon-size); 4 | height: var(--ayong-icon-size); 5 | //fill: var(--ayong-grey); 6 | fill: var(--ayong-dark-green-gray); 7 | } 8 | -------------------------------------------------------------------------------- /components/input/index.d.ts: -------------------------------------------------------------------------------- 1 | import React, {ReactPropTypes} from 'react'; 2 | 3 | export interface InputProps { 4 | value: string; // 默认值 5 | defaultValue?: string; // 默认值 6 | style?: React.CSSProperties; // 自定义样式 7 | className?: string; // 自定义样式类名 8 | disabled?: boolean; // 禁用 9 | maxLength?: number | null; // 最大长度 10 | clerabled?: boolean; // 是否显示清除按钮 11 | icon?: React.ReactElement; // icon图标 12 | size?: 'large' | 'normal' | 'small'; // 输入框尺寸，nora 13 | type?: 'text' | 'password' | 'textarea'; // 按钮类型：文本、密码、富文本、数字 14 | btnType?: 'primary' | 'default' | 'dashed'; // 按钮样式类型 利用样式实现 15 | placeholder?: string; // 占位符 16 | addonBefore?: React.ReactElement | string; // 前置标签 17 | addonAfter?: React.ReactElement | string; // 后置标签 18 | onFocus?: Function; // 聚焦回调 19 | onBlur?: Function; // 失焦回调 20 | onKeyUp?: Function; // 键入回调 21 | onChange: Function; // 值变动回调 22 | prefix?: React.ReactElement | string; // 前缀 23 | suffix?: React.ReactElement | string; // 后缀 24 | visibilityToggle?: VisibilityToggle // 密码可见性切换 25 | } 26 | 27 | interface VisibilityToggle { 28 | visible: boolean; 29 | iconRender: (visible: boolean) => React.ReactElement; 30 | onVisibleChange: (visible: boolean) => void; 31 | } 32 | 33 | declare const Button: React.FC; 34 | 35 | export default Button; 36 | -------------------------------------------------------------------------------- /components/menu/menu.js: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/AyongNice/ayongUI/d06a6ea9048e3109fb6e2d3f5285f980ccfb633f/components/menu/menu.js -------------------------------------------------------------------------------- /components/message/index.d.ts: -------------------------------------------------------------------------------- 1 | import React, {ReactNode} from 'react'; 2 | 3 | 4 | export interface MessageProps { 5 | message: string | number | ReactNode; // 提示内容 6 | showClose?: boolean; // 是否显示关闭按钮 7 | type?: keyof type; // 按钮类型 利用样式实现 8 | onClose?: () => void; // 关闭回调 9 | icon?: React.Fc;//react Icon 10 | duration?: number; // 自动关闭的延时，单位秒。设为 0 时不自动关闭 11 | useHTMLString?: boolean;// 是否将 message 属性作为 HTML 片段处理 12 | } 13 | 14 | export interface NotificationState { 15 | container: Node; 16 | onClose: () => void; 17 | } 18 | 19 | export interface NotificationProps extends MessageProps { 20 | onAyongClose: () => void; 21 | style?: React.CSSProperties; 22 | } 23 | 24 | declare const Message: React.FC; 25 | 26 | export default Message; 27 | -------------------------------------------------------------------------------- /components/modal/index.d.ts: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | 3 | export interface ModalProps { 4 | title?: string; // 标题 默认值'' 5 | zIndex?: number; // z-index 默认值 999 6 | open?: boolean; // 是否显示 默认值 false 7 | style: Object;//弹框样式 默认值{width: '50%'} 8 | bodyClassName?: string; // 自定义类名 默认值'' 9 | headerClassName?: React.CSSProperties; // 头部样式 默认值'' 10 | type?: 'info' | 'success' | 'warning' | 'error',//API调用弹框类型 11 | content: string;//API调用弹框内容 12 | okText: string;//API调用弹框确定按钮 13 | cancelText: string;//API调用弹框取消按钮 14 | size?: 'string'; // 像素大小 top/bottom 时使用 高度 left/right 时使用 宽度 默认值'' 15 | maskClosable?: boolean; // 点击遮罩是否关闭 默认值 true 16 | placement?: 'top' | 'right' | 'bottom' | 'left'; // 位置 默认值 right 17 | onClose?: (e: React.MouseEvent) => void; // 关闭回调 18 | children: React.ReactNode; // 内容 19 | mainRender?: () => React.ReactNode; // 自定义抽屉内容 20 | headerRender?: () => React.ReactNode; // 自定义抽屉内容 21 | closeIcon?: React.ReactNode | null; // 关闭按钮 默认值 null 22 | footerRender: () => React.ReactNode; 23 | destroyOnClose?: boolean; // 关闭时销毁 24 | forceRender?: boolean; // 强制渲染 25 | } 26 | 27 | interface EventModal { 28 | onClose: Function;//点击关闭按钮 29 | onOk: Function;//点击确定按钮 30 | onCancel: Function;//点击取消按钮 31 | } 32 | 33 | export interface ConfirmProps extends ModalProps, EventModal { 34 | content: string;//API调用弹框内容 35 | okText: string;//API调用弹框确定按钮 36 | cancelText: string;//API调用弹框取消按钮 37 | } 38 | 39 | declare const Modal: React.FC; 40 | 41 | export default Modal; 42 | -------------------------------------------------------------------------------- /components/mount-dom/index.d.ts: -------------------------------------------------------------------------------- 1 | /** 2 | * @param onClose 关闭dom的回调方法 字段名必须是onClose, 该属性方法不需要在组件代码中传递 3 | * 但是在写组件使用说明时候 要体现说明onClose关闭回调方法 让开发者知晓 4 | *@param element 传入的组件中 必须有onAyongClose方法 5 | */ 6 | export interface MountProps { 7 | onClose?: () => void; 8 | element: (options: { onAyongClose: () => void }) => React.ReactNode; 9 | } 10 | 11 | 12 | export interface MountDomProps { 13 | [key: string]: any; 14 | onClose?: () => void; //关闭方法 15 | element?: HTMLElement; //挂载的函数组件 16 | style?: React.CSSProperties; //样式 17 | YAxisPlacement?: 'top' | 'bottom'; // 挂载Dom在界面的定位 类型 top 从上面出现、、、 18 | } 19 | -------------------------------------------------------------------------------- /components/notification/index.d.ts: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | 3 | export interface NotificationProps { 4 | title?: string; // 标题 默认值'' 5 | zIndex?: number; // z-index 默认值 999 6 | style: Object;//弹框样式 默认值{width: '50%'} 7 | messages: string;//消息数组 8 | type?: 'info' | 'success' | 'warning' | 'error',//API调用弹框类型 9 | message: string;//API调用弹框内容 10 | placement?: 'topRight' | 'topLeft'| 'bottomLeft'|'bottomRight'; // 位置 默认值 right 11 | onClose?: () => void; // 关闭回调 12 | closeIcon?: React.Fc | null; // 关闭按钮 默认值 null 13 | btn?: React.Fc | null; // 自定义按钮 默认值 null 14 | duration?: number; // 显示时间 毫秒 默认值 1600 15 | } 16 | 17 | interface EventModal { 18 | onClose: Function;//点击关闭按钮 19 | onOk: Function;//点击确定按钮 20 | onCancel: Function;//点击取消按钮 21 | } 22 | 23 | export interface ConfirmProps implements ModalProps, EventModal { 24 | content: string;//API调用弹框内容 25 | okText: string;//API调用弹框确定按钮 26 | cancelText: string;//API调用弹框取消按钮 27 | } 28 | 29 | declare const Notification: React.FC; 30 | 31 | export default Notification; 32 | -------------------------------------------------------------------------------- /components/pagination/index.d.ts: -------------------------------------------------------------------------------- 1 | // 页标数据 2 | import React from "react"; 3 | /** 4 | * 页码组件数据集 5 | */ 6 | export interface PaginationProps { 7 | total?: number//总数 8 | current: number //当前页 9 | pageSize?: number//每页条数 10 | disabled?: boolean// 是否禁用 11 | showJumpInput?: boolean//是否显示跳转输入框 12 | showSizeChanger?: boolean//是否显示每页条数选择器 13 | hideOnSinglePage?: boolean//只有一页时是否隐藏 14 | pageSizeOptions?: string[] | number[]//每页条数选择器可选值 15 | onChange?: (pageNo: number) => void//页码变化回调 16 | size?: string;//大小 17 | showQuickJumper?: boolean//是否显示跳转 18 | onSizeChange: (pageSize: number) => void//大小变化回调 19 | onCurrentChange: (pageNo: number) => void//大小变化回调 20 | } 21 | 22 | 23 | declare const Pagination: React.FC; 24 | 25 | export default Pagination; 26 | 27 | 28 | -------------------------------------------------------------------------------- /components/popconfirm/popconfirm.js: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/AyongNice/ayongUI/d06a6ea9048e3109fb6e2d3f5285f980ccfb633f/components/popconfirm/popconfirm.js -------------------------------------------------------------------------------- /components/popover/popover.js: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/AyongNice/ayongUI/d06a6ea9048e3109fb6e2d3f5285f980ccfb633f/components/popover/popover.js -------------------------------------------------------------------------------- /components/progress/progress.js: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/AyongNice/ayongUI/d06a6ea9048e3109fb6e2d3f5285f980ccfb633f/components/progress/progress.js -------------------------------------------------------------------------------- /components/radio/index.d.ts: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | 3 | export interface RadioProps { 4 | value: string | number | boolean;//多个组合时候当前值 5 | className?: string; // 自定义样式类名最外层的样式 6 | checked?: boolean; // 是否选中 单个使用需要用到 7 | disabled: boolean; // 禁用 8 | isGroup: boolean;//是否多个 9 | style: object;//样式 10 | children: React.ReactNode; // 插槽内容 11 | size?: 'large' | 'default' | 'small' | 'mini'; // 按钮类型的大小 继承Button组件参数 12 | type?: 'primary' | 'dashed' | 'safe' | 'error' | 'warn'; // 按钮类型 继承Button组件参数 13 | onChange: () => void 14 | } 15 | 16 | export interface ButtonProps extends RadioProps { 17 | size: string;//大小 18 | isLast: boolean;//是否最后一个 19 | index: number;//当前索引 20 | } 21 | 22 | 23 | declare const Radio: React.FC; 24 | 25 | export default Radio; 26 | -------------------------------------------------------------------------------- /components/rate/index.d.ts: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | 3 | export interface RateProps { 4 | className?: string; // 自定义样式类名 5 | count?: number; 6 | value?: number; 7 | disabled?: boolean; 8 | color?: string; 9 | onChange?: (selectedRating: number) => void; 10 | icon?: React.FC | string; 11 | } 12 | 13 | declare const Rate: React.FC; 14 | 15 | export default Rate; 16 | -------------------------------------------------------------------------------- /components/s-h-m/index.d.ts: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | 3 | export interface TimePickerProps { 4 | style?: React.CSSProperties; // 自定义样式 5 | defaultValue: string; 6 | className: string; 7 | value: string; 8 | onChange: () => void; 9 | onCancel: () => void; 10 | } 11 | 12 | 13 | declare const TimePicker: React.FC; 14 | 15 | export default TimePicker; 16 | -------------------------------------------------------------------------------- /components/select/commo.module.less: -------------------------------------------------------------------------------- 1 | //删除多选项目按键 2 | .delete { 3 | width: 11px; 4 | height: 11px; 5 | cursor: pointer; 6 | margin-left: 4px; 7 | fill: var(--ayong-plaster-grey); 8 | } 9 | 10 | /* Add other styles as needed */ 11 | 12 | .item { 13 | margin-top: 4px; 14 | margin-right: 4px; 15 | display: flex; 16 | align-items: center; 17 | padding: 2px 4px; 18 | color: var(--ayong-stone-gray); 19 | background: var(--ayong-grey-crescent); 20 | border-color: var(--ayong-grey); 21 | border-radius: 4px; 22 | } 23 | 24 | 25 | -------------------------------------------------------------------------------- /components/select/components/lefticon/index.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import selectStyle from '../../index.module.less'; 3 | import {Wrongs, Under, Search} from '../../../icon/icon.ts' 4 | 5 | const LeftIcon = ({ 6 | search, 7 | showClearable, 8 | onClearValue, 9 | isDropdownVisible, 10 | }) => { 11 | 12 | 13 | return ( 14 | 15 | 16 | {showClearable ? ( 17 | { 18 | e.stopPropagation(); 19 | onClearValue() 20 | }} className={selectStyle.icon}/> 21 | ) : search && isDropdownVisible ? ( 22 | 23 | ) : ( 24 | 29 | )} 30 | 31 | 32 | ) 33 | } 34 | 35 | 36 | export default LeftIcon; 37 | -------------------------------------------------------------------------------- /components/select/components/multiple/components/itme/index.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import selectStyle from '../../../../commo.module.less'; 3 | import {Wrong} from "../../../../../icon/icon.ts"; 4 | 5 | const Item = ({value, index, mode, deleteValue, handleOptionClick}) => { 6 | return
7 | {value} 8 | handleOptionClick(value)} 10 | > 11 | deleteValue(e, index)}/> 12 | 13 |
14 | } 15 | export default Item; 16 | -------------------------------------------------------------------------------- /components/select/components/option/index.module.less: -------------------------------------------------------------------------------- 1 | 2 | .customOption { 3 | display: flex; 4 | justify-content: space-between; 5 | align-items: center; 6 | font: 400 14px/1.5 "Helvetica Neue", Helvetica, Arial, sans-serif; 7 | padding: 3px 5px; 8 | border-radius: 4px; 9 | cursor: pointer; 10 | margin: 3px 0; 11 | //超出隐藏 12 | overflow: hidden; 13 | text-overflow: ellipsis; 14 | white-space: nowrap; 15 | 16 | &:hover { 17 | background: var(--ayong-premium-grey); 18 | } 19 | } 20 | 21 | .selectOption { 22 | color: var(--ayong-primary); 23 | font-weight: bold; 24 | background: var(--ayong-primary-grey); 25 | } 26 | 27 | 28 | .disabled { 29 | background: var(--ayong-grey-crescent); 30 | color: var(--ayong-grey); 31 | cursor: not-allowed; 32 | } 33 | 34 | 35 | //基础icon 36 | .icon { 37 | width: 13px; 38 | height: 13px; 39 | fill: var(--ayong-stone-gray); 40 | } 41 | 42 | //动态icon样式 43 | .iconActive { 44 | fill: var(--ayong-primary); 45 | } 46 | 47 | 48 | .emptyBox { 49 | display: flex; 50 | flex-direction: column; 51 | align-items: center; 52 | color: var(--ayong-stone-gray); 53 | font: 400 12px "Helvetica Neue", Helvetica, Arial, sans-serif; 54 | 55 | } 56 | 57 | .empty { 58 | width: 10%; 59 | height: 10%; 60 | margin-bottom: 10px; 61 | } 62 | 63 | .stickyOption { 64 | position: sticky; 65 | top: 50%; /* 垂直居中 */ 66 | transform: translateY(-50%); 67 | background-color: lightblue; 68 | padding: 10px; 69 | } 70 | -------------------------------------------------------------------------------- /components/select/components/single/index.module.less: -------------------------------------------------------------------------------- 1 | 2 | .selectValue { 3 | width: 100%; 4 | display: flex; 5 | margin-top: 4px; 6 | } 7 | .customSelectSelectionSearchInput { 8 | flex: 1; 9 | width: 10px; 10 | outline: none; 11 | padding: 4px; 12 | border: none; 13 | border-radius: 4px; 14 | box-sizing: border-box; 15 | background: transparent; 16 | } 17 | -------------------------------------------------------------------------------- /components/select/components/single/index.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import selectStyle from "./index.module.less"; 3 | 4 | const Single = ({ search, optionsMap, selectedValues, searchTerm, onInputClick, handleOnKeyDown, onBlur = () => {}, onFocus = () => {}, onChange = () => {} }) => { 5 | return ( 6 |
7 | {optionsMap.get(selectedValues) ?? "请选择"} 8 | {search && ( 9 | <> 10 | 20 |   21 | 22 | )} 23 |
24 | ); 25 | }; 26 | 27 | export default Single; 28 | -------------------------------------------------------------------------------- /components/select/index.d.ts: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | 3 | 4 | export interface keyValue { 5 | [key: string| number]: string| number; 6 | } 7 | export interface Options { 8 | value: keyValue; 9 | label: keyValue; 10 | disabled?: boolean; 11 | } 12 | 13 | export interface SelectProps { 14 | className?: string;// 类名 15 | defaultValue?: string | string[];// 默认值 16 | value?: string | string[];// 选中值 17 | style?: React.CSSProperties;// 样式 18 | mode?: 'multiple' | 'tags' | 'single';// 模式 19 | onChange?: (value: string | string[]) => void;// 选中值改变时的回调 20 | options: Options[];// 选项数据 21 | disabled?: boolean;// 是否禁用 22 | clearable?: boolean;// 是否可清空 23 | search?: boolean;// 是否可搜索 24 | collapseTags?: boolean;//是否折叠多选 25 | optionRender?: (opt: options) => React.FC | null //自定义下拉模版 26 | optionHeaderRender?: (opt: options) => React.FC | null //自定义下来模版 27 | } 28 | 29 | export interface OptionsParma { 30 | options: Options[];// 选项数据 31 | onClick: Function;// 点击事件 32 | selectedValues?: string[];// 选中值 33 | } 34 | 35 | declare const Select: React.FC; 36 | 37 | export default Select; 38 | -------------------------------------------------------------------------------- /components/skeleton/skeleton.js: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/AyongNice/ayongUI/d06a6ea9048e3109fb6e2d3f5285f980ccfb633f/components/skeleton/skeleton.js -------------------------------------------------------------------------------- /components/slider/slider.js: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/AyongNice/ayongUI/d06a6ea9048e3109fb6e2d3f5285f980ccfb633f/components/slider/slider.js -------------------------------------------------------------------------------- /components/spin/spin.js: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/AyongNice/ayongUI/d06a6ea9048e3109fb6e2d3f5285f980ccfb633f/components/spin/spin.js -------------------------------------------------------------------------------- /components/style-animation/directionenter.module.less: -------------------------------------------------------------------------------- 1 | .top { 2 | animation: enterTop 0.5s ease-in-out; 3 | } 4 | 5 | .bottom { 6 | animation: enterBottom 0.5s ease-in-out; 7 | } 8 | 9 | .left { 10 | animation: enterLeft 0.5s ease-in-out; 11 | } 12 | 13 | .right { 14 | animation: enterRight 0.5s ease-in-out; 15 | } 16 | 17 | @keyframes enterTop { 18 | from { 19 | opacity: 0; 20 | transform: translateY(-100%);; 21 | } 22 | to { 23 | opacity: 1; 24 | transform: translateY(0); /* 向下偏移一些距离 */ 25 | } 26 | } 27 | 28 | @keyframes enterBottom { 29 | from { 30 | opacity: 0; 31 | transform: translateY(100%); 32 | } 33 | to { 34 | opacity: 1; 35 | transform: translateY(0); /* 向下偏移一些距离 */ 36 | } 37 | } 38 | 39 | @keyframes enterLeft { 40 | from { 41 | opacity: 0; 42 | transform: translateX(-100%);; 43 | } 44 | to { 45 | opacity: 1; 46 | transform: translateX(0); /* 向下偏移一些距离 */ 47 | } 48 | } 49 | 50 | @keyframes enterRight { 51 | from { 52 | opacity: 0; 53 | transform: translateX(100%);; 54 | } 55 | to { 56 | opacity: 1; 57 | transform: translateX(0); /* 向下偏移一些距离 */ 58 | } 59 | } 60 | -------------------------------------------------------------------------------- /components/style-animation/directionout.module.less: -------------------------------------------------------------------------------- 1 | .top { 2 | animation: enterTop 1s ease-in-out; 3 | } 4 | 5 | .bottom { 6 | animation: enterBottom 1s ease-in-out; 7 | } 8 | 9 | .left { 10 | animation: enterLeft 1s ease-in-out; 11 | } 12 | 13 | .right { 14 | animation: enterRight 1s ease-in-out; 15 | } 16 | 17 | @keyframes enterTop { 18 | from { 19 | opacity: 0; 20 | transform: translateY(0); 21 | } 22 | to { 23 | opacity: 1; 24 | transform: translateY(-100%); /* 向下偏移一些距离 */ 25 | background: #0a0e13; 26 | } 27 | } 28 | 29 | @keyframes enterBottom { 30 | from { 31 | opacity: 0; 32 | transform: translateY(0);; 33 | } 34 | to { 35 | opacity: 1; 36 | transform: translateY(100%); /* 向下偏移一些距离 */ 37 | } 38 | } 39 | 40 | @keyframes enterLeft { 41 | from { 42 | opacity: 0; 43 | transform: translateX(0);; 44 | } 45 | to { 46 | opacity: 1; 47 | transform: translateX(-100%); /* 向下偏移一些距离 */ 48 | } 49 | } 50 | 51 | @keyframes enterRight { 52 | from { 53 | opacity: 0; 54 | transform: translateX(0);; 55 | } 56 | to { 57 | opacity: 1; 58 | transform: translateX(100%); /* 向下偏移一些距离 */ 59 | } 60 | } 61 | -------------------------------------------------------------------------------- /components/switch/index.d.ts: -------------------------------------------------------------------------------- 1 | export interface SwitchProps { 2 | value?: boolean;// 默认值 3 | style?: React.CSSProperties;// 样式 4 | title?: string;// 标题 5 | className?: string;// 样式类名 6 | disabled?: boolean;// 是否禁用 7 | activeColor?: string;//打开时的颜色 8 | inactiveColor?: string;// 关闭时的颜色 9 | onChange?: (value: boolean) => void;// 状态改变时的回调 10 | 11 | } 12 | 13 | declare const Switch: React.FC; 14 | 15 | export default Switch; 16 | -------------------------------------------------------------------------------- /components/switch/index.module.less: -------------------------------------------------------------------------------- 1 | @import "../../config/style.module.less"; 2 | 3 | .ayongSwitch { 4 | background: var(--ayong-stone-gray); 5 | height: 22px; 6 | line-height: 22px; 7 | min-width: 44px; 8 | vertical-align: middle; 9 | border-radius: 100px; 10 | position: relative; 11 | 12 | .handle { 13 | position: absolute; 14 | top: 2px; 15 | inset-inline-start: 2px; 16 | width: 43%; 17 | height: 82%; 18 | transition: all 0.2s ease-in-out; 19 | 20 | &::before { 21 | position: absolute; 22 | top: 0; 23 | inset-inline-end: 0; 24 | bottom: 0; 25 | inset-inline-start: 0; 26 | background-color: var(--ayong-light); 27 | border-radius: 9px; 28 | transition: all 0.2s ease-in-out; 29 | content: ""; 30 | } 31 | } 32 | 33 | .inner { 34 | 35 | } 36 | 37 | &.checked { 38 | background-color: var(--ayong-primary); 39 | 40 | .handle { 41 | inset-inline-start: calc(100% - 20px); 42 | } 43 | } 44 | } 45 | 46 | .title { 47 | margin-left: 10px; 48 | font-size: 14px; 49 | color: var(--ayong-font-dark); 50 | } 51 | 52 | -------------------------------------------------------------------------------- /components/switch/index.tsx: -------------------------------------------------------------------------------- 1 | import styles from "./index.module.less"; 2 | import {useState} from "react"; 3 | import {SwitchProps} from "./index.d"; 4 | import '../../config/style.module.less' 5 | 6 | export default function Switch(props: SwitchProps) { 7 | const { 8 | value = false, 9 | style, 10 | title, 11 | className, 12 | disabled, 13 | activeColor = '#8aabec', 14 | inactiveColor = '#9b9ea4', 15 | onChange = (value: boolean) => { 16 | 17 | }, 18 | } = props 19 | 20 | const [isChecked, setIsChecked] = useState(value) 21 | 22 | const handleButtonClick = (): void => { 23 | setIsChecked(!isChecked); 24 | onChange(value) 25 | } 26 | 27 | 28 | const wrapClassName = `${styles.ayongSwitch} ${isChecked ? styles.checked : ''} ${disabled ? 'disabled' : ''} $` 29 | 30 | return
31 | 43 | {title} 44 |
45 | } 46 | -------------------------------------------------------------------------------- /components/table/components/empty/empty.tsx: -------------------------------------------------------------------------------- 1 | import ConditionalRender from "../../../conditional-render/conditional-render.tsx"; 2 | 3 | /** 4 | * 空数据组件 5 | * @param length 6 | * @constructor 7 | */ 8 | const Empty = ({length = 1}: { length: number }) => ( 9 | 10 | 11 | 12 | 暂无数据 13 | 14 | 15 | 16 | 17 | ) 18 | export default Empty; -------------------------------------------------------------------------------- /components/table/components/group-child-th/group-child-th.tsx: -------------------------------------------------------------------------------- 1 | import ConditionalRender from "../../../conditional-render/conditional-render.tsx"; 2 | import React from "react"; 3 | import {Column, ColumnGroup} from "../../index.d"; 4 | 5 | /** 6 | * 表头分组组件 th 7 | * @constructor 8 | */ 9 | function renderSubHeaders(columns: Column[]) { 10 | return ( 11 | <> 12 | {columns.map((column: Column) => ( 13 | 14 | {column.title} 15 | 16 | ))} 17 | 18 | ); 19 | } 20 | 21 | const GroupChildTh = ({tableColumns}: { tableColumns: Column[] }) => ( 22 | 23 | {tableColumns.map((column: Column | ColumnGroup) => ( 24 | 25 | {column.type === 'columnGroup' && ( 26 | // 如果是列分组，则递归渲染子级表头 27 | renderSubHeaders((column as ColumnGroup).children, (column as ColumnGroup).children.length) 28 | )} 29 | 30 | ))} 31 | 32 | ) 33 | export default GroupChildTh; 34 | -------------------------------------------------------------------------------- /components/table/components/unfold-button/index.module.less: -------------------------------------------------------------------------------- 1 | .rotate180 { 2 | transition: transform 0.3s ease; /* 添加过渡效果 */ 3 | } 4 | 5 | .rotate { 6 | transform: rotate(180deg); /* 在此添加按钮旋转的效果 */ 7 | } 8 | -------------------------------------------------------------------------------- /components/table/components/unfold-td/unfold-td.tsx: -------------------------------------------------------------------------------- 1 | import ConditionalRender from "../../../conditional-render/conditional-render.tsx"; 2 | import {DataItem, UnfoldTdProps} from "../../index.d"; 3 | 4 | const UnfoldTd = ({expandable = {}, ayonEexpandedRowKeys, index, item}: UnfoldTdProps) => { 5 | const {expandedRowRender, expandedRowKeys} = expandable; 6 | const renderExpandContent = (index: number, item: DataItem): string => { 7 | if (Array.isArray(expandedRowKeys) && expandedRowKeys.includes(index)) { 8 | return typeof expandedRowRender === 'function' ? expandedRowRender(item) : expandedRowRender; 9 | } 10 | return ''; 11 | }; 12 | 13 | return ( 14 | 15 | {expandable?.expandedRowKeys && expandable?.expandedRowKeys.map((rowKeys: number | string, rowKeysIndex: number) => { 16 | return Number(rowKeys) === index ? 17 | 18 | 19 | {renderExpandContent(index, item)} 20 | 21 | : null 22 | })} 23 | 24 | ) 25 | } 26 | export default UnfoldTd; 27 | -------------------------------------------------------------------------------- /components/tag/tag.js: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/AyongNice/ayongUI/d06a6ea9048e3109fb6e2d3f5285f980ccfb633f/components/tag/tag.js -------------------------------------------------------------------------------- /components/time-picker/time-picker.js: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/AyongNice/ayongUI/d06a6ea9048e3109fb6e2d3f5285f980ccfb633f/components/time-picker/time-picker.js -------------------------------------------------------------------------------- /components/tooltip/components/trigger/trigger.d.ts: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | 3 | 4 | type placementType = 5 | 'topLeft' 6 | | 'top' 7 | | 'topRight' 8 | | 'bottomLeft' 9 | | 'bottom' 10 | | 'bottomRight' 11 | | 'leftTop' 12 | | 'left' 13 | | 'leftBottom' 14 | | 'rightTop' 15 | | 'right' 16 | | 'rightBottom'; 17 | 18 | export interface TriggerWrapProps { 19 | popupPlacement: placementType; 20 | action: Array<'hover' | 'click'>; 21 | popupTransitionName: string; 22 | popupVisible?: boolean; 23 | popup: React.ReactNode; 24 | onPopupVisibleChange?: (visible: boolean) => void; 25 | popupClassName?: string; 26 | popupAlign?: object; 27 | getPopupContainer?: () => HTMLElement; 28 | onPopupAlign?: (domNode: HTMLElement, align: object) => void; 29 | children: React.ReactNode; 30 | } 31 | -------------------------------------------------------------------------------- /components/tooltip/components/trigger/trigger.module.less: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/AyongNice/ayongUI/d06a6ea9048e3109fb6e2d3f5285f980ccfb633f/components/tooltip/components/trigger/trigger.module.less -------------------------------------------------------------------------------- /components/tooltip/index.d.ts: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | 3 | // export interface TooltipProps { 4 | // title?: string; 5 | // /** 是否显示箭头 */ 6 | // arrow?: boolean; 7 | // /** 主题风格 */ 8 | // theme?: 'light' | 'dark'; 9 | // /** 弹出层 */ 10 | // popup: ReactNode; 11 | // /** 弹出层类名 */ 12 | // popupClassName?: string; 13 | // /** 弹出层方向，默认左上 */ 14 | // placement?: string; 15 | // /** 自定义样式 */ 16 | // customStyle?: { 17 | // /** 弹出层外层 padding */ 18 | // popupWrapperPadding?: string; 19 | // }; 20 | // visible?: boolean; 21 | // /** children */ 22 | // children?: any; 23 | // } 24 | 25 | // export interface ClientRect { 26 | // x: number; 27 | // y: number; 28 | // width: number; 29 | // height: number; 30 | // top: number; 31 | // right: number; 32 | // bottom: number; 33 | // left: number; 34 | // } 35 | 36 | export interface TooltipProps { 37 | title?: string; //title为空 不显示 38 | style?: React.CSSProperties; // 自定义样式 39 | className?: string; // 自定义样式类名 40 | children: React.ReactNode; // 按钮内容 41 | disabled?: boolean; // 禁用 42 | width?: string; // 宽度 43 | color?: string; // 颜色 44 | whiteSpace?: 'normal' | 'nowrap'; // 换行 45 | arrow?: boolean; 46 | size?: string; //大小 47 | open?: boolean; // 是否打开, 默认false 48 | onOpenChange?: (open: boolean) => void; // 打开关闭回调 49 | placement?: 'top' | 'bottom' | 'left' | 'right'; 50 | } 51 | 52 | declare const ToolTip: React.FC; 53 | 54 | export default ToolTip; 55 | -------------------------------------------------------------------------------- /components/transfer/transfer.js: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/AyongNice/ayongUI/d06a6ea9048e3109fb6e2d3f5285f980ccfb633f/components/transfer/transfer.js -------------------------------------------------------------------------------- /components/tree-select/tree-select.js: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/AyongNice/ayongUI/d06a6ea9048e3109fb6e2d3f5285f980ccfb633f/components/tree-select/tree-select.js -------------------------------------------------------------------------------- /components/tree/tree.js: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/AyongNice/ayongUI/d06a6ea9048e3109fb6e2d3f5285f980ccfb633f/components/tree/tree.js -------------------------------------------------------------------------------- /components/upload/components/avatar-list/index.less: -------------------------------------------------------------------------------- 1 | .fileListItemExit { 2 | //css阻止用户交互属性 不能点击 3 | //pointer-events: none; 4 | animation: fadeOutDown 0.5s ease-in-out; /* 渐出效果 */ 5 | } 6 | 7 | //删除file 向下滑动动画 8 | @keyframes fadeOutDown { 9 | from { 10 | opacity: 1; 11 | transform: translateY(0); 12 | } 13 | to { 14 | opacity: 0; 15 | transform: translateY(20px); /* 向下偏移一些距离 */ 16 | } 17 | } 18 | 19 | 20 | -------------------------------------------------------------------------------- /components/upload/components/avatar-list/index.module.less: -------------------------------------------------------------------------------- 1 | 2 | 3 | .avatar { 4 | //虚线边框 5 | border-radius: 50%; 6 | display: flex; 7 | justify-content: center; 8 | align-items: center; 9 | border: 1px dashed #d9d9d9; 10 | cursor: pointer; 11 | position: relative; 12 | overflow: hidden; 13 | margin-left: 20px; 14 | 15 | span { 16 | font-size: 28px; 17 | font-weight: 100; 18 | } 19 | } 20 | 21 | .avatar:hover { 22 | border-color: #409EFF; 23 | 24 | .deleteIconBox { 25 | opacity: 0.5; 26 | } 27 | 28 | .deleteIcon { 29 | opacity: 1; 30 | fill: var(--ayong-light); 31 | } 32 | } 33 | 34 | .iconSize { 35 | width: 18px; 36 | height: 18px; 37 | } 38 | 39 | .deleteIconBox { 40 | position: absolute; 41 | width: 100%; 42 | height: 100%; 43 | background: var(--ayong-bolck); 44 | display: flex; 45 | align-items: center; 46 | justify-content: center; 47 | opacity: 0; 48 | } 49 | 50 | .deleteIcon { 51 | position: absolute; 52 | left: 50%; 53 | top: 50%; 54 | transform: translate(-50%, -50%); 55 | //触摸时的小手 56 | cursor: pointer; 57 | opacity: 0; 58 | } 59 | 60 | .box { 61 | width: 100%; 62 | height: 100%; 63 | display: flex; 64 | flex-wrap: wrap; 65 | } 66 | 67 | 68 | //添加file 向上滑动动画 69 | @keyframes fadeInUp { 70 | from { 71 | opacity: 0; 72 | transform: translateY(20px); /* 初始位置，向上偏移一些距离 */ 73 | } 74 | to { 75 | opacity: 1; 76 | transform: translateY(0); /* 最终位置，无偏移 */ 77 | } 78 | } 79 | 80 | 81 | 82 | -------------------------------------------------------------------------------- /components/upload/components/file-list/index.less: -------------------------------------------------------------------------------- 1 | .fileListItemExit { 2 | //css阻止用户交互属性 不能点击 3 | //pointer-events: none; 4 | animation: fadeOutDown 0.5s ease-in-out; /* 渐出效果 */ 5 | } 6 | 7 | //删除file 向下滑动动画 8 | @keyframes fadeOutDown { 9 | from { 10 | opacity: 1; 11 | transform: translateY(0); 12 | } 13 | to { 14 | opacity: 0; 15 | transform: translateY(20px); /* 向下偏移一些距离 */ 16 | } 17 | } 18 | 19 | 20 | -------------------------------------------------------------------------------- /components/upload/index.module.less: -------------------------------------------------------------------------------- 1 | 2 | .add { 3 | width: 30px; 4 | height: 30px; 5 | transform: rotate(45deg); 6 | } 7 | 8 | 9 | -------------------------------------------------------------------------------- /config/style-const.ts: -------------------------------------------------------------------------------- 1 | const defaults: string = '5px'; 2 | const butSmall: string = '2px'; 3 | const butLarge: string = '10px'; 4 | export const widthMap: { [key: string]: string } = { 5 | default: defaults, 6 | small: butSmall, 7 | large: butLarge 8 | } 9 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "ayongui", 3 | "version": "1.0.4", 4 | "main": "./cjs/index.js", 5 | "module": "./es/index.js", 6 | "browser": "./umd/index.js", 7 | "typings": "./index.d.ts", 8 | "style": "./style.css", 9 | "scripts": { 10 | "build": "vite build" 11 | }, 12 | "repository": { 13 | "type": "git", 14 | "url": "https://github.com/AyongNice/ayongUI.git" 15 | }, 16 | "publishConfig": { 17 | "registry": "https://registry.npmjs.org/" 18 | }, 19 | "keywords": [ 20 | "react", 21 | "react-component", 22 | "react-components", 23 | "react-ui", 24 | "react-ui-components", 25 | "react-component-library", 26 | "react-components-library", 27 | "react-ui-library", 28 | "轻量级", 29 | "简单好用", 30 | "react组件库" 31 | ], 32 | "license": "ISC", 33 | "devDependencies": { 34 | "@vitejs/plugin-react-refresh": "^1.3.6", 35 | "vite": "^4.5.0", 36 | "vite-plugin-dts": "^3.6.3", 37 | "vite-plugin-style-import": "^2.0.0" 38 | }, 39 | "peerDependencies": { 40 | "@types/react": "^18.3.1", 41 | "react": ">=16.8.3", 42 | "react-dom": ">=16.8.3" 43 | } 44 | 45 | } 46 | -------------------------------------------------------------------------------- /tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "target": "ES2020", 4 | "useDefineForClassFields": true, 5 | "lib": [ 6 | "ES2020", 7 | "DOM", 8 | "DOM.Iterable" 9 | ], 10 | "module": "ESNext", 11 | "declaration": true, 12 | "declarationDir": "types", 13 | /* Bundler mode */ 14 | "moduleResolution": "bundler", 15 | "allowImportingTsExtensions": true, 16 | "resolveJsonModule": true, 17 | "isolatedModules": true, 18 | "noEmit": true, 19 | "jsx": "react-jsx", 20 | /* Linting */ 21 | "noImplicitAny": false, 22 | "strict": false, // 关闭 strict 模式 23 | "skipLibCheck": true, // 跳过检查引入的库文件 24 | "esModuleInterop": true, // 启用 CommonJS 模块的导入 25 | "allowJs": true, // 允许编译 JavaScript 文件 26 | "noUnusedLocals": true, 27 | "noUnusedParameters": true, 28 | "noFallthroughCasesInSwitch": true, 29 | "paths": { 30 | "ayongUI": ["./src/ayongUI/dist/index.d.ts"] 31 | } 32 | }, 33 | "include": [ 34 | "components/**/*.tsx", 35 | "/**/*.ts", 36 | "types", 37 | "components/**/*.d.ts", 38 | "./typings/index.d.ts" 39 | ], 40 | "exclude": [ 41 | "node_modules" 42 | ] 43 | } 44 | -------------------------------------------------------------------------------- /typings/index.d.ts: -------------------------------------------------------------------------------- 1 | declare module '*.less' { 2 | const resource: {[key: string]: string}; 3 | export = resource; 4 | } 5 | --------------------------------------------------------------------------------