layers-select-control 0.1.3 → 0.3.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 +3 -0
  2. package/dist/LayersSelectControl.d.ts.map +1 -1
  3. package/dist/LayersSelectControl.js +11 -3
  4. package/package.json +1 -1
package/dist/LayersSelectControl.d.ts CHANGED
@@ -10,6 +10,7 @@ interface Props {
10
10
  value?: string;
11
11
  defaultValue?: string;
12
12
  defaultItem?: LayerItem;
13
+ moreItem?: LayerItem;
13
14
  items: LayerItem[];
14
15
  x?: number;
15
16
  y?: number;
@@ -27,6 +28,8 @@ interface Props {
27
28
  size?: "small" | "medium" | "large";
28
29
  panelGap?: number;
29
30
  parentGap?: number;
31
+ onExpand?: () => void;
32
+ onCollapse?: () => void;
30
33
  }
31
34
  export declare const LayersSelectControl: React.FC<Props>;
32
35
  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;AAkED,eAAO,MAAM,mBAAmB,EAAE,KAAK,CAAC,EAAE,CAAC,KAAK,CA+P/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,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,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,CA0Q/C,CAAC"}
package/dist/LayersSelectControl.js CHANGED
@@ -47,7 +47,7 @@ function ManagedImage({ candidates, initial, alt, className, expanded, noImageTh
47
47
  // ------------------------------------------------------
48
48
  // COMPONENT (LOGIC PRESERVED)
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
+ const LayersSelectControl = ({ items, value, defaultValue, x = 8, y = 32, xRel = "left", yRel = "bottom", defaultItem, moreItem, 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 }) => {
51
51
  const isControlled = value !== undefined;
52
52
  const [internalValue, setInternalValue] = (0, react_1.useState)(defaultValue);
53
53
  const selectedId = isControlled ? value : internalValue;
@@ -67,6 +67,14 @@ const LayersSelectControl = ({ items, value, defaultValue, x = 8, y = 32, xRel =
67
67
  (0, react_1.useEffect)(() => {
68
68
  setIsTouch("ontouchstart" in window || navigator.maxTouchPoints > 0);
69
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]);
70
78
  (0, react_1.useEffect)(() => {
71
79
  if (!expanded)
72
80
  return;
@@ -170,13 +178,13 @@ const LayersSelectControl = ({ items, value, defaultValue, x = 8, y = 32, xRel =
170
178
  setSelectedId(defaultItem.id);
171
179
  onDefault(defaultItem);
172
180
  setExpanded(false);
173
- }, children: [(0, jsx_runtime_1.jsx)(ManagedImage, { candidates: [defaultThumb], initial: defaultThumb, expanded: expanded, className: "lsc-t-thumb", noImageThumb: noImageThumb }), (0, jsx_runtime_1.jsx)("div", { className: "lsc-title", children: "Default" }), (0, jsx_runtime_1.jsx)("div", { className: "lsc-desc", children: "Initial Content" })] })), (0, jsx_runtime_1.jsxs)("div", { className: "lsc-scroll-wrap", children: [canScrollLeft && ((0, jsx_runtime_1.jsx)("div", { className: "lsc-arrow lsc-arrow-left", onClick: () => scrollBy(-1), children: "\u276E" })), (0, jsx_runtime_1.jsx)("div", { className: "lsc-tiles-wrap", ref: scrollRef, children: (0, jsx_runtime_1.jsx)("div", { className: "lsc-tiles", children: visibleItems.map((item) => ((0, jsx_runtime_1.jsxs)("div", { className: "lsc-tile", onClick: () => {
181
+ }, children: [(0, jsx_runtime_1.jsx)(ManagedImage, { candidates: [defaultThumb], initial: defaultThumb, expanded: expanded, className: "lsc-t-thumb", noImageThumb: noImageThumb }), (0, jsx_runtime_1.jsx)("div", { className: "lsc-title", children: defaultItem.title ? defaultItem.title : "Default" }), (0, jsx_runtime_1.jsx)("div", { className: "lsc-desc", children: defaultItem.description ? defaultItem.description : "Default Content" })] })), (0, jsx_runtime_1.jsxs)("div", { className: "lsc-scroll-wrap", children: [canScrollLeft && ((0, jsx_runtime_1.jsx)("div", { className: "lsc-arrow lsc-arrow-left", onClick: () => scrollBy(-1), children: "\u276E" })), (0, jsx_runtime_1.jsx)("div", { className: "lsc-tiles-wrap", ref: scrollRef, children: (0, jsx_runtime_1.jsx)("div", { className: "lsc-tiles", children: visibleItems.map((item) => ((0, jsx_runtime_1.jsxs)("div", { className: "lsc-tile", onClick: () => {
174
182
  setSelectedId(item.id);
175
183
  onSelect(item);
176
184
  setTimeout(() => setExpanded(false), 10);
177
185
  }, children: [(0, jsx_runtime_1.jsx)(ManagedImage, { candidates: expandedCandidates(item), initial: collapsedThumb(item), expanded: expanded, className: "lsc-t-thumb", noImageThumb: noImageThumb }), (0, jsx_runtime_1.jsx)("div", { className: "lsc-title", children: item.title }), (0, jsx_runtime_1.jsx)("div", { className: "lsc-desc", children: item.description })] }, item.id))) }) }), canScrollRight && ((0, jsx_runtime_1.jsx)("div", { className: "lsc-arrow lsc-arrow-right", onClick: () => scrollBy(1), children: "\u276F" }))] }), showMore && ((0, jsx_runtime_1.jsxs)("div", { className: "lsc-tile", onClick: () => {
178
186
  onMore === null || onMore === void 0 ? void 0 : onMore();
179
187
  setExpanded(false);
180
- }, children: [(0, jsx_runtime_1.jsx)(ManagedImage, { candidates: [moreThumb], initial: moreThumb, expanded: expanded, className: "lsc-t-thumb", noImageThumb: noImageThumb }), (0, jsx_runtime_1.jsx)("div", { className: "lsc-title", children: "More\u2026" }), (0, jsx_runtime_1.jsx)("div", { className: "lsc-desc", children: "Show all" })] }))] }) })] }));
188
+ }, children: [(0, jsx_runtime_1.jsx)(ManagedImage, { candidates: [moreThumb], initial: moreThumb, expanded: expanded, className: "lsc-t-thumb", noImageThumb: noImageThumb }), (0, jsx_runtime_1.jsx)("div", { className: "lsc-title", children: (moreItem === null || moreItem === void 0 ? void 0 : moreItem.title) ? moreItem === null || moreItem === void 0 ? void 0 : moreItem.title : "More…" }), (0, jsx_runtime_1.jsx)("div", { className: "lsc-desc", children: (moreItem === null || moreItem === void 0 ? void 0 : moreItem.description) ? moreItem === null || moreItem === void 0 ? void 0 : moreItem.description : "Show all" })] }))] }) })] }));
181
189
  };
182
190
  exports.LayersSelectControl = LayersSelectControl;
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.3",
4
+ "version": "0.3.0",
5
5
  "main": "dist/index.js",
6
6
  "types": "dist/index.d.ts",
7
7
  "scripts": {