pixuireactcomponents 1.3.24 → 1.3.26

package/index.d.ts

@@ -3,10 +3,10 @@ export { Button } from "./src/components/react/app/button/Button";
 export { Checkbox } from "./src/components/react/app/checkBox/CheckBox";
 export { Dropdown } from "./src/components/react/app/dropdown/Dropdown";
 export { ImageViewer } from "./src/components/react/app/imageViewer/imageViewer";
-export { Slider } from "./src/components/react/app/slider/Slider";
 export { ToggleGroup } from "./src/components/react/app/togglegroup/ToggleGroup";
 export { GradientText } from "./src/components/react/base/gradient/GradientText";
 export { PVideo } from "./src/components/react/base/pixVideo/PixVideo";
 export { OutlineText } from "./src/components/react/base/outlinetext/OutlineText";
 export { ImgPreLoader } from "./src/components/tools/ImgPreLoader";
 export { Logger } from "./src/components/tools/Logger";
+export { Slider, SliderProps } from "./src/components/react/app/slider/Slider";

package/lib/check/{util.jsx → util.js}

@@ -69,16 +69,16 @@ var Counter = /** @class */ (function (_super) {
         return _this;
     }
     Counter.prototype.render = function (props, state) {
-        return (<div style={{
+        return (h("div", { style: {
                 display: 'flex',
                 flexDirection: 'row',
                 // color: '#f93f00',
                 backgroundColor: state.value % 2 ? '#992288' : '#33ff54',
-            }}>
-				Counter: {state.value}
-				<div style={{ width: '20px' }}/>
-				<div onClick={this.increment}>Increment</div>
-			</div>);
+            } },
+            "Counter: ",
+            state.value,
+            h("div", { style: { width: '20px' } }),
+            h("div", { onClick: this.increment }, "Increment")));
     };
     return Counter;
 }(Component));
@@ -93,14 +93,14 @@ var Title = /** @class */ (function (_super) {
         return _this;
     }
     Title.prototype.render = function (props, state) {
-        return (<div style={{
+        return (h("div", { style: {
                 display: 'flex',
                 flexDirection: 'column',
                 backgroundColor: '#f98833',
-            }}>
-				title: {state.title}
-				<Link href={wp('')}>back home</Link>
-			</div>);
+            } },
+            "title: ",
+            state.title,
+            h(Link, { href: wp('') }, "back home")));
     };
     return Title;
 }(Component));
@@ -116,32 +116,26 @@ var makeError3 = function () { return __awaiter(void 0, void 0, void 0, function
     });
 }); };
 export var getView = function () {
-    return (<div style={{ width: '99%' }}>
-			{/* <Counter /> */}
-			<Router>
-				<Counter loggedIn={true} path={wp('')}/>
-				<Title path={wp('hi')}/>
-			</Router>
-			<Link href={wp('hi')}>Profile</Link>
-			<div className={css.flexrow}>
-				<img src={preact} onClick={function () {
-            console.log('click preact...');
-            makeError2();
-        }}></img>
-				<img src={pix}></img>
-				<div style={{ width: '200px', height: '100px', borderImage: "url(".concat(border, ") 2 2 2 2 fill stretch") }}/>
-			</div>
-			<div style={{ border: '1px solid black', width: 200, height: 200 }}>
-				<video autoPlay src={'https://www.runoob.com/try/demo_source/mov_bbb.mp4'} style={{ loop: 'loop', width: 200, height: 200 }}/>
-			</div>
-			<div onClick={function (e) { return console.log('click', e); }}>Pixui is a embeddable browser engine</div>
-			<div>Preact is a react-like framework</div>
-			<div>with webpack and typescript workflow</div>
-			<div className={css.flexrow}>
-				<div>easy! </div>
-				<div>beautiful!</div>
-				<div>crossplatform!</div>
-			</div>
-			<div>let's start and go further!</div>
-		</div>);
+    return (h("div", { style: { width: '99%' } },
+        h(Router, null,
+            h(Counter, { loggedIn: true, path: wp('') }),
+            h(Title, { path: wp('hi') })),
+        h(Link, { href: wp('hi') }, "Profile"),
+        h("div", { className: css.flexrow },
+            h("img", { src: preact, onClick: function () {
+                    console.log('click preact...');
+                    makeError2();
+                } }),
+            h("img", { src: pix }),
+            h("div", { style: { width: '200px', height: '100px', borderImage: "url(".concat(border, ") 2 2 2 2 fill stretch") } })),
+        h("div", { style: { border: '1px solid black', width: 200, height: 200 } },
+            h("video", { autoPlay: true, src: 'https://www.runoob.com/try/demo_source/mov_bbb.mp4', style: { loop: 'loop', width: 200, height: 200 } })),
+        h("div", { onClick: function (e) { return console.log('click', e); } }, "Pixui is a embeddable browser engine"),
+        h("div", null, "Preact is a react-like framework"),
+        h("div", null, "with webpack and typescript workflow"),
+        h("div", { className: css.flexrow },
+            h("div", null, "easy! "),
+            h("div", null, "beautiful!"),
+            h("div", null, "crossplatform!")),
+        h("div", null, "let's start and go further!")));
 };

