@arco-design/mobile-react 2.19.0

package/tokens/mixin/index.less

@@ -0,0 +1,99 @@
+@import '~@arco-design/mobile-utils/style/mixin.less';
+@import './vars-switch.less';
+@import './pxtorem.less';
+
+.rem (@property; @values...) {
+    @{property}: ~`(function () {
+        var baseFontSize=@{base-font-size};
+        var sizeList = @{values};
+        if (!Array.isArray(sizeList)) {
+            sizeList = [sizeList];
+        }
+        return sizeList.map(function (item) {
+            return pxtorem(item);
+        }).join(' ');
+    }())`;
+}
+
+// for hack dark mode
+.use-dark-mode-query(@rules) {
+    & when (@use-dark-mode = 1) {
+        @media (prefers-color-scheme: dark) {
+            @rules();
+        }
+    }
+}
+
+.use-var(@property, @variables, @preValues: '', @nextValues: '') {
+    @{property}: ~"@{preValues}" @@variables ~"@{nextValues}";
+    & when (@use-css-vars = 1) {
+        @{property}: ~"@{preValues}" ~"var(--@{variables})" ~"@{nextValues}";
+    }
+}
+
+.hairline-var(@color, @direction: all) {
+    .hairline(@@color, @direction);
+    & when (@use-css-vars = 1) {
+        .hairline(var(~"--@{color}", @@color), @direction);
+    }
+}
+
+.text-medium-var(@color, @stroke: 0.3PX) {
+    .text-medium(@@color, @stroke);
+    & when (@use-css-vars = 1) {
+        .text-medium(var(~"--@{color}", @@color), @stroke);
+    }
+}
+
+.onepx-border-var(@direction, @borderColor, @borderRadius: 0, @borderWidth: 1PX, @borderStyle: solid) {
+    .onepx-border(@direction, @@borderColor, @borderRadius, @borderWidth, @borderStyle);
+    & when (@use-css-vars = 1) {
+        .onepx-border(@direction, var(~"--@{borderColor}", @@borderColor), @borderRadius, @borderWidth, @borderStyle);
+    }
+}
+
+.hairline-bottom-right-var(@color) {
+    .hairline-bottom-right(@@color);
+    & when (@use-css-vars = 1) {
+        .hairline-bottom-right(var(~"--@{color}", @@color));
+    }
+}
+
+.hairline-top-left-var(@color) {
+    .hairline-top-left(@@color);
+    & when (@use-css-vars = 1) {
+        .hairline-top-left(var(~"--@{color}", @@color));
+    }
+}
+
+.set-loading-color-var(@color) {
+    .set-loading-color(@@color);
+    & when (@use-css-vars = 1) {
+        .set-loading-color(var(~"--@{color}", @@color));
+    }
+}
+
+.set-font-size-var(@size, @scale: 0.9) {
+    & when not (@use-css-vars = 1) {
+        .set-font-size(@@size);
+    }
+    & when (@use-css-vars = 1) {
+        & when (@@size < 12PX) {
+            font-size: calc(var(~"--@{size}", @@size) / @scale);
+            transform: scale(@scale);
+        }
+        & when not (@@size < 12PX) {
+            font-size: var(~"--@{size}", @@size);
+        }
+    }
+}
+
+.set-content-box-width-var(@property, @width, @padding-left, @padding-right) {
+    & when not (@use-css-vars = 1) {
+        .set-content-box-width(@property, @@width, @@padding-left, @@padding-right);
+    }
+    & when (@use-css-vars = 1) {
+        @{property}: calc(var(~"--@{width}", @@width) - var(~"--@{padding-left}", @@padding-left) - var(~"--@{padding-right}", @@padding-right));
+    }
+}
+

package/tokens/mixin/pxtorem.less

@@ -0,0 +1,13 @@
+@import './vars-switch.less';
+
+@pxtorem: ~`pxtorem = function(value) {
+    var useRem = @{use-rem};
+    var baseFontSize = @{base-font-size};
+    if (value === 0) {
+      return 0;
+    }
+    if (typeof value === 'number') {
+      return Number(useRem) === 0 ? value + 'px' : Math.round(value / baseFontSize * 1000000) / 1000000 + 'rem';
+    }
+    return value;
+}`;

package/tokens/mixin/vars-switch.less

@@ -0,0 +1,3 @@
+@use-css-vars: 0;
+@use-dark-mode: 1;
+@use-rem: 1;

package/tools/flexible.d.ts

@@ -0,0 +1,3 @@
+declare function setRootPixel(base?: number, sketch?: number, max?: number): () => void;
+
+export default setRootPixel;

