@arco-design/mobile-react 2.19.0

package/esm/toast/style/css/index.css

@@ -0,0 +1,117 @@
+.arco-toast-wrapper {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  z-index: 1001;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: flex;
+  -webkit-box-pack: center;
+  -webkit-justify-content: center;
+          justify-content: center;
+  padding:  0 0.32rem ;
+}
+.arco-toast-wrapper.no-event {
+  pointer-events: none;
+}
+.arco-toast-wrapper.from-center {
+  -webkit-box-align: center;
+  -webkit-align-items: center;
+          align-items: center;
+}
+.arco-toast-wrapper.from-top {
+  -webkit-box-align: start;
+  -webkit-align-items: flex-start;
+          align-items: flex-start;
+  padding-top:  30% ;
+}
+.arco-toast-wrapper.from-bottom {
+  -webkit-box-align: end;
+  -webkit-align-items: flex-end;
+          align-items: flex-end;
+  padding-bottom:  30% ;
+}
+.arco-toast-inner {
+  background:  rgba(0, 0, 0, 0.8) ;
+  color:  #ffffff ;
+  font-size:  0.32rem ;
+  line-height:  0.48rem ;
+  border-radius:  0.08rem ;
+  -webkit-box-orient: vertical;
+  -webkit-box-direction: normal;
+  -webkit-flex-direction: column;
+          flex-direction: column;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: flex;
+  -webkit-box-align: center;
+  -webkit-align-items: center;
+          align-items: center;
+  -webkit-box-pack: center;
+  -webkit-justify-content: center;
+          justify-content: center;
+  pointer-events: initial;
+}
+.arco-toast-inner.horizontal {
+  -webkit-box-orient: horizontal;
+  -webkit-box-direction: normal;
+  -webkit-flex-direction: row;
+          flex-direction: row;
+  padding:  0.16rem 0.32rem ;
+}
+.arco-toast-inner.horizontal .arco-icon {
+  -webkit-box-flex: 0;
+  -webkit-flex: 0 0 auto;
+          flex: 0 0 auto;
+  font-size:  0.32rem ;
+}
+.arco-toast-inner.horizontal .arco-toast-loading-wrapper + .arco-toast-content,
+.arco-toast-inner.horizontal .arco-icon + .arco-toast-content {
+  margin-left:  0.16rem ;
+}
+.arco-toast-inner.vertical {
+  padding:  0.32rem ;
+}
+.arco-toast-inner.vertical .arco-icon {
+  font-size:  0.48rem ;
+}
+.arco-toast-inner.vertical .arco-toast-loading-wrapper + .arco-toast-content,
+.arco-toast-inner.vertical .arco-icon + .arco-toast-content {
+  margin-top:  0.16rem ;
+}
+.arco-toast-inner .arco-loading .bg-color-with-config {
+  background: #ffffff;
+}
+.arco-toast-inner .arco-loading .stop-color-with-config {
+  stop-color: #ffffff;
+}
+.arco-toast-inner .arco-loading .fill-color-with-config {
+  fill: #ffffff;
+}
+.arco-toast-inner .arco-loading .stroke-color-with-config {
+  stroke: #ffffff;
+}
+.arco-toast-inner .arco-loading.arc .arc-bg {
+  stroke:  #666666 ;
+}
+.arco-toast-loading-wrapper {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: flex;
+  position: relative;
+}
+.arco-toast-loading-inner {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  -webkit-transform: translate(-50%, -50%);
+          transform: translate(-50%, -50%);
+  font-size:  0.24rem ;
+}
+.arco-toast-content {
+  width: 100%;
+  text-align: center;
+  white-space: pre-line;
+}

package/esm/toast/style/css/index.d.ts

@@ -0,0 +1,4 @@
+import '../../../../style/css/public.css';
+import '../../../transition/style/css';
+import '../../../loading/style/css';
+import './index.css';

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

@@ -0,0 +1,4 @@
+import '../../../../style/css/public.css';
+import '../../../transition/style/css';
+import '../../../loading/style/css';
+import './index.css';

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

@@ -0,0 +1,4 @@
+import '../../../style/public.less';
+import '../../transition/style';
+import '../../loading/style';
+import './index.less';

package/esm/toast/style/index.js

@@ -0,0 +1,4 @@
+import '../../../style/public.less';
+import '../../transition/style';
+import '../../loading/style';
+import './index.less';

package/esm/toast/style/index.less

@@ -0,0 +1,93 @@
+@import "../../../style/mixin.less";
+
+.@{prefix}-toast {
+
+    &-wrapper {
+        .full-screen();
+        z-index: @full-screen-z-index + 1;
+        display: flex;
+        justify-content: center;
+        .use-var(padding, toast-safe-padding);
+
+        &.no-event {
+            pointer-events: none;
+        }
+
+        &.from-center {
+            align-items: center;
+        }
+
+        &.from-top {
+            align-items: flex-start;
+            .use-var(padding-top, toast-from-top-position);
+        }
+
+        &.from-bottom {
+            align-items: flex-end;
+            .use-var(padding-bottom, toast-from-bottom-position);
+        }
+    }
+
+    &-inner {
+        .use-var(background, toast-background);
+        .use-var(color, toast-text-color);
+        .use-var(font-size, toast-font-size);
+        .use-var(line-height, toast-line-height);
+        .use-var(border-radius, toast-border-radius);
+        flex-direction: column;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        pointer-events: initial;
+
+        &.horizontal {
+            flex-direction: row;
+            .use-var(padding, toast-horizontal-padding);
+            .@{prefix}-icon {
+                flex: 0 0 auto;
+                .use-var(font-size, toast-horizontal-icon-size);
+            }
+            .@{prefix}-toast-loading-wrapper + .@{prefix}-toast-content,
+            .@{prefix}-icon + .@{prefix}-toast-content {
+                .use-var(margin-left, toast-horizontal-icon-content-gutter);
+            }
+        }
+
+        &.vertical {
+            .use-var(padding, toast-vertical-padding);
+            .@{prefix}-icon {
+                .use-var(font-size, toast-vertical-icon-size);
+            }
+            .@{prefix}-toast-loading-wrapper + .@{prefix}-toast-content,
+            .@{prefix}-icon + .@{prefix}-toast-content {
+                .use-var(margin-top, toast-vertical-icon-content-gutter);
+            }
+        }
+        .@{prefix}-loading {
+            .set-loading-color-var(mask-content-color);
+
+            &.arc .arc-bg {
+                .use-var(stroke, toast-loading-arc-background-color);
+            }
+        }
+    }
+
+    &-loading-wrapper {
+        display: flex;
+        position: relative;
+    }
+
+    &-loading-inner {
+        position: absolute;
+        top: 50%;
+        left: 50%;
+        transform: translate(-50%, -50%);
+        .use-var(font-size, toast-loading-inner-font-size);
+    }
+
+    &-content {
+        width: 100%;
+        text-align: center;
+        white-space: pre-line;
+    }
+}

package/esm/transition/demo/style/css/mobile.css

@@ -0,0 +1,19 @@
+#demo-transition {
+  padding-bottom: 0.54rem;
+}
+#demo-transition .arcodesign-mobile-demo-content {
+  padding: 0;
+  background: transparent;
+  margin: 0 0.24rem;
+  border-radius: 0.16rem;
+  overflow: hidden;
+}
+.demo-transition-mask {
+  position: fixed;
+  width: 100%;
+  height: 100%;
+  left: 0;
+  top: 0;
+  z-index: 1000;
+  background: rgba(0, 0, 0, 0.5);
+}

package/esm/transition/demo/style/mobile.less

@@ -0,0 +1,22 @@
+@import '../../../../style/mixin.less';
+
+#demo-transition {
+    .rem(padding-bottom, 27);
+    .arcodesign-mobile-demo-content {
+        padding: 0;
+        background: transparent;
+        .rem(margin, 0, 12);
+        .rem(border-radius, 8);
+        overflow: hidden;
+    }
+}
+
+.demo-transition-mask {
+    position: fixed;
+    width: 100%;
+    height: 100%;
+    left: 0;
+    top: 0;
+    z-index: 1000;
+    background: rgba(0, 0, 0, 0.5);
+}

package/esm/transition/index.d.ts

@@ -0,0 +1,49 @@
+import React from 'react';
+import { CSSTransitionProps } from 'react-transition-group/CSSTransition';
+export declare type TransitionProps = Omit<CSSTransitionProps, 'timeout'> & {
+    /**
+     * 待执行动画内容
+     * @en Animation content to be executed
+     */
+    children?: React.ReactNode;
+    /**
+     * 待执行动画css类名
+     * @en Css classname of the animation to be executed
+     */
+    type: string;
+    /**
+     * 内容是否可见
+     * @en Whether the content is visible
+     */
+    in: boolean;
+    /**
+     * 执行动画时间
+     * @en Execute animation time
+     */
+    timeout: number | {
+        appear?: number;
+        enter?: number;
+        exit?: number;
+    };
+    /**
+     * 是否在打开时再加载内容
+     * @en Whether to reload content when it is opened
+     * @default true
+     */
+    mountOnEnter?: boolean;
+    /**
+     * 是否在退出时卸载内容
+     * @en Whether to unmount content on exit
+     * @default true
+     */
+    unmountOnExit?: boolean;
+};
+/**
+ * react-transition-group/CSSTransition 的简单封装。
+ * @en Simple wrapper for react-transition-group/CSSTransition.
+ * @type 其他
+ * @type_en Others
+ * @name 动画过渡
+ * @name_en Transition
+ */
+export default function Transition(props: TransitionProps): JSX.Element;

package/esm/transition/index.js

@@ -0,0 +1,37 @@
+import _extends from "@babel/runtime/helpers/extends";
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/objectWithoutPropertiesLoose";
+var _excluded = ["children", "type", "in", "timeout", "mountOnEnter", "unmountOnExit"];
+import React from 'react';
+import CSSTransition from 'react-transition-group/CSSTransition';
+import { ContextLayout } from '../context-provider';
+
+/**
+ * react-transition-group/CSSTransition 的简单封装。
+ * @en Simple wrapper for react-transition-group/CSSTransition.
+ * @type 其他
+ * @type_en Others
+ * @name 动画过渡
+ * @name_en Transition
+ */
+export default function Transition(props) {
+  var children = props.children,
+      type = props.type,
+      transIn = props.in,
+      timeout = props.timeout,
+      _props$mountOnEnter = props.mountOnEnter,
+      mountOnEnter = _props$mountOnEnter === void 0 ? true : _props$mountOnEnter,
+      _props$unmountOnExit = props.unmountOnExit,
+      unmountOnExit = _props$unmountOnExit === void 0 ? true : _props$unmountOnExit,
+      restProps = _objectWithoutPropertiesLoose(props, _excluded);
+
+  return /*#__PURE__*/React.createElement(ContextLayout, null, function (_ref) {
+    var prefixCls = _ref.prefixCls;
+    return /*#__PURE__*/React.createElement(CSSTransition, _extends({
+      in: transIn,
+      timeout: timeout,
+      classNames: prefixCls + "-" + type,
+      mountOnEnter: mountOnEnter,
+      unmountOnExit: unmountOnExit
+    }, restProps), children);
+  });
+}

package/esm/transition/style/css/index.css

@@ -0,0 +1,23 @@
+.arco-fade-enter {
+  opacity: 0;
+}
+.arco-fade-enter-active {
+  opacity: 1;
+  -webkit-transition-property: opacity;
+  transition-property: opacity;
+  -webkit-transition-duration:  300ms ;
+          transition-duration:  300ms ;
+}
+.arco-fade-exit {
+  opacity: 1;
+}
+.arco-fade-exit-active {
+  opacity: 0;
+  -webkit-transition-property: opacity;
+  transition-property: opacity;
+  -webkit-transition-duration:  300ms ;
+          transition-duration:  300ms ;
+}
+.arco-fade-exit-done {
+  display: none;
+}

package/esm/transition/style/css/index.d.ts

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

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

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

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

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

package/esm/transition/style/index.js

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

package/esm/transition/style/index.less

@@ -0,0 +1,28 @@
+@import "../../../style/mixin.less";
+
+.@{prefix}-fade {
+
+    &-enter {
+        opacity: 0;
+    }
+
+    &-enter-active {
+        opacity: 1;
+        transition-property: opacity;
+        .use-var(transition-duration, transition-fade-duration);
+    }
+
+    &-exit {
+        opacity: 1;
+    }
+
+    &-exit-active {
+        opacity: 0;
+        transition-property: opacity;
+        .use-var(transition-duration, transition-fade-duration);
+    }
+
+    &-exit-done {
+        display: none;
+    }
+}

package/package.json

@@ -0,0 +1,40 @@
+{
+    "name": "@arco-design/mobile-react",
+    "version": "2.19.0",
+    "description": "",
+    "main": "cjs/index.js",
+    "module": "esm/index.js",
+    "scripts": {
+        "prebuild": "node ../../scripts/build/pre-build.js",
+        "build": "rm -rf esm/* umd/* cjs/* && gulp build && npm run dist",
+        "dist": "rm -rf dist/* && cd ../../ && node packages/arcodesign/rollup.lib.js",
+        "prepublishOnly": "npm run build",
+        "build:bd": "npm run build",
+        "test": "jest"
+    },
+    "author": "taoyiyue@bytedance.com",
+    "license": "ISC",
+    "dependencies": {
+        "@arco-design/mobile-utils": "^2.10.0",
+        "@arco-design/transformable": "^1.0.0",
+        "es6-promise": "^4.2.8",
+        "lodash.throttle": "^4.1.1",
+        "resize-observer-polyfill": "^1.5.1"
+    },
+    "devDependencies": {
+        "babel-jest": "^25.3.0",
+        "enzyme": "^3.11.0",
+        "enzyme-adapter-react-16": "^1.15.2",
+        "enzyme-to-json": "^3.4.4",
+        "jest": "^25.3.0"
+    },
+    "peerDependencies": {
+        "react": ">=16.9.0",
+        "react-dom": ">=16.9.0",
+        "react-transition-group": ">=4.3.0"
+    },
+    "publishConfig": {
+        "access": "public"
+    },
+    "gitHead": "e94c3c91453c778da1cb22216e65a95c12bd0bbb"
+}

package/style/css/public.css

@@ -0,0 +1,52 @@
+* {
+  margin: 0;
+  padding: 0;
+  border: 0;
+  -webkit-font-smoothing: antialiased;
+  -webkit-tap-highlight-color: transparent;
+}
+body {
+  touch-action: manipulation;
+  -webkit-text-size-adjust: none;
+}
+button,
+input,
+optgroup,
+select,
+textarea {
+  font: inherit;
+  color: inherit;
+}
+ul,
+ol,
+li {
+  list-style: none;
+}
+img,
+button {
+  border: 0;
+  outline: 0;
+}
+a {
+  text-decoration: none;
+  outline: 0;
+}
+table,
+tr,
+td {
+  border-collapse: collapse;
+}
+input,
+textarea {
+  outline: 0;
+}
+code,
+kbd,
+pre,
+samp {
+  font-family: Menlo, Consolas;
+}
+.all-border-box,
+.all-border-box * {
+  box-sizing: border-box;
+}

package/style/mixin.less

@@ -0,0 +1,3 @@
+@import '../tokens/app/arcodesign/default/index.less';
+@import '../tokens/mixin/index.less';
+@import '~@arco-design/mobile-utils/style/mixin.less';

package/style/public.less

@@ -0,0 +1,3 @@
+@import '../tokens/app/arcodesign/default/index.less';
+@import '../tokens/app/arcodesign/default/css-variables.less';
+@import '~@arco-design/mobile-utils/style/reset.less';