@mpxjs/webpack-plugin 2.8.25-alpha.21 → 2.8.25-alpha.22

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

@@ -0,0 +1,97 @@
+/**
+ * ✔ checked
+ * ✔ type
+ * ✔ disabled
+ * ✔ color
+ */
+import { Switch } from 'react-native';
+import { useRef, useEffect, forwardRef, useState, useContext, createElement } from 'react';
+import { warn } from '@mpxjs/utils';
+import useNodesRef from './useNodesRef'; // 引入辅助函数
+import useInnerProps, { getCustomEvent } from './getInnerListeners';
+import CheckBox from './mpx-checkbox';
+import { FormContext } from './context';
+import { useTransformStyle, useLayout, extendObject } from './utils';
+const _Switch = forwardRef((props, ref) => {
+    const { style = {}, checked = false, type = 'switch', disabled = false, color = '#04BE02', 'enable-var': enableVar, 'external-var-context': externalVarContext, 'parent-font-size': parentFontSize, 'parent-width': parentWidth, 'parent-height': parentHeight, bindchange, catchchange } = props;
+    const [isChecked, setIsChecked] = useState(checked);
+    const changeHandler = bindchange || catchchange;
+    let formValuesMap;
+    const formContext = useContext(FormContext);
+    if (formContext) {
+        formValuesMap = formContext.formValuesMap;
+    }
+    const { normalStyle, hasSelfPercent, setWidth, setHeight } = useTransformStyle(style, {
+        enableVar,
+        externalVarContext,
+        parentFontSize,
+        parentWidth,
+        parentHeight
+    });
+    useEffect(() => {
+        setIsChecked(checked);
+    }, [checked]);
+    const nodeRef = useRef(null);
+    useNodesRef(props, ref, nodeRef, {
+        style: normalStyle
+    });
+    const { layoutRef, layoutStyle, layoutProps } = useLayout({ props, hasSelfPercent, setWidth, setHeight, nodeRef });
+    const onChange = (evt, { checked } = {}) => {
+        if (type === 'switch') {
+            setIsChecked(evt);
+            changeHandler && changeHandler(getCustomEvent('change', {}, { layoutRef, detail: { value: evt } }, props));
+        }
+        else {
+            setIsChecked(checked);
+            changeHandler && changeHandler(getCustomEvent('change', evt, { layoutRef, detail: { value: checked } }, props));
+        }
+    };
+    const resetValue = () => {
+        setIsChecked(false);
+    };
+    const getValue = () => {
+        return isChecked;
+    };
+    if (formValuesMap) {
+        if (!props.name) {
+            warn('If a form component is used, the name attribute is required.');
+        }
+        else {
+            formValuesMap.set(props.name, { getValue, resetValue });
+        }
+    }
+    useEffect(() => {
+        return () => {
+            if (formValuesMap && props.name) {
+                formValuesMap.delete(props.name);
+            }
+        };
+    }, []);
+    const innerProps = useInnerProps(props, extendObject({
+        ref: nodeRef,
+        style: extendObject({}, normalStyle, layoutStyle)
+    }, layoutProps, !disabled ? { [type === 'switch' ? 'onValueChange' : '_onChange']: onChange } : {}), [
+        'checked',
+        'disabled',
+        'type',
+        'color'
+    ], {
+        layoutRef
+    });
+    if (type === 'checkbox') {
+        return createElement(CheckBox, extendObject({}, innerProps, {
+            color: color,
+            style: normalStyle,
+            checked: isChecked
+        }));
+    }
+    return createElement(Switch, extendObject({}, innerProps, {
+        style: normalStyle,
+        value: isChecked,
+        trackColor: { false: '#FFF', true: color },
+        thumbColor: isChecked ? '#FFF' : '#f4f3f4',
+        ios_backgroundColor: '#FFF'
+    }));
+});
+_Switch.displayName = 'MpxSwitch';
+export default _Switch;

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

