@apia/table 3.0.1 → 3.0.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.
- package/dist/index.d.ts +787 -24
- package/dist/index.js +3667 -24
- package/dist/index.js.map +1 -1
- package/package.json +7 -7
- package/dist/Cell.js +0 -52
- package/dist/Cell.js.map +0 -1
- package/dist/FilterCell.js +0 -68
- package/dist/FilterCell.js.map +0 -1
- package/dist/Header.js +0 -171
- package/dist/Header.js.map +0 -1
- package/dist/HeaderCell.js +0 -223
- package/dist/HeaderCell.js.map +0 -1
- package/dist/KeyHandler.js +0 -28
- package/dist/KeyHandler.js.map +0 -1
- package/dist/ResponsiveTable.d.ts +0 -8
- package/dist/ResponsiveTable.d.ts.map +0 -1
- package/dist/ResponsiveTable.js +0 -29
- package/dist/ResponsiveTable.js.map +0 -1
- package/dist/ResponsiveTableContext.d.ts +0 -8
- package/dist/ResponsiveTableContext.d.ts.map +0 -1
- package/dist/ResponsiveTableContext.js +0 -140
- package/dist/ResponsiveTableContext.js.map +0 -1
- package/dist/Row.js +0 -230
- package/dist/Row.js.map +0 -1
- package/dist/SeparatorCell.js +0 -20
- package/dist/SeparatorCell.js.map +0 -1
- package/dist/StateCell.js +0 -19
- package/dist/StateCell.js.map +0 -1
- package/dist/filters/RangeFilter.js +0 -61
- package/dist/filters/RangeFilter.js.map +0 -1
- package/dist/renderers/AccordionCell.d.ts +0 -15
- package/dist/renderers/AccordionCell.d.ts.map +0 -1
- package/dist/renderers/AccordionCell.js +0 -23
- package/dist/renderers/AccordionCell.js.map +0 -1
- package/dist/renderers/AccordionDocNameCellRenderer.d.ts +0 -11
- package/dist/renderers/AccordionDocNameCellRenderer.d.ts.map +0 -1
- package/dist/renderers/AccordionDocNameCellRenderer.js +0 -39
- package/dist/renderers/AccordionDocNameCellRenderer.js.map +0 -1
- package/dist/renderers/AccordionElement.d.ts +0 -11
- package/dist/renderers/AccordionElement.d.ts.map +0 -1
- package/dist/renderers/AccordionElement.js +0 -115
- package/dist/renderers/AccordionElement.js.map +0 -1
- package/dist/renderers/AccordionHTMLCellRenderer.d.ts +0 -8
- package/dist/renderers/AccordionHTMLCellRenderer.d.ts.map +0 -1
- package/dist/renderers/AccordionHTMLCellRenderer.js +0 -37
- package/dist/renderers/AccordionHTMLCellRenderer.js.map +0 -1
- package/dist/renderers/AccordionRenderer.d.ts +0 -6
- package/dist/renderers/AccordionRenderer.d.ts.map +0 -1
- package/dist/renderers/AccordionRenderer.js +0 -76
- package/dist/renderers/AccordionRenderer.js.map +0 -1
- package/dist/renderers/AdditionalColumnDefaultRenderer.d.ts +0 -7
- package/dist/renderers/AdditionalColumnDefaultRenderer.d.ts.map +0 -1
- package/dist/renderers/AdditionalColumnDefaultRenderer.js +0 -31
- package/dist/renderers/AdditionalColumnDefaultRenderer.js.map +0 -1
- package/dist/renderers/DefaultCellRenderer.d.ts +0 -11
- package/dist/renderers/DefaultCellRenderer.d.ts.map +0 -1
- package/dist/renderers/DefaultCellRenderer.js +0 -49
- package/dist/renderers/DefaultCellRenderer.js.map +0 -1
- package/dist/renderers/DefaultRowRenderer.d.ts +0 -6
- package/dist/renderers/DefaultRowRenderer.d.ts.map +0 -1
- package/dist/renderers/DefaultRowRenderer.js +0 -26
- package/dist/renderers/DefaultRowRenderer.js.map +0 -1
- package/dist/renderers/DocNameCellRenderer.d.ts +0 -10
- package/dist/renderers/DocNameCellRenderer.d.ts.map +0 -1
- package/dist/renderers/DocNameCellRenderer.js +0 -43
- package/dist/renderers/DocNameCellRenderer.js.map +0 -1
- package/dist/renderers/HTMLCellRenderer.d.ts +0 -8
- package/dist/renderers/HTMLCellRenderer.d.ts.map +0 -1
- package/dist/renderers/HTMLCellRenderer.js +0 -29
- package/dist/renderers/HTMLCellRenderer.js.map +0 -1
- package/dist/renderers/IsLoadingRenderer.d.ts +0 -6
- package/dist/renderers/IsLoadingRenderer.d.ts.map +0 -1
- package/dist/renderers/IsLoadingRenderer.js +0 -9
- package/dist/renderers/IsLoadingRenderer.js.map +0 -1
- package/dist/renderers/NoRegistersRenderer.d.ts +0 -6
- package/dist/renderers/NoRegistersRenderer.d.ts.map +0 -1
- package/dist/renderers/NoRegistersRenderer.js +0 -11
- package/dist/renderers/NoRegistersRenderer.js.map +0 -1
- package/dist/renderers/PriorityAccordionRenderer.d.ts +0 -6
- package/dist/renderers/PriorityAccordionRenderer.d.ts.map +0 -1
- package/dist/renderers/PriorityAccordionRenderer.js +0 -36
- package/dist/renderers/PriorityAccordionRenderer.js.map +0 -1
- package/dist/renderers/PriorityRenderer.d.ts +0 -9
- package/dist/renderers/PriorityRenderer.d.ts.map +0 -1
- package/dist/renderers/PriorityRenderer.js +0 -46
- package/dist/renderers/PriorityRenderer.js.map +0 -1
- package/dist/renderers/RowStatesRenderer.d.ts +0 -9
- package/dist/renderers/RowStatesRenderer.d.ts.map +0 -1
- package/dist/renderers/RowStatesRenderer.js +0 -34
- package/dist/renderers/RowStatesRenderer.js.map +0 -1
- package/dist/renderers/StatusAccordionRenderer.d.ts +0 -6
- package/dist/renderers/StatusAccordionRenderer.d.ts.map +0 -1
- package/dist/renderers/StatusAccordionRenderer.js +0 -23
- package/dist/renderers/StatusAccordionRenderer.js.map +0 -1
- package/dist/renderers/StatusRenderer.d.ts +0 -9
- package/dist/renderers/StatusRenderer.d.ts.map +0 -1
- package/dist/renderers/StatusRenderer.js +0 -54
- package/dist/renderers/StatusRenderer.js.map +0 -1
- package/dist/renderers/TableRenderer.d.ts +0 -6
- package/dist/renderers/TableRenderer.d.ts.map +0 -1
- package/dist/renderers/TableRenderer.js +0 -50
- package/dist/renderers/TableRenderer.js.map +0 -1
- package/dist/renderers/makeAccordionAsyncRenderer.d.ts +0 -9
- package/dist/renderers/makeAccordionAsyncRenderer.d.ts.map +0 -1
- package/dist/renderers/makeAccordionAsyncRenderer.js +0 -35
- package/dist/renderers/makeAccordionAsyncRenderer.js.map +0 -1
- package/dist/renderers/makeAsyncRenderer.d.ts +0 -10
- package/dist/renderers/makeAsyncRenderer.d.ts.map +0 -1
- package/dist/renderers/makeAsyncRenderer.js +0 -47
- package/dist/renderers/makeAsyncRenderer.js.map +0 -1
- package/dist/store/index.d.ts +0 -72
- package/dist/store/index.d.ts.map +0 -1
- package/dist/store/index.js +0 -131
- package/dist/store/index.js.map +0 -1
- package/dist/store/selection/getInitialState.js +0 -22
- package/dist/store/selection/getInitialState.js.map +0 -1
- package/dist/store/selection/getReduxActions.js +0 -42
- package/dist/store/selection/getReduxActions.js.map +0 -1
- package/dist/store/selection/handleKey.js +0 -143
- package/dist/store/selection/handleKey.js.map +0 -1
- package/dist/store/selection/makeKeyHandler.js +0 -336
- package/dist/store/selection/makeKeyHandler.js.map +0 -1
- package/dist/store/selection/setNewFocused.js +0 -101
- package/dist/store/selection/setNewFocused.js.map +0 -1
- package/dist/store/selection/types.d.ts +0 -150
- package/dist/store/selection/types.d.ts.map +0 -1
- package/dist/store/selection/useDomProps.js +0 -181
- package/dist/store/selection/useDomProps.js.map +0 -1
- package/dist/store/types.d.ts +0 -19
- package/dist/store/types.d.ts.map +0 -1
- package/dist/types.d.ts +0 -315
- package/dist/types.d.ts.map +0 -1
- package/dist/types.js +0 -6
- package/dist/types.js.map +0 -1
package/dist/KeyHandler.js
DELETED
|
@@ -1,28 +0,0 @@
|
|
|
1
|
-
import { jsx } from '@apia/theme/jsx-runtime';
|
|
2
|
-
import React from 'react';
|
|
3
|
-
import { useResponsiveTableContext } from './ResponsiveTableContext.js';
|
|
4
|
-
import { makeKeyHandler } from './store/selection/makeKeyHandler.js';
|
|
5
|
-
import { responsiveTableActions } from './store/index.js';
|
|
6
|
-
|
|
7
|
-
const NoMemoKeyHandler = (props) => {
|
|
8
|
-
const { name, onChangeSelection, onSelectRows } = useResponsiveTableContext();
|
|
9
|
-
const Handler = React.useMemo(
|
|
10
|
-
() => makeKeyHandler(responsiveTableActions, name, {
|
|
11
|
-
throttleOptions: { wait: 50 },
|
|
12
|
-
stateSelector: (global) => global.responsiveTableSlice[name]
|
|
13
|
-
}),
|
|
14
|
-
[name]
|
|
15
|
-
);
|
|
16
|
-
return /* @__PURE__ */ jsx(
|
|
17
|
-
Handler,
|
|
18
|
-
{
|
|
19
|
-
onChangeSelection,
|
|
20
|
-
onSelectRows,
|
|
21
|
-
...props
|
|
22
|
-
}
|
|
23
|
-
);
|
|
24
|
-
};
|
|
25
|
-
const KeyHandler = React.memo(NoMemoKeyHandler);
|
|
26
|
-
|
|
27
|
-
export { KeyHandler };
|
|
28
|
-
//# sourceMappingURL=KeyHandler.js.map
|
package/dist/KeyHandler.js.map
DELETED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"KeyHandler.js","sources":["../src/KeyHandler.tsx"],"sourcesContent":["import React from 'react';\nimport { BoxProps } from '@apia/theme';\nimport { useResponsiveTableContext } from './ResponsiveTableContext';\nimport { makeKeyHandler } from './store/selection/makeKeyHandler';\nimport { responsiveTableActions } from './store';\n\nexport interface IKeyHandler {\n children: React.ReactNode;\n}\n\nconst NoMemoKeyHandler = (props: BoxProps) => {\n const { name, onChangeSelection, onSelectRows } = useResponsiveTableContext();\n\n const Handler = React.useMemo(\n () =>\n makeKeyHandler(responsiveTableActions, name, {\n throttleOptions: { wait: 50 },\n stateSelector: (global) => global.responsiveTableSlice[name],\n }),\n [name],\n );\n\n return (\n <Handler\n onChangeSelection={onChangeSelection}\n onSelectRows={onSelectRows}\n {...props}\n />\n );\n};\n\nexport const KeyHandler = React.memo(NoMemoKeyHandler);\n"],"names":[],"mappings":";;;;;;AAUA,MAAM,gBAAA,GAAmB,CAAC,KAAoB,KAAA;AAC5C,EAAA,MAAM,EAAE,IAAA,EAAM,iBAAmB,EAAA,YAAA,KAAiB,yBAA0B,EAAA,CAAA;AAE5E,EAAA,MAAM,UAAU,KAAM,CAAA,OAAA;AAAA,IACpB,MACE,cAAe,CAAA,sBAAA,EAAwB,IAAM,EAAA;AAAA,MAC3C,eAAA,EAAiB,EAAE,IAAA,EAAM,EAAG,EAAA;AAAA,MAC5B,aAAe,EAAA,CAAC,MAAW,KAAA,MAAA,CAAO,qBAAqB,IAAI,CAAA;AAAA,KAC5D,CAAA;AAAA,IACH,CAAC,IAAI,CAAA;AAAA,GACP,CAAA;AAEA,EACE,uBAAA,GAAA;AAAA,IAAC,OAAA;AAAA,IAAA;AAAA,MACC,iBAAA;AAAA,MACA,YAAA;AAAA,MACC,GAAG,KAAA;AAAA,KAAA;AAAA,GACN,CAAA;AAEJ,CAAA,CAAA;AAEa,MAAA,UAAA,GAAa,KAAM,CAAA,IAAA,CAAK,gBAAgB;;;;"}
|
|
@@ -1,8 +0,0 @@
|
|
|
1
|
-
import React__default from 'react';
|
|
2
|
-
import { BoxProps } from '@apia/theme';
|
|
3
|
-
import './types.js';
|
|
4
|
-
|
|
5
|
-
declare const ResponsiveTable: React__default.MemoExoticComponent<React__default.ForwardRefExoticComponent<BoxProps & React__default.RefAttributes<HTMLDivElement>>>;
|
|
6
|
-
|
|
7
|
-
export { ResponsiveTable };
|
|
8
|
-
//# sourceMappingURL=ResponsiveTable.d.ts.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"ResponsiveTable.d.ts","sources":[],"sourcesContent":[],"names":[],"mappings":""}
|
package/dist/ResponsiveTable.js
DELETED
|
@@ -1,29 +0,0 @@
|
|
|
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
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"ResponsiveTable.js","sources":["../src/ResponsiveTable.tsx"],"sourcesContent":["import React from 'react';\nimport { Box, BoxProps, useBreakpointIndex } from '@apia/theme';\nimport { getVariant } from '@apia/theme';\nimport { KeyHandler } from './KeyHandler';\nimport { TableRenderer } from './renderers/TableRenderer';\nimport { AccordionRenderer } from './renderers/AccordionRenderer';\nimport { TUseDomProps } from './store/selection/types';\nimport { responsiveTableStore } from './store';\nimport { useResponsiveTableContext } from './ResponsiveTableContext';\n\ntype TResponsiveTable = BoxProps;\n\n/**\n * Este objeto determina qué partes de la tabla deben\n * ser 'debugueadas'. Sobre todo para conocer el\n * impacto en el performance de la misma.\n */\nexport const rtDebug = {\n cell: false,\n context: false,\n filterCell: false,\n filters: {\n additional: false,\n grouped: false,\n inner: false,\n responsive: false,\n sort: false,\n },\n header: false,\n headerCell: false,\n index: false,\n keyHandler: false,\n row: false,\n tableRenderer: false,\n};\n\nexport const domPropsSelector: (name: string) => TUseDomProps =\n (name: string) =>\n (global: ReturnType<typeof responsiveTableStore.getState>) =>\n global.responsiveTableSlice[name];\n\n/**\n * El ResponsiveTable renderiza una tabla en base a la\n * información provista por ResponsiveTableContext, quien\n * debe ser ancestro de este elemento. La finalidad última\n * de este componente es lograr responsividad y performance.\n *\n * Las props pasadas sarán colocadas directamente en el\n * wrapper de la tabla. Con esta estructura se busca que\n * a la hora de dar estilos a este componente, se pueda pasar\n * un variant al Wrapper, sin afectar los estilos por defecto\n * de la tabla ni del acordión en modo responsivo. Esto no limita\n * en ningún concepto la posibilidad de cambiar el variant a\n * la tabla o al acordión, ya que eso puede hacerse desde un\n * variante personalizado con la estructura mostrada en el\n * ejemplo.\n *\n * Además, de esta manera es posible aplicar estilo a algunos\n * componentes nada más, sin la necesidad de cambiar el layout\n * que usa la tabla por defecto. Por ejemplo, con esta estructura\n * se puede utilizar un variant personalizado para definir\n * el ancho de las columnas de la tabla.\n *\n * @example\n * 'customVariant': {\n * '.responsiveTable__accordion': {\n * variant: 'layout.tables.otherAccordion'\n * }\n * '.responsiveTable__table': {\n * variant: 'layout.tables.otherTable'\n * }\n * }\n */\nconst NoMemoResponsiveTable = React.forwardRef<\n HTMLDivElement,\n TResponsiveTable\n>(({ className, ...props }, ref) => {\n const breakpoint = useBreakpointIndex({ defaultIndex: 3 });\n const { currentBreakPoint } = useResponsiveTableContext();\n\n const actualBreakpoint = currentBreakPoint ?? breakpoint;\n\n return (\n <Box\n {...props}\n {...getVariant('layout.common.tables.responsive')}\n className={`responsiveTable__wrapper ${className ?? ''}`}\n ref={ref}\n >\n {actualBreakpoint >= 3 ? (\n <KeyHandler>\n <TableRenderer />\n </KeyHandler>\n ) : (\n <AccordionRenderer />\n )}\n </Box>\n );\n});\n\nNoMemoResponsiveTable.displayName = 'ResponsiveTable';\n\nexport const ResponsiveTable = React.memo(NoMemoResponsiveTable);\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;;;;"}
|
|
@@ -1,8 +0,0 @@
|
|
|
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
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"ResponsiveTableContext.d.ts","sources":[],"sourcesContent":[],"names":[],"mappings":""}
|
|
@@ -1,140 +0,0 @@
|
|
|
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
|
-
});
|
|
127
|
-
return /* @__PURE__ */ jsx(ResponsiveTableReactContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsx(
|
|
128
|
-
Box,
|
|
129
|
-
{
|
|
130
|
-
id: name,
|
|
131
|
-
className: `responsiveTableContext__wrapper ${className ?? ""}`,
|
|
132
|
-
...variant ? getVariant(variant) : null,
|
|
133
|
-
children
|
|
134
|
-
}
|
|
135
|
-
) });
|
|
136
|
-
};
|
|
137
|
-
const ResponsiveTableContext = React.memo(NoMemoResponsiveTableContext);
|
|
138
|
-
|
|
139
|
-
export { ResponsiveTableContext, ResponsiveTableReactContext, useResponsiveTableContext };
|
|
140
|
-
//# sourceMappingURL=ResponsiveTableContext.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"ResponsiveTableContext.js","sources":["../src/ResponsiveTableContext.tsx"],"sourcesContent":["import { useMount, useUnmount, useUpdateEffect } from 'ahooks';\nimport uniqueId from 'lodash-es/uniqueId';\nimport React from 'react';\nimport { Box } from '@apia/theme';\nimport {\n defaultLabels,\n TResponsiveTableContext,\n TResponsiveTableContextProps,\n} from './types';\nimport { responsiveTableActions, responsiveTableStore } from './store';\nimport { ResponsiveTable } from './ResponsiveTable';\nimport { getVariant } from '@apia/theme';\n\nexport const ResponsiveTableReactContext =\n React.createContext<TResponsiveTableContext>({} as TResponsiveTableContext);\n\nexport function useResponsiveTableContext() {\n const context = React.useContext(ResponsiveTableReactContext);\n if (!context) throw new Error('There is no ResponsiveTableContext');\n return context;\n}\n\n/**\n * Este contexto busca facilitar la tarea de centralizar las\n * propiedades y callbacks asociados a la tabla, de forma de\n * evitar la necesidad de distribuir comportamientos.\n *\n * **MUY IMPORTANTE**\n * Asegurarse de memoizar las propiedades rows, filters y\n * columns, ya que en caso contrario eso va a disparar\n * actualizaciones en el responsiveTableStore cada vez que el padre del\n * contexto renderice.\n *\n */\nconst NoMemoResponsiveTableContext = ({\n allowEdition,\n allowRowsKeyboardSorting,\n allowSelection,\n allowSorting,\n avoidReparseSelectionOnRowChange,\n children = <ResponsiveTable />,\n className,\n currentBreakPoint,\n customLabels,\n columns,\n filters,\n rows,\n label,\n isMultiple,\n name,\n onChangeSelection,\n onFilterBlur,\n onFilterChange,\n onFilterPressEnter,\n onSelectRows,\n onSortChange,\n reserveColumnsForStates,\n variant,\n}: TResponsiveTableContextProps) => {\n const actualName = React.useMemo(\n () => name ?? uniqueId('responsiveTable'),\n [name],\n );\n const labels = React.useMemo(\n () => ({ ...defaultLabels, ...customLabels }),\n [customLabels],\n );\n const contextValue = React.useMemo<TResponsiveTableContext>(\n () => ({\n currentBreakPoint,\n label,\n labels,\n name: actualName,\n onChangeSelection,\n onFilterBlur,\n onFilterChange,\n onFilterPressEnter,\n onSelectRows,\n onSortChange,\n }),\n [\n actualName,\n currentBreakPoint,\n label,\n labels,\n onChangeSelection,\n onFilterBlur,\n onFilterChange,\n onFilterPressEnter,\n onSelectRows,\n onSortChange,\n ],\n );\n\n useMount(() => {\n responsiveTableStore.dispatch(\n responsiveTableActions.update({\n allowEdition,\n allowRowsKeyboardSorting,\n allowSelection,\n allowSorting,\n columns,\n filters: filters ?? [],\n rows,\n isMultiple,\n tableName: actualName,\n reserveColumnsForStates,\n }),\n );\n });\n\n useUpdateEffect(() => {\n responsiveTableStore.dispatch(\n responsiveTableActions.update({\n tableName: actualName,\n columns,\n }),\n );\n }, [columns]);\n\n useUpdateEffect(() => {\n responsiveTableStore.dispatch(\n responsiveTableActions.update({\n tableName: actualName,\n rows,\n }),\n );\n if (avoidReparseSelectionOnRowChange !== true) {\n const selected = rows\n .map((current, i) => ({ ...current, i }))\n .filter((current) => current.initiallySelected);\n responsiveTableStore.dispatch(\n responsiveTableActions.update({\n tableName: actualName,\n selectedRows: selected.map((current) => current.i),\n }),\n );\n }\n }, [rows]);\n\n useUpdateEffect(() => {\n responsiveTableStore.dispatch(\n responsiveTableActions.update({\n tableName: actualName,\n filters,\n }),\n );\n }, [filters]);\n\n useUnmount(() => {\n /* responsiveTableStore.dispatch(\n responsiveTableActions.destroy({ tableName: actualName }),\n ); */\n });\n\n return (\n <ResponsiveTableReactContext.Provider value={contextValue}>\n <Box\n id={name}\n className={`responsiveTableContext__wrapper ${className ?? ''}`}\n {...(variant ? getVariant(variant) : null)}\n >\n {children}\n </Box>\n </ResponsiveTableReactContext.Provider>\n );\n};\n\nexport const ResponsiveTableContext = React.memo(NoMemoResponsiveTableContext);\n"],"names":[],"mappings":"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"}
|
package/dist/Row.js
DELETED
|
@@ -1,230 +0,0 @@
|
|
|
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
|
package/dist/Row.js.map
DELETED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"Row.js","sources":["../src/Row.tsx"],"sourcesContent":["import uniqueId from 'lodash-es/uniqueId';\nimport React from 'react';\nimport { shallowEqual } from 'react-redux';\nimport { MdKeyboardArrowRight, MdKeyboardArrowDown } from '@meronex/icons/md/';\nimport { Box } from '@apia/theme';\nimport { IconButton } from '@apia/components';\nimport { getVariant } from '@apia/theme';\nimport { domPropsSelector } from './ResponsiveTable';\nimport { TResponsiveTableCell, TResponsiveTableColumn } from './types';\nimport { AdditionalColumnDefaultRenderer } from './renderers/AdditionalColumnDefaultRenderer';\nimport { SeparatorCell } from './SeparatorCell';\nimport { DefaultRowRenderer } from './renderers/DefaultRowRenderer';\nimport { useResponsiveTableContext } from './ResponsiveTableContext';\nimport {\n responsiveTableActions,\n responsiveTableStore,\n useResponsiveTable,\n} from './store';\nimport { useDomProps } from './store/selection/useDomProps';\nimport { StateCell } from './StateCell';\nimport { Cell } from './Cell';\nimport { getLabel } from '@apia/util';\n\ninterface IRow {\n rowIndex: number;\n}\n\ntype TAdditionalCell = {\n cell: TResponsiveTableCell;\n column: TResponsiveTableColumn;\n columnIndex: number;\n};\n\nconst NoMemoRow = ({ rowIndex }: IRow) => {\n const { name } = useResponsiveTableContext();\n\n const { columns, hasNonAdditionalFilters } = useResponsiveTable((global) => {\n const tableState = global.responsiveTableSlice[name];\n return {\n columns: tableState?.columns ?? [],\n hasNonAdditionalFilters: tableState?.hasNonAdditionalFilters,\n };\n }, shallowEqual);\n const row = useResponsiveTable(\n (global) => global.responsiveTableSlice[name].rows[rowIndex],\n shallowEqual,\n );\n const additionalCells: TAdditionalCell[] = useResponsiveTable(\n (global) => {\n const tableState = global.responsiveTableSlice[name];\n return tableState.columns\n .map((current, index) =>\n current.showAsAdditional\n ? {\n index,\n column: current,\n }\n : null,\n )\n .filter(\n (\n current,\n ): current is {\n index: number;\n column: TResponsiveTableColumn;\n } => !!current,\n )\n .map((current) => {\n return {\n cell: tableState.rows[rowIndex]?.cells[current.index],\n column: current.column,\n columnIndex: current.index,\n };\n });\n },\n (currentValue, newValue) => {\n return currentValue.reduce<boolean>(\n (accumulatedBoolean, currentCell, cellIndex) => {\n return (\n accumulatedBoolean && shallowEqual(currentCell, newValue[cellIndex])\n );\n },\n true,\n );\n },\n );\n const { isDragging, isExpanded, shouldForbidSelection } = useResponsiveTable(\n (global) => {\n const tableState = global.responsiveTableSlice[name];\n return {\n isExpanded: tableState.expandedRows.includes(rowIndex),\n isDragging: tableState.draggingRow === rowIndex,\n shouldForbidSelection: tableState.rows[rowIndex]?.forbidSelection,\n };\n },\n shallowEqual,\n );\n\n const domProps = useDomProps(\n 'tr',\n {\n isThisRowExpanded: isExpanded,\n rowIndex,\n },\n domPropsSelector(name),\n );\n\n const expandedRowDomProps = useDomProps(\n 'tr',\n {\n isTheExpandedRow: true,\n rowIndex,\n },\n domPropsSelector(name),\n );\n\n const handleExpandedState = React.useCallback(\n (ev: boolean | React.MouseEvent) => {\n const willBeExpanded = typeof ev === 'boolean' ? ev : !isExpanded;\n if (!willBeExpanded)\n responsiveTableStore.dispatch(\n responsiveTableActions.update({\n tableName: name,\n expandedRows: responsiveTableStore\n .getState()\n .responsiveTableSlice[\n name\n ].expandedRows.filter((current) => current !== rowIndex),\n }),\n );\n else\n responsiveTableStore.dispatch(\n responsiveTableActions.update({\n tableName: name,\n expandedRows: [\n ...responsiveTableStore.getState().responsiveTableSlice[name]\n .expandedRows,\n rowIndex,\n ],\n }),\n );\n },\n [isExpanded, name, rowIndex],\n );\n\n const statesCount = useResponsiveTable((globalState) => {\n const state = globalState.responsiveTableSlice[name];\n return state?.statesColumns ?? 0;\n }, shallowEqual);\n\n const states = React.useMemo(\n () => (row.states ?? []).map((current) => ({ ...current, id: uniqueId() })),\n [row.states],\n );\n\n const { ref, ...additionalCellDomProps } = useDomProps(\n 'additionalTd',\n { rowIndex },\n domPropsSelector(name),\n );\n\n const Renderer = React.useMemo(\n () => row.renderer ?? DefaultRowRenderer,\n [row.renderer],\n );\n\n return (\n <>\n <Renderer\n {...domProps}\n row={row}\n rowIndex={rowIndex}\n className={`responsiveTable__row ${row.isHidden ? 'hidden' : ''} ${\n domProps['aria-selected'] ? 'selected' : ''\n } ${shouldForbidSelection ? 'non-selectable' : ''} ${states\n .map((current) => current.className)\n .join(' ')} ${row.className ?? ''} ${\n row.separator ? 'row__separator' : ''\n } ${isDragging ? 'draggingRow' : ''}`}\n onKeyDown={React.useCallback(\n (ev: React.KeyboardEvent) => {\n if (ev.key.toLowerCase() === 'arrowleft' && ev.ctrlKey) {\n ev.preventDefault();\n ev.stopPropagation();\n handleExpandedState(false);\n }\n if (ev.key.toLowerCase() === 'arrowright' && ev.ctrlKey) {\n ev.preventDefault();\n ev.stopPropagation();\n handleExpandedState(true);\n }\n },\n [handleExpandedState],\n )}\n >\n {row.separator ? (\n <SeparatorCell\n colSpan={\n (additionalCells.length > 0 || hasNonAdditionalFilters ? 1 : 0) +\n statesCount +\n columns.filter((current) => !current.showAsAdditional).length\n }\n rowIndex={rowIndex}\n />\n ) : (\n <>\n {(additionalCells.length > 0 || hasNonAdditionalFilters) && (\n <td className=\"additionalInfo__cell\" {...additionalCellDomProps}>\n {additionalCells.length > 0 && (\n <IconButton\n size={'Lg'}\n {...getVariant('icon-outline')}\n icon={\n isExpanded ? MdKeyboardArrowDown : MdKeyboardArrowRight\n }\n aria-label={\n isExpanded\n ? getLabel('lblCollapseRow').text\n : getLabel('lblExpandRow').text\n }\n className=\"moreInformationButton\"\n onClick={handleExpandedState}\n />\n )}\n </td>\n )}\n {Array(statesCount)\n .fill('')\n .map((_, i) => {\n return (\n <StateCell\n key={states[i]?.id ?? i}\n index={i}\n state={states[i]}\n rowIndex={rowIndex}\n />\n );\n })}\n {columns\n .map((current, actualColumnIndex) => ({\n ...current,\n actualColumnIndex,\n }))\n .filter((current) => !current.showAsAdditional)\n .map((current, inTableColumnIndex) => {\n if (current.hidden) return null;\n return (\n <Cell\n key={current.name}\n columnIndex={current.actualColumnIndex}\n rowIndex={rowIndex}\n inTableColumnIndex={inTableColumnIndex}\n />\n );\n })}\n </>\n )}\n </Renderer>\n {isExpanded && (\n <tr className=\"expandedRow\" {...expandedRowDomProps}>\n <td\n colSpan={\n columns.length - additionalCells.length + states.length + 1\n }\n >\n <Box className=\"responsiveTable__additionalInfoContainer\">\n {additionalCells.map((current) => {\n const { Renderer: ColumnRenderer } = current.column;\n if (ColumnRenderer)\n return (\n <ColumnRenderer\n key={current.column.name}\n cell={current.cell}\n column={current.column}\n row={row}\n />\n );\n return (\n <AdditionalColumnDefaultRenderer\n key={current.column.name}\n cell={current.cell}\n column={current.column}\n row={row}\n />\n );\n })}\n </Box>\n </td>\n </tr>\n )}\n </>\n );\n};\n\nexport const Row = React.memo(NoMemoRow);\n"],"names":[],"mappings":"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"}
|
package/dist/SeparatorCell.js
DELETED
|
@@ -1,20 +0,0 @@
|
|
|
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
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"SeparatorCell.js","sources":["../src/SeparatorCell.tsx"],"sourcesContent":["import { domPropsSelector } from './ResponsiveTable';\nimport { useResponsiveTableContext } from './ResponsiveTableContext';\nimport { useDomProps } from './store/selection/useDomProps';\n\nexport const SeparatorCell = ({\n colSpan,\n rowIndex,\n}: {\n colSpan: number;\n rowIndex: number;\n}) => {\n const { name } = useResponsiveTableContext();\n const domProps = useDomProps(\n 'separator',\n { rowIndex },\n domPropsSelector(name),\n );\n return (\n <td className=\"row__separator__cell\" colSpan={colSpan} {...domProps} />\n );\n};\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;;;;"}
|
package/dist/StateCell.js
DELETED
|
@@ -1,19 +0,0 @@
|
|
|
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
|
package/dist/StateCell.js.map
DELETED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"StateCell.js","sources":["../src/StateCell.tsx"],"sourcesContent":["import { domPropsSelector } from './ResponsiveTable';\nimport { RowStatesRenderer } from './renderers/RowStatesRenderer';\nimport { useResponsiveTableContext } from './ResponsiveTableContext';\nimport { useDomProps } from './store/selection/useDomProps';\nimport { TResponsiveTableRowState } from './types';\nimport { Box } from '@apia/theme';\n\ninterface IStateCell {\n index: number;\n isHeader?: boolean;\n rowIndex: number;\n state?: TResponsiveTableRowState;\n}\n\nexport const StateCell = ({ index, rowIndex, state, isHeader }: IStateCell) => {\n const { name } = useResponsiveTableContext();\n const domProps = useDomProps(\n isHeader ? 'headerStateCell' : 'stateCell',\n { columnIndex: index, rowIndex },\n domPropsSelector(name),\n );\n return (\n <Box as=\"td\" className=\"stateCell\" {...domProps}>\n {state ? <RowStatesRenderer state={state} /> : ''}\n </Box>\n );\n};\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;;;;"}
|
|
@@ -1,61 +0,0 @@
|
|
|
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
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"RangeFilter.js","sources":["../../src/filters/RangeFilter.tsx"],"sourcesContent":["import { Box } from '@apia/theme';\nimport { TApiaFilter } from '@apia/util';\nimport { ApiaFilter } from '@apia/components';\nimport { useResponsiveTableContext } from '../ResponsiveTableContext';\n\nconst NoMemoRangeFilter = ({ filter }: { filter: TApiaFilter }) => {\n const { onFilterBlur, onFilterChange, onFilterPressEnter } =\n useResponsiveTableContext();\n const filterLow: TApiaFilter = {\n id: filter.id,\n currentValue: filter.currentValue,\n type: 'number',\n };\n const filterHigh: TApiaFilter = {\n id: filter.filterToId ?? '',\n currentValue: filter.filterToValue ?? '',\n type: 'number',\n };\n return (\n <Box className=\"ApiaFilter__Range\">\n <Box className=\"ApiaFilter__Range__Low\">\n <ApiaFilter\n filter={filterLow}\n onChange={(currentValue) => {\n if (onFilterChange)\n void onFilterChange({ ...filterLow, currentValue });\n }}\n onBlur={(currentValue) => {\n if (onFilterBlur) void onFilterBlur({ ...filterLow, currentValue });\n }}\n onPressEnter={(currentValue) => {\n if (onFilterPressEnter)\n void onFilterPressEnter({ ...filterLow, currentValue });\n }}\n />\n </Box>\n {' - '}\n <Box className=\"ApiaFilter__Range__High\">\n <ApiaFilter\n filter={filterHigh}\n onChange={(currentValue) => {\n if (onFilterChange)\n void onFilterChange({ ...filterHigh, currentValue });\n }}\n onBlur={(currentValue) => {\n if (onFilterBlur)\n void onFilterBlur({ ...filterHigh, currentValue });\n }}\n onPressEnter={(currentValue) => {\n if (onFilterPressEnter)\n void onFilterPressEnter({ ...filterHigh, currentValue });\n }}\n />\n </Box>\n </Box>\n );\n};\n\nexport const RangeFilter = NoMemoRangeFilter;\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;;;;"}
|