layers-select-control 0.1.2 → 0.2.0

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/dist/LayersSelectControl.d.ts +2 -0
  2. package/dist/LayersSelectControl.d.ts.map +1 -1
  3. package/dist/LayersSelectControl.js +21 -11
  4. package/package.json +1 -1
package/dist/LayersSelectControl.d.ts CHANGED
@@ -27,6 +27,8 @@ interface Props {
27
27
  size?: "small" | "medium" | "large";
28
28
  panelGap?: number;
29
29
  parentGap?: number;
30
+ onExpand?: () => void;
31
+ onCollapse?: () => void;
30
32
  }
31
33
  export declare const LayersSelectControl: React.FC<Props>;
32
34
  export {};
package/dist/LayersSelectControl.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"LayersSelectControl.d.ts","sourceRoot":"","sources":["../src/LayersSelectControl.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA4D,MAAM,OAAO,CAAC;AAEjF,MAAM,WAAW,SAAS;IACtB,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,MAAM,CAAC;IACd,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,WAAW,CAAC,EAAE,MAAM,CAAC;CACxB;AAED,UAAU,KAAK;IACX,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,YAAY,CAAC,EAAE,MAAM,CAAC;IAEtB,WAAW,CAAC,EAAE,SAAS,CAAC;IACxB,KAAK,EAAE,SAAS,EAAE,CAAC;IAEnB,CAAC,CAAC,EAAE,MAAM,CAAC;IACX,CAAC,CAAC,EAAE,MAAM,CAAC;IACX,IAAI,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC;IACxB,IAAI,CAAC,EAAE,KAAK,GAAG,QAAQ,CAAC;IAExB,SAAS,EAAE,CAAC,IAAI,CAAC,EAAE,SAAS,KAAK,IAAI,CAAC;IACtC,QAAQ,EAAE,CAAC,IAAI,EAAE,SAAS,KAAK,IAAI,CAAC;IACpC,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;IAEpB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,KAAK,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC;IAEzB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB,IAAI,CAAC,EAAE,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAC;IACpC,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,SAAS,CAAC,EAAE,MAAM,CAAC;CACtB;AAiED,eAAO,MAAM,mBAAmB,EAAE,KAAK,CAAC,EAAE,CAAC,KAAK,CAyP/C,CAAC"}
1
+ {"version":3,"file":"LayersSelectControl.d.ts","sourceRoot":"","sources":["../src/LayersSelectControl.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA4D,MAAM,OAAO,CAAC;AAEjF,MAAM,WAAW,SAAS;IACtB,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,MAAM,CAAC;IACd,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,WAAW,CAAC,EAAE,MAAM,CAAC;CACxB;AAED,UAAU,KAAK;IACX,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,YAAY,CAAC,EAAE,MAAM,CAAC;IAEtB,WAAW,CAAC,EAAE,SAAS,CAAC;IACxB,KAAK,EAAE,SAAS,EAAE,CAAC;IAEnB,CAAC,CAAC,EAAE,MAAM,CAAC;IACX,CAAC,CAAC,EAAE,MAAM,CAAC;IACX,IAAI,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC;IACxB,IAAI,CAAC,EAAE,KAAK,GAAG,QAAQ,CAAC;IAExB,SAAS,EAAE,CAAC,IAAI,CAAC,EAAE,SAAS,KAAK,IAAI,CAAC;IACtC,QAAQ,EAAE,CAAC,IAAI,EAAE,SAAS,KAAK,IAAI,CAAC;IACpC,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;IAEpB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,KAAK,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC;IAEzB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB,IAAI,CAAC,EAAE,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAC;IACpC,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;IACtB,UAAU,CAAC,EAAE,MAAM,IAAI,CAAC;CAC3B;AAkED,eAAO,MAAM,mBAAmB,EAAE,KAAK,CAAC,EAAE,CAAC,KAAK,CAyQ/C,CAAC"}
package/dist/LayersSelectControl.js CHANGED
@@ -13,23 +13,24 @@ const SIZE_CONFIG = {
13
13
  large: { collapsed: 112, thumb: 96, tileWidth: 140, tileThumb: 120 },
14
14
  };
15
15
  // ------------------------------------------------------
16
- // ManagedImage (UNCHANGED)
16
+ // ManagedImage (FIXED – no flashing)
17
17
  // ------------------------------------------------------
18
18
  function ManagedImage({ candidates, initial, alt, className, expanded, noImageThumb, }) {
19
19
  const [finalSrc, setFinalSrc] = (0, react_1.useState)(null);
20
20
  (0, react_1.useEffect)(() => {
21
21
  var _a;
22
- setFinalSrc(null);
23
- const urls = expanded ? candidates : [(_a = initial !== null && initial !== void 0 ? initial : candidates[0]) !== null && _a !== void 0 ? _a : noImageThumb];
22
+ const urls = expanded
23
+ ? candidates
24
+ : [(_a = initial !== null && initial !== void 0 ? initial : candidates[0]) !== null && _a !== void 0 ? _a : noImageThumb];
24
25
  let cancelled = false;
25
26
  const loadNext = (idx) => {
26
- if (idx >= urls.length) {
27
- if (!cancelled)
28
- setFinalSrc(noImageThumb);
27
+ if (idx >= urls.length)
29
28
  return;
30
- }
31
29
  const img = new Image();
32
- img.onload = () => !cancelled && setFinalSrc(urls[idx]);
30
+ img.onload = () => {
31
+ if (!cancelled)
32
+ setFinalSrc(urls[idx]);
33
+ };
33
34
  img.onerror = () => !cancelled && loadNext(idx + 1);
34
35
  img.src = urls[idx];
35
36
  };
@@ -44,9 +45,9 @@ function ManagedImage({ candidates, initial, alt, className, expanded, noImageTh
44
45
  return (0, jsx_runtime_1.jsx)("img", { src: finalSrc, alt: alt, className: className, draggable: false });
45
46
  }
46
47
  // ------------------------------------------------------
47
- // COMPONENT (LOGIC 100% PRESERVED)
48
+ // COMPONENT (LOGIC PRESERVED)
48
49
  // ------------------------------------------------------
49
- const LayersSelectControl = ({ items, value, defaultValue, x = 8, y = 32, xRel = "left", yRel = "bottom", defaultItem, onSelect, onMore, onDefault, maxVisible = DEFAULT_MAX_VISIBLE, hoverCloseDelayMs = 160, theme = "dark", defaultThumb = DEFAULT_RESET_IMAGE_URL, noImageThumb = DEFAULT_NO_IMAGE_URL, moreThumb = DEFAULT_IMAGE_MORE, size = "small", panelGap = 8, parentGap = 8, }) => {
50
+ const LayersSelectControl = ({ items, value, defaultValue, x = 8, y = 32, xRel = "left", yRel = "bottom", defaultItem, onSelect, onMore, onDefault, maxVisible = DEFAULT_MAX_VISIBLE, hoverCloseDelayMs = 160, theme = "dark", defaultThumb = DEFAULT_RESET_IMAGE_URL, noImageThumb = DEFAULT_NO_IMAGE_URL, moreThumb = DEFAULT_IMAGE_MORE, size = "small", panelGap = 8, parentGap = 8, onCollapse, onExpand }) => {
50
51
  const isControlled = value !== undefined;
51
52
  const [internalValue, setInternalValue] = (0, react_1.useState)(defaultValue);
52
53
  const selectedId = isControlled ? value : internalValue;
@@ -66,6 +67,14 @@ const LayersSelectControl = ({ items, value, defaultValue, x = 8, y = 32, xRel =
66
67
  (0, react_1.useEffect)(() => {
67
68
  setIsTouch("ontouchstart" in window || navigator.maxTouchPoints > 0);
68
69
  }, []);
70
+ (0, react_1.useEffect)(() => {
71
+ if (expanded) {
72
+ onExpand === null || onExpand === void 0 ? void 0 : onExpand();
73
+ }
74
+ else {
75
+ onCollapse === null || onCollapse === void 0 ? void 0 : onCollapse();
76
+ }
77
+ }, [expanded, onExpand, onCollapse]);
69
78
  (0, react_1.useEffect)(() => {
70
79
  if (!expanded)
71
80
  return;
@@ -101,6 +110,7 @@ const LayersSelectControl = ({ items, value, defaultValue, x = 8, y = 32, xRel =
101
110
  return defaultItem;
102
111
  return items.find((x) => x.id === selectedId);
103
112
  }, [items, selectedId, defaultItem]);
113
+ const collapsedCandidates = (0, react_1.useMemo)(() => [collapsedThumb(selectedItem)], [collapsedThumb, selectedItem]);
104
114
  const updateArrows = (0, react_1.useCallback)(() => {
105
115
  if (!scrollRef.current)
106
116
  return;
@@ -158,7 +168,7 @@ const LayersSelectControl = ({ items, value, defaultValue, x = 8, y = 32, xRel =
158
168
  if (hoverTimer.current)
159
169
  clearTimeout(hoverTimer.current);
160
170
  hoverTimer.current = window.setTimeout(() => setExpanded(false), hoverCloseDelayMs);
161
- }, children: [(0, jsx_runtime_1.jsx)("div", { className: "lsc-collapsed", onClick: toggleExpanded, children: (0, jsx_runtime_1.jsx)(ManagedImage, { candidates: [collapsedThumb(selectedItem)], initial: collapsedThumb(selectedItem), expanded: false, className: "lsc-thumb", noImageThumb: noImageThumb }) }), (0, jsx_runtime_1.jsx)("div", { className: "lsc-panel-wrap", style: {
171
+ }, children: [(0, jsx_runtime_1.jsx)("div", { className: "lsc-collapsed", onClick: toggleExpanded, children: (0, jsx_runtime_1.jsx)(ManagedImage, { candidates: collapsedCandidates, initial: collapsedCandidates[0], expanded: false, className: "lsc-thumb", noImageThumb: noImageThumb }) }), (0, jsx_runtime_1.jsx)("div", { className: "lsc-panel-wrap", style: {
162
172
  left: expandToRight ? `calc(var(--lsc-collapsed) + var(--lsc-panel-gap))` : undefined,
163
173
  right: expandToRight ? undefined : `calc(var(--lsc-collapsed) + var(--lsc-panel-gap))`,
164
174
  maxWidth: parentWidth
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "layers-select-control",
3
3
  "description": "Mimics Google layer select layers.",
4
- "version": "0.1.2",
4
+ "version": "0.2.0",
5
5
  "main": "dist/index.js",
6
6
  "types": "dist/index.d.ts",
7
7
  "scripts": {