layers-select-control 0.1.1 → 0.1.2

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 +7 -4
  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;AAiED,eAAO,MAAM,mBAAmB,EAAE,KAAK,CAAC,EAAE,CAAC,KAAK,CAyP/C,CAAC"}
package/dist/LayersSelectControl.js CHANGED
@@ -6,7 +6,7 @@ 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 },
@@ -132,9 +132,12 @@ const LayersSelectControl = ({ items, value, defaultValue, x = 8, y = 32, xRel =
132
132
  return items;
133
133
  return items.slice(0, maxVisible);
134
134
  }, [items, maxVisible]);
135
- const showMore = Boolean(onMore && items.length > (maxVisible || 0));
135
+ const showMore = Boolean(onMore);
136
+ const hasContent = () => showMore || items.length > 0 || defaultItem !== undefined;
137
+ const toggleExpanded = () => {
138
+ setExpanded((s) => (s ? false : hasContent()));
139
+ };
136
140
  return ((0, jsx_runtime_1.jsxs)("div", { ref: rootRef, className: `lsc-root ${theme === "light" ? "lsc-light" : ""}`, style: {
137
- position: "absolute",
138
141
  [xRel]: `${x}px`,
139
142
  [yRel]: `${y}px`,
140
143
  "--lsc-collapsed": `${cfg.collapsed}px`,
@@ -155,7 +158,7 @@ const LayersSelectControl = ({ items, value, defaultValue, x = 8, y = 32, xRel =
155
158
  if (hoverTimer.current)
156
159
  clearTimeout(hoverTimer.current);
157
160
  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: {
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: {
159
162
  left: expandToRight ? `calc(var(--lsc-collapsed) + var(--lsc-panel-gap))` : undefined,
160
163
  right: expandToRight ? undefined : `calc(var(--lsc-collapsed) + var(--lsc-panel-gap))`,
161
164
  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.2",
5
5
  "main": "dist/index.js",
6
6
  "types": "dist/index.d.ts",
7
7
  "scripts": {