@arco-design/mobile-react 2.19.0

package/esm/image-preview/methods.d.ts

@@ -0,0 +1,11 @@
+import React from 'react';
+export interface OpenBaseProps {
+    onClose?: () => void;
+    close: (e: any) => void;
+    openIndex: number;
+    images: any[];
+}
+export declare function open<P extends OpenBaseProps>(Component: React.FunctionComponent<P>): (config: Pick<P, Exclude<keyof P, "close">>) => {
+    close: () => void;
+    update: (newConfig: Pick<P, Exclude<keyof P, "close">>) => void;
+};

package/esm/image-preview/methods.js

@@ -0,0 +1,65 @@
+import _extends from "@babel/runtime/helpers/extends";
+import React from 'react';
+import ReactDOM from 'react-dom';
+import { appendElementById, removeElement } from '@arco-design/mobile-utils';
+export function open(Component) {
+  return function (config) {
+    var baseProps = _extends({
+      unmountOnExit: true
+    }, config || {}, {
+      close: function close() {}
+    });
+
+    var dynamicProps = _extends({}, baseProps); // 不同的key用不同的容器挂载
+    // @en Different keys are mounted in different containers
+
+
+    var id = "_ARCO_IMAGE_PREVIEW_DIV_" + (baseProps.key || '') + "_";
+
+    var _appendElementById = appendElementById(id, baseProps.getContainer),
+        div = _appendElementById.child;
+
+    var leaving = false;
+
+    function render(props) {
+      ReactDOM.render( /*#__PURE__*/React.createElement(Component, _extends({}, props, {
+        getContainer: function getContainer() {
+          return div;
+        }
+      })), div);
+    }
+
+    function update(newConfig) {
+      dynamicProps = _extends({}, dynamicProps, newConfig || {});
+      render(dynamicProps);
+    }
+
+    function close() {
+      leaving = true;
+      dynamicProps.openIndex = -1;
+      render(dynamicProps);
+    }
+
+    dynamicProps.close = close;
+
+    dynamicProps.onClose = function () {
+      baseProps.onClose && baseProps.onClose();
+
+      if (baseProps.unmountOnExit) {
+        removeElement(div);
+      }
+    };
+
+    dynamicProps.openIndex = -1;
+    render(dynamicProps);
+    setTimeout(function () {
+      if (leaving) return;
+      dynamicProps.openIndex = baseProps.openIndex;
+      render(dynamicProps);
+    }, 20);
+    return {
+      close: close,
+      update: update
+    };
+  };
+}

package/esm/image-preview/style/css/index.css

@@ -0,0 +1,118 @@
+.arco-image-preview,
+.image-preview-lock-modal {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  z-index: 1000;
+}
+.image-preview-lock-modal {
+  -webkit-transform: translateZ(2PX);
+          transform: translateZ(2PX);
+}
+.arco-image-preview {
+  background:  rgba(0, 0, 0, 0.9) ;
+}
+.arco-image-preview.noselect {
+  -webkit-touch-callout: none;
+  /* iOS Safari */
+  -webkit-user-select: none;
+  /* Chrome/Safari/Opera */
+  /* Konqueror */
+  /* Firefox */
+  /* Internet Explorer/Edge */
+  user-select: none;
+  /* Non-prefixed version, currently*/
+}
+.arco-image-preview .preview-image-wrap {
+  width: 100%;
+  height: 100%;
+}
+.arco-image-preview .arco-carousel-wrap,
+.arco-image-preview .arco-carousel,
+.arco-image-preview .arco-carousel-inner {
+  height: 100%;
+}
+.arco-image-preview .carousel-item {
+  overflow: hidden;
+}
+.arco-image-preview .carousel-item::-webkit-scrollbar {
+  display: none;
+}
+.arco-image-preview .preview-image {
+  width: 100%;
+  height: 100%;
+  will-change: transform;
+}
+.arco-image-preview .preview-image.preview-hidden {
+  pointer-events: none;
+}
+.arco-image-preview .preview-image.preview-hidden .image-container {
+  visibility: hidden;
+}
+.arco-image-preview .preview-image .image-bottom-overlap {
+  overflow: visible;
+}
+.image-preview-indicator {
+  width: 100%;
+  left: 0;
+  bottom: 0;
+  z-index: 1003;
+  position: fixed;
+  box-sizing: border-box;
+  font-size:  0.28rem ;
+  color:  #ffffff ;
+  padding:  0.24rem 0.4rem ;
+  background:  -webkit-linear-gradient(top, transparent, rgba(0, 0, 0, 0.3)) ;
+  background:  linear-gradient(to bottom, transparent, rgba(0, 0, 0, 0.3)) ;
+}
+.image-preview-fake-rect {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  opacity: 0;
+}
+.image-preview-fake-trans-image {
+  position: fixed;
+  left: 0;
+  top: 0;
+  object-fit: cover;
+  -webkit-transition:  all cubic-bezier(0.34, 0.69, 0.1, 1) ;
+  transition:  all cubic-bezier(0.34, 0.69, 0.1, 1) ;
+  will-change: transform;
+  pointer-events: none;
+  z-index: 1001;
+}
+.image-preview-loading-area {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  z-index: 1010;
+  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: none;
+}
+.image-preview-loading-area .loading-icon .bg-color-with-config {
+  background: #ffffff;
+}
+.image-preview-loading-area .loading-icon .stop-color-with-config {
+  stop-color: #ffffff;
+}
+.image-preview-loading-area .loading-icon .fill-color-with-config {
+  fill: #ffffff;
+}
+.image-preview-loading-area .loading-icon .stroke-color-with-config {
+  stroke: #ffffff;
+}

