@apia/table 2.0.9 → 2.0.10

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 (134) hide show
  1. package/dist/Cell.js +52 -0
  2. package/dist/Cell.js.map +1 -0
  3. package/dist/FilterCell.js +68 -0
  4. package/dist/FilterCell.js.map +1 -0
  5. package/dist/Header.js +171 -0
  6. package/dist/Header.js.map +1 -0
  7. package/dist/HeaderCell.js +223 -0
  8. package/dist/HeaderCell.js.map +1 -0
  9. package/dist/KeyHandler.js +28 -0
  10. package/dist/KeyHandler.js.map +1 -0
  11. package/dist/ResponsiveTable.d.ts +8 -0
  12. package/dist/ResponsiveTable.d.ts.map +1 -0
  13. package/dist/ResponsiveTable.js +29 -0
  14. package/dist/ResponsiveTable.js.map +1 -0
  15. package/dist/ResponsiveTableContext.d.ts +8 -0
  16. package/dist/ResponsiveTableContext.d.ts.map +1 -0
  17. package/dist/ResponsiveTableContext.js +143 -0
  18. package/dist/ResponsiveTableContext.js.map +1 -0
  19. package/dist/Row.js +230 -0
  20. package/dist/Row.js.map +1 -0
  21. package/dist/SeparatorCell.js +20 -0
  22. package/dist/SeparatorCell.js.map +1 -0
  23. package/dist/StateCell.js +19 -0
  24. package/dist/StateCell.js.map +1 -0
  25. package/dist/filters/RangeFilter.js +61 -0
  26. package/dist/filters/RangeFilter.js.map +1 -0
  27. package/dist/index.d.ts +24 -787
  28. package/dist/index.js +24 -3648
  29. package/dist/index.js.map +1 -1
  30. package/dist/renderers/AccordionCell.d.ts +15 -0
  31. package/dist/renderers/AccordionCell.d.ts.map +1 -0
  32. package/dist/renderers/AccordionCell.js +23 -0
  33. package/dist/renderers/AccordionCell.js.map +1 -0
  34. package/dist/renderers/AccordionDocNameCellRenderer.d.ts +11 -0
  35. package/dist/renderers/AccordionDocNameCellRenderer.d.ts.map +1 -0
  36. package/dist/renderers/AccordionDocNameCellRenderer.js +39 -0
  37. package/dist/renderers/AccordionDocNameCellRenderer.js.map +1 -0
  38. package/dist/renderers/AccordionElement.d.ts +11 -0
  39. package/dist/renderers/AccordionElement.d.ts.map +1 -0
  40. package/dist/renderers/AccordionElement.js +115 -0
  41. package/dist/renderers/AccordionElement.js.map +1 -0
  42. package/dist/renderers/AccordionHTMLCellRenderer.d.ts +8 -0
  43. package/dist/renderers/AccordionHTMLCellRenderer.d.ts.map +1 -0
  44. package/dist/renderers/AccordionHTMLCellRenderer.js +37 -0
  45. package/dist/renderers/AccordionHTMLCellRenderer.js.map +1 -0
  46. package/dist/renderers/AccordionRenderer.d.ts +6 -0
  47. package/dist/renderers/AccordionRenderer.d.ts.map +1 -0
  48. package/dist/renderers/AccordionRenderer.js +76 -0
  49. package/dist/renderers/AccordionRenderer.js.map +1 -0
  50. package/dist/renderers/AdditionalColumnDefaultRenderer.d.ts +7 -0
  51. package/dist/renderers/AdditionalColumnDefaultRenderer.d.ts.map +1 -0
  52. package/dist/renderers/AdditionalColumnDefaultRenderer.js +31 -0
  53. package/dist/renderers/AdditionalColumnDefaultRenderer.js.map +1 -0
  54. package/dist/renderers/DefaultCellRenderer.d.ts +11 -0
  55. package/dist/renderers/DefaultCellRenderer.d.ts.map +1 -0
  56. package/dist/renderers/DefaultCellRenderer.js +49 -0
  57. package/dist/renderers/DefaultCellRenderer.js.map +1 -0
  58. package/dist/renderers/DefaultRowRenderer.d.ts +6 -0
  59. package/dist/renderers/DefaultRowRenderer.d.ts.map +1 -0
  60. package/dist/renderers/DefaultRowRenderer.js +26 -0
  61. package/dist/renderers/DefaultRowRenderer.js.map +1 -0
  62. package/dist/renderers/DocNameCellRenderer.d.ts +10 -0
  63. package/dist/renderers/DocNameCellRenderer.d.ts.map +1 -0
  64. package/dist/renderers/DocNameCellRenderer.js +43 -0
  65. package/dist/renderers/DocNameCellRenderer.js.map +1 -0
  66. package/dist/renderers/HTMLCellRenderer.d.ts +8 -0
  67. package/dist/renderers/HTMLCellRenderer.d.ts.map +1 -0
  68. package/dist/renderers/HTMLCellRenderer.js +29 -0
  69. package/dist/renderers/HTMLCellRenderer.js.map +1 -0
  70. package/dist/renderers/IsLoadingRenderer.d.ts +6 -0
  71. package/dist/renderers/IsLoadingRenderer.d.ts.map +1 -0
  72. package/dist/renderers/IsLoadingRenderer.js +9 -0
  73. package/dist/renderers/IsLoadingRenderer.js.map +1 -0
  74. package/dist/renderers/NoRegistersRenderer.d.ts +6 -0
  75. package/dist/renderers/NoRegistersRenderer.d.ts.map +1 -0
  76. package/dist/renderers/NoRegistersRenderer.js +11 -0
  77. package/dist/renderers/NoRegistersRenderer.js.map +1 -0
  78. package/dist/renderers/PriorityAccordionRenderer.d.ts +6 -0
  79. package/dist/renderers/PriorityAccordionRenderer.d.ts.map +1 -0
  80. package/dist/renderers/PriorityAccordionRenderer.js +36 -0
  81. package/dist/renderers/PriorityAccordionRenderer.js.map +1 -0
  82. package/dist/renderers/PriorityRenderer.d.ts +9 -0
  83. package/dist/renderers/PriorityRenderer.d.ts.map +1 -0
  84. package/dist/renderers/PriorityRenderer.js +46 -0
  85. package/dist/renderers/PriorityRenderer.js.map +1 -0
  86. package/dist/renderers/RowStatesRenderer.d.ts +9 -0
  87. package/dist/renderers/RowStatesRenderer.d.ts.map +1 -0
  88. package/dist/renderers/RowStatesRenderer.js +34 -0
  89. package/dist/renderers/RowStatesRenderer.js.map +1 -0
  90. package/dist/renderers/StatusAccordionRenderer.d.ts +6 -0
  91. package/dist/renderers/StatusAccordionRenderer.d.ts.map +1 -0
  92. package/dist/renderers/StatusAccordionRenderer.js +23 -0
  93. package/dist/renderers/StatusAccordionRenderer.js.map +1 -0
  94. package/dist/renderers/StatusRenderer.d.ts +9 -0
  95. package/dist/renderers/StatusRenderer.d.ts.map +1 -0
  96. package/dist/renderers/StatusRenderer.js +54 -0
  97. package/dist/renderers/StatusRenderer.js.map +1 -0
  98. package/dist/renderers/TableRenderer.d.ts +6 -0
  99. package/dist/renderers/TableRenderer.d.ts.map +1 -0
  100. package/dist/renderers/TableRenderer.js +50 -0
  101. package/dist/renderers/TableRenderer.js.map +1 -0
  102. package/dist/renderers/makeAccordionAsyncRenderer.d.ts +9 -0
  103. package/dist/renderers/makeAccordionAsyncRenderer.d.ts.map +1 -0
  104. package/dist/renderers/makeAccordionAsyncRenderer.js +35 -0
  105. package/dist/renderers/makeAccordionAsyncRenderer.js.map +1 -0
  106. package/dist/renderers/makeAsyncRenderer.d.ts +10 -0
  107. package/dist/renderers/makeAsyncRenderer.d.ts.map +1 -0
  108. package/dist/renderers/makeAsyncRenderer.js +47 -0
  109. package/dist/renderers/makeAsyncRenderer.js.map +1 -0
  110. package/dist/store/index.d.ts +72 -0
  111. package/dist/store/index.d.ts.map +1 -0
  112. package/dist/store/index.js +131 -0
  113. package/dist/store/index.js.map +1 -0
  114. package/dist/store/selection/getInitialState.js +22 -0
  115. package/dist/store/selection/getInitialState.js.map +1 -0
  116. package/dist/store/selection/getReduxActions.js +42 -0
  117. package/dist/store/selection/getReduxActions.js.map +1 -0
  118. package/dist/store/selection/handleKey.js +143 -0
  119. package/dist/store/selection/handleKey.js.map +1 -0
  120. package/dist/store/selection/makeKeyHandler.js +336 -0
  121. package/dist/store/selection/makeKeyHandler.js.map +1 -0
  122. package/dist/store/selection/setNewFocused.js +101 -0
  123. package/dist/store/selection/setNewFocused.js.map +1 -0
  124. package/dist/store/selection/types.d.ts +150 -0
  125. package/dist/store/selection/types.d.ts.map +1 -0
  126. package/dist/store/selection/useDomProps.js +181 -0
  127. package/dist/store/selection/useDomProps.js.map +1 -0
  128. package/dist/store/types.d.ts +19 -0
  129. package/dist/store/types.d.ts.map +1 -0
  130. package/dist/types.d.ts +315 -0
  131. package/dist/types.d.ts.map +1 -0
  132. package/dist/types.js +6 -0
  133. package/dist/types.js.map +1 -0
  134. package/package.json +3 -3
