@mpxjs/webpack-plugin 2.9.56 → 2.9.58

package/lib/runtime/components/react/dist/mpx-input.jsx

@@ -0,0 +1,203 @@
+/**
+ * ✔ value
+ * - type: Partially. Not support `safe-password`、`nickname`
+ * ✔ password
+ * ✔ placeholder
+ * - placeholder-style: Only support color.
+ * ✘ placeholder-class
+ * ✔ disabled
+ * ✔ maxlength
+ * ✘ cursor-spacing
+ * ✔ auto-focus
+ * ✔ focus
+ * ✔ confirm-type
+ * ✘ always-embed
+ * ✔ confirm-hold
+ * ✔ cursor
+ * ✔ cursor-color
+ * ✔ selection-start
+ * ✔ selection-end
+ * ✘ adjust-position
+ * ✘ hold-keyboard
+ * ✘ safe-password-cert-path
+ * ✘ safe-password-length
+ * ✘ safe-password-time-stamp
+ * ✘ safe-password-nonce
+ * ✘ safe-password-salt
+ * ✘ safe-password-custom-hash
+ * - bindinput: No `keyCode` info.
+ * - bindfocus: No `height` info.
+ * - bindblur: No `encryptedValue`、`encryptError` info.
+ * ✔ bindconfirm
+ * ✘ bindkeyboardheightchange
+ * ✘ bindnicknamereview
+ * ✔ bind:selectionchange
+ * ✘ bind:keyboardcompositionstart
+ * ✘ bind:keyboardcompositionupdate
+ * ✘ bind:keyboardcompositionend
+ * ✘ bind:onkeyboardheightchange
+ */
+import React, { forwardRef, useMemo, useRef, useState } from 'react';
+import { Platform, TextInput } from 'react-native';
+import { parseInlineStyle, useUpdateEffect } from './utils';
+import useInnerProps, { getCustomEvent } from './getInnerListeners';
+import useNodesRef from './useNodesRef';
+const keyboardTypeMap = {
+    text: 'default',
+    number: 'numeric',
+    idcard: 'default',
+    digit: Platform.select({
+        ios: 'decimal-pad',
+        android: 'numeric',
+    }) || '',
+};
+const Input = forwardRef((props, ref) => {
+    const { style = [], type = 'text', value, password, 'placeholder-style': placeholderStyle, disabled, maxlength = 140, 'auto-focus': autoFocus, focus, 'confirm-type': confirmType = 'done', 'confirm-hold': confirmHold = false, cursor, 'cursor-color': cursorColor, 'selection-start': selectionStart = -1, 'selection-end': selectionEnd = -1, 'enable-offset': enableOffset, bindinput, bindfocus, bindblur, bindconfirm, bindselectionchange, 
+    // private
+    multiline, 'auto-height': autoHeight, bindlinechange, } = props;
+    const { nodeRef } = useNodesRef(props, ref);
+    const keyboardType = keyboardTypeMap[type];
+    const defaultValue = type === 'number' && value ? value + '' : value;
+    const placeholderTextColor = parseInlineStyle(placeholderStyle)?.color;
+    const textAlignVertical = multiline ? 'top' : 'auto';
+    const layoutRef = useRef({});
+    const tmpValue = useRef();
+    const cursorIndex = useRef(0);
+    const lineCount = useRef(0);
+    const [inputValue, setInputValue] = useState();
+    const [contentHeight, setContentHeight] = useState(0);
+    const selection = useMemo(() => {
+        if (selectionStart >= 0 && selectionEnd >= 0) {
+            return { start: selectionStart, end: selectionEnd };
+        }
+        else if (typeof cursor === 'number') {
+            return { start: cursor, end: cursor };
+        }
+    }, [cursor, selectionStart, selectionEnd]);
+    const onTextInput = ({ nativeEvent }) => {
+        if (!bindinput && !bindblur)
+            return;
+        const { range: { start, end }, text, } = nativeEvent;
+        cursorIndex.current = start < end ? start : start + text.length;
+    };
+    const onChange = (evt) => {
+        tmpValue.current = evt.nativeEvent.text;
+        if (!bindinput)
+            return;
+        const result = bindinput(getCustomEvent('input', evt, {
+            detail: {
+                value: evt.nativeEvent.text,
+                cursor: cursorIndex.current,
+            },
+            layoutRef
+        }, props));
+        if (typeof result === 'string') {
+            tmpValue.current = result;
+            setInputValue(result);
+        }
+        else if (inputValue) {
+            setInputValue(undefined);
+        }
+    };
+    const onInputFocus = (evt) => {
+        bindfocus &&
+            bindfocus(getCustomEvent('focus', evt, {
+                detail: {
+                    value: tmpValue.current || '',
+                },
+                layoutRef
+            }, props));
+    };
+    const onInputBlur = (evt) => {
+        bindblur &&
+            bindblur(getCustomEvent('blur', evt, {
+                detail: {
+                    value: tmpValue.current || '',
+                    cursor: cursorIndex.current,
+                },
+                layoutRef
+            }, props));
+    };
+    const onKeyPress = (evt) => {
+        bindconfirm &&
+            evt.nativeEvent.key === 'Enter' &&
+            bindconfirm(getCustomEvent('confirm', evt, {
+                detail: {
+                    value: tmpValue.current || '',
+                },
+                layoutRef
+            }, props));
+    };
+    const onSubmitEditing = (evt) => {
+        bindconfirm &&
+            multiline &&
+            bindconfirm(getCustomEvent('confirm', evt, {
+                detail: {
+                    value: tmpValue.current || '',
+                },
+                layoutRef
+            }, props));
+    };
+    const onContentSizeChange = (evt) => {
+        const { width, height } = evt.nativeEvent.contentSize;
+        if (width && height) {
+            if (!multiline || !autoHeight || height === contentHeight)
+                return;
+            lineCount.current += height > contentHeight ? 1 : -1;
+            const lineHeight = lineCount.current === 0 ? 0 : height / lineCount.current;
+            bindlinechange &&
+                bindlinechange(getCustomEvent('linechange', evt, {
+                    detail: {
+                        height,
+                        lineHeight,
+                        lineCount: lineCount.current,
+                    },
+                    layoutRef
+                }, props));
+            setContentHeight(height);
+        }
+    };
+    const onSelectionChange = (evt) => {
+        bindselectionchange &&
+            bindselectionchange(getCustomEvent('selectionchange', evt, {
+                detail: {
+                    selectionStart: evt.nativeEvent.selection.start,
+                    selectionEnd: evt.nativeEvent.selection.end,
+                },
+                layoutRef
+            }, props));
+    };
+    const onLayout = () => {
+        nodeRef.current?.measure((x, y, width, height, offsetLeft, offsetTop) => {
+            layoutRef.current = { x, y, width, height, offsetLeft, offsetTop };
+        });
+    };
+    useUpdateEffect(() => {
+        if (!nodeRef?.current) {
+            return;
+        }
+        focus
+            ? nodeRef.current?.focus()
+            : nodeRef.current?.blur();
+    }, [focus]);
+    const innerProps = useInnerProps(props, {
+        ref: nodeRef,
+        ...(enableOffset ? { onLayout } : {}),
+    }, [
+        'enable-offset'
+    ], {
+        layoutRef
+    });
+    return (<TextInput {...innerProps} keyboardType={keyboardType} secureTextEntry={!!password} defaultValue={defaultValue} value={inputValue} maxLength={maxlength === -1 ? undefined : maxlength} editable={!disabled} autoFocus={!!autoFocus || !!focus} returnKeyType={confirmType} selection={selection} selectionColor={cursorColor} blurOnSubmit={!multiline && !confirmHold} underlineColorAndroid="rgba(0,0,0,0)" textAlignVertical={textAlignVertical} placeholderTextColor={placeholderTextColor} multiline={!!multiline} onTextInput={onTextInput} onChange={onChange} onFocus={onInputFocus} onBlur={onInputBlur} onKeyPress={onKeyPress} onSubmitEditing={onSubmitEditing} onContentSizeChange={onContentSizeChange} onSelectionChange={onSelectionChange} style={[
+            {
+                padding: 0,
+            },
+            style,
+            multiline &&
+                autoHeight && {
+                height: Math.max(style?.minHeight || 35, contentHeight),
+            },
+        ]}/>);
+});
+Input.displayName = 'mpx-input';
+export default Input;