package/esm/image-preview/style/css/index.d.ts

@@ -0,0 +1,5 @@
+import '../../../../style/css/public.css';
+import '../../../transition/style/css';
+import '../../../carousel/style/css';
+import '../../../image/style/css';
+import './index.css';

package/esm/image-preview/style/css/index.js

@@ -0,0 +1,5 @@
+import '../../../../style/css/public.css';
+import '../../../transition/style/css';
+import '../../../carousel/style/css';
+import '../../../image/style/css';
+import './index.css';

package/esm/image-preview/style/index.d.ts

@@ -0,0 +1,5 @@
+import '../../../style/public.less';
+import '../../transition/style';
+import '../../carousel/style';
+import '../../image/style';
+import './index.less';

package/esm/image-preview/style/index.js

@@ -0,0 +1,5 @@
+import '../../../style/public.less';
+import '../../transition/style';
+import '../../carousel/style';
+import '../../image/style';
+import './index.less';

package/esm/image-preview/style/index.less

@@ -0,0 +1,98 @@
+@import "../../../style/mixin.less";
+
+.@{prefix}-image-preview,
+.image-preview-lock-modal {
+    .full-screen();
+    z-index: @full-screen-z-index;
+}
+
+.image-preview-lock-modal {
+    transform: translateZ(2PX);
+}
+
+.@{prefix}-image-preview {
+    .use-var(background, image-preview-mask-background);
+
+    &.noselect {
+        -webkit-touch-callout: none;
+        .noselect();
+    }
+
+    .preview-image-wrap {
+        width: 100%;
+        height: 100%;
+    }
+    .@{prefix}-carousel-wrap,
+    .@{prefix}-carousel,
+    .@{prefix}-carousel-inner {
+        height: 100%;
+    }
+
+    .carousel-item {
+        overflow: hidden;
+
+        &::-webkit-scrollbar {
+            display: none;
+        }
+    }
+
+    .preview-image {
+        width: 100%;
+        height: 100%;
+        will-change: transform;
+
+        &.preview-hidden {
+            pointer-events: none;
+
+            .image-container {
+                visibility: hidden;
+            }
+        }
+
+        .image-bottom-overlap {
+            overflow: visible;
+        }
+    }
+}
+
+.image-preview-indicator {
+    width: 100%;
+    left: 0;
+    bottom: 0;
+    z-index: @full-screen-z-index + 3;
+    position: fixed;
+    box-sizing: border-box;
+    .use-var(font-size, image-preview-indicator-font-size);
+    .use-var(color, mask-content-color);
+    .use-var(padding, image-preview-indicator-padding);
+    .use-var(background, image-preview-indicator-background);
+}
+
+.image-preview-fake-rect {
+    .full-screen();
+    opacity: 0;
+}
+
+.image-preview-fake-trans-image {
+    position: fixed;
+    left: 0;
+    top: 0;
+    object-fit: cover;
+    .use-var(transition, image-preview-thumb-transition);
+    will-change: transform;
+    pointer-events: none;
+    z-index: @full-screen-z-index + 1;
+}
+
+.image-preview-loading-area {
+    .full-screen();
+    z-index: @full-screen-z-index + 10;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    pointer-events: none;
+
+    .loading-icon {
+        .set-loading-color-var(mask-content-color);
+    }
+}

package/esm/index.d.ts

