pixuireactcomponents 1.3.25 → 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/package.json

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

package/src/components/react/app/carousel/Carousel.js

@@ -101,7 +101,7 @@ export function Carousel(props) {
     //组件展示内容长度改变的时候改回到第一个元素，刷新autoplay判断
     useEffect(function () {
         setNextInterval();
-        setShowIndex(1);
+        setShowIndex(defaultIndex);
     }, [children]);
     useEffect(function () {
         //每次跳转前判断打开动画，否则动画关闭以后不会调用handleTransitionEnd
@@ -233,19 +233,7 @@ export function Carousel(props) {
         }
     };
     return (h("div", { style: { flexDirection: 'column' } },
-        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; }))),
-        h("div", { draggable: true, style: __assign(__assign({}, itemBoxStyle), { position: 'absolute' }), onClick: function () {
+        h("div", { draggable: true, style: __assign(__assign({}, itemBoxStyle), { position: 'absolute' }), onClick: function (ev) {
                 gestureClick(props);
             }, class: 'GestureComp', onDragStart: function (e) {
                 if (children.length > 1) {
@@ -259,21 +247,17 @@ export function Carousel(props) {
                 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/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 {};

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

@@ -24,6 +24,17 @@ 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';
 var rowCenterCenter = {
     display: 'flex',
@@ -37,54 +48,46 @@ var rowBetweenCenter = {
     justifyContent: 'space-between',
     alignItems: 'center'
 };
-var wrapperStyle;
-var outerStyle;
-var innerStyle;
-var dotStyle;
-var dotWrapperStyle;
-var incButtonStyle;
-var decButtonStyle;
-var withButtonStyle;
-var lastX = undefined; // 上一次位置的横坐标
-var count = 0; // 拖动条距离最左端的位置 [0, this.props.wrapperWidth]
-var rect = undefined; // 滑动区域
-var Slider = /** @class */ (function (_super) {
+export 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));
-            lastX = event.clentX;
-            count = _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) {
-            if (event.clientX < rect.left - 50 || event.clientX > rect.right + 50)
+            if (event.clientX < _this.rect.left - 50 || event.clientX > _this.rect.right + 50)
                 return;
-            if (lastX == undefined) {
-                lastX = event.clientX;
+            if (_this.lastX == undefined) {
+                _this.lastX = event.clientX;
                 return;
             }
-            var move = Number(event.clientX) - Number(lastX);
-            count += move;
-            count = Math.min(_this.props.wrapperWidth, count);
-            count = Math.max(0, count);
-            var newPercent = count / _this.props.wrapperWidth * 10000;
-            if (_this.props.isDiscrete == true && _this.props.maxDiscrete != null) {
-                newPercent = count / _this.props.wrapperWidth * _this.props.maxDiscrete;
+            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);
-                // this.setState({
-                //     discrete: Math.round(newPercent),
-                // })
                 if (_this.props.rangeControl) {
-                    if (_this.props.endRange != null)
-                        _this.discrete = Math.min(_this.discrete, _this.props.endRange);
-                    if (_this.props.startRange != null)
-                        _this.discrete = Math.max(_this.discrete, _this.props.startRange);
+                    _this.discrete = Math.min(_this.discrete, _this.props.endRange);
+                    _this.discrete = Math.max(_this.discrete, _this.props.startRange);
                 }
                 newPercent = _this.discrete * (10000 / _this.props.maxDiscrete);
             }
@@ -95,14 +98,15 @@ var Slider = /** @class */ (function (_super) {
                 if (_this.props.onDrag)
                     _this.props.onDrag(_this.props.isDiscrete ? _this.discrete : newPercent);
             });
-            lastX = event.clientX;
+            _this.lastX = event.clientX;
         };
         _this.onDragEnd = function (event) {
-            lastX = undefined;
-            if (_this.props.isDiscrete == true && _this.props.maxDiscrete != null) {
+            _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) {
@@ -112,22 +116,26 @@ var Slider = /** @class */ (function (_super) {
             }
             else {
                 console.log('【Slider】DragEnd event.clientX--' + event.clientX + '-----percent----' + _this.state.percent + '-----currentX----' + (_this.state.percent / 10000 * _this.props.wrapperWidth));
-                if (_this.props.onDragEnd) {
-                    _this.props.onDragEnd(_this.props.isDiscrete ? _this.discrete : _this.state.percent);
-                }
+                _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 && _this.props.maxDiscrete) {
+            if (_this.props.isDiscrete) {
                 if (_this.discrete >= 1) {
                     _this.discrete -= 1;
-                    if (_this.props.rangeControl && _this.props.startRange != null) {
+                    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.onDecClick) {
@@ -151,10 +159,10 @@ var Slider = /** @class */ (function (_super) {
         };
         _this.onIncClick = function () {
             //离散的情况
-            if (_this.props.isDiscrete && _this.props.maxDiscrete) {
+            if (_this.props.isDiscrete) {
                 if (_this.discrete < _this.props.maxDiscrete) {
                     _this.discrete += 1;
-                    if (_this.props.rangeControl && _this.props.startRange != null) {
+                    if (_this.props.rangeControl) {
                         _this.discrete = Math.max(_this.discrete, _this.props.startRange);
                     }
                     var newPercent = _this.discrete * (10000 / _this.props.maxDiscrete);
@@ -181,11 +189,14 @@ var Slider = /** @class */ (function (_super) {
                 }
             }
         };
-        _this.computeWrapperStyle = function () {
-            wrapperStyle = __assign({ width: _this.props.wrapperWidth + 'px', height: _this.props.wrapperHeight + 'px' }, rowCenterCenter);
+        //====================================================================================================
+        //样式相关
+        _this.wrapperStyle = function () {
+            var wrapperStyle = __assign({ width: _this.props.wrapperWidth + 'px', height: _this.props.wrapperHeight + 'px' }, rowCenterCenter);
+            return wrapperStyle;
         };
-        _this.computeOuterStyle = function () {
-            outerStyle = {
+        _this.outerStyle = function () {
+            var outerStyle = {
                 width: '100%',
                 height: _this.props.height + 'px',
                 backgroundImage: "url(".concat(_this.props.outerBg, ")"),
@@ -195,11 +206,11 @@ var Slider = /** @class */ (function (_super) {
                 justifyContent: 'start',
                 alignItems: 'center'
             };
+            return outerStyle;
         };
-        _this.computeInnerStyle = function () {
-            var innerWidth = Math.floor(_this.state.percent / 100) + '%';
-            innerStyle = {
-                width: innerWidth,
+        _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%',
@@ -208,82 +219,133 @@ var Slider = /** @class */ (function (_super) {
                 justifyContent: 'start',
                 alignItems: 'center'
             };
+            return innerStyle;
         };
-        _this.computeDotWrapperStyle = function () {
-            dotWrapperStyle = __assign({ position: 'absolute', width: _this.props.dotWrapperWidth + 'px', height: _this.props.dotWrapperHeight + 'px', 
-                //marginTop: (this.props.height - this.props.dotWrapperHeight) / 2 + "px",
-                marginLeft: (_this.props.wrapperWidth * _this.state.percent / 10000 - _this.props.dotWrapperWidth / 2) + 'px' }, rowCenterCenter
+        _this.dotWrapperStyle = function () {
+            var dotWrapperStyle = __assign({ position: 'absolute', width: _this.props.dotWrapperWidth + 'px', height: _this.props.dotWrapperHeight + 'px' }, rowCenterCenter
             // backgroundColor: '#FF000066'
             );
+            return dotWrapperStyle;
         };
-        _this.computeDotStyle = function () {
-            dotStyle = {
+        _this.dotStyle = function () {
+            var dotStyle = {
                 width: _this.props.dotWidth + 'px',
                 height: _this.props.dotHeight + 'px',
             };
+            return dotStyle;
         };
-        _this.computeIncButtonStyle = function () {
-            incButtonStyle = {
+        _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.computeDecButtonStyle = function () {
-            decButtonStyle = {
+        _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.computeWithButtonStyle = function () {
-            withButtonStyle = __assign({ minWidth: _this.props.overallWidth + 'px' }, rowBetweenCenter);
+        _this.withButtonStyle = function () {
+            var withButtonStyle = __assign({ minWidth: _this.props.overallWidth + 'px' }, rowBetweenCenter);
+            return withButtonStyle;
         };
         _this.state = {
-            percent: (props.discrete != null && _this.props.maxDiscrete != null && _this.props.discrete != null) ? _this.props.discrete * (10000 / _this.props.maxDiscrete) : Math.floor(_this.props.percent),
-            //discrete: Math.round(this.props.discrete==null?0:this.props.discrete)
+            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(),
         };
-        _this.computeWrapperStyle();
-        _this.computeOuterStyle();
         return _this;
     }
+    //====================================================================================================
+    //生命周期相关
     Slider.prototype.componentDidMount = function () {
-        rect = this.refWrapper.current.getBoundingClientRect();
+        this.rect = this.refWrapper.current.getBoundingClientRect();
     };
     Slider.prototype.componentWillReceiveProps = function (nextProps) {
-        if (nextProps.percent == this.props.percent && nextProps.discrete == this.props.discrete)
+        if (JSON.stringify(this.props) === JSON.stringify(nextProps))
             return;
-        if (this.props.isDiscrete == true && this.props.maxDiscrete != null) {
-            this.discrete = nextProps.discrete;
-            this.setState({
-                //discrete:nextProps.discrete,
-                percent: this.discrete * (10000 / this.props.maxDiscrete)
-            });
+        //用于标识位置的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)
+                });
+            }
+            //连续情况
+            else {
+                this.setState({
+                    percent: nextProps.percent,
+                });
+            }
         }
-        else {
+        //如果slider传入样式相关props有更改
+        if (JSON.stringify(styleProps) !== JSON.stringify(nextstyleProps)) {
             this.setState({
-                percent: nextProps.percent,
+                wrapperStyle: this.wrapperStyle(),
+                outerStyle: this.outerStyle(),
+                innerStyle: this.innerStyle(),
+                dotStyle: this.dotStyle(),
+                dotWrapperStyle: this.dotWrapperStyle(),
+                incButtonStyle: this.incButtonStyle(),
+                decButtonStyle: this.decButtonStyle(),
+                withButtonStyle: this.withButtonStyle(),
             });
         }
     };
     Slider.prototype.render = function () {
-        this.computeInnerStyle();
-        this.computeDotWrapperStyle();
-        this.computeDotStyle();
-        this.computeIncButtonStyle();
-        this.computeDecButtonStyle();
-        this.computeWithButtonStyle();
         var hasDot = this.props.hasDot === undefined || this.props.hasDot === true;
-        return (h("div", { style: this.props.hasIncDecButton ? withButtonStyle : {} },
-            this.props.hasIncDecButton && h("img", { src: this.props.decButtonBg, style: decButtonStyle, onClick: this.onDecClick }),
-            h("div", { ref: this.refWrapper, style: wrapperStyle },
-                h("div", { style: outerStyle },
-                    h("div", { style: innerStyle },
-                        h("div", { style: dotWrapperStyle, draggable: true, onDragStart: this.onDragStart, onDrag: this.onDrag, onDragEnd: this.onDragEnd }, hasDot && h("img", { src: this.props.dotBg, style: dotStyle }))))),
-            this.props.hasIncDecButton && h("img", { src: this.props.incButtonBg, style: incButtonStyle, onClick: this.onIncClick })));
+        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 : {} },
+            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: this.state.outerStyle },
+                    h("div", { style: __assign(__assign({}, this.state.innerStyle), { width: innerWidth }) },
+                        h("div", { style: __assign(__assign({}, this.state.dotWrapperStyle), { marginLeft: dotWrapperMarginLeft }), draggable: true, onDragStart: this.onDragStart, onDrag: this.onDrag, onDragEnd: this.onDragEnd }, hasDot && h("img", { src: this.props.dotBg, style: this.state.dotStyle }))))),
+            this.props.hasIncDecButton && h("img", { src: this.props.incButtonBg, style: this.state.incButtonStyle, onClick: this.onIncClick })));
+    };
+    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,
     };
     return Slider;
 }(Component));
-export { Slider };