pixuireactcomponents 1.4.13 → 1.5.0

package/src/components/react/app/slider/Slider.js

@@ -1,18 +1,3 @@
-var __extends = (this && this.__extends) || (function () {
-    var extendStatics = function (d, b) {
-        extendStatics = Object.setPrototypeOf ||
-            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
-            function (d, b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; };
-        return extendStatics(d, b);
-    };
-    return function (d, b) {
-        if (typeof b !== "function" && b !== null)
-            throw new TypeError("Class extends value " + String(b) + " is not a constructor or null");
-        extendStatics(d, b);
-        function __() { this.constructor = d; }
-        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
-    };
-})();
 var __assign = (this && this.__assign) || function () {
     __assign = Object.assign || function(t) {
         for (var s, i = 1, n = arguments.length; i < n; i++) {
@@ -24,373 +9,179 @@ var __assign = (this && this.__assign) || function () {
     };
     return __assign.apply(this, arguments);
 };
-var __rest = (this && this.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
-import { Component, createRef, h } from 'preact';
+import { h } from 'preact';
+import { useEffect, useRef, useState } from 'preact/hooks';
 var rowCenterCenter = {
+    width: '100%',
+    height: '100%',
     display: 'flex',
     flexDirection: 'row',
     justifyContent: 'center',
     alignItems: 'center',
 };
 var rowBetweenCenter = {
+    position: 'relative',
     display: 'flex',
     flexDirection: 'row',
-    justifyContent: 'space-between',
+    justifyContent: 'center',
     alignItems: 'center',
 };
-var Slider = /** @class */ (function (_super) {
-    __extends(Slider, _super);
-    function Slider(props) {
-        var _this = _super.call(this, props) || this;
-        _this.lastX = undefined; // 上一次位置的横坐标
-        _this.count = 0; // 拖动条距离最左端的位置 [0, this.props.wrapperWidth]
-        _this.rect = undefined; // 滑动区域
-        _this.discrete = Math.round(_this.props.discrete == null ? 0 : _this.props.discrete);
-        _this.refWrapper = createRef();
-        //====================================================================================================
-        //事件相关
-        _this.onDragStart = function (event) {
-            console.log('【Slider】DragStart event.clientX--' +
-                event.clientX +
-                '-----percent----' +
-                _this.state.percent +
-                '-----currentX----' +
-                (_this.state.percent / 10000) * _this.props.wrapperWidth);
-            _this.lastX = event.clentX;
-            _this.count = (_this.state.percent / 10000) * _this.props.wrapperWidth;
-            _this.setState({
-                onDraging: true,
-            });
-            if (_this.props.onDragStart) {
-                _this.props.onDragStart();
-            }
-        };
-        _this.onDrag = function (event) {
-            // console.log(
-            //     '【Slider】onDrag0 event.clientX--' +
-            //         event.clientX +
-            //         '-----percent----' +
-            //         this.state.percent +
-            //         '-----currentX----' +
-            //         (this.state.percent / 10000) * this.props.wrapperWidth! +
-            //         'rect.left' +
-            //         this.rect.left +
-            //         'rect.right' +
-            //         this.rect.right
-            // );
-            // if (event.clientX < this.rect.left - 50 || event.clientX > this.rect.right + 50) return;
-            console.log('【Slider】onDrag1 event.clientX--' +
-                event.clientX +
-                '-----percent----' +
-                _this.state.percent +
-                '-----currentX----' +
-                (_this.state.percent / 10000) * _this.props.wrapperWidth);
-            if (_this.lastX == undefined) {
-                _this.lastX = event.clientX;
-                return;
-            }
-            console.log('【Slider】onDrag2 event.clientX--' +
-                event.clientX +
-                '-----percent----' +
-                _this.state.percent +
-                '-----currentX----' +
-                (_this.state.percent / 10000) * _this.props.wrapperWidth);
-            var move = Number(event.clientX) - Number(_this.lastX);
-            _this.count += move;
-            _this.count = Math.min(_this.props.wrapperWidth, _this.count);
-            _this.count = Math.max(0, _this.count);
-            var newPercent = (_this.count / _this.props.wrapperWidth) * 10000;
-            if (_this.props.isDiscrete == true) {
-                newPercent = (_this.count / _this.props.wrapperWidth) * _this.props.maxDiscrete;
-                _this.discrete = Math.round(newPercent);
-                if (_this.props.rangeControl) {
-                    _this.discrete = Math.min(_this.discrete, _this.props.endRange);
-                    _this.discrete = Math.max(_this.discrete, _this.props.startRange);
+var defaultRail = {
+    backgroundColor: 'rgb(240,240,240)',
+    width: '400',
+    height: '10',
+    border: '0px solid #000',
+    borderRadius: '5',
+};
+var defaultVerticalRail = {
+    backgroundColor: 'rgb(240,240,240)',
+    width: '10',
+    height: '400',
+    border: '0px solid #000',
+    borderRadius: '5',
+    top: 200
+};
+var defaultTrack = {
+    backgroundColor: '#91caff',
+    width: '400',
+    height: '10',
+    border: '0px solid #000',
+    borderRadius: '5'
+};
+var defaultVerticalTrack = {
+    backgroundColor: '#91caff',
+    width: '10',
+    height: '400',
+    border: '0px solid #000',
+    borderRadius: '5'
+};
+var defaultHandle = {
+    backgroundColor: '#1677ff',
+    borderRadius: '50%',
+    width: '20',
+    height: '20',
+};
+export var Slider = function (props) {
+    var id = props.id, rootClassName = props.rootClassName, _a = props.min, min = _a === void 0 ? 0 : _a, _b = props.max, max = _b === void 0 ? 100 : _b, _c = props.step, step = _c === void 0 ? 1 : _c, _d = props.vertical, vertical = _d === void 0 ? false : _d, _e = props.range, range = _e === void 0 ? false : _e, onChangeStart = props.onChangeStart, onChange = props.onChange, onChangeComplete = props.onChangeComplete, element = props.element;
+    var getElementStyleOrClass = function () {
+        if (element == undefined) {
+            return {
+                rail: vertical ? defaultVerticalRail : defaultRail,
+                track: vertical ? defaultVerticalTrack : defaultTrack,
+                handle: defaultHandle
+            };
+        }
+        else {
+            return element;
+        }
+    };
+    var handleRef = useRef(null);
+    useEffect(function () {
+        if (handleRef.current) {
+            var handleSize_1 = 0;
+            if (vertical) {
+                handleSize_1 = handleRef.current.clientWidth;
+                // 对于传递百分比的特殊处理，这里一开始handle尺寸为0
+                if (handleRef.current.clientHeight === 0) {
+                    handleRef.current.style.height = "".concat(handleSize_1, "px");
                 }
-                newPercent = _this.discrete * (10000 / _this.props.maxDiscrete);
-            }
-            _this.setState({
-                percent: newPercent,
-            }, function () {
-                console.log('【Slider】OnDrag event.clientX--' +
-                    event.clientX +
-                    '-----percent----' +
-                    _this.state.percent +
-                    '-----discrete----' +
-                    _this.discrete +
-                    '-----currentX----' +
-                    (_this.state.percent / 10000) * _this.props.wrapperWidth);
-                if (_this.props.onDrag)
-                    _this.props.onDrag(_this.props.isDiscrete ? _this.discrete : newPercent);
-            });
-            _this.lastX = event.clientX;
-        };
-        _this.onDragEnd = function (event) {
-            _this.lastX = undefined;
-            if (_this.props.isDiscrete == true) {
-                //console.log("OnDragEnd -----discrete----"+this.state.discrete)
-                _this.setState({
-                    percent: _this.discrete * (10000 / _this.props.maxDiscrete),
-                    onDraging: false,
-                }, function () {
-                    console.log('【Slider】DragEnd event.clientX--' +
-                        event.clientX +
-                        '-----percent----' +
-                        _this.state.percent +
-                        '-----discrete----' +
-                        _this.discrete +
-                        '-----currentX----' +
-                        (_this.state.percent / 10000) * _this.props.wrapperWidth);
-                    if (_this.props.onDragEnd) {
-                        _this.props.onDragEnd(_this.props.isDiscrete ? _this.discrete : _this.state.percent);
-                    }
-                });
+                setHandleSize(handleSize_1);
             }
             else {
-                console.log('【Slider】DragEnd event.clientX--' +
-                    event.clientX +
-                    '-----percent----' +
-                    _this.state.percent +
-                    '-----currentX----' +
-                    (_this.state.percent / 10000) * _this.props.wrapperWidth);
-                _this.setState({
-                    percent: (_this.count / _this.props.wrapperWidth) * 10000,
-                    onDraging: false,
-                }, function () {
-                    if (_this.props.onDragEnd) {
-                        _this.props.onDragEnd(_this.props.isDiscrete ? _this.discrete : _this.state.percent);
-                    }
-                });
-            }
-        };
-        _this.onDecClick = function () {
-            //离散的情况
-            if (_this.props.isDiscrete) {
-                if (_this.discrete >= 1) {
-                    _this.discrete -= 1;
-                    if (_this.props.rangeControl) {
-                        _this.discrete = Math.max(_this.discrete, _this.props.startRange);
-                    }
-                    var newPercent = _this.discrete * (10000 / _this.props.maxDiscrete);
-                    _this.setState({
-                        percent: newPercent,
-                    }, function () {
-                        if (_this.props.onDecClick) {
-                            _this.props.onDecClick(_this.discrete);
-                        }
-                    });
+                handleSize_1 = handleRef.current.clientHeight;
+                if (handleRef.current.clientWidth === 0) {
+                    handleRef.current.style.width = "".concat(handleSize_1, "px");
                 }
+                setHandleSize(handleSize_1);
             }
-            //连续的情况
-            else {
-                if (_this.state.percent > 0) {
-                    _this.setState({
-                        percent: _this.state.percent - 1,
-                    }, function () {
-                        if (_this.props.onDecClick) {
-                            _this.props.onDecClick(_this.state.percent);
-                        }
-                    });
-                }
+        }
+    }, [handleRef.current]);
+    var _f = useState(0), handleSize = _f[0], setHandleSize = _f[1];
+    var refRail = useRef(null);
+    var draging = useRef(false);
+    var _g = useState(0), percent = _g[0], setPercent = _g[1];
+    var _h = useState(0), delta = _h[0], setDelta = _h[1];
+    var _j = useState({}), trackStyle = _j[0], setTrackSytle = _j[1];
+    var getDecimalPlaces = function (num) {
+        if (num) {
+            var numStr = num.toString();
+            if (numStr.includes('.')) {
+                return numStr.split('.')[1].length;
             }
-        };
-        _this.onIncClick = function () {
-            //离散的情况
-            if (_this.props.isDiscrete) {
-                if (_this.discrete < _this.props.maxDiscrete) {
-                    _this.discrete += 1;
-                    if (_this.props.rangeControl) {
-                        _this.discrete = Math.max(_this.discrete, _this.props.startRange);
-                    }
-                    var newPercent = _this.discrete * (10000 / _this.props.maxDiscrete);
-                    _this.setState({
-                        // discrete: this.state.discrete + 1,
-                        percent: newPercent,
-                    }, function () {
-                        if (_this.props.onIncClick) {
-                            _this.props.onIncClick(_this.discrete);
-                        }
-                    });
-                }
+        }
+        return 0;
+    };
+    var decimalPlaces = getDecimalPlaces(step);
+    useEffect(function () {
+        // value变化修改
+        if (!draging.current) {
+            var trueValue = min;
+            if (props.value !== undefined) {
+                trueValue = props.value;
             }
-            //连续的情况
-            else {
-                if (_this.state.percent < 10000) {
-                    _this.setState({
-                        percent: _this.state.percent + 1,
-                    }, function () {
-                        if (_this.props.onIncClick) {
-                            _this.props.onIncClick(_this.state.percent);
-                        }
-                    });
+            var newValue = trimValue(trueValue);
+            setPercent(newValue / (max - min));
+            onChange && onChange(newValue);
+        }
+    }, [props.value]);
+    var setValueByPos = function (x, y, status) {
+        if (refRail.current) {
+            var rect = refRail.current.getBoundingClientRect();
+            var newPercent = vertical ? ((rect.y + refRail.current.clientHeight - y) / refRail.current.clientHeight) : (x - rect.x) / refRail.current.clientWidth;
+            var newValue = trimValue(newPercent * (max - min));
+            if (newPercent != percent) {
+                setPercent(newValue / (max - min));
+                if (status == 'move') {
+                    onChange && onChange(newValue);
                 }
             }
-        };
-        //====================================================================================================
-        //样式相关
-        _this.wrapperStyle = function () {
-            var wrapperStyle = __assign({ width: _this.props.wrapperWidth + 'px', height: _this.props.wrapperHeight + 'px' }, rowCenterCenter);
-            return wrapperStyle;
-        };
-        _this.outerStyle = function () {
-            var outerStyle = {
-                width: '100%',
-                height: _this.props.height + 'px',
-                backgroundImage: "url(".concat(_this.props.outerBg, ")"),
-                backgroundSize: '100% 100%',
-                display: 'flex',
-                flexDirection: 'row',
-                justifyContent: 'start',
-                alignItems: 'center',
-            };
-            return outerStyle;
-        };
-        _this.innerStyle = function () {
-            var innerStyle = {
-                // width: innerWidth,
-                height: _this.props.innerHeight != null ? _this.props.innerHeight + 'px' : '100%',
-                backgroundImage: "url(".concat(_this.props.innerBg, ")"),
-                backgroundSize: '100% 100%',
-                display: 'flex',
-                flexDirection: 'row',
-                justifyContent: 'start',
-                alignItems: 'center',
-            };
-            return innerStyle;
-        };
-        _this.dotWrapperStyle = function () {
-            var dotWrapperStyle = __assign({ position: 'absolute', width: _this.props.dotWrapperWidth + 'px', height: _this.props.dotWrapperHeight + 'px' }, rowCenterCenter);
-            return dotWrapperStyle;
-        };
-        _this.dotStyle = function () {
-            var dotStyle = {
-                width: _this.props.dotWidth + 'px',
-                height: _this.props.dotHeight + 'px',
-            };
-            return dotStyle;
-        };
-        _this.incButtonStyle = function () {
-            var incButtonStyle = {
-                width: _this.props.incButtonWidth + 'px',
-                height: _this.props.incButtonHeight + 'px',
-                //marginLeft:this.props.incButtonLeft+"px",
-                //backgroundImage: `url(${this.props.incButtonBg})`,
-            };
-            return incButtonStyle;
-        };
-        _this.decButtonStyle = function () {
-            var decButtonStyle = {
-                width: _this.props.decButtonWidth + 'px',
-                height: _this.props.decButtonHeight + 'px',
-                //marginRight:this.props.decButtonRight+"px",
-                //backgroundImage: `url(${this.props.decButtonBg})`,
-            };
-            return decButtonStyle;
-        };
-        _this.withButtonStyle = function () {
-            var withButtonStyle = __assign({ minWidth: _this.props.overallWidth + 'px' }, rowBetweenCenter);
-            return withButtonStyle;
-        };
-        _this.state = {
-            percent: props.isDiscrete ? _this.props.discrete * (10000 / _this.props.maxDiscrete) : Math.floor(_this.props.percent),
-            onDraging: false,
-            wrapperStyle: _this.wrapperStyle(),
-            outerStyle: _this.outerStyle(),
-            innerStyle: _this.innerStyle(),
-            dotStyle: _this.dotStyle(),
-            dotWrapperStyle: _this.dotWrapperStyle(),
-            incButtonStyle: _this.incButtonStyle(),
-            decButtonStyle: _this.decButtonStyle(),
-            withButtonStyle: _this.withButtonStyle(),
-        };
-        return _this;
-    }
-    //====================================================================================================
-    //生命周期相关
-    Slider.prototype.componentDidMount = function () {
-        this.rect = this.refWrapper.current.getBoundingClientRect();
-    };
-    Slider.prototype.componentWillReceiveProps = function (nextProps) {
-        if (JSON.stringify(this.props) === JSON.stringify(nextProps))
-            return;
-        //用于标识位置的props和其他样式相关的props分开比较
-        var _a = this.props, percent = _a.percent, discrete = _a.discrete, styleProps = __rest(_a, ["percent", "discrete"]);
-        var nextPercent = nextProps.percent, nextDiscrete = nextProps.discrete, nextstyleProps = __rest(nextProps, ["percent", "discrete"]);
-        //拖动状态时，忽略外部传入的percent值，优先用户拖动
-        var shouldUpdatePercent = !this.state.onDraging && !(percent == nextPercent && discrete == nextDiscrete);
-        console.log('检查shouldUpdatePercent', shouldUpdatePercent);
-        if (shouldUpdatePercent) {
-            //如果从外部传入percent/discrete，则组件可根据新props来更新滑动条位置
-            //离散情况
-            if (this.props.isDiscrete == true) {
-                this.discrete = nextProps.discrete;
-                this.setState({
-                    percent: this.discrete * (10000 / this.props.maxDiscrete),
-                });
+            // start和end一定要发
+            if (status == 'start') {
+                onChangeStart && onChangeStart(newValue);
             }
-            //连续情况
-            else {
-                this.setState({
-                    percent: nextProps.percent,
-                });
+            else if (status == 'end') {
+                onChangeComplete && onChangeComplete(newValue);
             }
         }
-        //如果slider传入样式相关props有更改
-        if (JSON.stringify(styleProps) !== JSON.stringify(nextstyleProps)) {
-            this.setState({
-                wrapperStyle: this.wrapperStyle(),
-                outerStyle: this.outerStyle(),
-                innerStyle: this.innerStyle(),
-                dotStyle: this.dotStyle(),
-                dotWrapperStyle: this.dotWrapperStyle(),
-                incButtonStyle: this.incButtonStyle(),
-                decButtonStyle: this.decButtonStyle(),
-                withButtonStyle: this.withButtonStyle(),
-            });
+    };
+    var trimValue = function (value) {
+        var newValue = Math.max(min, Math.min(value, max));
+        if (range !== null && typeof range !== 'boolean') {
+            var minCount = range.minCount, maxCount = range.maxCount;
+            newValue = Math.max(minCount, Math.min(newValue, maxCount));
+        }
+        if (step !== undefined) {
+            var beforeCalcuValue = (Math.round((newValue - min) / step) * step) + min;
+            newValue = parseFloat(beforeCalcuValue.toFixed(decimalPlaces));
         }
+        return newValue;
     };
-    Slider.prototype.render = function () {
-        var hasDot = this.props.hasDot === undefined || this.props.hasDot === true;
-        var innerWidth = Math.floor(this.state.percent / 100) + '%';
-        var dotWrapperMarginLeft = (this.props.wrapperWidth * this.state.percent) / 10000 - this.props.dotWrapperWidth / 2 + 'px';
-        return (h("div", { style: this.props.hasIncDecButton ? this.state.withButtonStyle : {}, id: this.props.id, className: this.props.className },
-            this.props.hasIncDecButton && h("img", { src: this.props.decButtonBg, style: this.state.decButtonStyle, onClick: this.onDecClick }),
-            h("div", { ref: this.refWrapper, style: this.state.wrapperStyle },
-                h("div", { style: __assign(__assign({}, this.state.outerStyle), this.props.outerCss), draggable: true, onDragStart: this.onDragStart, onDrag: this.onDrag, onDragEnd: this.onDragEnd },
-                    h("div", { style: __assign(__assign(__assign({}, this.state.innerStyle), { width: innerWidth }), this.props.innerCss) },
-                        h("div", { style: __assign(__assign({}, this.state.dotWrapperStyle), { marginLeft: dotWrapperMarginLeft }) }, hasDot && h("img", { src: this.props.dotBg, style: __assign(__assign({}, this.state.dotStyle), this.props.dotCss) }))))),
-            this.props.hasIncDecButton && h("img", { src: this.props.incButtonBg, style: this.state.incButtonStyle, onClick: this.onIncClick })));
+    var onDragStart = function (event) {
+        event.stopPropagation();
+        draging.current = true;
+        setValueByPos(event.clientX, event.clientY, 'start');
     };
-    Slider.defaultProps = {
-        percent: 0,
-        wrapperHeight: 34,
-        wrapperWidth: 376,
-        height: 5,
-        dotWidth: 26,
-        dotHeight: 27,
-        dotWrapperWidth: 56,
-        dotWrapperHeight: 57,
-        onDragStart: null,
-        onDrag: null,
-        onDragEnd: null,
-        isDiscrete: true,
-        discrete: 0,
-        maxDiscrete: 100,
-        hasIncDecButton: false,
-        overallWidth: 500,
-        rangeControl: false,
-        hasDot: true,
+    var onDrag = function (event) {
+        if (draging.current) {
+            setValueByPos(event.clientX, event.clientY, 'move');
+        }
+    };
+    var onDragEnd = function (event) {
+        draging.current = false;
+        setValueByPos(event.clientX, event.clientY, 'end');
     };
-    return Slider;
-}(Component));
-export { Slider };
+    useEffect(function () {
+        if (refRail.current) {
+            var delta_1 = percent * (vertical ? refRail.current.clientHeight : refRail.current.clientWidth);
+            setDelta(delta_1);
+            var trackStyle_1 = __assign(__assign(__assign({}, (typeof elementStyleOrClass.track === 'object' ? elementStyleOrClass.track : undefined)), rowBetweenCenter), (vertical ? { height: delta_1, transform: "translateY(".concat(refRail.current.clientHeight - delta_1, ")") } : { width: delta_1 }));
+            setTrackSytle(trackStyle_1);
+        }
+    }, [refRail.current, percent]);
+    var elementStyleOrClass = getElementStyleOrClass();
+    var handleStyle = __assign(__assign({}, (typeof elementStyleOrClass.handle === 'object' ? elementStyleOrClass.handle : undefined)), (vertical ? { top: -handleSize / 2 } : { left: delta - handleSize / 2 }));
+    return (h("div", { id: id, className: rootClassName, style: __assign({}, rowCenterCenter) },
+        h("div", { ref: refRail, className: typeof elementStyleOrClass.rail === 'string' ? elementStyleOrClass.rail : '', style: __assign({}, (typeof elementStyleOrClass.rail === 'object' ? elementStyleOrClass.rail : undefined)), draggable: true, onDragStart: onDragStart, onDrag: onDrag, onDragEnd: onDragEnd }, refRail.current &&
+            h("div", { className: typeof elementStyleOrClass.track === 'string' ? elementStyleOrClass.track : '', style: trackStyle },
+                h("div", { ref: handleRef, className: typeof elementStyleOrClass.handle === 'string' ? elementStyleOrClass.handle : '', style: __assign(__assign({}, handleStyle), { position: 'absolute' }) })))));
+};

package/src/components/react/app/videoPlayer/VideoPlayer.d.ts

@@ -1,5 +1,7 @@
-import { h } from 'preact';
+import { CSSProperties, h } from 'preact';
 export interface VideoPlayerProps {
+    rootId?: string;
+    rootClassName?: string;
     playUrl: string;
     autoPlay?: boolean;
     playEvent?: {
@@ -8,20 +10,20 @@ export interface VideoPlayerProps {
         onEnded?: () => void;
         onFirstFrame?: () => void;
     };
-    elementClass: {
-        playIcon: string;
-        pauseIcon: string;
-        loadingIcon: string;
-        reloadIcon: string;
+    iconElement?: {
+        playIcon?: string | CSSProperties;
+        pauseIcon?: string | CSSProperties;
+        loadingIcon?: string | CSSProperties;
+        reloadIcon?: string | CSSProperties;
     };
-    sliderBG?: {
-        outerBG?: string;
-        innerBG?: string;
-        dotBG?: string;
+    sliderElement?: {
+        rail?: string | CSSProperties;
+        track?: string | CSSProperties;
+        handle?: string | CSSProperties;
+        time?: string | CSSProperties;
     };
     hideSliderDuration?: number;
     videoDuration?: number;
     compRef?: any;
-    rootClassName?: string;
 }
 export declare const VideoPlayer: (props: VideoPlayerProps) => h.JSX.Element;