react-admin-base-bootstrap 0.8.4 → 0.8.6

package/assets/main.css

@@ -1357,3 +1357,40 @@
         margin-left: -2.40625rem
     }
 }
+
+.react-select-container .react-select__control {
+    background-color: var(--bs-body-bg);
+    border-color: var(--bs-gray-300);
+    transition: none;
+}
+
+.react-select-container .react-select__control:hover {
+    border-color: var(--bs-gray-300);
+}
+
+.react-select-container .react-select__menu {
+    background-color: var(--bs-body-bg);
+    border: 1px solid var(--bs-gray-300);
+}
+
+.react-select-container .react-select__option {
+    background-color: var(--bs-body-bg);
+}
+
+.react-select-container .react-select__option:hover {
+    background-color: var(--bs-gray-300);
+}
+
+.react-select-container .react-select__option--is-selected {
+    color: var(--bs-dark);
+}
+
+.react-select-container .react-select__indicator-separator {
+    background-color: var(--bs-gray-300);
+}
+
+.react-select-container .react-select__placeholder,
+.react-select-container .react-select__single-value
+{
+    color: var(--bs-gray-700);
+}

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

@@ -1,6 +1,6 @@
 import React from 'react';
 export declare function useDataTableContext(): any;
-declare type ActionsProp = {
+type ActionsProp = {
     edit?: string;
     del?: string;
     rowSpan?: number | undefined;

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

@@ -0,0 +1,2 @@
+import { ModalProps } from "reactstrap";
+export default function BootstrapModal(props: ModalProps): JSX.Element;

package/lib/esm/Components/BootstrapModal.js

@@ -0,0 +1,7 @@
+import React from 'react';
+import { Modal } from "reactstrap";
+import { useBootstrapOptions } from "./BootstrapOptions";
+export default function BootstrapModal(props) {
+    const bsOptions = useBootstrapOptions();
+    return React.createElement(Modal, Object.assign({}, props, { toggle: bsOptions.noCloseModal ? undefined : props.toggle }));
+}

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

@@ -0,0 +1,11 @@
+import { ReactNode } from "react";
+import BootstrapOptions from "./BootstrapOptions";
+interface BootstrapOptions {
+    noCloseModal: boolean;
+}
+interface BootstrapOptionsProviderProps extends BootstrapOptions {
+    children: ReactNode;
+}
+export declare function useBootstrapOptions(): BootstrapOptions;
+export default function BootstrapOptionsProvider({ children, noCloseModal }: BootstrapOptionsProviderProps): JSX.Element;
+export {};

package/lib/esm/Components/BootstrapOptions.js

@@ -0,0 +1,11 @@
+import React, { createContext, useContext, useMemo } from "react";
+const BootstrapOptionsContext = createContext({
+    noCloseModal: false
+});
+export function useBootstrapOptions() {
+    return useContext(BootstrapOptionsContext);
+}
+export default function BootstrapOptionsProvider({ children, noCloseModal }) {
+    const options = useMemo(() => ({ noCloseModal }), [noCloseModal]);
+    return React.createElement(BootstrapOptionsContext.Provider, { value: options }, children);
+}

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

@@ -1,4 +1,4 @@
-declare type BootstrapPaginationProps = {
+type BootstrapPaginationProps = {
     className?: string;
     currentPage: number;
     pageCount: number;

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

@@ -1,6 +1,6 @@
 import React from 'react';
 import { BootstrapTableProps } from './BootstrapDataTable';
-declare type ModalEntityEditorParams = {
+type ModalEntityEditorParams = {
     entity: any;
     title?: string;
     size?: string;
@@ -10,7 +10,7 @@ declare type ModalEntityEditorParams = {
     children: React.ReactNode;
 };
 export declare function ModalEntityEditor({ entity, title, size, url, onReload, disabled, children }: ModalEntityEditorParams): JSX.Element;
-declare type CrudActionProps = {
+type CrudActionProps = {
     id: any;
     edit?: Boolean;
     del: string;

package/lib/esm/Components/CRUD.js

@@ -22,9 +22,10 @@ import React, { useCallback, useContext, useRef, useState } from 'react';
 import { ValidatorProvider } from "react-admin-base";
 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 { Alert, Button, Col, Form, ModalFooter, ModalHeader, Row } from "reactstrap";
 import LoadingButton from '../Components/LoadingButton';
 import BootstrapDataTable, { Actions } from './BootstrapDataTable';
+import BootstrapModal from './BootstrapModal';
 export function ModalEntityEditor({ entity, title, size, url, onReload, disabled, children }) {
     const [, , save, loading] = entity;
     const [open, setOpen] = useState(true);
@@ -59,7 +60,7 @@ export function ModalEntityEditor({ entity, title, size, url, onReload, disabled
     }, [save, saved, error, onReload, url]);
     return React.createElement(React.Fragment, null,
         (saved || !open) && url && React.createElement(Navigate, { to: url, replace: true }),
-        React.createElement(Modal, { isOpen: true, size: size, toggle: () => url ? setOpen(false) : onReload(null), fade: false },
+        React.createElement(BootstrapModal, { isOpen: true, size: size, toggle: () => url ? setOpen(false) : onReload(null), fade: false },
             title && React.createElement(ModalHeader, { toggle: () => url ? setOpen(false) : onReload(null) },
                 React.createElement("b", null, title)),
             React.createElement(ValidatorProvider, null,
@@ -103,5 +104,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") || undefined }, props, { url: apiUrl || url })));
+        React.createElement(BootstrapDataTable, Object.assign({ innerRef: ref, add: (!noAdd && "create") || undefined }, props, { url: apiUrl || url }), props.children));
 }

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

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

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

@@ -1,5 +1,5 @@
 import React from 'react';
-declare type EntityEditorParams = {
+type EntityEditorParams = {
     entity: any;
     onSave?: any;
     saveButtonClassName?: string;

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

@@ -1,4 +1,4 @@
-declare type ExternalLoginButtonProps = {
+type ExternalLoginButtonProps = {
     id: string;
     icon?: string;
     name: string;

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

@@ -1,5 +1,5 @@
 import React from 'react';
-declare type RelativeProps = {
+type RelativeProps = {
     children: JSX.Element;
 };
 export declare function Relative({ children }: RelativeProps): React.FunctionComponentElement<any> | null;

package/lib/esm/Components/FilePickerCore.js

@@ -6,7 +6,8 @@ import { FormattedMessage } from "react-intl";
 import DragAndDropArrow from './DragAndDropArrow';
 const photo_ext = ["png", "jpg", "jpeg", "svg"];
 function is_photo(name) {
-    return photo_ext.indexOf(name.split('.')[1]) !== -1;
+    const sp = (name || '').split('.');
+    return photo_ext.indexOf((sp[sp.length - 1] || '').toLowerCase()) !== -1;
 }
 function is_absolute(url) {
     if (url.indexOf("blob:") === 0)
@@ -25,7 +26,7 @@ export function Relative({ children }) {
     });
 }
 export function Preview({ value }) {
-    const name = value.$name;
+    const name = value.$name || value.name;
     const src = value.$blob_url || value.$src;
     if (is_photo(name)) {
         return React.createElement("div", { className: "mt-2" },

package/lib/esm/Components/GoToTop.js

@@ -10,7 +10,7 @@ export default class GoToTop extends React.Component {
         window.scrollTo(0, 0);
     }
     handleScroll(e) {
-        var newShow = window.scrollY > 100;
+        const newShow = window.scrollY > 100;
         if (newShow !== this.state.show) {
             this.setState({ show: newShow });
         }

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

@@ -1,6 +1,6 @@
 import React from 'react';
 export declare function useLanguage(): any;
-declare type LanguageProviderProps = {
+type LanguageProviderProps = {
     defaultLanguage: string;
     languages: any;
     loader?: (language: any) => any;

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

@@ -1,5 +1,5 @@
 import React from 'react';
-declare type MultiFilePickerProps = {
+type MultiFilePickerProps = {
     disabled?: boolean;
     className?: string;
     accepts?: string;

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

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

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

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

package/lib/esm/Components/TopProgressBar.js

@@ -1,10 +1,10 @@
 import NProgress from 'nprogress';
 import { useEffect } from 'react';
 import { useAuth } from "react-admin-base";
-export default function TopProgressBar({ children }) {
+export default function TopProgressBar() {
     const [api] = useAuth();
     useEffect(function () {
         return api.set_hook(() => NProgress.start(), () => NProgress.done());
     }, [api.set_hook]);
-    return children;
+    return null;
 }

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

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

package/lib/esm/index.d.ts

@@ -21,4 +21,6 @@ import StepList, { StepItem } from './Components/StepList';
 import PasswordInput from './Components/PasswordInput';
 import DefaultValidatorOptions from './Components/DefaultValidatorOptions';
 import DragAndDropArrow from './Components/DragAndDropArrow';
-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, DragAndDropArrow };
+import BootstrapOptionsProvider, { useBootstrapOptions } from './Components/BootstrapOptions';
+import BootstrapModal from './Components/BootstrapModal';
+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, DragAndDropArrow, useBootstrapOptions, BootstrapOptionsProvider, BootstrapModal };

package/lib/esm/index.js

@@ -21,4 +21,6 @@ import StepList, { StepItem } from './Components/StepList';
 import PasswordInput from './Components/PasswordInput';
 import DefaultValidatorOptions from './Components/DefaultValidatorOptions';
 import DragAndDropArrow from './Components/DragAndDropArrow';
-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, DragAndDropArrow };
+import BootstrapOptionsProvider, { useBootstrapOptions } from './Components/BootstrapOptions';
+import BootstrapModal from './Components/BootstrapModal';
+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, DragAndDropArrow, useBootstrapOptions, BootstrapOptionsProvider, BootstrapModal };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-admin-base-bootstrap",
-  "version": "0.8.4",
+  "version": "0.8.6",
   "description": "",
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1",
@@ -27,13 +27,13 @@
   "peerDependencies": {
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "react-intl": "^5.21.0",
-    "react-router-dom": "^6.4.2"
+    "react-intl": "^6.2.5",
+    "react-router-dom": "^6.5.0"
   },
   "dependencies": {
     "@emotion/react": "^11.10.5",
-    "@fortawesome/fontawesome-free": "^6.2.0",
-    "bootstrap": "^5.2.2",
+    "@fortawesome/fontawesome-free": "^6.2.1",
+    "bootstrap": "^5.2.3",
     "file-dialog": "^0.0.8",
     "modal-cropper": "^1.2.3",
     "nprogress": "^0.2.0",
@@ -42,17 +42,17 @@
     "react-dnd": "^16.0.1",
     "react-dnd-html5-backend": "^16.0.1",
     "react-password-strength-bar": "^0.4.1",
-    "react-responsive": "^9.0.0",
-    "react-select": "^5.5.7",
+    "react-responsive": "^9.0.2",
+    "react-select": "^5.7.0",
     "reactstrap": "^9.1.5",
     "rewire": "^6.0.0",
-    "sweetalert2": "^11.6.4"
+    "sweetalert2": "^11.6.16"
   },
   "devDependencies": {
-    "@types/react": "^18.0.24",
+    "@types/react": "^18.0.26",
     "cross-env": "^7.0.3",
     "nodemon": "^2.0.20",
-    "react-intl": "^6.2.1",
-    "typescript": "^4.8.4"
+    "react-intl": "^6.2.5",
+    "typescript": "^4.9.4"
   }
 }

package/src/Components/BootstrapModal.tsx

@@ -0,0 +1,9 @@
+import React from 'react';
+import {Modal, ModalProps} from "reactstrap";
+import { useBootstrapOptions } from "./BootstrapOptions";
+
+export default function BootstrapModal(props: ModalProps) {
+    const bsOptions = useBootstrapOptions();
+
+    return <Modal {...props} toggle={bsOptions.noCloseModal ? undefined : props.toggle} />;
+}

package/src/Components/BootstrapOptions.tsx

@@ -0,0 +1,25 @@
+import React, {createContext, ReactNode, useContext, useMemo} from "react";
+import BootstrapOptions from "./BootstrapOptions";
+
+interface BootstrapOptions {
+    noCloseModal: boolean;
+}
+
+interface BootstrapOptionsProviderProps extends BootstrapOptions {
+    children: ReactNode;
+}
+
+const BootstrapOptionsContext = createContext<BootstrapOptions>({
+    noCloseModal: false
+});
+
+export function useBootstrapOptions() {
+    return useContext(BootstrapOptionsContext);
+}
+
+export default function BootstrapOptionsProvider({children,noCloseModal}: BootstrapOptionsProviderProps) {
+    const options = useMemo(() => ({noCloseModal}), [noCloseModal]);
+    return <BootstrapOptionsContext.Provider value={options}>
+        { children }
+    </BootstrapOptionsContext.Provider>;
+}

package/src/Components/CRUD.tsx

@@ -5,6 +5,8 @@ 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, BootstrapTableProps } from './BootstrapDataTable';
+import BootstrapModal from './BootstrapModal';
+import {useBootstrapOptions} from "./BootstrapOptions";
 
 type ModalEntityEditorParams = {
     entity: any;
@@ -57,7 +59,7 @@ export function ModalEntityEditor({ entity, title, size, url, onReload, disabled
 
     return <>
         { (saved || !open) && url && <Navigate to={url} replace />}
-        <Modal isOpen size={size} toggle={() => url ? setOpen(false) : onReload(null)} fade={false}>
+        <BootstrapModal isOpen size={size} toggle={() => url ? setOpen(false) : onReload(null)} fade={false}>
             { title && <ModalHeader toggle={() => url ? setOpen(false) : onReload(null)}>
                 <b>{ title }</b>
             </ModalHeader> }
@@ -83,7 +85,7 @@ export function ModalEntityEditor({ entity, title, size, url, onReload, disabled
                     </ModalFooter>
                 </Form>
             </ValidatorProvider>
-        </Modal>
+        </BootstrapModal>
     </>;
 }
 
@@ -130,6 +132,8 @@ export default function CRUD(props: CRUDProps) {
           { !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") || undefined} {...props} url={apiUrl || url} />
+        <BootstrapDataTable innerRef={ref} add={(!noAdd && "create") || undefined} {...props} url={apiUrl || url}>
+            {props.children}
+        </BootstrapDataTable>
     </UrlContext.Provider>;
 }

package/src/Components/EntityEditor.tsx

@@ -4,7 +4,6 @@ import { FormattedMessage } from "react-intl";
 import { Alert, Form } from 'reactstrap';
 import LoadingButton from "../Components/LoadingButton";
 import { ValidationErrors } from './Validator';
-import { Navigate } from 'react-router-dom';
 
 type EntityEditorParams = {
     entity: any;

package/src/Components/FilePickerCore.tsx

@@ -9,7 +9,8 @@ import DragAndDropArrow from './DragAndDropArrow';
 const photo_ext = ["png", "jpg", "jpeg", "svg"];
 
 function is_photo(name) {
-  return photo_ext.indexOf(name.split('.')[1]) !== -1;
+    const sp = (name || '').split('.');
+    return photo_ext.indexOf((sp[sp.length - 1] || '').toLowerCase()) !== -1;
 }
 
 function is_absolute(url) {
@@ -39,7 +40,7 @@ export function Relative({ children }: RelativeProps) {
 }
 
 export function Preview({ value }) {
-    const name = value.$name;
+    const name = value.$name || value.name;
     const src = value.$blob_url || value.$src;
 
     if (is_photo(name)) {

package/src/Components/GoToTop.tsx

@@ -2,7 +2,6 @@ import React from 'react';
 import {FormattedMessage} from "react-intl";
 
 export default class GoToTop extends React.Component {
-
     state = {show: false};
 
     scrollTop(e) {
@@ -12,7 +11,7 @@ export default class GoToTop extends React.Component {
     }
 
     handleScroll(e) {
-        var newShow = window.scrollY > 100;
+        const newShow = window.scrollY > 100;
         if (newShow !== this.state.show) {
             this.setState({show: newShow});
         }

package/src/Components/ThemeProvider.tsx

@@ -1,5 +1,5 @@
 import React, { createContext, Dispatch, useContext, useEffect, useMemo, useReducer, useRef } from "react";
-import { useApp, useLocalStorage } from "react-admin-base";
+import { useLocalStorage } from "react-admin-base";
 
 const ThemeContext = createContext(null as any);
 const AllThemesContext = createContext(null as any);

package/src/Components/TopProgressBar.tsx

@@ -2,16 +2,12 @@ import NProgress from 'nprogress';
 import React, { useEffect } from 'react';
 import { useAuth } from "react-admin-base";
 
-type TopProgressBarProps = {
-    children: React.ReactNode;
-};
-
-export default function TopProgressBar({ children }: TopProgressBarProps): React.ReactNode {
+export default function TopProgressBar() {
 	const [ api ] = useAuth();
 
 	useEffect(function() {
 		return api.set_hook(() => NProgress.start(), () => NProgress.done());
 	}, [api.set_hook]);
 
-	return children;
+	return null;
 }

package/src/index.ts

@@ -22,6 +22,8 @@ import StepList, { StepItem } from './Components/StepList';
 import PasswordInput from './Components/PasswordInput';
 import DefaultValidatorOptions from './Components/DefaultValidatorOptions';
 import DragAndDropArrow from './Components/DragAndDropArrow';
+import BootstrapOptionsProvider, { useBootstrapOptions } from './Components/BootstrapOptions';
+import BootstrapModal from './Components/BootstrapModal';
 
 export {
     ThemeProvider, useTheme, useAllThemes,
@@ -49,5 +51,8 @@ export {
     LanguageProvider, useLanguage, LanguageSwitcher,
     ErrorBoundary,
     CheckBox,
-    DragAndDropArrow
+    DragAndDropArrow,
+    useBootstrapOptions,
+    BootstrapOptionsProvider,
+    BootstrapModal
 };