@longline/aqua-ui 1.0.291 → 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.
Files changed (4) hide show
  1. package/inputs/Slider/Slider.d.ts +8 -0
  2. package/inputs/Slider/Slider.js +3 -3
  3. package/map/layers/HtmlMarkerLayer/HtmlMarkerLayer.js +14 -4
  4. package/package.json +1 -1
package/inputs/Slider/Slider.d.ts CHANGED
@@ -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
package/map/layers/HtmlMarkerLayer/HtmlMarkerLayer.js CHANGED
@@ -87,13 +87,23 @@ var HtmlMarkerLayerBase = function (_a) {
87
87
  return marker;
88
88
  }, [idField, map]);
89
89
  var updateMarkers = React.useCallback(function () {
90
- var _a;
90
+ var _a, _b;
91
91
  if (!map.getSource(sourceId))
92
92
  return;
93
93
  if (!map.isSourceLoaded(sourceId))
94
94
  return;
95
- if (map.getZoom() < minZoom || map.getZoom() > maxZoom)
96
- return;
95
+ // If outside zoom range, remove ALL markers:
96
+ var zoom = map.getZoom();
97
+ if (zoom < minZoom || zoom > maxZoom) {
98
+ for (var id in visibleRef.current) {
99
+ visibleRef.current[id].remove();
100
+ (_a = rootsRef.current[id]) === null || _a === void 0 ? void 0 : _a.unmount();
101
+ delete markersRef.current[id];
102
+ delete rootsRef.current[id];
103
+ }
104
+ visibleRef.current = {};
105
+ return; // Nothing else to do
106
+ }
97
107
  var seen = {};
98
108
  var features = map.querySourceFeatures(sourceId).filter(function (f) {
99
109
  var _a;
@@ -114,7 +124,7 @@ var HtmlMarkerLayerBase = function (_a) {
114
124
  for (var id in visibleRef.current) {
115
125
  if (!newVisible[id]) {
116
126
  visibleRef.current[id].remove();
117
- (_a = rootsRef.current[id]) === null || _a === void 0 ? void 0 : _a.unmount();
127
+ (_b = rootsRef.current[id]) === null || _b === void 0 ? void 0 : _b.unmount();
118
128
  delete markersRef.current[id];
119
129
  delete rootsRef.current[id];
120
130
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@longline/aqua-ui",
3
- "version": "1.0.291",
3
+ "version": "1.0.293",
4
4
  "description": "AquaUI",
5
5
  "author": "Alexander van Oostenrijk / Longline Environment",
6
6
  "license": "Commercial",