layers-select-control 0.1.2 → 0.1.3

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 (3) hide show
  1. package/dist/LayersSelectControl.d.ts.map +1 -1
  2. package/dist/LayersSelectControl.js +12 -10
  3. package/package.json +1 -1
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;CACtB;AAkED,eAAO,MAAM,mBAAmB,EAAE,KAAK,CAAC,EAAE,CAAC,KAAK,CA+P/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,7 +45,7 @@ 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
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, }) => {
50
51
  const isControlled = value !== undefined;
@@ -101,6 +102,7 @@ const LayersSelectControl = ({ items, value, defaultValue, x = 8, y = 32, xRel =
101
102
  return defaultItem;
102
103
  return items.find((x) => x.id === selectedId);
103
104
  }, [items, selectedId, defaultItem]);
105
+ const collapsedCandidates = (0, react_1.useMemo)(() => [collapsedThumb(selectedItem)], [collapsedThumb, selectedItem]);
104
106
  const updateArrows = (0, react_1.useCallback)(() => {
105
107
  if (!scrollRef.current)
106
108
  return;
@@ -158,7 +160,7 @@ const LayersSelectControl = ({ items, value, defaultValue, x = 8, y = 32, xRel =
158
160
  if (hoverTimer.current)
159
161
  clearTimeout(hoverTimer.current);
160
162
  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: {
163
+ }, 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
164
  left: expandToRight ? `calc(var(--lsc-collapsed) + var(--lsc-panel-gap))` : undefined,
163
165
  right: expandToRight ? undefined : `calc(var(--lsc-collapsed) + var(--lsc-panel-gap))`,
164
166
  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.1.3",
5
5
  "main": "dist/index.js",
6
6
  "types": "dist/index.d.ts",
7
7
  "scripts": {