react-admin-base-bootstrap 0.7.8 → 0.8.1

package/lib/esm/Components/ApiSelect.d.ts

@@ -1,3 +1,21 @@
 /** @jsx jsx */
 import { jsx } from '@emotion/react';
-export default function ApiSelect(props: any): jsx.JSX.Element;
+import React from 'react';
+export interface ApiSelectProps<Option = any> {
+    url?: string;
+    value: Option | Option[];
+    onChange: (a: Option | Option[] | null) => void;
+    getOptionLabel?: (a: any) => string;
+    getOptionValue?: (a: any) => string;
+    onCreateOption?: (a: string) => Option | Promise<Option>;
+    filter?: (a: Option) => boolean;
+    group?: (a: Option[]) => any[];
+    isMulti?: boolean;
+    idKey?: string;
+    nameKey?: string;
+    disabled?: boolean;
+    placeholder?: string;
+    staticOptions?: any[];
+    getNewOptionData?: (name: string, elem: React.ReactNode) => any | null;
+}
+export default function ApiSelect<Option = any>(props: ApiSelectProps<Option>): jsx.JSX.Element;

package/lib/esm/Components/ApiSelect.js

@@ -55,6 +55,8 @@ export default function ApiSelect(props) {
     }
     const handleCreateOption = useCallback(function (input) {
         return __awaiter(this, void 0, void 0, function* () {
+            if (!onCreateOption)
+                return null;
             setCreating(true);
             try {
                 let option = yield onCreateOption(input);
@@ -78,5 +80,5 @@ export default function ApiSelect(props) {
         setIsMenuOpen(false);
     }, [setIsMenuOpen]);
     const Component = onCreateOption ? CreatableSelect : Select;
-    return jsx(Component, Object.assign({}, props, { className: 'react-select-container', classNamePrefix: "react-select", onCreateOption: (onCreateOption && handleCreateOption) || null, getNewOptionData: onCreateOption ? getNewOptionData ? getNewOptionData : (inputValue) => ({ [nameKey || 'name']: inputValue, __isNew__: true }) : null, inputValue: search, onInputChange: a => setSearch(a), components: Components, isLoading: !!loading || creating, getOptionLabel: getOptionLabel || ((row) => row[nameKey || 'name']), getOptionValue: getOptionValue || ((row) => row[idKey || 'id']), isDisabled: !!disabled || creating, isClearable: true, isSearchable: true, placeholder: placeholder || intl.formatMessage({ id: 'SELECT' }), options: !options ? [] : ((filter && options.filter(filter)) || options), isMenuOpen: isMenuOpen, onMenuOpen: onMenuOpen, onMenuClose: onMenuClose }));
+    return jsx(Component, Object.assign({}, props, { className: 'react-select-container', classNamePrefix: "react-select", onCreateOption: onCreateOption && handleCreateOption, getNewOptionData: (onCreateOption && (getNewOptionData || ((inputValue) => ({ [nameKey || 'name']: inputValue, __isNew__: true })))) || undefined, inputValue: search, onInputChange: a => setSearch(a), components: Components, isLoading: !!loading || creating, getOptionLabel: getOptionLabel || ((row) => row[nameKey || 'name']), getOptionValue: getOptionValue || ((row) => row[idKey || 'id']), isDisabled: !!disabled || creating, isClearable: true, isSearchable: true, placeholder: placeholder || intl.formatMessage({ id: 'SELECT' }), options: !options ? [] : ((filter && options.filter(filter)) || options), onMenuOpen: onMenuOpen, onMenuClose: onMenuClose }));
 }

package/lib/esm/Components/BootstrapDataTable.d.ts

@@ -1,11 +1,28 @@
+import React from 'react';
 export declare function useDataTableContext(): any;
-export declare function Actions({ edit, del, rowSpan, children }: {
-    edit: any;
-    del: any;
-    rowSpan?: any;
-    children?: any;
-}): JSX.Element;
+declare type ActionsProp = {
+    edit?: string;
+    del?: string;
+    rowSpan?: number | undefined;
+    children?: React.ReactNode;
+};
+export declare function Actions({ edit, del, rowSpan, children }: ActionsProp): JSX.Element;
 export declare function IdColumn(): JSX.Element;
 export declare function ActionsColumn(): JSX.Element;
 export declare function Column(props: any): JSX.Element;
-export default function BootstrapTable({ url, bordered, noStrip, defaultParams, add, children, innerRef, body }: any): JSX.Element;
+export interface BootstrapTableProps {
+    url: string;
+    bordered?: boolean;
+    noStrip?: boolean;
+    defaultParams?: any;
+    body?: any;
+    add?: string;
+    children: any;
+    innerRef?: any;
+}
+interface RowRendererProps<Row = any> {
+    render: (row: Row) => React.ReactNode;
+}
+export declare function RowRenderer<Row = any>({ render }: RowRendererProps<Row>): JSX.Element;
+export default function BootstrapTable({ url, bordered, noStrip, defaultParams, add, children, innerRef, body }: BootstrapTableProps): JSX.Element;
+export {};

package/lib/esm/Components/BootstrapDataTable.js

@@ -15,6 +15,8 @@ import { Alert, Button, Card, CardFooter, CardHeader, Col, Input, Row, Table } f
 import Swal from 'sweetalert2';
 import BootstrapPagination from "./BootstrapPagination";
 const DataTableContext = React.createContext(null);
+const RowDatasContext = React.createContext(null);
+const RowDataContext = React.createContext(null);
 export function useDataTableContext() {
     return useContext(DataTableContext);
 }
@@ -74,13 +76,18 @@ export function Column(props) {
             React.createElement("i", { className: "fa fa-sort-down" }) :
             React.createElement("i", { className: "fa fa-sort-up" }) : '');
 }
+export function RowRenderer({ render }) {
+    const rows = useContext(RowDatasContext);
+    return React.createElement("tbody", null, rows.map(render));
+}
 export default function BootstrapTable({ url, bordered, noStrip, defaultParams, add, children, innerRef, body }) {
-    var state = useState(Object.assign({ sort: 'id' }, defaultParams));
+    const state = useState(Object.assign({ sort: 'id' }, defaultParams));
     const [params, setParams] = state;
     const [page, lastPage, setPage, data, itemPerPage, setItemPerPage, update] = useDataTable(url, params, body);
     const intl = useIntl();
     const [api] = useAuth();
-    var ref = useRef(defaultParams);
+    console.log(children[1]);
+    const ref = useRef(defaultParams);
     useEffect(function () {
         if (ref.current !== defaultParams) {
             ref.current = defaultParams;
@@ -109,31 +116,32 @@ export default function BootstrapTable({ url, bordered, noStrip, defaultParams,
         React.createElement(DataTableContext.Provider, { value: state },
             React.createElement(DataContextProvider, { value: fetchData },
                 React.createElement(RefreshScope, { update: update },
-                    React.createElement(CardHeader, null,
-                        React.createElement(Row, null,
-                            add && React.createElement(Col, { xs: "12", md: "2" },
-                                React.createElement(Link, { to: add, className: "btn btn-primary font-xl d-block" },
-                                    React.createElement("i", { className: "fa fa-plus" }))),
-                            React.createElement(Col, { md: "2" },
-                                React.createElement(Input, { type: "select", value: itemPerPage.toString(), onChange: a => setItemPerPage(+a.currentTarget.value) },
-                                    React.createElement("option", { value: "1" }, "1"),
-                                    React.createElement("option", { value: "20" }, "20"),
-                                    React.createElement("option", { value: "50" }, "50"),
-                                    React.createElement("option", { value: "100" }, "100"),
-                                    React.createElement("option", { value: "150" }, "150"),
-                                    React.createElement("option", { value: "200" }, "200"),
-                                    React.createElement("option", { value: "-1" }, intl.formatMessage({ id: "ALL" })))),
-                            children[2],
-                            React.createElement(Col, { md: "3", className: "ms-auto" },
-                                React.createElement(Input, { placeholder: intl.formatMessage({ id: "SEARCH" }), type: "text", value: params.query || '', onChange: e => setParams(Object.assign(Object.assign({}, params), { query: e.currentTarget.value })) })))),
-                    data === null ? React.createElement(Alert, { className: "text-center mb-0 mx-3 ", color: "warning" },
-                        React.createElement("i", { className: "fas fa-spinner fa-spin" })) : !data.length ? React.createElement(Alert, { className: "text-center mx-3", color: "danger" },
-                        React.createElement("i", { className: "far fa-times-circle" }),
-                        " ",
-                        React.createElement(FormattedMessage, { id: "NO_DATA_IS_AVAILABLE" })) : React.createElement(Table, { hover: true, bordered: bordered, striped: !noStrip, responsive: true, size: "md", className: "mb-0 dataTable" },
-                        children[0],
-                        React.createElement("tbody", null, data && data.map(children[1].props.children))),
-                    lastPage > 1 && React.createElement(CardFooter, null,
-                        React.createElement("nav", null,
-                            React.createElement(BootstrapPagination, { currentPage: page, pageCount: lastPage, onPageChange: index => setPage(index) })))))));
+                    React.createElement(RowDatasContext.Provider, { value: data },
+                        React.createElement(CardHeader, null,
+                            React.createElement(Row, null,
+                                add && React.createElement(Col, { xs: "12", md: "2" },
+                                    React.createElement(Link, { to: add, className: "btn btn-primary font-xl d-block" },
+                                        React.createElement("i", { className: "fa fa-plus" }))),
+                                React.createElement(Col, { md: "2" },
+                                    React.createElement(Input, { type: "select", value: itemPerPage.toString(), onChange: a => setItemPerPage(+a.currentTarget.value) },
+                                        React.createElement("option", { value: "1" }, "1"),
+                                        React.createElement("option", { value: "20" }, "20"),
+                                        React.createElement("option", { value: "50" }, "50"),
+                                        React.createElement("option", { value: "100" }, "100"),
+                                        React.createElement("option", { value: "150" }, "150"),
+                                        React.createElement("option", { value: "200" }, "200"),
+                                        React.createElement("option", { value: "-1" }, intl.formatMessage({ id: "ALL" })))),
+                                children[2],
+                                React.createElement(Col, { md: "3", className: "ms-auto" },
+                                    React.createElement(Input, { placeholder: intl.formatMessage({ id: "SEARCH" }), type: "text", value: params.query || '', onChange: e => setParams(Object.assign(Object.assign({}, params), { query: e.currentTarget.value })) })))),
+                        data === null ? React.createElement(Alert, { className: "text-center mb-0 mx-3 ", color: "warning" },
+                            React.createElement("i", { className: "fas fa-spinner fa-spin" })) : !data.length ? React.createElement(Alert, { className: "text-center mx-3", color: "danger" },
+                            React.createElement("i", { className: "far fa-times-circle" }),
+                            " ",
+                            React.createElement(FormattedMessage, { id: "NO_DATA_IS_AVAILABLE" })) : React.createElement(Table, { hover: true, bordered: bordered, striped: !noStrip, responsive: true, size: "md", className: "mb-0 dataTable" },
+                            children[0],
+                            children[1].type === "tbody" ? React.createElement("tbody", null, data && data.map(children[1].props.children)) : children[1]),
+                        lastPage > 1 && React.createElement(CardFooter, null,
+                            React.createElement("nav", null,
+                                React.createElement(BootstrapPagination, { currentPage: page, pageCount: lastPage, onPageChange: index => setPage(index) }))))))));
 }

package/lib/esm/Components/CRUD.d.ts

@@ -1,4 +1,5 @@
 import React from 'react';
+import { BootstrapTableProps } from './BootstrapDataTable';
 declare type ModalEntityEditorParams = {
     entity: any;
     title?: string;
@@ -16,5 +17,10 @@ declare type CrudActionProps = {
     children?: React.ReactNode;
 };
 export declare function CRUDActions({ id, edit, del, children }: CrudActionProps): JSX.Element;
-export default function CRUD(props: any): JSX.Element;
+interface CRUDProps extends BootstrapTableProps {
+    apiUrl?: string;
+    Component: any;
+    noAdd?: boolean;
+}
+export default function CRUD(props: CRUDProps): JSX.Element;
 export {};

package/lib/esm/Components/CRUD.js

@@ -92,7 +92,7 @@ function ComponentWrapper(_a) {
 export default function CRUD(props) {
     const ref = useRef(null);
     const { url, apiUrl, Component, defaultParams, noAdd } = props;
-    var reload = useCallback(function () {
+    const reload = useCallback(function () {
         return __awaiter(this, void 0, void 0, function* () {
             if (ref.current) {
                 ref.current({});
@@ -103,5 +103,5 @@ export default function CRUD(props) {
         React.createElement(Routes, null,
             !noAdd && React.createElement(Route, { path: "create", element: React.createElement(ComponentWrapper, Object.assign({ Component: Component, url: url, onReload: reload }, (defaultParams || {}))) }),
             React.createElement(Route, { path: ":id/edit", element: React.createElement(ComponentWrapper, Object.assign({ Component: Component, url: url, onReload: reload }, (defaultParams || {}))) })),
-        React.createElement(BootstrapDataTable, Object.assign({ innerRef: ref, add: !noAdd && "create" }, props, { url: apiUrl || url })));
+        React.createElement(BootstrapDataTable, Object.assign({ innerRef: ref, add: (!noAdd && "create") || undefined }, props, { url: apiUrl || url })));
 }

package/lib/esm/Components/CheckBox.d.ts

@@ -1 +1,10 @@
-export default function CheckBox(props: any): JSX.Element;
+import React from "react";
+import { InputProps } from "reactstrap";
+interface CheckBoxProps extends InputProps {
+    id: string;
+    type?: "checkbox" | "radio";
+    label?: React.ReactNode;
+    children: React.ReactNode;
+}
+export default function CheckBox(props: CheckBoxProps): JSX.Element;
+export {};

package/lib/esm/Components/CheckBox.js

@@ -2,6 +2,6 @@ import React from "react";
 import { FormGroup, Input, Label } from "reactstrap";
 export default function CheckBox(props) {
     return React.createElement(FormGroup, { check: true },
-        React.createElement(Input, Object.assign({ type: props.type || "checkbox" }, props, { label: undefined })),
+        React.createElement(Input, Object.assign({ type: props.type || "checkbox" }, props, { children: undefined, label: undefined })),
         React.createElement(Label, { check: true, for: props.id }, props.children || props.label));
 }

package/lib/esm/Components/DefaultValidatorOptions.d.ts

@@ -1,3 +1,6 @@
-export default function DefaultValidatorOptions({ children }: {
-    children: any;
-}): JSX.Element;
+import React from "react";
+declare type DefaultValidatorOptionsProps = {
+    children: React.ReactNode;
+};
+export default function DefaultValidatorOptions({ children }: DefaultValidatorOptionsProps): JSX.Element;
+export {};

package/lib/esm/Components/ExternalLoginButton.d.ts

@@ -1,6 +1,8 @@
-export default function ExternalLoginButton({ id, icon, name, url }: {
-    id: any;
-    icon: any;
-    name: any;
-    url: any;
-}): JSX.Element;
+declare type ExternalLoginButtonProps = {
+    id: string;
+    icon?: string;
+    name: string;
+    url: string;
+};
+export default function ExternalLoginButton({ id, icon, name, url }: ExternalLoginButtonProps): JSX.Element;
+export {};

package/lib/esm/Components/FilePickerCore.d.ts

@@ -1,7 +1,8 @@
 import React from 'react';
-export declare function Relative({ children }: {
-    children: any;
-}): React.ReactSVGElement | null;
+declare type RelativeProps = {
+    children: JSX.Element;
+};
+export declare function Relative({ children }: RelativeProps): React.FunctionComponentElement<any> | null;
 export declare function Preview({ value }: {
     value: any;
 }): JSX.Element | null;
@@ -14,3 +15,4 @@ export default function FilePickerCore({ disabled, className, accepts, value, on
     children?: any;
     transform?: any;
 }): JSX.Element | null;
+export {};

package/lib/esm/Components/FilePickerCore.js

@@ -3,14 +3,14 @@ import prettysize from 'prettysize';
 import { Button } from "reactstrap";
 import { useApp, useFilePicker, usePreviewComponent } from "react-admin-base";
 import { FormattedMessage } from "react-intl";
-var photo_ext = ["png", "jpg", "jpeg", "svg"];
+const photo_ext = ["png", "jpg", "jpeg", "svg"];
 function is_photo(name) {
     return photo_ext.indexOf(name.split('.')[1]) !== -1;
 }
 function is_absolute(url) {
     if (url.indexOf("blob:") === 0)
         return false;
-    var pat = /^https?:\/\//i;
+    const pat = /^https?:\/\//i;
     return !pat.test(url);
 }
 export function Relative({ children }) {
@@ -24,8 +24,8 @@ export function Relative({ children }) {
     });
 }
 export function Preview({ value }) {
-    var name = value.$name;
-    var src = value.$blob_url || value.$src;
+    const name = value.$name;
+    const src = value.$blob_url || value.$src;
     if (is_photo(name)) {
         return React.createElement("div", { className: "mt-2" },
             React.createElement(Relative, null,

package/lib/esm/Components/ImagePicker.d.ts

@@ -1 +1,9 @@
-export default function ImagePicker(props: any): JSX.Element;
+import { SingleFilePickerProps } from './SingleFilePicker';
+interface ImagePickerProps extends SingleFilePickerProps {
+    width: number;
+    height: number;
+    type: string;
+    exact?: boolean;
+}
+export default function ImagePicker(props: ImagePickerProps): JSX.Element;
+export {};

package/lib/esm/Components/LanguageProvider.d.ts

@@ -1,8 +1,11 @@
+import React from 'react';
 export declare function useLanguage(): any;
-export default function LanguageProvider({ defaultLanguage, languages, loader, children }: {
-    defaultLanguage: any;
+declare type LanguageProviderProps = {
+    defaultLanguage: string;
     languages: any;
-    loader: any;
-    children: any;
-}): JSX.Element | null;
+    loader?: (language: any) => any;
+    children: React.ReactNode;
+};
+export default function LanguageProvider({ defaultLanguage, languages, loader, children }: LanguageProviderProps): JSX.Element | null;
 export declare function LanguageSwitcher(): JSX.Element | null;
+export {};

package/lib/esm/Components/LoadingButton.d.ts

@@ -1 +1,2 @@
-export default function LoadingButton(props: any): JSX.Element;
+import { ButtonProps } from 'reactstrap';
+export default function LoadingButton(props: ButtonProps): JSX.Element;

package/lib/esm/Components/MenuState.d.ts

@@ -1,3 +1,3 @@
 /// <reference types="react" />
-export declare function useIsMobile(): any;
+export declare function useIsMobile(): boolean;
 export declare function useMenuState(): [boolean, import("react").DispatchWithoutAction];

package/lib/esm/Components/SingleFilePicker.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-declare type SingleFilePickerProps = {
+export interface SingleFilePickerProps {
     disabled?: boolean;
     className?: string;
     accepts?: string;
@@ -7,6 +7,5 @@ declare type SingleFilePickerProps = {
     onChange: (value: any) => void;
     children?: (value: any) => React.ReactNode;
     transform?: any;
-};
+}
 export default function SingleFilePicker({ disabled, className, accepts, value, onChange, transform, children }: SingleFilePickerProps): JSX.Element;
-export {};

package/lib/esm/Components/StepList.d.ts

@@ -1,2 +1,14 @@
-export default function StepList({ active, setActive, children }: any): JSX.Element;
-export declare function StepItem({ title, translate, disabled }: any): JSX.Element;
+import React from "react";
+declare type StepListProps = {
+    active: number;
+    setActive: (active: number) => {};
+    children: React.ReactNode;
+};
+export default function StepList({ active, setActive, children }: StepListProps): JSX.Element;
+declare type StepItemProps = {
+    title?: string;
+    translate?: string;
+    disabled?: boolean;
+};
+export declare function StepItem({ title, translate, disabled }: StepItemProps): JSX.Element;
+export {};

package/lib/esm/Components/TopProgressBar.d.ts

@@ -1,3 +1,6 @@
-export default function TopProgressBar({ children }: {
-    children: any;
-}): any;
+import React from 'react';
+declare type TopProgressBarProps = {
+    children: React.ReactNode;
+};
+export default function TopProgressBar({ children }: TopProgressBarProps): React.ReactNode;
+export {};

package/lib/esm/Components/Validator.d.ts

@@ -1,7 +1,7 @@
 declare type ValidatorProps = {
     name: string;
     type: any;
-    children: any;
+    children: JSX.Element;
 };
 export declare function Validator({ name, type, children }: ValidatorProps): JSX.Element;
 declare type ValueValidatorProps = {

package/lib/esm/index.d.ts

@@ -1,4 +1,4 @@
-import BootstrapTable, { Actions, ActionsColumn, Column, default as BootstrapDataTable, IdColumn, useDataTableContext } from './Components/BootstrapDataTable';
+import BootstrapTable, { RowRenderer, Actions, ActionsColumn, Column, default as BootstrapDataTable, IdColumn, useDataTableContext } from './Components/BootstrapDataTable';
 import CRUD, { CRUDActions, ModalEntityEditor } from './Components/CRUD';
 import EntityEditor from "./Components/EntityEditor";
 import ExcelExportButton from './Components/ExcelExportButton';
@@ -20,4 +20,4 @@ import ThemeProvider, { useTheme, useAllThemes } from './Components/ThemeProvide
 import StepList, { StepItem } from './Components/StepList';
 import PasswordInput from './Components/PasswordInput';
 import DefaultValidatorOptions from './Components/DefaultValidatorOptions';
-export { ThemeProvider, useTheme, useAllThemes, useIsMobile, useMenuState, DefaultValidatorOptions, PasswordInput, StepList, StepItem, TopProgressBar, CRUD, ModalEntityEditor, CRUDActions, Relative, ApiSelect, Preview, ExcelExportButton, ExternalLoginButton, SingleFilePicker, MultiFilePicker, ImagePicker, BootstrapTable, EntityEditor, GoToTop, Validator, ValueValidator, ValidationErrors, LoadingButton, BootstrapDataTable, IdColumn, Column, ActionsColumn, Actions, useDataTableContext, LanguageProvider, useLanguage, LanguageSwitcher, ErrorBoundary, CheckBox };
+export { ThemeProvider, useTheme, useAllThemes, useIsMobile, useMenuState, DefaultValidatorOptions, PasswordInput, StepList, StepItem, TopProgressBar, CRUD, ModalEntityEditor, CRUDActions, Relative, ApiSelect, Preview, ExcelExportButton, ExternalLoginButton, SingleFilePicker, MultiFilePicker, ImagePicker, BootstrapTable, EntityEditor, GoToTop, Validator, ValueValidator, ValidationErrors, LoadingButton, BootstrapDataTable, IdColumn, Column, ActionsColumn, Actions, useDataTableContext, RowRenderer, LanguageProvider, useLanguage, LanguageSwitcher, ErrorBoundary, CheckBox };

package/lib/esm/index.js

@@ -1,4 +1,4 @@
-import BootstrapTable, { Actions, ActionsColumn, Column, default as BootstrapDataTable, IdColumn, useDataTableContext } from './Components/BootstrapDataTable';
+import BootstrapTable, { RowRenderer, Actions, ActionsColumn, Column, default as BootstrapDataTable, IdColumn, useDataTableContext } from './Components/BootstrapDataTable';
 import CRUD, { CRUDActions, ModalEntityEditor } from './Components/CRUD';
 import EntityEditor from "./Components/EntityEditor";
 import ExcelExportButton from './Components/ExcelExportButton';
@@ -20,4 +20,4 @@ import ThemeProvider, { useTheme, useAllThemes } from './Components/ThemeProvide
 import StepList, { StepItem } from './Components/StepList';
 import PasswordInput from './Components/PasswordInput';
 import DefaultValidatorOptions from './Components/DefaultValidatorOptions';
-export { ThemeProvider, useTheme, useAllThemes, useIsMobile, useMenuState, DefaultValidatorOptions, PasswordInput, StepList, StepItem, TopProgressBar, CRUD, ModalEntityEditor, CRUDActions, Relative, ApiSelect, Preview, ExcelExportButton, ExternalLoginButton, SingleFilePicker, MultiFilePicker, ImagePicker, BootstrapTable, EntityEditor, GoToTop, Validator, ValueValidator, ValidationErrors, LoadingButton, BootstrapDataTable, IdColumn, Column, ActionsColumn, Actions, useDataTableContext, LanguageProvider, useLanguage, LanguageSwitcher, ErrorBoundary, CheckBox };
+export { ThemeProvider, useTheme, useAllThemes, useIsMobile, useMenuState, DefaultValidatorOptions, PasswordInput, StepList, StepItem, TopProgressBar, CRUD, ModalEntityEditor, CRUDActions, Relative, ApiSelect, Preview, ExcelExportButton, ExternalLoginButton, SingleFilePicker, MultiFilePicker, ImagePicker, BootstrapTable, EntityEditor, GoToTop, Validator, ValueValidator, ValidationErrors, LoadingButton, BootstrapDataTable, IdColumn, Column, ActionsColumn, Actions, useDataTableContext, RowRenderer, LanguageProvider, useLanguage, LanguageSwitcher, ErrorBoundary, CheckBox };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-admin-base-bootstrap",
-  "version": "0.7.8",
+  "version": "0.8.1",
   "description": "",
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1",
@@ -28,29 +28,29 @@
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-intl": "^5.21.0",
-    "react-router-dom": "^6.3.0"
+    "react-router-dom": "^6.4.2"
   },
   "dependencies": {
-    "@emotion/react": "^11.9.3",
-    "@fortawesome/fontawesome-free": "^6.1.1",
-    "bootstrap": "^5.1.3",
+    "@emotion/react": "^11.10.4",
+    "@fortawesome/fontawesome-free": "^6.2.0",
+    "bootstrap": "^5.2.2",
     "file-dialog": "^0.0.8",
     "modal-cropper": "^1.2.3",
     "nprogress": "^0.2.0",
     "prettysize": "^2.0.0",
     "react-admin-base": "^0.7.3",
     "react-password-strength-bar": "^0.4.1",
-    "react-responsive": "^8.2.0",
-    "react-select": "^5.3.2",
-    "reactstrap": "^9.1.1",
+    "react-responsive": "^9.0.0",
+    "react-select": "^5.4.0",
+    "reactstrap": "^9.1.4",
     "rewire": "^6.0.0",
-    "sweetalert2": "^11.4.17"
+    "sweetalert2": "^11.5.1"
   },
   "devDependencies": {
-    "@types/react": "^18.0.12",
+    "@types/react": "^18.0.21",
     "cross-env": "^7.0.3",
-    "nodemon": "^2.0.16",
-    "react-intl": "^6.0.4",
-    "typescript": "^4.7.3"
+    "nodemon": "^2.0.20",
+    "react-intl": "^6.1.2",
+    "typescript": "^4.8.4"
   }
 }

package/src/Components/ApiSelect.tsx

@@ -1,10 +1,10 @@
 /** @jsx jsx */
-import { jsx } from '@emotion/react';
-import React, { useCallback, useMemo, useState } from 'react';
-import { useFetch } from 'react-admin-base';
-import { FormattedMessage, useIntl } from 'react-intl';
-import Select, { components } from "react-select";
-import CreatableSelect from 'react-select/creatable';
+import { jsx } from '@emotion/react';
+import React, { useCallback, useMemo, useState } from 'react';
+import { useFetch } from 'react-admin-base';
+import { FormattedMessage, useIntl } from 'react-intl';
+import Select, { components } from "react-select";
+import CreatableSelect from 'react-select/creatable';
 
 function Option(props) {
     return <components.Option {...props}>
@@ -60,7 +60,25 @@ function IndicatorsContainer(props) {
 
 const Components = { Option, SingleValue, IndicatorsContainer };
 
-export default function ApiSelect(props) {
+export interface ApiSelectProps<Option = any> {
+    url?: string;
+    value: Option|Option[];
+    onChange: (a: Option|Option[]|null) => void;
+    getOptionLabel?: (a: any) => string;
+    getOptionValue?: (a: any) => string;
+    onCreateOption?: (a: string) => Option|Promise<Option>;
+    filter?: (a: Option) => boolean;
+    group?: (a: Option[]) => any[];
+    isMulti?: boolean;
+    idKey?: string;
+    nameKey?: string;
+    disabled?: boolean;
+    placeholder?: string;
+    staticOptions?: any[];
+    getNewOptionData?: (name: string, elem: React.ReactNode) => any|null;
+}
+
+export default function ApiSelect<Option = any>(props: ApiSelectProps<Option>) {
     const { disabled, url, getOptionLabel, getOptionValue, idKey, nameKey, filter, group, onCreateOption, getNewOptionData, isMulti, onChange, value, placeholder, staticOptions } = props;
     const intl = useIntl();
     const [ search, setSearch ] = useState('');
@@ -76,11 +94,14 @@ export default function ApiSelect(props) {
     }
 
     const handleCreateOption = useCallback(async function(input) {
+        if (!onCreateOption)
+            return null;
+
         setCreating(true);
         try {
             let option = await onCreateOption(input);
             if (isMulti) {
-                onChange((value || []).concat([option]));
+                onChange(((value as Option[]) || []).concat([option]));
             } else {
                 onChange(option);
             }
@@ -104,8 +125,8 @@ export default function ApiSelect(props) {
         {...props}
         className='react-select-container'
         classNamePrefix="react-select"
-        onCreateOption={(onCreateOption && handleCreateOption) || null}
-        getNewOptionData={onCreateOption ? getNewOptionData ? getNewOptionData : (inputValue) =>( { [nameKey || 'name']: inputValue, __isNew__: true }) : null}
+        onCreateOption={onCreateOption && handleCreateOption}
+        getNewOptionData={(onCreateOption && (getNewOptionData || ((inputValue) =>( { [nameKey || 'name']: inputValue, __isNew__: true })))) || undefined}
         inputValue={search}
         onInputChange={a => setSearch(a)}
         components={Components}
@@ -117,7 +138,6 @@ export default function ApiSelect(props) {
         isSearchable
         placeholder={placeholder || intl.formatMessage({ id: 'SELECT' })}
         options={!options ? [] : ((filter && options.filter(filter)) || options)}
-        isMenuOpen={isMenuOpen}
         onMenuOpen={onMenuOpen}
         onMenuClose={onMenuClose}
     />;

package/src/Components/BootstrapDataTable.tsx

@@ -7,12 +7,21 @@ import Swal from 'sweetalert2';
 import BootstrapPagination from "./BootstrapPagination";
 
 const DataTableContext = React.createContext(null as any);
+const RowDatasContext = React.createContext(null as any);
+const RowDataContext = React.createContext(null as any);
 
 export function useDataTableContext() {
     return useContext(DataTableContext);
 }
 
-export function Actions({edit, del, rowSpan, children} : {edit: any, del: any, rowSpan?:any, children?: any}) {
+type ActionsProp = {
+    edit?: string;
+    del?: string;
+    rowSpan?: number|undefined;
+    children?: React.ReactNode;
+};
+
+export function Actions({edit, del, rowSpan, children}: ActionsProp) {
     const [api] = useAuth();
     const [, setParams] = useContext(DataTableContext);
     const intl = useIntl();
@@ -75,14 +84,39 @@ export function Column(props) {
     </th>;
 }
 
-export default function BootstrapTable({url, bordered, noStrip, defaultParams, add, children, innerRef, body}: any) {
-    var state = useState({sort: 'id', ...defaultParams});
+export interface BootstrapTableProps {
+    url: string;
+    bordered?: boolean;
+    noStrip?: boolean;
+    defaultParams?: any;
+    body?: any;
+    add?: string;
+    children: any;
+    innerRef?: any;
+}
+
+interface RowRendererProps<Row = any> {
+    render: (row: Row) => React.ReactNode;
+}
+
+export function RowRenderer<Row = any>({render}: RowRendererProps<Row>) {
+    const rows = useContext(RowDatasContext);
+
+    return <tbody>
+        { rows.map(render) }
+    </tbody>;
+}
+
+export default function BootstrapTable({url, bordered, noStrip, defaultParams, add, children, innerRef, body}: BootstrapTableProps) {
+    const state = useState({sort: 'id', ...defaultParams});
     const [params, setParams] = state;
     const [page, lastPage, setPage, data, itemPerPage, setItemPerPage, update] = useDataTable(url, params, body);
     const intl = useIntl();
     const [ api ] = useAuth();
 
-    var ref = useRef(defaultParams);
+    console.log(children[1]);
+
+    const ref = useRef(defaultParams);
     useEffect(function () {
         if (ref.current !== defaultParams) {
             ref.current = defaultParams;
@@ -114,47 +148,49 @@ export default function BootstrapTable({url, bordered, noStrip, defaultParams, a
         <DataTableContext.Provider value={state}>
             <DataContextProvider value={fetchData}>
                 <RefreshScope update={update}>
-                    <CardHeader>
-                        <Row>
-                            {add && <Col xs="12" md="2"><Link to={add} className="btn btn-primary font-xl d-block"><i className="fa fa-plus"/></Link></Col>}
-                            <Col md="2">
-                                <Input type="select" value={itemPerPage.toString()} onChange={a => setItemPerPage(+a.currentTarget.value)}>
-                                    <option value="1">1</option>
-                                    <option value="20">20</option>
-                                    <option value="50">50</option>
-                                    <option value="100">100</option>
-                                    <option value="150">150</option>
-                                    <option value="200">200</option>
-                                    <option value="-1">{intl.formatMessage({id: "ALL"})}</option>
-                                </Input>
-                            </Col>
-                            {children[2]}
-                            <Col md="3" className="ms-auto">
-                                <Input
-                                    placeholder={intl.formatMessage({id: "SEARCH"})} type="text"
-                                    value={params.query || ''}
-                                    onChange={e => setParams({...params, query: e.currentTarget.value})}
+                    <RowDatasContext.Provider value={data}>
+                        <CardHeader>
+                            <Row>
+                                {add && <Col xs="12" md="2"><Link to={add} className="btn btn-primary font-xl d-block"><i className="fa fa-plus"/></Link></Col>}
+                                <Col md="2">
+                                    <Input type="select" value={itemPerPage.toString()} onChange={a => setItemPerPage(+a.currentTarget.value)}>
+                                        <option value="1">1</option>
+                                        <option value="20">20</option>
+                                        <option value="50">50</option>
+                                        <option value="100">100</option>
+                                        <option value="150">150</option>
+                                        <option value="200">200</option>
+                                        <option value="-1">{intl.formatMessage({id: "ALL"})}</option>
+                                    </Input>
+                                </Col>
+                                {children[2]}
+                                <Col md="3" className="ms-auto">
+                                    <Input
+                                        placeholder={intl.formatMessage({id: "SEARCH"})} type="text"
+                                        value={params.query || ''}
+                                        onChange={e => setParams({...params, query: e.currentTarget.value})}
+                                    />
+                                </Col>
+                            </Row>
+                        </CardHeader>
+                            {data === null ? <Alert className="text-center mb-0 mx-3 " color="warning"><i className="fas fa-spinner fa-spin"></i></Alert> : !data.length ? <Alert className="text-center mx-3" color="danger">
+                                <i className="far fa-times-circle"></i> <FormattedMessage id="NO_DATA_IS_AVAILABLE"/>
+                            </Alert> : <Table hover bordered={bordered} striped={!noStrip} responsive size="md" className="mb-0 dataTable">
+                                {children[0]}
+                                {children[1].type === "tbody" ? <tbody>
+                                    {data && data.map(children[1].props.children)}
+                                </tbody> : children[1]}
+                            </Table>}
+                        { lastPage > 1 && <CardFooter>
+                            <nav>
+                                <BootstrapPagination
+                                    currentPage={page}
+                                    pageCount={lastPage}
+                                    onPageChange={index => setPage(index)}
                                 />
-                            </Col>
-                        </Row>
-                    </CardHeader>
-                        {data === null ? <Alert className="text-center mb-0 mx-3 " color="warning"><i className="fas fa-spinner fa-spin"></i></Alert> : !data.length ? <Alert className="text-center mx-3" color="danger">
-                            <i className="far fa-times-circle"></i> <FormattedMessage id="NO_DATA_IS_AVAILABLE"/>
-                        </Alert> : <Table hover bordered={bordered} striped={!noStrip} responsive size="md" className="mb-0 dataTable">
-                            {children[0]}
-                            <tbody>
-                            {data && data.map(children[1].props.children)}
-                            </tbody>
-                        </Table>}
-                    { lastPage > 1 && <CardFooter>
-                        <nav>
-                            <BootstrapPagination
-                                currentPage={page}
-                                pageCount={lastPage}
-                                onPageChange={index => setPage(index)}
-                            />
-                        </nav>
-                    </CardFooter> }
+                            </nav>
+                        </CardFooter> }
+                    </RowDatasContext.Provider>
                 </RefreshScope>
             </DataContextProvider>
         </DataTableContext.Provider>

package/src/Components/CRUD.tsx

@@ -4,7 +4,7 @@ import { FormattedMessage } from 'react-intl';
 import { Navigate, Routes, useParams, Route } from 'react-router-dom';
 import { Alert, Button, Col, Form, Modal, ModalFooter, ModalHeader, Row } from "reactstrap";
 import LoadingButton from '../Components/LoadingButton';
-import BootstrapDataTable, { Actions } from './BootstrapDataTable';
+import BootstrapDataTable, { Actions, BootstrapTableProps } from './BootstrapDataTable';
 
 type ModalEntityEditorParams = {
     entity: any;
@@ -109,11 +109,17 @@ function ComponentWrapper({ Component, ...props }) {
   return <Component {...props} id={id} />;
 }
 
-export default function CRUD(props) {
+interface CRUDProps extends BootstrapTableProps {
+    apiUrl?: string;
+    Component: any;
+    noAdd?: boolean;
+}
+
+export default function CRUD(props: CRUDProps) {
     const ref = useRef(null as any);
     const { url, apiUrl, Component, defaultParams, noAdd } = props;
 
-    var reload = useCallback(async function() {
+    const reload = useCallback(async function() {
         if (ref.current) {
             ref.current({});
         }
@@ -124,6 +130,6 @@ export default function CRUD(props) {
           { !noAdd && <Route path="create" element={<ComponentWrapper Component={Component} url={url} onReload={reload} {...(defaultParams || {})} />} /> }
           <Route path=":id/edit" element={<ComponentWrapper Component={Component} url={url} onReload={reload} {...(defaultParams || {})} />} />
         </Routes>
-        <BootstrapDataTable innerRef={ref} add={!noAdd && "create"} {...props} url={apiUrl || url} />
+        <BootstrapDataTable innerRef={ref} add={(!noAdd && "create") || undefined} {...props} url={apiUrl || url} />
     </UrlContext.Provider>;
 }

package/src/Components/CheckBox.tsx

@@ -1,9 +1,16 @@
 import React from "react";
-import { FormGroup, Input, Label } from "reactstrap";
+import { FormGroup, Input, InputProps, Label } from "reactstrap";
 
-export default function CheckBox(props: any) {
+interface CheckBoxProps extends InputProps {
+    id: string;
+    type?: "checkbox"|"radio";
+    label?: React.ReactNode;
+    children: React.ReactNode;
+}
+
+export default function CheckBox(props: CheckBoxProps) {
 	return <FormGroup check>
-		<Input type={props.type || "checkbox"} {...props} label={undefined} />
+		<Input type={props.type || "checkbox"} {...props} children={undefined} label={undefined} />
 		<Label check for={props.id}>{props.children || props.label}</Label>
 	</FormGroup>;
 }

package/src/Components/DefaultValidatorOptions.tsx

@@ -3,7 +3,11 @@ import { ValidatorOptionProvider } from "react-admin-base";
 import { useIntl } from "react-intl";
 import zxcvbn from 'zxcvbn';
 
-export default function DefaultValidatorOptions({ children }) {
+type DefaultValidatorOptionsProps = {
+  children: React.ReactNode;
+};
+
+export default function DefaultValidatorOptions({ children }: DefaultValidatorOptionsProps) {
 	const intl = useIntl();
 	
 	const options = useMemo(() => ({

package/src/Components/ExcelExportButton.tsx

@@ -5,7 +5,9 @@ import {Button, Col} from "reactstrap";
 export default function ExcelExportButton({name, header, params, size, map, extra}) {
     const [ handleExport, loading ] = useExporter(header, params, map, extra);
 
-    return <Col><Button className="w-100 d-block" type="button" size={size} color="success" outline disabled={!!loading} onClick={() => handleExport(name)}>
-        {loading ? <i className="fas fa-spin fa-spinner"/> : <i className="fas fa-file-excel"/>}
-    </Button></Col>
+    return <Col>
+        <Button className="w-100 d-block" type="button" size={size} color="success" outline disabled={!!loading} onClick={() => handleExport(name)}>
+            {loading ? <i className="fas fa-spin fa-spinner"/> : <i className="fas fa-file-excel"/>}
+        </Button>
+    </Col>;
 }

package/src/Components/ExternalLoginButton.tsx

@@ -3,7 +3,14 @@ import React from 'react';
 import { useApp, useAuth, useLogin } from 'react-admin-base';
 import { FormattedMessage } from 'react-intl';
 
-export default function ExternalLoginButton({ id, icon, name, url }) {
+type ExternalLoginButtonProps = {
+    id: string;
+    icon?: string;
+    name: string;
+    url: string;
+};
+
+export default function ExternalLoginButton({ id, icon, name, url }: ExternalLoginButtonProps) {
   const { endpoint } = useApp();
   const [{ client_id }] = useAuth();
   const { login } = useLogin();

package/src/Components/FilePickerCore.tsx

@@ -5,7 +5,7 @@ import {Button} from "reactstrap";
 import { useApp, useFilePicker, usePreviewComponent } from "react-admin-base";
 import {FormattedMessage} from "react-intl";
 
-var photo_ext = ["png", "jpg", "jpeg", "svg"];
+const photo_ext = ["png", "jpg", "jpeg", "svg"];
 
 function is_photo(name) {
   return photo_ext.indexOf(name.split('.')[1]) !== -1;
@@ -15,11 +15,15 @@ function is_absolute(url) {
     if (url.indexOf("blob:") === 0)
         return false;
 
-    var pat = /^https?:\/\//i;
+    const pat = /^https?:\/\//i;
     return !pat.test(url);
 }
 
-export function Relative({ children }) {
+type RelativeProps = {
+    children: JSX.Element;
+};
+
+export function Relative({ children }: RelativeProps) {
     const app = useApp();
 
     if (!children)
@@ -34,8 +38,8 @@ export function Relative({ children }) {
 }
 
 export function Preview({ value }) {
-    var name = value.$name;
-    var src = value.$blob_url || value.$src;
+    const name = value.$name;
+    const src = value.$blob_url || value.$src;
 
     if (is_photo(name)) {
         return <div className="mt-2">

package/src/Components/ImagePicker.tsx

@@ -1,15 +1,15 @@
 
 import React, { useCallback } from 'react';
-import SingleFilePicker from './SingleFilePicker';
+import SingleFilePicker, { SingleFilePickerProps } from './SingleFilePicker';
 
-type ImagePickerProps = {
+interface ImagePickerProps extends SingleFilePickerProps {
   width: number;
   height: number;
   type: string;
   exact?: boolean;
-};
+}
 
-export default function ImagePicker(props) {
+export default function ImagePicker(props: ImagePickerProps) {
   const { width, height, type, exact } = props;
 
   const transform = useCallback(async function(file) {

package/src/Components/LanguageProvider.tsx

@@ -20,7 +20,14 @@ export function useLanguage() {
   return useContext(LanguageContext);
 }
 
-export default function LanguageProvider({ defaultLanguage, languages, loader, children }) {
+type LanguageProviderProps = {
+    defaultLanguage: string;
+    languages: any;
+    loader?: (language: any) => any;
+    children: React.ReactNode;
+};
+
+export default function LanguageProvider({ defaultLanguage, languages, loader, children }: LanguageProviderProps) {
   const app = useApp();
   
   const preferredLanguage = (navigator.languages && navigator.languages[0]) || navigator.language;

package/src/Components/LoadingButton.tsx

@@ -1,7 +1,7 @@
 
 import React from 'react';
-import { Button } from 'reactstrap';
+import { Button, ButtonProps } from 'reactstrap';
 
-export default function LoadingButton(props) {
+export default function LoadingButton(props: ButtonProps) {
   return props.loading ? <Button {...props} loading={undefined} disabled={true}><i className="fas fa-spin fa-circle-notch" /></Button> : <Button {...props} loading={undefined} />;
 }

package/src/Components/SingleFilePicker.tsx

@@ -1,9 +1,9 @@
 
-import React, { useCallback, useMemo } from 'react';
-import { useUploadController } from "react-admin-base";
-import FilePickerCore from "./FilePickerCore";
+import React, { useCallback, useMemo } from 'react';
+import { useUploadController } from "react-admin-base";
+import FilePickerCore from "./FilePickerCore";
 
-type SingleFilePickerProps = {
+export interface SingleFilePickerProps {
     disabled?: boolean;
     className?: string;
     accepts?: string;

package/src/Components/StepList.tsx

@@ -4,7 +4,13 @@ import { FormattedMessage } from "react-intl";
 const IndexContext = React.createContext(0);
 const OnClickDataContext = React.createContext<[number, (a: Number) => void]>(null as any);
 
-export default function StepList({ active, setActive, children }: any) {
+type StepListProps = {
+    active: number;
+    setActive: (active: number) => {};
+    children: React.ReactNode;
+}
+
+export default function StepList({ active, setActive, children }: StepListProps) {
 	const onClickData = useMemo<[number, (a: Number) => void]>(() => [active, setActive], [active, setActive]);
 	
 	return <ul className="step step-sm step-icon-sm step step-inline step-item-between mb-3">
@@ -18,7 +24,13 @@ export default function StepList({ active, setActive, children }: any) {
 	</ul>;
 }
 
-export function StepItem({ title, translate, disabled }: any) {
+type StepItemProps = {
+    title?: string;
+    translate?: string;
+    disabled?: boolean;
+}
+
+export function StepItem({ title, translate, disabled }: StepItemProps) {
 	const index = useContext(IndexContext);
 	const [ activeStep, onClickParent ] = useContext(OnClickDataContext);
 	

package/src/Components/TopProgressBar.tsx

@@ -1,8 +1,12 @@
 import NProgress from 'nprogress';
-import { useEffect } from 'react';
+import React, { useEffect } from 'react';
 import { useAuth } from "react-admin-base";
 
-export default function TopProgressBar({ children }) {
+type TopProgressBarProps = {
+    children: React.ReactNode;
+};
+
+export default function TopProgressBar({ children }: TopProgressBarProps): React.ReactNode {
 	const [ api ] = useAuth();
 
 	useEffect(function() {

package/src/Components/Validator.tsx

@@ -1,8 +1,8 @@
 
-import React from 'react';
-import { useValidate, useValidator } from 'react-admin-base';
-import { FormattedMessage } from "react-intl";
-import { Alert, FormFeedback } from "reactstrap";
+import React from 'react';
+import { useValidate, useValidator } from 'react-admin-base';
+import { FormattedMessage } from "react-intl";
+import { Alert, FormFeedback } from "reactstrap";
 
 function ValidatorCore(name: string, value: any, type: any, children: any) {
     const error = useValidate(name || '', value, type);
@@ -17,7 +17,7 @@ function ValidatorCore(name: string, value: any, type: any, children: any) {
 type ValidatorProps = {
   name: string;
   type: any;
-  children: any;
+  children: JSX.Element;
 };
 
 export function Validator({ name, type, children }: ValidatorProps) {

package/src/index.ts

@@ -1,5 +1,5 @@
 
-import BootstrapTable, { Actions, ActionsColumn, Column, default as BootstrapDataTable, IdColumn, useDataTableContext } from './Components/BootstrapDataTable';
+import BootstrapTable, { RowRenderer, Actions, ActionsColumn, Column, default as BootstrapDataTable, IdColumn, useDataTableContext } from './Components/BootstrapDataTable';
 import CRUD, { CRUDActions, ModalEntityEditor } from './Components/CRUD';
 import EntityEditor from "./Components/EntityEditor";
 import ExcelExportButton from './Components/ExcelExportButton';
@@ -44,6 +44,7 @@ export {
     Validator, ValueValidator, ValidationErrors,
     LoadingButton,
     BootstrapDataTable, IdColumn, Column, ActionsColumn, Actions, useDataTableContext,
+    RowRenderer,
     LanguageProvider, useLanguage, LanguageSwitcher,
     ErrorBoundary,
     CheckBox