Skip to content

M
mr-julyedu
Commit 44cc5e30 by zhanghaozhe
Options

通用加载

parent 56706e4f
Showing with 226 additions and 16 deletions
package-lock.json
......@@ -971,6 +971,86 @@
"resolved": "https://registry.npmjs.org/@csstools/convert-colors/-/convert-colors-1.4.0.tgz",
"integrity": "sha512-5a6wqoJV/xEdbRNKVo6I4hO3VjyDq//8q2f9I6PBAvMesJHFauXDorcNCsr9RzvsZnaWi5NYCcfyqP1QeFHFbw=="
},
"@emotion/cache": {
"version": "10.0.9",
"resolved": "https://registry.npmjs.org/@emotion/cache/-/cache-10.0.9.tgz",
"integrity": "sha512-f7MblpE2xoimC4fCMZ9pivmsIn7hyWRIvY75owMDi8pdOSeh+w5tH3r4hBJv/LLrwiMM7cTQURqTPcYoL5pWnw==",
"requires": {
"@emotion/sheet": "0.9.2",
"@emotion/stylis": "0.8.3",
"@emotion/utils": "0.11.1",
"@emotion/weak-memoize": "0.2.2"
}
},
"@emotion/core": {
"version": "10.0.10",
"resolved": "https://registry.npmjs.org/@emotion/core/-/core-10.0.10.tgz",
"integrity": "sha512-U1aE2cOWUscjc8ZJ3Cx32udOzLeRoJwGxBH93xQD850oQFpwPKZARzdUtdc9SByUOwzSFYxhDhrpXnV34FJmWg==",
"requires": {
"@emotion/cache": "^10.0.9",
"@emotion/css": "^10.0.9",
"@emotion/serialize": "^0.11.6",
"@emotion/sheet": "0.9.2",
"@emotion/utils": "0.11.1"
}
},
"@emotion/css": {
"version": "10.0.12",
"resolved": "https://registry.npmjs.org/@emotion/css/-/css-10.0.12.tgz",
"integrity": "sha512-esET/v6AwYIw5YVo0e1L/bUik7bIMWyK32BudsC/PE5O1rLK3rjiLCOoMVv5GY6+ssuwWVzooGbz79hPvkkmsw==",
"requires": {
"@emotion/serialize": "^0.11.7",
"@emotion/utils": "0.11.1",
"babel-plugin-emotion": "^10.0.9"
}
},
"@emotion/hash": {
"version": "0.7.1",
"resolved": "https://registry.npmjs.org/@emotion/hash/-/hash-0.7.1.tgz",
"integrity": "sha512-OYpa/Sg+2GDX+jibUfpZVn1YqSVRpYmTLF2eyAfrFTIJSbwyIrc+YscayoykvaOME/wV4BV0Sa0yqdMrgse6mA=="
},
"@emotion/memoize": {
"version": "0.7.1",
"resolved": "https://registry.npmjs.org/@emotion/memoize/-/memoize-0.7.1.tgz",
"integrity": "sha512-Qv4LTqO11jepd5Qmlp3M1YEjBumoTHcHFdgPTQ+sFlIL5myi/7xu/POwP7IRu6odBdmLXdtIs1D6TuW6kbwbbg=="
},
"@emotion/serialize": {
"version": "0.11.7",
"resolved": "https://registry.npmjs.org/@emotion/serialize/-/serialize-0.11.7.tgz",
"integrity": "sha512-GfzJIMue9eIEPFgBL340hBbjfki11vjYkfmY2LXoCDAFPuG6S+hkOlfinRXLnPVlXnKu7WWp587cVa6/xQriNQ==",
"requires": {
"@emotion/hash": "0.7.1",
"@emotion/memoize": "0.7.1",
"@emotion/unitless": "0.7.3",
"@emotion/utils": "0.11.1",
"csstype": "^2.5.7"
}
},
"@emotion/sheet": {
"version": "0.9.2",
"resolved": "https://registry.npmjs.org/@emotion/sheet/-/sheet-0.9.2.tgz",
"integrity": "sha512-pVBLzIbC/QCHDKJF2E82V2H/W/B004mDFQZiyo/MSR+VC4pV5JLG0TF/zgQDFvP3fZL/5RTPGEmXlYJBMUuJ+A=="
},
"@emotion/stylis": {
"version": "0.8.3",
"resolved": "https://registry.npmjs.org/@emotion/stylis/-/stylis-0.8.3.tgz",
"integrity": "sha512-M3nMfJ6ndJMYloSIbYEBq6G3eqoYD41BpDOxreE8j0cb4fzz/5qvmqU9Mb2hzsXcCnIlGlWhS03PCzVGvTAe0Q=="
},
"@emotion/unitless": {
"version": "0.7.3",
"resolved": "https://registry.npmjs.org/@emotion/unitless/-/unitless-0.7.3.tgz",
"integrity": "sha512-4zAPlpDEh2VwXswwr/t8xGNDGg8RQiPxtxZ3qQEXyQsBV39ptTdESCjuBvGze1nLMVrxmTIKmnO/nAV8Tqjjzg=="
},
"@emotion/utils": {
"version": "0.11.1",
"resolved": "https://registry.npmjs.org/@emotion/utils/-/utils-0.11.1.tgz",
"integrity": "sha512-8M3VN0hetwhsJ8dH8VkVy7xo5/1VoBsDOk/T4SJOeXwTO1c4uIqVNx2qyecLFnnUWD5vvUqHQ1gASSeUN6zcTg=="
},
"@emotion/weak-memoize": {
"version": "0.2.2",
"resolved": "https://registry.npmjs.org/@emotion/weak-memoize/-/weak-memoize-0.2.2.tgz",
"integrity": "sha512-n/VQ4mbfr81aqkx/XmVicOLjviMuy02eenSdJY33SVA7S2J42EU0P1H0mOogfYedb3wXA0d/LVtBrgTSm04WEA=="
},
"@loadable/component": {
"version": "5.10.1",
"resolved": "https://registry.npmjs.org/@loadable/component/-/component-5.10.1.tgz",
......@@ -2290,6 +2370,30 @@
"object.assign": "^4.1.0"
}
},
"babel-plugin-emotion": {
"version": "10.0.13",
"resolved": "https://registry.npmjs.org/babel-plugin-emotion/-/babel-plugin-emotion-10.0.13.tgz",
"integrity": "sha512-w8yukWIYDw2ZUzBo7B9t5jh7wsM4NQWqvuZadW4MhVokgw5wsoBRJ59Sa1hMc3UZiatwb0iBNufmRQZVl77I5Q==",
"requires": {
"@babel/helper-module-imports": "^7.0.0",
"@emotion/hash": "0.7.1",
"@emotion/memoize": "0.7.1",
"@emotion/serialize": "^0.11.6",
"babel-plugin-macros": "^2.0.0",
"babel-plugin-syntax-jsx": "^6.18.0",
"convert-source-map": "^1.5.0",
"escape-string-regexp": "^1.0.5",
"find-root": "^1.1.0",
"source-map": "^0.5.7"
},
"dependencies": {
"source-map": {
"version": "0.5.7",
"resolved": "https://registry.npmjs.org/source-map/-/source-map-0.5.7.tgz",
"integrity": "sha1-igOdLRAh0i0eoUyA2OpGi6LvP8w="
}
}
},
"babel-plugin-import": {
"version": "1.11.0",
"resolved": "https://registry.npmjs.org/babel-plugin-import/-/babel-plugin-import-1.11.0.tgz",
......@@ -2340,6 +2444,11 @@
"resolved": "https://registry.npmjs.org/babel-plugin-named-asset-import/-/babel-plugin-named-asset-import-0.3.1.tgz",
"integrity": "sha512-vzZlo+yEB5YHqI6CRRTDojeT43J3Wf3C/MVkZW5UlbSeIIVUYRKtxaFT2L/VTv9mbIyatCW39+9g/SZolvwRUQ=="
},
"babel-plugin-syntax-jsx": {
"version": "6.18.0",
"resolved": "https://registry.npmjs.org/babel-plugin-syntax-jsx/-/babel-plugin-syntax-jsx-6.18.0.tgz",
"integrity": "sha1-CvMqmm4Tyno/1QaeYtew9Y0NiUY="
},
"babel-plugin-syntax-object-rest-spread": {
"version": "6.13.0",
"resolved": "https://registry.npmjs.org/babel-plugin-syntax-object-rest-spread/-/babel-plugin-syntax-object-rest-spread-6.13.0.tgz",
......@@ -3256,6 +3365,11 @@
"supports-color": "^5.3.0"
}
},
"change-emitter": {
"version": "0.1.6",
"resolved": "https://registry.npmjs.org/change-emitter/-/change-emitter-0.1.6.tgz",
"integrity": "sha1-6LL+PX8at9aaMhma/5HqaTFAlRU="
},
"chardet": {
"version": "0.7.0",
"resolved": "https://registry.npmjs.org/chardet/-/chardet-0.7.0.tgz",
......@@ -3707,6 +3821,17 @@
"elliptic": "^6.0.0"
}
},
"create-emotion": {
"version": "10.0.9",
"resolved": "https://registry.npmjs.org/create-emotion/-/create-emotion-10.0.9.tgz",
"integrity": "sha512-sLKD4bIiTs8PpEqr5vlCoV5lsYE4QOBYEUWaD0R+VGRMCvBKHmYlvLJXsL99Kdc4YEFAFwipi2bbncnvv6UxRg==",
"requires": {
"@emotion/cache": "^10.0.9",
"@emotion/serialize": "^0.11.6",
"@emotion/sheet": "0.9.2",
"@emotion/utils": "0.11.1"
}
},
"create-hash": {
"version": "1.2.0",
"resolved": "https://registry.npmjs.org/create-hash/-/create-hash-1.2.0.tgz",
......@@ -4081,6 +4206,11 @@
"cssom": "0.3.x"
}
},
"csstype": {
"version": "2.6.5",
"resolved": "https://registry.npmjs.org/csstype/-/csstype-2.6.5.tgz",
"integrity": "sha512-JsTaiksRsel5n7XwqPAfB0l3TFKdpjW/kgAELf9vrb5adGA7UCPLajKK5s3nFrcFm3Rkyp/Qkgl73ENc1UY3cA=="
},
"currently-unhandled": {
"version": "0.4.1",
"resolved": "https://registry.npmjs.org/currently-unhandled/-/currently-unhandled-0.4.1.tgz",
......@@ -4558,6 +4688,15 @@
"resolved": "https://registry.npmjs.org/emojis-list/-/emojis-list-2.1.0.tgz",
"integrity": "sha1-TapNnbAPmBmIDHn6RXrlsJof04k="
},
"emotion": {
"version": "10.0.9",
"resolved": "https://registry.npmjs.org/emotion/-/emotion-10.0.9.tgz",
"integrity": "sha512-IMFwwWlU2TDt7eh4v6dm58E8VHAYOitqRbVoazQdxIu9/0CAH4a3UrTMnZSlWQAo09MrRRlKfgQFHswnj40meQ==",
"requires": {
"babel-plugin-emotion": "^10.0.9",
"create-emotion": "^10.0.9"
}
},
"encodeurl": {
"version": "1.0.2",
"resolved": "https://registry.npmjs.org/encodeurl/-/encodeurl-1.0.2.tgz",
......@@ -5621,6 +5760,11 @@
}
}
},
"find-root": {
"version": "1.1.0",
"resolved": "https://registry.npmjs.org/find-root/-/find-root-1.1.0.tgz",
"integrity": "sha512-NKfW6bec6GfKc0SGx1e07QZY9PE99u0Bft/0rzSD5k3sO/vwkVUpDUKVm5Gpp5Ue3YfShPFTX2070tDs5kB9Ng=="
},
"find-up": {
"version": "2.1.0",
"resolved": "https://registry.npmjs.org/find-up/-/find-up-2.1.0.tgz",
......@@ -11839,6 +11983,16 @@
"tiny-warning": "^1.0.0"
}
},
"react-spinners": {
"version": "0.5.4",
"resolved": "https://registry.npmjs.org/react-spinners/-/react-spinners-0.5.4.tgz",
"integrity": "sha512-jo7BE8prvnZNL7xNrQL16geVXH6LmaWrhvvXnmUwz2MhFO14bhlAdCLuKCwqmUJ37kGphH0C2CJRThwkjfpVzw==",
"requires": {
"@emotion/core": "^10.0.4",
"prop-types": "^15.5.10",
"recompose": "0.27.1 - 0.30.0"
}
},
"react-tween-state": {
"version": "0.1.5",
"resolved": "https://registry.npmjs.org/react-tween-state/-/react-tween-state-0.1.5.tgz",
......@@ -11909,6 +12063,26 @@
"util.promisify": "^1.0.0"
}
},
"recompose": {
"version": "0.30.0",
"resolved": "https://registry.npmjs.org/recompose/-/recompose-0.30.0.tgz",
"integrity": "sha512-ZTrzzUDa9AqUIhRk4KmVFihH0rapdCSMFXjhHbNrjAWxBuUD/guYlyysMnuHjlZC/KRiOKRtB4jf96yYSkKE8w==",
"requires": {
"@babel/runtime": "^7.0.0",
"change-emitter": "^0.1.2",
"fbjs": "^0.8.1",
"hoist-non-react-statics": "^2.3.1",
"react-lifecycles-compat": "^3.0.2",
"symbol-observable": "^1.0.4"
},
"dependencies": {
"hoist-non-react-statics": {
"version": "2.5.5",
"resolved": "https://registry.npmjs.org/hoist-non-react-statics/-/hoist-non-react-statics-2.5.5.tgz",
"integrity": "sha512-rqcy4pJo55FTTLWt+bU8ukscqHeE/e9KWvsOW2b/a3afxQZhwkQdT1rPPCJ0rYXdj4vNcasY8zHTH+jF/qStxw=="
}
}
},
"recursive-readdir": {
"version": "2.2.2",
"resolved": "https://registry.npmjs.org/recursive-readdir/-/recursive-readdir-2.2.2.tgz",
......
package.json
......@@ -22,6 +22,7 @@
"date-fns": "^1.30.1",
"dotenv": "6.0.0",
"dotenv-expand": "4.2.0",
"emotion": "^10.0.9",
"eslint": "5.12.0",
"eslint-config-react-app": "^3.0.8",
"eslint-loader": "2.1.1",
......@@ -61,6 +62,7 @@
"react-mobile-swiper": "^1.1.4",
"react-redux": "^7.0.2",
"react-router-dom": "^5.0.1",
"react-spinners": "^0.5.4",
"redux": "^4.0.1",
"redux-immutable": "^4.0.0",
"redux-logger": "^3.0.6",
......
src/common/Loading/index.js
import React, { Component } from 'react'
import { ActivityIndicator } from 'antd-mobile'
import React, { Component } from 'react';
import ReactDOM from 'react-dom'
import { HashLoader } from "react-spinners";
import { css } from 'emotion'
import './loading.scss'
export default class componentName extends Component {
const override = css({
display: 'block',
marginTop: '-100px'
})
const container = document.documentElement || document.body
class Loading extends Component {
static defaultProps = {
isLoading: true,
text: '加载中'
}
render() {
return (
const innerLoading =
<div className="loading">
<ActivityIndicator></ActivityIndicator>
<span>加载中</span>
<div className="loading-wrapper">
<HashLoader
css={override}
size={50}
color={'#09f'}
/>
<p>{this.props.text}</p>
</div>
</div>
)
return (
this.props.isLoading ? ReactDOM.createPortal(innerLoading, container) : this.props.children
);
}
}
export default Loading;
\ No newline at end of file
src/common/Loading/loading.scss
.loading{
display: flex;
width:100%;
height:44px;
line-height: 44px;
justify-content: center;
align-items: center;
span{
margin-left:5px;
.loading {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
.loading-wrapper {
display: flex;
flex-flow: column;
justify-content: center;
align-items: center;
p {
font-size: 14px;
margin-top: 12px;
color: $active;
}
}
}
\ No newline at end of file
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment