@longline/aqua-ui 1.0.292 → 1.0.293
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.
|
@@ -37,6 +37,10 @@ interface ISliderProps {
|
|
|
37
37
|
* @default 0
|
|
38
38
|
*/
|
|
39
39
|
ticks?: number;
|
|
40
|
+
/**
|
|
41
|
+
* If set, ticks are hidden.
|
|
42
|
+
*/
|
|
43
|
+
hideTicks?: boolean;
|
|
40
44
|
/**
|
|
41
45
|
* Should the control snap to ticks (if present)?
|
|
42
46
|
* @default false
|
|
@@ -54,6 +58,10 @@ interface ISliderProps {
|
|
|
54
58
|
* A `Slider` can be in an `error` state.
|
|
55
59
|
*/
|
|
56
60
|
error?: boolean;
|
|
61
|
+
/**
|
|
62
|
+
* Custom text color
|
|
63
|
+
*/
|
|
64
|
+
color?: string;
|
|
57
65
|
/**
|
|
58
66
|
* An optional formatter that takes the current slider value (a number)
|
|
59
67
|
* and returns a string. This can be used to divide values by 100,
|
package/inputs/Slider/Slider.js
CHANGED
|
@@ -157,16 +157,16 @@ var SliderBase = function (props) {
|
|
|
157
157
|
return (React.createElement("div", { className: props.className, onMouseDown: handleMouseDown, onKeyDown: handleKeyDown, tabIndex: 0 },
|
|
158
158
|
React.createElement(Track, { ref: trackRef },
|
|
159
159
|
React.createElement(TrackFill, { "$disabled": props.disabled, "$error": props.error, ref: trackFillRef }),
|
|
160
|
-
props.ticks && renderTicks(),
|
|
160
|
+
props.ticks && props.hideTicks != true && renderTicks(),
|
|
161
161
|
React.createElement(KnobPosition, { ref: knobRef },
|
|
162
162
|
React.createElement(Knob, { "$disabled": props.disabled, "$error": props.error },
|
|
163
163
|
React.createElement(Teardrop, { "$disabled": props.disabled, "$error": props.error },
|
|
164
164
|
React.createElement("path", { d: "M14.293 34L4.39347 24.0416C-1.07387 18.5418 -1.07387 9.62475 4.39347 4.12489C9.86081 -1.37496 18.7251 -1.37496 24.1925 4.12489C29.6598 9.62475 29.6598 18.5418 24.1925 24.0416L14.293 34Z" })),
|
|
165
|
-
React.createElement(TearValue, { "$disabled": props.disabled, "$error": props.error, ref: tearValueRef }))))));
|
|
165
|
+
React.createElement(TearValue, { "$disabled": props.disabled, "$error": props.error, ref: tearValueRef, "$color": props.color }))))));
|
|
166
166
|
};
|
|
167
167
|
var Tick = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n width: 2px;\n height: 2px;\n background-color: ", ";\n border-radius: 1px;\n"], ["\n width: 2px;\n height: 2px;\n background-color: ", ";\n border-radius: 1px;\n"])), function (p) { return p.theme.colors.accent; });
|
|
168
168
|
var Teardrop = styled.svg(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n position: absolute;\n top: -38px;\n left: -3.5px;\n width: 28px;\n height: 34px; \n fill: ", ";\n ", "\n ", "\n"], ["\n position: absolute;\n top: -38px;\n left: -3.5px;\n width: 28px;\n height: 34px; \n fill: ", ";\n ", "\n ", "\n"])), function (p) { return p.theme.colors.primary[1]; }, function (p) { return p.$error && css(templateObject_2 || (templateObject_2 = __makeTemplateObject(["fill: ", ";"], ["fill: ", ";"])), p.theme.colors.negative); }, function (p) { return p.$disabled && css(templateObject_3 || (templateObject_3 = __makeTemplateObject(["fill: ", ";"], ["fill: ", ";"])), p.theme.colors.neutral[30]); });
|
|
169
|
-
var TearValue = styled.div(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n position: absolute;\n top: -32px;\n left: -5px;\n width: 30px;\n text-align: center;\n font: ", ";\n white-space: nowrap;\n color: ", ";\n ", "\n ", " \n"], ["\n position: absolute;\n top: -32px;\n left: -5px;\n width: 30px;\n text-align: center;\n font: ", ";\n white-space: nowrap;\n color: ", ";\n ", "\n ", " \n"])), function (p) { return p.theme.font.labelSmall; }, function (p) { return p.theme.colors.primary[2]; }, function (p) { return p.$error && css(templateObject_5 || (templateObject_5 = __makeTemplateObject(["color: ", ";"], ["color: ", ";"])), p.theme.colors.neutral[100]); }, function (p) { return p.$disabled && css(templateObject_6 || (templateObject_6 = __makeTemplateObject(["color: ", ";"], ["color: ", ";"])), p.theme.colors.neutral[50]); });
|
|
169
|
+
var TearValue = styled.div(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n position: absolute;\n top: -32px;\n left: -5px;\n width: 30px;\n text-align: center;\n font: ", ";\n white-space: nowrap;\n color: ", ";\n ", "\n ", " \n"], ["\n position: absolute;\n top: -32px;\n left: -5px;\n width: 30px;\n text-align: center;\n font: ", ";\n white-space: nowrap;\n color: ", ";\n ", "\n ", " \n"])), function (p) { return p.theme.font.labelSmall; }, function (p) { return p.$color ? p.$color : p.theme.colors.primary[2]; }, function (p) { return p.$error && css(templateObject_5 || (templateObject_5 = __makeTemplateObject(["color: ", ";"], ["color: ", ";"])), p.theme.colors.neutral[100]); }, function (p) { return p.$disabled && css(templateObject_6 || (templateObject_6 = __makeTemplateObject(["color: ", ";"], ["color: ", ";"])), p.theme.colors.neutral[50]); });
|
|
170
170
|
var Pulse = keyframes(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n 0% {\n opacity: 0.3;\n }\n 50% {\n opacity: 0.6;\n }\n 100% {\n opacity: 0.3;\n }\n"], ["\n 0% {\n opacity: 0.3;\n }\n 50% {\n opacity: 0.6;\n }\n 100% {\n opacity: 0.3;\n }\n"])));
|
|
171
171
|
var Knob = styled.div(templateObject_12 || (templateObject_12 = __makeTemplateObject(["\n position: absolute;\n left: -10px;\n top: -8px;\n width: 20px;\n height: 20px;\n border-radius: 50%;\n background-color: ", ";\n ", "\n ", " \n box-shadow: ", ";\n\n // Disabled control has no focus ring at all.\n ", "\n"], ["\n position: absolute;\n left: -10px;\n top: -8px;\n width: 20px;\n height: 20px;\n border-radius: 50%;\n background-color: ", ";\n ", "\n ", " \n box-shadow: ", ";\n\n // Disabled control has no focus ring at all.\n ", "\n"
|
|
172
172
|
// This is a 0x0 <div> used to mark where the knob is. The Knob will paint
|