@arco-design/mobile-react 2.28.2 → 2.29.0

package/cjs/skeleton/style/css/index.css

@@ -0,0 +1,180 @@
+.arco-skeleton {
+  position: relative;
+  color:  rgba(255, 255, 255, 0.6) ;
+}
+.arco-skeleton-title {
+  height:  0.32rem ;
+}
+.arco-skeleton-paragraph-line {
+  width: 100%;
+  height:  0.32rem ;
+}
+.arco-skeleton-paragraph-line + .arco-skeleton-paragraph-line {
+  margin-top:  0.24rem ;
+}
+.arco-skeleton-avatar.arco-skeleton-item {
+  width:  0.64rem ;
+  height:  0.64rem ;
+  border-radius: 100%;
+  -webkit-transform: translateZ(0);
+          transform: translateZ(0);
+}
+.arco-skeleton-content {
+  width: 100%;
+}
+.arco-skeleton-content .arco-skeleton-title + .arco-skeleton-paragraph {
+  margin-top:  0.4rem ;
+}
+.arco-skeleton-with-avatar {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: flex;
+  -webkit-box-align: start;
+  -webkit-align-items: flex-start;
+          align-items: flex-start;
+}
+.arco-skeleton-with-avatar .arco-skeleton-avatar {
+  -webkit-box-flex: 0;
+  -webkit-flex: none;
+          flex: none;
+}
+.arco-skeleton-with-avatar .arco-skeleton-content .arco-skeleton-title {
+  margin-top:  0.16rem ;
+}
+.arco-skeleton-with-avatar .arco-skeleton-avatar + .arco-skeleton-content {
+  margin-left:  0.16rem ;
+}
+[dir="rtl"] .arco-skeleton-with-avatar .arco-skeleton-avatar + .arco-skeleton-content {
+  margin-left: initial;
+  margin-right:  0.16rem ;
+}
+.arco-skeleton-grid {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: flex;
+  -webkit-box-pack: justify;
+  -webkit-justify-content: space-between;
+          justify-content: space-between;
+  width: 100%;
+}
+.arco-skeleton-grid-item {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: flex;
+  -webkit-box-orient: vertical;
+  -webkit-box-direction: normal;
+  -webkit-flex-direction: column;
+          flex-direction: column;
+  -webkit-box-align: center;
+  -webkit-align-items: center;
+          align-items: center;
+}
+.arco-skeleton-grid-icon {
+  width:  0.64rem ;
+  height:  0.64rem ;
+}
+.arco-skeleton-grid-text {
+  margin-top:  0.16rem ;
+  width:  1.28rem ;
+  height:  0.32rem ;
+}
+.arco-skeleton-node {
+  display: inline-block;
+}
+.arco-skeleton-item {
+  position: relative;
+  overflow: hidden;
+  border-radius:  0 ;
+  background-color:  #F2F3F5 ;
+}
+.arco-skeleton-animation-item {
+  position: absolute;
+  width: 100vw;
+  height: 100%;
+  top: 0;
+  left: 0;
+  background-image: -webkit-linear-gradient(left, rgba(255, 255, 255, 0) 35%, currentColor 50%, rgba(255, 255, 255, 0) 65%);
+  background-image: linear-gradient(90deg, rgba(255, 255, 255, 0) 35%, currentColor 50%, rgba(255, 255, 255, 0) 65%);
+  -webkit-transform-origin: top left;
+          transform-origin: top left;
+  -webkit-animation-name: skeleton-gradient;
+          animation-name: skeleton-gradient;
+  -webkit-animation-iteration-count: infinite;
+          animation-iteration-count: infinite;
+  -webkit-animation-timing-function:  cubic-bezier(0.42, 0, 0.58, 1) ;
+          animation-timing-function:  cubic-bezier(0.42, 0, 0.58, 1) ;
+  -webkit-animation-duration:  1.5s ;
+          animation-duration:  1.5s ;
+}
+[dir="rtl"] .arco-skeleton-animation-item {
+  -webkit-animation-name: skeleton-gradient-reverse;
+          animation-name: skeleton-gradient-reverse;
+}
+.arco-skeleton-animation-breath {
+  -webkit-animation: skeleton-breath linear infinite;
+          animation: skeleton-breath linear infinite;
+  -webkit-animation-duration:  1.5s ;
+          animation-duration:  1.5s ;
+}
+@-webkit-keyframes skeleton-gradient {
+  0% {
+    -webkit-transform: translateX(-65%) skewX(-45deg);
+            transform: translateX(-65%) skewX(-45deg);
+  }
+  100% {
+    -webkit-transform: translateX(135%) skewX(-45deg);
+            transform: translateX(135%) skewX(-45deg);
+  }
+}
+@keyframes skeleton-gradient {
+  0% {
+    -webkit-transform: translateX(-65%) skewX(-45deg);
+            transform: translateX(-65%) skewX(-45deg);
+  }
+  100% {
+    -webkit-transform: translateX(135%) skewX(-45deg);
+            transform: translateX(135%) skewX(-45deg);
+  }
+}
+@-webkit-keyframes skeleton-gradient-reverse {
+  0% {
+    -webkit-transform: translateX(65%) skewX(45deg);
+            transform: translateX(65%) skewX(45deg);
+  }
+  100% {
+    -webkit-transform: translateX(-135%) skewX(45deg);
+            transform: translateX(-135%) skewX(45deg);
+  }
+}
+@keyframes skeleton-gradient-reverse {
+  0% {
+    -webkit-transform: translateX(65%) skewX(45deg);
+            transform: translateX(65%) skewX(45deg);
+  }
+  100% {
+    -webkit-transform: translateX(-135%) skewX(45deg);
+            transform: translateX(-135%) skewX(45deg);
+  }
+}
+@-webkit-keyframes skeleton-breath {
+  0% {
+    opacity: 1;
+  }
+  50% {
+    opacity:  0.4 ;
+  }
+  100% {
+    opacity: 1;
+  }
+}
+@keyframes skeleton-breath {
+  0% {
+    opacity: 1;
+  }
+  50% {
+    opacity:  0.4 ;
+  }
+  100% {
+    opacity: 1;
+  }
+}