package/tools/flexible.js

@@ -0,0 +1,82 @@
+"use strict";
+
+function setRootPixel(base, sketch, max) {
+    var baseFontSize = base || 50;
+    var sketchWidth = sketch || 375;
+    var maxFontSize = max || 64;
+    var defaultFontSize = 0;
+
+    function getDefaultFontSize() {
+        if (defaultFontSize) {
+            return defaultFontSize;
+        }
+
+        document.documentElement.style.fontSize = '';
+        var temp = document.createElement('div');
+        temp.style.cssText = 'width:1rem;display:none';
+        document.head.appendChild(temp);
+        defaultFontSize = +window.getComputedStyle(temp, null).getPropertyValue('width').replace('px', '') || 16;
+        document.head.removeChild(temp);
+        return defaultFontSize;
+    }
+
+    function getQuery(name) {
+        return (new RegExp("[?&]".concat(name, "=([^&#\\b]+)")).exec(location.search || '') || [])[1];
+    }
+
+    function setRootFontSize() {
+        var widthQueryKey = '';
+        var rem2px = baseFontSize;
+        var clientWidth;
+
+        if (widthQueryKey && +getQuery(widthQueryKey)) {
+            clientWidth = +getQuery(widthQueryKey);
+        } else {
+            clientWidth = window.innerWidth && document.documentElement.clientWidth
+                ? Math.min(window.innerWidth, document.documentElement.clientWidth)
+                : window.innerWidth
+                    || document.documentElement.clientWidth
+                    || document.body && document.body.clientWidth
+                    || sketchWidth;
+        }
+        var htmlFontSizePx = clientWidth / sketchWidth * rem2px;
+        htmlFontSizePx = Math.min(htmlFontSizePx, maxFontSize);
+        window.ROOT_FONT_SIZE = htmlFontSizePx;
+        document.documentElement.style.fontSize = "".concat(htmlFontSizePx / getDefaultFontSize() * 100, "%");
+    }
+
+    function adjust(immediate) {
+        if (immediate) {
+            setRootFontSize();
+            return;
+        }
+
+        setTimeout(setRootFontSize, 30);
+    }
+
+    function removeRootPixel() {
+        document.documentElement.style.fontSize = '';
+        window.removeEventListener('resize', adjust, false);
+        if ('onorientationchange' in window) {
+            window.removeEventListener('orientationchange', adjust, false);
+        }
+    }
+
+    if (window.isResponsive === false) {
+        document.documentElement.style.fontSize = "".concat(baseFontSize, "px");
+        return function () {
+            document.documentElement.style.fontSize = '';
+        };
+    }
+
+    adjust(true);
+    window.addEventListener('resize', adjust, false);
+
+    if ('onorientationchange' in window) {
+        window.addEventListener('orientationchange', adjust, false);
+    }
+
+    return removeRootPixel;
+}
+
+module.exports = setRootPixel;

package/tools/touch2mouse.js

