@arco-design/mobile-react 2.19.0

package/cjs/dialog/style/css/index.css

@@ -0,0 +1,366 @@
+@-webkit-keyframes fade-scale-on {
+  0% {
+    opacity: 0;
+    -webkit-transform: scale(0.5);
+            transform: scale(0.5);
+  }
+  100% {
+    opacity: 1;
+    -webkit-transform: scale(1);
+            transform: scale(1);
+  }
+}
+@keyframes fade-scale-on {
+  0% {
+    opacity: 0;
+    -webkit-transform: scale(0.5);
+            transform: scale(0.5);
+  }
+  100% {
+    opacity: 1;
+    -webkit-transform: scale(1);
+            transform: scale(1);
+  }
+}
+@-webkit-keyframes fade-scale-off {
+  0% {
+    opacity: 1;
+    -webkit-transform: scale(1);
+            transform: scale(1);
+  }
+  100% {
+    opacity: 0;
+    -webkit-transform: scale(0.5);
+            transform: scale(0.5);
+  }
+}
+@keyframes fade-scale-off {
+  0% {
+    opacity: 1;
+    -webkit-transform: scale(1);
+            transform: scale(1);
+  }
+  100% {
+    opacity: 0;
+    -webkit-transform: scale(0.5);
+            transform: scale(0.5);
+  }
+}
+.arco-fade-scale-enter-active {
+  -webkit-animation: fade-scale-on 0.45s cubic-bezier(0.2, 1.23, 0.25, 1) forwards;
+          animation: fade-scale-on 0.45s cubic-bezier(0.2, 1.23, 0.25, 1) forwards;
+}
+.arco-fade-scale-exit-active {
+  -webkit-animation: fade-scale-off 0.15s cubic-bezier(0.48, 0.04, 0.52, 0.96) forwards;
+          animation: fade-scale-off 0.15s cubic-bezier(0.48, 0.04, 0.52, 0.96) forwards;
+}
+.arco-dialog-mask,
+.arco-dialog-container {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+}
+.arco-dialog-mask {
+  z-index: 1000;
+  background:  rgba(0, 0, 0, 0.6) ;
+}
+.arco-dialog-container {
+  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;
+  z-index: 1001;
+  pointer-events: none;
+}
+.arco-dialog-content {
+  position: relative;
+  width:  5.4rem ;
+  pointer-events: visible;
+}
+.arco-dialog-content.android {
+  width:  5.6rem ;
+}
+.arco-dialog-container.pre-mount .arco-dialog-content,
+.arco-dialog-container[class*="-exit-done"] .arco-dialog-content {
+  pointer-events: none;
+}
+.arco-dialog-part {
+  background:  #ffffff ;
+}
+.arco-dialog-part.android:first-of-type {
+  border-top-left-radius:  0.08rem ;
+  border-top-right-radius:  0.08rem ;
+}
+.arco-dialog-part.android:last-of-type {
+  border-bottom-left-radius:  0.08rem ;
+  border-bottom-right-radius:  0.08rem ;
+}
+.arco-dialog-part.ios:first-of-type {
+  border-top-left-radius:  0.16rem ;
+  border-top-right-radius:  0.16rem ;
+}
+.arco-dialog-part.ios:last-of-type {
+  border-bottom-left-radius:  0.16rem ;
+  border-bottom-right-radius:  0.16rem ;
+}
+.arco-dialog-header {
+  position: relative;
+}
+.arco-dialog-header.ios {
+  text-align: center;
+  padding-top:  0.4rem ;
+  padding-left:  0.32rem ;
+  padding-right:  0.32rem ;
+  font-size:  0.34rem ;
+  line-height:  0.52rem ;
+  font-weight: bold;
+}
+.android .arco-dialog-header.ios,
+.arco-dialog-header.ios.android,
+.arco-dialog-header.ios.system-android {
+  font-weight: 400;
+  -webkit-text-stroke: 0.3PX #1d2129;
+  text-stroke: 0.3PX #1d2129;
+}
+.arco-dialog-header.ios.only-title {
+  padding-bottom:  0.4rem ;
+}
+.arco-dialog-header.android {
+  color:  #1d2129 ;
+}
+.arco-dialog-body.ios {
+  padding-top:  0.08rem ;
+  padding-left:  0.32rem ;
+  padding-right:  0.32rem ;
+  padding-bottom:  0.4rem ;
+  color:  #4e5969 ;
+  font-size:  0.3rem ;
+  line-height:  0.44rem ;
+}
+.arco-dialog-body.ios.sub-title {
+  padding-top:  0.4rem ;
+}
+.arco-dialog-body.android {
+  padding-top:  0.24rem ;
+  padding-left:  0.48rem ;
+  padding-right:  0.48rem ;
+  color:  #4e5969 ;
+  font-size:  0.3rem ;
+  line-height:  0.48rem ;
+}
+.arco-dialog-header.left,
+.arco-dialog-body.left {
+  text-align: left;
+}
+.arco-dialog-header.center,
+.arco-dialog-body.center {
+  text-align: center;
+}
+.arco-dialog-header.right,
+.arco-dialog-body.right {
+  text-align: right;
+}
+.arco-dialog-header.android,
+.arco-dialog-body.sub-title.android {
+  padding-top:  0.4rem ;
+  padding-left:  0.48rem ;
+  padding-right:  0.48rem ;
+  font-size:  0.34rem ;
+  line-height:  0.56rem ;
+}
+.arco-dialog-header.ios,
+.arco-dialog-body.sub-title.ios {
+  color:  #1d2129 ;
+}
+.arco-dialog-footer {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: flex;
+  -webkit-box-align: center;
+  -webkit-align-items: center;
+          align-items: center;
+}
+.arco-dialog-footer.android {
+  padding-left:  0.48rem ;
+  padding-right:  0.48rem ;
+  padding-top:  0.48rem ;
+  padding-bottom:  0.4rem ;
+  -webkit-box-pack: end;
+  -webkit-justify-content: flex-end;
+          justify-content: flex-end;
+  text-align: right;
+}
+.arco-dialog-footer.android .dialog-footer-button {
+  color:  #1a74ff ;
+  font-size:  0.3rem ;
+  line-height:  0.4rem ;
+}
+.arco-dialog-footer.android .dialog-footer-button:not(:last-child) {
+  margin-right:  0.56rem ;
+}
+.arco-dialog-footer.ios {
+  overflow: hidden;
+}
+.arco-dialog-footer.ios .dialog-footer-button {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: flex;
+  -webkit-box-pack: center;
+  -webkit-justify-content: center;
+          justify-content: center;
+  -webkit-box-align: center;
+  -webkit-align-items: center;
+          align-items: center;
+  height:  0.88rem ;
+  font-size:  0.32rem ;
+  color:  #165dff ;
+}
+.arco-dialog-footer.ios:not(.collapsed):not(.type-button) {
+  position: relative;
+  border-width: 0;
+}
+.arco-dialog-footer.ios:not(.collapsed):not(.type-button)::before {
+  content: '';
+  width: 100%;
+  height: 1PX;
+  position: absolute;
+  left: 0;
+  top: 0;
+  z-index: 1;
+  border-top-style: solid;
+  border-top-width: 1PX;
+  border-top-color: #e5e6eb;
+  box-sizing: border-box;
+  transform-origin: left top;
+  -webkit-transform-origin: left top;
+  pointer-events: none;
+  border-radius: 0;
+}
+@media (-webkit-min-device-pixel-ratio: 2), (min-device-pixel-ratio: 2) {
+  .arco-dialog-footer.ios:not(.collapsed):not(.type-button)::before {
+    transform: scaleY(0.5);
+    -webkit-transform: scaleY(0.5);
+    border-radius: 0;
+  }
+}
+@media (-webkit-min-device-pixel-ratio: 3), (min-device-pixel-ratio: 3) {
+  .arco-dialog-footer.ios:not(.collapsed):not(.type-button)::before {
+    transform: scaleY(0.33333333);
+    -webkit-transform: scaleY(0.33333333);
+    border-radius: 0;
+  }
+}
+.arco-dialog-footer.ios:not(.collapsed):not(.type-button) .dialog-footer-button {
+  -webkit-box-flex: 1;
+  -webkit-flex: 1;
+          flex: 1;
+}
+.arco-dialog-footer.ios:not(.collapsed):not(.type-button) .dialog-footer-button:not(:last-child) {
+  position: relative;
+  border-width: 0;
+}
+.arco-dialog-footer.ios:not(.collapsed):not(.type-button) .dialog-footer-button:not(:last-child)::after {
+  content: '';
+  width: 1PX;
+  height: 100%;
+  position: absolute;
+  right: 0;
+  top: 0;
+  z-index: 1;
+  border-right-style: solid;
+  border-right-width: 1PX;
+  border-right-color: #e5e6eb;
+  box-sizing: border-box;
+  transform-origin: right top;
+  -webkit-transform-origin: right top;
+  pointer-events: none;
+  border-radius: 0;
+}
+@media (-webkit-min-device-pixel-ratio: 2), (min-device-pixel-ratio: 2) {
+  .arco-dialog-footer.ios:not(.collapsed):not(.type-button) .dialog-footer-button:not(:last-child)::after {
+    transform: scaleX(0.5);
+    -webkit-transform: scaleX(0.5);
+    border-radius: 0;
+  }
+}
+@media (-webkit-min-device-pixel-ratio: 3), (min-device-pixel-ratio: 3) {
+  .arco-dialog-footer.ios:not(.collapsed):not(.type-button) .dialog-footer-button:not(:last-child)::after {
+    transform: scaleX(0.33333333);
+    -webkit-transform: scaleX(0.33333333);
+    border-radius: 0;
+  }
+}
+.arco-dialog-footer.ios.collapsed {
+  -webkit-box-orient: vertical;
+  -webkit-box-direction: normal;
+  -webkit-flex-direction: column;
+          flex-direction: column;
+}
+.arco-dialog-footer.ios.collapsed .dialog-footer-button {
+  width: 100%;
+  position: relative;
+  border-width: 0;
+}
+.arco-dialog-footer.ios.collapsed .dialog-footer-button::before {
+  content: '';
+  width: 100%;
+  height: 1PX;
+  position: absolute;
+  left: 0;
+  top: 0;
+  z-index: 1;
+  border-top-style: solid;
+  border-top-width: 1PX;
+  border-top-color: #e5e6eb;
+  box-sizing: border-box;
+  transform-origin: left top;
+  -webkit-transform-origin: left top;
+  pointer-events: none;
+  border-radius: 0;
+}
+@media (-webkit-min-device-pixel-ratio: 2), (min-device-pixel-ratio: 2) {
+  .arco-dialog-footer.ios.collapsed .dialog-footer-button::before {
+    transform: scaleY(0.5);
+    -webkit-transform: scaleY(0.5);
+    border-radius: 0;
+  }
+}
+@media (-webkit-min-device-pixel-ratio: 3), (min-device-pixel-ratio: 3) {
+  .arco-dialog-footer.ios.collapsed .dialog-footer-button::before {
+    transform: scaleY(0.33333333);
+    -webkit-transform: scaleY(0.33333333);
+    border-radius: 0;
+  }
+}
+.arco-dialog-footer.ios.type-button {
+  -webkit-box-orient: vertical;
+  -webkit-box-direction: normal;
+  -webkit-flex-direction: column;
+          flex-direction: column;
+  padding-left:  0.32rem ;
+  padding-right:  0.32rem ;
+  padding-bottom:  0.4rem ;
+}
+.arco-dialog-footer.ios.type-button .dialog-footer-button {
+  width: 100%;
+  border-radius:  0.6rem ;
+  height:  0.72rem ;
+}
+.arco-dialog-footer.ios.type-button .dialog-footer-button:first-child {
+  color:  #ffffff ;
+  background:  #165dff ;
+}
+.arco-dialog-footer.ios.type-button .dialog-footer-button:not(:first-child) {
+  color:  #86909c ;
+  margin-top:  0.16rem ;
+}
+.arco-dialog-footer.ios.type-button .dialog-footer-button:last-child {
+  margin-bottom: -0.14rem;
+}

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

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

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

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

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

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