package/cjs/skeleton/style/css/index.d.ts

@@ -0,0 +1,3 @@
+import '../../../../style/css/public.css';
+import '../../../avatar/style/css';
+import './index.css';

package/cjs/skeleton/style/css/index.js

@@ -0,0 +1,7 @@
+"use strict";
+
+require("../../../../style/css/public.css");
+
+require("../../../avatar/style/css");
+
+require("./index.css");

package/cjs/skeleton/style/index.d.ts

@@ -0,0 +1,3 @@
+import '../../../style/public.less';
+import '../../avatar/style';
+import './index.less';

package/cjs/skeleton/style/index.js

@@ -0,0 +1,7 @@
+"use strict";
+
+require("../../../style/public.less");
+
+require("../../avatar/style");
+
+require("./index.less");

package/cjs/skeleton/style/index.less

@@ -0,0 +1,147 @@
+@import '../../../style/mixin.less';
+
+.@{prefix}-skeleton {
+    position: relative;
+    .use-var(color, skeleton-gradient-animation-color);
+}
+
+.@{prefix}-skeleton-title {
+    .use-var(height, skeleton-title-height);
+}
+
+.@{prefix}-skeleton-paragraph {
+    &-line {
+        width: 100%;
+        .use-var(height, skeleton-paragraph-height);
+    }
+
+    &-line + &-line {
+        .use-var(margin-top, skeleton-paragraph-margin-top);
+    }
+}
+
+.@{prefix}-skeleton-avatar.@{prefix}-skeleton-item {
+    .use-var(width, skeleton-avatar-size);
+    .use-var(height, skeleton-avatar-size);
+    border-radius: 100%;
+    transform: translateZ(0);
+}
+
+.@{prefix}-skeleton-content {
+    width: 100%;
+
+    .@{prefix}-skeleton-title + .@{prefix}-skeleton-paragraph {
+        .use-var(margin-top, skeleton-large-gutter);
+    }
+}
+
+.@{prefix}-skeleton-with-avatar {
+    display: flex;
+    align-items: flex-start;
+
+    .@{prefix}-skeleton-avatar {
+        flex: none;
+    }
+
+    .@{prefix}-skeleton-content {
+        .@{prefix}-skeleton-title {
+            .use-var(margin-top, skeleton-medium-gutter);
+        }
+    }
+
+    .@{prefix}-skeleton-avatar + .@{prefix}-skeleton-content {
+        .use-var-with-rtl(margin-left, skeleton-medium-gutter);
+    }
+}
+
+.@{prefix}-skeleton-grid {
+    display: flex;
+    justify-content: space-between;
+    width: 100%;
+
+    &-item {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+    }
+    &-icon {
+        .use-var(width, skeleton-grid-icon-size);
+        .use-var(height, skeleton-grid-icon-size);
+    }
+    &-text {
+        .use-var(margin-top, skeleton-medium-gutter);
+        .use-var(width, skeleton-grid-text-width);
+        .use-var(height, skeleton-grid-text-height);
+    }
+}
+
+.@{prefix}-skeleton-node {
+    display: inline-block;
+}
+
+.@{prefix}-skeleton-item {
+    position: relative;
+    overflow: hidden;
+    .use-var(border-radius, skeleton-border-radius);
+    .use-var(background-color, skeleton-background-color);
+}
+
+.@{prefix}-skeleton-animation-item {
+    position: absolute;
+    width: 100vw;
+    height: 100%;
+    top: 0;
+    left: 0;
+    background-image: linear-gradient(
+        90deg,
+        rgba(255, 255, 255, 0) 35%,
+        currentColor 50%,
+        rgba(255, 255, 255, 0) 65%
+    );
+    transform-origin: top left;
+    animation-name: skeleton-gradient;
+    animation-iteration-count: infinite;
+    .use-var(animation-timing-function, skeleton-gradient-animation-timing-function);
+    .use-var(animation-duration, skeleton-gradient-animation-duration);
+    [dir="rtl"] & {
+        animation-name: skeleton-gradient-reverse;
+    }
+}
+.@{prefix}-skeleton-animation-breath {
+    animation: skeleton-breath linear infinite;
+    .use-var(animation-duration, skeleton-breath-animation-duration);
+}
+
+@keyframes skeleton-gradient {
+    0% {
+        transform: translateX(-65%) skewX(-45deg);
+    }
+
+    100% {
+        transform: translateX(135%) skewX(-45deg);
+    }
+}
+
+@keyframes skeleton-gradient-reverse {
+    0% {
+        transform: translateX(65%) skewX(45deg);
+    }
+
+    100% {
+        transform: translateX(-135%) skewX(45deg);
+    }
+}
+
+@keyframes skeleton-breath {
+    0% {
+        opacity: 1;
+    }
+
+    50% {
+        .use-var(opacity, skeleton-breath-opacity);
+    }
+
+    100% {
+        opacity: 1;
+    }
+}

