@mpxjs/webpack-plugin 2.9.56 → 2.9.57

package/lib/runtime/components/react/dist/mpx-image/index.jsx

@@ -0,0 +1,229 @@
+/**
+ * ✔ src
+ * - mode: Partially, Only SVG format do not support
+ * ✘ show-menu-by-longpress
+ * ✔ binderror
+ * ✔ bindload
+ * ✘ fade-in
+ * ✔ webp
+ * ✘ lazy-load
+ * ✔ bindtap
+ * ✔ DEFAULT_SIZE
+ */
+import React, { useEffect, useMemo, useState, forwardRef, useRef, } from 'react';
+import { Image as RNImage, View, StyleSheet, } from 'react-native';
+import useInnerProps, { getCustomEvent } from '../getInnerListeners';
+import useNodesRef from '../useNodesRef';
+const DEFAULT_IMAGE_WIDTH = 320;
+const DEFAULT_IMAGE_HEIGHT = 240;
+// const REMOTE_SVG_REGEXP = /https?:\/\/.*\.(?:svg)/i
+// const styls = StyleSheet.create({
+//   suspense: {
+//     display: 'flex',
+//     justifyContent: 'center',
+//     alignItems: 'center',
+//     width: '100%',
+//     height: '100%',
+//   },
+// })
+const cropMode = [
+    'top',
+    'bottom',
+    'center',
+    'right',
+    'left',
+    'top left',
+    'top right',
+    'bottom left',
+    'bottom right',
+];
+const ModeMap = new Map([
+    ['scaleToFill', 'stretch'],
+    ['aspectFit', 'contain'],
+    ['aspectFill', 'cover'],
+    ['widthFix', 'stretch'],
+    ['heightFix', 'stretch'],
+    ...cropMode.map(mode => [mode, 'stretch']),
+]);
+const isNumber = (value) => typeof value === 'number';
+const relativeCenteredSize = (viewSize, imageSize) => (viewSize - imageSize) / 2;
+// const Svg = lazy(() => import('./svg'))
+// const Fallback = (
+//   <View style={styls.suspense}>
+//     <Text>loading ...</Text>
+//   </View>
+// )
+const Image = forwardRef((props, ref) => {
+    const { src = '', mode = 'scaleToFill', 
+    // svg = false,
+    style = [], 'enable-offset': enableOffset, bindload, binderror } = props;
+    const { width = DEFAULT_IMAGE_WIDTH, height = DEFAULT_IMAGE_HEIGHT } = StyleSheet.flatten(style);
+    const { nodeRef } = useNodesRef(props, ref, {
+        defaultStyle: {
+            width: DEFAULT_IMAGE_WIDTH,
+            height: DEFAULT_IMAGE_HEIGHT
+        }
+    });
+    const layoutRef = useRef({});
+    const preSrc = useRef();
+    const resizeMode = ModeMap.get(mode) || 'stretch';
+    const isWidthFixMode = mode === 'widthFix';
+    const isHeightFixMode = mode === 'heightFix';
+    const isCropMode = cropMode.includes(mode);
+    const source = typeof src === 'string' ? { uri: src } : src;
+    const [viewWidth, setViewWidth] = useState(isNumber(width) ? width : 0);
+    const [viewHeight, setViewHeight] = useState(isNumber(height) ? height : 0);
+    const [imageWidth, setImageWidth] = useState(0);
+    const [imageHeight, setImageHeight] = useState(0);
+    const [ratio, setRatio] = useState(0);
+    const [loaded, setLoaded] = useState(false);
+    const fixedHeight = useMemo(() => {
+        const fixed = viewWidth * ratio;
+        return !fixed ? viewHeight : fixed;
+    }, [ratio, viewWidth, viewHeight]);
+    const fixedWidth = useMemo(() => {
+        if (!ratio)
+            return viewWidth;
+        const fixed = viewHeight / ratio;
+        return !fixed ? viewWidth : fixed;
+    }, [ratio, viewWidth, viewHeight]);
+    const cropModeStyle = useMemo(() => {
+        switch (mode) {
+            case 'top':
+                return { top: 0, left: relativeCenteredSize(viewWidth, imageWidth) };
+            case 'bottom':
+                return { top: 'auto', bottom: 0, left: relativeCenteredSize(viewWidth, imageWidth) };
+            case 'center':
+                return { top: relativeCenteredSize(viewHeight, imageHeight), left: relativeCenteredSize(viewWidth, imageWidth) };
+            case 'left':
+                return { top: relativeCenteredSize(viewHeight, imageHeight), left: 0 };
+            case 'right':
+                return { top: relativeCenteredSize(viewHeight, imageHeight), left: 'auto', right: 0 };
+            case 'top left':
+                return { top: 0, left: 0 };
+            case 'top right':
+                return { top: 0, left: 'auto', right: 0 };
+            case 'bottom left':
+                return { top: 'auto', bottom: 0, left: 0 };
+            case 'bottom right':
+                return { top: 'auto', bottom: 0, left: 'auto', right: 0 };
+            default:
+                return {};
+        }
+    }, [mode, viewWidth, viewHeight, imageWidth, imageHeight]);
+    const onImageLoad = (evt) => {
+        if (!bindload)
+            return;
+        if (typeof src === 'string') {
+            RNImage.getSize(src, (width, height) => {
+                bindload(getCustomEvent('load', evt, {
+                    detail: { width, height },
+                    layoutRef
+                }, props));
+            });
+        }
+        else {
+            const { width = 0, height = 0 } = RNImage.resolveAssetSource(src) || {};
+            bindload(getCustomEvent('load', evt, {
+                detail: { width, height },
+                layoutRef
+            }, props));
+        }
+    };
+    const onImageError = (evt) => {
+        binderror &&
+            binderror(getCustomEvent('error', evt, {
+                detail: { errMsg: evt.nativeEvent.error },
+                layoutRef
+            }, props));
+    };
+    const onViewLayout = ({ nativeEvent: { layout: { width, height }, }, }) => {
+        setViewWidth(width);
+        setViewHeight(height);
+    };
+    const onImageLayout = () => {
+        nodeRef.current?.measure((x, y, width, height, offsetLeft, offsetTop) => {
+            layoutRef.current = { x, y, width, height, offsetLeft, offsetTop };
+        });
+    };
+    useEffect(() => {
+        if (!isWidthFixMode && !isHeightFixMode && !isCropMode) {
+            setLoaded(true);
+            return;
+        }
+        const changed = preSrc.current !== src;
+        preSrc.current = src;
+        changed && setLoaded(false);
+        if (typeof src === 'string') {
+            RNImage.getSize(src, (width, height) => {
+                if (isWidthFixMode || isHeightFixMode) {
+                    setRatio(width === 0 ? 0 : height / width);
+                }
+                if (isCropMode) {
+                    setImageWidth(width);
+                    setImageHeight(height);
+                }
+                changed && setLoaded(true);
+            });
+        }
+        else {
+            const { width = 0, height = 0 } = RNImage.resolveAssetSource(src) || {};
+            if (isWidthFixMode || isHeightFixMode) {
+                setRatio(width === 0 ? 0 : height / width);
+            }
+            if (isCropMode) {
+                setImageWidth(width);
+                setImageHeight(height);
+            }
+            changed && setLoaded(true);
+        }
+    }, [isWidthFixMode, isHeightFixMode, isCropMode, src]);
+    const innerProps = useInnerProps(props, {
+        ref: nodeRef,
+        ...(enableOffset ? { onLayout: onImageLayout } : {})
+    }, [
+        'enable-offset'
+    ], {
+        layoutRef
+    });
+    // if (typeof src === 'string' && REMOTE_SVG_REGEXP.test(src)) {
+    //   return (
+    //     <Suspense fallback={Fallback} {...innerProps}>
+    //       <View {...innerProps}>
+    //         <Svg src={src} style={style} width={width as SvgNumberProp} height={height as SvgNumberProp} />
+    //       </View>
+    //     </Suspense>
+    //   )
+    // }
+    // if (svg) {
+    //   return (
+    //     <Suspense fallback={Fallback}>
+    //       <View {...innerProps}>
+    //         <Svg local src={src} style={style} width={width as SvgNumberProp} height={height as SvgNumberProp} />
+    //       </View>
+    //     </Suspense>
+    //   )
+    // }
+    return (<View style={[
+            { width, height },
+            style,
+            {
+                ...(isHeightFixMode && { width: fixedWidth }),
+                ...(isWidthFixMode && { height: fixedHeight }),
+            },
+            { overflow: 'hidden' },
+        ]} onLayout={onViewLayout}>
+      {loaded && <RNImage {...innerProps} source={source} resizeMode={resizeMode} onLoad={onImageLoad} onError={onImageError} style={[
+                StyleSheet.absoluteFill,
+                {
+                    width: !isCropMode ? '100%' : imageWidth,
+                    height: !isCropMode ? '100%' : imageHeight,
+                },
+                {
+                    ...(isCropMode && cropModeStyle),
+                },
+            ]}/>}
+    </View>);
+});
+Image.displayName = 'mpx-image';
+export default Image;

package/lib/runtime/components/react/dist/mpx-image/svg.jsx

@@ -0,0 +1,6 @@
+import React from 'react';
+import { SvgCssUri, WithLocalSvg } from 'react-native-svg/css';
+const Svg = ({ local = false, src, style, width, height }) => {
+    return local ? (<WithLocalSvg style={style} asset={src} width={width} height={height}/>) : (<SvgCssUri style={style} uri={src} width={width} height={height}/>);
+};
+export default Svg;

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;