package/cjs/dialog/style/index.js

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

package/cjs/dialog/style/index.less

@@ -0,0 +1,262 @@
+@import "../../../style/mixin.less";
+
+@keyframes fade-scale-on {
+
+    0% {
+        opacity: 0; transform: scale(.5); }
+
+    100% {
+        opacity: 1; transform: scale(1); }
+}
+
+@keyframes fade-scale-off {
+
+    0% {
+        opacity: 1; transform: scale(1); }
+
+    100% {
+        opacity: 0; transform: scale(.5); }
+}
+
+.@{prefix}-fade-scale-enter-active {
+    animation: fade-scale-on .45s cubic-bezier(.2, 1.23, .25, 1) forwards;
+}
+
+.@{prefix}-fade-scale-exit-active {
+    animation: fade-scale-off .15s cubic-bezier(.48, .04, .52, .96) forwards;
+}
+
+.@{prefix}-dialog {
+
+    &-mask,
+    &-container {
+        position: fixed;
+        top: 0;
+        left: 0;
+        width: 100%;
+        height: 100%;
+    }
+
+    &-mask {
+        z-index: @full-screen-z-index;
+        .use-var(background, dialog-mask-background);
+    }
+
+    &-container {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        z-index: @full-screen-z-index + 1;
+        pointer-events: none;
+    }
+
+    &-content {
+        position: relative;
+        .use-var(width, dialog-content-width);
+        pointer-events: visible;
+
+        &.android {
+            .use-var(width, dialog-content-android-width);
+        }
+    }
+
+    &-container.pre-mount &-content,
+    &-container[class*="-exit-done"] &-content {
+        pointer-events: none;
+    }
+
+    &-part {
+        .use-var(background, dialog-content-background);
+
+        &.android {
+
+            &:first-of-type {
+                .use-var(border-top-left-radius, dialog-content-android-border-radius);
+                .use-var(border-top-right-radius, dialog-content-android-border-radius);
+            }
+
+            &:last-of-type {
+                .use-var(border-bottom-left-radius, dialog-content-android-border-radius);
+                .use-var(border-bottom-right-radius, dialog-content-android-border-radius);
+            }
+        }
+
+        &.ios {
+
+            &:first-of-type {
+                .use-var(border-top-left-radius, dialog-content-border-radius);
+                .use-var(border-top-right-radius, dialog-content-border-radius);
+            }
+
+            &:last-of-type {
+                .use-var(border-bottom-left-radius, dialog-content-border-radius);
+                .use-var(border-bottom-right-radius, dialog-content-border-radius);
+            }
+        }
+    }
+
+    &-header {
+        position: relative;
+
+        &.ios {
+            text-align: center;
+            .use-var(padding-top, dialog-ios-vertical-padding);
+            .use-var(padding-left, dialog-ios-horizontal-padding);
+            .use-var(padding-right, dialog-ios-horizontal-padding);
+            .use-var(font-size, dialog-header-ios-font-size);
+            .use-var(line-height, dialog-header-ios-line-height);
+            .text-medium-var(dialog-header-ios-color);
+
+            &.only-title {
+                .use-var(padding-bottom, dialog-ios-vertical-padding);
+            }
+        }
+
+        &.android {
+            .use-var(color, dialog-header-android-color);
+        }
+    }
+
+    &-body {
+
+        &.ios {
+            .use-var(padding-top, dialog-ios-header-body-gutter);
+            .use-var(padding-left, dialog-ios-horizontal-padding);
+            .use-var(padding-right, dialog-ios-horizontal-padding);
+            .use-var(padding-bottom, dialog-ios-vertical-padding);
+            .use-var(color, dialog-body-ios-color);
+            .use-var(font-size, dialog-body-ios-font-size);
+            .use-var(line-height, dialog-body-ios-line-height);
+
+            &.sub-title {
+                .use-var(padding-top, dialog-ios-vertical-padding);
+            }
+        }
+
+        &.android {
+            .use-var(padding-top, dialog-android-header-body-gutter);
+            .use-var(padding-left, dialog-android-horizontal-padding);
+            .use-var(padding-right, dialog-android-horizontal-padding);
+            .use-var(color, dialog-body-android-color);
+            .use-var(font-size, dialog-body-android-font-size);
+            .use-var(line-height, dialog-body-android-line-height);
+        }
+    }
+
+    &-header,
+    &-body {
+
+        &.left {
+            text-align: left;
+        }
+
+        &.center {
+            text-align: center;
+        }
+
+        &.right {
+            text-align: right;
+        }
+    }
+
+    &-header,
+    &-body.sub-title {
+
+        &.android {
+            .use-var(padding-top, dialog-android-vertical-padding);
+            .use-var(padding-left, dialog-android-horizontal-padding);
+            .use-var(padding-right, dialog-android-horizontal-padding);
+            .use-var(font-size, dialog-header-android-font-size);
+            .use-var(line-height, dialog-header-android-line-height);
+        }
+
+        &.ios {
+            .use-var(color, dialog-header-ios-color);
+        }
+    }
+
+    &-footer {
+        display: flex;
+        align-items: center;
+
+        &.android {
+            .use-var(padding-left, dialog-android-horizontal-padding);
+            .use-var(padding-right, dialog-android-horizontal-padding);
+            .use-var(padding-top, dialog-android-body-footer-gutter);
+            .use-var(padding-bottom, dialog-android-vertical-padding);
+            justify-content: flex-end;
+            text-align: right;
+
+            .dialog-footer-button {
+                .use-var(color, dialog-footer-android-color);
+                .use-var(font-size, dialog-footer-android-font-size);
+                .use-var(line-height, dialog-footer-android-line-height);
+
+                &:not(:last-child) {
+                    .use-var(margin-right, dialog-footer-android-button-gutter);
+                }
+            }
+        }
+
+        &.ios {
+            overflow: hidden;
+
+            .dialog-footer-button {
+                display: flex;
+                justify-content: center;
+                align-items: center;
+                .use-var(height, dialog-footer-ios-height);
+                .use-var(font-size, dialog-footer-ios-font-size);
+                .use-var(color, dialog-footer-ios-color);
+            }
+
+            &:not(.collapsed):not(.type-button) {
+                .onepx-border-var(top, line-color);
+
+                .dialog-footer-button {
+                    flex: 1;
+
+                    &:not(:last-child) {
+                        .onepx-border-var(right, line-color);
+                    }
+                }
+            }
+
+            &.collapsed {
+                flex-direction: column;
+
+                .dialog-footer-button {
+                    width: 100%;
+                    .onepx-border-var(top, line-color);
+                }
+            }
+
+            &.type-button {
+                flex-direction: column;
+                .use-var(padding-left, dialog-ios-horizontal-padding);
+                .use-var(padding-right, dialog-ios-horizontal-padding);
+                .use-var(padding-bottom, dialog-ios-vertical-padding);
+
+                .dialog-footer-button {
+                    width: 100%;
+                    .use-var(border-radius, dialog-button-footer-border-radius);
+                    .use-var(height, dialog-button-footer-height);
+
+                    &:first-child {
+                        .use-var(color, dialog-button-footer-primary-color);
+                        .use-var(background, dialog-button-footer-primary-background);
+                    }
+
+                    &:not(:first-child) {
+                        .use-var(color, dialog-button-footer-color);
+                        .use-var(margin-top, dialog-button-footer-gutter);
+                    }
+
+                    &:last-child {
+                        .rem(margin-bottom, -7);
+                    }
+                }
+            }
+        }
+    }
+}