@@ -0,0 +1,41 @@
+/**
+ * ✔ selectable
+ * ✘ space
+ * ✘ decode
+ */
+import { Text } from 'react-native';
+import { useRef, forwardRef, createElement } from 'react';
+import useInnerProps from './getInnerListeners';
+import useNodesRef from './useNodesRef'; // 引入辅助函数
+import { useTransformStyle, wrapChildren } from './utils';
+const _Text = forwardRef((props, ref) => {
+    const { style = {}, allowFontScaling = false, selectable, 'enable-var': enableVar, 'external-var-context': externalVarContext, 'user-select': userSelect, 'parent-font-size': parentFontSize, 'parent-width': parentWidth, 'parent-height': parentHeight } = props;
+    const layoutRef = useRef({});
+    const { normalStyle, hasVarDec, varContextRef } = useTransformStyle(style, {
+        enableVar,
+        externalVarContext,
+        parentFontSize,
+        parentWidth,
+        parentHeight
+    });
+    const nodeRef = useRef(null);
+    useNodesRef(props, ref, nodeRef, {
+        style: normalStyle
+    });
+    const innerProps = useInnerProps(props, {
+        ref: nodeRef,
+        style: normalStyle,
+        selectable: !!selectable || !!userSelect,
+        allowFontScaling
+    }, [
+        'user-select'
+    ], {
+        layoutRef
+    });
+    return createElement(Text, innerProps, wrapChildren(props, {
+        hasVarDec,
+        varContext: varContextRef.current
+    }));
+});
+_Text.displayName = 'MpxText';
+export default _Text;

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

@@ -0,0 +1,40 @@
+/**
+ * Compared with Input:
+ *   Subtraction:
+ *     type, password, confirm-hold
+ *   Addition:
+ *     - confirm-type: Not support `return`
+ *     ✔ auto-height
+ *     ✘ fixed
+ *     ✘ show-confirm-bar
+ *     ✔ bindlinechange: No `heightRpx` info.
+ */
+import { forwardRef, createElement } from 'react';
+import { Keyboard } from 'react-native';
+import Input from './mpx-input';
+import { omit, extendObject } from './utils';
+const DEFAULT_TEXTAREA_WIDTH = 300;
+const DEFAULT_TEXTAREA_HEIGHT = 150;
+const Textarea = forwardRef((props, ref) => {
+    const { style = {} } = props;
+    const restProps = omit(props, [
+        'ref',
+        'type',
+        'style',
+        'password',
+        'multiline',
+        'confirm-hold'
+    ]);
+    return createElement(Input, extendObject(restProps, {
+        ref: ref,
+        multiline: true,
+        confirmType: 'next',
+        bindblur: () => Keyboard.dismiss(),
+        style: extendObject({
+            width: DEFAULT_TEXTAREA_WIDTH,
+            height: DEFAULT_TEXTAREA_HEIGHT
+        }, style)
+    }));
+});
+Textarea.displayName = 'MpxTextarea';
+export default Textarea;

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

