1 | "use strict";
|
2 |
|
3 | var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
|
4 |
|
5 | exports.__esModule = true;
|
6 | exports["default"] = void 0;
|
7 |
|
8 | var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
|
9 |
|
10 | var _ThemeProvider = require("../ThemeProvider");
|
11 |
|
12 | var _ColorModeProvider = require("../ColorModeProvider");
|
13 |
|
14 | function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }
|
15 |
|
16 | function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(source, true).forEach(function (key) { (0, _defineProperty2["default"])(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(source).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
|
17 |
|
18 | var centeredProps = {
|
19 | position: "absolute",
|
20 | top: "50%",
|
21 | transform: "translateY(-50%)"
|
22 | };
|
23 |
|
24 | var thumbStyle = function thumbStyle(_ref) {
|
25 | var thumbSize = _ref.thumbSize,
|
26 | trackPercent = _ref.trackPercent,
|
27 | theme = _ref.theme;
|
28 | return _objectSpread({}, centeredProps, {
|
29 | zIndex: 1,
|
30 | size: thumbSize,
|
31 | rounded: "full",
|
32 | bg: "#fff",
|
33 | boxShadow: "sm",
|
34 | left: "calc(" + trackPercent + "% - " + thumbSize + " / 2)",
|
35 | border: "1px",
|
36 | borderColor: "transparent",
|
37 | transition: "transform 0.2s",
|
38 | _focus: {
|
39 | boxShadow: "outline"
|
40 | },
|
41 | _disabled: {
|
42 | backgroundColor: "gray.300"
|
43 | },
|
44 | _active: {
|
45 | transform: "translateY(-50%) scale(1.15)"
|
46 | }
|
47 | });
|
48 | };
|
49 |
|
50 | var filledTrackStyle = function filledTrackStyle(_ref2) {
|
51 | var trackHeight = _ref2.trackHeight,
|
52 | trackPercent = _ref2.trackPercent,
|
53 | color = _ref2.color,
|
54 | colorMode = _ref2.colorMode;
|
55 | return _objectSpread({}, centeredProps, {
|
56 | height: trackHeight,
|
57 | bg: colorMode === "light" ? color + ".500" : color + ".200",
|
58 | width: trackPercent + "%",
|
59 | rounded: "sm"
|
60 | });
|
61 | };
|
62 |
|
63 | var themedTrackStyle = {
|
64 | light: {
|
65 | bg: "gray.200",
|
66 | _disabled: {
|
67 | bg: "gray.300"
|
68 | }
|
69 | },
|
70 | dark: {
|
71 | bg: "whiteAlpha.200",
|
72 | _disabled: {
|
73 | bg: "whiteAlpha.300"
|
74 | }
|
75 | }
|
76 | };
|
77 |
|
78 | var trackStyle = function trackStyle(_ref3) {
|
79 | var trackHeight = _ref3.trackHeight,
|
80 | theme = _ref3.theme,
|
81 | colorMode = _ref3.colorMode;
|
82 | return _objectSpread({
|
83 | height: trackHeight,
|
84 | borderRadius: "sm",
|
85 | width: "100%"
|
86 | }, centeredProps, {}, themedTrackStyle[colorMode]);
|
87 | };
|
88 |
|
89 | var rootStyle = {
|
90 | width: "full",
|
91 | display: "inline-block",
|
92 | position: "relative",
|
93 | cursor: "pointer",
|
94 | _disabled: {
|
95 | opacity: 0.6,
|
96 | cursor: "default",
|
97 | pointerEvents: "none"
|
98 | }
|
99 | };
|
100 | var sizes = {
|
101 | lg: {
|
102 | thumb: "16px",
|
103 | trackHeight: "4px"
|
104 | },
|
105 | md: {
|
106 | thumb: "14px",
|
107 | trackHeight: "4px"
|
108 | },
|
109 | sm: {
|
110 | thumb: "10px",
|
111 | trackHeight: "2px"
|
112 | }
|
113 | };
|
114 |
|
115 | var useSliderStyle = function useSliderStyle(props) {
|
116 | var theme = (0, _ThemeProvider.useTheme)();
|
117 |
|
118 | var _useColorMode = (0, _ColorModeProvider.useColorMode)(),
|
119 | colorMode = _useColorMode.colorMode;
|
120 |
|
121 | var trackPercent = props.trackPercent,
|
122 | size = props.size,
|
123 | color = props.color;
|
124 | var _sizes$size = sizes[size],
|
125 | trackHeight = _sizes$size.trackHeight,
|
126 | thumbSize = _sizes$size.thumb;
|
127 | var _props = {
|
128 | trackHeight: trackHeight,
|
129 | thumbSize: thumbSize,
|
130 | theme: theme,
|
131 | trackPercent: trackPercent,
|
132 | color: color,
|
133 | colorMode: colorMode
|
134 | };
|
135 | return {
|
136 | rootStyle: rootStyle,
|
137 | trackStyle: trackStyle(_props),
|
138 | filledTrackStyle: filledTrackStyle(_props),
|
139 | thumbStyle: thumbStyle(_props)
|
140 | };
|
141 | };
|
142 |
|
143 | var _default = useSliderStyle;
|
144 | exports["default"] = _default; |
\ | No newline at end of file |