@etsoo/materialui 1.5.15 → 1.5.17

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 (6) hide show
  1. package/lib/cjs/ScrollerListEx.d.ts +2 -2
  2. package/lib/cjs/ScrollerListEx.js +9 -11
  3. package/lib/mjs/ScrollerListEx.d.ts +2 -2
  4. package/lib/mjs/ScrollerListEx.js +9 -11
  5. package/package.json +2 -2
  6. package/src/ScrollerListEx.tsx +13 -13
package/lib/cjs/ScrollerListEx.d.ts CHANGED
@@ -27,9 +27,9 @@ export interface ScrollerListExInnerItemRendererProps<T> extends ListChildCompon
27
27
  * Extended ScrollerList ItemSize type
28
28
  * 1. Callback function
29
29
  * 2. Static sets
30
- * 3. Dynamic calculation
30
+ * 3. Dynamic left & right margin calculation
31
31
  */
32
- export type ScrollerListExItemSize = ((index: number) => [number, number] | [number, number, object]) | [number, number] | [number, object, boolean?];
32
+ export type ScrollerListExItemSize = ((index: number) => [number, number] | [number, number, object]) | [number, number] | [number, object, (number | string)?];
33
33
  /**
34
34
  * Extended ScrollerList Props
35
35
  */
package/lib/cjs/ScrollerListEx.js CHANGED
@@ -46,9 +46,10 @@ const createGridStyle = (alternatingColors, selectedColor) => {
46
46
  });
47
47
  };
48
48
  // Default margin
