pixuireactcomponents 1.3.25 → 1.3.27

package/index.d.ts

@@ -1,12 +1,11 @@
 export { Carousel } from "./src/components/react/app/carousel/Carousel";
 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.27",
     "description": "pixui react components",
     "main": "index.js",
     "scripts": {

package/src/components/react/app/button/Button.d.ts

@@ -6,6 +6,8 @@ interface ButtonProps {
     hoverStyle: JCSSProperties;
     pressStyle: JCSSProperties;
     clickEvent: Function;
+    id: string;
+    className: string;
 }
 export declare let Button: (props: ButtonProps) => h.JSX.Element;
 export {};

package/src/components/react/app/button/Button.js

@@ -9,11 +9,7 @@ var ButtonState;
 export var Button = function (props) {
     var _a;
     var buttonState = (_a = useState(ButtonState.normal), _a[0]), setButtonState = _a[1];
-    return (h("div", { style: buttonState == ButtonState.normal
-            ? props.normalStyle
-            : buttonState == ButtonState.hover
-                ? props.hoverStyle
-                : props.pressStyle, onMouseDown: function () {
+    return (h("div", { style: buttonState == ButtonState.normal ? props.normalStyle : buttonState == ButtonState.hover ? props.hoverStyle : props.pressStyle, onMouseDown: function () {
             setButtonState(ButtonState.press);
         }, onMouseUp: function () {
             setButtonState(ButtonState.hover);
@@ -22,5 +18,5 @@ export var Button = function (props) {
             setButtonState(ButtonState.hover);
         }, onMouseOut: function () {
             setButtonState(ButtonState.normal);
-        } }, props.text));
+        }, id: props.id, className: props.className }, props.text));
 };

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

@@ -12,9 +12,11 @@ import { h } from 'preact';
  * @param isVertical - 轮播元素滚动方向
  * @param touchable - 是否允许手势切换
  * @param onSlideChange - 切换元素后的回调函数
- * @param onclickEvent - 点击元素的回调函数
+ * @param onClick - 点击元素的回调函数
  */
 export declare function Carousel(props: {
+    id?: string;
+    className?: string;
     cRef?: any;
     children?: preact.JSX.Element[] | HTMLElement[];
     defaultIndex?: number;
@@ -26,5 +28,5 @@ export declare function Carousel(props: {
     isVertical?: boolean;
     touchable?: boolean;
     onSlideChange?: Function | null;
-    onclickEvent?: Function | null;
+    onClick?: Function | null;
 }): h.JSX.Element;

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

@@ -19,7 +19,7 @@ var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
     return to.concat(ar || Array.prototype.slice.call(from));
 };
 import { h } from 'preact';
-import { useState, useEffect, useRef, useMemo, useImperativeHandle } from '../../../../../lib/preact/hooks/src';
+import { useImperativeHandle, useState, useRef, useMemo, useEffect } from 'preact/hooks';
 // import { memo } from '../../../../../lib/preact/compat/src';
 //组件优化，防止组件的props没有改变但父组件刷新时导致组件刷新
 // export let Carousel = memo(Carouselinner, (prev, next) => {
@@ -58,29 +58,48 @@ import { useState, useEffect, useRef, useMemo, useImperativeHandle } from '../..
  * @param isVertical - 轮播元素滚动方向
  * @param touchable - 是否允许手势切换
  * @param onSlideChange - 切换元素后的回调函数
- * @param onclickEvent - 点击元素的回调函数
+ * @param onClick - 点击元素的回调函数
  */
 export function Carousel(props) {
-    var _a = props.children, children = _a === void 0 ? [] : _a, _b = props.defaultIndex, defaultIndex = _b === void 0 ? 1 : _b, _c = props.compWidth, compWidth = _c === void 0 ? 100 : _c, _d = props.compHeight, compHeight = _d === void 0 ? 100 : _d, _e = props.autoplay, autoplay = _e === void 0 ? true : _e, _f = props.switchDuration, switchDuration = _f === void 0 ? 3000 : _f, _g = props.loop, loop = _g === void 0 ? true : _g, _h = props.isVertical, isVertical = _h === void 0 ? false : _h, _j = props.touchable, touchable = _j === void 0 ? true : _j, _k = props.onSlideChange, onSlideChange = _k === void 0 ? null : _k, _l = props.onclickEvent, onclickEvent = _l === void 0 ? null : _l;
+    var _a = props.id, id = _a === void 0 ? '' : _a, _b = props.className, className = _b === void 0 ? '' : _b, _c = props.children, children = _c === void 0 ? [] : _c, _d = props.defaultIndex, defaultIndex = _d === void 0 ? 1 : _d, _e = props.compWidth, compWidth = _e === void 0 ? 100 : _e, _f = props.compHeight, compHeight = _f === void 0 ? 100 : _f, _g = props.autoplay, autoplay = _g === void 0 ? true : _g, _h = props.switchDuration, switchDuration = _h === void 0 ? 3000 : _h, _j = props.loop, loop = _j === void 0 ? true : _j, _k = props.isVertical, isVertical = _k === void 0 ? false : _k, _l = props.touchable, touchable = _l === void 0 ? true : _l, _m = props.onSlideChange, onSlideChange = _m === void 0 ? null : _m, _o = props.onClick, onClick = _o === void 0 ? null : _o;
     // console.log('children', children.length);
+    var safeNext = function () {
+        if (!canClickSwitch.current)
+            return;
+        canClickSwitch.current = false;
+        setTimeout(function () {
+            canClickSwitch.current = true;
+        }, 1000);
+        handleNext();
+    };
+    var safePrev = function () {
+        if (!canClickSwitch.current)
+            return;
+        canClickSwitch.current = false;
+        setTimeout(function () {
+            canClickSwitch.current = true;
+        }, 1000);
+        handlePrev();
+    };
     useImperativeHandle(props.cRef, function () { return ({
-        handleNext: handleNext,
-        handlePrev: handlePrev,
+        handleNext: safeNext,
+        handlePrev: safePrev,
         setShowIndex: setShowIndex,
     }); });
     var duration = switchDuration < 1000 ? 1000 : switchDuration;
-    var _m = useState(defaultIndex), showIndex = _m[0], setShowIndex = _m[1];
+    var _p = useState(defaultIndex), showIndex = _p[0], setShowIndex = _p[1];
     //轮播元素正在滚动
     var isMoving = useRef(false);
     //鼠标手势信息
     var isMouseDown = useRef(false);
     var mouseDownX = useRef(0);
     var mouseDownY = useRef(0);
+    //pixui在 onTransitionEnd 之后马上触发 transform 会丢onTransitionEnd
+    var canClickSwitch = useRef(true);
     var handleNextRef = useRef(function () { });
     var nextInterval = useRef();
-    var _o = useState(true), showTransition = _o[0], setShowTransition = _o[1];
-    var _p = useState([0, 0]), gesteroffset = _p[0], setGesteroffset = _p[1];
-    var _q = useState(''), logTex = _q[0], setLogTex = _q[1];
+    var _q = useState(true), showTransition = _q[0], setShowTransition = _q[1];
+    var _r = useState([0, 0]), gesteroffset = _r[0], setGesteroffset = _r[1];
     var offset = useMemo(function () { return -(isVertical ? compHeight : compWidth) * showIndex; }, [showIndex]);
     var itemBoxStyle = {
         minWidth: compWidth + 'px',
@@ -101,7 +120,7 @@ export function Carousel(props) {
     //组件展示内容长度改变的时候改回到第一个元素，刷新autoplay判断
     useEffect(function () {
         setNextInterval();
-        setShowIndex(1);
+        setShowIndex(defaultIndex);
     }, [children]);
     useEffect(function () {
         //每次跳转前判断打开动画，否则动画关闭以后不会调用handleTransitionEnd
@@ -136,7 +155,6 @@ export function Carousel(props) {
         }
     };
     var handleNext = function () {
-        // console.log('nex', isMoving.current, showIndex, isVertical ? `translate(0px, ${offset}px)` : `translate(${offset}px, 0px)`)
         if (!loop && showIndex == carouselItems.length - 2)
             return;
         if (isMoving.current)
@@ -228,24 +246,12 @@ export function Carousel(props) {
     var gestureClick = function (props) {
         if (isMoving.current)
             return;
-        if (onclickEvent) {
-            onclickEvent(showIndex - 1);
+        if (onClick) {
+            onClick(showIndex - 1);
         }
     };
-    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 () {
+    return (h("div", { style: { flexDirection: 'column', width: compWidth, height: compHeight }, id: id, className: className },
+        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 +265,15 @@ 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/checkBox/CheckBox.d.ts

@@ -1,7 +1,10 @@
 import { h } from 'preact';
-export declare function Checkbox(props: {
-    selectedChanged: Function | null;
-    defauleSelected: boolean;
-    selectedNode: any;
-    notSelectedNode: any;
+export declare function CheckBox(props: {
+    id?: string;
+    className?: string;
+    selectedChanged?: Function;
+    defauleSelected?: boolean;
+    selectedNode?: any;
+    notSelectedNode?: any;
+    toggleSize?: number;
 }): h.JSX.Element;

package/src/components/react/app/checkBox/CheckBox.js

@@ -1,13 +1,12 @@
 import { h } from 'preact';
-import { useState } from '../../../../../lib/preact/hooks/src';
-export function Checkbox(props) {
-    var _a = props.selectedChanged, selectedChanged = _a === void 0 ? null : _a, _b = props.defauleSelected, defauleSelected = _b === void 0 ? false : _b, _c = props.selectedNode, selectedNode = _c === void 0 ? null : _c, _d = props.notSelectedNode, notSelectedNode = _d === void 0 ? null : _d;
-    var _e = useState(defauleSelected), selected = _e[0], setSelected = _e[1];
-    var cli = function () {
-        if (selectedChanged) {
-            selectedChanged(!selected);
-        }
-        setSelected(!selected);
-    };
-    return h("div", { onClick: cli }, selected ? selectedNode : notSelectedNode);
+import { useState } from 'preact/hooks';
+export function CheckBox(props) {
+    var _a = props.id, id = _a === void 0 ? '' : _a, _b = props.className, className = _b === void 0 ? '' : _b, _c = props.selectedChanged, selectedChanged = _c === void 0 ? null : _c, _d = props.defauleSelected, defauleSelected = _d === void 0 ? false : _d, _e = props.toggleSize, toggleSize = _e === void 0 ? 20 : _e;
+    var _f = useState(defauleSelected), selected = _f[0], setSelected = _f[1];
+    props.selectedNode = props.selectedNode || (h("img", { src: "https://game.gtimg.cn/images/gamelet/cp/pixui-jnResources/check-box.png", style: { width: toggleSize + 'px', height: toggleSize + 'px' } }));
+    props.notSelectedNode = props.notSelectedNode || (h("img", { src: "https://game.gtimg.cn/images/gamelet/cp/pixui-jnResources/blank-check-box.png", style: { width: toggleSize + 'px', height: toggleSize + 'px' } }));
+    return (h("div", { onClick: function () {
+            selectedChanged && selectedChanged(!selected);
+            setSelected(!selected);
+        }, id: id, className: className }, selected ? props.selectedNode : props.notSelectedNode));
 }

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

@@ -1,14 +1,16 @@
-import { Component, h } from 'preact';
+import { Component, CSSProperties, h } from 'preact';
 export interface SliderProps {
-    percent: number;
-    wrapperWidth: number;
-    wrapperHeight: number;
-    height: number;
+    id?: string;
+    className?: string;
+    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 +20,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 +35,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 +81,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,111 +24,165 @@ 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',
     flexDirection: 'row',
     justifyContent: 'center',
-    alignItems: 'center'
+    alignItems: 'center',
 };
 var rowBetweenCenter = {
     display: 'flex',
     flexDirection: 'row',
     justifyContent: 'space-between',
-    alignItems: 'center'
+    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;
+            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) {
-            if (event.clientX < rect.left - 50 || event.clientX > rect.right + 50)
+            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;
-            if (lastX == undefined) {
-                lastX = event.clientX;
+            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;
             }
-            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;
+            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);
-                // 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);
             }
             _this.setState({
-                percent: newPercent
+                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));
+                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);
             });
-            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));
+                    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);
                     }
                 });
             }
             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);
-                }
+                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 && _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
+                        percent: newPercent,
                     }, function () {
                         if (_this.props.onDecClick) {
                             _this.props.onDecClick(_this.discrete);
@@ -140,7 +194,7 @@ var Slider = /** @class */ (function (_super) {
             else {
                 if (_this.state.percent > 0) {
                     _this.setState({
-                        percent: _this.state.percent - 1
+                        percent: _this.state.percent - 1,
                     }, function () {
                         if (_this.props.onDecClick) {
                             _this.props.onDecClick(_this.state.percent);
@@ -151,16 +205,16 @@ 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);
                     _this.setState({
                         // discrete: this.state.discrete + 1,
-                        percent: newPercent
+                        percent: newPercent,
                     }, function () {
                         if (_this.props.onIncClick) {
                             _this.props.onIncClick(_this.discrete);
@@ -172,7 +226,7 @@ var Slider = /** @class */ (function (_super) {
             else {
                 if (_this.state.percent < 10000) {
                     _this.setState({
-                        percent: _this.state.percent + 1
+                        percent: _this.state.percent + 1,
                     }, function () {
                         if (_this.props.onIncClick) {
                             _this.props.onIncClick(_this.state.percent);
@@ -181,11 +235,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, ")"),
@@ -193,97 +250,145 @@ var Slider = /** @class */ (function (_super) {
                 display: 'flex',
                 flexDirection: 'row',
                 justifyContent: 'start',
-                alignItems: 'center'
+                alignItems: 'center',
             };
+            return outerStyle;
         };
-        _this.computeInnerStyle = function () {
-            var innerWidth = Math.floor(_this.state.percent / 100) + '%';
-            innerStyle = {
-                width: innerWidth,
-                height: (_this.props.innerHeight != null) ? _this.props.innerHeight + 'px' : '100%',
+        _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'
+                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
-            // backgroundColor: '#FF000066'
-            );
+        _this.dotWrapperStyle = function () {
+            var dotWrapperStyle = __assign({ position: 'absolute', width: _this.props.dotWrapperWidth + 'px', height: _this.props.dotWrapperHeight + 'px' }, rowCenterCenter);
+            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 : {}, 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: 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 };