package/lib/runtime/components/react/dist/mpx-scroll-view.jsx

@@ -0,0 +1,294 @@
+/**
+ * ✔ scroll-x
+ * ✔ scroll-y
+ * ✔ upper-threshold
+ * ✔ lower-threshold
+ * ✔ scroll-top
+ * ✔ scroll-left
+ * ✘ scroll-into-view
+ * ✔ scroll-with-animation
+ * ✔ enable-back-to-top
+ * ✘ enable-passive
+ * ✔ refresher-enabled
+ * ✘ refresher-threshold
+ * ✔ refresher-default-style(仅 android 支持)
+ * ✔ refresher-background(仅 android 支持)
+ * ✔ refresher-triggered
+ * ✘ enable-flex(scroll-x，rn 默认支持)
+ * ✘ scroll-anchoring
+ * ✔ paging-enabled
+ * ✘ using-sticky
+ * ✔ show-scrollbar
+ * ✘ fast-deceleration
+ * ✔ binddragstart
+ * ✔ binddragging
+ * ✔ binddragend
+ * ✔ bindrefresherrefresh
+ * ✘ bindrefresherpulling
+ * ✘ bindrefresherrestore
+ * ✘ bindrefresherabort
+ * ✔ bindscrolltoupper
+ * ✔ bindscrolltolower
+ * ✔ bindscroll
+ */
+import { ScrollView, RefreshControl } from 'react-native';
+import React, { useRef, useState, useEffect, forwardRef } from 'react';
+import useInnerProps, { getCustomEvent } from './getInnerListeners';
+import useNodesRef from './useNodesRef';
+const _ScrollView = forwardRef((props = {}, ref) => {
+    const { children, enhanced = false, bounces = true, 'scroll-x': scrollX = false, 'scroll-y': scrollY = false, 'enable-back-to-top': enableBackToTop = false, 'paging-enabled': pagingEnabled = false, 'upper-threshold': upperThreshold = 50, 'lower-threshold': lowerThreshold = 50, 'scroll-with-animation': scrollWithAnimation, 'refresher-enabled': refresherEnabled, 'refresher-default-style': refresherDefaultStyle, 'refresher-background': refresherBackground, 'enable-offset': enableOffset, 'show-scrollbar': showScrollbar = true } = props;
+    const [snapScrollTop, setSnapScrollTop] = useState(0);
+    const [snapScrollLeft, setSnapScrollLeft] = useState(0);
+    const [refreshing, setRefreshing] = useState(true);
+    const [scrollEnabled, setScrollEnabled] = useState(true);
+    const layoutRef = useRef({});
+    const scrollOptions = useRef({
+        contentLength: 0,
+        offset: 0,
+        scrollLeft: 0,
+        scrollTop: 0,
+        visibleLength: 0,
+    });
+    const scrollEventThrottle = 50;
+    const hasCallScrollToUpper = useRef(true);
+    const hasCallScrollToLower = useRef(false);
+    const initialTimeout = useRef(null);
+    const { nodeRef: scrollViewRef } = useNodesRef(props, ref, {
+        scrollOffset: scrollOptions,
+        node: {
+            scrollEnabled,
+            bounces,
+            showScrollbar,
+            pagingEnabled,
+            fastDeceleration: false,
+            decelerationDisabled: false,
+            scrollTo: scrollToOffset
+        }
+    });
+    useEffect(() => {
+        if (snapScrollTop !== props['scroll-top'] ||
+            snapScrollLeft !== props['scroll-left']) {
+            setSnapScrollTop(props['scroll-top'] || 0);
+            setSnapScrollLeft(props['scroll-left'] || 0);
+        }
+    }, [props['scroll-top'], props['scroll-left']]);
+    useEffect(() => {
+        if (refreshing !== props['refresher-triggered']) {
+            setRefreshing(!!props['refresher-triggered']);
+        }
+    }, [props['refresher-triggered']]);
+    useEffect(() => {
+        if (!props['scroll-x'] && !props['scroll-y']) {
+            setScrollEnabled(false);
+        }
+        else {
+            setScrollEnabled(true);
+        }
+    }, [props['scroll-x'], props['scroll-y']]);
+    useEffect(() => {
+        if (snapScrollTop || snapScrollLeft) {
+            initialTimeout.current = setTimeout(() => {
+                scrollToOffset(snapScrollLeft, snapScrollTop);
+            }, 0);
+        }
+        return () => {
+            initialTimeout.current && clearTimeout(initialTimeout.current);
+        };
+    }, [snapScrollTop, snapScrollLeft]);
+    function selectLength(size) {
+        return !scrollX ? size.height : size.width;
+    }
+    function selectOffset(position) {
+        return !scrollX ? position.y : position.x;
+    }
+    function onStartReached(e) {
+        const { bindscrolltoupper } = props;
+        const { offset } = scrollOptions.current;
+        if (bindscrolltoupper && (offset <= upperThreshold)) {
+            if (!hasCallScrollToUpper.current) {
+                bindscrolltoupper(getCustomEvent('scrolltoupper', e, {
+                    detail: {
+                        direction: scrollX ? 'left' : 'top',
+                    },
+                    layoutRef
+                }, props));
+                hasCallScrollToUpper.current = true;
+            }
+        }
+        else {
+            hasCallScrollToUpper.current = false;
+        }
+    }
+    function onEndReached(e) {
+        const { bindscrolltolower } = props;
+        const { contentLength, visibleLength, offset } = scrollOptions.current;
+        const distanceFromEnd = contentLength - visibleLength - offset;
+        if (bindscrolltolower && (distanceFromEnd < lowerThreshold)) {
+            if (!hasCallScrollToLower.current) {
+                hasCallScrollToLower.current = true;
+                bindscrolltolower(getCustomEvent('scrolltolower', e, {
+                    detail: {
+                        direction: scrollX ? 'right' : 'botttom',
+                    },
+                    layoutRef
+                }, props));
+            }
+        }
+        else {
+            hasCallScrollToLower.current = false;
+        }
+    }
+    function onContentSizeChange(width, height) {
+        scrollOptions.current.contentLength = selectLength({ height, width });
+    }
+    function onLayout(e) {
+        scrollOptions.current.visibleLength = selectLength(e.nativeEvent.layout);
+        if (enableOffset) {
+            scrollViewRef.current?.measure((x, y, width, height, offsetLeft, offsetTop) => {
+                layoutRef.current = { x, y, width, height, offsetLeft, offsetTop };
+            });
+        }
+    }
+    function onScroll(e) {
+        const { bindscroll } = props;
+        const { x: scrollLeft, y: scrollTop } = e.nativeEvent.contentOffset;
+        const { width: scrollWidth, height: scrollHeight } = e.nativeEvent.contentSize;
+        bindscroll &&
+            bindscroll(getCustomEvent('scroll', e, {
+                detail: {
+                    scrollLeft,
+                    scrollTop,
+                    scrollHeight,
+                    scrollWidth,
+                    deltaX: scrollLeft - scrollOptions.current.scrollLeft,
+                    deltaY: scrollTop - scrollOptions.current.scrollTop,
+                },
+                layoutRef
+            }, props));
+        const visibleLength = selectLength(e.nativeEvent.layoutMeasurement);
+        const contentLength = selectLength(e.nativeEvent.contentSize);
+        const offset = selectOffset(e.nativeEvent.contentOffset);
+        scrollOptions.current = {
+            ...scrollOptions.current,
+            contentLength,
+            offset,
+            scrollLeft,
+            scrollTop,
+            visibleLength,
+        };
+        onStartReached(e);
+        onEndReached(e);
+    }
+    function scrollToOffset(x = 0, y = 0) {
+        if (scrollViewRef.current) {
+            scrollViewRef.current.scrollTo({ x, y, animated: !!scrollWithAnimation });
+            scrollOptions.current.scrollLeft = x;
+            scrollOptions.current.scrollTop = y;
+        }
+    }
+    function onRefresh() {
+        const { bindrefresherrefresh } = props;
+        bindrefresherrefresh &&
+            bindrefresherrefresh(getCustomEvent('refresherrefresh', {}, { layoutRef }, props));
+    }
+    function onScrollTouchStart(e) {
+        const { binddragstart, bindtouchstart, enhanced } = props;
+        bindtouchstart && bindtouchstart(e);
+        if (enhanced) {
+            binddragstart &&
+                binddragstart(getCustomEvent('dragstart', e, {
+                    detail: {
+                        scrollLeft: scrollOptions.current.scrollLeft || 0,
+                        scrollTop: scrollOptions.current.scrollTop || 0,
+                    },
+                    layoutRef
+                }, props));
+        }
+    }
+    function onScrollTouchMove(e) {
+        const { binddragging, bindtouchmove, enhanced } = props;
+        bindtouchmove && bindtouchmove(e);
+        if (enhanced) {
+            binddragging &&
+                binddragging(getCustomEvent('dragging', e, {
+                    detail: {
+                        scrollLeft: scrollOptions.current.scrollLeft || 0,
+                        scrollTop: scrollOptions.current.scrollTop || 0,
+                    },
+                    layoutRef
+                }, props));
+        }
+    }
+    function onScrollTouchEnd(e) {
+        const { binddragend, bindtouchend, enhanced } = props;
+        bindtouchend && bindtouchend(e);
+        if (enhanced) {
+            binddragend &&
+                binddragend(getCustomEvent('dragend', e, {
+                    detail: {
+                        scrollLeft: scrollOptions.current.scrollLeft || 0,
+                        scrollTop: scrollOptions.current.scrollTop || 0,
+                    },
+                    layoutRef
+                }, props));
+        }
+    }
+    let scrollAdditionalProps = {
+        pinchGestureEnabled: false,
+        horizontal: scrollX || !scrollY,
+        scrollEventThrottle: scrollEventThrottle,
+        scrollsToTop: enableBackToTop,
+        showsHorizontalScrollIndicator: scrollX && showScrollbar,
+        showsVerticalScrollIndicator: scrollY && showScrollbar,
+        scrollEnabled: scrollEnabled,
+        ref: scrollViewRef,
+        onScroll: onScroll,
+        onContentSizeChange: onContentSizeChange,
+        bindtouchstart: onScrollTouchStart,
+        bindtouchend: onScrollTouchEnd,
+        bindtouchmove: onScrollTouchMove,
+        onLayout
+    };
+    if (enhanced) {
+        scrollAdditionalProps = {
+            ...scrollAdditionalProps,
+            bounces,
+            pagingEnabled,
+        };
+    }
+    const innerProps = useInnerProps(props, scrollAdditionalProps, [
+        'enable-offset',
+        'scroll-x',
+        'scroll-y',
+        'enable-back-to-top',
+        'paging-enabled',
+        'show-scrollbar',
+        'upper-threshold',
+        'lower-threshold',
+        'scroll-top',
+        'scroll-left',
+        'scroll-with-animation',
+        'refresher-triggered',
+        'refresher-enabled',
+        'refresher-default-style',
+        'refresher-background',
+        'children',
+        'enhanced',
+        'binddragstart',
+        'binddragging',
+        'binddragend',
+        'bindscroll',
+        'bindscrolltoupper',
+        'bindscrolltolower',
+        'bindrefresherrefresh'
+    ], { layoutRef });
+    const refreshColor = {
+        'black': ['#000'],
+        'white': ['#fff']
+    };
+    return (<ScrollView {...innerProps} refreshControl={refresherEnabled ? (<RefreshControl progressBackgroundColor={refresherBackground} refreshing={refreshing} onRefresh={onRefresh} {...(refresherDefaultStyle && refresherDefaultStyle !== 'none' ? { colors: refreshColor[refresherDefaultStyle] } : {})}/>) : undefined}>
+      {children}
+    </ScrollView>);
+});
+_ScrollView.displayName = 'mpx-scroll-view';
+export default _ScrollView;