package/cjs/dropdown/demo/style/css/mobile.css

@@ -0,0 +1,5 @@
+.demo-dropdown-option-desc {
+  font-size: 0.32rem;
+  padding: 0.32rem;
+  font-weight: bold;
+}

package/cjs/dropdown/demo/style/mobile.less

@@ -0,0 +1,7 @@
+@import '../../../../style/mixin.less';
+
+.demo-dropdown-option-desc {
+    .rem(font-size, 16);
+    .rem(padding, 16);
+    font-weight: bold;
+}

package/cjs/dropdown/index.d.ts

@@ -0,0 +1,15 @@
+import React from 'react';
+import { DropdownRef } from './type';
+export * from './type';
+declare const _default: React.ForwardRefExoticComponent<(import("./type").DropdownBasicProps & import("./type").SingleOptionProps & React.RefAttributes<DropdownRef>) | (import("./type").DropdownBasicProps & import("./type").MultipleOptionProps & React.RefAttributes<DropdownRef>)> & {
+    Options: React.ForwardRefExoticComponent<(import("./type").DropdownOptionsBasicProps & import("./type").SingleOptionProps & React.RefAttributes<import("./type").DropdownOptionsRef>) | (import("./type").DropdownOptionsBasicProps & import("./type").MultipleOptionProps & React.RefAttributes<import("./type").DropdownOptionsRef>)>;
+};
+/**
+ * 下拉面板，展示供选择的选择项
+ * @en Dropdown panel, showing options to choose from
+ * @type 导航
+ * @type_en Navigation
+ * @name 下拉面板
+ * @name_en Dropdown
+ */
+export default _default;