Skip to content

Commit 4f43edc

Browse files
AleryXuAleryXu
committed
:news: 添加react-loading动画组
1 parent 4e4fc48 commit 4f43edc

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

56 files changed

+1919
-106
lines changed

Diff for: ‎.editorconfig

+16
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
# http://editorconfig.org
2+
root = true
3+
4+
[*]
5+
indent_style = space
6+
indent_size = 2
7+
end_of_line = lf
8+
charset = utf-8
9+
trim_trailing_whitespace = true
10+
insert_final_newline = true
11+
12+
[*.md]
13+
trim_trailing_whitespace = false
14+
15+
[Makefile]
16+
indent_style = tab

Diff for: ‎.fatherrc.ts

+8
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
export default {
2+
esm: 'babel',
3+
cjs: 'babel',
4+
umd: {},
5+
extractCSS: true,
6+
lessInBabelMode: true,
7+
runtimeHelpers: true,
8+
};

Diff for: ‎.gitignore

+27-104
Original file line numberDiff line numberDiff line change
@@ -1,104 +1,27 @@
1-
# Logs
2-
logs
3-
*.log
4-
npm-debug.log*
5-
yarn-debug.log*
6-
yarn-error.log*
7-
lerna-debug.log*
8-
9-
# Diagnostic reports (https://nodejs.org/api/report.html)
10-
report.[0-9]*.[0-9]*.[0-9]*.[0-9]*.json
11-
12-
# Runtime data
13-
pids
14-
*.pid
15-
*.seed
16-
*.pid.lock
17-
18-
# Directory for instrumented libs generated by jscoverage/JSCover
19-
lib-cov
20-
21-
# Coverage directory used by tools like istanbul
22-
coverage
23-
*.lcov
24-
25-
# nyc test coverage
26-
.nyc_output
27-
28-
# Grunt intermediate storage (https://gruntjs.com/creating-plugins#storing-task-files)
29-
.grunt
30-
31-
# Bower dependency directory (https://bower.io/)
32-
bower_components
33-
34-
# node-waf configuration
35-
.lock-wscript
36-
37-
# Compiled binary addons (https://nodejs.org/api/addons.html)
38-
build/Release
39-
40-
# Dependency directories
41-
node_modules/
42-
jspm_packages/
43-
44-
# TypeScript v1 declaration files
45-
typings/
46-
47-
# TypeScript cache
48-
*.tsbuildinfo
49-
50-
# Optional npm cache directory
51-
.npm
52-
53-
# Optional eslint cache
54-
.eslintcache
55-
56-
# Microbundle cache
57-
.rpt2_cache/
58-
.rts2_cache_cjs/
59-
.rts2_cache_es/
60-
.rts2_cache_umd/
61-
62-
# Optional REPL history
63-
.node_repl_history
64-
65-
# Output of 'npm pack'
66-
*.tgz
67-
68-
# Yarn Integrity file
69-
.yarn-integrity
70-
71-
# dotenv environment variables file
72-
.env
73-
.env.test
74-
75-
# parcel-bundler cache (https://parceljs.org/)
76-
.cache
77-
78-
# Next.js build output
79-
.next
80-
81-
# Nuxt.js build / generate output
82-
.nuxt
83-
dist
84-
85-
# Gatsby files
86-
.cache/
87-
# Comment in the public line in if your project uses Gatsby and *not* Next.js
88-
# https://nextjs.org/blog/next-9-1#public-directory-support
89-
# public
90-
91-
# vuepress build output
92-
.vuepress/dist
93-
94-
# Serverless directories
95-
.serverless/
96-
97-
# FuseBox cache
98-
.fusebox/
99-
100-
# DynamoDB Local files
101-
.dynamodb/
102-
103-
# TernJS port file
104-
.tern-port
1+
# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
2+
3+
# dependencies
4+
/node_modules
5+
/npm-debug.log*
6+
/yarn-error.log
7+
/yarn.lock
8+
/package-lock.json
9+
10+
# production
11+
/dist
12+
/docs-dist
13+
/es
14+
/lib
15+
16+
# misc
17+
.DS_Store
18+
19+
# umi
20+
.umi
21+
.umi-production
22+
.umi-test
23+
.env.local
24+
25+
# ide
26+
/.vscode
27+
/.idea

Diff for: ‎.npmignore

+1
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
.github/

Diff for: ‎.npmrc

+1
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
registry = "https://registry.npmjs.com/"

Diff for: ‎.prettierignore

