@arco-design/mobile-react 2.28.2 → 2.29.1

package/umd/skeleton/style/index.js

@@ -0,0 +1,15 @@
+(function (global, factory) {
+  if (typeof define === "function" && define.amd) {
+    define(["../../../style/public.less", "../../avatar/style", "./index.less"], factory);
+  } else if (typeof exports !== "undefined") {
+    factory(require("../../../style/public.less"), require("../../avatar/style"), require("./index.less"));
+  } else {
+    var mod = {
+      exports: {}
+    };
+    factory(global._public, global.style, global.index);
+    global.index = mod.exports;
+  }
+})(typeof globalThis !== "undefined" ? globalThis : typeof self !== "undefined" ? self : this, function (_public, _style, _index) {
+  "use strict";
+});

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

@@ -0,0 +1,17 @@
+(function (global, factory) {
+  if (typeof define === "function" && define.amd) {
+    define(["exports"], factory);
+  } else if (typeof exports !== "undefined") {
+    factory(exports);
+  } else {
+    var mod = {
+      exports: {}
+    };
+    factory(mod.exports);
+    global.type = mod.exports;
+  }
+})(typeof globalThis !== "undefined" ? globalThis : typeof self !== "undefined" ? self : this, function (_exports) {
+  "use strict";
+
+  _exports.__esModule = true;
+});

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