@@ -0,0 +1,49 @@
+export { default as ActionSheet } from './action-sheet';
+export { default as Cell } from './cell';
+export { default as Loading } from './loading';
+export { default as Badge } from './badge';
+export { default as Avatar } from './avatar';
+export { default as Button } from './button';
+export { default as Carousel } from './carousel';
+export { default as Toast } from './toast';
+export { default as Switch } from './switch';
+export { default as Checkbox } from './checkbox';
+export { default as CircleProgress } from './circle-progress';
+export { default as Collapse } from './collapse';
+export { default as Tabs } from './tabs';
+export { default as ContextProvider } from './context-provider';
+export { default as Dialog } from './dialog';
+export { default as CountDown } from './count-down';
+export { default as DatePicker } from './date-picker';
+export { default as Dropdown } from './dropdown';
+export { default as DropdownMenu } from './dropdown-menu';
+export { default as Ellipsis } from './ellipsis';
+export { default as Grid } from './grid';
+export { default as Image } from './image';
+export { default as ShowMonitor } from './show-monitor';
+export { default as ImagePreview } from './image-preview';
+export { default as Input } from './input';
+export { default as LoadMore } from './load-more';
+export { default as Masking } from './masking';
+export { default as NavBar } from './nav-bar';
+export { default as NoticeBar } from './notice-bar';
+export { default as Notify } from './notify';
+export { default as Pagination } from './pagination';
+export { default as Picker } from './picker';
+export { default as PickerView } from './picker-view';
+export { default as Popover } from './popover';
+export { default as Popup } from './popup';
+export { default as PopupSwiper } from './popup-swiper';
+export { default as Portal } from './portal';
+export { default as Progress } from './progress';
+export { default as PullRefresh } from './pull-refresh';
+export { default as Radio } from './radio';
+export { default as Rate } from './rate';
+export { default as Slider } from './slider';
+export { default as Steps } from './steps';
+export { default as Sticky } from './sticky';
+export { default as SwipeLoad } from './swipe-load';
+export { default as TabBar } from './tab-bar';
+export { default as Tag } from './tag';
+export { default as Textarea } from './textarea';
+export { default as Transition } from './transition';

package/esm/index.js

@@ -0,0 +1,49 @@
+export { default as ActionSheet } from './action-sheet';
+export { default as Cell } from './cell';
+export { default as Loading } from './loading';
+export { default as Badge } from './badge';
+export { default as Avatar } from './avatar';
+export { default as Button } from './button';
+export { default as Carousel } from './carousel';
+export { default as Toast } from './toast';
+export { default as Switch } from './switch';
+export { default as Checkbox } from './checkbox';
+export { default as CircleProgress } from './circle-progress';
+export { default as Collapse } from './collapse';
+export { default as Tabs } from './tabs';
+export { default as ContextProvider } from './context-provider';
+export { default as Dialog } from './dialog';
+export { default as CountDown } from './count-down';
+export { default as DatePicker } from './date-picker';
+export { default as Dropdown } from './dropdown';
+export { default as DropdownMenu } from './dropdown-menu';
+export { default as Ellipsis } from './ellipsis';
+export { default as Grid } from './grid';
+export { default as Image } from './image';
+export { default as ShowMonitor } from './show-monitor';
+export { default as ImagePreview } from './image-preview';
+export { default as Input } from './input';
+export { default as LoadMore } from './load-more';
+export { default as Masking } from './masking';
+export { default as NavBar } from './nav-bar';
+export { default as NoticeBar } from './notice-bar';
+export { default as Notify } from './notify';
+export { default as Pagination } from './pagination';
+export { default as Picker } from './picker';
+export { default as PickerView } from './picker-view';
+export { default as Popover } from './popover';
+export { default as Popup } from './popup';
+export { default as PopupSwiper } from './popup-swiper';
+export { default as Portal } from './portal';
+export { default as Progress } from './progress';
+export { default as PullRefresh } from './pull-refresh';
+export { default as Radio } from './radio';
+export { default as Rate } from './rate';
+export { default as Slider } from './slider';
+export { default as Steps } from './steps';
+export { default as Sticky } from './sticky';
+export { default as SwipeLoad } from './swipe-load';
+export { default as TabBar } from './tab-bar';
+export { default as Tag } from './tag';
+export { default as Textarea } from './textarea';
+export { default as Transition } from './transition';

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

