@tsed/react-formio 2.2.3 → 2.3.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/components/table/components/defaultCell.component.d.ts +1 -0
- package/dist/components/table/filters/selectColumnFilter.component.d.ts +9 -1
- package/dist/components/table/hooks/useCustomTable.hook.d.ts +15 -1
- package/dist/components/table/hooks/useDragnDropRow.hook.d.ts +1 -0
- package/dist/components/table/table.stories.d.ts +2 -2
- package/dist/components/table/utils/mapFormToColumns.d.ts +2 -2
- package/dist/index.js +49 -24
- package/dist/index.js.map +1 -1
- package/dist/index.modern.js +48 -20
- package/dist/index.modern.js.map +1 -1
- package/package.json +3 -3
- package/src/components/table/components/defaultCells.component.tsx +12 -3
- package/src/components/table/filters/selectColumnFilter.component.spec.tsx +21 -0
- package/src/components/table/filters/selectColumnFilter.component.tsx +38 -12
- package/src/components/table/hooks/useCustomTable.hook.tsx +31 -1
- package/src/components/table/table.component.tsx +1 -0
- package/src/components/table/utils/mapFormToColumns.tsx +5 -4
package/dist/index.modern.js
CHANGED
|
@@ -450,7 +450,10 @@ function DefaultCells({
|
|
|
450
450
|
}
|
|
451
451
|
return /*#__PURE__*/React.createElement("td", _extends({
|
|
452
452
|
colSpan: colspan
|
|
453
|
-
}, cell.getCellProps(
|
|
453
|
+
}, cell.getCellProps({
|
|
454
|
+
className: cell.column.className,
|
|
455
|
+
style: cell.column.style
|
|
456
|
+
}), {
|
|
454
457
|
key: `tableInstance.page.cells.${cell.value || "value"}.${i}`
|
|
455
458
|
}), cell.render("Cell"));
|
|
456
459
|
}));
|
|
@@ -2290,34 +2293,58 @@ function FormSettings(props) {
|
|
|
2290
2293
|
}, i18n("Save settings")));
|
|
2291
2294
|
}
|
|
2292
2295
|
|
|
2293
|
-
function
|
|
2294
|
-
|
|
2295
|
-
|
|
2296
|
+
function useSelectColumnFilter(props) {
|
|
2297
|
+
const {
|
|
2298
|
+
column
|
|
2299
|
+
} = props;
|
|
2296
2300
|
const {
|
|
2297
2301
|
id,
|
|
2298
|
-
preFilteredRows
|
|
2299
|
-
filterValue,
|
|
2300
|
-
setFilter
|
|
2302
|
+
preFilteredRows
|
|
2301
2303
|
} = column;
|
|
2302
2304
|
const {
|
|
2303
2305
|
choices: customChoices
|
|
2304
2306
|
} = column;
|
|
2305
|
-
const
|
|
2306
|
-
|
|
2307
|
-
|
|
2308
|
-
}
|
|
2309
|
-
|
|
2310
|
-
|
|
2311
|
-
|
|
2312
|
-
|
|
2307
|
+
const {
|
|
2308
|
+
filterValue,
|
|
2309
|
+
setFilter
|
|
2310
|
+
} = column;
|
|
2311
|
+
const choices = (() => {
|
|
2312
|
+
if (customChoices) {
|
|
2313
|
+
if (typeof customChoices === "function") {
|
|
2314
|
+
return customChoices(props);
|
|
2315
|
+
}
|
|
2316
|
+
return customChoices;
|
|
2317
|
+
}
|
|
2318
|
+
return [...new Set(preFilteredRows.map(row => row.values[id]))].filter(value => value).map(value => ({
|
|
2319
|
+
label: value,
|
|
2320
|
+
value
|
|
2321
|
+
}));
|
|
2322
|
+
})();
|
|
2323
|
+
const onChange = (_, value) => {
|
|
2324
|
+
setFilter(value || undefined);
|
|
2325
|
+
};
|
|
2326
|
+
return {
|
|
2313
2327
|
value: filterValue,
|
|
2328
|
+
onChange,
|
|
2314
2329
|
choices: [{
|
|
2315
2330
|
value: "",
|
|
2316
2331
|
label: "All"
|
|
2317
|
-
}].concat(choices)
|
|
2318
|
-
|
|
2319
|
-
|
|
2320
|
-
|
|
2332
|
+
}].concat(choices)
|
|
2333
|
+
};
|
|
2334
|
+
}
|
|
2335
|
+
function SelectColumnFilter(props) {
|
|
2336
|
+
const {
|
|
2337
|
+
value,
|
|
2338
|
+
choices,
|
|
2339
|
+
onChange
|
|
2340
|
+
} = useSelectColumnFilter(props);
|
|
2341
|
+
return /*#__PURE__*/React.createElement(Select, {
|
|
2342
|
+
key: `filter-${props.column.id}`,
|
|
2343
|
+
name: `filter-${props.column.id}`,
|
|
2344
|
+
size: "sm",
|
|
2345
|
+
value: value,
|
|
2346
|
+
choices: choices,
|
|
2347
|
+
onChange: onChange
|
|
2321
2348
|
});
|
|
2322
2349
|
}
|
|
2323
2350
|
|
|
@@ -7279,6 +7306,7 @@ function mapFormToColumns(form) {
|
|
|
7279
7306
|
const column = {
|
|
7280
7307
|
Header: component.label || component.title || component.key,
|
|
7281
7308
|
accessor: `data.${component.key}`,
|
|
7309
|
+
className: "text-center",
|
|
7282
7310
|
Cell: props => /*#__PURE__*/React.createElement(DefaultCell, _extends({}, props, {
|
|
7283
7311
|
render: value => cmp.asString(value)
|
|
7284
7312
|
}))
|
|
@@ -7421,5 +7449,5 @@ function mapPagination({
|
|
|
7421
7449
|
};
|
|
7422
7450
|
}
|
|
7423
7451
|
|
|
7424
|
-
export { ActionsTable, Alert, ButtonTab, Card, DefaultArrowSort, DefaultCell, DefaultCellHeader, DefaultCellOperations, DefaultColumnFilter, DefaultOperationButton, Form, FormAccess, FormAction, FormBuilder, FormControl, FormEdit, FormEditCTAs, FormParameters, FormSettings, FormsTable, InputTags, InputText, LEFT_PAGE, Loader, Modal, Pagination, RIGHT_PAGE, ReactComponent, RemoveModal, Select, SelectColumnFilter, SliderColumnFilter, SubmissionsTable, Table, Tabs, callLast, defaultDisplayChoices, getOperationCallback, getPageNumbers, iconClass, mapFormToColumns, mapPagination, stopPropagationWrapper, swapElements, useCustomTable, useForm, useFormEdit, useModal, useOperations, useTooltip };
|
|
7452
|
+
export { ActionsTable, Alert, ButtonTab, Card, DefaultArrowSort, DefaultCell, DefaultCellHeader, DefaultCellOperations, DefaultColumnFilter, DefaultOperationButton, Form, FormAccess, FormAction, FormBuilder, FormControl, FormEdit, FormEditCTAs, FormParameters, FormSettings, FormsTable, InputTags, InputText, LEFT_PAGE, Loader, Modal, Pagination, RIGHT_PAGE, ReactComponent, RemoveModal, Select, SelectColumnFilter, SliderColumnFilter, SubmissionsTable, Table, Tabs, callLast, defaultDisplayChoices, getOperationCallback, getPageNumbers, iconClass, mapFormToColumns, mapPagination, stopPropagationWrapper, swapElements, useCustomTable, useForm, useFormEdit, useModal, useOperations, useSelectColumnFilter, useTooltip };
|
|
7425
7453
|
//# sourceMappingURL=index.modern.js.map
|