bee-loading - npm Package Compare versions

+46

.github/workflows/publish.yml

		on:
		push:
		tags:
		- 'v*'
		name: Publish
		jobs:
		# test:
		# runs-on: ubuntu-latest
		# steps:
		# - uses: actions/checkout@v2
		# - uses: actions/setup-node@v1
		# with:
		# node-version: 10
		# - run: npm i -g bee-tools-test
		# - run: npm i
		# - run: npm test

		publish:
		# needs: test
		runs-on: ubuntu-latest
		steps:
		- uses: actions/checkout@v2
		- uses: actions/setup-node@v1
		with:
		node-version: 10
		registry-url: https://registry.npmjs.org/
		- run: npm i -g bee-tools
		- run: npm i
		- run: npm publish
		env:
		NODE_AUTH_TOKEN: ${{secrets.NPM_TOKEN}}
		- uses: iuap-design/actions-ynpm-sync@master

		github-release:
		needs: publish
		runs-on: ubuntu-latest
		steps:
		- uses: actions/checkout@v2
		- uses: actions/setup-node@v1
		with:
		node-version: 10
		registry-url: https://registry.npmjs.org/
		- run: npm i -g github-release-from-changelog
		- run: github-release-from-changelog
		env:
		GITHUB_TOKEN: ${{secrets.GITHUB_TOKEN}}

.huskyrc

Sorry, the diff of this file is not supported yet

+5

build/static/images/loading.css

		.loading {
		width: 42px;
		height: 41px;
		}

+6

build/static/images/loading.svg

		<svg xmlns="http://www.w3.org/2000/svg">
		<defs>
		<linearGradient x1="49.7770001%" y1="99.9886667%" x2="49.7770001%" y2="22.7916984%" id="linearGradient-1"> <stop stop-color="#82D900" offset="0%"/> <stop stop-color="#FFFFFF" stop-opacity="0" offset="100%"/> </linearGradient> <linearGradient x1="0.0765%" y1="49.8045%" x2="84.0021644%" y2="49.8045%" id="linearGradient-2"> <stop stop-color="#FFBE0E" offset="0%"/> <stop stop-color="#FFFFFF" stop-opacity="0" offset="100%"/> </linearGradient> <linearGradient x1="50.2295001%" y1="-0.0809999429%" x2="50.2295001%" y2="80.0618828%" id="linearGradient-3"> <stop stop-color="#FF4747" offset="0%"/> <stop stop-color="#FFFFFF" stop-opacity="0" offset="100%"/> </linearGradient> <linearGradient x1="99.9256667%" y1="49.918%" x2="24.2692403%" y2="49.918%" id="linearGradient-4"> <stop stop-color="#008CDC" offset="0%"/> <stop stop-color="#FFFFFF" stop-opacity="0" offset="100%"/> </linearGradient>
		</defs>
		<symbol id="loading" viewBox="0 0 42 41"> <!-- Generator: Sketch 53.2 (72643) - https://sketchapp.com --> <title>windou</title> <desc>Created with Sketch.</desc> <g id="Symbols" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"> <g id="视图/loading" transform="translate(-3.000000, -3.000000)"> <g id="windou" transform="translate(3.000000, 3.000000)"> <g id="分组-3" transform="translate(29.000000, 0.000000)"> <rect id="Rectangle" fill="url(#linearGradient-1)" opacity="0.49937221" x="0.409090909" y="0" width="12" height="34"/> <circle id="Oval" fill="#00C864" cx="6.40909091" cy="34.2667091" r="6"/> </g> <g id="分组-2" transform="translate(0.451729, 28.000000)"> <rect id="Rectangle" fill="url(#linearGradient-2)" opacity="0.509021577" x="6.26235595" y="3.55271368e-15" width="34" height="12"/> <circle id="Oval" fill="#FFBE0E" cx="6.5028169" cy="6" r="6"/> </g> <g id="分组" transform="translate(1.000000, 0.000000)"> <rect id="Rectangle" fill="url(#linearGradient-3)" opacity="0.501232329" x="-2.65565347e-13" y="5.78821281" width="12" height="34"/> <circle id="Oval" fill="#FF4747" cx="6" cy="6" r="6"/> </g> <g id="Group" transform="translate(0.954545, 0.000000)"> <rect id="Rectangle" fill="url(#linearGradient-4)" opacity="0.504185268" x="0" y="0" width="36" height="11.9426569"/> <circle id="Oval" fill="#008CDC" cx="35" cy="6" r="6"/> </g> </g> </g> </g> </symbol>
		</svg>

+3

commitlint.config.js

		module.exports = {
		extends: ['@commitlint/config-conventional']
		}

+9

-0