@@ -0,0 +1,29 @@
1
+ import { jsx } from '@apia/theme/jsx-runtime';
2
+ import React from 'react';
3
+ import { useBreakpointIndex, Box, getVariant } from '@apia/theme';
4
+ import { KeyHandler } from './KeyHandler.js';
5
+ import { TableRenderer } from './renderers/TableRenderer.js';
6
+ import { AccordionRenderer } from './renderers/AccordionRenderer.js';
7
+ import { useResponsiveTableContext } from './ResponsiveTableContext.js';
8
+
9
+ const domPropsSelector = (name) => (global) => global.responsiveTableSlice[name];
10
+ const NoMemoResponsiveTable = React.forwardRef(({ className, ...props }, ref) => {
11
+ const breakpoint = useBreakpointIndex({ defaultIndex: 3 });
12
+ const { currentBreakPoint } = useResponsiveTableContext();
13
+ const actualBreakpoint = currentBreakPoint ?? breakpoint;
14
+ return /* @__PURE__ */ jsx(
15
+ Box,
16
+ {
17
+ ...props,
18
+ ...getVariant("layout.common.tables.responsive"),
19
+ className: `responsiveTable__wrapper ${className ?? ""}`,
20
+ ref,
21
+ children: actualBreakpoint >= 3 ? /* @__PURE__ */ jsx(KeyHandler, { children: /* @__PURE__ */ jsx(TableRenderer, {}) }) : /* @__PURE__ */ jsx(AccordionRenderer, {})
22
+ }
23
+ );
24
+ });
25
+ NoMemoResponsiveTable.displayName = "ResponsiveTable";
26
+ const ResponsiveTable = React.memo(NoMemoResponsiveTable);
27
+
28
+ export { ResponsiveTable, domPropsSelector };
29
+ //# sourceMappingURL=ResponsiveTable.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"ResponsiveTable.js","sources":["../src/ResponsiveTable.tsx"],"sourcesContent":["import React from 'react';\r\nimport { Box, BoxProps, useBreakpointIndex } from '@apia/theme';\r\nimport { getVariant } from '@apia/theme';\r\nimport { KeyHandler } from './KeyHandler';\r\nimport { TableRenderer } from './renderers/TableRenderer';\r\nimport { AccordionRenderer } from './renderers/AccordionRenderer';\r\nimport { TUseDomProps } from './store/selection/types';\r\nimport { responsiveTableStore } from './store';\r\nimport { useResponsiveTableContext } from './ResponsiveTableContext';\r\n\r\ntype TResponsiveTable = BoxProps;\r\n\r\n/**\r\n * Este objeto determina qué partes de la tabla deben\r\n * ser 'debugueadas'. Sobre todo para conocer el\r\n * impacto en el performance de la misma.\r\n */\r\nexport const rtDebug = {\r\n cell: false,\r\n context: false,\r\n filterCell: false,\r\n filters: {\r\n additional: false,\r\n grouped: false,\r\n inner: false,\r\n responsive: false,\r\n sort: false,\r\n },\r\n header: false,\r\n headerCell: false,\r\n index: false,\r\n keyHandler: false,\r\n row: false,\r\n tableRenderer: false,\r\n};\r\n\r\nexport const domPropsSelector: (name: string) => TUseDomProps =\r\n (name: string) =>\r\n (global: ReturnType<typeof responsiveTableStore.getState>) =>\r\n global.responsiveTableSlice[name];\r\n\r\n/**\r\n * El ResponsiveTable renderiza una tabla en base a la\r\n * información provista por ResponsiveTableContext, quien\r\n * debe ser ancestro de este elemento. La finalidad última\r\n * de este componente es lograr responsividad y performance.\r\n *\r\n * Las props pasadas sarán colocadas directamente en el\r\n * wrapper de la tabla. Con esta estructura se busca que\r\n * a la hora de dar estilos a este componente, se pueda pasar\r\n * un variant al Wrapper, sin afectar los estilos por defecto\r\n * de la tabla ni del acordión en modo responsivo. Esto no limita\r\n * en ningún concepto la posibilidad de cambiar el variant a\r\n * la tabla o al acordión, ya que eso puede hacerse desde un\r\n * variante personalizado con la estructura mostrada en el\r\n * ejemplo.\r\n *\r\n * Además, de esta manera es posible aplicar estilo a algunos\r\n * componentes nada más, sin la necesidad de cambiar el layout\r\n * que usa la tabla por defecto. Por ejemplo, con esta estructura\r\n * se puede utilizar un variant personalizado para definir\r\n * el ancho de las columnas de la tabla.\r\n *\r\n * @example\r\n * 'customVariant': {\r\n * '.responsiveTable__accordion': {\r\n * variant: 'layout.tables.otherAccordion'\r\n * }\r\n * '.responsiveTable__table': {\r\n * variant: 'layout.tables.otherTable'\r\n * }\r\n * }\r\n */\r\nconst NoMemoResponsiveTable = React.forwardRef<\r\n HTMLDivElement,\r\n TResponsiveTable\r\n>(({ className, ...props }, ref) => {\r\n const breakpoint = useBreakpointIndex({ defaultIndex: 3 });\r\n const { currentBreakPoint } = useResponsiveTableContext();\r\n\r\n const actualBreakpoint = currentBreakPoint ?? breakpoint;\r\n\r\n return (\r\n <Box\r\n {...props}\r\n {...getVariant('layout.common.tables.responsive')}\r\n className={`responsiveTable__wrapper ${className ?? ''}`}\r\n ref={ref}\r\n >\r\n {actualBreakpoint >= 3 ? (\r\n <KeyHandler>\r\n <TableRenderer />\r\n </KeyHandler>\r\n ) : (\r\n <AccordionRenderer />\r\n )}\r\n </Box>\r\n );\r\n});\r\n\r\nNoMemoResponsiveTable.displayName = 'ResponsiveTable';\r\n\r\nexport const ResponsiveTable = React.memo(NoMemoResponsiveTable);\r\n"],"names":[],"mappings":";;;;;;;;AAoCO,MAAM,mBACX,CAAC,IAAA,KACD,CAAC,MACC,KAAA,MAAA,CAAO,qBAAqB,IAAI,EAAA;AAkCpC,MAAM,qBAAA,GAAwB,MAAM,UAGlC,CAAA,CAAC,EAAE,SAAW,EAAA,GAAG,KAAM,EAAA,EAAG,GAAQ,KAAA;AAClC,EAAA,MAAM,UAAa,GAAA,kBAAA,CAAmB,EAAE,YAAA,EAAc,GAAG,CAAA,CAAA;AACzD,EAAM,MAAA,EAAE,iBAAkB,EAAA,GAAI,yBAA0B,EAAA,CAAA;AAExD,EAAA,MAAM,mBAAmB,iBAAqB,IAAA,UAAA,CAAA;AAE9C,EACE,uBAAA,GAAA;AAAA,IAAC,GAAA;AAAA,IAAA;AAAA,MACE,GAAG,KAAA;AAAA,MACH,GAAG,WAAW,iCAAiC,CAAA;AAAA,MAChD,SAAA,EAAW,CAA4B,yBAAA,EAAA,SAAA,IAAa,EAAE,CAAA,CAAA;AAAA,MACtD,GAAA;AAAA,MAEC,QAAA,EAAA,gBAAA,IAAoB,oBAClB,GAAA,CAAA,UAAA,EAAA,EACC,8BAAC,aAAc,EAAA,EAAA,CAAA,EACjB,CAEA,mBAAA,GAAA,CAAC,iBAAkB,EAAA,EAAA,CAAA;AAAA,KAAA;AAAA,GAEvB,CAAA;AAEJ,CAAC,CAAA,CAAA;AAED,qBAAA,CAAsB,WAAc,GAAA,iBAAA,CAAA;AAEvB,MAAA,eAAA,GAAkB,KAAM,CAAA,IAAA,CAAK,qBAAqB;;;;"}
@@ -0,0 +1,8 @@
1
+ import React__default from 'react';
2
+ import { TResponsiveTableContext, TResponsiveTableContextProps } from './types.js';
3
+
4
+ declare function useResponsiveTableContext(): TResponsiveTableContext;
5
+ declare const ResponsiveTableContext: React__default.MemoExoticComponent<({ allowEdition, allowRowsKeyboardSorting, allowSelection, allowSorting, avoidReparseSelectionOnRowChange, children, className, currentBreakPoint, customLabels, columns, filters, rows, label, isMultiple, name, onChangeSelection, onFilterBlur, onFilterChange, onFilterPressEnter, onSelectRows, onSortChange, reserveColumnsForStates, variant, }: TResponsiveTableContextProps) => React__default.JSX.Element>;
6
+
7
+ export { ResponsiveTableContext, useResponsiveTableContext };
8
+ //# sourceMappingURL=ResponsiveTableContext.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"ResponsiveTableContext.d.ts","sources":[],"sourcesContent":[],"names":[],"mappings":""}
@@ -0,0 +1,143 @@
1
+ import { jsx } from '@apia/theme/jsx-runtime';
2
+ import { useMount, useUpdateEffect, useUnmount } from 'ahooks';
3
+ import uniqueId from 'lodash-es/uniqueId';
4
+ import React from 'react';
5
+ import { Box, getVariant } from '@apia/theme';
6
+ import { defaultLabels } from './types.js';
7
+ import { responsiveTableStore, responsiveTableActions } from './store/index.js';
8
+ import { ResponsiveTable } from './ResponsiveTable.js';
9
+
10
+ const ResponsiveTableReactContext = React.createContext({});
11
+ function useResponsiveTableContext() {
12
+ const context = React.useContext(ResponsiveTableReactContext);
13
+ if (!context)
14
+ throw new Error("There is no ResponsiveTableContext");
15
+ return context;
16
+ }
17
+ const NoMemoResponsiveTableContext = ({
18
+ allowEdition,
19
+ allowRowsKeyboardSorting,
20
+ allowSelection,
21
+ allowSorting,
22
+ avoidReparseSelectionOnRowChange,
23
+ children = /* @__PURE__ */ jsx(ResponsiveTable, {}),
24
+ className,
25
+ currentBreakPoint,
26
+ customLabels,
27
+ columns,
28
+ filters,
29
+ rows,
30
+ label,
31
+ isMultiple,
32
+ name,
33
+ onChangeSelection,
34
+ onFilterBlur,
35
+ onFilterChange,
36
+ onFilterPressEnter,
37
+ onSelectRows,
38
+ onSortChange,
39
+ reserveColumnsForStates,
40
+ variant
41
+ }) => {
42
+ const actualName = React.useMemo(
43
+ () => name ?? uniqueId("responsiveTable"),
44
+ [name]
45
+ );
46
+ const labels = React.useMemo(
47
+ () => ({ ...defaultLabels, ...customLabels }),
48
+ [customLabels]
49
+ );
50
+ const contextValue = React.useMemo(
51
+ () => ({
52
+ currentBreakPoint,
53
+ label,
54
+ labels,
55
+ name: actualName,
56
+ onChangeSelection,
57
+ onFilterBlur,
58
+ onFilterChange,
59
+ onFilterPressEnter,
60
+ onSelectRows,
61
+ onSortChange
62
+ }),
63
+ [
64
+ actualName,
65
+ currentBreakPoint,
66
+ label,
67
+ labels,
68
+ onChangeSelection,
69
+ onFilterBlur,
70
+ onFilterChange,
71
+ onFilterPressEnter,
72
+ onSelectRows,
73
+ onSortChange
74
+ ]
75
+ );
76
+ useMount(() => {
77
+ responsiveTableStore.dispatch(
78
+ responsiveTableActions.update({
79
+ allowEdition,
80
+ allowRowsKeyboardSorting,
81
+ allowSelection,
82
+ allowSorting,
83
+ columns,
84
+ filters: filters ?? [],
85
+ rows,
86
+ isMultiple,
87
+ tableName: actualName,
88
+ reserveColumnsForStates
89
+ })
90
+ );
91
+ });
92
+ useUpdateEffect(() => {
93
+ responsiveTableStore.dispatch(
94
+ responsiveTableActions.update({
95
+ tableName: actualName,
96
+ columns
97
+ })
98
+ );
99
+ }, [columns]);
100
+ useUpdateEffect(() => {
101
+ responsiveTableStore.dispatch(
102
+ responsiveTableActions.update({
103
+ tableName: actualName,
104
+ rows
105
+ })
106
+ );
107
+ if (avoidReparseSelectionOnRowChange !== true) {
108
+ const selected = rows.map((current, i) => ({ ...current, i })).filter((current) => current.initiallySelected);
109
+ responsiveTableStore.dispatch(
110
+ responsiveTableActions.update({
111
+ tableName: actualName,
112
+ selectedRows: selected.map((current) => current.i)
113
+ })
114
+ );
115
+ }
116
+ }, [rows]);
117
+ useUpdateEffect(() => {
118
+ responsiveTableStore.dispatch(
119
+ responsiveTableActions.update({
120
+ tableName: actualName,
121
+ filters
122
+ })
123
+ );
124
+ }, [filters]);
125
+ useUnmount(() => {
126
+ responsiveTableStore.dispatch(
127
+ responsiveTableActions.destroy({ tableName: actualName })
128
+ );
129
+ });
130
+ return /* @__PURE__ */ jsx(ResponsiveTableReactContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsx(
131
+ Box,
132
+ {
133
+ id: name,
134
+ className: `responsiveTableContext__wrapper ${className ?? ""}`,
135
+ ...variant ? getVariant(variant) : null,
136
+ children
137
+ }
138
+ ) });
139
+ };
140
+ const ResponsiveTableContext = React.memo(NoMemoResponsiveTableContext);
141
+
142
+ export { ResponsiveTableContext, ResponsiveTableReactContext, useResponsiveTableContext };
143
+ //# sourceMappingURL=ResponsiveTableContext.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"ResponsiveTableContext.js","sources":["../src/ResponsiveTableContext.tsx"],"sourcesContent":["import { useMount, useUnmount, useUpdateEffect } from 'ahooks';\r\nimport uniqueId from 'lodash-es/uniqueId';\r\nimport React from 'react';\r\nimport { Box } from '@apia/theme';\r\nimport {\r\n defaultLabels,\r\n TResponsiveTableContext,\r\n TResponsiveTableContextProps,\r\n} from './types';\r\nimport { responsiveTableActions, responsiveTableStore } from './store';\r\nimport { ResponsiveTable } from './ResponsiveTable';\r\nimport { getVariant } from '@apia/theme';\r\n\r\nexport const ResponsiveTableReactContext =\r\n React.createContext<TResponsiveTableContext>({} as TResponsiveTableContext);\r\n\r\nexport function useResponsiveTableContext() {\r\n const context = React.useContext(ResponsiveTableReactContext);\r\n if (!context) throw new Error('There is no ResponsiveTableContext');\r\n return context;\r\n}\r\n\r\n/**\r\n * Este contexto busca facilitar la tarea de centralizar las\r\n * propiedades y callbacks asociados a la tabla, de forma de\r\n * evitar la necesidad de distribuir comportamientos.\r\n *\r\n * **MUY IMPORTANTE**\r\n * Asegurarse de memoizar las propiedades rows, filters y\r\n * columns, ya que en caso contrario eso va a disparar\r\n * actualizaciones en el responsiveTableStore cada vez que el padre del\r\n * contexto renderice.\r\n *\r\n */\r\nconst NoMemoResponsiveTableContext = ({\r\n allowEdition,\r\n allowRowsKeyboardSorting,\r\n allowSelection,\r\n allowSorting,\r\n avoidReparseSelectionOnRowChange,\r\n children = <ResponsiveTable />,\r\n className,\r\n currentBreakPoint,\r\n customLabels,\r\n columns,\r\n filters,\r\n rows,\r\n label,\r\n isMultiple,\r\n name,\r\n onChangeSelection,\r\n onFilterBlur,\r\n onFilterChange,\r\n onFilterPressEnter,\r\n onSelectRows,\r\n onSortChange,\r\n reserveColumnsForStates,\r\n variant,\r\n}: TResponsiveTableContextProps) => {\r\n const actualName = React.useMemo(\r\n () => name ?? uniqueId('responsiveTable'),\r\n [name],\r\n );\r\n const labels = React.useMemo(\r\n () => ({ ...defaultLabels, ...customLabels }),\r\n [customLabels],\r\n );\r\n const contextValue = React.useMemo<TResponsiveTableContext>(\r\n () => ({\r\n currentBreakPoint,\r\n label,\r\n labels,\r\n name: actualName,\r\n onChangeSelection,\r\n onFilterBlur,\r\n onFilterChange,\r\n onFilterPressEnter,\r\n onSelectRows,\r\n onSortChange,\r\n }),\r\n [\r\n actualName,\r\n currentBreakPoint,\r\n label,\r\n labels,\r\n onChangeSelection,\r\n onFilterBlur,\r\n onFilterChange,\r\n onFilterPressEnter,\r\n onSelectRows,\r\n onSortChange,\r\n ],\r\n );\r\n\r\n useMount(() => {\r\n responsiveTableStore.dispatch(\r\n responsiveTableActions.update({\r\n allowEdition,\r\n allowRowsKeyboardSorting,\r\n allowSelection,\r\n allowSorting,\r\n columns,\r\n filters: filters ?? [],\r\n rows,\r\n isMultiple,\r\n tableName: actualName,\r\n reserveColumnsForStates,\r\n }),\r\n );\r\n });\r\n\r\n useUpdateEffect(() => {\r\n responsiveTableStore.dispatch(\r\n responsiveTableActions.update({\r\n tableName: actualName,\r\n columns,\r\n }),\r\n );\r\n }, [columns]);\r\n\r\n useUpdateEffect(() => {\r\n responsiveTableStore.dispatch(\r\n responsiveTableActions.update({\r\n tableName: actualName,\r\n rows,\r\n }),\r\n );\r\n if (avoidReparseSelectionOnRowChange !== true) {\r\n const selected = rows\r\n .map((current, i) => ({ ...current, i }))\r\n .filter((current) => current.initiallySelected);\r\n responsiveTableStore.dispatch(\r\n responsiveTableActions.update({\r\n tableName: actualName,\r\n selectedRows: selected.map((current) => current.i),\r\n }),\r\n );\r\n }\r\n }, [rows]);\r\n\r\n useUpdateEffect(() => {\r\n responsiveTableStore.dispatch(\r\n responsiveTableActions.update({\r\n tableName: actualName,\r\n filters,\r\n }),\r\n );\r\n }, [filters]);\r\n\r\n useUnmount(() => {\r\n responsiveTableStore.dispatch(\r\n responsiveTableActions.destroy({ tableName: actualName }),\r\n );\r\n });\r\n\r\n return (\r\n <ResponsiveTableReactContext.Provider value={contextValue}>\r\n <Box\r\n id={name}\r\n className={`responsiveTableContext__wrapper ${className ?? ''}`}\r\n {...(variant ? getVariant(variant) : null)}\r\n >\r\n {children}\r\n </Box>\r\n </ResponsiveTableReactContext.Provider>\r\n );\r\n};\r\n\r\nexport const ResponsiveTableContext = React.memo(NoMemoResponsiveTableContext);\r\n"],"names":[],"mappings":"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"}
package/dist/Row.js ADDED
@@ -0,0 +1,230 @@
1
+ import { jsxs, Fragment, jsx } from '@apia/theme/jsx-runtime';
2
+ import uniqueId from 'lodash-es/uniqueId';
3
+ import React from 'react';
4
+ import { shallowEqual } from 'react-redux';
5
+ import { MdKeyboardArrowDown, MdKeyboardArrowRight } from '@meronex/icons/md/';
6
+ import { getVariant, Box } from '@apia/theme';
7
+ import { IconButton } from '@apia/components';
8
+ import { domPropsSelector } from './ResponsiveTable.js';
9
+ import { AdditionalColumnDefaultRenderer } from './renderers/AdditionalColumnDefaultRenderer.js';
10
+ import { SeparatorCell } from './SeparatorCell.js';
11
+ import { DefaultRowRenderer } from './renderers/DefaultRowRenderer.js';
12
+ import { useResponsiveTableContext } from './ResponsiveTableContext.js';
13
+ import { useResponsiveTable, responsiveTableStore, responsiveTableActions } from './store/index.js';
14
+ import { useDomProps } from './store/selection/useDomProps.js';
15
+ import { StateCell } from './StateCell.js';
16
+ import { Cell } from './Cell.js';
17
+ import { getLabel } from '@apia/util';
18
+
19
+ const NoMemoRow = ({ rowIndex }) => {
20
+ const { name } = useResponsiveTableContext();
21
+ const { columns, hasNonAdditionalFilters } = useResponsiveTable((global) => {
22
+ const tableState = global.responsiveTableSlice[name];
23
+ return {
24
+ columns: tableState?.columns ?? [],
25
+ hasNonAdditionalFilters: tableState?.hasNonAdditionalFilters
26
+ };
27
+ }, shallowEqual);
28
+ const row = useResponsiveTable(
29
+ (global) => global.responsiveTableSlice[name].rows[rowIndex],
30
+ shallowEqual
31
+ );
32
+ const additionalCells = useResponsiveTable(
33
+ (global) => {
34
+ const tableState = global.responsiveTableSlice[name];
35
+ return tableState.columns.map(
36
+ (current, index) => current.showAsAdditional ? {
37
+ index,
38
+ column: current
39
+ } : null
40
+ ).filter(
41
+ (current) => !!current
42
+ ).map((current) => {
43
+ return {
44
+ cell: tableState.rows[rowIndex]?.cells[current.index],
45
+ column: current.column,
46
+ columnIndex: current.index
47
+ };
48
+ });
49
+ },
50
+ (currentValue, newValue) => {
51
+ return currentValue.reduce(
52
+ (accumulatedBoolean, currentCell, cellIndex) => {
53
+ return accumulatedBoolean && shallowEqual(currentCell, newValue[cellIndex]);
54
+ },
55
+ true
56
+ );
57
+ }
58
+ );
59
+ const { isDragging, isExpanded, shouldForbidSelection } = useResponsiveTable(
60
+ (global) => {
61
+ const tableState = global.responsiveTableSlice[name];
62
+ return {
63
+ isExpanded: tableState.expandedRows.includes(rowIndex),
64
+ isDragging: tableState.draggingRow === rowIndex,
65
+ shouldForbidSelection: tableState.rows[rowIndex]?.forbidSelection
66
+ };
67
+ },
68
+ shallowEqual
69
+ );
70
+ const domProps = useDomProps(
71
+ "tr",
72
+ {
73
+ isThisRowExpanded: isExpanded,
74
+ rowIndex
75
+ },
76
+ domPropsSelector(name)
77
+ );
78
+ const expandedRowDomProps = useDomProps(
79
+ "tr",
80
+ {
81
+ isTheExpandedRow: true,
82
+ rowIndex
83
+ },
84
+ domPropsSelector(name)
85
+ );
86
+ const handleExpandedState = React.useCallback(
87
+ (ev) => {
88
+ const willBeExpanded = typeof ev === "boolean" ? ev : !isExpanded;
89
+ if (!willBeExpanded)
90
+ responsiveTableStore.dispatch(
91
+ responsiveTableActions.update({
92
+ tableName: name,
93
+ expandedRows: responsiveTableStore.getState().responsiveTableSlice[name].expandedRows.filter((current) => current !== rowIndex)
94
+ })
95
+ );
96
+ else
97
+ responsiveTableStore.dispatch(
98
+ responsiveTableActions.update({
99
+ tableName: name,
100
+ expandedRows: [
101
+ ...responsiveTableStore.getState().responsiveTableSlice[name].expandedRows,
102
+ rowIndex
103
+ ]
104
+ })
105
+ );
106
+ },
107
+ [isExpanded, name, rowIndex]
108
+ );
109
+ const statesCount = useResponsiveTable((globalState) => {
110
+ const state = globalState.responsiveTableSlice[name];
111
+ return state?.statesColumns ?? 0;
112
+ }, shallowEqual);
113
+ const states = React.useMemo(
114
+ () => (row.states ?? []).map((current) => ({ ...current, id: uniqueId() })),
115
+ [row.states]
116
+ );
117
+ const { ref, ...additionalCellDomProps } = useDomProps(
118
+ "additionalTd",
119
+ { rowIndex },
120
+ domPropsSelector(name)
121
+ );
122
+ const Renderer = React.useMemo(
123
+ () => row.renderer ?? DefaultRowRenderer,
124
+ [row.renderer]
125
+ );
126
+ return /* @__PURE__ */ jsxs(Fragment, { children: [
127
+ /* @__PURE__ */ jsx(
128
+ Renderer,
129
+ {
130
+ ...domProps,
131
+ row,
132
+ rowIndex,
133
+ className: `responsiveTable__row ${row.isHidden ? "hidden" : ""} ${domProps["aria-selected"] ? "selected" : ""} ${shouldForbidSelection ? "non-selectable" : ""} ${states.map((current) => current.className).join(" ")} ${row.className ?? ""} ${row.separator ? "row__separator" : ""} ${isDragging ? "draggingRow" : ""}`,
134
+ onKeyDown: React.useCallback(
135
+ (ev) => {
136
+ if (ev.key.toLowerCase() === "arrowleft" && ev.ctrlKey) {
137
+ ev.preventDefault();
138
+ ev.stopPropagation();
139
+ handleExpandedState(false);
140
+ }
141
+ if (ev.key.toLowerCase() === "arrowright" && ev.ctrlKey) {
142
+ ev.preventDefault();
143
+ ev.stopPropagation();
144
+ handleExpandedState(true);
145
+ }
146
+ },
147
+ [handleExpandedState]
148
+ ),
149
+ children: row.separator ? /* @__PURE__ */ jsx(
150
+ SeparatorCell,
151
+ {
152
+ colSpan: (additionalCells.length > 0 || hasNonAdditionalFilters ? 1 : 0) + statesCount + columns.filter((current) => !current.showAsAdditional).length,
153
+ rowIndex
154
+ }
155
+ ) : /* @__PURE__ */ jsxs(Fragment, { children: [
156
+ (additionalCells.length > 0 || hasNonAdditionalFilters) && /* @__PURE__ */ jsx("td", { className: "additionalInfo__cell", ...additionalCellDomProps, children: additionalCells.length > 0 && /* @__PURE__ */ jsx(
157
+ IconButton,
158
+ {
159
+ size: "Lg",
160
+ ...getVariant("icon-outline"),
161
+ icon: isExpanded ? MdKeyboardArrowDown : MdKeyboardArrowRight,
162
+ "aria-label": isExpanded ? getLabel("lblCollapseRow").text : getLabel("lblExpandRow").text,
163
+ className: "moreInformationButton",
164
+ onClick: handleExpandedState
165
+ }
166
+ ) }),
167
+ Array(statesCount).fill("").map((_, i) => {
168
+ return /* @__PURE__ */ jsx(
169
+ StateCell,
170
+ {
171
+ index: i,
172
+ state: states[i],
173
+ rowIndex
174
+ },
175
+ states[i]?.id ?? i
176
+ );
177
+ }),
178
+ columns.map((current, actualColumnIndex) => ({
179
+ ...current,
180
+ actualColumnIndex
181
+ })).filter((current) => !current.showAsAdditional).map((current, inTableColumnIndex) => {
182
+ if (current.hidden)
183
+ return null;
184
+ return /* @__PURE__ */ jsx(
185
+ Cell,
186
+ {
187
+ columnIndex: current.actualColumnIndex,
188
+ rowIndex,
189
+ inTableColumnIndex
190
+ },
191
+ current.name
192
+ );
193
+ })
194
+ ] })
195
+ }
196
+ ),
197
+ isExpanded && /* @__PURE__ */ jsx("tr", { className: "expandedRow", ...expandedRowDomProps, children: /* @__PURE__ */ jsx(
198
+ "td",
199
+ {
200
+ colSpan: columns.length - additionalCells.length + states.length + 1,
201
+ children: /* @__PURE__ */ jsx(Box, { className: "responsiveTable__additionalInfoContainer", children: additionalCells.map((current) => {
202
+ const { Renderer: ColumnRenderer } = current.column;
203
+ if (ColumnRenderer)
204
+ return /* @__PURE__ */ jsx(
205
+ ColumnRenderer,
206
+ {
207
+ cell: current.cell,
208
+ column: current.column,
209
+ row
210
+ },
211
+ current.column.name
212
+ );
213
+ return /* @__PURE__ */ jsx(
214
+ AdditionalColumnDefaultRenderer,
215
+ {
216
+ cell: current.cell,
217
+ column: current.column,
218
+ row
219
+ },
220
+ current.column.name
221
+ );
222
+ }) })
223
+ }
224
+ ) })
225
+ ] });
226
+ };
227
+ const Row = React.memo(NoMemoRow);
228
+
229
+ export { Row };
230
+ //# sourceMappingURL=Row.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"Row.js","sources":["../src/Row.tsx"],"sourcesContent":["import uniqueId from 'lodash-es/uniqueId';\r\nimport React from 'react';\r\nimport { shallowEqual } from 'react-redux';\r\nimport { MdKeyboardArrowRight, MdKeyboardArrowDown } from '@meronex/icons/md/';\r\nimport { Box } from '@apia/theme';\r\nimport { IconButton } from '@apia/components';\r\nimport { getVariant } from '@apia/theme';\r\nimport { domPropsSelector } from './ResponsiveTable';\r\nimport { TResponsiveTableCell, TResponsiveTableColumn } from './types';\r\nimport { AdditionalColumnDefaultRenderer } from './renderers/AdditionalColumnDefaultRenderer';\r\nimport { SeparatorCell } from './SeparatorCell';\r\nimport { DefaultRowRenderer } from './renderers/DefaultRowRenderer';\r\nimport { useResponsiveTableContext } from './ResponsiveTableContext';\r\nimport {\r\n responsiveTableActions,\r\n responsiveTableStore,\r\n useResponsiveTable,\r\n} from './store';\r\nimport { useDomProps } from './store/selection/useDomProps';\r\nimport { StateCell } from './StateCell';\r\nimport { Cell } from './Cell';\r\nimport { getLabel } from '@apia/util';\r\n\r\ninterface IRow {\r\n rowIndex: number;\r\n}\r\n\r\ntype TAdditionalCell = {\r\n cell: TResponsiveTableCell;\r\n column: TResponsiveTableColumn;\r\n columnIndex: number;\r\n};\r\n\r\nconst NoMemoRow = ({ rowIndex }: IRow) => {\r\n const { name } = useResponsiveTableContext();\r\n\r\n const { columns, hasNonAdditionalFilters } = useResponsiveTable((global) => {\r\n const tableState = global.responsiveTableSlice[name];\r\n return {\r\n columns: tableState?.columns ?? [],\r\n hasNonAdditionalFilters: tableState?.hasNonAdditionalFilters,\r\n };\r\n }, shallowEqual);\r\n const row = useResponsiveTable(\r\n (global) => global.responsiveTableSlice[name].rows[rowIndex],\r\n shallowEqual,\r\n );\r\n const additionalCells: TAdditionalCell[] = useResponsiveTable(\r\n (global) => {\r\n const tableState = global.responsiveTableSlice[name];\r\n return tableState.columns\r\n .map((current, index) =>\r\n current.showAsAdditional\r\n ? {\r\n index,\r\n column: current,\r\n }\r\n : null,\r\n )\r\n .filter(\r\n (\r\n current,\r\n ): current is {\r\n index: number;\r\n column: TResponsiveTableColumn;\r\n } => !!current,\r\n )\r\n .map((current) => {\r\n return {\r\n cell: tableState.rows[rowIndex]?.cells[current.index],\r\n column: current.column,\r\n columnIndex: current.index,\r\n };\r\n });\r\n },\r\n (currentValue, newValue) => {\r\n return currentValue.reduce<boolean>(\r\n (accumulatedBoolean, currentCell, cellIndex) => {\r\n return (\r\n accumulatedBoolean && shallowEqual(currentCell, newValue[cellIndex])\r\n );\r\n },\r\n true,\r\n );\r\n },\r\n );\r\n const { isDragging, isExpanded, shouldForbidSelection } = useResponsiveTable(\r\n (global) => {\r\n const tableState = global.responsiveTableSlice[name];\r\n return {\r\n isExpanded: tableState.expandedRows.includes(rowIndex),\r\n isDragging: tableState.draggingRow === rowIndex,\r\n shouldForbidSelection: tableState.rows[rowIndex]?.forbidSelection,\r\n };\r\n },\r\n shallowEqual,\r\n );\r\n\r\n const domProps = useDomProps(\r\n 'tr',\r\n {\r\n isThisRowExpanded: isExpanded,\r\n rowIndex,\r\n },\r\n domPropsSelector(name),\r\n );\r\n\r\n const expandedRowDomProps = useDomProps(\r\n 'tr',\r\n {\r\n isTheExpandedRow: true,\r\n rowIndex,\r\n },\r\n domPropsSelector(name),\r\n );\r\n\r\n const handleExpandedState = React.useCallback(\r\n (ev: boolean | React.MouseEvent) => {\r\n const willBeExpanded = typeof ev === 'boolean' ? ev : !isExpanded;\r\n if (!willBeExpanded)\r\n responsiveTableStore.dispatch(\r\n responsiveTableActions.update({\r\n tableName: name,\r\n expandedRows: responsiveTableStore\r\n .getState()\r\n .responsiveTableSlice[\r\n name\r\n ].expandedRows.filter((current) => current !== rowIndex),\r\n }),\r\n );\r\n else\r\n responsiveTableStore.dispatch(\r\n responsiveTableActions.update({\r\n tableName: name,\r\n expandedRows: [\r\n ...responsiveTableStore.getState().responsiveTableSlice[name]\r\n .expandedRows,\r\n rowIndex,\r\n ],\r\n }),\r\n );\r\n },\r\n [isExpanded, name, rowIndex],\r\n );\r\n\r\n const statesCount = useResponsiveTable((globalState) => {\r\n const state = globalState.responsiveTableSlice[name];\r\n return state?.statesColumns ?? 0;\r\n }, shallowEqual);\r\n\r\n const states = React.useMemo(\r\n () => (row.states ?? []).map((current) => ({ ...current, id: uniqueId() })),\r\n [row.states],\r\n );\r\n\r\n const { ref, ...additionalCellDomProps } = useDomProps(\r\n 'additionalTd',\r\n { rowIndex },\r\n domPropsSelector(name),\r\n );\r\n\r\n const Renderer = React.useMemo(\r\n () => row.renderer ?? DefaultRowRenderer,\r\n [row.renderer],\r\n );\r\n\r\n return (\r\n <>\r\n <Renderer\r\n {...domProps}\r\n row={row}\r\n rowIndex={rowIndex}\r\n className={`responsiveTable__row ${row.isHidden ? 'hidden' : ''} ${\r\n domProps['aria-selected'] ? 'selected' : ''\r\n } ${shouldForbidSelection ? 'non-selectable' : ''} ${states\r\n .map((current) => current.className)\r\n .join(' ')} ${row.className ?? ''} ${\r\n row.separator ? 'row__separator' : ''\r\n } ${isDragging ? 'draggingRow' : ''}`}\r\n onKeyDown={React.useCallback(\r\n (ev: React.KeyboardEvent) => {\r\n if (ev.key.toLowerCase() === 'arrowleft' && ev.ctrlKey) {\r\n ev.preventDefault();\r\n ev.stopPropagation();\r\n handleExpandedState(false);\r\n }\r\n if (ev.key.toLowerCase() === 'arrowright' && ev.ctrlKey) {\r\n ev.preventDefault();\r\n ev.stopPropagation();\r\n handleExpandedState(true);\r\n }\r\n },\r\n [handleExpandedState],\r\n )}\r\n >\r\n {row.separator ? (\r\n <SeparatorCell\r\n colSpan={\r\n (additionalCells.length > 0 || hasNonAdditionalFilters ? 1 : 0) +\r\n statesCount +\r\n columns.filter((current) => !current.showAsAdditional).length\r\n }\r\n rowIndex={rowIndex}\r\n />\r\n ) : (\r\n <>\r\n {(additionalCells.length > 0 || hasNonAdditionalFilters) && (\r\n <td className=\"additionalInfo__cell\" {...additionalCellDomProps}>\r\n {additionalCells.length > 0 && (\r\n <IconButton\r\n size={'Lg'}\r\n {...getVariant('icon-outline')}\r\n icon={\r\n isExpanded ? MdKeyboardArrowDown : MdKeyboardArrowRight\r\n }\r\n aria-label={\r\n isExpanded\r\n ? getLabel('lblCollapseRow').text\r\n : getLabel('lblExpandRow').text\r\n }\r\n className=\"moreInformationButton\"\r\n onClick={handleExpandedState}\r\n />\r\n )}\r\n </td>\r\n )}\r\n {Array(statesCount)\r\n .fill('')\r\n .map((_, i) => {\r\n return (\r\n <StateCell\r\n key={states[i]?.id ?? i}\r\n index={i}\r\n state={states[i]}\r\n rowIndex={rowIndex}\r\n />\r\n );\r\n })}\r\n {columns\r\n .map((current, actualColumnIndex) => ({\r\n ...current,\r\n actualColumnIndex,\r\n }))\r\n .filter((current) => !current.showAsAdditional)\r\n .map((current, inTableColumnIndex) => {\r\n if (current.hidden) return null;\r\n return (\r\n <Cell\r\n key={current.name}\r\n columnIndex={current.actualColumnIndex}\r\n rowIndex={rowIndex}\r\n inTableColumnIndex={inTableColumnIndex}\r\n />\r\n );\r\n })}\r\n </>\r\n )}\r\n </Renderer>\r\n {isExpanded && (\r\n <tr className=\"expandedRow\" {...expandedRowDomProps}>\r\n <td\r\n colSpan={\r\n columns.length - additionalCells.length + states.length + 1\r\n }\r\n >\r\n <Box className=\"responsiveTable__additionalInfoContainer\">\r\n {additionalCells.map((current) => {\r\n const { Renderer: ColumnRenderer } = current.column;\r\n if (ColumnRenderer)\r\n return (\r\n <ColumnRenderer\r\n key={current.column.name}\r\n cell={current.cell}\r\n column={current.column}\r\n row={row}\r\n />\r\n );\r\n return (\r\n <AdditionalColumnDefaultRenderer\r\n key={current.column.name}\r\n cell={current.cell}\r\n column={current.column}\r\n row={row}\r\n />\r\n );\r\n })}\r\n </Box>\r\n </td>\r\n </tr>\r\n )}\r\n </>\r\n );\r\n};\r\n\r\nexport const Row = React.memo(NoMemoRow);\r\n"],"names":[],"mappings":"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"}
@@ -0,0 +1,20 @@
1
+ import { jsx } from '@apia/theme/jsx-runtime';
2
+ import { domPropsSelector } from './ResponsiveTable.js';
3
+ import { useResponsiveTableContext } from './ResponsiveTableContext.js';
4
+ import { useDomProps } from './store/selection/useDomProps.js';
5
+
6
+ const SeparatorCell = ({
7
+ colSpan,
8
+ rowIndex
9
+ }) => {
10
+ const { name } = useResponsiveTableContext();
11
+ const domProps = useDomProps(
12
+ "separator",
13
+ { rowIndex },
14
+ domPropsSelector(name)
15
+ );
16
+ return /* @__PURE__ */ jsx("td", { className: "row__separator__cell", colSpan, ...domProps });
17
+ };
18
+
19
+ export { SeparatorCell };
20
+ //# sourceMappingURL=SeparatorCell.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"SeparatorCell.js","sources":["../src/SeparatorCell.tsx"],"sourcesContent":["import { domPropsSelector } from './ResponsiveTable';\r\nimport { useResponsiveTableContext } from './ResponsiveTableContext';\r\nimport { useDomProps } from './store/selection/useDomProps';\r\n\r\nexport const SeparatorCell = ({\r\n colSpan,\r\n rowIndex,\r\n}: {\r\n colSpan: number;\r\n rowIndex: number;\r\n}) => {\r\n const { name } = useResponsiveTableContext();\r\n const domProps = useDomProps(\r\n 'separator',\r\n { rowIndex },\r\n domPropsSelector(name),\r\n );\r\n return (\r\n <td className=\"row__separator__cell\" colSpan={colSpan} {...domProps} />\r\n );\r\n};\r\n"],"names":[],"mappings":";;;;;AAIO,MAAM,gBAAgB,CAAC;AAAA,EAC5B,OAAA;AAAA,EACA,QAAA;AACF,CAGM,KAAA;AACJ,EAAM,MAAA,EAAE,IAAK,EAAA,GAAI,yBAA0B,EAAA,CAAA;AAC3C,EAAA,MAAM,QAAW,GAAA,WAAA;AAAA,IACf,WAAA;AAAA,IACA,EAAE,QAAS,EAAA;AAAA,IACX,iBAAiB,IAAI,CAAA;AAAA,GACvB,CAAA;AACA,EAAA,2BACG,IAAG,EAAA,EAAA,SAAA,EAAU,sBAAuB,EAAA,OAAA,EAAmB,GAAG,QAAU,EAAA,CAAA,CAAA;AAEzE;;;;"}
@@ -0,0 +1,19 @@
1
+ import { jsx } from '@apia/theme/jsx-runtime';
2
+ import { domPropsSelector } from './ResponsiveTable.js';
3
+ import { RowStatesRenderer } from './renderers/RowStatesRenderer.js';
4
+ import { useResponsiveTableContext } from './ResponsiveTableContext.js';
5
+ import { useDomProps } from './store/selection/useDomProps.js';
6
+ import { Box } from '@apia/theme';
7
+
8
+ const StateCell = ({ index, rowIndex, state, isHeader }) => {
9
+ const { name } = useResponsiveTableContext();
10
+ const domProps = useDomProps(
11
+ isHeader ? "headerStateCell" : "stateCell",
12
+ { columnIndex: index, rowIndex },
13
+ domPropsSelector(name)
14
+ );
15
+ return /* @__PURE__ */ jsx(Box, { as: "td", className: "stateCell", ...domProps, children: state ? /* @__PURE__ */ jsx(RowStatesRenderer, { state }) : "" });
16
+ };
17
+
18
+ export { StateCell };
19
+ //# sourceMappingURL=StateCell.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"StateCell.js","sources":["../src/StateCell.tsx"],"sourcesContent":["import { domPropsSelector } from './ResponsiveTable';\r\nimport { RowStatesRenderer } from './renderers/RowStatesRenderer';\r\nimport { useResponsiveTableContext } from './ResponsiveTableContext';\r\nimport { useDomProps } from './store/selection/useDomProps';\r\nimport { TResponsiveTableRowState } from './types';\r\nimport { Box } from '@apia/theme';\r\n\r\ninterface IStateCell {\r\n index: number;\r\n isHeader?: boolean;\r\n rowIndex: number;\r\n state?: TResponsiveTableRowState;\r\n}\r\n\r\nexport const StateCell = ({ index, rowIndex, state, isHeader }: IStateCell) => {\r\n const { name } = useResponsiveTableContext();\r\n const domProps = useDomProps(\r\n isHeader ? 'headerStateCell' : 'stateCell',\r\n { columnIndex: index, rowIndex },\r\n domPropsSelector(name),\r\n );\r\n return (\r\n <Box as=\"td\" className=\"stateCell\" {...domProps}>\r\n {state ? <RowStatesRenderer state={state} /> : ''}\r\n </Box>\r\n );\r\n};\r\n"],"names":[],"mappings":";;;;;;;AAcO,MAAM,YAAY,CAAC,EAAE,OAAO,QAAU,EAAA,KAAA,EAAO,UAA2B,KAAA;AAC7E,EAAM,MAAA,EAAE,IAAK,EAAA,GAAI,yBAA0B,EAAA,CAAA;AAC3C,EAAA,MAAM,QAAW,GAAA,WAAA;AAAA,IACf,WAAW,iBAAoB,GAAA,WAAA;AAAA,IAC/B,EAAE,WAAa,EAAA,KAAA,EAAO,QAAS,EAAA;AAAA,IAC/B,iBAAiB,IAAI,CAAA;AAAA,GACvB,CAAA;AACA,EAAA,uBACG,GAAA,CAAA,GAAA,EAAA,EAAI,EAAG,EAAA,IAAA,EAAK,SAAU,EAAA,WAAA,EAAa,GAAG,QAAA,EACpC,QAAQ,EAAA,KAAA,mBAAA,GAAA,CAAC,iBAAkB,EAAA,EAAA,KAAA,EAAc,IAAK,EACjD,EAAA,CAAA,CAAA;AAEJ;;;;"}
@@ -0,0 +1,61 @@
1
+ import { jsxs, jsx } from '@apia/theme/jsx-runtime';
2
+ import { Box } from '@apia/theme';
3
+ import { ApiaFilter } from '@apia/components';
4
+ import { useResponsiveTableContext } from '../ResponsiveTableContext.js';
5
+
6
+ const NoMemoRangeFilter = ({ filter }) => {
7
+ const { onFilterBlur, onFilterChange, onFilterPressEnter } = useResponsiveTableContext();
8
+ const filterLow = {
9
+ id: filter.id,
10
+ currentValue: filter.currentValue,
11
+ type: "number"
12
+ };
13
+ const filterHigh = {
14
+ id: filter.filterToId ?? "",
15
+ currentValue: filter.filterToValue ?? "",
16
+ type: "number"
17
+ };
18
+ return /* @__PURE__ */ jsxs(Box, { className: "ApiaFilter__Range", children: [
19
+ /* @__PURE__ */ jsx(Box, { className: "ApiaFilter__Range__Low", children: /* @__PURE__ */ jsx(
20
+ ApiaFilter,
21
+ {
22
+ filter: filterLow,
23
+ onChange: (currentValue) => {
24
+ if (onFilterChange)
25
+ void onFilterChange({ ...filterLow, currentValue });
26
+ },
27
+ onBlur: (currentValue) => {
28
+ if (onFilterBlur)
29
+ void onFilterBlur({ ...filterLow, currentValue });
30
+ },
31
+ onPressEnter: (currentValue) => {
32
+ if (onFilterPressEnter)
33
+ void onFilterPressEnter({ ...filterLow, currentValue });
34
+ }
35
+ }
36
+ ) }),
37
+ " - ",
38
+ /* @__PURE__ */ jsx(Box, { className: "ApiaFilter__Range__High", children: /* @__PURE__ */ jsx(
39
+ ApiaFilter,
40
+ {
41
+ filter: filterHigh,
42
+ onChange: (currentValue) => {
43
+ if (onFilterChange)
44
+ void onFilterChange({ ...filterHigh, currentValue });
45
+ },
46
+ onBlur: (currentValue) => {
47
+ if (onFilterBlur)
48
+ void onFilterBlur({ ...filterHigh, currentValue });
49
+ },
50
+ onPressEnter: (currentValue) => {
51
+ if (onFilterPressEnter)
52
+ void onFilterPressEnter({ ...filterHigh, currentValue });
53
+ }
54
+ }
55
+ ) })
56
+ ] });
57
+ };
58
+ const RangeFilter = NoMemoRangeFilter;
59
+
60
+ export { RangeFilter };
61
+ //# sourceMappingURL=RangeFilter.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"RangeFilter.js","sources":["../../src/filters/RangeFilter.tsx"],"sourcesContent":["import { Box } from '@apia/theme';\r\nimport { TApiaFilter } from '@apia/util';\r\nimport { ApiaFilter } from '@apia/components';\r\nimport { useResponsiveTableContext } from '../ResponsiveTableContext';\r\n\r\nconst NoMemoRangeFilter = ({ filter }: { filter: TApiaFilter }) => {\r\n const { onFilterBlur, onFilterChange, onFilterPressEnter } =\r\n useResponsiveTableContext();\r\n const filterLow: TApiaFilter = {\r\n id: filter.id,\r\n currentValue: filter.currentValue,\r\n type: 'number',\r\n };\r\n const filterHigh: TApiaFilter = {\r\n id: filter.filterToId ?? '',\r\n currentValue: filter.filterToValue ?? '',\r\n type: 'number',\r\n };\r\n return (\r\n <Box className=\"ApiaFilter__Range\">\r\n <Box className=\"ApiaFilter__Range__Low\">\r\n <ApiaFilter\r\n filter={filterLow}\r\n onChange={(currentValue) => {\r\n if (onFilterChange)\r\n void onFilterChange({ ...filterLow, currentValue });\r\n }}\r\n onBlur={(currentValue) => {\r\n if (onFilterBlur) void onFilterBlur({ ...filterLow, currentValue });\r\n }}\r\n onPressEnter={(currentValue) => {\r\n if (onFilterPressEnter)\r\n void onFilterPressEnter({ ...filterLow, currentValue });\r\n }}\r\n />\r\n </Box>\r\n {' - '}\r\n <Box className=\"ApiaFilter__Range__High\">\r\n <ApiaFilter\r\n filter={filterHigh}\r\n onChange={(currentValue) => {\r\n if (onFilterChange)\r\n void onFilterChange({ ...filterHigh, currentValue });\r\n }}\r\n onBlur={(currentValue) => {\r\n if (onFilterBlur)\r\n void onFilterBlur({ ...filterHigh, currentValue });\r\n }}\r\n onPressEnter={(currentValue) => {\r\n if (onFilterPressEnter)\r\n void onFilterPressEnter({ ...filterHigh, currentValue });\r\n }}\r\n />\r\n </Box>\r\n </Box>\r\n );\r\n};\r\n\r\nexport const RangeFilter = NoMemoRangeFilter;\r\n"],"names":[],"mappings":";;;;;AAKA,MAAM,iBAAoB,GAAA,CAAC,EAAE,MAAA,EAAsC,KAAA;AACjE,EAAA,MAAM,EAAE,YAAA,EAAc,cAAgB,EAAA,kBAAA,KACpC,yBAA0B,EAAA,CAAA;AAC5B,EAAA,MAAM,SAAyB,GAAA;AAAA,IAC7B,IAAI,MAAO,CAAA,EAAA;AAAA,IACX,cAAc,MAAO,CAAA,YAAA;AAAA,IACrB,IAAM,EAAA,QAAA;AAAA,GACR,CAAA;AACA,EAAA,MAAM,UAA0B,GAAA;AAAA,IAC9B,EAAA,EAAI,OAAO,UAAc,IAAA,EAAA;AAAA,IACzB,YAAA,EAAc,OAAO,aAAiB,IAAA,EAAA;AAAA,IACtC,IAAM,EAAA,QAAA;AAAA,GACR,CAAA;AACA,EACE,uBAAA,IAAA,CAAC,GAAI,EAAA,EAAA,SAAA,EAAU,mBACb,EAAA,QAAA,EAAA;AAAA,oBAAC,GAAA,CAAA,GAAA,EAAA,EAAI,WAAU,wBACb,EAAA,QAAA,kBAAA,GAAA;AAAA,MAAC,UAAA;AAAA,MAAA;AAAA,QACC,MAAQ,EAAA,SAAA;AAAA,QACR,QAAA,EAAU,CAAC,YAAiB,KAAA;AAC1B,UAAI,IAAA,cAAA;AACF,YAAA,KAAK,cAAe,CAAA,EAAE,GAAG,SAAA,EAAW,cAAc,CAAA,CAAA;AAAA,SACtD;AAAA,QACA,MAAA,EAAQ,CAAC,YAAiB,KAAA;AACxB,UAAI,IAAA,YAAA;AAAc,YAAA,KAAK,YAAa,CAAA,EAAE,GAAG,SAAA,EAAW,cAAc,CAAA,CAAA;AAAA,SACpE;AAAA,QACA,YAAA,EAAc,CAAC,YAAiB,KAAA;AAC9B,UAAI,IAAA,kBAAA;AACF,YAAA,KAAK,kBAAmB,CAAA,EAAE,GAAG,SAAA,EAAW,cAAc,CAAA,CAAA;AAAA,SAC1D;AAAA,OAAA;AAAA,KAEJ,EAAA,CAAA;AAAA,IACC,KAAA;AAAA,oBACD,GAAA,CAAC,GAAI,EAAA,EAAA,SAAA,EAAU,yBACb,EAAA,QAAA,kBAAA,GAAA;AAAA,MAAC,UAAA;AAAA,MAAA;AAAA,QACC,MAAQ,EAAA,UAAA;AAAA,QACR,QAAA,EAAU,CAAC,YAAiB,KAAA;AAC1B,UAAI,IAAA,cAAA;AACF,YAAA,KAAK,cAAe,CAAA,EAAE,GAAG,UAAA,EAAY,cAAc,CAAA,CAAA;AAAA,SACvD;AAAA,QACA,MAAA,EAAQ,CAAC,YAAiB,KAAA;AACxB,UAAI,IAAA,YAAA;AACF,YAAA,KAAK,YAAa,CAAA,EAAE,GAAG,UAAA,EAAY,cAAc,CAAA,CAAA;AAAA,SACrD;AAAA,QACA,YAAA,EAAc,CAAC,YAAiB,KAAA;AAC9B,UAAI,IAAA,kBAAA;AACF,YAAA,KAAK,kBAAmB,CAAA,EAAE,GAAG,UAAA,EAAY,cAAc,CAAA,CAAA;AAAA,SAC3D;AAAA,OAAA;AAAA,KAEJ,EAAA,CAAA;AAAA,GACF,EAAA,CAAA,CAAA;AAEJ,CAAA,CAAA;AAEO,MAAM,WAAc,GAAA;;;;"}