@@ -0,0 +1,384 @@
+/**
+ * TouchEmulator
+ * https://github.com/hammerjs/touchemulator
+ *
+ * We rewrite TouchEmulator to adapt to the situation when the page is embedded in iframe.
+ */
+(function(window, document, exportName, undefined) {
+    "use strict";
+
+    var isMultiTouch = false;
+    var isOutsideMovein = false;
+    var multiTouchStartPos;
+    var eventTarget;
+    var touchElements = {};
+
+    // polyfills
+    if(!document.createTouch) {
+        document.createTouch = function(view, target, identifier, pageX, pageY, screenX, screenY, clientX, clientY) {
+            // auto set
+            if(clientX == undefined || clientY == undefined) {
+                clientX = pageX - window.pageXOffset;
+                clientY = pageY - window.pageYOffset;
+            }
+
+            return new Touch(target, identifier, {
+                pageX: pageX,
+                pageY: pageY,
+                screenX: screenX,
+                screenY: screenY,
+                clientX: clientX,
+                clientY: clientY
+            });
+        };
+    }
+
+    if(!document.createTouchList) {
+        document.createTouchList = function() {
+            var touchList = new TouchList();
+            for (var i = 0; i < arguments.length; i++) {
+                touchList[i] = arguments[i];
+            }
+            touchList.length = arguments.length;
+            return touchList;
+        };
+    }
+
+    /**
+     * create an touch point
+     * @constructor
+     * @param target
+     * @param identifier
+     * @param pos
+     * @param deltaX
+     * @param deltaY
+     * @returns {Object} touchPoint
+     */
+    function Touch(target, identifier, pos, deltaX, deltaY) {
+        deltaX = deltaX || 0;
+        deltaY = deltaY || 0;
+
+        this.identifier = identifier;
+        this.target = target;
+        this.clientX = pos.clientX + deltaX;
+        this.clientY = pos.clientY + deltaY;
+        this.screenX = pos.screenX + deltaX;
+        this.screenY = pos.screenY + deltaY;
+        this.pageX = pos.pageX + deltaX;
+        this.pageY = pos.pageY + deltaY;
+    }
+
+    /**
+     * create empty touchlist with the methods
+     * @constructor
+     * @returns touchList
+     */
+    function TouchList() {
+        var touchList = [];
+
+        touchList.item = function(index) {
+            return this[index] || null;
+        };
+
+        // specified by Mozilla
+        touchList.identifiedTouch = function(id) {
+            return this[id + 1] || null;
+        };
+
+        return touchList;
+    }
+
+
+    /**
+     * Simple trick to fake touch event support
+     * this is enough for most libraries like Modernizr and Hammer
+     */
+    function fakeTouchSupport() {
+        var objs = [window, document.documentElement];
+        var props = ['ontouchstart', 'ontouchmove', 'ontouchcancel', 'ontouchend'];
+
+        for(var o=0; o<objs.length; o++) {
+            for(var p=0; p<props.length; p++) {
+                if(objs[o] && objs[o][props[p]] == undefined) {
+                    objs[o][props[p]] = null;
+                }
+            }
+        }
+    }
+
+    /**
+     * we don't have to emulate on a touch device
+     * @returns {boolean}
+     */
+    function hasTouchSupport() {
+        return ("ontouchstart" in window) || // touch events
+               (window.Modernizr && window.Modernizr.touch) || // modernizr
+               (navigator.msMaxTouchPoints || navigator.maxTouchPoints) > 2; // pointer events
+    }
+
+    /**
+     * disable mouseevents on the page
+     * @param ev
+     */
+    function preventMouseEvents(ev) {
+        ev.preventDefault();
+        ev.stopPropagation();
+    }
+
+    /**
+     * only trigger touches when the left mousebutton has been pressed
+     * @param touchType
+     * @returns {Function}
+     */
+    function onMouse(touchType) {
+        return function(ev) {
+
+            if (ev.type === 'mousedown' || ev.type === 'mouseup') {
+                isOutsideMovein = false;
+            }
+
+            if (TouchEmulator.ignoreTags.indexOf(ev.target.tagName) < 0) {
+                // prevent mouse events
+                preventMouseEvents(ev);
+            }
+
+            if (ev.which !== 1) {
+                return;
+            }
+
+            // The EventTarget on which the touch point started when it was first placed on the surface,
+            // even if the touch point has since moved outside the interactive area of that element.
+            // also, when the target doesnt exist anymore, we update it
+            if (ev.type == 'mousedown' || !eventTarget || (eventTarget && !eventTarget.dispatchEvent)) {
+                eventTarget = ev.target;
+            }
+
+            if (ev.type === 'mousemove' && isOutsideMovein) {
+                return;
+            }
+
+            // shiftKey has been lost, so trigger a touchend
+            if (isMultiTouch && !ev.shiftKey) {
+                triggerTouch('touchend', ev);
+                isMultiTouch = false;
+            }
+
+            triggerTouch(touchType, ev);
+
+            // we're entering the multi-touch mode!
+            if (!isMultiTouch && ev.shiftKey) {
+                isMultiTouch = true;
+                multiTouchStartPos = {
+                    pageX: ev.pageX,
+                    pageY: ev.pageY,
+                    clientX: ev.clientX,
+                    clientY: ev.clientY,
+                    screenX: ev.screenX,
+                    screenY: ev.screenY
+                };
+                triggerTouch('touchstart', ev);
+            }
+
+            // reset
+            if (ev.type == 'mouseup') {
+                multiTouchStartPos = null;
+                isMultiTouch = false;
+                eventTarget = null;
+            }
+        }
+    }
+
+    function onMouseOut(ev) {
+        preventMouseEvents(ev);
+
+        if (eventTarget) {
+            isOutsideMovein = true;
+            triggerTouch("touchend", ev);
+            eventTarget = null;
+        }
+    }
+
+    /**
+     * trigger a touch event
+     * @param eventName
+     * @param mouseEv
+     */
+    function triggerTouch(eventName, mouseEv) {
+        var touchEvent = document.createEvent('Event');
+        touchEvent.initEvent(eventName, true, true);
+
+        touchEvent.altKey = mouseEv.altKey;
+        touchEvent.ctrlKey = mouseEv.ctrlKey;
+        touchEvent.metaKey = mouseEv.metaKey;
+        touchEvent.shiftKey = mouseEv.shiftKey;
+
+        touchEvent.touches = getActiveTouches(mouseEv, eventName);
+        touchEvent.targetTouches = getActiveTouches(mouseEv, eventName);
+        touchEvent.changedTouches = getChangedTouches(mouseEv, eventName);
+
+        eventTarget.dispatchEvent(touchEvent);
+    }
+
+    /**
+     * create a touchList based on the mouse event
+     * @param mouseEv
+     * @returns {TouchList}
+     */
+    function createTouchList(mouseEv) {
+        var touchList = new TouchList();
+
+        if (isMultiTouch) {
+            var f = TouchEmulator.multiTouchOffset;
+            var deltaX = multiTouchStartPos.pageX - mouseEv.pageX;
+            var deltaY = multiTouchStartPos.pageY - mouseEv.pageY;
+
+            touchList.push(new Touch(eventTarget, 1, multiTouchStartPos, (deltaX*-1) - f, (deltaY*-1) + f));
+            touchList.push(new Touch(eventTarget, 2, multiTouchStartPos, deltaX+f, deltaY-f));
+        } else {
+            touchList.push(new Touch(eventTarget, 1, mouseEv, 0, 0));
+        }
+
+        return touchList;
+    }
+
+    /**
+     * receive all active touches
+     * @param mouseEv
+     * @returns {TouchList}
+     */
+    function getActiveTouches(mouseEv, eventName) {
+        // empty list
+        if (mouseEv.type == 'mouseup') {
+            return new TouchList();
+        }
+
+        var touchList = createTouchList(mouseEv);
+        if(isMultiTouch && mouseEv.type != 'mouseup' && eventName == 'touchend') {
+            touchList.splice(1, 1);
+        }
+        return touchList;
+    }
+
+    /**
+     * receive a filtered set of touches with only the changed pointers
+     * @param mouseEv
+     * @param eventName
+     * @returns {TouchList}
+     */
+    function getChangedTouches(mouseEv, eventName) {
+        var touchList = createTouchList(mouseEv);
+
+        // we only want to return the added/removed item on multitouch
+        // which is the second pointer, so remove the first pointer from the touchList
+        //
+        // but when the mouseEv.type is mouseup, we want to send all touches because then
+        // no new input will be possible
+        if(isMultiTouch && mouseEv.type != 'mouseup' &&
+            (eventName == 'touchstart' || eventName == 'touchend')) {
+            touchList.splice(0, 1);
+        }
+
+        return touchList;
+    }
+
+    /**
+     * show the touchpoints on the screen
+     */
+    function showTouches(ev) {
+        var touch, i, el, styles;
+
+        // first all visible touches
+        for(i = 0; i < ev.touches.length; i++) {
+            touch = ev.touches[i];
+            el = touchElements[touch.identifier];
+            if(!el) {
+                el = touchElements[touch.identifier] = document.createElement("div");
+                document.body.appendChild(el);
+            }
+
+            styles = TouchEmulator.template(touch);
+            for(var prop in styles) {
+                el.style[prop] = styles[prop];
+            }
+        }
+
+        // remove all ended touches
+        if(ev.type == 'touchend' || ev.type == 'touchcancel') {
+            for(i = 0; i < ev.changedTouches.length; i++) {
+                touch = ev.changedTouches[i];
+                el = touchElements[touch.identifier];
+                if(el) {
+                    el.parentNode.removeChild(el);
+                    delete touchElements[touch.identifier];
+                }
+            }
+        }
+    }
+
+    /**
+     * TouchEmulator initializer
+     */
+    function TouchEmulator() {
+        if (hasTouchSupport()) {
+            return;
+        }
+
+        fakeTouchSupport();
+
+        window.addEventListener("mousedown", onMouse('touchstart'), true);
+        window.addEventListener("mousemove", onMouse('touchmove'), true);
+        window.addEventListener("mouseup", onMouse('touchend'), true);
+
+        window.addEventListener("mouseenter", preventMouseEvents, true);
+        window.addEventListener("mouseleave", preventMouseEvents, true);
+        window.addEventListener("mouseout", onMouseOut, true);
+        window.addEventListener("mouseover", preventMouseEvents, true);
+
+    }
+
+    // start distance when entering the multitouch mode
+    TouchEmulator.multiTouchOffset = 75;
+
+    // tags that shouldn't swallow mouse events
+    TouchEmulator.ignoreTags = ['TEXTAREA', 'INPUT', 'SELECT'];
+
+    /**
+     * css template for the touch rendering
+     * @param touch
+     * @returns object
+     */
+    TouchEmulator.template = function(touch) {
+        var size = 30;
+        var transform = 'translate('+ (touch.clientX-(size/2)) +'px, '+ (touch.clientY-(size/2)) +'px)';
+        return {
+            position: 'fixed',
+            left: 0,
+            top: 0,
+            background: '#fff',
+            border: 'solid 1px #999',
+            opacity: .6,
+            borderRadius: '100%',
+            height: size + 'px',
+            width: size + 'px',
+            padding: 0,
+            margin: 0,
+            display: 'block',
+            overflow: 'hidden',
+            pointerEvents: 'none',
+            webkitUserSelect: 'none',
+            mozUserSelect: 'none',
+            userSelect: 'none',
+            webkitTransform: transform,
+            mozTransform: transform,
+            transform: transform,
+            zIndex: 100
+        }
+    };
+
+    // throw showTouches out
+    TouchEmulator.showTouches = showTouches;
+
+    window[exportName] = TouchEmulator;
+
+    TouchEmulator();
+})(window, document, "TouchEmulator");