package/lib/preact-router/match/src/index.js

@@ -13,6 +13,17 @@ var __extends = (this && this.__extends) || (function () {
         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++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    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)
@@ -56,12 +67,10 @@ var Match = /** @class */ (function (_super) {
 export { Match };
 export var Link = function (_a) {
     var activeClassName = _a.activeClassName, path = _a.path, props = __rest(_a, ["activeClassName", "path"]);
-    return (<Match path={path || props.href}>
-		{function (_a) {
-            var matches = _a.matches;
-            var cls = [props.class || props.className, matches && activeClassName].filter(Boolean).join(' ');
-            return <StaticLink {...props} className={cls}/>;
-        }}
-	</Match>);
+    return (h(Match, { path: path || props.href }, function (_a) {
+        var matches = _a.matches;
+        var cls = [props.class || props.className, matches && activeClassName].filter(Boolean).join(' ');
+        return h(StaticLink, __assign({}, props, { className: cls }));
+    }));
 };
 export default Match;

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "pixuireactcomponents",
-    "version": "1.3.24",
+    "version": "1.3.26",
     "description": "pixui react components",
     "main": "index.js",
     "scripts": {

package/src/components/react/app/bulletscreen/BulletItemAnimation.d.ts

@@ -1,4 +1,4 @@
-import { Component } from 'preact';
+import { Component, h } from 'preact';
 export declare class BulletInfo {
     key: number;
     text: string;
@@ -27,5 +27,5 @@ export declare class BulletItemAnimation extends Component<{
     onAnimationEnd: () => void;
     setFreeChannelTimer: () => void;
     freeChannel: () => void;
-    render(): any;
+    render(): h.JSX.Element;
 }

package/src/components/react/app/bulletscreen/{BulletItemAnimation.jsx → BulletItemAnimation.js}

@@ -14,7 +14,7 @@ var __extends = (this && this.__extends) || (function () {
     };
 })();
 import { createRef } from 'lib/preact/src/create-element';
-import { Component } from 'preact';
+import { Component, h } from 'preact';
 // 弹幕相关个性化信息
 var BulletInfo = /** @class */ (function () {
     function BulletInfo(key, text, channel, color, fontSize) {
@@ -48,15 +48,15 @@ var BulletItemAnimation = /** @class */ (function (_super) {
         var _this = _super.call(this, props) || this;
         _this.freeChannelTimer = undefined;
         _this.refText = createRef();
-        _this.onAnimationStart = function () {
-        };
+        _this.onAnimationStart = function () { };
         _this.onAnimationEnd = function () {
             _this.props.onItemFree();
         };
         _this.setFreeChannelTimer = function () {
             var realWidthStr = window.getComputedStyle(_this.refText.current, null).getPropertyValue('width');
             var widthNum = parseInt(realWidthStr.substring(0, realWidthStr.length - 2));
-            _this.freeChannelTimer = setTimeout(_this.freeChannel, (widthNum + BULLET_DISTANCE) / (_this.props.bulletConfig.screenWidth + BULLET_MAX_LEN) * _this.props.bulletConfig.totalTime);
+            _this.freeChannelTimer = setTimeout(_this.freeChannel, ((widthNum + BULLET_DISTANCE) / (_this.props.bulletConfig.screenWidth + BULLET_MAX_LEN)) *
+                _this.props.bulletConfig.totalTime);
         };
         _this.freeChannel = function () {
             _this.props.onChannelFree(_this.props.bulletInfo.channel);
@@ -72,7 +72,7 @@ var BulletItemAnimation = /** @class */ (function (_super) {
     BulletItemAnimation.prototype.render = function () {
         var isMe = false;
         var bulletStyle = {
-            marginTop: (this.props.bulletInfo.channel * this.props.bulletConfig.channelHeight) + 'px',
+            marginTop: this.props.bulletInfo.channel * this.props.bulletConfig.channelHeight + 'px',
             height: this.props.bulletConfig.channelHeight + 'px',
             left: this.props.bulletConfig.screenWidth + 'px',
             animation: 'bulletKeyframe 10s linear 1',
@@ -85,9 +85,8 @@ var BulletItemAnimation = /** @class */ (function (_super) {
             fontSize: this.props.bulletInfo.fontSize + 'px',
             color: this.props.bulletInfo.color,
         };
-        return (<div ref={this.refText} style={bulletStyle}>
-                <text>{this.props.bulletInfo.text}</text>
-            </div>);
+        return (h("div", { ref: this.refText, style: bulletStyle },
+            h("text", null, this.props.bulletInfo.text)));
     };
     return BulletItemAnimation;
 }(Component));

package/src/components/react/app/bulletscreen/BulletScreenAnimation.d.ts

@@ -1,4 +1,4 @@
-import { Component } from 'preact';
+import { Component, h } from 'preact';
 import { BulletInfo } from './BulletItemAnimation';
 export declare class BulletScreenAnimationData {
     generateCycle: number;
@@ -47,5 +47,5 @@ export declare class BulletScreenAnimation extends Component<{
     getAvailableChannelByPosition: () => any;
     onItemFree: () => void;
     onChannelFree: (channel: any) => void;
-    render(): any;
+    render(): h.JSX.Element;
 }

package/src/components/react/app/bulletscreen/{BulletScreenAnimation.jsx → BulletScreenAnimation.js}

@@ -14,7 +14,7 @@ var __extends = (this && this.__extends) || (function () {
     };
 })();
 /* eslint-disable linebreak-style */
-import { Component } from 'preact';
+import { Component, h } from 'preact';
 import { BulletInfo, BulletConfig, BulletItemAnimation } from './BulletItemAnimation';
 import { Logger } from '../../../tools/Logger';
 // item数据类型
@@ -69,7 +69,7 @@ var BulletScreenAnimation = /** @class */ (function (_super) {
             _this.initChannels();
             var newIndex = _this.state.refreshIndex + 1;
             _this.setState({
-                refreshIndex: newIndex
+                refreshIndex: newIndex,
             });
         };
         _this.SetScreenSizeChanging = function () {
@@ -82,8 +82,7 @@ var BulletScreenAnimation = /** @class */ (function (_super) {
             _this.generateDynamicAnimation('bulletKeyframe', "from{\n                left: ".concat(currentProps.screenWidth, "px\n            }\n            to{\n                left: -400px;\n            }"));
         };
         _this.isScreenSizeSame = function (oldProps, newProps) {
-            if (oldProps.screenWidth == newProps.screenWidth &&
-                oldProps.screenHeight == newProps.screenHeight) {
+            if (oldProps.screenWidth == newProps.screenWidth && oldProps.screenHeight == newProps.screenHeight) {
                 return true;
             }
             return false;
@@ -160,7 +159,7 @@ var BulletScreenAnimation = /** @class */ (function (_super) {
             _this.hasPosition[channel] = true;
         };
         _this.setState({
-            refreshIndex: 0
+            refreshIndex: 0,
         });
         _this.initChannels();
         _this.consumeBulletTimer = setInterval(function () {
@@ -179,7 +178,7 @@ var BulletScreenAnimation = /** @class */ (function (_super) {
                 _this.hasPosition[curChannel] = false;
                 var newIndex = _this.state.refreshIndex + 1;
                 _this.setState({
-                    refreshIndex: newIndex
+                    refreshIndex: newIndex,
                 });
             }
         }, _this.props.screenData.generateCycle);
@@ -222,11 +221,9 @@ var BulletScreenAnimation = /** @class */ (function (_super) {
         };
         var screenData = this.props.screenData;
         var commonInfo = new BulletConfig(this.props.screenWidth, screenData.channelHeight, screenData.totalTime);
-        return (<div style={container}>
-                {bulletDataList.map(function (value, index) {
-                return (<BulletItemAnimation key={value.key} bulletInfo={value} bulletConfig={commonInfo} onItemFree={_this.onItemFree} onChannelFree={_this.onChannelFree}/>);
-            })}
-            </div>);
+        return (h("div", { style: container }, bulletDataList.map(function (value, index) {
+            return (h(BulletItemAnimation, { key: value.key, bulletInfo: value, bulletConfig: commonInfo, onItemFree: _this.onItemFree, onChannelFree: _this.onChannelFree }));
+        })));
     };
     return BulletScreenAnimation;
 }(Component));

package/src/components/react/app/button/{Button.jsx → Button.js}

@@ -9,20 +9,18 @@ var ButtonState;
 export var Button = function (props) {
     var _a;
     var buttonState = (_a = useState(ButtonState.normal), _a[0]), setButtonState = _a[1];
-    return (<div style={buttonState == ButtonState.normal
+    return (h("div", { style: buttonState == ButtonState.normal
             ? props.normalStyle
             : buttonState == ButtonState.hover
                 ? props.hoverStyle
-                : props.pressStyle} onMouseDown={function () {
+                : props.pressStyle, onMouseDown: function () {
             setButtonState(ButtonState.press);
-        }} onMouseUp={function () {
+        }, onMouseUp: function () {
             setButtonState(ButtonState.hover);
             props.clickEvent();
-        }} onMouseOver={function () {
+        }, onMouseOver: function () {
             setButtonState(ButtonState.hover);
-        }} onMouseOut={function () {
+        }, onMouseOut: function () {
             setButtonState(ButtonState.normal);
-        }}>
-            {props.text}
-        </div>);
+        } }, props.text));
 };

package/src/components/react/app/carousel/Carousel.d.ts

@@ -16,7 +16,7 @@ import { h } from 'preact';
  */
 export declare function Carousel(props: {
     cRef?: any;
-    children?: HTMLElement[];
+    children?: preact.JSX.Element[] | HTMLElement[];
     defaultIndex?: number;
     compWidth?: number;
     compHeight?: number;

package/src/components/react/app/carousel/{Carousel.jsx → Carousel.js}

@@ -101,7 +101,7 @@ export function Carousel(props) {
     //组件展示内容长度改变的时候改回到第一个元素，刷新autoplay判断
     useEffect(function () {
         setNextInterval();
-        setShowIndex(1);
+        setShowIndex(defaultIndex);
     }, [children]);
     useEffect(function () {
         //每次跳转前判断打开动画，否则动画关闭以后不会调用handleTransitionEnd
@@ -232,73 +232,32 @@ export function Carousel(props) {
             onclickEvent(showIndex - 1);
         }
     };
-    return (<div style={{ flexDirection: 'column' }}>
-            <div style={__assign(__assign({ position: 'relative' }, itemBoxStyle), { overflow: 'hidden', flexShrink: 0 })}>
-                <div style={{
-            display: 'flex',
-            width: isVertical ? compWidth : compWidth * carouselItems.length + 'px',
-            height: isVertical ? compHeight * carouselItems.length : compHeight + 'px',
-            transition: "transform ".concat(showTransition ? '0.5s' : '0s', " ease 0s"),
-            transform: isVertical
-                ? "translate(0px, ".concat(offset + gesteroffset[1], "px)")
-                : "translate(".concat(offset + gesteroffset[0], "px, 0px)"),
-            flexDirection: isVertical ? 'column' : 'row',
-            flexShrink: 0,
-        }} class="wrapper" onTransitionEnd={handleTransitionEnd}>
-                    {carouselItems.map(function (child) { return child; })}
-                </div>
-            </div>
-
-            {/* 手势 */}
-            <div draggable={true} style={__assign(__assign({}, itemBoxStyle), { position: 'absolute' })} onClick={function () {
-            gestureClick(props);
-        }} class={'GestureComp'} onDragStart={function (e) {
-            if (children.length > 1) {
-                gestureDown(e);
-            }
-        }} onDrag={function (e) {
-            if (children.length > 1) {
-                gestureMove(e);
-            }
-        }} onDragEnd={function () {
-            if (children.length > 1) {
-                gestureUp();
-            }
-        }}/>
-
-            {/* 调试信息 */}
-            {/* {logTex}
-        {gesteroffset[0]}
-        {gesteroffset[1]} */}
-
-            {/* 页码图标 */}
-            {/* <div style={{ flexDirection: isVertical ? 'column' : 'row' }}>
-            {children.map((v, i) => {
-                return (
-                    <div
-                        style={showIndex == i + 1 ? indicatorSelectedStyle : indicatorStyle}
-                        onClick={() => {
-                            setShowIndex(i + 1);
-                        }}
-                    />
-                );
-            })}
-        </div> */}
-        </div>);
+    return (h("div", { style: { flexDirection: 'column' } },
+        h("div", { draggable: true, style: __assign(__assign({}, itemBoxStyle), { position: 'absolute' }), onClick: function (ev) {
+                gestureClick(props);
+            }, class: 'GestureComp', onDragStart: function (e) {
+                if (children.length > 1) {
+                    gestureDown(e);
+                }
+            }, onDrag: function (e) {
+                if (children.length > 1) {
+                    gestureMove(e);
+                }
+            }, onDragEnd: function () {
+                if (children.length > 1) {
+                    gestureUp();
+                }
+            } },
+            h("div", { style: __assign(__assign({ position: 'relative' }, itemBoxStyle), { overflow: 'hidden', flexShrink: 0 }) },
+                h("div", { style: {
+                        display: 'flex',
+                        width: isVertical ? compWidth : compWidth * carouselItems.length + 'px',
+                        height: isVertical ? compHeight * carouselItems.length : compHeight + 'px',
+                        transition: "transform ".concat(showTransition ? '0.5s' : '0s', " ease 0s"),
+                        transform: isVertical
+                            ? "translate(0px, ".concat(offset + gesteroffset[1], "px)")
+                            : "translate(".concat(offset + gesteroffset[0], "px, 0px)"),
+                        flexDirection: isVertical ? 'column' : 'row',
+                        flexShrink: 0,
+                    }, class: "wrapper", onTransitionEnd: handleTransitionEnd }, carouselItems.map(function (child) { return child; }))))));
 }
-// Carousel.Item = (props) => {
-//     return (
-//         <div
-//             style={
-//                 {
-//                     // width: '100%',
-//                     // height: '100%',
-//                     // flexShrink: 0,
-//                 }
-//             }
-//         >
-//             {' '}
-//             {props.children}
-//         </div>
-//     );
-// }

package/src/components/react/app/checkBox/{CheckBox.jsx → CheckBox.js}

@@ -9,5 +9,5 @@ export function Checkbox(props) {
         }
         setSelected(!selected);
     };
-    return <div onClick={cli}>{selected ? selectedNode : notSelectedNode}</div>;
+    return h("div", { onClick: cli }, selected ? selectedNode : notSelectedNode);
 }

package/src/components/react/app/dropdown/{Dropdown.jsx → Dropdown.js}

@@ -74,9 +74,7 @@ var Dropdown = /** @class */ (function (_super) {
         if (!this.state.isSpread) {
             this.props.unspreadMainUI.props.info = this.props.config.datas[this.state.selectedIndex];
             this.props.unspreadMainUI.props.openList = this.openList;
-            return (<div>
-                    {this.props.unspreadMainUI}
-                </div>);
+            return (h("div", null, this.props.unspreadMainUI));
         }
         this.props.spreadMainUI.props.info = this.props.config.datas[this.state.selectedIndex];
         this.props.spreadMainUI.props.closeList = this.closeList;
@@ -84,12 +82,10 @@ var Dropdown = /** @class */ (function (_super) {
         var _optionsUI = this.props.optionsUI.filter(function (v) { return v.props.index != _this.state.selectedIndex; });
         if (_optionsUI.length > 0)
             _optionsUI[_optionsUI.length - 1].props['isLast'] = true;
-        return (<div>
-                <div style={this.props.config.spreadStyle}>
-                    {this.props.spreadMainUI}
-                    <div style={optionsDivStyle}>{_optionsUI}</div>
-                </div>
-            </div>);
+        return (h("div", null,
+            h("div", { style: this.props.config.spreadStyle },
+                this.props.spreadMainUI,
+                h("div", { style: optionsDivStyle }, _optionsUI))));
     };
     return Dropdown;
 }(Component));

package/src/components/react/app/imageViewer/{imageViewer.jsx → imageViewer.js}

@@ -90,17 +90,13 @@ var ImageViewer = /** @class */ (function (_super) {
         //         forceupdate: false,
         //     })
         // }
-        return (<div style={this.props.backgroundStyle} onClick={this.onClose}>
-                <div style={this.props.imageBoxStyle}>
-                    <div id="imageArea" style={this.props.imageAreaStyle}>
-                        {this.state.reCalSize &&
-                <img style={this.props.imageStyle} src={this.props.src} width={this.state.imageWidth} height={this.state.imageHeight} onClick={this.onBlock}/>}
-                        
-                        {/* 用于获取原图片大小 */!this.state.reCalSize &&
-                <img onLoad={this.handleImageLoad} style={{ display: 'hidden' }} src={this.props.src}/>}
-                    </div>
-                </div>
-            </div>);
+        return (h("div", { style: this.props.backgroundStyle, onClick: this.onClose },
+            h("div", { style: this.props.imageBoxStyle },
+                h("div", { id: "imageArea", style: this.props.imageAreaStyle },
+                    this.state.reCalSize &&
+                        h("img", { style: this.props.imageStyle, src: this.props.src, width: this.state.imageWidth, height: this.state.imageHeight, onClick: this.onBlock }),
+                    !this.state.reCalSize &&
+                        h("img", { onLoad: this.handleImageLoad, style: { display: 'hidden' }, src: this.props.src })))));
     };
     return ImageViewer;
 }(Component));

package/src/components/react/app/slider/Slider.d.ts

@@ -1,14 +1,14 @@
-import { Component, h } from 'preact';
+import { Component, CSSProperties, h } from 'preact';
 export interface SliderProps {
-    percent: number;
-    wrapperWidth: number;
-    wrapperHeight: number;
-    height: number;
+    percent?: number;
+    wrapperWidth?: number;
+    wrapperHeight?: number;
+    height?: number;
     innerHeight?: number;
-    dotWidth: number;
-    dotHeight: number;
-    dotWrapperWidth: number;
-    dotWrapperHeight: number;
+    dotWidth?: number;
+    dotHeight?: number;
+    dotWrapperWidth?: number;
+    dotWrapperHeight?: number;
     outerBg: string;
     innerBg: string;
     dotBg: string;
@@ -18,7 +18,7 @@ export interface SliderProps {
     isDiscrete: boolean | null;
     discrete?: number;
     maxDiscrete?: number;
-    hasIncDecButton: boolean | null;
+    hasIncDecButton?: boolean | null;
     incButtonWidth?: number;
     incButtonHeight?: number;
     decButtonWidth?: number;
@@ -33,10 +33,43 @@ export interface SliderProps {
     endRange?: number;
     hasDot?: boolean;
 }
-export declare class Slider extends Component<SliderProps, {
+interface SliderState {
     percent: number;
-}> {
-    discrete: number;
+    onDraging: boolean;
+    wrapperStyle: CSSProperties;
+    outerStyle: CSSProperties;
+    innerStyle: CSSProperties;
+    dotStyle: CSSProperties;
+    dotWrapperStyle: CSSProperties;
+    incButtonStyle: CSSProperties;
+    decButtonStyle: CSSProperties;
+    withButtonStyle: CSSProperties;
+}
+export declare class Slider extends Component<SliderProps, SliderState> {
+    static defaultProps: {
+        percent: number;
+        wrapperHeight: number;
+        wrapperWidth: number;
+        height: number;
+        dotWidth: number;
+        dotHeight: number;
+        dotWrapperWidth: number;
+        dotWrapperHeight: number;
+        onDragStart: null;
+        onDrag: null;
+        onDragEnd: null;
+        isDiscrete: boolean;
+        discrete: number;
+        maxDiscrete: number;
+        hasIncDecButton: boolean;
+        overallWidth: number;
+        rangeControl: boolean;
+        hasDot: boolean;
+    };
+    private lastX;
+    private count;
+    private rect;
+    private discrete;
     private refWrapper;
     constructor(props: any);
     componentDidMount(): void;
@@ -46,13 +79,14 @@ export declare class Slider extends Component<SliderProps, {
     onDragEnd: (event: any) => void;
     onDecClick: () => void;
     onIncClick: () => void;
-    computeWrapperStyle: () => void;
-    computeOuterStyle: () => void;
-    computeInnerStyle: () => void;
-    computeDotWrapperStyle: () => void;
-    computeDotStyle: () => void;
-    computeIncButtonStyle: () => void;
-    computeDecButtonStyle: () => void;
-    computeWithButtonStyle: () => void;
+    wrapperStyle: () => import("../../../../../lib/preact/src/jsx").JCSSProperties;
+    outerStyle: () => import("../../../../../lib/preact/src/jsx").JCSSProperties;
+    innerStyle: () => import("../../../../../lib/preact/src/jsx").JCSSProperties;
+    dotWrapperStyle: () => import("../../../../../lib/preact/src/jsx").JCSSProperties;
+    dotStyle: () => import("../../../../../lib/preact/src/jsx").JCSSProperties;
+    incButtonStyle: () => import("../../../../../lib/preact/src/jsx").JCSSProperties;
+    decButtonStyle: () => import("../../../../../lib/preact/src/jsx").JCSSProperties;
+    withButtonStyle: () => import("../../../../../lib/preact/src/jsx").JCSSProperties;
     render(): h.JSX.Element;
 }
+export {};