+7
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
**/*.svg
2+
**/*.ejs
3+
**/*.html
4+
package.json
5+
.umi
6+
.umi-production
7+
.umi-test

Diff for: ‎.prettierrc

+11
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
{
2+
"singleQuote": true,
3+
"trailingComma": "all",
4+
"printWidth": 80,
5+
"overrides": [
6+
{
7+
"files": ".prettierrc",
8+
"options": { "parser": "json" }
9+
}
10+
]
11+
}

Diff for: ‎.umirc.ts

+21
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
import { defineConfig } from 'dumi';
2+
3+
export default defineConfig({
4+
title: 'react-loading',
5+
favicon: 'http://h5.dooring.cn/uploads/logo_1742fd359da.png',
6+
logo: 'http://h5.dooring.cn/uploads/logo_1742fd359da.png',
7+
outputPath: '../../dooring-bs/server/static/react-loading',
8+
base: '/react-loading/',
9+
publicPath: '/react-loading/',
10+
extraBabelPlugins: [
11+
[
12+
'import',
13+
{
14+
libraryName: 'antd',
15+
libraryDirectory: 'es',
16+
style: true,
17+
},
18+
],
19+
],
20+
// more config: https://d.umijs.org/config
21+
});

Diff for: ‎README.md

+42-2
Original file line numberDiff line numberDiff line change
@@ -1,2 +1,42 @@
1-
# react-loading
2-
Load animation component library based on react.
1+
## Hello react-loading!
2+
3+
react-loading, 一款基于 react 的轻量级加载动画库, 支持按需导入, 开箱即用!
4+
5+
## [Demo](http://h5.dooring.cn/react-loading)
6+
7+
### Install | 安装
8+
9+
```bash
10+
# npm install react-laoding
11+
yarn add @alex_xu/react-loading
12+
```
13+
14+
### Use | 使用
15+
16+
```js
17+
import { BallPulse, BallClipRotate, SquareSpin } from '@alex_xu/react-loading';
18+
19+
export default () => <BallClipRotate text="H5-Dooring" />;
20+
```
21+
22+
### More Production
23+
24+
| name | Description |
25+
| --------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------- |
26+
| [H5-Dooring](https://github.com/MrXujiang/h5-Dooring) | 让 H5 制作像搭积木一样简单, 轻松搭建 H5 页面, H5 网站, PC 端网站, LowCode 平台. |
27+
| [V6.Dooring](https://github.com/MrXujiang/v6.dooring.public) | 可视化大屏解决方案, 提供一套可视化编辑引擎, 助力个人或企业轻松定制自己的可视化大屏应用. |
28+
| [dooring-electron-lowcode](https://github.com/MrXujiang/dooring-electron-lowcode) | 基于 electron 的 H5-Dooring 编辑器桌面端. |
29+
| [PC-Dooring](https://github.com/MrXujiang/pc-Dooring) | 网格式拖拽搭建 PC 端页面. |
30+
| [DooringX](https://github.com/H5-Dooring/dooringx) | 快速高效搭建可视化拖拽平台. |
31+
32+
## 赞助 | Sponsored
33+
34+
开源不易, 有了您的赞助, 我们会做的更好~
35+
36+
<img src="http://cdn.dooring.cn/dr/WechatIMG2.jpeg" width="180px" />
37+
38+
## 技术反馈和交流群 | Technical feedback and communication
39+
40+
微信：beautifulFront
41+
42+
<img src="http://cdn.dooring.cn/dr/qtqd_code.png" width="180px" />

Diff for: ‎docs/index.md

+140
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,140 @@
1+
## Hello react-loading!
2+
3+
react-loading, 一款基于 react 的轻量级加载动画库, 支持按需导入, 开箱即用!
4+
5+
```tsx
6+
import React from 'react';
7+
import { message, Button } from 'antd';
8+
import {
9+
BallPulse,
10+
BallClipRotate,
11+
SquareSpin,
12+
BallScale,
13+
LineScale,
14+
LineScaleParty,
15+
BallScaleMultiple,
16+
BallPulseSync,
17+
BallBeat,
18+
LineScalePulseOut,
19+
BallSpinFadeLoader,
20+
LineSpinFadeLoader,
21+
} from '@alex_xu/react-loading';
22+
import { CopyToClipboard } from 'react-copy-to-clipboard';
23+
24+
const list = [
25+
{
26+
c: <BallPulse text="ball-pulse" />,
27+
t: `<BallPulse text="ball-pulse" />`,
28+
},
29+
{
30+
c: <BallClipRotate text="ball-clip-rotate" />,
31+
t: `<BallClipRotate text="ball-clip-rotate" />`,
32+
},
33+
{
34+
c: <BallScale text="ball-scale" />,
35+
t: `<BallScale text="ball-scale" />`,
36+
},
37+
{
38+
c: <LineScalePulseOut text="line-scale-pulse-out" />,
39+
t: `<LineScalePulseOut text="line-scale-pulse-out" />`,
40+
},
41+
{
42+
c: <LineScale text="line-scale" />,
43+
t: `<LineScale text="line-scale" />`,
44+
},
45+
{
46+
c: <LineScaleParty text="line-scale-party" />,
47+
t: `<LineScaleParty text="line-scale-party" />`,
48+
},
49+
{
50+
c: <BallPulseSync text="ball-pulse-sync" />,
51+
t: `<BallPulseSync text="ball-pulse-sync" />`,
52+
},
53+
{
54+
c: <BallBeat text="ball-beat" />,
55+
t: `<BallBeat text="ball-beat" />`,
56+
},
57+
{
58+
c: <SquareSpin text="square-spin" />,
59+
t: `<SquareSpin text="square-spin" />`,
60+
},
61+
{
62+
c: <BallSpinFadeLoader text="ball-spin-fade-loader" textOffset={30} />,
63+
t: `<BallSpinFadeLoader text="ball-spin-fade-loader" />`,
64+
},
65+
{
66+
c: <BallScaleMultiple text="ball-scale-multiple" textOffset={30} />,
67+
t: `<BallScaleMultiple text="ball-scale-multiple" />`,
68+
},
69+
{
70+
c: <LineSpinFadeLoader text="line-spin-fade-loader" textOffset={30} />,
71+
t: `<LineSpinFadeLoader text="line-spin-fade-loader" />`,
72+
},
73+
];
74+
75+
export default () => {
76+
return (
77+
<div>
78+
{list.map((v) => {
79+
return (
80+
<CopyToClipboard
81+
key={v.t}
82+
text={v.t}
83+
onCopy={() => {
84+
message.success('已复制到剪切板');
85+
}}
86+
>
87+
<div
88+
style={{
89+
cursor: 'pointer',
90+
display: 'inline-flex',
91+
width: '160px',
92+
height: '100px',
93+
}}
94+
>
95+
{v.c}
96+
</div>
97+
</CopyToClipboard>
98+
);
99+
})}
100+
</div>
101+
);
102+
};
103+
```
104+
105+
### Install | 安装
106+
107+
```bash
108+
# npm install @alex_xu/react-loading
109+
yarn add @alex_xu/react-loading
110+
```
111+
112+
### Use | 使用
113+
114+
```js
115+
import { BallPulse, BallClipRotate, SquareSpin } from '@alex_xu/react-loading';
116+
117+
export default () => <BallClipRotate text="H5-Dooring" />;
118+
```
119+
120+
### More Production
121+
122+
| name | Description |
123+
| --------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------- |
124+
| [H5-Dooring](https://github.com/MrXujiang/h5-Dooring) | 让 H5 制作像搭积木一样简单, 轻松搭建 H5 页面, H5 网站, PC 端网站, LowCode 平台. |
125+
| [V6.Dooring](https://github.com/MrXujiang/v6.dooring.public) | 可视化大屏解决方案, 提供一套可视化编辑引擎, 助力个人或企业轻松定制自己的可视化大屏应用. |
126+
| [dooring-electron-lowcode](https://github.com/MrXujiang/dooring-electron-lowcode) | 基于 electron 的 H5-Dooring 编辑器桌面端. |
127+
| [PC-Dooring](https://github.com/MrXujiang/pc-Dooring) | 网格式拖拽搭建 PC 端页面. |
128+
| [DooringX](https://github.com/H5-Dooring/dooringx) | 快速高效搭建可视化拖拽平台. |
129+
130+
## 赞助 | Sponsored
131+
132+
开源不易, 有了您的赞助, 我们会做的更好~
133+
134+
<img src="http://cdn.dooring.cn/dr/WechatIMG2.jpeg" width="180px" />
135+
136+
## 技术反馈和交流群 | Technical feedback and communication
137+
138+
微信：beautifulFront
139+
140+
<img src="http://cdn.dooring.cn/dr/qtqd_code.png" width="180px" />

0 commit comments

Comments
 (0)