@@ -0,0 +1,248 @@
+/**
+ * ✔ src
+ * ✘ duration
+ * ✔ controls
+ * ✘ danmu-list
+ * ✘ danmu-btn
+ * ✘ enable-danmu
+ * ✔ autoplay
+ * ✔ loop
+ * ✔ muted
+ * ✔ initial-time
+ * ✘ page-gesture
+ * ✘ direction
+ * ✘ show-progress
+ * ✘ show-fullscreen-btn
+ * ✘ show-play-btn
+ * ✘ show-center-play-btn
+ * ✘ enable-progress-gesture
+ * ✔ object-fit
+ * ✔ poster
+ * ✘ show-mute-btn
+ * ✘ title
+ * ✘ play-btn-position
+ * ✘ enable-play-gesture
+ * ✘ auto-pause-if-navigate
+ * ✘ auto-pause-if-open-native
+ * ✘ vslide-gesture
+ * ✘ vslide-gesture-in-fullscreen
+ * ✘ show-bottom-progress(use show-progress)
+ * ✘ ad-unit-id
+ * ✘ poster-for-crawler
+ * ✘ show-casting-button
+ * ✘ picture-in-picture-mode
+ * ✘ picture-in-picture-show-progress
+ * ✘ picture-in-picture-init-position
+ * ✔ enable-auto-rotation (only ios)
+ * ✘ show-screen-lock-button
+ * ✘ show-snapshot-button
+ * ✘ show-background-playback-button
+ * ✘ background-poster
+ * ✘ referrer-policy
+ * ✔ is-drm
+ * ✘ is-live
+ * ✔ provision-url(android)
+ * ✔ certificate-url(ios)
+ * ✔ license-url
+ * ✔ preferred-peak-bit-rate
+ * ✔ bindplay
+ * ✔ bindpause
+ * ✔ bindended
+ * ✘ bindtimeupdate
+ * ✔ bindfullscreenchange
+ * ✔ bindwaiting
+ * ✔ binderror
+ * ✘ bindprogress
+ * ✔ bindloadedmetadata
+ * ✔ bindcontrolstoggle(only android)
+ * ✘ bindenterpictureinpicture
+ * ✘ bindleavepictureinpicture
+ * ✔ bindseekcomplete
+ * ✘ bindcastinguserselect
+ * ✘ bindcastingstatechange
+ * ✘ bindcastinginterrupt
+ */
+import { useRef, forwardRef, createElement } from 'react';
+import Video, { DRMType } from 'react-native-video';
+import { StyleSheet, View, Platform } from 'react-native';
+import { splitProps, useTransformStyle, useLayout, extendObject } from './utils';
+import useInnerProps, { getCustomEvent } from './getInnerListeners';
+import useNodesRef from './useNodesRef';
+const styles = StyleSheet.create({
+    container: {
+        width: 300,
+        height: 225
+    },
+    video: {
+        flex: 1
+    }
+});
+const MpxVideo = forwardRef((videoProps, ref) => {
+    const { innerProps: props = {} } = splitProps(videoProps);
+    const { src, autoplay = false, loop = false, muted = false, controls = true, poster = '', bindplay, bindpause, bindended, bindtimeupdate, bindfullscreenchange, bindwaiting, binderror, bindloadedmetadata, bindcontrolstoggle, bindseekcomplete, style, 'initial-time': initialTime = 0, 'object-fit': objectFit = 'contain', 'is-drm': isDrm = false, 'provision-url': provisionUrl, 'certificate-url': certificateUrl, 'license-url': licenseUrl, 'preferred-peak-bit-rate': preferredPeakBitRate = 0, 'enable-auto-rotation': enableAutoRotation = false, 'enable-var': enableVar, 'external-var-context': externalVarContext, 'parent-font-size': parentFontSize, 'parent-width': parentWidth, 'parent-height': parentHeight } = props;
+    const videoRef = useRef(null);
+    const viewRef = useRef(null);
+    const videoInfoRef = useRef({});
+    const propsRef = useRef({});
+    propsRef.current = props;
+    const { normalStyle, hasSelfPercent, setWidth, setHeight } = useTransformStyle(extendObject({}, styles.container, style), {
+        enableVar,
+        externalVarContext,
+        parentFontSize,
+        parentWidth,
+        parentHeight
+    });
+    const { layoutRef, layoutStyle, layoutProps } = useLayout({
+        props,
+        hasSelfPercent,
+        setWidth,
+        setHeight,
+        nodeRef: viewRef
+    });
+    useNodesRef(props, ref, viewRef, {
+        style: normalStyle,
+        node: {
+            play,
+            pause,
+            stop,
+            seek,
+            requestFullScreen,
+            exitFullScreen
+        }
+    });
+    function handleProgress(data) {
+        const { currentTime } = data;
+        bindtimeupdate && bindtimeupdate(getCustomEvent('timeupdate', {}, {
+            detail: {
+                currentTime,
+                duration: videoInfoRef.current.duration
+            },
+            layoutRef
+        }, propsRef.current));
+    }
+    function handleEnd() {
+        bindended(getCustomEvent('end', {}, { layoutRef }, propsRef.current));
+    }
+    function handleWaiting({ isBuffering }) {
+        if (isBuffering) {
+            bindwaiting(getCustomEvent('waiting', {}, { layoutRef }, propsRef.current));
+        }
+    }
+    function handleSeekcomplete({ seekTime }) {
+        // 手动拖拽进度条场景，android 可以触发，ios 不可以
+        bindseekcomplete(getCustomEvent('seekcomplete', {}, {
+            detail: {
+                position: Platform.OS === 'android' ? seekTime * 1000 : seekTime
+            },
+            layoutRef
+        }, propsRef.current));
+    }
+    function handleEnterFullScreen() {
+        bindfullscreenchange && bindfullscreenchange(getCustomEvent('fullscreenchange', {}, { detail: { fullScreen: 1 }, layoutRef }, propsRef.current));
+    }
+    function handleExitFullScreen() {
+        bindfullscreenchange && bindfullscreenchange(getCustomEvent('fullscreenchange', {}, { detail: { fullScreen: 0 }, layoutRef }, propsRef.current));
+    }
+    function handlePlaybackRateChange({ playbackRate }) {
+        if (playbackRate === 0) {
+            bindpause && bindpause(getCustomEvent('pause', {}, { layoutRef }, propsRef.current));
+        }
+        else {
+            bindplay && bindplay(getCustomEvent('play', {}, { layoutRef }, propsRef.current));
+        }
+    }
+    function handleAndroidControlsVisibilityChange({ isVisible }) {
+        bindcontrolstoggle(getCustomEvent('progress', {}, {
+            detail: {
+                show: isVisible
+            },
+            layoutRef
+        }, propsRef.current));
+    }
+    function handleVideoLoad(data) {
+        const { naturalSize, duration } = data;
+        if (initialTime) {
+            videoRef.current && videoRef.current.seek(initialTime);
+        }
+        videoInfoRef.current = data;
+        bindloadedmetadata && bindloadedmetadata(getCustomEvent('loadedmetadata', {}, {
+            detail: {
+                width: naturalSize.width,
+                height: naturalSize.height,
+                duration
+            },
+            layoutRef
+        }, propsRef.current));
+    }
+    function handleError({ error }) {
+        binderror && binderror(getCustomEvent('play', {}, { detail: { errMsg: error.localizedFailureReason }, layoutRef }, propsRef.current));
+    }
+    function play() {
+        videoRef.current && videoRef.current.resume();
+    }
+    function pause() {
+        videoRef.current && videoRef.current.pause();
+    }
+    function seek(position) {
+        videoRef.current && videoRef.current.seek(position);
+    }
+    function stop() {
+        videoRef.current && videoRef.current.pause();
+        seek(0);
+    }
+    function exitFullScreen() {
+        videoRef.current && videoRef.current.setFullScreen(false);
+    }
+    function requestFullScreen() {
+        videoRef.current && videoRef.current.setFullScreen(true);
+    }
+    const source = {
+        uri: src
+    };
+    if (isDrm) {
+        source.drm = {
+            type: DRMType.FAIRPLAY,
+            certificateUrl: Platform.OS === 'android' ? provisionUrl : certificateUrl,
+            licenseServer: licenseUrl
+        };
+    }
+    const innerProps = useInnerProps(props, extendObject({
+        style: styles.video,
+        ref: videoRef,
+        source,
+        paused: !autoplay,
+        repeat: loop,
+        muted,
+        controls,
+        maxBitRate: preferredPeakBitRate,
+        fullscreenAutorotate: enableAutoRotation,
+        resizeMode: objectFit === 'fill' ? 'stretch' : objectFit,
+        poster: controls ? poster : '',
+        onProgress: bindtimeupdate && handleProgress,
+        onEnd: bindended && handleEnd,
+        onError: binderror && handleError,
+        onBuffer: bindwaiting && handleWaiting,
+        onSeek: bindseekcomplete && handleSeekcomplete,
+        onPlaybackRateChange: (bindpause || bindplay) && handlePlaybackRateChange,
+        onFullscreenPlayerDidPresent: bindfullscreenchange && handleEnterFullScreen,
+        onFullscreenPlayerWillDismiss: bindfullscreenchange && handleExitFullScreen,
+        onControlsVisibilityChange: bindcontrolstoggle && handleAndroidControlsVisibilityChange,
+        onLoad: handleVideoLoad
+    }, layoutProps), [
+        'src',
+        'autoplay',
+        'loop',
+        'bindplay',
+        'bindpause',
+        'bindended',
+        'bindtimeupdate',
+        'bindfullscreenchange',
+        'bindwaiting',
+        'binderror',
+        'bindloadedmetadata',
+        'bindcontrolstoggle',
+        'bindseekcomplete'
+    ], { layoutRef });
+    return createElement(View, { style: extendObject({}, normalStyle, layoutStyle), ref: viewRef }, createElement(Video, innerProps));
+});
+export default MpxVideo;