layers-select-control 0.1.1 → 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 (5) hide show
  1. package/dist/LayersSelectControl.d.ts.map +1 -1
  2. package/dist/LayersSelectControl.js +18 -13
  3. package/dist/styles.css +2 -1
  4. package/dist/styles.scss +2 -1
  5. 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,CAuP/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
@@ -6,30 +6,31 @@ const react_1 = require("react");
6
6
  const DEFAULT_RESET_IMAGE_URL = "./firstplace.svg";
7
7
  const DEFAULT_NO_IMAGE_URL = "./noimage.png";
8
8
  const DEFAULT_IMAGE_MORE = "./more-images.png";
9
- const DEFAULT_MAX_VISIBLE = 4;
9
+ const DEFAULT_MAX_VISIBLE = 5;
10
10
  const SIZE_CONFIG = {
11
11
  small: { collapsed: 64, thumb: 56, tileWidth: 84, tileThumb: 72 },
12
12
  medium: { collapsed: 88, thumb: 76, tileWidth: 108, tileThumb: 96 },
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;
@@ -132,9 +134,12 @@ const LayersSelectControl = ({ items, value, defaultValue, x = 8, y = 32, xRel =
132
134
  return items;
133
135
  return items.slice(0, maxVisible);
134
136
  }, [items, maxVisible]);
135
- const showMore = Boolean(onMore && items.length > (maxVisible || 0));
137
+ const showMore = Boolean(onMore);
138
+ const hasContent = () => showMore || items.length > 0 || defaultItem !== undefined;
139
+ const toggleExpanded = () => {
140
+ setExpanded((s) => (s ? false : hasContent()));
141
+ };
136
142
  return ((0, jsx_runtime_1.jsxs)("div", { ref: rootRef, className: `lsc-root ${theme === "light" ? "lsc-light" : ""}`, style: {
137
- position: "absolute",
138
143
  [xRel]: `${x}px`,
139
144
  [yRel]: `${y}px`,
140
145
  "--lsc-collapsed": `${cfg.collapsed}px`,
@@ -155,7 +160,7 @@ const LayersSelectControl = ({ items, value, defaultValue, x = 8, y = 32, xRel =
155
160
  if (hoverTimer.current)
156
161
  clearTimeout(hoverTimer.current);
157
162
  hoverTimer.current = window.setTimeout(() => setExpanded(false), hoverCloseDelayMs);
158
- }, children: [(0, jsx_runtime_1.jsx)("div", { className: "lsc-collapsed", onClick: () => setExpanded((s) => !s), 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: {
159
164
  left: expandToRight ? `calc(var(--lsc-collapsed) + var(--lsc-panel-gap))` : undefined,
160
165
  right: expandToRight ? undefined : `calc(var(--lsc-collapsed) + var(--lsc-panel-gap))`,
161
166
  maxWidth: parentWidth
package/dist/styles.css CHANGED
@@ -2,7 +2,8 @@
2
2
  .lsc-root {
3
3
  font-family: Inter, system-ui;
4
4
  font-size: 13px;
5
- z-index: 99999;
5
+ z-index: 10;
6
+ position: absolute;
6
7
  --bg: linear-gradient(180deg, #1b1f23, #111418);
7
8
  --panel-bg: linear-gradient(180deg, #1e242a, #161b20);
8
9
  --text: #9ca3af;
package/dist/styles.scss CHANGED
@@ -1,7 +1,8 @@
1
1
  .lsc-root {
2
2
  font-family: Inter, system-ui;
3
3
  font-size: 13px;
4
- z-index: 99999;
4
+ z-index: 10;
5
+ position: absolute;
5
6
 
6
7
  --bg: linear-gradient(180deg, #1b1f23, #111418);
7
8
  --panel-bg: linear-gradient(180deg, #1e242a, #161b20);
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.1",
4
+ "version": "0.1.3",
5
5
  "main": "dist/index.js",
6
6
  "types": "dist/index.d.ts",
7
7
  "scripts": {