@rolster/react-components 18.12.7 → 18.12.8

package/dist/es/index.js

@@ -1112,6 +1112,17 @@ const reactI18n = i18n({
     }
 });
 
+function useDatatable() {
+    const [scrolleable, setScrolleable] = useState(false);
+    const bodyRef = useRef(null);
+    useEffect(() => {
+        const scrollHeight = bodyRef?.current?.scrollHeight || 0;
+        const clientHeight = bodyRef?.current?.clientHeight || 0;
+        setScrolleable(scrollHeight > clientHeight);
+    }, [bodyRef]);
+    return { bodyRef, scrolleable };
+}
+
 class ListCollection {
     constructor(value) {
         this.value = value;
@@ -1526,19 +1537,18 @@ function RlsDatatableHeader({ children }) {
     return jsx("tr", { className: "rls-datatable__header", children: children });
 }
 function RlsDatatableTitle({ children, className, control }) {
-    return (jsx("th", { className: (renderClassStatus('rls-datatable__title', { control }) +
-            ` ${className || ''}`).trim(), children: children }));
+    return (jsx("th", { className: renderClassStatus('rls-datatable__title', { control }, className).trim(), children: children }));
 }
 function RlsDatatableData({ children, className, error }) {
-    return (jsx("tr", { className: (renderClassStatus('rls-datatable__data', { error }) +
-            ` ${className || ''}`).trim(), children: children }));
+    return (jsx("tr", { className: renderClassStatus('rls-datatable__data', { error }, className).trim(), children: children }));
 }
 function RlsDatatableCell({ children, className, control, overflow }) {
-    return (jsx("th", { className: (renderClassStatus('rls-datatable__cell', { control, overflow }) +
-            ` ${className || ''}`).trim(), children: children }));
+    return (jsx("th", { className: renderClassStatus('rls-datatable__cell', { control, overflow }, className).trim(), children: children }));
 }
-function RlsDatatable({ bodyRef, children, footer, header, rlsTheme }) {
-    return (jsxs("div", { className: "rls-datatable", "rls-theme": rlsTheme, children: [jsxs("table", { children: [header && jsx("thead", { className: "rls-datatable__thead", children: header }), jsx("tbody", { ref: bodyRef, className: "rls-datatable__tbody", children: children })] }), footer && jsx("div", { className: "rls-datatable__tfooter", children: footer })] }));
+function RlsDatatable({ children, datatable, footer, header, rlsTheme }) {
+    return (jsxs("div", { className: renderClassStatus('rls-datatable', {
+            scrolleable: datatable?.scrolleable
+        }), "rls-theme": rlsTheme, children: [jsxs("table", { children: [header && jsx("thead", { className: "rls-datatable__thead", children: header }), jsx("tbody", { ref: datatable?.bodyRef, className: "rls-datatable__tbody", children: children })] }), footer && jsx("div", { className: "rls-datatable__tfooter", children: footer })] }));
 }
 
 const controlIsValid = (props) => {
@@ -2086,5 +2096,5 @@ function RlsApplication({ children }) {
     return (jsxs(RlsContext.Provider, { value: { confirmation, snackbar }, children: [jsx("div", { className: "rls-app__body", children: children }), RlsSnackbar, RlsConfirmation] }));
 }
 
-export { ConfirmationResult, ListCollection, RlsAmount, RlsApplication, RlsAutocompleteField, RlsAutocompleteFieldTemplate, RlsAvatar, RlsBadge, RlsBallot, RlsBreadcrumb, RlsButton, RlsButtonAction, RlsButtonToggle, RlsCard, RlsCheckBox, RlsCheckBoxControl, RlsCheckBoxLabel, RlsConfirmation, RlsContext, RlsDatatable, RlsDatatableCell, RlsDatatableData, RlsDatatableHeader, RlsDatatableTitle, RlsDateField, RlsDatePicker, RlsDateRangeField, RlsDateRangePicker, RlsDayPicker, RlsDayRangePicker, RlsFormNavigation, RlsIcon, RlsInput, RlsInputMoney, RlsInputNumber, RlsInputPassword, RlsInputText, RlsLabel, RlsMessageIcon, RlsModal, RlsMoneyField, RlsMonthPicker, RlsMonthTitlePicker, RlsNumberField, RlsPagination, RlsPasswordField, RlsPoster, RlsProgressBar, RlsRadioButton, RlsRadioButtonLabel, RlsSearchInput, RlsSelectField, RlsSelectFieldTemplate, RlsSkeleton, RlsSkeletonText, RlsSnackbar, RlsSwitch, RlsSwitchControl, RlsSwitchLabel, RlsTabularText, RlsTextField, RlsToolbar, RlsYearPicker, renderClassStatus, useConfirmationService, useListControl, useSnackbarService };
+export { ConfirmationResult, ListCollection, RlsAmount, RlsApplication, RlsAutocompleteField, RlsAutocompleteFieldTemplate, RlsAvatar, RlsBadge, RlsBallot, RlsBreadcrumb, RlsButton, RlsButtonAction, RlsButtonToggle, RlsCard, RlsCheckBox, RlsCheckBoxControl, RlsCheckBoxLabel, RlsConfirmation, RlsContext, RlsDatatable, RlsDatatableCell, RlsDatatableData, RlsDatatableHeader, RlsDatatableTitle, RlsDateField, RlsDatePicker, RlsDateRangeField, RlsDateRangePicker, RlsDayPicker, RlsDayRangePicker, RlsFormNavigation, RlsIcon, RlsInput, RlsInputMoney, RlsInputNumber, RlsInputPassword, RlsInputText, RlsLabel, RlsMessageIcon, RlsModal, RlsMoneyField, RlsMonthPicker, RlsMonthTitlePicker, RlsNumberField, RlsPagination, RlsPasswordField, RlsPoster, RlsProgressBar, RlsRadioButton, RlsRadioButtonLabel, RlsSearchInput, RlsSelectField, RlsSelectFieldTemplate, RlsSkeleton, RlsSkeletonText, RlsSnackbar, RlsSwitch, RlsSwitchControl, RlsSwitchLabel, RlsTabularText, RlsTextField, RlsToolbar, RlsYearPicker, renderClassStatus, useConfirmationService, useDatatable, useListControl, useSnackbarService };
 //# sourceMappingURL=index.js.map