@@ -1,15 +1,15 @@
 (function (global, factory) {
   if (typeof define === "function" && define.amd) {
-    define(["../style/public.less", "./tabs/style", "./sticky/style", "./load-more/style", "./cell/style", "./action-sheet/style", "./avatar/style", "./badge/style", "./button/style", "./carousel/style", "./checkbox/style", "./circle-progress/style", "./collapse/style", "./context-provider/style", "./count-down/style", "./date-picker/style", "./dialog/style", "./divider/style", "./dropdown/style", "./dropdown-menu/style", "./ellipsis/style", "./form/style", "./grid/style", "./image/style", "./image-picker/style", "./image-preview/style", "./index-bar/style", "./input/style", "./keyboard/style", "./loading/style", "./masking/style", "./nav-bar/style", "./notice-bar/style", "./notify/style", "./pagination/style", "./picker/style", "./picker-view/style", "./popover/style", "./popup/style", "./popup-swiper/style", "./portal/style", "./progress/style", "./pull-refresh/style", "./radio/style", "./rate/style", "./search-bar/style", "./show-monitor/style", "./slider/style", "./stepper/style", "./steps/style", "./swipe-action/style", "./swipe-load/style", "./switch/style", "./tab-bar/style", "./tag/style", "./textarea/style", "./toast/style", "./transition/style"], factory);
+    define(["../style/public.less", "./tabs/style", "./sticky/style", "./load-more/style", "./cell/style", "./action-sheet/style", "./avatar/style", "./badge/style", "./button/style", "./carousel/style", "./checkbox/style", "./circle-progress/style", "./collapse/style", "./context-provider/style", "./count-down/style", "./date-picker/style", "./dialog/style", "./divider/style", "./dropdown/style", "./dropdown-menu/style", "./ellipsis/style", "./form/style", "./grid/style", "./image/style", "./image-picker/style", "./image-preview/style", "./index-bar/style", "./input/style", "./keyboard/style", "./loading/style", "./masking/style", "./nav-bar/style", "./notice-bar/style", "./notify/style", "./pagination/style", "./picker/style", "./picker-view/style", "./popover/style", "./popup/style", "./popup-swiper/style", "./portal/style", "./progress/style", "./pull-refresh/style", "./radio/style", "./rate/style", "./search-bar/style", "./skeleton/style", "./show-monitor/style", "./slider/style", "./stepper/style", "./steps/style", "./swipe-action/style", "./swipe-load/style", "./switch/style", "./tab-bar/style", "./tag/style", "./textarea/style", "./toast/style", "./transition/style"], factory);
   } else if (typeof exports !== "undefined") {
-    factory(require("../style/public.less"), require("./tabs/style"), require("./sticky/style"), require("./load-more/style"), require("./cell/style"), require("./action-sheet/style"), require("./avatar/style"), require("./badge/style"), require("./button/style"), require("./carousel/style"), require("./checkbox/style"), require("./circle-progress/style"), require("./collapse/style"), require("./context-provider/style"), require("./count-down/style"), require("./date-picker/style"), require("./dialog/style"), require("./divider/style"), require("./dropdown/style"), require("./dropdown-menu/style"), require("./ellipsis/style"), require("./form/style"), require("./grid/style"), require("./image/style"), require("./image-picker/style"), require("./image-preview/style"), require("./index-bar/style"), require("./input/style"), require("./keyboard/style"), require("./loading/style"), require("./masking/style"), require("./nav-bar/style"), require("./notice-bar/style"), require("./notify/style"), require("./pagination/style"), require("./picker/style"), require("./picker-view/style"), require("./popover/style"), require("./popup/style"), require("./popup-swiper/style"), require("./portal/style"), require("./progress/style"), require("./pull-refresh/style"), require("./radio/style"), require("./rate/style"), require("./search-bar/style"), require("./show-monitor/style"), require("./slider/style"), require("./stepper/style"), require("./steps/style"), require("./swipe-action/style"), require("./swipe-load/style"), require("./switch/style"), require("./tab-bar/style"), require("./tag/style"), require("./textarea/style"), require("./toast/style"), require("./transition/style"));
+    factory(require("../style/public.less"), require("./tabs/style"), require("./sticky/style"), require("./load-more/style"), require("./cell/style"), require("./action-sheet/style"), require("./avatar/style"), require("./badge/style"), require("./button/style"), require("./carousel/style"), require("./checkbox/style"), require("./circle-progress/style"), require("./collapse/style"), require("./context-provider/style"), require("./count-down/style"), require("./date-picker/style"), require("./dialog/style"), require("./divider/style"), require("./dropdown/style"), require("./dropdown-menu/style"), require("./ellipsis/style"), require("./form/style"), require("./grid/style"), require("./image/style"), require("./image-picker/style"), require("./image-preview/style"), require("./index-bar/style"), require("./input/style"), require("./keyboard/style"), require("./loading/style"), require("./masking/style"), require("./nav-bar/style"), require("./notice-bar/style"), require("./notify/style"), require("./pagination/style"), require("./picker/style"), require("./picker-view/style"), require("./popover/style"), require("./popup/style"), require("./popup-swiper/style"), require("./portal/style"), require("./progress/style"), require("./pull-refresh/style"), require("./radio/style"), require("./rate/style"), require("./search-bar/style"), require("./skeleton/style"), require("./show-monitor/style"), require("./slider/style"), require("./stepper/style"), require("./steps/style"), require("./swipe-action/style"), require("./swipe-load/style"), require("./switch/style"), require("./tab-bar/style"), require("./tag/style"), require("./textarea/style"), require("./toast/style"), require("./transition/style"));
   } else {
     var mod = {
       exports: {}
     };
-    factory(global._public, global.style, global.style, global.style, global.style, global.style, global.style, global.style, global.style, global.style, global.style, global.style, global.style, global.style, global.style, global.style, global.style, global.style, global.style, global.style, global.style, global.style, global.style, global.style, global.style, global.style, global.style, global.style, global.style, global.style, global.style, global.style, global.style, global.style, global.style, global.style, global.style, global.style, global.style, global.style, global.style, global.style, global.style, global.style, global.style, global.style, global.style, global.style, global.style, global.style, global.style, global.style, global.style, global.style, global.style, global.style, global.style, global.style);
+    factory(global._public, global.style, global.style, global.style, global.style, global.style, global.style, global.style, global.style, global.style, global.style, global.style, global.style, global.style, global.style, global.style, global.style, global.style, global.style, global.style, global.style, global.style, global.style, global.style, global.style, global.style, global.style, global.style, global.style, global.style, global.style, global.style, global.style, global.style, global.style, global.style, global.style, global.style, global.style, global.style, global.style, global.style, global.style, global.style, global.style, global.style, global.style, global.style, global.style, global.style, global.style, global.style, global.style, global.style, global.style, global.style, global.style, global.style, global.style);
     global.style = mod.exports;
   }
-})(typeof globalThis !== "undefined" ? globalThis : typeof self !== "undefined" ? self : this, function (_public, _style, _style2, _style3, _style4, _style5, _style6, _style7, _style8, _style9, _style10, _style11, _style12, _style13, _style14, _style15, _style16, _style17, _style18, _style19, _style20, _style21, _style22, _style23, _style24, _style25, _style26, _style27, _style28, _style29, _style30, _style31, _style32, _style33, _style34, _style35, _style36, _style37, _style38, _style39, _style40, _style41, _style42, _style43, _style44, _style45, _style46, _style47, _style48, _style49, _style50, _style51, _style52, _style53, _style54, _style55, _style56, _style57) {
+})(typeof globalThis !== "undefined" ? globalThis : typeof self !== "undefined" ? self : this, function (_public, _style, _style2, _style3, _style4, _style5, _style6, _style7, _style8, _style9, _style10, _style11, _style12, _style13, _style14, _style15, _style16, _style17, _style18, _style19, _style20, _style21, _style22, _style23, _style24, _style25, _style26, _style27, _style28, _style29, _style30, _style31, _style32, _style33, _style34, _style35, _style36, _style37, _style38, _style39, _style40, _style41, _style42, _style43, _style44, _style45, _style46, _style47, _style48, _style49, _style50, _style51, _style52, _style53, _style54, _style55, _style56, _style57, _style58) {
   "use strict";
 });