@alixpartners/ui-components 1.20.85 → 1.20.86
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +2 -2
- package/dist/esm/components/ApSlider/ApSlider.js +52 -30
- package/dist/esm/components/ApSlider/ApSlider.js.map +1 -1
- package/dist/esm/components/ApSlider/ApSlider.styles.js +23 -11
- package/dist/esm/components/ApSlider/ApSlider.styles.js.map +1 -1
- package/dist/esm/components/ApSlider/ApSlider.utils.js.map +1 -1
- package/dist/types/components/ApSlider/ApSlider.d.ts +5 -1
- package/dist/types/components/ApSlider/ApSlider.styles.d.ts +3 -1
- package/dist/umd/index.js +1 -1
- package/package.json +1 -1
package/CHANGELOG.md
CHANGED
|
@@ -29,39 +29,35 @@ var ApSlider = /** @class */ (function (_super) {
|
|
|
29
29
|
lineRef: React.createRef()
|
|
30
30
|
};
|
|
31
31
|
_this.onLineClick = function (e) {
|
|
32
|
-
var
|
|
33
|
-
var
|
|
34
|
-
var stepWidth =
|
|
35
|
-
ref: containerRef,
|
|
36
|
-
min: min,
|
|
37
|
-
max: max,
|
|
38
|
-
circleWidth: ApSlider_utils_1.CIRCLE_WIDTH
|
|
39
|
-
});
|
|
32
|
+
var lineRef = _this.state.lineRef;
|
|
33
|
+
var _a = _this.props, min = _a.min, onChange = _a.onChange;
|
|
34
|
+
var stepWidth = _this.getCurrentStepWidth();
|
|
40
35
|
var lineParams = lineRef.getBoundingClientRect();
|
|
41
36
|
var clickX = e.clientX - lineParams.x;
|
|
42
37
|
var newValue = min + Math.round(clickX / stepWidth);
|
|
43
38
|
onChange(newValue);
|
|
44
39
|
};
|
|
45
40
|
_this.onMouseDown = function (e) {
|
|
46
|
-
var
|
|
41
|
+
var _a = _this.props, disabled = _a.disabled, onMouseDown = _a.onMouseDown, value = _a.value;
|
|
47
42
|
if (!disabled) {
|
|
48
43
|
e.stopPropagation();
|
|
49
44
|
_this.setState({ isDrag: true });
|
|
50
45
|
document.body.addEventListener('mousemove', _this.onMouseMove);
|
|
51
46
|
document.body.addEventListener('mouseup', _this.onMouseUp);
|
|
47
|
+
if (onMouseDown) {
|
|
48
|
+
onMouseDown(value);
|
|
49
|
+
}
|
|
52
50
|
}
|
|
53
51
|
};
|
|
54
52
|
_this.onMouseMove = function (e) {
|
|
55
53
|
var _a = _this.state, containerRef = _a.containerRef, movement = _a.movement;
|
|
56
54
|
var _b = _this.props, min = _b.min, max = _b.max, onChange = _b.onChange, step = _b.step, value = _b.value;
|
|
57
|
-
var movementX = e.movementX;
|
|
55
|
+
var movementX = e.movementX, target = e.target;
|
|
56
|
+
if (!containerRef.contains(target)) {
|
|
57
|
+
_this.onMouseUp();
|
|
58
|
+
}
|
|
58
59
|
var newMovement = movement + movementX;
|
|
59
|
-
var stepWidth =
|
|
60
|
-
ref: containerRef,
|
|
61
|
-
min: min,
|
|
62
|
-
max: max,
|
|
63
|
-
circleWidth: ApSlider_utils_1.CIRCLE_WIDTH
|
|
64
|
-
}) * step;
|
|
60
|
+
var stepWidth = _this.getCurrentStepWidth() * step;
|
|
65
61
|
if (Math.abs(newMovement) >= stepWidth) {
|
|
66
62
|
var valueChange = value + Math.round(newMovement / stepWidth) * step;
|
|
67
63
|
if (newMovement > 0) {
|
|
@@ -77,12 +73,22 @@ var ApSlider = /** @class */ (function (_super) {
|
|
|
77
73
|
}
|
|
78
74
|
};
|
|
79
75
|
_this.onMouseUp = function () {
|
|
76
|
+
var movement = _this.state.movement;
|
|
77
|
+
var _a = _this.props, max = _a.max, onChange = _a.onChange, onMouseUp = _a.onMouseUp, step = _a.step, value = _a.value;
|
|
78
|
+
var stepWidth = _this.getCurrentStepWidth() * step;
|
|
79
|
+
if (stepWidth <= movement * 2) {
|
|
80
|
+
var valueChange = value + step;
|
|
81
|
+
onChange(valueChange < max ? valueChange : max);
|
|
82
|
+
}
|
|
80
83
|
_this.setState({
|
|
81
84
|
isDrag: false,
|
|
82
85
|
movement: 0,
|
|
83
86
|
});
|
|
84
87
|
document.body.removeEventListener('mousemove', _this.onMouseMove);
|
|
85
88
|
document.body.removeEventListener('mouseup', _this.onMouseUp);
|
|
89
|
+
if (onMouseUp) {
|
|
90
|
+
onMouseUp(value);
|
|
91
|
+
}
|
|
86
92
|
};
|
|
87
93
|
_this.setContainerRef = function (ref) {
|
|
88
94
|
_this.setState({
|
|
@@ -94,38 +100,54 @@ var ApSlider = /** @class */ (function (_super) {
|
|
|
94
100
|
lineRef: ref
|
|
95
101
|
});
|
|
96
102
|
};
|
|
97
|
-
_this.
|
|
103
|
+
_this.getCurrentStepWidth = function () {
|
|
98
104
|
var containerRef = _this.state.containerRef;
|
|
99
105
|
var _a = _this.props, min = _a.min, max = _a.max;
|
|
100
|
-
|
|
106
|
+
return ApSlider_utils_1.getStepWidth({
|
|
101
107
|
ref: containerRef,
|
|
102
108
|
min: min,
|
|
103
109
|
max: max,
|
|
104
110
|
circleWidth: ApSlider_utils_1.CIRCLE_WIDTH
|
|
105
111
|
});
|
|
106
|
-
|
|
112
|
+
};
|
|
113
|
+
_this.getLeftPx = function (sliderValue) {
|
|
114
|
+
var movement = _this.state.movement;
|
|
115
|
+
var _a = _this.props, max = _a.max, min = _a.min;
|
|
116
|
+
var stepWidth = _this.getCurrentStepWidth();
|
|
117
|
+
var currentLeftPx = (sliderValue - min) * stepWidth;
|
|
118
|
+
var leftPx = currentLeftPx + movement;
|
|
119
|
+
if (movement > 0) {
|
|
120
|
+
return leftPx / stepWidth < max ? leftPx : max * stepWidth;
|
|
121
|
+
}
|
|
122
|
+
else if (movement < 0) {
|
|
123
|
+
return leftPx > 0 ? leftPx : 0;
|
|
124
|
+
}
|
|
125
|
+
return leftPx;
|
|
107
126
|
};
|
|
108
127
|
_this.getInitialLeftPx = function (value) {
|
|
109
|
-
var
|
|
110
|
-
var
|
|
111
|
-
var stepWidth = ApSlider_utils_1.getStepWidth({
|
|
112
|
-
ref: lineRef,
|
|
113
|
-
min: min,
|
|
114
|
-
max: max,
|
|
115
|
-
circleWidth: ApSlider_utils_1.INITIAL_TICK_WIDTH
|
|
116
|
-
});
|
|
128
|
+
var min = _this.props.min;
|
|
129
|
+
var stepWidth = _this.getCurrentStepWidth();
|
|
117
130
|
return (value - min) * stepWidth + ApSlider_utils_1.CIRCLE_WIDTH / 2;
|
|
118
131
|
};
|
|
119
132
|
return _this;
|
|
120
133
|
}
|
|
121
134
|
ApSlider.prototype.render = function () {
|
|
122
135
|
var isDrag = this.state.isDrag;
|
|
123
|
-
var _a = this.props, disabled = _a.disabled, label = _a.label, initialValue = _a.initialValue, value = _a.value;
|
|
136
|
+
var _a = this.props, disabled = _a.disabled, label = _a.label, initialValue = _a.initialValue, value = _a.value, min = _a.min, max = _a.max;
|
|
137
|
+
var valueLeftPx = this.getLeftPx(value);
|
|
138
|
+
var labelAlign = 'center';
|
|
139
|
+
var stepWidth = this.getCurrentStepWidth();
|
|
140
|
+
if ((max - value) * stepWidth < 36) {
|
|
141
|
+
labelAlign = 'right';
|
|
142
|
+
}
|
|
143
|
+
else if ((value - min) * stepWidth < 36) {
|
|
144
|
+
labelAlign = 'left';
|
|
145
|
+
}
|
|
124
146
|
return (React.createElement(ApSlider_styles_1.Container, { ref: this.setContainerRef },
|
|
125
147
|
React.createElement(ApSlider_styles_1.Line, { ref: this.setLineRef, disabled: disabled, onClick: this.onLineClick }),
|
|
126
148
|
initialValue !== undefined ? (React.createElement(ApSlider_styles_1.InitialValue, { left: this.getInitialLeftPx(initialValue) })) : null,
|
|
127
|
-
React.createElement(ApSlider_styles_1.Value, { isDrag: isDrag, left:
|
|
128
|
-
React.createElement(ApSlider_styles_1.ValueText,
|
|
149
|
+
React.createElement(ApSlider_styles_1.Value, { isDrag: isDrag, left: valueLeftPx },
|
|
150
|
+
React.createElement(ApSlider_styles_1.ValueText, { align: labelAlign }, label),
|
|
129
151
|
React.createElement(ApSlider_styles_1.ValueCircle, { disabled: disabled, onMouseDown: this.onMouseDown }))));
|
|
130
152
|
};
|
|
131
153
|
return ApSlider;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ApSlider.js","sourceRoot":"","sources":["../../../../src/components/ApSlider/ApSlider.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;AAAA,6BAA+B;AAE/B,qDAO2B;AAC3B,
|
|
1
|
+
{"version":3,"file":"ApSlider.js","sourceRoot":"","sources":["../../../../src/components/ApSlider/ApSlider.tsx"],"names":[],"mappings":"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"}
|
|
@@ -8,15 +8,27 @@ exports.ValueComponent = exports.WrapperLabel = exports.WrapperHeader = exports.
|
|
|
8
8
|
var styled_components_1 = require("styled-components");
|
|
9
9
|
var theme_1 = require("../../utils/theme");
|
|
10
10
|
var ApSlider_utils_1 = require("./ApSlider.utils");
|
|
11
|
-
exports.Container = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n
|
|
12
|
-
exports.Line = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n
|
|
13
|
-
exports.InitialValue = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n
|
|
14
|
-
exports.Value = styled_components_1.default.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n
|
|
15
|
-
exports.ValueText = styled_components_1.default.div(
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
11
|
+
exports.Container = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n width: 100%;\n height: 48px;\n position: relative;\n display: flex;\n align-items: flex-end;\n"], ["\n width: 100%;\n height: 48px;\n position: relative;\n display: flex;\n align-items: flex-end;\n"])));
|
|
12
|
+
exports.Line = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n height: 4px;\n width: calc(100% - ", "px);\n border-radius: 2px;\n margin-left: ", "px;\n background-color: ", ";\n cursor: ", ";\n z-index: 2;\n margin-bottom: 8px;\n"], ["\n height: 4px;\n width: calc(100% - ", "px);\n border-radius: 2px;\n margin-left: ", "px;\n background-color: ", ";\n cursor: ", ";\n z-index: 2;\n margin-bottom: 8px;\n"])), ApSlider_utils_1.CIRCLE_WIDTH, ApSlider_utils_1.CIRCLE_WIDTH / 2, function (props) { return props.disabled ? theme_1.colors.grey4 : theme_1.colors.chartBrightTeal; }, function (props) { return props.disabled ? 'auto' : 'pointer'; });
|
|
13
|
+
exports.InitialValue = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n position: absolute;\n left: ", "px;\n width: ", "px;\n height: 10px;\n bottom: 0;\n background-color: ", ";\n z-index: 1;\n border-radius: 2px;\n"], ["\n position: absolute;\n left: ", "px;\n width: ", "px;\n height: 10px;\n bottom: 0;\n background-color: ", ";\n z-index: 1;\n border-radius: 2px;\n"])), function (props) { return props.left; }, ApSlider_utils_1.INITIAL_TICK_WIDTH, theme_1.colors.grey3);
|
|
14
|
+
exports.Value = styled_components_1.default.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n position: absolute;\n display: flex;\n align-items: center;\n flex-direction: column;\n bottom: 0px;\n left: ", "px;\n cursor: ", ";\n pointer-events: ", ";\n z-index: 3;\n transition: left 0.1s;\n user-select: none;\n"], ["\n position: absolute;\n display: flex;\n align-items: center;\n flex-direction: column;\n bottom: 0px;\n left: ", "px;\n cursor: ", ";\n pointer-events: ", ";\n z-index: 3;\n transition: left 0.1s;\n user-select: none;\n"])), function (props) { return props.left; }, function (props) { return props.isDrag ? 'grab' : 'pointer'; }, function (props) { return props.disabled ? 'none' : 'auto'; });
|
|
15
|
+
exports.ValueText = styled_components_1.default.div(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n font-size: 11px;\n color: ", ";\n font-weight: 400;\n user-select: none;\n position: relative;\n width: 72px;\n text-align: ", ";\n white-space: nowrap;\n ", "\n ", "\n ", "\n"], ["\n font-size: 11px;\n color: ", ";\n font-weight: 400;\n user-select: none;\n position: relative;\n width: 72px;\n text-align: ", ";\n white-space: nowrap;\n ",
|
|
16
|
+
"\n ",
|
|
17
|
+
"\n ",
|
|
18
|
+
"\n"])), theme_1.colors.grey8, function (props) { return props.align; }, function (_a) {
|
|
19
|
+
var align = _a.align;
|
|
20
|
+
return align === 'left' && styled_components_1.css(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n margin-left: 0;\n "], ["\n margin-left: 0;\n "])));
|
|
21
|
+
}, function (_a) {
|
|
22
|
+
var align = _a.align;
|
|
23
|
+
return align === 'right' && styled_components_1.css(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n margin-left: -50px;\n "], ["\n margin-left: -50px;\n "])));
|
|
24
|
+
}, function (_a) {
|
|
25
|
+
var align = _a.align;
|
|
26
|
+
return align === 'center' && styled_components_1.css(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n margin-left: -24px;\n "], ["\n margin-left: -24px;\n "])));
|
|
27
|
+
});
|
|
28
|
+
exports.ValueCircle = styled_components_1.default.div(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n width: 20px;\n height: 20px;\n border-radius: 50%;\n box-sizing: border-box;\n align-self: flex-start;\n background-color: ", ";\n border: 4px solid ", ";\n"], ["\n width: 20px;\n height: 20px;\n border-radius: 50%;\n box-sizing: border-box;\n align-self: flex-start;\n background-color: ", ";\n border: 4px solid ", ";\n"])), theme_1.colors.white, function (props) { return props.disabled ? theme_1.colors.grey4 : theme_1.colors.chartBrightTeal; });
|
|
29
|
+
exports.SliderWrapper = styled_components_1.default.div(templateObject_10 || (templateObject_10 = __makeTemplateObject(["\n width: 168px;\n height: 104px;\n display: flex;\n flex-direction: column;\n padding: 8px 8px 24px 8px;\n justify-content: space-between;\n background-color: ", ";\n box-sizing: border-box;\n"], ["\n width: 168px;\n height: 104px;\n display: flex;\n flex-direction: column;\n padding: 8px 8px 24px 8px;\n justify-content: space-between;\n background-color: ", ";\n box-sizing: border-box;\n"])), theme_1.colors.grey1);
|
|
30
|
+
exports.WrapperHeader = styled_components_1.default.div(templateObject_11 || (templateObject_11 = __makeTemplateObject(["\n display: flex;\n align-items: flex-start;\n"], ["\n display: flex;\n align-items: flex-start;\n"])));
|
|
31
|
+
exports.WrapperLabel = styled_components_1.default.div(templateObject_12 || (templateObject_12 = __makeTemplateObject(["\n font-size: 13px;\n line-height: 19px;\n letter-spacing: 0.3px;\n color: ", ";\n"], ["\n font-size: 13px;\n line-height: 19px;\n letter-spacing: 0.3px;\n color: ", ";\n"])), theme_1.colors.grey5);
|
|
32
|
+
exports.ValueComponent = styled_components_1.default.div(templateObject_13 || (templateObject_13 = __makeTemplateObject(["\n display: flex;\n justify-self: flex-end;\n"], ["\n display: flex;\n justify-self: flex-end;\n"])));
|
|
33
|
+
var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9, templateObject_10, templateObject_11, templateObject_12, templateObject_13;
|
|
22
34
|
//# sourceMappingURL=ApSlider.styles.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ApSlider.styles.js","sourceRoot":"","sources":["../../../../src/components/ApSlider/ApSlider.styles.tsx"],"names":[],"mappings":";;;;;;;AAAA,
|
|
1
|
+
{"version":3,"file":"ApSlider.styles.js","sourceRoot":"","sources":["../../../../src/components/ApSlider/ApSlider.styles.tsx"],"names":[],"mappings":";;;;;;;AAAA,uDAAgD;AAChD,2CAA2C;AAC3C,mDAAoE;AAEvD,QAAA,SAAS,GAAG,2BAAM,CAAC,GAAG,2KAAA,wGAMlC,KAAC;AAEW,QAAA,IAAI,GAAG,2BAAM,CAAC,GAAG,uPAAwB,yCAE/B,EAAY,8CAElB,EAAgB,2BACX,EAAiE,eAC3E,EAA8C,2CAGzD,KAPsB,6BAAY,EAElB,6BAAY,GAAG,CAAC,EACX,UAAC,KAAK,IAAK,OAAA,KAAK,CAAC,QAAQ,CAAC,CAAC,CAAC,cAAM,CAAC,KAAK,CAAC,CAAC,CAAC,cAAM,CAAC,eAAe,EAAtD,CAAsD,EAC3E,UAAC,KAAK,IAAK,OAAA,KAAK,CAAC,QAAQ,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,SAAS,EAAnC,CAAmC,EAGxD;AAEW,QAAA,YAAY,GAAG,2BAAM,CAAC,GAAG,mOAAmB,mCAE/C,EAAmB,gBAClB,EAAkB,0DAGP,EAAY,6CAGjC,KAPS,UAAA,KAAK,IAAI,OAAA,KAAK,CAAC,IAAI,EAAV,CAAU,EAClB,mCAAkB,EAGP,cAAM,CAAC,KAAK,EAGhC;AAEW,QAAA,KAAK,GAAG,2BAAM,CAAC,GAAG,6SAAwD,wHAM7E,EAAmB,iBACjB,EAAyC,uBACjC,EAAyC,oEAI5D,KANS,UAAA,KAAK,IAAI,OAAA,KAAK,CAAC,IAAI,EAAV,CAAU,EACjB,UAAA,KAAK,IAAI,OAAA,KAAK,CAAC,MAAM,CAAC,CAAC,CAAC,MAAM,CAAA,CAAC,CAAC,SAAS,EAAhC,CAAgC,EACjC,UAAA,KAAK,IAAI,OAAA,KAAK,CAAC,QAAQ,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,MAAM,EAAhC,CAAgC,EAI3D;AAEW,QAAA,SAAS,GAAG,2BAAM,CAAC,GAAG,kQAAmB,iCAE3C,EAAY,qGAKP,EAAsB,+BAElC;IAIG,MACH;IAIG,MACH;IAIG,IACN,KAtBU,cAAM,CAAC,KAAK,EAKP,UAAC,KAAK,IAAK,OAAA,KAAK,CAAC,KAAK,EAAX,CAAW,EAElC,UAAC,EAAS;QAAP,KAAK,WAAA;IACR,OAAA,KAAK,KAAK,MAAM,IACd,uBAAG,sGAAA,mCAEF,IAAA;AAHH,CAGG,EACH,UAAC,EAAS;QAAP,KAAK,WAAA;IACR,OAAA,KAAK,KAAK,OAAO,IACjB,uBAAG,0GAAA,uCAEA,IAAA;AAHH,CAGG,EACH,UAAC,EAAS;QAAP,KAAK,WAAA;IACR,OAAA,KAAK,KAAK,QAAQ,IAClB,uBAAG,0GAAA,uCAEA,IAAA;AAHH,CAGG,EACL;AAEW,QAAA,WAAW,GAAG,2BAAM,CAAC,GAAG,2OAAwB,sIAMvC,EAAY,yBACZ,EAAiE,KACtF,KAFqB,cAAM,CAAC,KAAK,EACZ,UAAC,KAAK,IAAK,OAAA,KAAK,CAAC,QAAQ,CAAC,CAAC,CAAC,cAAM,CAAC,KAAK,CAAC,CAAC,CAAC,cAAM,CAAC,eAAe,EAAtD,CAAsD,EACrF;AAEW,QAAA,aAAa,GAAG,2BAAM,CAAC,GAAG,8RAAA,qLAOf,EAAY,kCAEnC,KAFuB,cAAM,CAAC,KAAK,EAElC;AAEW,QAAA,aAAa,GAAG,2BAAM,CAAC,GAAG,uHAAA,kDAGtC,KAAC;AAEW,QAAA,YAAY,GAAG,2BAAM,CAAC,GAAG,6JAAA,iFAI3B,EAAY,KACtB,KADU,cAAM,CAAC,KAAK,EACrB;AAEW,QAAA,cAAc,GAAG,2BAAM,CAAC,GAAG,sHAAA,iDAGvC,KAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ApSlider.utils.js","sourceRoot":"","sources":["../../../../src/components/ApSlider/ApSlider.utils.ts"],"names":[],"mappings":";;;AAAa,QAAA,YAAY,GAAG,UAAC,EAK5B;QAL8B,GAAG,SAAA,EAAE,GAAG,SAAA,EAAE,GAAG,SAAA,EAAE,WAAW,iBAAA;
|
|
1
|
+
{"version":3,"file":"ApSlider.utils.js","sourceRoot":"","sources":["../../../../src/components/ApSlider/ApSlider.utils.ts"],"names":[],"mappings":";;;AAAa,QAAA,YAAY,GAAG,UAAC,EAK5B;QAL8B,GAAG,SAAA,EAAE,GAAG,SAAA,EAAE,GAAG,SAAA,EAAE,WAAW,iBAAA;IAMvD,IAAI,CAAC,GAAG,IAAI,CAAC,GAAG,CAAC,qBAAqB,EAAE;QACtC,OAAO,CAAC,CAAC;KACV;IACO,IAAA,KAAK,GAAK,GAAG,CAAC,qBAAqB,EAAE,MAAhC,CAAiC;IAE9C,OAAO,CAAC,KAAK,GAAG,WAAW,CAAC,GAAG,CAAC,GAAG,GAAG,GAAG,CAAC,CAAC;AAC7C,CAAC,CAAC;AAEW,QAAA,YAAY,GAAG,EAAE,CAAC;AAClB,QAAA,kBAAkB,GAAG,CAAC,CAAC"}
|
|
@@ -9,6 +9,8 @@ interface IApSliderProps extends IDefaultProps {
|
|
|
9
9
|
initialValue?: number;
|
|
10
10
|
value: number;
|
|
11
11
|
onChange: (v: number) => void;
|
|
12
|
+
onMouseUp?: (v: number) => void;
|
|
13
|
+
onMouseDown?: (v: number) => void;
|
|
12
14
|
step: number;
|
|
13
15
|
}
|
|
14
16
|
interface IApSliderState {
|
|
@@ -26,17 +28,19 @@ export declare class ApSlider extends React.Component<IApSliderProps, IApSliderS
|
|
|
26
28
|
state: {
|
|
27
29
|
isDrag: boolean;
|
|
28
30
|
movement: number;
|
|
29
|
-
containerRef:
|
|
31
|
+
containerRef: any;
|
|
30
32
|
lineRef: any;
|
|
31
33
|
};
|
|
32
34
|
onLineClick: (e: React.MouseEvent) => void;
|
|
33
35
|
onMouseDown: (e: React.MouseEvent) => void;
|
|
34
36
|
onMouseMove: (e: {
|
|
35
37
|
movementX: number;
|
|
38
|
+
target: any;
|
|
36
39
|
}) => void;
|
|
37
40
|
onMouseUp: () => void;
|
|
38
41
|
setContainerRef: (ref: any) => void;
|
|
39
42
|
setLineRef: (ref: any) => void;
|
|
43
|
+
getCurrentStepWidth: () => number;
|
|
40
44
|
getLeftPx: (sliderValue: number) => number;
|
|
41
45
|
getInitialLeftPx: (value: number) => number;
|
|
42
46
|
render(): JSX.Element;
|
|
@@ -10,7 +10,9 @@ export declare const Value: import("styled-components").StyledComponent<"div", a
|
|
|
10
10
|
isDrag?: boolean | undefined;
|
|
11
11
|
disabled?: boolean | undefined;
|
|
12
12
|
}, never>;
|
|
13
|
-
export declare const ValueText: import("styled-components").StyledComponent<"div", any, {
|
|
13
|
+
export declare const ValueText: import("styled-components").StyledComponent<"div", any, {
|
|
14
|
+
align: string;
|
|
15
|
+
}, never>;
|
|
14
16
|
export declare const ValueCircle: import("styled-components").StyledComponent<"div", any, {
|
|
15
17
|
disabled?: boolean | undefined;
|
|
16
18
|
}, never>;
|