CHANGELOG.md

		@@ -0,1 +1,10 @@
		## [2.0.4](https://github.com/tinper-bee/bee-loading/compare/v2.0.3...v2.0.4) (2020-04-24)


		### Bug Fixes

		* 自动化 ([1983fd0](https://github.com/tinper-bee/bee-loading/commit/1983fd0aaadfcfeaeeb4f88fecac709449fab1c1))



		<a name="2.0.3"></a>
		@@ -2,0 +11,0 @@ ## [2.0.3](https://github.com/tinper-bee/bee-loading/compare/v2.0.2...v2.0.3) (2019-10-15)

+3

-3

index.html

		@@ -6,5 +6,5 @@ <!DOCTYPE html>
		<title>neoui-react-button</title>
		<link rel="stylesheet" href="./dist/demo.css">
		<link rel="stylesheet" href="./demo/atom-one-dark.css">
		<link href="//design.yonyoucloud.com/static/tinper-bee/latest/assets/tinper-bee.css" rel="stylesheet" media="screen" />
		<link rel="stylesheet" href="./dist/demo.css">
		</head>
		@@ -20,4 +20,4 @@ <body style="background: #eceff1">
		<script src="//design.yonyoucloud.com/static/es5-shim/es5-sham.min.js"></script>
		<script src="//design.yonyoucloud.com/static/react/16.8.4/umd/react.production.min.js"></script>
		<script src="//design.yonyoucloud.com/static/react/16.8.4/umd/react-dom.production.min.js"></script>
		<script src="//design.yonyoucloud.com/static/react/16.8.4/umd/react.development.js"></script>
		<script src="//design.yonyoucloud.com/static/react/16.8.4/umd/react-dom.development.js"></script>
		<script src="//design.yonyoucloud.com/static/prop-types/15.6.0/prop-types.min.js"></script>
		@@ -24,0 +24,0 @@ <script src="./dist/demo.js"></script>

+69

-65

package.json

		{
		"name": "bee-loading",
		"version": "2.0.3",
		"description": "Loading ui component for react",
		"keywords": [
		"react",
		"react-component",
		"bee-loading",
		"iuap-design",
		"tinper-bee",
		"Loading"
		],
		"engines": {
		"node": ">=4.0.0"
		},
		"homepage": "https://github.com/tinper-beebee-loading.git",
		"author": "Yonyou FED",
		"repository": "http://github.com/tinper-bee/bee-loading",
		"bugs": "https://github.com/tinper-beebee-loading.git/issues",
		"license": "MIT",
		"main": "./build/index.js",
		"config": {
		"port": 3000,
		"commitizen": {
		"path": "./node_modules/cz-conventional-changelog"
		"name": "bee-loading",
		"version": "2.0.4",
		"description": "Loading ui component for react",
		"keywords": [
		"react",
		"react-component",
		"bee-loading",
		"iuap-design",
		"tinper-bee",
		"Loading"
		],
		"engines": {
		"node": ">=4.0.0"
		},
		"homepage": "https://github.com/tinper-beebee-loading.git",
		"author": "Yonyou FED",
		"repository": "http://github.com/tinper-bee/bee-loading",
		"bugs": "https://github.com/tinper-beebee-loading.git/issues",
		"license": "MIT",
		"main": "./build/index.js",
		"config": {
		"port": 3000,
		"commitizen": {
		"path": "./node_modules/cz-conventional-changelog"
		}
		},
		"scripts": {
		"dev": "bee-tools run start",
		"build": "bee-tools run build",
		"lint": "bee-tools run lint",
		"test": "bee-tools run test",
		"chrome": "bee-tools run chrome",
		"coveralls": "bee-tools run coverage",
		"browsers": "bee-tools run browsers",
		"pub": "bee-tools run pub",
		"changelog": "conventional-changelog -p angular -i CHANGELOG.md -s -r 0",
		"version": "conventional-changelog -p angular -i CHANGELOG.md -s && git add CHANGELOG.md",
		"postversion": "git push --follow-tags",
		"prepublishOnly": "npm run build"
		},
		"dependencies": {
		"bee-icon": "^1.0.10",
		"bee-overlay": "^1.0.2",
		"classnames": "^2.2.5",
		"tinper-bee-core": "latest"
		},
		"peerDependencies": {
		"react": "^15.3.0 \|\| ^16.0",
		"react-dom": "^15.3.0 \|\| ^16.0",
		"prop-types": "15.6.0"
		},
		"devDependencies": {
		"babel-runtime": "^6.20.0",
		"bee-button": "latest",
		"bee-clipboard": "^2.0.0",
		"bee-drawer": "0.0.2",
		"bee-layout": "latest",
		"bee-panel": "latest",
		"bee-progress-bar": "^2.0.0",
		"chai": "^3.5.0",
		"console-polyfill": "~0.2.1",
		"cz-conventional-changelog": "^2.1.0",
		"enzyme": "^2.4.1",
		"es5-shim": "~4.1.10",
		"react": "15.3.2",
		"react-addons-test-utils": "15.3.2",
		"react-dom": "15.3.2",
		"husky": "^4.2.5"
		}
		},
		"scripts": {
		"dev": "bee-tools run start",
		"build": "bee-tools run build",
		"lint": "bee-tools run lint",
		"test": "bee-tools run test",
		"chrome": "bee-tools run chrome",
		"coveralls": "bee-tools run coverage",
		"browsers": "bee-tools run browsers",
		"pub": "bee-tools run pub",
		"changelog": "conventional-changelog -p angular -i CHANGELOG.md -s -r 0"
		},
		"dependencies": {
		"bee-icon": "^1.0.10",
		"bee-overlay": "^1.0.2",
		"classnames": "^2.2.5",
		"tinper-bee-core": "latest"
		},
		"peerDependencies": {
		"react": "^15.3.0 \|\| ^16.0",
		"react-dom": "^15.3.0 \|\| ^16.0",
		"prop-types": "15.6.0"
		},
		"devDependencies": {
		"babel-runtime": "^6.20.0",
		"bee-button": "latest",
		"bee-clipboard": "^2.0.0",
		"bee-drawer": "0.0.2",
		"bee-layout": "latest",
		"bee-panel": "latest",
		"bee-progress-bar": "^2.0.0",
		"chai": "^3.5.0",
		"console-polyfill": "~0.2.1",
		"cz-conventional-changelog": "^2.1.0",
		"enzyme": "^2.4.1",
		"es5-shim": "~4.1.10",
		"react": "15.3.2",
		"react-addons-test-utils": "15.3.2",
		"react-dom": "15.3.2"
		}
		}
		}

-222

demo/atom-one-dark.css

		/*

		Atom One Dark by Daniel Gamage
		Original One Dark Syntax theme from https://github.com/atom/one-dark-syntax

		base: #282c34
		mono-1: #abb2bf
		mono-2: #818896
		mono-3: #5c6370
		hue-1: #56b6c2
		hue-2: #61aeee
		hue-3: #c678dd
		hue-4: #98c379
		hue-5: #e06c75
		hue-5-2: #be5046
		hue-6: #d19a66
		hue-6-2: #e6c07b

		*/

		.hljs {
		display: block;
		overflow-x: auto;
		padding: 0.5em;
		color: #424242;
		background: #FAFAFA;
		}

		.hljs-comment,
		.hljs-quote {
		color: #424242;
		font-style: italic;
		}

		.hljs-doctag,
		.hljs-keyword,
		.hljs-formula {
		color: #c678dd;
		}

		.hljs-section,
		.hljs-name,
		.hljs-selector-tag,
		.hljs-deletion,
		.hljs-subst {
		color: #e06c75;
		}

		.hljs-literal {
		color: #56b6c2;
		}

		.hljs-string,
		.hljs-regexp,
		.hljs-addition,
		.hljs-attribute,
		.hljs-meta-string {
		color: #98c379;
		}

		.hljs-built_in,
		.hljs-class .hljs-title {
		color: #e6c07b;
		}

		.hljs-attr,
		.hljs-variable,
		.hljs-template-variable,
		.hljs-type,
		.hljs-selector-class,
		.hljs-selector-attr,
		.hljs-selector-pseudo,
		.hljs-number {
		color: #d19a66;
		}

		.hljs-symbol,
		.hljs-bullet,
		.hljs-link,
		.hljs-meta,
		.hljs-selector-id,
		.hljs-title {
		color: #61aeee;
		}

		.hljs-emphasis {
		font-style: italic;
		}

		.hljs-strong {
		font-weight: bold;
		}

		.hljs-link {
		text-decoration: underline;
		}

		.component-demo .u-panel {
		padding: 18px 20px;
		border: 1px solid #F0F0F0;
		}
		.component-demo .u-panel-default .u-panel-heading{
		background-color: #fff;
		padding: 0;
		position: relative;
		margin-bottom: 20px;
		}
		.component-demo p{
		margin: 0;
		font-size: 14px;
		}

		.component-demo .component-title{
		font-size: 14px;
		font-weight: bold;
		}

		.component-demo .component-code{
		position: absolute;
		right: 0;
		top: 0;
		color: #E14C46;
		font-size: 14px;
		cursor: pointer;
		}
		.component-demo .u-panel .u-panel-body{
		padding: 0;
		}

		.component-drawerc .pre-js,.component-drawerc .pre-css{
		margin: 0;
		}


		.component-drawerc .drawer-body {
		padding: 20px 20px;
		}
		.component-drawerc .component-code-copy {
		font-size: 14px;
		font-weight: 800;
		color: #424242;
		padding: 10px 0;
		position: relative;
		}
		.component-drawerc .component-code-copy .uf-copy::before{
		content: "\e6fc";
		}
		.component-drawerc .component-code-copy .uf{
		font-weight: 100;
		}
		.component-drawerc .component-code-copy.copy-css{
		margin-top: 20px;
		}

		.component-drawerc .component-code-copy .u-clipboard{
		position: absolute;
		right: 0;
		}
		/* 抽屉组件样式覆盖 */
		.component-drawerc{
		position: fixed;
		top: 0;
		left: 0;
		z-index: 100000;
		width: 0;
		height: 100%;
		}
		.component-drawerc .drawer-mask{
		background-color: rgba(0,0,0,.3);
		width: 100%;
		height: 100%;
		position: fixed;
		top: 0;
		left: 0;
		transition: transform 300ms ease-in-out, opacity 300ms ease-in-out;
		}
		.component-drawerc .drawer-close{
		position: absolute;
		top: 10px;
		right: 10px;
		font-size: 20px;
		cursor: pointer;
		}
		.component-drawerc .drawer{
		position: fixed;
		background-color: #fff;
		transition: transform 300ms ease-in-out;
		overflow: auto;
		}
		.component-drawerc .drawer-left{
		top: 0;
		left: 0;
		height: 100%;
		}
		.component-drawerc .drawer-right{
		top: 0;
		right: 0;
		height: 100%;
		}
		.component-drawerc .drawer-top{
		top: 0;
		left: 0;
		width: 100%;
		}
		.component-drawerc .drawer-bottom{
		bottom: 0;
		left: 0;
		width: 100%;
		}
		.component-drawerc .drawer-header{
		padding: 0 20px;
		border-radius: 0;
		background: #E14C46;
		color: #fff;
		border-bottom: 1px solid #e8e8e8;
		}
		.component-drawerc .drawer-header-title{
		margin: 0;
		color: #fff;
		height: 40px;
		line-height: 40px;
		}

-38

demo/demolist/Demo0.js

		/**
		* @title 页面级加载提示
		* @description 页面级加载提示推荐使用进度条组件
		*/

		import React, { Component } from 'react';
		import ProgressBar from 'bee-progress-bar';
		import Button from "bee-button";



		class Demo0 extends Component {
		start = () => {
		ProgressBar.start();
		}
		set = () => {
		ProgressBar.set(0.4);
		}
		inc = () => {
		ProgressBar.inc();
		}
		done = () => {
		ProgressBar.done();
		}
		render(){
		const style = {marginRight:"10px"};
		return (
		<div>
		<Button style={style} onClick={this.start}>点我开始</Button>
		<Button style={style} onClick={this.set}>设置固定位置</Button>
		<Button style={style} onClick={this.inc}>点我加快</Button>
		<Button onClick={this.done}>点我结束</Button>
		</div>
		)
		}
		}

		export default Demo0;

-75

demo/demolist/Demo1.js

		/**
		*
		* @title 基本用法
		* @description 设置`loadingType`来修改Loading样式。默认是'rotate'。
		*
		*/

		import React, { Component } from 'react';
		import Loading from '../../src';
		import Button from 'bee-button';

		class Demo1 extends Component {
		constructor(props) {
		super(props);
		this.state = {
		showRotate: false,
		showLine: false
		}
		}

		handleShow = () => {
		this.setState({
		showRotate: true
		})
		setTimeout(() => {
		this.setState({
		showRotate: false
		})
		}, 3000)

		}

		handleShowLine = () => {
		this.setState({
		showLine: true
		})
		setTimeout(() => {
		this.setState({
		showLine: false
		})
		}, 3000)

		}

		render() {
		return (
		<div>
		<Button
		colors="primary"
		onClick={this.handleShow}>
		点击显示默认loading
		</Button>
		<Loading
		fullScreen
		showBackDrop={true}
		show={this.state.showRotate}
		/>
		<Button
		colors="primary"
		style={{ marginLeft: 50 }}
		onClick={this.handleShowLine}>
		点击显示line loading
		</Button>
		<Loading
		fullScreen
		showBackDrop={true}
		loadingType="line"
		show={this.state.showLine}
		/>
		</div>
		)
		}
		}

		export default Demo1;

-21

demo/demolist/Demo2.js

		/**
		*
		* @title 容器
		* @description 指定`container`属性为`this`，可显示在该组件的上面。
		*
		*/

		import React, { Component } from 'react';
		import Loading from '../../src';

		class Demo2 extends Component {
		render() {
		return (
		<div className="demo2">
		<Loading container={this} show={true}/>
		</div>
		)
		}
		}

		export default Demo2;

-10

demo/demolist/Demo2.scss

		.demo2{
		height: 100px;
		width: 500px;
		background: rgba(0, 0, 0, 0.05);
		overflow: hidden;
		font-size: 14px;
		.u-loading-backdrop{
		z-index:1029;
		}
		}

-28

demo/demolist/Demo3.js

		/**
		*
		* @title 容器
		* @description 通过document对象的方法，指定`container`属性。
		*
		*/

		import React, { Component } from 'react';
		import Loading from '../../src';

		class Demo4 extends Component {
		constructor(props) {
		super(props);
		}
		getElement =()=>{
		return document.querySelector('.demo4')
		}
		render() {
		return (
		<div className="demo4">
		<Loading container={this.getElement} show={true} />
		</div>
		)
		}
		}


		export default Demo4;

-10

demo/demolist/Demo3.scss

		.demo4{
		height: 100px;
		width: 500px;
		background: rgba(0, 0, 0, 0.05);
		overflow: hidden;
		font-size: 14px;
		.u-loading-backdrop{
		z-index:1029;
		}
		}

-38

demo/demolist/Demo4.js

		/**
		*
		* @title 自定义描述文案
		* @description 通过设置 `tip` 属性，来添加Loading的文字描述。
		*
		*/

		import React, { Component } from 'react';
		import Loading from '../../src';


		class Demo3 extends Component {
		constructor(props) {
		super(props);
		this.a = null;
		}

		render() {
		return (
		<div className="demo3">
		<p>
		曾经有一份真诚的爱情放在我面前，我没有珍惜，等我失去的时候我才后悔莫及，人世间最痛苦的事莫过于此。
		如果上天能够给我一个再来一次的机会，我会对那个女孩子说三个字：我爱你。
		如果非要在这份爱上加上一个期限，我希望是……
		一万年
		</p>
		<Loading
		container={this}
		show={true}
		tip="Loading..."
		/>
		</div>
		)
		}
		}


		export default Demo3;

-10

demo/demolist/Demo4.scss

		.demo3{
		height: 130px;
		width: 500px;
		border: 1px solid #c1c7d0;
		overflow: hidden;
		font-size: 14px;
		.u-loading-backdrop{
		z-index:1029;
		}
		}

-34

demo/demolist/Demo5.js

		/**
		*
		* @title 不同尺寸的Loading
		* @description 通过设置`size`属性，来控制loading图标的大小
		*
		*/

		import React, { Component } from 'react';
		import Loading from '../../src';


		class Demo5 extends Component {
		constructor(props) {
		super(props);
		this.state = {
		show: true
		}
		this.a = null;
		}


		render() {
		return (
		<div className="demo5">
		<Loading size="sm" container={this} show={this.state.show} />
		<Loading container={this} show={this.state.show} />
		<Loading size="lg" container={this} show={this.state.show} />
		</div>
		)
		}
		}


		export default Demo5;

-19

demo/demolist/Demo5.scss

		.demo5{
		height: 100px;
		width: 500px;
		overflow: hidden;
		font-size: 14px;
		.u-loading-backdrop{
		z-index:1029;
		background: rgba(255,255,255,0);
		}
		.u-loading.u-loading-rotate.u-loading-rotate-sm>div{
		left: 20%;
		}
		.u-loading.u-loading-rotate>div{
		left: 40%;
		}
		.u-loading.u-loading-rotate.u-loading-rotate-lg>div{
		left: 65%;
		}
		}

-39

demo/demolist/Demo6.js

		/**
		*
		* @title 自定义加载图标
		* @description 如需自定义加载图标，需要同时设置 `loadingType` 属性和 `indicator` 属性。
		*
		*/

		import React, { Component } from 'react';
		import Loading from '../../src';

		let imgsrc = "http://design.yonyoucloud.com/static/bee.tinper.org-demo/loading.gif";

		class Demo6 extends Component {
		constructor(props) {
		super(props);
		this.state = {
		show: true
		}
		this.a = null;
		}


		render() {
		const beeIcon = <img src={imgsrc} style={{width:'50px'}}/>;
		return (
		<div className="demo5">
		<Loading
		container={this}
		show={this.state.show}
		loadingType="custom" //启用自定义图标
		indicator={beeIcon} //自定义图标的内容
		/>
		</div>
		)
		}
		}


		export default Demo6;

-83

demo/index-demo-base.js

		import React, { Component } from 'react';
		import ReactDOM from 'react-dom';
		import { Con, Row, Col } from 'bee-layout';
		import { Panel } from 'bee-panel';
		import Drawer from 'bee-drawer';
		import Clipboard from 'bee-clipboard';
		import Button from '../src';



		{demolist}

		class Demo extends Component {
		constructor(props){
		super(props);
		this.state = {
		open: false
		}
		}
		handleClick=()=> {
		this.setState({ open: !this.state.open })
		}
		fCloseDrawer=()=>{
		this.setState({
		open: false
		})
		}

		render () {
		const { title, example, code, desc, scss_code } = this.props;

		const header = (
		<div>
		<p className='component-title'>{ title }</p>
		<p>{ desc }</p>
		<span className='component-code' onClick={this.handleClick}> 查看源码 <i className='uf uf-arrow-right'/> </span>
		</div>
		);
		return (
		<Col md={12} id={title.trim()} className='component-demo'>
		<Panel header={header}>
		{example}
		</Panel>

		<Drawer className='component-drawerc' title={title} show={this.state.open} placement='right' onClose={this.fCloseDrawer}>
		<div className='component-code-copy'> JS代码
		<Clipboard action="copy" text={code}/>
		</div>
		<pre className="pre-js">
		<code className="hljs javascript">{ code }</code>
		</pre >
		{!!scss_code ?<div className='component-code-copy copy-css'> SCSS代码
		<Clipboard action="copy" text={scss_code}/>
		</div>:null }
		{ !!scss_code ? <pre className="pre-css">
		<code className="hljs css">{ scss_code }</code>
		</pre> : null }
		</Drawer>
		</Col>
		)
		}
		}

		class DemoGroup extends Component {
		constructor(props){
		super(props)
		}
		render () {
		return (
		<Row>
		{DemoArray.map((child,index) => {

		return (
		<Demo example= {child.example} title= {child.title} code= {child.code} scss_code= {child.scss_code} desc= {child.desc} key= {index}/>
		)

		})}
		</Row>
		)
		}
		}

		ReactDOM.render(<DemoGroup/>, document.getElementById('tinperBeeDemo'));

-84

demo/index.js

		import React, { Component } from 'react';
		import ReactDOM from 'react-dom';
		import { Con, Row, Col } from 'bee-layout';
		import { Panel } from 'bee-panel';
		import Drawer from 'bee-drawer';
		import Clipboard from 'bee-clipboard';
		import Button from '../src';



		var Demo0 = require("./demolist/Demo0");var Demo1 = require("./demolist/Demo1");var Demo2 = require("./demolist/Demo2");var Demo3 = require("./demolist/Demo3");var Demo4 = require("./demolist/Demo4");var Demo5 = require("./demolist/Demo5");var Demo6 = require("./demolist/Demo6");var DemoArray = [{"example":<Demo0 />,"title":" 页面级加载提示","code":"/*\r\n @title 页面级加载提示\r\n * @description 页面级加载提示推荐使用进度条组件\r\n /\r\n\r\nimport React, { Component } from 'react';\nimport { Button, ProgressBar } from 'tinper-bee';\r\n\n\n\r\n\r\n\r\nclass Demo0 extends Component {\r\n start = () => {\r\n ProgressBar.start();\r\n }\r\n set = () => {\r\n ProgressBar.set(0.4);\r\n }\r\n inc = () => {\r\n ProgressBar.inc();\r\n }\r\n done = () => {\r\n ProgressBar.done();\r\n }\r\n\trender(){\r\n const style = {marginRight:\"10px\"};\r\n\t\treturn (\r\n\t\t\t<div>\r\n\t\t\t\t<Button style={style} onClick={this.start}>点我开始</Button>\r\n\t\t\t\t<Button style={style} onClick={this.set}>设置固定位置</Button>\r\n\t\t\t\t<Button style={style} onClick={this.inc}>点我加快</Button>\r\n\t\t\t\t<Button onClick={this.done}>点我结束</Button>\r\n\t\t\t</div>\r\n\t\t)\r\n\t}\r\n}\r\n\r\nexport default Demo0;","desc":" 页面级加载提示推荐使用进度条组件"},{"example":<Demo1 />,"title":" 基本用法","code":"/\n \n * @title 基本用法\n * @description 设置`loadingType`来修改Loading样式。默认是'rotate'。\n \n /\n\nimport React, { Component } from 'react';\nimport { Button, Loading } from 'tinper-bee';\n\n\nclass Demo1 extends Component {\n constructor(props) {\n super(props);\n this.state = {\n showRotate: false,\n showLine: false\n }\n }\n\n handleShow = () => {\n this.setState({\n showRotate: true\n })\n setTimeout(() => {\n this.setState({\n showRotate: false\n })\n }, 3000)\n\n }\n\n handleShowLine = () => {\n this.setState({\n showLine: true\n })\n setTimeout(() => {\n this.setState({\n showLine: false\n })\n }, 3000)\n\n }\n\n render() {\n return (\n <div>\n <Button\n colors=\"primary\"\n onClick={this.handleShow}>\n 点击显示默认loading\n </Button>\n <Loading\n fullScreen\n showBackDrop={true}\n show={this.state.showRotate}\n />\n <Button\n colors=\"primary\"\n style={{ marginLeft: 50 }}\n onClick={this.handleShowLine}>\n 点击显示line loading\n </Button>\n <Loading\n fullScreen\n showBackDrop={true}\n loadingType=\"line\"\n show={this.state.showLine}\n />\n </div>\n )\n }\n}\n\nexport default Demo1;","desc":" 设置`loadingType`来修改Loading样式。默认是'rotate'。"},{"example":<Demo2 />,"title":" 容器","code":"/*\r\n \r\n * @title 容器\r\n * @description 指定`container`属性为`this`，可显示在该组件的上面。\r\n \r\n /\r\n\r\nimport React, { Component } from 'react';\nimport { Loading } from 'tinper-bee';\r\n\r\n\r\nclass Demo2 extends Component {\r\n render() {\r\n return (\r\n <div className=\"demo2\">\r\n <Loading container={this} show={true}/>\r\n </div>\r\n )\r\n }\r\n}\r\n\r\nexport default Demo2;","desc":" 指定`container`属性为`this`，可显示在该组件的上面。","scss_code":".demo2{\r\n height: 100px;\r\n width: 500px;\r\n background: rgba(0, 0, 0, 0.05);\r\n overflow: hidden;\r\n font-size: 14px;\r\n .u-loading-backdrop{\r\n z-index:1029;\r\n }\r\n}"},{"example":<Demo3 />,"title":" 容器","code":"/*\r\n \r\n * @title 容器\r\n * @description 通过document对象的方法，指定`container`属性。\r\n \r\n /\r\n\r\nimport React, { Component } from 'react';\nimport { Loading } from 'tinper-bee';\r\n\r\n\r\nclass Demo4 extends Component {\r\n constructor(props) {\r\n super(props);\r\n }\r\n getElement =()=>{\r\n return document.querySelector('.demo4')\r\n }\r\n render() {\r\n return (\r\n <div className=\"demo4\">\r\n <Loading container={this.getElement} show={true} />\r\n </div>\r\n )\r\n }\r\n}\r\n\r\n\r\nexport default Demo4;\r\n","desc":" 通过document对象的方法，指定`container`属性。","scss_code":".demo4{\r\n height: 100px;\r\n width: 500px;\r\n background: rgba(0, 0, 0, 0.05);\r\n overflow: hidden;\r\n font-size: 14px;\r\n .u-loading-backdrop{\r\n z-index:1029;\r\n }\r\n}"},{"example":<Demo4 />,"title":" 自定义描述文案","code":"/*\r\n \r\n * @title 自定义描述文案\r\n * @description 通过设置 `tip` 属性，来添加Loading的文字描述。\r\n \r\n /\r\n\r\nimport React, { Component } from 'react';\nimport { Loading } from 'tinper-bee';\r\n\r\n\r\n\r\nclass Demo3 extends Component {\r\n constructor(props) {\r\n super(props);\r\n this.a = null;\r\n }\r\n\r\n render() {\r\n return (\r\n <div className=\"demo3\">\r\n <p>\r\n 曾经有一份真诚的爱情放在我面前，我没有珍惜，等我失去的时候我才后悔莫及，人世间最痛苦的事莫过于此。\r\n 如果上天能够给我一个再来一次的机会，我会对那个女孩子说三个字：我爱你。\r\n 如果非要在这份爱上加上一个期限，我希望是……\r\n 一万年\r\n </p>\r\n <Loading container={this} show={true} \r\n tip=\"1231231123\"\r\n loadingType='line'>hhhhhhh</Loading>\r\n </div>\r\n )\r\n }\r\n}\r\n\r\n\r\nexport default Demo3;","desc":" 通过设置 `tip` 属性，来添加Loading的文字描述。","scss_code":".demo3{\r\n height: 130px;\r\n width: 500px;\r\n border: 1px solid #c1c7d0;\r\n overflow: hidden;\r\n font-size: 14px;\r\n .u-loading-backdrop{\r\n z-index:1029;\r\n }\r\n}"},{"example":<Demo5 />,"title":" 不同尺寸的Loading","code":"/*\n \n * @title 不同尺寸的Loading\n * @description 通过设置`size`属性，来控制loading图标的大小\n \n /\n\nimport React, { Component } from 'react';\nimport { Loading } from 'tinper-bee';\n\n\n\nclass Demo5 extends Component {\n constructor(props) {\n super(props);\n this.state = {\n show: true\n }\n this.a = null;\n }\n\n\n render() {\n return (\n <div className=\"demo5\">\n <Loading size=\"sm\" container={this} show={this.state.show} />\n <Loading container={this} show={this.state.show} />\n <Loading size=\"lg\" container={this} show={this.state.show} />\n </div>\n )\n }\n}\n\n\nexport default Demo5;","desc":" 通过设置`size`属性，来控制loading图标的大小","scss_code":".demo5{\r\n height: 100px;\r\n width: 500px;\r\n overflow: hidden;\r\n font-size: 14px;\r\n .u-loading-backdrop{\r\n z-index:1029;\r\n background: rgba(255,255,255,0);\r\n }\r\n .u-loading.u-loading-rotate.u-loading-rotate-sm>div{\r\n left: 20%;\r\n }\r\n .u-loading.u-loading-rotate>div{\r\n left: 40%;\r\n }\r\n .u-loading.u-loading-rotate.u-loading-rotate-lg>div{\r\n left: 65%;\r\n }\r\n}"},{"example":<Demo6 />,"title":" 自定义加载图标","code":"/*\r\n \r\n * @title 自定义加载图标\r\n * @description 如需自定义加载图标，需要同时设置 `loadingType` 属性和 `indicator` 属性。\r\n \r\n /\r\n\r\nimport React, { Component } from 'react';\nimport { Loading } from 'tinper-bee';\r\n\r\n\r\nlet imgsrc = \"http://design.yonyoucloud.com/static/bee.tinper.org-demo/loading.gif\";\r\n\r\nclass Demo6 extends Component {\r\n constructor(props) {\r\n super(props);\r\n this.state = {\r\n show: true\r\n }\r\n this.a = null;\r\n }\r\n\r\n\r\n render() {\r\n const beeIcon = <img src={imgsrc} style={{width:'50px'}}/>;\r\n return (\r\n <div className=\"demo5\">\r\n <Loading \r\n container={this} \r\n show={this.state.show} \r\n loadingType=\"custom\" //启用自定义图标\r\n indicator={beeIcon} //自定义图标的内容\r\n />\r\n </div>\r\n )\r\n }\r\n}\r\n\r\n\r\nexport default Demo6;","desc":" 如需自定义加载图标，需要同时设置 `loadingType` 属性和 `indicator` 属性。"}]


		class Demo extends Component {
		constructor(props){
		super(props);
		this.state = {
		open: false
		}
		}
		handleClick=()=> {
		this.setState({ open: !this.state.open })
		}
		fCloseDrawer=()=>{
		this.setState({
		open: false
		})
		}

		render () {
		const { title, example, code, desc, scss_code } = this.props;

		const header = (
		<div>
		<p className='component-title'>{ title }</p>
		<p>{ desc }</p>
		<span className='component-code' onClick={this.handleClick}> 查看源码 <i className='uf uf-arrow-right'/> </span>
		</div>
		);
		return (
		<Col md={12} id={title.trim()} className='component-demo'>
		<Panel header={header}>
		{example}
		</Panel>

		<Drawer className='component-drawerc' title={title} show={this.state.open} placement='right' onClose={this.fCloseDrawer}>
		<div className='component-code-copy'> JS代码
		<Clipboard action="copy" text={code}/>
		</div>
		<pre className="pre-js">
		<code className="hljs javascript">{ code }</code>
		</pre >
		{!!scss_code ?<div className='component-code-copy copy-css'> SCSS代码
		<Clipboard action="copy" text={scss_code}/>
		</div>:null }
		{ !!scss_code ? <pre className="pre-css">
		<code className="hljs css">{ scss_code }</code>
		</pre> : null }
		</Drawer>
		</Col>
		)
		}
		}

		class DemoGroup extends Component {
		constructor(props){
		super(props)
		}
		render () {
		return (
		<Row>
		{DemoArray.map((child,index) => {

		return (
		<Demo example= {child.example} title= {child.title} code= {child.code} scss_code= {child.scss_code} desc= {child.desc} key= {index}/>
		)

		})}
		</Row>
		)
		}
		}

		ReactDOM.render(<DemoGroup/>, document.getElementById('tinperBeeDemo'));

-30

demo/LoadingDemo.js

		import Loading from '../src/index';
		import React, { Component } from 'react';
		import ReactDOM from 'react-dom';
		class Demo extends Component {

		render() {
		return (
		<div>

		<div className="dispalyDiv">
		<Loading size="sm" colors="primary"/>
		</div>
		<div className="dispalyDiv">
		<Loading size="lg" colors="warning"/>
		</div>

		<div className="dispalyDiv">
		<Loading loadingType="line"/>
		</div>
		<div className="dispalyDiv">
		<Loading loadingType="line" size="sm"></Loading>
		</div>
		<div className="dispalyDiv">
		<Loading loadingType="line" size="lg"/>
		</div>
		</div>
		)
		}
		}
		export default Demo;

-1

demo/LoadingDemo.scss

@import "../src/Loading.scss";

-46

dist/acf1b6cea7e669f5c417cc8103a9b608.svg

		<?xml version="1.0" encoding="UTF-8"?>
		<svg width="42px" height="41px" viewBox="0 0 42 41" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
		<!-- Generator: Sketch 53.2 (72643) - https://sketchapp.com -->
		<title>windou</title>
		<desc>Created with Sketch.</desc>
		<defs>
		<linearGradient x1="49.7770001%" y1="99.9886667%" x2="49.7770001%" y2="22.7916984%" id="linearGradient-1">
		<stop stop-color="#82D900" offset="0%"></stop>
		<stop stop-color="#FFFFFF" stop-opacity="0" offset="100%"></stop>
		</linearGradient>
		<linearGradient x1="0.0765%" y1="49.8045%" x2="84.0021644%" y2="49.8045%" id="linearGradient-2">
		<stop stop-color="#FFBE0E" offset="0%"></stop>
		<stop stop-color="#FFFFFF" stop-opacity="0" offset="100%"></stop>
		</linearGradient>
		<linearGradient x1="50.2295001%" y1="-0.0809999429%" x2="50.2295001%" y2="80.0618828%" id="linearGradient-3">
		<stop stop-color="#FF4747" offset="0%"></stop>
		<stop stop-color="#FFFFFF" stop-opacity="0" offset="100%"></stop>
		</linearGradient>
		<linearGradient x1="99.9256667%" y1="49.918%" x2="24.2692403%" y2="49.918%" id="linearGradient-4">
		<stop stop-color="#008CDC" offset="0%"></stop>
		<stop stop-color="#FFFFFF" stop-opacity="0" offset="100%"></stop>
		</linearGradient>
		</defs>
		<g id="Symbols" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
		<g id="视图/loading" transform="translate(-3.000000, -3.000000)">
		<g id="windou" transform="translate(3.000000, 3.000000)">
		<g id="分组-3" transform="translate(29.000000, 0.000000)">
		<rect id="Rectangle" fill="url(#linearGradient-1)" opacity="0.49937221" x="0.409090909" y="0" width="12" height="34"></rect>
		<circle id="Oval" fill="#00C864" cx="6.40909091" cy="34.2667091" r="6"></circle>
		</g>
		<g id="分组-2" transform="translate(0.451729, 28.000000)">
		<rect id="Rectangle" fill="url(#linearGradient-2)" opacity="0.509021577" x="6.26235595" y="3.55271368e-15" width="34" height="12"></rect>
		<circle id="Oval" fill="#FFBE0E" cx="6.5028169" cy="6" r="6"></circle>
		</g>
		<g id="分组" transform="translate(1.000000, 0.000000)">
		<rect id="Rectangle" fill="url(#linearGradient-3)" opacity="0.501232329" x="-2.65565347e-13" y="5.78821281" width="12" height="34"></rect>
		<circle id="Oval" fill="#FF4747" cx="6" cy="6" r="6"></circle>
		</g>
		<g id="Group" transform="translate(0.954545, 0.000000)">
		<rect id="Rectangle" fill="url(#linearGradient-4)" opacity="0.504185268" x="0" y="0" width="36" height="11.9426569"></rect>
		<circle id="Oval" fill="#008CDC" cx="35" cy="6" r="6"></circle>
		</g>
		</g>
		</g>
		</g>
		</svg>

-206

dist/demo.css

		@charset "UTF-8";
		/* FormGroup */
		/* Navlayout */
		/**
		* 文字
		*/
		.u-loading-desc {
		width: 100%;
		position: absolute;
		top: 50%;
		padding-top: 32px;
		font-size: 14px;
		color: #212121;
		text-align: center;
		line-height: 22px; }

		.u-loading-container {
		position: relative; }

		/**
		* default样式单个圆圈加载
		*/
		.u-loading.u-loading-rotate > div {
		position: absolute;
		margin: 2px;
		animation-fill-mode: both;
		border: none !important;
		width: 40px;
		height: 40px;
		top: 50%;
		left: 50%;
		margin-left: -22px;
		margin-top: -22px;
		background: transparent !important;
		display: inline-block;
		animation: rotate1 1s 0s linear infinite !important;
		text-align: center;
		line-height: 40px; }
		.u-loading.u-loading-rotate > div > img {
		width: 40px; }
		.u-loading.u-loading-rotate > div > .uf {
		color: #0084ff;
		font-size: 40px;
		padding: 0; }

		.u-loading.u-loading-rotate.u-loading-rotate-lg > div {
		margin-left: -35px;
		margin-top: -35px;
		width: 60px;
		height: 60px;
		line-height: 60px; }
		.u-loading.u-loading-rotate.u-loading-rotate-lg > div > img {
		width: 60px; }
		.u-loading.u-loading-rotate.u-loading-rotate-lg > div > .uf {
		font-size: 60px; }

		.u-loading.u-loading-rotate.u-loading-rotate-lg > .u-loading-desc {
		padding-top: 38px; }

		.u-loading.u-loading-rotate.u-loading-rotate-sm > div {
		margin-left: -15px;
		margin-top: -15px;
		width: 25px;
		height: 25px;
		line-height: 25px; }
		.u-loading.u-loading-rotate.u-loading-rotate-sm > div > img {
		width: 25px; }
		.u-loading.u-loading-rotate.u-loading-rotate-sm > div > .uf {
		font-size: 25px; }

		.u-loading.u-loading-rotate.u-loading-rotate-sm > .u-loading-desc {
		padding-top: 25px; }

		.u-loading.u-loading-rotate.u-loading-rotate-primary > div > .uf {
		color: #3f51b5; }

		.u-loading.u-loading-rotate.u-loading-rotate-success > div > .uf {
		color: #4caf50; }

		.u-loading.u-loading-rotate.u-loading-rotate-warning > div > .uf {
		color: #ff9800; }

		.u-loading-backdrop {
		position: absolute;
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
		z-index: 1900;
		background-color: rgba(255, 255, 255, 0.4); }
		.u-loading-backdrop.full-screen {
		position: fixed; }

		@keyframes rotate1 {
		0% {
		transform: rotate(0deg) scale(1); }
		50% {
		transform: rotate(180deg) scale(1); }
		100% {
		transform: rotate(360deg) scale(1); } }

		.u-loading.u-loading-line {
		position: absolute;
		top: 50%;
		left: 50%;
		margin-top: -30px;
		margin-left: -25px; }
		.u-loading.u-loading-line > div {
		background-color: #C2C3C5;
		width: 6px;
		height: 50px;
		border-radius: 2px;
		margin: 2px;
		animation-fill-mode: both;
		display: inline-block; }
		.u-loading.u-loading-line.u-loading-line-lg {
		margin-top: -50px;
		margin-left: -30px; }
		.u-loading.u-loading-line.u-loading-line-lg > div {
		width: 8px;
		height: 90px; }
		.u-loading.u-loading-line.u-loading-line-sm {
		margin-top: -22px;
		margin-left: -20px; }
		.u-loading.u-loading-line.u-loading-line-sm > div {
		width: 4px;
		height: 35px; }
		.u-loading.u-loading-line div:nth-child(1) {
		animation: line-scale 1s 0.1s infinite cubic-bezier(0.2, 0.68, 0.18, 1.08);
		background-color: #F44336; }
		.u-loading.u-loading-line div:nth-child(2) {
		animation: line-scale 1s 0.2s infinite cubic-bezier(0.2, 0.68, 0.18, 1.08);
		background-color: #7ED321; }
		.u-loading.u-loading-line div:nth-child(3) {
		animation: line-scale 1s 0.3s infinite cubic-bezier(0.2, 0.68, 0.18, 1.08);
		background-color: #0084FF; }
		.u-loading.u-loading-line div:nth-child(4) {
		animation: line-scale 1s 0.4s infinite cubic-bezier(0.2, 0.68, 0.18, 1.08);
		background-color: #FF9800; }
		.u-loading.u-loading-line div:nth-child(5) {
		animation: line-scale 1s 0.5s infinite cubic-bezier(0.2, 0.68, 0.18, 1.08);
		background-color: #D0021B; }
		.u-loading.u-loading-line.u-loading-line-primary > div {
		background-color: #3f51b5; }
		.u-loading.u-loading-line.u-loading-line-success > div {
		background-color: #4caf50; }
		.u-loading.u-loading-line.u-loading-line-warning > div {
		background-color: #ff9800; }

		.u-loading.u-loading-custom > div {
		position: absolute;
		left: 50%;
		top: 50%;
		transform: translate(-50%, -50%); }

		@keyframes line-scale {
		0% {
		transform: scaley(1); }
		50% {
		transform: scaley(0.4); }
		100% {
		transform: scaley(1); } }

		.demo2 {
		height: 100px;
		width: 500px;
		background: rgba(0, 0, 0, 0.05);
		overflow: hidden;
		font-size: 14px; }
		.demo2 .u-loading-backdrop {
		z-index: 1029; }

		.demo4 {
		height: 100px;
		width: 500px;
		background: rgba(0, 0, 0, 0.05);
		overflow: hidden;
		font-size: 14px; }
		.demo4 .u-loading-backdrop {
		z-index: 1029; }

		.demo3 {
		height: 130px;
		width: 500px;
		border: 1px solid #c1c7d0;
		overflow: hidden;
		font-size: 14px; }
		.demo3 .u-loading-backdrop {
		z-index: 1029; }

		.demo5 {
		height: 100px;
		width: 500px;
		overflow: hidden;
		font-size: 14px; }
		.demo5 .u-loading-backdrop {
		z-index: 1029;
		background: rgba(255, 255, 255, 0); }
		.demo5 .u-loading.u-loading-rotate.u-loading-rotate-sm > div {
		left: 20%; }
		.demo5 .u-loading.u-loading-rotate > div {
		left: 40%; }
		.demo5 .u-loading.u-loading-rotate.u-loading-rotate-lg > div {
		left: 65%; }

		/# sourceMappingURL=demo.css.map /

dist/demo.css.map

Sorry, the diff of this file is too big to display

dist/demo.js

Sorry, the diff of this file is too big to display

dist/demo.js.map

Sorry, the diff of this file is too big to display

-46

dist/static/images/loading.svg

		<?xml version="1.0" encoding="UTF-8"?>
		<svg width="42px" height="41px" viewBox="0 0 42 41" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
		<!-- Generator: Sketch 53.2 (72643) - https://sketchapp.com -->
		<title>windou</title>
		<desc>Created with Sketch.</desc>
		<defs>
		<linearGradient x1="49.7770001%" y1="99.9886667%" x2="49.7770001%" y2="22.7916984%" id="linearGradient-1">
		<stop stop-color="#82D900" offset="0%"></stop>
		<stop stop-color="#FFFFFF" stop-opacity="0" offset="100%"></stop>
		</linearGradient>
		<linearGradient x1="0.0765%" y1="49.8045%" x2="84.0021644%" y2="49.8045%" id="linearGradient-2">
		<stop stop-color="#FFBE0E" offset="0%"></stop>
		<stop stop-color="#FFFFFF" stop-opacity="0" offset="100%"></stop>
		</linearGradient>
		<linearGradient x1="50.2295001%" y1="-0.0809999429%" x2="50.2295001%" y2="80.0618828%" id="linearGradient-3">
		<stop stop-color="#FF4747" offset="0%"></stop>
		<stop stop-color="#FFFFFF" stop-opacity="0" offset="100%"></stop>
		</linearGradient>
		<linearGradient x1="99.9256667%" y1="49.918%" x2="24.2692403%" y2="49.918%" id="linearGradient-4">
		<stop stop-color="#008CDC" offset="0%"></stop>
		<stop stop-color="#FFFFFF" stop-opacity="0" offset="100%"></stop>
		</linearGradient>
		</defs>
		<g id="Symbols" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
		<g id="视图/loading" transform="translate(-3.000000, -3.000000)">
		<g id="windou" transform="translate(3.000000, 3.000000)">
		<g id="分组-3" transform="translate(29.000000, 0.000000)">
		<rect id="Rectangle" fill="url(#linearGradient-1)" opacity="0.49937221" x="0.409090909" y="0" width="12" height="34"></rect>
		<circle id="Oval" fill="#00C864" cx="6.40909091" cy="34.2667091" r="6"></circle>
		</g>
		<g id="分组-2" transform="translate(0.451729, 28.000000)">
		<rect id="Rectangle" fill="url(#linearGradient-2)" opacity="0.509021577" x="6.26235595" y="3.55271368e-15" width="34" height="12"></rect>
		<circle id="Oval" fill="#FFBE0E" cx="6.5028169" cy="6" r="6"></circle>
		</g>
		<g id="分组" transform="translate(1.000000, 0.000000)">
		<rect id="Rectangle" fill="url(#linearGradient-3)" opacity="0.501232329" x="-2.65565347e-13" y="5.78821281" width="12" height="34"></rect>
		<circle id="Oval" fill="#FF4747" cx="6" cy="6" r="6"></circle>
		</g>
		<g id="Group" transform="translate(0.954545, 0.000000)">
		<rect id="Rectangle" fill="url(#linearGradient-4)" opacity="0.504185268" x="0" y="0" width="36" height="11.9426569"></rect>
		<circle id="Oval" fill="#008CDC" cx="35" cy="6" r="6"></circle>
		</g>
		</g>
		</g>
		</g>
		</svg>

-5

docs/api_en.md

		## Loading
		## Code display
		## API
		\|Property\|Description\|Type\|Default\|
		\|:---\|:-----\|:----\|:------\|

-44

docs/api.md

		# 加载提示 Loading

		加载数据时显示动效。

		## 何时使用


		## 如何使用

		```
		import { Loading } from 'tinper-bee';

		or

		import Loading from 'bee-loading';
		import 'bee-loading/build/Loading.css';

		```

		## 代码演示

		## API

		\|参数\|说明\|类型\|默认值\|
		\|:---\|:----\|:----\|:------\|
		\|loadingType\|Loading类型，可选值为 `rotate` `line` `custom`\|string\|rotate\|
		\|indicator\|自定义加载图标，注意：必须设置 loadingType='custom'\|ReactElement\|-\|
		\|size\|加载大小，可选值为 `lg` `md` `sm`\|string\|md\|
		\|container\|渲染到的容器，通过this可以显示在该组件的上面，也可以通过function中return一个元素来显示在指定元素上面\|this或者function\|默认显示在body上面\|
		\|showBackDrop\|是否显示遮罩层\|boolean\|true\|
		\|fullScreen\|是否全屏显示，若Loading显示在 body 上，建议设置该属性\|boolean\|false\|
		\|wrapperClassName\|容器样式\|string\|''\|
		\|[v2.0.0新增] tip\|Loading的文字描述\|string\|''\|

		## 注意事项
		- bee-loading v2.0.0及之后的版本，使用 `tip` 属性添加Loading的文字描述。使用方法：
		```
		<Loading
		show={true}
		tip="Loading..."
		/>
		```

		## 更新日志

-46

test/index.test.js

		import React from 'react';
		import {shallow, mount, render} from 'enzyme';
		import {expect} from 'chai';
		import Loading from '../src/index';

		describe('verifiy size', function () {
		it('Loading should be lg', function () {
		let loading = shallow(<Loading size="lg" />);
		expect(loading.hasClass('u-loader-rotate-lg')).to.equal(true);

		});
		it('Loading should be sm', function () {
		let loading = shallow(<Loading size="sm" />);
		expect(loading.hasClass('u-loader-rotate-sm')).to.equal(true);
		});

		});


		describe('verifiy type', function () {
		it('Loading should be primary', function () {
		let loading = shallow(<Loading colors="primary" />);
		expect(loading.hasClass('u-loader-rotate-primary')).to.equal(true);
		});

		it('Loading should be success', function () {
		let loading = shallow(<Loading colors="success" />);
		expect(loading.hasClass('u-loader-rotate-success')).to.equal(true);
		});
		it('Loading should be warning', function () {
		let loading = shallow(<Loading colors="warning" />);
		expect(loading.hasClass('u-loader-rotate-warning')).to.equal(true);
		});
		});
		describe('verifiy ladingType', function () {
		it('Loading should be rotate', function () {
		let loading = shallow(<Loading lodingType="rotate" />);
		expect(loading.hasClass('u-loader-rotate')).to.equal(true);
		});
		it('Loading should be line', function () {
		let loading = shallow(<Loding loadingType="line" />);
		expect(loading.hasClass('u-loader-line')).to.equal(true);
		});

		});

bee-loading - npm Package Compare versions

New alerts

Fixed alerts

Improved metrics

Worsened metrics