From 877033ef61ab2f355ecd2bb67c8d8b8410f2e5c7 Mon Sep 17 00:00:00 2001 From: "rorya.lyj" Date: Fri, 4 Sep 2020 14:30:12 +0800 Subject: [PATCH] feat(Loading): add web support --- packages/loading/README-zh_CN.md | 4 +- packages/loading/README.md | 4 +- packages/loading/demo/index.js | 23 ++++ .../loading/docs-template/README-zh_CN.md | 4 +- packages/loading/docs-template/README.md | 4 +- packages/loading/package.json | 3 + packages/loading/src/index.ts | 6 +- packages/loading/src/web/index.ts | 111 ++++++++++++++++++ 8 files changed, 150 insertions(+), 9 deletions(-) create mode 100644 packages/loading/src/web/index.ts diff --git a/packages/loading/README-zh_CN.md b/packages/loading/README-zh_CN.md index f706bf25..e3ca4d9b 100644 --- a/packages/loading/README-zh_CN.md +++ b/packages/loading/README-zh_CN.md @@ -3,7 +3,7 @@ 加载提示的过渡效果。 ## 支持 -miniApp wechatMiniprogram +browser miniApp wechatMiniprogram ## 安装 @@ -20,7 +20,7 @@ $ npm install universal-loading --save #### 参数 | 属性 | 类型 | 默认值 | 必选 | 描述 | 支持 | | -------- | -------- | ------ | ---- | -------- | --------------------------------------- | -| content | `String` | | √ | 提示中的文字内容 | miniApp wechatMiniprogram | +| content | `String` | | √ | 提示中的文字内容 | browser miniApp wechatMiniprogram | | delay | `Number` | `0` | x | 延迟显示，单位 ms | miniApp | | mask | `Boolean` | `false` | x | 是否显示透明蒙层，防止触摸穿透 | wechatMiniprogram | diff --git a/packages/loading/README.md b/packages/loading/README.md index d7b682e4..ba41b805 100644 --- a/packages/loading/README.md +++ b/packages/loading/README.md @@ -3,7 +3,7 @@ Load the transition effect of the prompt. ## Support -miniApp wechatMiniprogram +browser miniApp wechatMiniprogram ## Install @@ -20,7 +20,7 @@ Display loading prompt box. #### Parameters | Property | Type | Default | Required | Description | Support | | -------- | --------- | ------- | -------- | ---------------------------------------------------------------- | --------------------------------------- | -| content | `String` | | √ | The content in the prompt | miniApp wechatMiniprogram | +| content | `String` | | √ | The content in the prompt | browser miniApp wechatMiniprogram | | delay | `Number` | `0` | x | Delay display, unit ms | miniApp | | mask | `Boolean` | `false` | x | Whether to display transparent mask to prevent touch penetration | wechatMiniprogram | diff --git a/packages/loading/demo/index.js b/packages/loading/demo/index.js index e69de29b..3c19bd17 100644 --- a/packages/loading/demo/index.js +++ b/packages/loading/demo/index.js @@ -0,0 +1,23 @@ +/* eslint-disable import/no-extraneous-dependencies */ +// @ts-ignore +import { createElement, render } from 'rax'; +import DriverUniversal from 'driver-universal'; +import View from 'rax-view'; +import Text from 'rax-text'; +import Loading from '../src/'; + +const App = () => { + const handleClick = () => { + Loading.show({ + content: 'Loading, please wait' + }); + setTimeout(() => Loading.hide(), 3000); + }; + return ( + + Start loading + + ); +}; + +render(, document.body, { driver: DriverUniversal }); diff --git a/packages/loading/docs-template/README-zh_CN.md b/packages/loading/docs-template/README-zh_CN.md index 7f2f19d6..eb326e9f 100644 --- a/packages/loading/docs-template/README-zh_CN.md +++ b/packages/loading/docs-template/README-zh_CN.md @@ -3,7 +3,7 @@ 加载提示的过渡效果。 ## 支持 -__icon_miniapp_mp__ __icon_miniapp_wx__ +__icon_web__ __icon_miniapp_mp__ __icon_miniapp_wx__ ## 安装 @@ -20,7 +20,7 @@ $ npm install universal-loading --save #### 参数 | 属性 | 类型 | 默认值 | 必选 | 描述 | 支持 | | -------- | -------- | ------ | ---- | -------- | --------------------------------------- | -| content | `String` | | √ | 提示中的文字内容 | __icon_miniapp_mp__ __icon_miniapp_wx__ | +| content | `String` | | √ | 提示中的文字内容 | __icon_web__ __icon_miniapp_mp__ __icon_miniapp_wx__ | | delay | `Number` | `0` | x | 延迟显示，单位 ms | __icon_miniapp_mp__ | | mask | `Boolean` | `false` | x | 是否显示透明蒙层，防止触摸穿透 | __icon_miniapp_wx__ | diff --git a/packages/loading/docs-template/README.md b/packages/loading/docs-template/README.md index 7d539d81..fd70ead6 100644 --- a/packages/loading/docs-template/README.md +++ b/packages/loading/docs-template/README.md @@ -3,7 +3,7 @@ Load the transition effect of the prompt. ## Support -__icon_miniapp_mp__ __icon_miniapp_wx__ +__icon_web__ __icon_miniapp_mp__ __icon_miniapp_wx__ ## Install @@ -20,7 +20,7 @@ Display loading prompt box. #### Parameters | Property | Type | Default | Required | Description | Support | | -------- | --------- | ------- | -------- | ---------------------------------------------------------------- | --------------------------------------- | -| content | `String` | | √ | The content in the prompt | __icon_miniapp_mp__ __icon_miniapp_wx__ | +| content | `String` | | √ | The content in the prompt | __icon_web__ __icon_miniapp_mp__ __icon_miniapp_wx__ | | delay | `Number` | `0` | x | Delay display, unit ms | __icon_miniapp_mp__ | | mask | `Boolean` | `false` | x | Whether to display transparent mask to prevent touch penetration | __icon_miniapp_wx__ | diff --git a/packages/loading/package.json b/packages/loading/package.json index 80410345..29bf2abe 100644 --- a/packages/loading/package.json +++ b/packages/loading/package.json @@ -33,8 +33,11 @@ "@alib/build-scripts": "^0.1.0", "@types/rax": "^1.0.1", "build-plugin-rax-component": "^0.2.0", + "driver-universal": "^3.1.0", "rax": "^1.1.0", "rax-test-renderer": "^1.0.0", + "rax-text": "^1.3.1", + "rax-view": "^1.1.2", "typescript": "^3.7.5" } } diff --git a/packages/loading/src/index.ts b/packages/loading/src/index.ts index 370647d3..90b52e60 100644 --- a/packages/loading/src/index.ts +++ b/packages/loading/src/index.ts @@ -1,6 +1,7 @@ -import { isMiniApp, isWeChatMiniProgram } from 'universal-env'; +import { isMiniApp, isWeChatMiniProgram, isWeb } from 'universal-env'; import * as miniAppModule from './miniapp/ali'; import * as weChatModule from './miniapp/wechat'; +import * as webModule from './web'; import { Loading } from './types'; @@ -11,5 +12,8 @@ if (isMiniApp) { if (isWeChatMiniProgram) { Loading = weChatModule; } +if (isWeb) { + Loading = webModule; +} export default Loading; diff --git a/packages/loading/src/web/index.ts b/packages/loading/src/web/index.ts new file mode 100644 index 00000000..230b23f4 --- /dev/null +++ b/packages/loading/src/web/index.ts @@ -0,0 +1,111 @@ +let loadingWin: HTMLElement | null = null; + +const clsPrefix = "__universal_loading"; + +const styles = `.${clsPrefix} { + background-color: rgba(0, 0, 0, 0.6); + box-sizing: border-box; + max-width: 80%; + color: #ffffff; + padding: 15px; + position: fixed; + left: 50%; + bottom: 50%; + border-radius: 4px; + text-align: center; + transform: translateX(-50%); + -webkit-transform: translateX(-50%); + z-index: 9999; + outline: none; +} +.${clsPrefix}_circle { + border: 2px solid rgba(200, 200, 200, 0.5); + border-radius: 50%; + position: relative; + height: 40px; + width: 40px; + margin: auto; +} +.${clsPrefix}_circle:after { + content: ""; + display: block; + border-radius: 50%; + width: 100%; + height: 100%; + position: absolute; + top: -2px; + left: -2px; + border: 2px solid; + border-color: transparent; + border-left-color: #fff; + box-sizing: content-box; + animation: ${clsPrefix}_roller 1s infinite linear; +} +.${clsPrefix}_text { + margin-top: 6px; + color: #fff; + line-height: 1.5; + font-size: 14px; + text-align: center; + font-weight: normal; +} +@keyframes ${clsPrefix}_roller { + 0% { + transform: rotateZ(0); + } + 100% { + transform: rotateZ(360deg); + } +}`.replace(/\n/g, ""); + +/* + * @param message {String} + */ +export function show({ content = "" }): Promise { + if (!loadingWin) { + // create a style tag for keyframes + const style = document.createElement("style"); + style.innerHTML = styles; + document.body.appendChild(style); + // create loading win + loadingWin = document.createElement("div"); + loadingWin.className = clsPrefix; + loadingWin.setAttribute("role", "alert"); + // support for ARIA, add tabindex for focus + // https://developer.mozilla.org/zh-CN/docs/Web/HTML/Global_attributes/tabindex + loadingWin.setAttribute("tabindex", "-1"); + // add a circle element + const circle = document.createElement("div"); + circle.className = `${clsPrefix}_circle`; + loadingWin.appendChild(circle); + // add text element + const text = document.createElement("div"); + text.className = `${clsPrefix}_text`; + loadingWin.appendChild(text); + + document.body.appendChild(loadingWin); + } + + const text = loadingWin.querySelector(`.${clsPrefix}_text`) as HTMLDivElement; + if (content) { + text.style.display = "block"; + text.innerText = content; + } else { + text.style.display = "none"; + text.innerText = ""; + } + + return Promise.resolve(); +} + +export function hide(): Promise { + return new Promise((resolve) => { + setTimeout(() => { + if (loadingWin && loadingWin.parentNode) { + loadingWin.parentNode.removeChild(loadingWin); + } + loadingWin = null; + resolve(); + }, 0); + }); +}