@@ -0,0 +1,67 @@
+#demo-input {
+  padding-bottom: 0.9rem;
+}
+#demo-input .arcodesign-mobile-demo-content {
+  padding: 0;
+  background: transparent;
+}
+#demo-input .arco-input-container {
+  background:  #ffffff ;
+}
+#demo-input .arco-input-container:not(:first-of-type) {
+  margin-top: 0.16rem;
+}
+#demo-input .demo-input-maxlength {
+  font-size: 0.28rem;
+  color: #86909c;
+}
+#demo-input .demo-input-maxlength.error {
+  color: #f53f3f;
+}
+#demo-input .demo-input-red-placeholder {
+  caret-color: #f53f3f;
+}
+#demo-input .demo-input-red-placeholder::-webkit-input-placeholder {
+  color: #f53f3f;
+}
+#demo-input .demo-input-red-placeholder::placeholder {
+  color: #f53f3f;
+}
+#demo-input .demo-input-error-hint {
+  font-size: 0.24rem;
+  color: #f53f3f;
+  padding: 0 0 0.32rem 2.08rem;
+  margin-top: -0.16rem;
+}
+#demo-input .demo-input-error-hint svg,
+#demo-input .demo-input-error-hint span {
+  vertical-align: middle;
+}
+#demo-input .demo-input-error-hint svg {
+  margin-right: 0.08rem;
+}
+#demo-input .demo-input-icon {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: flex;
+  -webkit-box-align: center;
+  -webkit-align-items: center;
+          align-items: center;
+}
+#demo-input .demo-input-title {
+  font-size: 0.26rem;
+  line-height: 0.36rem;
+  margin-bottom: -0.16rem;
+  padding: 0.32rem 0 0 0.32rem;
+}
+#demo-input .demo-input-btn-input .arco-input-wrap {
+  height: auto;
+}
+#demo-input .demo-input-btn-wrap {
+  padding: 0.22rem 0;
+}
+#demo-input .demo-input-money {
+  font-size: 0.4rem;
+  font-weight: bold;
+  margin-right: -0.24rem;
+}

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

@@ -0,0 +1,75 @@
+@import "../../../../style/mixin.less";
+
+#demo-input {
+    .rem(padding-bottom, 45);
+
+    .arcodesign-mobile-demo-content {
+        padding: 0;
+        background: transparent;
+    }
+    .@{prefix}-input-container {
+        .use-var(background, background-color);
+
+        &:not(:first-of-type) {
+            .rem(margin-top, 8);
+        }
+    }
+
+    .demo-input-maxlength {
+        .rem(font-size, 14);
+        color: #86909c;
+
+        &.error {
+            color: #f53f3f;
+        }
+    }
+
+    .demo-input-red-placeholder {
+        caret-color: #f53f3f;
+
+        &::placeholder {
+            color: #f53f3f;
+        }
+    }
+
+    .demo-input-error-hint {
+        .rem(font-size, 12);
+        color: #f53f3f;
+        .rem(padding, 0, 0, 16, 104);
+        .rem(margin-top, -8);
+
+        svg,
+        span {
+            vertical-align: middle;
+        }
+
+        svg {
+            .rem(margin-right, 4);
+        }
+    }
+
+    .demo-input-icon {
+        display: flex;
+        align-items: center;
+    }
+
+    .demo-input-title {
+        .rem(font-size, 13);
+        .rem(line-height, 18);
+        .rem(margin-bottom, -8);
+        .rem(padding, 16, 0, 0, 16);
+    }
+    .demo-input-btn-input .@{prefix}-input-wrap {
+        height: auto;
+    }
+
+    .demo-input-btn-wrap {
+        .rem(padding, 11, 0);
+    }
+
+    .demo-input-money {
+        .rem(font-size, 20);
+        font-weight: bold;
+        .rem(margin-right, -12);
+    }
+}

package/esm/input/hooks.d.ts

@@ -0,0 +1,14 @@
+import React, { ReactNode } from 'react';
+import { BasicInputProps } from './props';
+export declare type InputEleType = HTMLInputElement | HTMLTextAreaElement;
+export declare function useInputLogic(props: BasicInputProps<InputEleType>, inputRef: React.MutableRefObject<InputEleType | null>): {
+    inputValue: string;
+    handleChange: (e: React.ChangeEvent<InputEleType>) => void;
+    handleInput: (e: any) => void;
+    handleKeyDown: (e: React.KeyboardEvent<InputEleType>) => void;
+    handleFocus: (e: React.FocusEvent<InputEleType>) => void;
+    handleBlur: (e: React.FocusEvent<InputEleType>) => void;
+    handleClick: (e: React.MouseEvent<InputEleType>) => void;
+    renderWrapper: (prefixCls: string, type: string, children: ReactNode) => JSX.Element;
+    wrapRef: React.MutableRefObject<HTMLDivElement | null>;
+};