@arco-design/mobile-react 2.28.2 → 2.29.1

package/esm/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/esm/skeleton/style/css/index.d.ts

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

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

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

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

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

package/esm/skeleton/style/index.js

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

package/esm/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/esm/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/esm/skeleton/type.js

@@ -0,0 +1 @@
+export {};

package/esm/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/esm/style.js

@@ -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/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@arco-design/mobile-react",
-    "version": "2.28.2",
+    "version": "2.29.1",
     "description": "",
     "main": "cjs/index.js",
     "module": "esm/index.js",
@@ -15,7 +15,7 @@
     "author": "taoyiyue@bytedance.com",
     "license": "ISC",
     "dependencies": {
-        "@arco-design/mobile-utils": "2.16.2",
+        "@arco-design/mobile-utils": "2.16.4",
         "@arco-design/transformable": "^1.0.0",
         "lodash.throttle": "^4.1.1",
         "resize-observer-polyfill": "^1.5.1"
@@ -49,5 +49,5 @@
     "publishConfig": {
         "access": "public"
     },
-    "gitHead": "f923a5d573d8af95e6b158614f8e7d8184afc481"
+    "gitHead": "4feb5984a8951d9d65662c069b2e2c3a61c81014"
 }

package/tokens/app/arcodesign/default/css-variables.less

@@ -793,4 +793,20 @@
     --divider-right-width: ~`pxtorem(28)`;
     --divider-content-padding: ~`pxtorem(12)`;
     --divider-padding: ~`pxtorem(16)`;
+    --skeleton-border-radius: ~`pxtorem(0)`;
+    --skeleton-background-color: #F2F3F5;
+    --skeleton-gradient-animation-color: rgba(255, 255, 255, 0.6);
+    --skeleton-breath-opacity: 0.4;
+    --skeleton-gradient-animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1);
+    --skeleton-gradient-animation-duration: 1.5s;
+    --skeleton-breath-animation-duration: 1.5s;
+    --skeleton-title-height: ~`pxtorem(16)`;
+    --skeleton-paragraph-height: ~`pxtorem(16)`;
+    --skeleton-paragraph-margin-top: ~`pxtorem(12)`;
+    --skeleton-avatar-size: ~`pxtorem(32)`;
+    --skeleton-grid-icon-size: ~`pxtorem(32)`;
+    --skeleton-grid-text-width: ~`pxtorem(64)`;
+    --skeleton-grid-text-height: ~`pxtorem(16)`;
+    --skeleton-medium-gutter: ~`pxtorem(8)`;
+    --skeleton-large-gutter: ~`pxtorem(20)`;
 }

package/tokens/app/arcodesign/default/index.d.ts

@@ -792,6 +792,22 @@ export interface ArcodesignToken extends Record<string, string> {
     'divider-right-width': string;
     'divider-content-padding': string;
     'divider-padding': string;
+    'skeleton-border-radius': string;
+    'skeleton-background-color': string;
+    'skeleton-gradient-animation-color': string;
+    'skeleton-breath-opacity': string;
+    'skeleton-gradient-animation-timing-function': string;
+    'skeleton-gradient-animation-duration': string;
+    'skeleton-breath-animation-duration': string;
+    'skeleton-title-height': string;
+    'skeleton-paragraph-height': string;
+    'skeleton-paragraph-margin-top': string;
+    'skeleton-avatar-size': string;
+    'skeleton-grid-icon-size': string;
+    'skeleton-grid-text-width': string;
+    'skeleton-grid-text-height': string;
+    'skeleton-medium-gutter': string;
+    'skeleton-large-gutter': string;
 }
 declare const tokens: ArcodesignToken;
 export default tokens;

package/tokens/app/arcodesign/default/index.js

@@ -803,7 +803,23 @@ var tokens = {
   "divider-left-width": "0.56rem",
   "divider-right-width": "0.56rem",
   "divider-content-padding": "0.24rem",
-  "divider-padding": "0.32rem"
+  "divider-padding": "0.32rem",
+  "skeleton-border-radius": "0",
+  "skeleton-background-color": "#F2F3F5",
+  "skeleton-gradient-animation-color": "rgba(255, 255, 255, 0.6)",
+  "skeleton-breath-opacity": "0.4",
+  "skeleton-gradient-animation-timing-function": "cubic-bezier(0.42, 0, 0.58, 1)",
+  "skeleton-gradient-animation-duration": "1.5s",
+  "skeleton-breath-animation-duration": "1.5s",
+  "skeleton-title-height": "0.32rem",
+  "skeleton-paragraph-height": "0.32rem",
+  "skeleton-paragraph-margin-top": "0.24rem",
+  "skeleton-avatar-size": "0.64rem",
+  "skeleton-grid-icon-size": "0.64rem",
+  "skeleton-grid-text-width": "1.28rem",
+  "skeleton-grid-text-height": "0.32rem",
+  "skeleton-medium-gutter": "0.16rem",
+  "skeleton-large-gutter": "0.4rem"
 };
 var _default = tokens;
 exports["default"] = _default;