package/umd/_helpers/hooks.d.ts

@@ -0,0 +1,43 @@
+/**
+ * @type hooks
+ * @name 公共hooks
+ * @name_en General Hooks
+ */
+import React from 'react';
+import { BezierType } from '../progress';
+export declare function useListenResize(resizeHandler: () => void, deps?: any[], needListen?: boolean): void;
+/**
+ * useState自定义封装，统一处理在组件卸载后还使用setState的行为
+ * tips：在unmount后有异步处理未完成的场景使用，不推荐无脑替换useState
+ * @desc {en} Custom encapsulation of useState, uniformly handle the behavior of using setState after the component is unloaded
+ * @desc {en} Tips: Use in scenarios where asynchronous processing is not completed after unmount. It is not recommended to replace useState without brains
+ * @param initialState 初始状态
+ * @param initialState {en} Initial State
+ */
+export declare function useMountedState<S>(initialState: S | (() => S)): [S, React.Dispatch<React.SetStateAction<S>>];
+export declare function useRefState<T>(initialValue: T | (() => T)): [T, React.MutableRefObject<T>, React.Dispatch<React.SetStateAction<T>>];
+export declare function useRefMountedState<T>(initialValue: T | (() => T)): [T, React.MutableRefObject<T>, React.Dispatch<React.SetStateAction<T>>];
+export declare function useUpdateEffect(effect: () => void | (() => void), dependencies?: any[]): void;
+export declare function useForceUpdate(): () => void;
+export declare function useLatestRef<T>(variable: T): React.MutableRefObject<T>;
+export declare function useSystem(): "" | "android" | "ios" | "pc";
+export declare function useWindowSize(listenResize?: boolean): {
+    windowWidth: number;
+    windowHeight: number;
+};
+export interface PopupScrollRefType {
+    ele: HTMLElement;
+    maxScrollX: number;
+    maxScrollY: number;
+}
+export declare function usePopupScroll(visible: boolean, popupDom: HTMLDivElement | null, getScrollContainer?: () => (HTMLElement | null)[] | HTMLElement | null, orientationDirection?: 'top' | 'bottom' | 'left' | 'right', preventCallback?: (e: TouchEvent, direction: 'x' | 'y') => void, onTouchMove?: (e: TouchEvent, prevented: boolean, direction: 'x' | 'y') => void, gestureOutOfControl?: boolean): void;
+export declare function useSwiperInnerScroll(getInnerScrollContainer?: () => (HTMLElement | null)[] | HTMLElement | null): void;
+export declare function useAddListener(dom: HTMLDivElement | null, event: string, handler: any, options?: {
+    capture: boolean;
+}): void;
+export declare function usePreventBodyScroll(visible: boolean, preventBodyScroll: boolean, initialBodyOverflow?: string): void;
+export declare const useProgress: (mountedTransition: boolean, percentage: number, duration: number, mountedBezier: BezierType, step: number) => [number, boolean];
+export declare function useSingleAndDoubleClick(onClick: (e: React.MouseEvent) => void, onDoubleClick: (e: React.MouseEvent) => void, delay?: number): (e: React.MouseEvent) => void;
+export declare function useGenSvgKey(userSetSvgKey: string): {
+    svgKey: string;
+};