package/cjs/skeleton/type.d.ts

@@ -0,0 +1,104 @@
+/// <reference types="react" />
+import { BaseProps, SimpleBaseProps } from '../_helpers';
+export interface SkeletonProps extends SimpleBaseProps {
+    /**
+     * 是否显示标题占位图
+     * @en Show title placeholder
+     * @default true
+     */
+    title?: boolean | SkeletonTitleProps;
+    /**
+     * 是否显示段落占位图
+     * @en Show paragraph placeholder
+     * @default true
+     */
+    paragraph?: boolean | SkeletonParagraphProps;
+    /**
+     * 是否显示头像占位图
+     * @en Show Avatar placeholder
+     * @default false
+     */
+    avatar?: boolean | SkeletonAvatarProps;
+    /**
+     * 是否显示金刚位占位图（如该参数非空时，默认展示四列金刚位，且不展示标题/段落/头像占位符）
+     * @en Show Grid placeholder. When it's value is present, the paragraph, avatar or title placeholder will not be displayed, and four columns will be displayed by default
+     * @default false
+     */
+    grid?: boolean | SkeletonGridProps;
+    /**
+     * 是否展示动画效果
+     * @en Show loading effect
+     * @default true
+     */
+    showAnimation?: boolean;
+    /**
+     * 加载动画效果，可选“扫光”、“呼吸”两种效果
+     * @en Animation of loading effect, 'gradient' and 'breath' effects are optional
+     * @default "gradient"
+     */
+    animation?: 'gradient' | 'breath';
+    /**
+     * 扫光动效高光颜色
+     * @en Highlight color of gradient animation
+     * @default "rgba(0, 0, 0, 0.04)"
+     */
+    animationGradientColor?: string;
+    /**
+     * 占位块背景色
+     * @en Background color of skeleton item
+     * @default "#F7F8FA"
+     */
+    backgroundColor?: string;
+    /**
+     * 子元素
+     * @en Children element
+     * @default null
+     */
+    children?: React.ReactNode;
+}
+export interface SkeletonTitleProps extends SimpleBaseProps {
+    /**
+     * 标题占位图宽度
+     * @en The width of title
+     * @default "40%"
+     */
+    width?: number | string;
+}
+export interface SkeletonParagraphProps extends SimpleBaseProps {
+    /**
+     * 段落占位图的行数
+     * @en Number of lines for paragraph
+     * @default 3
+     */
+    rows?: number;
+    /**
+     * 段落占位图宽度，若为数组格式对应每行宽度，否则表示最后一行的宽度
+     * @en The width of paragraph. If width is an Array, it corresponds to the width of each line, otherwise it indicates the width of the last line
+     * @default "60%"
+     */
+    width?: number | string | Array<number | string>;
+}
+export interface SkeletonAvatarProps extends SimpleBaseProps {
+}
+export interface SkeletonGridProps extends SimpleBaseProps {
+    /**
+     * 金刚位列数
+     * @en columns of grid
+     * @default 4
+     */
+    columns?: number;
+}
+export interface SkeletonNodeProps extends BaseProps {
+}
+export interface SkeletonRef {
+    /**
+     * 最外层 DOM 元素
+     * @en The outer DOM element of the component
+     */
+    dom: HTMLDivElement | null;
+}
+export interface SkeletonContextParams {
+    backgroundColor?: string;
+    showAnimation: boolean;
+    animation: SkeletonProps['animation'];
+}

package/cjs/skeleton/type.js

@@ -0,0 +1,3 @@
+"use strict";
+
+exports.__esModule = true;

package/cjs/style.d.ts

@@ -44,6 +44,7 @@ import './pull-refresh/style';
 import './radio/style';
 import './rate/style';
 import './search-bar/style';
+import './skeleton/style';
 import './show-monitor/style';
 import './slider/style';
 import './stepper/style';

package/cjs/style.js

@@ -92,6 +92,8 @@ require("./rate/style");
 
 require("./search-bar/style");
 
+require("./skeleton/style");
+
 require("./show-monitor/style");
 
 require("./slider/style");