49
- const defaultMargin = (margin, isNarrow) => {
49
+ // horizon: null means full horizontal margin, -1 means all half, >=0 means left/right
50
+ const defaultMargin = (margin, horizon) => {
50
51
  const half = MUGlobal_1.MUGlobal.half(margin);
51
- if (isNarrow == null) {
52
+ if (horizon == null) {
52
53
  const half = MUGlobal_1.MUGlobal.half(margin);
53
54
  return {
54
55
  marginLeft: margin,
@@ -57,10 +58,11 @@ const defaultMargin = (margin, isNarrow) => {
57
58
  marginBottom: half
58
59
  };
59
60
  }
60
- if (isNarrow) {
61
+ if ((typeof horizon === "number" && horizon >= 0) ||
62
+ (typeof horizon === "string" && /^-?\d+/.test(horizon))) {
61
63
  return {
62
- marginLeft: 0,
63
- marginRight: 0,
64
+ marginLeft: horizon,
65
+ marginRight: horizon,
64
66
  marginTop: half,
65
67
  marginBottom: half
66
68
  };
@@ -137,14 +139,10 @@ function ScrollerListEx(props) {
137
139
  const itemSizeResult = react_2.default.useMemo(() => {
138
140
  if (typeof itemSize === "function")
139
141
  return undefined;
140
- const [size, spaces, isNarrow] = itemSize;
142
+ const [size, spaces, h] = itemSize;
141
143
  if (typeof spaces === "number")
142
144
  return [size, spaces, defaultMargin(MUGlobal_1.MUGlobal.pagePaddings, undefined)];
143
- return [
144
- size,
145
- MUGlobal_1.MUGlobal.getSpace(spaces, theme),
146
- defaultMargin(spaces, isNarrow)
147
- ];
145
+ return [size, MUGlobal_1.MUGlobal.getSpace(spaces, theme), defaultMargin(spaces, h)];
148
146
  }, [itemSize]);
149
147
  // Calculate size
150
148
  const calculateItemSize = (index) => {
package/lib/mjs/ScrollerListEx.d.ts CHANGED
@@ -27,9 +27,9 @@ export interface ScrollerListExInnerItemRendererProps<T> extends ListChildCompon
27
27
  * Extended ScrollerList ItemSize type
28
28
  * 1. Callback function
29
29
  * 2. Static sets
30
- * 3. Dynamic calculation
30
+ * 3. Dynamic left & right margin calculation
31
31
  */
32
- export type ScrollerListExItemSize = ((index: number) => [number, number] | [number, number, object]) | [number, number] | [number, object, boolean?];
32
+ export type ScrollerListExItemSize = ((index: number) => [number, number] | [number, number, object]) | [number, number] | [number, object, (number | string)?];
33
33
  /**
34
34
  * Extended ScrollerList Props
35
35
  */
package/lib/mjs/ScrollerListEx.js CHANGED
@@ -40,9 +40,10 @@ const createGridStyle = (alternatingColors, selectedColor) => {
40
40
  });
41
41
  };
42
42
  // Default margin
43
- const defaultMargin = (margin, isNarrow) => {
43
+ // horizon: null means full horizontal margin, -1 means all half, >=0 means left/right
44
+ const defaultMargin = (margin, horizon) => {
44
45
  const half = MUGlobal.half(margin);
45
- if (isNarrow == null) {
46
+ if (horizon == null) {
46
47
  const half = MUGlobal.half(margin);
47
48
  return {
48
49
  marginLeft: margin,
@@ -51,10 +52,11 @@ const defaultMargin = (margin, isNarrow) => {
51
52
  marginBottom: half
52
53
  };
53
54
  }
54
- if (isNarrow) {
55
+ if ((typeof horizon === "number" && horizon >= 0) ||
56
+ (typeof horizon === "string" && /^-?\d+/.test(horizon))) {
55
57
  return {
56
- marginLeft: 0,
57
- marginRight: 0,
58
+ marginLeft: horizon,
59
+ marginRight: horizon,
58
60
  marginTop: half,
59
61
  marginBottom: half
60
62
  };
@@ -131,14 +133,10 @@ export function ScrollerListEx(props) {
131
133
  const itemSizeResult = React.useMemo(() => {
132
134
  if (typeof itemSize === "function")
133
135
  return undefined;
134
- const [size, spaces, isNarrow] = itemSize;
136
+ const [size, spaces, h] = itemSize;
135
137
  if (typeof spaces === "number")
136
138
  return [size, spaces, defaultMargin(MUGlobal.pagePaddings, undefined)];
137
- return [
138
- size,
139
- MUGlobal.getSpace(spaces, theme),
140
- defaultMargin(spaces, isNarrow)
141
- ];
139
+ return [size, MUGlobal.getSpace(spaces, theme), defaultMargin(spaces, h)];
142
140
  }, [itemSize]);
143
141
  // Calculate size
144
142
  const calculateItemSize = (index) => {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@etsoo/materialui",
3
- "version": "1.5.15",
3
+ "version": "1.5.17",
4
4
  "description": "TypeScript Material-UI Implementation",
5
5
  "main": "lib/cjs/index.js",
6
6
  "module": "lib/mjs/index.js",
@@ -82,7 +82,7 @@
82
82
  "@types/react-window": "^1.8.8",
83
83
  "@vitejs/plugin-react": "^4.3.4",
84
84
  "jsdom": "^26.0.0",
85
- "typescript": "^5.8.2",
85
+ "typescript": "^5.8.3",
86
86
  "vitest": "^3.1.1"
87
87
  }
88
88
  }
package/src/ScrollerListEx.tsx CHANGED
@@ -47,10 +47,11 @@ const createGridStyle = (
47
47
  };
48
48
 
49
49
  // Default margin
50
- const defaultMargin = (margin: object, isNarrow?: boolean) => {
50
+ // horizon: null means full horizontal margin, -1 means all half, >=0 means left/right
51
+ const defaultMargin = (margin: object, horizon?: number | string) => {
51
52
  const half = MUGlobal.half(margin);
52
53
 
53
- if (isNarrow == null) {
54
+ if (horizon == null) {
54
55
  const half = MUGlobal.half(margin);
55
56
  return {
56
57
  marginLeft: margin,
@@ -60,10 +61,13 @@ const defaultMargin = (margin: object, isNarrow?: boolean) => {
60
61
  };
61
62
  }
62
63
 
63
- if (isNarrow) {
64
+ if (
65
+ (typeof horizon === "number" && horizon >= 0) ||
66
+ (typeof horizon === "string" && /^-?\d+/.test(horizon))
67
+ ) {
64
68
  return {
65
- marginLeft: 0,
66
- marginRight: 0,
69
+ marginLeft: horizon,
70
+ marginRight: horizon,
67
71
  marginTop: half,
68
72
  marginBottom: half
69
73
  };
@@ -107,12 +111,12 @@ export interface ScrollerListExInnerItemRendererProps<T>
107
111
  * Extended ScrollerList ItemSize type
108
112
  * 1. Callback function
109
113
  * 2. Static sets
110
- * 3. Dynamic calculation
114
+ * 3. Dynamic left & right margin calculation
111
115
  */
112
116
  export type ScrollerListExItemSize =
113
117
  | ((index: number) => [number, number] | [number, number, object])
114
118
  | [number, number]
115
- | [number, object, boolean?];
119
+ | [number, object, (number | string)?];
116
120
 
117
121
  /**
118
122
  * Extended ScrollerList Props
@@ -321,15 +325,11 @@ export function ScrollerListEx<T extends object>(
321
325
  | [number, number, object]
322
326
  | undefined => {
323
327
  if (typeof itemSize === "function") return undefined;
324
- const [size, spaces, isNarrow] = itemSize;
328
+ const [size, spaces, h] = itemSize;
325
329
  if (typeof spaces === "number")
326
330
  return [size, spaces, defaultMargin(MUGlobal.pagePaddings, undefined)];
327
331
 
328
- return [
329
- size,
330
- MUGlobal.getSpace(spaces, theme),
331
- defaultMargin(spaces, isNarrow)
332
- ];
332
+ return [size, MUGlobal.getSpace(spaces, theme), defaultMargin(spaces, h)];
333
333
  }, [itemSize]);
334
334
 
335
335
  // Calculate size