From 2528b02e9d302047ee37c4e5a39bd2a6a96e3e09 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E5=BD=A7=E8=A1=A1?= <52439609+Alpsli@users.noreply.github.com> Date: Fri, 18 Nov 2022 11:29:16 +0800 Subject: [PATCH] feat(loading): refactor loading (#351) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * feat(loading): refactor loading * feat(loading): refactor loading * feat(loading): refactor loading Co-authored-by: 彧衡 --- demo/pages/Loading/index.acss | 11 ++++ demo/pages/Loading/index.axml | 62 ++++++++++----------- demo/pages/Loading/index.json | 3 +- src/Container/ContainerHeader/index.less | 56 +++++++++---------- src/Form/FormItem/index.less | 22 ++++++-- src/Loading/index.axml | 45 ++++++++------- src/Loading/index.less | 70 +++++++++++++----------- src/Loading/index.md | 51 ++++------------- src/Loading/index.sjs | 6 +- src/Loading/props.d.ts | 9 +-- src/Loading/props.js | 6 +- src/Loading/variable.less | 2 +- 12 files changed, 169 insertions(+), 174 deletions(-) create mode 100644 demo/pages/Loading/index.acss diff --git a/demo/pages/Loading/index.acss b/demo/pages/Loading/index.acss new file mode 100644 index 000000000..b170f28bb --- /dev/null +++ b/demo/pages/Loading/index.acss @@ -0,0 +1,11 @@ +page { + padding: 24rpx; +} + +page .amd-container { + padding-bottom: 24rpx; +} + +.amd-container-content { + background-color: #1A1A1A; +} diff --git a/demo/pages/Loading/index.axml b/demo/pages/Loading/index.axml index 551ba935b..87a8ee843 100644 --- a/demo/pages/Loading/index.axml +++ b/demo/pages/Loading/index.axml @@ -1,34 +1,28 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - \ No newline at end of file + + + + + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/demo/pages/Loading/index.json b/demo/pages/Loading/index.json index f7a6bea09..cdb8d3575 100644 --- a/demo/pages/Loading/index.json +++ b/demo/pages/Loading/index.json @@ -3,6 +3,7 @@ "usingComponents": { "loading": "../../../src/Loading/index", "am-icon": "../../../src/Icon/index", - "demo-block": "../../components/DemoBlock/index" + "demo-block": "../../components/DemoBlock/index", + "container": "../../../src/Container/index" } } diff --git a/src/Container/ContainerHeader/index.less b/src/Container/ContainerHeader/index.less index 62dd640a4..d99dc2699 100644 --- a/src/Container/ContainerHeader/index.less +++ b/src/Container/ContainerHeader/index.less @@ -4,37 +4,37 @@ @containerPrefix: amd-container; .@{containerPrefix} { - &-header { - position: relative; - display: flex; - height: 93 * @rpx; - display: flex; - align-items: center; - justify-content: space-between; + &-header { + position: relative; + display: flex; + height: 93 * @rpx; + display: flex; + align-items: center; + justify-content: space-between; - &-title { - font-size: @container-header-size; - font-weight: bold; - color: @container-header-color; - display: flex; - align-items: center; - height: 45 * @rpx; - } - - &-right { - color: @COLOR_TEXT_ASSIST; - } + &-title { + font-size: @container-header-size; + font-weight: bold; + color: @container-header-color; + display: flex; + align-items: center; + height: 45 * @rpx; } - &-headerInBox { - background-color: @container-background-color; - border-radius: @container-radius @container-radius 0 0; - padding: 0 @container-spacing; + &-right { + color: @COLOR_TEXT_ASSIST; + } + } + + &-headerInBox { + background-color: @container-background-color; + border-radius: @container-radius @container-radius 0 0; + padding: 0 @container-spacing; - &::after { - .scale-hairline-common(@COLOR_BORDER, auto, @container-spacing, 0, @container-spacing); - height: 1px; - transform: scaleY(0.5); - } + &::after { + .scale-hairline-common(@COLOR_BORDER, auto, @container-spacing, 0, @container-spacing); + height: 1px; + transform: scaleY(0.5); } + } } diff --git a/src/Form/FormItem/index.less b/src/Form/FormItem/index.less index b2359e950..eb7f79f6c 100644 --- a/src/Form/FormItem/index.less +++ b/src/Form/FormItem/index.less @@ -10,16 +10,19 @@ font-size: 34 * @rpx; line-height: 48 * @rpx; } + .formItemLabelVertical() { font-size: 34 * @rpx; line-height: 42 * @rpx; color: @COLOR_TEXT_SECONDARY; margin-bottom: 8 * @rpx; } + .formItemContentHorizontal() { display: flex; align-items: center; } + .formItemFieldHorizontal() { text-align: right; } @@ -50,12 +53,15 @@ // opacity: 0.4; // } } + &-content { flex: 1; + &-horizontal { .formItemContentHorizontal(); } } + &-error-info { font-family: PingFangSC-Regular; font-size: 13px; @@ -84,17 +90,21 @@ line-height: 48 * @rpx; overflow: visible; position: relative; + &-text { display: flex; align-items: center; position: relative; } + .amd-icon { margin-left: 4 * @rpx; } + .amd-popover-content { min-width: 0; } + &-help-content { color: @COLOR_WHITE_CHANGE; font-size: 30 * @rpx; @@ -115,8 +125,10 @@ // opacity: 0.4; // } } + &-field { flex: 1; + &-horizontal { .formItemFieldHorizontal(); } @@ -127,6 +139,7 @@ color: @COLOR_TEXT_WEAK; display: flex; align-items: center; + .amd-icon { font-size: 36 * @rpx; display: flex; @@ -147,14 +160,13 @@ margin-left: 24 * @rpx; font-size: 32 * @rpx; color: @COLOR_TEXT_ASSIST; + &:empty { display: none; } } } - - .amd-form-require-style { &-asterisk { .amd-form-item-label-required .amd-form-item-label-text { @@ -164,10 +176,11 @@ left: -18 * @rpx; font-family: PingFangSC-Regular; font-size: 30 * @rpx; - color: @COLOR_TEXT_WARNING; + color: @COLOR_TEXT_WARNING; } } } + &-text-required { .amd-form-item-label-required .amd-form-item-label-text { &::after { @@ -181,6 +194,7 @@ } } } + &-text-optional { .amd-form-item-label .amd-form-item-label-text { &::after { @@ -193,6 +207,7 @@ color: @COLOR_TEXT_WEAK; } } + .amd-form-item-label-required .amd-form-item-label-text { &::after { content: none; @@ -200,4 +215,3 @@ } } } - diff --git a/src/Loading/index.axml b/src/Loading/index.axml index 602489443..867c4197f 100644 --- a/src/Loading/index.axml +++ b/src/Loading/index.axml @@ -1,36 +1,39 @@ - + a:if="{{_loading}}" +> - - - - - {{text}} - - - - + - - + . - . - . \ No newline at end of file diff --git a/src/Loading/index.less b/src/Loading/index.less index 71ed5dbf1..b582c2aa4 100644 --- a/src/Loading/index.less +++ b/src/Loading/index.less @@ -7,26 +7,32 @@ &-container { display: inline-block; } + display: flex; justify-content: center; align-items: center; flex-direction: column; padding: @v-spacing-large; + &-icon { background-position: center; background-repeat: no-repeat; + &-small { width: @loading-icon-size-small; height: @loading-icon-size-small; } + &-medium { width: @loading-icon-size-medium; height: @loading-icon-size-medium; } + &-large { width: @loading-icon-size-large; height: @loading-icon-size-large; } + &-x-large { width: @loading-icon-size-x-large; height: @loading-icon-size-x-large; @@ -38,12 +44,12 @@ } // 默认隐藏默认指示器 - & + & { + &+& { display: none; } // hack, 如果自定义指示器为空，则显示默认指示器 - &-indicator:empty + & { + &-indicator:empty+& { display: initial; } @@ -51,16 +57,6 @@ opacity: 0.6; } } - - &-text { - padding: @v-spacing-standard 0; - text-align: center; - font-size: @loading-text-size; - color: @loading-text-color; - &-light { - color: @loading-icon-light-color; - } - } } &-mini { @@ -73,27 +69,30 @@ min-height: 66 * @rpx; &-item { - flex: 0 0 8 * @rpx; - min-width: 6 * @rpx; - min-height: 6 * @rpx; - max-width: 8 * @rpx; - max-height: 8 * @rpx; - overflow: hidden; - margin-right: @h-spacing-standard; - font-size: 0; - border-radius: @corner-radius-sm / 2; - background-color: @color-text-subtitle; - animation: amd-loading-animation 1s 0s infinite linear; - &__1 { - animation-delay: 0s; - } - &__2 { - animation-delay: 150ms; - } - &__3 { - margin-right: 0; - animation-delay: 300ms; - } + flex: 0 0 8 * @rpx; + min-width: 6 * @rpx; + min-height: 6 * @rpx; + max-width: 8 * @rpx; + max-height: 8 * @rpx; + overflow: hidden; + margin-right: @h-spacing-standard; + font-size: 0; + border-radius: @corner-radius-sm / 2; + background-color: @color-text-subtitle; + animation: amd-loading-animation 1s 0s infinite linear; + + &__1 { + animation-delay: 0s; + } + + &__2 { + animation-delay: 150ms; + } + + &__3 { + margin-right: 0; + animation-delay: 300ms; + } } } } @@ -102,18 +101,23 @@ 0% { transform: translate3d(0, 0, 0); } + 12% { transform: translate3d(0, -150%, 0); } + 40% { transform: translate3d(0, 110%, 0); } + 55% { transform: translate3d(0, -10%, 0); } + 60% { transform: translate3d(0, 0, 0); } + 100% { transform: translate3d(0, 0, 0); } diff --git a/src/Loading/index.md b/src/Loading/index.md index 803953c03..b7cb28782 100644 --- a/src/Loading/index.md +++ b/src/Loading/index.md @@ -15,49 +15,22 @@ toc: 'content' ## 属性 - -| 属性 | 类型 | 必填 | 默认值 | 说明 | -| -----|-----|-----|-----|----- | -| type | 'spin' | 'mini' | 否 | 'spin' | 加载样式类型 | -| color | string | 否 | '#999' | 加载时的颜色，当 type 为 'spin' 时，只支持十六进制颜色码，如'#fff' | -| delay | number | 否 | - | 延时显示加载状态，单位 ms, 注意，delay 的变更不能实时生效，当 type 为 'spin' 时生效 | -| height | string | 否 | '200rpx' | 加载图标高度，不传则默认与 size 大小一致，当 type 为 'mini' 时生效 | -| loading | boolean | 否 | true | 是否加载中，当 type 为 'spin' 时生效 | -| miniSize | string | 否 | '200rpx' | 加载图标宽度，当 type 为 'mini' 时生效 | -| size | 'x-large' | 'large' | 'medium' | 'small' | 否 | 'medium' | 加载图标尺寸，当 type 为 'spin' 时生效 | -| text | string | 否 | - | 加载中文案，当 type 为 'spin' 时生效 | -| theme | 'dark' | 'light' | 否 | 'dark' | 颜色，dark/深色, light/浅色，当 type 为 'spin' 时生效 | -| className | string | 否 | - | 根节点类名 | -| style | string | 否 | - | 根节点style | +| 属性 | 说明 | 类型 | 默认值 | +| -----|-----|-----|----- | +| className | 根节点类名 | `string` | - | +| color | 加载时的颜色，当 type 为 'spin' 时，只支持十六进制颜色码 | `string` | `'#999'` | +| delay | 延时显示加载状态，单位 ms, 注意，delay 的变更不能实时生效，当 type 为 'spin' 时生效 | `number` | - | +| height | 加载图标高度，不传则默认与 size 大小一致，当 type 为 'mini' 时生效, 单位px | `number|string` | `100` | +| loading | 是否加载中，当 type 为 'spin' 时生效 | `boolean` | `true` | +| miniSize | 加载图标宽度，当 type 为 'mini' 时生效, 单位px | `string` | `100` | +| size | 加载图标尺寸，当 type 为 'spin' 时生效 | `number` | 否 | `35` | +| style | 根节点style | `string` | - | +| type | 加载样式类型 | `'spin' \| 'mini'` | 'spin' | ## 插槽 | 名称 | 说明 | | ----|----| | indicator | 自定义加载中的指示器，type 为 'spin' 时生效 | -| text | 自定义text，type 为 'spin' 时生效 | - -## 样式类 -以下样式类只在对应type下才会被使用 -
- -| 类名 | 说明 | -| -----|----- | -| amd-loading | 整体样式 | -| amd-loading-spin-container | 外层容器样式 | -| amd-loading-spin | 内层容器样式 | -| amd-loading-spin-dark | 深色模式样式 | -| amd-loading-spin-light | 浅色模式样式 | -| amd-loading-spin-icon | 加载图标外层样式 | -| amd-loading-spin-icon-indicator | 自定义加载图标外层样式 | -| amd-loading-spin-icon-small | 加载图标样式 | -| amd-loading-spin-icon-medium | 加载图标样式 | -| amd-loading-spin-icon-large | 加载图标样式 | -| amd-loading-spin-icon-x-large | 加载图标样式 | -| amd-loading-spin-text | 加载文案样式 | -| amd-loading-spin-text-dark | 深色模式下加载文案样式 | -| amd-loading-spin-text-light | 浅色模式下加载文案样式 | -| amd-loading-mini-container | 外层容器样式 | -| amd-loading-mini | 外层容器样式 | -| amd-loading-mini-item | 所有加载点的样式 | + diff --git a/src/Loading/index.sjs b/src/Loading/index.sjs index 44af7ed3f..48c2f6498 100644 --- a/src/Loading/index.sjs +++ b/src/Loading/index.sjs @@ -1,11 +1,11 @@ export function getLoadingColor(theme, color) { if (color && typeof color === 'string' && color[0] === '#' && color !== '#999') { - return `%23${color.slice(1)}`; + return `${color.slice(1)}`; } if (theme === 'light') { - return '%23FFF'; + return 'FFF'; } - return '%23999'; + return '999'; } \ No newline at end of file diff --git a/src/Loading/props.d.ts b/src/Loading/props.d.ts index 012b99d14..1f2e10659 100644 --- a/src/Loading/props.d.ts +++ b/src/Loading/props.d.ts @@ -18,9 +18,9 @@ export interface ILoadingProps extends IBaseProps { /** * @description 加载图标高度，不传则默认与 size 大小一致，当 type 为 'mini' 时生效 - * @default '200rpx' + * @default 100 */ - height?: string; + height?: string | number; /** * @description 是否加载中，当 type 为 'spin' 时生效 @@ -40,11 +40,6 @@ export interface ILoadingProps extends IBaseProps { */ size?: 'x-large' | 'large' | 'medium' | 'small'; - /** - * @description 加载中文案，当 type 为 'spin' 时生效 - */ - text?: string; - /** * @description 颜色，dark/深色, light/浅色，当 type 为 'spin' 时生效 * @default "dark" diff --git a/src/Loading/props.js b/src/Loading/props.js index 3137a92d3..5a08ebcc8 100644 --- a/src/Loading/props.js +++ b/src/Loading/props.js @@ -1,10 +1,10 @@ export const LoadingDefaultProps = { loading: true, - size: 'medium', + size: 40, theme: 'dark', - miniSize: '200rpx', + miniSize: 100, className: '', color: '#fff', - height: '', + height: 100, type: 'spin', }; diff --git a/src/Loading/variable.less b/src/Loading/variable.less index 0786b9c3e..e6a5b6d2b 100644 --- a/src/Loading/variable.less +++ b/src/Loading/variable.less @@ -1,4 +1,4 @@ -@import (reference) "../_base/index.less"; +@import (reference) "../style/themes/index.less"; // loading 尺寸 @loading-icon-size-x-large: 140 * @rpx;