pixuireactcomponents 1.4.13 → 1.5.0

package/src/components/react/app/videoPlayer/VideoPlayer.js

@@ -37,6 +37,45 @@ var VideoStatus;
     VideoStatus[VideoStatus["Pause"] = 2] = "Pause";
     VideoStatus[VideoStatus["End"] = 3] = "End";
 })(VideoStatus || (VideoStatus = {}));
+var defaultIconStyle = [
+    {
+        position: 'relative', left: '-45%', top: '42%', width: '5%', paddingTop: '5%', backgroundImage: 'url(https://game.gtimg.cn/images/gamelet/cp/pixui-components/new_video_play.png)', backgroundSize: '100% 100%'
+    },
+    {
+        position: 'relative', left: '-45%', top: '42%', width: '5%', paddingTop: '5%', backgroundImage: 'url(https://game.gtimg.cn/images/gamelet/cp/pixui-components/new_video_pause.png)', backgroundSize: '100% 100%'
+    },
+    {
+        position: 'relative', left: '-45%', top: '42%', width: '5%', paddingTop: '5%', backgroundImage: 'url(https://game.gtimg.cn/images/gamelet/cp/pixui-components/video_loading.png)', backgroundSize: '100% 100%'
+    },
+    {
+        position: 'relative', left: '-45%', top: '42%', width: '5%', paddingTop: '5%', backgroundImage: 'url(https://game.gtimg.cn/images/gamelet/cp/pixui-components/new_video_reload.png)', backgroundSize: '100% 100%'
+    }
+];
+var defaultSliderStyle = {
+    rail: {
+        backgroundColor: 'rgb(240,240,240)',
+        width: '90%',
+        height: '30%',
+        border: '0px solid #000',
+        borderRadius: '10',
+        left: '0%'
+    },
+    track: {
+        position: 'relative',
+        backgroundColor: '#91caff',
+        width: '100%',
+        height: '100%',
+        border: '0px solid #000',
+        borderRadius: '10'
+    },
+    handle: {
+        position: 'absolute',
+        backgroundColor: '#1677ff',
+        borderRadius: '50%',
+        width: '200%',
+        height: '200%',
+    },
+};
 var openLog = false;
 var videoLog = function () {
     var msg = [];
@@ -48,16 +87,16 @@ var videoLog = function () {
     }
 };
 export var VideoPlayer = function (props) {
-    var _a;
-    var _b = props.playUrl, playUrl = _b === void 0 ? '' : _b, _c = props.autoPlay, autoPlay = _c === void 0 ? true : _c, playEvent = props.playEvent, elementClass = props.elementClass, _d = props.hideSliderDuration, hideSliderDuration = _d === void 0 ? 3000 : _d, sliderBG = props.sliderBG, videoDuration = props.videoDuration, compRef = props.compRef, rootClassName = props.rootClassName;
+    var rootId = props.rootId, rootClassName = props.rootClassName, _a = props.playUrl, playUrl = _a === void 0 ? '' : _a, _b = props.autoPlay, autoPlay = _b === void 0 ? true : _b, playEvent = props.playEvent, iconElement = props.iconElement, _c = props.hideSliderDuration, hideSliderDuration = _c === void 0 ? 3000 : _c, sliderElement = props.sliderElement, videoDuration = props.videoDuration, compRef = props.compRef;
     var isStreaming = !playUrl.endsWith('.mp4');
     var refVideo = useRef(null);
-    var _e = useState(VideoStatus.Loading), videoStatus = _e[0], setVideoStatus = _e[1];
-    var _f = useState(0), currentTime = _f[0], setCurrentTime = _f[1];
-    var _g = useState(0), totalTime = _g[0], setTotalTime = _g[1];
-    var _h = useState(false), showSlider = _h[0], setShowSlider = _h[1];
+    var _d = useState(VideoStatus.Loading), videoStatus = _d[0], setVideoStatus = _d[1];
+    var _e = useState(0), currentTime = _e[0], setCurrentTime = _e[1];
+    var _f = useState(0), totalTime = _f[0], setTotalTime = _f[1];
+    var _g = useState(false), showSlider = _g[0], setShowSlider = _g[1];
     var sliderTimmer = useRef(null);
     var rootRef = useRef();
+    var isDragingRef = useRef(false);
     var updatePlayTime = function () {
         if (videoStatus != VideoStatus.Playing || isStreaming)
             return;
@@ -113,15 +152,19 @@ export var VideoPlayer = function (props) {
     // 开始拖就长显Bar
     var onSliderDragStart = function () {
         videoLog('onDragStart-----------------');
+        isDragingRef.current = true;
         clearTimeout(sliderTimmer.current);
         refVideo.current.pause();
     };
     var onSliderDrag = function (value) {
-        var totlaTime = (value / 100) * getDuration();
-        var playSeconds = Math.floor(totlaTime / 1000 + 0.5);
-        videoLog('onSliderDrag, set currentTime:', playSeconds);
-        setCurrentTime(playSeconds);
-        refVideo.current.currentTime = totlaTime / 1000;
+        // console.warn('isDragingRef: ', isDragingRef.current)
+        if (isDragingRef.current) {
+            console.log('value: ', value, getDuration());
+            var totalTime_1 = value * getDuration();
+            var playSeconds = Math.floor(totalTime_1 / 1000 + 0.5);
+            videoLog('onSliderDrag, set currentTime:', playSeconds);
+            setCurrentTime(playSeconds);
+        }
     };
     var setShowUI = function (show, direct) {
         if (direct === void 0) { direct = false; }
@@ -131,15 +174,20 @@ export var VideoPlayer = function (props) {
         setShowSlider(show);
     };
     // 结束拖就3秒隐藏Bar
-    var onSliderDragEnd = function () {
-        videoLog('onDragEnd-----------------');
-        if (hideSliderDuration > 0) {
-            clearTimeout(sliderTimmer.current);
-            sliderTimmer.current = setTimeout(function () {
-                setShowUI(false);
-            }, hideSliderDuration);
+    var onSliderDragEnd = function (value) {
+        console.log('onSliderDragEnd======');
+        if (isDragingRef.current) {
+            isDragingRef.current = false;
+            videoLog('onDragEnd-----------------, ', value * getDuration());
+            if (hideSliderDuration > 0) {
+                clearTimeout(sliderTimmer.current);
+                sliderTimmer.current = setTimeout(function () {
+                    setShowUI(false);
+                }, hideSliderDuration);
+            }
+            refVideo.current.seek(currentTime);
+            refVideo.current.play();
         }
-        refVideo.current.play();
     };
     var onplaying = function () {
         // 加载第一帧画面
@@ -210,7 +258,6 @@ export var VideoPlayer = function (props) {
     };
     if (compRef) {
         compRef.current = {
-            switchPlayState: switchPlayState,
             setShowUI: function (show) {
                 setShowUI(show, true);
             },
@@ -226,10 +273,43 @@ export var VideoPlayer = function (props) {
             getPlayStatus: function () {
                 return videoStatus;
             },
+            currentTime: currentTime,
+            totalTime: totalTime
         };
     }
-    videoLog('currentTime', currentTime, 'totalTime', totalTime);
-    return (h("div", { className: rootClassName, ref: rootRef },
+    // videoLog('currentTime', currentTime, 'totalTime', totalTime);
+    var getIconStyleOrClass = function (videoStatus) {
+        if (iconElement == undefined) {
+            switch (videoStatus) {
+                case VideoStatus.Playing:
+                    return defaultIconStyle[1];
+                case VideoStatus.Pause:
+                    return defaultIconStyle[0];
+                case VideoStatus.Loading:
+                    return defaultIconStyle[2];
+                case VideoStatus.End:
+                    return defaultIconStyle[3];
+                default:
+                    return {};
+            }
+        }
+        else {
+            switch (videoStatus) {
+                case VideoStatus.Playing:
+                    return iconElement === null || iconElement === void 0 ? void 0 : iconElement.pauseIcon;
+                case VideoStatus.Pause:
+                    return iconElement === null || iconElement === void 0 ? void 0 : iconElement.playIcon;
+                case VideoStatus.Loading:
+                    return iconElement === null || iconElement === void 0 ? void 0 : iconElement.loadingIcon;
+                case VideoStatus.End:
+                    return iconElement === null || iconElement === void 0 ? void 0 : iconElement.reloadIcon;
+                default:
+                    return '' || {};
+            }
+        }
+    };
+    var iconStyleOrClass = getIconStyleOrClass(videoStatus);
+    return (h("div", { id: rootId, className: rootClassName, ref: rootRef },
         h("video", { ref: refVideo, src: playUrl, "object-fit": "no", autoPlay: autoPlay, style: { width: '100%', height: '100%' }, onPlaying: onplaying, onPlay: onplaying, onError: onerror, onEnded: onended, onPause: onpause, onWaiting: onwaiting, onLoadStart: function () {
                 console.warn('onloadstart');
             }, onLoadedData: function () {
@@ -241,51 +321,27 @@ export var VideoPlayer = function (props) {
                 videoLog('screenClickerStyle click');
                 e.stopPropagation();
                 onScreenClick();
-            } }, showSlider ? (h("div", { className: videoStatus == VideoStatus.Playing
-                ? elementClass === null || elementClass === void 0 ? void 0 : elementClass.pauseIcon
-                : videoStatus == VideoStatus.Pause
-                    ? elementClass === null || elementClass === void 0 ? void 0 : elementClass.playIcon
-                    : videoStatus == VideoStatus.Loading
-                        ? elementClass === null || elementClass === void 0 ? void 0 : elementClass.loadingIcon
-                        : elementClass === null || elementClass === void 0 ? void 0 : elementClass.reloadIcon, onClick: function (e) {
-                e.stopPropagation();
-                switchPlayState();
-            } })) : null),
-        showSlider && !isStreaming ? (h("div", { style: {
-                width: '100%',
-                height: '15px',
-                fontSize: '18px',
+            } },
+            h("div", { className: typeof iconStyleOrClass === 'string' ? iconStyleOrClass : '', style: __assign(__assign({}, (typeof iconStyleOrClass === 'object' ? iconStyleOrClass : undefined)), { visibility: showSlider ? 'visible' : 'hidden' }), onClick: function (e) {
+                    e.stopPropagation();
+                    switchPlayState();
+                } })),
+        !isStreaming ? (h("div", { style: {
+                width: '90%',
+                height: '10%',
+                fontSize: '5%',
                 color: '#FFFFFF',
                 flexDirection: 'row',
-                justifyContent: 'spaceAround',
+                justifyContent: 'flex-start',
                 alignItems: 'center',
                 position: 'absolute',
-                bottom: '10px',
-                margin: '10px',
-                marginBottom: '30px',
+                bottom: '3%',
+                right: '2%',
+                visibility: showSlider ? 'visible' : 'hidden'
             } },
-            h("text", null, FormatSecondCountDownTime(currentTime)),
-            h("div", { style: { marginRight: '30px', marginLeft: '30px' } },
-                h(Slider, __assign({}, progressData, { wrapperWidth: ((_a = rootRef.current) === null || _a === void 0 ? void 0 : _a.clientWidth) - 180, outerBg: (sliderBG === null || sliderBG === void 0 ? void 0 : sliderBG.outerBG) || '', innerBg: (sliderBG === null || sliderBG === void 0 ? void 0 : sliderBG.innerBG) || '', dotBg: (sliderBG === null || sliderBG === void 0 ? void 0 : sliderBG.dotBG) || '', onDrag: onSliderDrag, onDragEnd: onSliderDragEnd, onDragStart: onSliderDragStart, discrete: totalTime > 0 ? Math.floor((currentTime / totalTime) * 100 + 0.5) : 0 }))),
-            h("text", null, FormatSecondCountDownTime(totalTime)))) : null));
-};
-var progressData = {
-    percent: 0,
-    wrapperHeight: 15,
-    wrapperWidth: window.innerWidth - 180,
-    height: 3,
-    dotWidth: 12,
-    dotHeight: 12,
-    dotWrapperWidth: 42,
-    dotWrapperHeight: 42,
-    isDiscrete: true,
-    maxDiscrete: 100,
-    outerBg: '',
-    innerBg: '',
-    dotBg: '',
-    onDragStart: null,
-    onDrag: null,
-    onDragEnd: null,
+            h(Slider, { element: sliderElement != undefined ? sliderElement : defaultSliderStyle, min: 0, max: 1, step: 0.001, value: totalTime > 0 ? currentTime / totalTime : 0, onChangeStart: onSliderDragStart, onChange: onSliderDrag, onChangeComplete: onSliderDragEnd }),
+            h("div", { className: typeof (sliderElement === null || sliderElement === void 0 ? void 0 : sliderElement.time) === 'string' ? sliderElement.time : '', style: __assign(__assign({}, (typeof (sliderElement === null || sliderElement === void 0 ? void 0 : sliderElement.time) === 'object' ? sliderElement.time : null)), { flexShrink: 0, right: '1%' }) },
+                h("text", null, "".concat(FormatSecondCountDownTime(currentTime), "/").concat(FormatSecondCountDownTime(totalTime)))))) : null));
 };
 var FormatSecondCountDownTime = function (seconds) {
     var minutes = Math.floor(seconds / 60);

package/src/components/react/app/wheelPicker/WheelPicker.d.ts

@@ -1,15 +1,23 @@
 import { CSSProperties, h } from 'preact';
+export interface wheelPickerElement {
+    itemTextStyle?: string | CSSProperties;
+    selectedTextStyle?: string | CSSProperties;
+    AboveMaskAreaStyle?: string | CSSProperties;
+    BelowMaskAreaStyle?: string | CSSProperties;
+    selectedAreaStyle?: string | CSSProperties;
+}
+export interface wheelPickerOption {
+    value: string;
+    label?: h.JSX.Element;
+}
 export interface WheelPickerProps {
-    wrapperStyle: CSSProperties;
-    items: string[];
+    rootId?: string;
+    rootClassName?: string;
+    options: string[];
+    defaultOption?: string;
     visibleAbove?: number;
     visibleBelow?: number;
-    itemTextStyle: CSSProperties;
-    selectedTextStyle?: CSSProperties;
-    AboveMaskAreaStyle?: CSSProperties;
-    BelowMaskAreaStyle?: CSSProperties;
-    selectedAreaStyle?: CSSProperties;
-    firstSelectIndex?: number;
-    onChange?: (index: number) => void;
+    onChange?: (value: string) => void;
+    element?: wheelPickerElement;
 }
 export declare const WheelPicker: (props: WheelPickerProps) => h.JSX.Element;

package/src/components/react/app/wheelPicker/WheelPicker.js

@@ -17,7 +17,6 @@ var defaulWrapperStyle = {
     alignItems: 'center'
 };
 var defaultItemTextStyle = {
-    fontFamily: 'Font_FounderZZ',
     fontStyle: 'normal',
     fontSize: '24px',
     lineHeight: '32px',
@@ -27,14 +26,13 @@ var defaultItemTextStyle = {
     color: '#000000'
 };
 var defaultSelectedTextStyle = {
-    fontFamily: 'Font_FounderZZ',
     fontStyle: 'normal',
     fontSize: '24px',
     lineHeight: '32px',
     display: 'flex',
     alignItems: 'center',
     textAlign: 'center',
-    color: '#F0E6D2',
+    color: 'white',
 };
 var defaultScrollStyle = {
     width: '100%',
@@ -46,7 +44,7 @@ var defaultScrollStyle = {
     alignItems: 'center',
     overflowStyle: 'none',
 };
-var defaultMaskAreaStyle = {
+var maskAreaStyle = {
     position: 'absolute',
     pointerEvents: 'none'
 };
@@ -56,8 +54,65 @@ var defaultItemStyle = {
     alignItems: 'center',
     width: '100%'
 };
+var defaultMaskAreaStyle = {
+    width: '100%',
+    backgroundColor: 'rgba(5, 5, 5, 0.06)'
+};
+var defaultSelectedAreaStyle = {
+    borderBottom: '1px solid black',
+    borderTop: '1px solid black',
+    width: '100%',
+    backgroundColor: '#1677ff'
+};
 export var WheelPicker = function (props) {
-    var wrapperStyle = props.wrapperStyle, items = props.items, _a = props.visibleAbove, visibleAbove = _a === void 0 ? 1 : _a, _b = props.visibleBelow, visibleBelow = _b === void 0 ? 1 : _b, itemTextStyle = props.itemTextStyle, selectedTextStyle = props.selectedTextStyle, _c = props.firstSelectIndex, firstSelectIndex = _c === void 0 ? 0 : _c, AboveMaskAreaStyle = props.AboveMaskAreaStyle, BelowMaskAreaStyle = props.BelowMaskAreaStyle, selectedAreaStyle = props.selectedAreaStyle, onChange = props.onChange;
+    var rootId = props.rootId, rootClassName = props.rootClassName, options = props.options, _a = props.visibleAbove, visibleAbove = _a === void 0 ? 1 : _a, _b = props.visibleBelow, visibleBelow = _b === void 0 ? 1 : _b, _c = props.defaultOption, defaultOption = _c === void 0 ? options[0] : _c, element = props.element, onChange = props.onChange;
+    var getElementStyleOrClass = function () {
+        if (element == undefined) {
+            return {
+                itemTextStyle: defaultItemTextStyle,
+                selectedTextStyle: defaultSelectedTextStyle,
+                AboveMaskAreaStyle: defaultMaskAreaStyle,
+                BelowMaskAreaStyle: defaultMaskAreaStyle,
+                selectedAreaStyle: defaultSelectedAreaStyle
+            };
+        }
+        else {
+            return element;
+        }
+    };
+    var elementStyleOrClass = getElementStyleOrClass();
+    var rootRef = useRef(null);
+    var getSelectedStyle = function (index) {
+        if (elementStyleOrClass.selectedTextStyle) {
+            if (index === selectIndex) {
+                return typeof elementStyleOrClass.selectedTextStyle === 'object' ? elementStyleOrClass.selectedTextStyle : undefined;
+            }
+        }
+        return typeof elementStyleOrClass.itemTextStyle === 'object' ? elementStyleOrClass.itemTextStyle : undefined;
+    };
+    var getSelectedClass = function (index) {
+        if (elementStyleOrClass.selectedTextStyle) {
+            if (index === selectIndex) {
+                return typeof elementStyleOrClass.selectedTextStyle === 'string' ? elementStyleOrClass.selectedTextStyle : '';
+            }
+        }
+        return typeof elementStyleOrClass.itemTextStyle === 'string' ? elementStyleOrClass.itemTextStyle : '';
+    };
+    useEffect(function () {
+        if (rootRef.current) {
+            var _a = rootRef.current.getBoundingClientRect(), width = _a.width, height = _a.height;
+            var calcuItemHeight_1 = height / (visibleAbove + visibleBelow + 1);
+            setItemHeight(calcuItemHeight_1);
+            var defaultIndex_1 = options.indexOf(defaultOption || options[0]);
+            setSelectIndex(defaultIndex_1 + visibleAbove);
+            var timer_1 = setTimeout(function () {
+                if (scrollRef.current) {
+                    scrollRef.current.scrollTop = defaultIndex_1 * calcuItemHeight_1;
+                }
+            }, 0);
+            return function () { return clearTimeout(timer_1); };
+        }
+    }, [rootRef.current]); // 依赖 rootRef.current，当它变化时重新执行
     var scrollRef = useRef(null);
     var _d = useState(0), itemHeight = _d[0], setItemHeight = _d[1];
     var _e = useState([]), itemList = _e[0], setItemList = _e[1];
@@ -65,26 +120,26 @@ export var WheelPicker = function (props) {
     var _g = useState(0), selectIndex = _g[0], setSelectIndex = _g[1];
     var scrollTimmer = useRef(null);
     useEffect(function () {
-        var calcuItemHeight = parseInt(wrapperStyle.height) / (visibleAbove + visibleBelow + 1);
-        setItemHeight(calcuItemHeight);
-        setSelectIndex(firstSelectIndex + visibleAbove);
-        setItemList(fillBlankItems());
-        var timer = setTimeout(function () {
-            if (scrollRef.current) {
-                scrollRef.current.scrollTop = firstSelectIndex * calcuItemHeight;
-            }
-        }, 0);
-        return function () { return clearTimeout(timer); };
-    }, []);
-    useEffect(function () {
-        if (onChange) {
-            onChange(selectIndex - visibleAbove);
+        if (onChange && selectIndex - visibleAbove >= 0 && selectIndex - visibleAbove < options.length) {
+            onChange(options[selectIndex - visibleAbove]);
         }
     }, [selectIndex]);
+    useEffect(function () {
+        setItemList(fillBlankItems());
+    }, [props.options]);
     var fillBlankItems = function () {
         var startPadding = new Array(visibleAbove).fill('');
         var endPadding = new Array(visibleBelow).fill('');
-        return startPadding.concat(items, endPadding);
+        return startPadding.concat(options, endPadding);
+    };
+    // 创建一个函数来获取当前时间戳
+    var getCurrentTime = function () {
+        if (typeof performance !== 'undefined' && typeof performance.now === 'function') {
+            return performance.now();
+        }
+        else {
+            return Date.now();
+        }
     };
     var onScroll = function (e) {
         // console.log('onScroll: ', scrollRef.current.scrollTop)
@@ -95,7 +150,7 @@ export var WheelPicker = function (props) {
         scrollTimmer.current = window.setTimeout(function () {
             var finalPos = (selectIndex - visibleAbove) * itemHeight;
             if (!isDraging && scrollRef.current.scrollTop < finalPos - 1 || scrollRef.current.scrollTop > finalPos + 1) {
-                animateScroll(scrollRef.current.scrollTop, finalPos, performance.now(), 100);
+                animateScroll(scrollRef.current.scrollTop, finalPos, getCurrentTime(), 100);
             }
             if (scrollTimmer.current) {
                 clearTimeout(scrollTimmer.current);
@@ -109,7 +164,7 @@ export var WheelPicker = function (props) {
     };
     var animateScroll = function (currentPos, targetPos, startTime, duration) {
         var step = function () {
-            var currentTime = performance.now();
+            var currentTime = getCurrentTime();
             var time = Math.min(1, (currentTime - startTime) / duration);
             var timeFunction = time * (2 - time);
             var newPos = currentPos + (targetPos - currentPos) * timeFunction;
@@ -128,7 +183,7 @@ export var WheelPicker = function (props) {
             setIsDraging(false);
             if (!scrollTimmer.current) {
                 var finalPos = (selectIndex - visibleAbove) * itemHeight;
-                animateScroll(scrollRef.current.scrollTop, finalPos, performance.now(), 100);
+                animateScroll(scrollRef.current.scrollTop, finalPos, getCurrentTime(), 100);
                 var nowSelectIndex = Math.round((scrollRef.current.scrollTop + visibleAbove * itemHeight) / itemHeight);
                 if (selectIndex !== nowSelectIndex) {
                     setSelectIndex(nowSelectIndex);
@@ -136,12 +191,15 @@ export var WheelPicker = function (props) {
             }
         }
     };
-    return (h("div", { style: __assign(__assign({}, wrapperStyle), defaulWrapperStyle) },
+    return (h("div", { id: rootId, className: rootClassName, style: __assign({}, defaulWrapperStyle), ref: rootRef },
+        elementStyleOrClass.selectedAreaStyle &&
+            h("div", { className: typeof elementStyleOrClass.selectedAreaStyle === 'string' ? elementStyleOrClass.selectedAreaStyle : '', style: __assign(__assign(__assign({}, (typeof elementStyleOrClass.selectedAreaStyle === 'object' ? elementStyleOrClass.selectedAreaStyle : undefined)), maskAreaStyle), { height: "".concat(itemHeight, "px"), top: "".concat(itemHeight * visibleAbove, "px") }) }),
+        elementStyleOrClass.AboveMaskAreaStyle &&
+            h("div", { className: typeof elementStyleOrClass.AboveMaskAreaStyle === 'string' ? elementStyleOrClass.AboveMaskAreaStyle : '', style: __assign(__assign(__assign({}, (typeof elementStyleOrClass.AboveMaskAreaStyle === 'object' ? elementStyleOrClass.AboveMaskAreaStyle : undefined)), maskAreaStyle), { height: "".concat(itemHeight * visibleAbove, "px"), top: '0px' }) }),
+        elementStyleOrClass.BelowMaskAreaStyle &&
+            h("div", { className: typeof elementStyleOrClass.BelowMaskAreaStyle === 'string' ? elementStyleOrClass.BelowMaskAreaStyle : '', style: __assign(__assign(__assign({}, (typeof elementStyleOrClass.BelowMaskAreaStyle === 'object' ? elementStyleOrClass.BelowMaskAreaStyle : undefined)), maskAreaStyle), { height: "".concat(itemHeight * visibleBelow, "px"), top: "".concat(itemHeight * (visibleAbove + 1), "px") }) }),
         h("div", { style: __assign({}, defaultScrollStyle), 
             // movement-type={'clamped'} 
             ref: scrollRef, onScroll: function (e) { onScroll(e); }, onMouseDown: function () { onMouseEvent(true); }, onMouseUp: function () { onMouseEvent(false); } }, itemList.map(function (item, index) { return (h("div", { style: __assign(__assign({}, defaultItemStyle), { minHeight: "".concat(itemHeight, "px") }) },
-            h("text", { style: selectedTextStyle ? (index === selectIndex ? selectedTextStyle : itemTextStyle) : itemTextStyle }, item))); })),
-        selectedAreaStyle && h("div", { style: __assign(__assign(__assign({}, selectedAreaStyle), defaultMaskAreaStyle), { height: "".concat(itemHeight, "px"), top: "".concat(itemHeight * visibleAbove, "px") }) }),
-        AboveMaskAreaStyle && h("div", { style: __assign(__assign(__assign({}, AboveMaskAreaStyle), defaultMaskAreaStyle), { height: "".concat(itemHeight * visibleAbove, "px"), top: '0px' }) }),
-        BelowMaskAreaStyle && h("div", { style: __assign(__assign(__assign({}, BelowMaskAreaStyle), defaultMaskAreaStyle), { height: "".concat(itemHeight * visibleBelow, "px"), top: "".concat(itemHeight * (visibleAbove + 1), "px") }) })));
+            h("div", { className: getSelectedClass(index), style: getSelectedStyle(index) }, item))); }))));
 };