react-admin-base-bootstrap 0.8.3 → 0.8.5

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/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/CheckBox.d.ts

@@ -1,7 +1,7 @@
 import React from "react";
 import { InputProps } from "reactstrap";
 interface CheckBoxProps extends InputProps {
-    id: string;
+    id?: string;
     type?: "checkbox" | "radio";
     label?: React.ReactNode;
     children?: React.ReactNode;

package/lib/esm/Components/CheckBox.js

@@ -1,7 +1,8 @@
-import React from "react";
+import React, { useId } from "react";
 import { FormGroup, Input, Label } from "reactstrap";
 export default function CheckBox(props) {
+    const id = useId();
     return React.createElement(FormGroup, { check: true },
-        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));
+        React.createElement(Input, Object.assign({ id: props.id || id, type: props.type || "checkbox" }, props, { children: undefined, label: undefined })),
+        React.createElement(Label, { check: true, for: props.id || id }, props.children || props.label));
 }

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

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

package/lib/esm/Components/DragAndDropArrow.js

@@ -0,0 +1,11 @@
+import React from "react";
+import { Button } from "reactstrap";
+import { useDragContext } from "react-admin-base";
+export default function DragAndDropArrow(props) {
+    const [ref, isDragging] = useDragContext();
+    if (!ref)
+        return null;
+    return React.createElement(Button, Object.assign({ type: "button", innerRef: ref, outline: true, size: "sm", color: "primary" }, props),
+        React.createElement("i", { className: "fas fa-" + (isDragging ? "circle-dot" : "arrows-up-down-left-right") }),
+        props.children);
+}

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

@@ -0,0 +1,2 @@
+import { ButtonProps } from "reactstrap";
+export declare function DragAndDropArrow(props: ButtonProps): JSX.Element | null;

package/lib/esm/Components/DragDrop.js

@@ -0,0 +1,11 @@
+import React from "react";
+import { Button } from "reactstrap";
+import { useDragContext } from "react-admin-base";
+export function DragAndDropArrow(props) {
+    const [ref, isDragging] = useDragContext();
+    if (!ref)
+        return null;
+    return React.createElement(Button, Object.assign({ type: "button", innerRef: ref, outline: true, size: "sm", color: "primary" }, props),
+        React.createElement("i", { className: "fas fa-arrows-up-down-left-right" }),
+        props.children);
+}

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

@@ -6,8 +6,10 @@ export declare function Relative({ children }: RelativeProps): React.FunctionCom
 export declare function Preview({ value }: {
     value: any;
 }): JSX.Element | null;
-export default function FilePickerCore({ disabled, className, accepts, value, onNotify, children, transform }: {
+export default function FilePickerCore({ disabled, index, move, className, accepts, value, onNotify, children, transform }: {
     disabled?: any;
+    index?: number;
+    move?: any;
     className?: any;
     accepts?: any;
     value?: any;

package/lib/esm/Components/FilePickerCore.js

@@ -1,11 +1,13 @@
 import React, { useCallback } from 'react';
 import prettysize from 'prettysize';
 import { Button } from "reactstrap";
-import { useApp, useFilePicker, usePreviewComponent } from "react-admin-base";
+import { useApp, useFilePicker, usePreviewComponent, DragAndDropItem } from "react-admin-base";
 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)
@@ -24,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" },
@@ -33,7 +35,7 @@ export function Preview({ value }) {
     }
     return null;
 }
-export default function FilePickerCore({ disabled, className, accepts, value, onNotify, children, transform }) {
+export default function FilePickerCore({ disabled, index, move, className, accepts, value, onNotify, children, transform }) {
     const [uc, cancel, pick] = useFilePicker(value, onNotify);
     const CustomPreview = usePreviewComponent() || Preview;
     const chooseFile = useCallback(function (e) {
@@ -62,21 +64,23 @@ export default function FilePickerCore({ disabled, className, accepts, value, on
             children && children(uc));
     }
     else if (uc.$state === 3) { // yuklendi
-        return React.createElement("div", { className: className },
-            !disabled && React.createElement(Button, { color: "danger", outline: true, size: "sm", onClick: cancel },
-                React.createElement("i", { className: "fa fa-trash" })),
-            "\u00A0",
-            React.createElement(Relative, null,
-                React.createElement("a", { href: uc.$src, target: "_blank", className: "btn btn-sm btn-outline-primary" },
-                    React.createElement("i", { className: "fa fa-download" }),
-                    " ",
-                    uc.name)),
-            React.createElement("span", null,
-                "\u00A0(",
-                prettysize(uc.$size),
-                ")"),
-            React.createElement(CustomPreview, { value: uc }),
-            children && children(uc));
+        return React.createElement(DragAndDropItem, { item: index },
+            React.createElement("div", { className: className },
+                React.createElement(DragAndDropArrow, { className: "me-1" }),
+                !disabled && React.createElement(Button, { color: "danger", outline: true, size: "sm", onClick: cancel },
+                    React.createElement("i", { className: "fa fa-trash" })),
+                "\u00A0",
+                React.createElement(Relative, null,
+                    React.createElement("a", { href: uc.$src, target: "_blank", className: "btn btn-sm btn-outline-primary" },
+                        React.createElement("i", { className: "fa fa-download" }),
+                        " ",
+                        uc.name)),
+                React.createElement("span", null,
+                    "\u00A0(",
+                    prettysize(uc.$size),
+                    ")"),
+                React.createElement(CustomPreview, { value: uc }),
+                children && children(uc)));
     }
     return null;
 }

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/MultiFilePicker.d.ts

@@ -5,7 +5,8 @@ declare type MultiFilePickerProps = {
     accepts?: string;
     value: any;
     onChange: (value: any) => void;
+    noMove?: boolean;
     children?: (value: any) => React.ReactNode;
 };
-export default function MultiFilePicker({ disabled, className, accepts, value, onChange, children }: MultiFilePickerProps): JSX.Element;
+export default function MultiFilePicker({ disabled, className, noMove, accepts, value, onChange, children }: MultiFilePickerProps): JSX.Element;
 export {};

package/lib/esm/Components/MultiFilePicker.js

@@ -1,11 +1,11 @@
 import React, { useMemo } from 'react';
-import { useMultiFilePicker } from "react-admin-base";
+import { useMultiFilePicker, DragAndDropProvider } from "react-admin-base";
 import { FormattedMessage } from "react-intl";
 import { Button } from "reactstrap";
 import FilePickerCore from "./FilePickerCore";
-export default function MultiFilePicker({ disabled, className, accepts, value, onChange, children }) {
+export default function MultiFilePicker({ disabled, className, noMove, accepts, value, onChange, children }) {
     const uniqueIdList = useMemo(() => [], []);
-    const [controllers, _onChange, chooseFile] = useMultiFilePicker(value, onChange);
+    const [controllers, _onChange, chooseFile, onMove] = useMultiFilePicker(value, onChange);
     function getConstantUniqueIdFor(element) {
         if (uniqueIdList.indexOf(element) < 0) {
             uniqueIdList.push(element);
@@ -18,5 +18,5 @@ export default function MultiFilePicker({ disabled, className, accepts, value, o
             " ",
             React.createElement(FormattedMessage, { id: "CHOOSE_FILE" })),
         children && children(null),
-        controllers.map((a, i) => React.createElement(FilePickerCore, { key: getConstantUniqueIdFor(a), disabled: !!disabled, className: "mt-2", accepts: accepts, value: a, onNotify: _onChange.bind(null, a) }, children)));
+        React.createElement(DragAndDropProvider, { onMove: !noMove && onMove }, controllers.map((a, i) => React.createElement(FilePickerCore, { key: getConstantUniqueIdFor(a), disabled: !!disabled, className: "mt-2", accepts: accepts, value: a, index: i, onNotify: _onChange.bind(null, a) }, children))));
 }

package/lib/esm/index.d.ts

@@ -20,4 +20,7 @@ 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, RowRenderer, LanguageProvider, useLanguage, LanguageSwitcher, ErrorBoundary, CheckBox };
+import DragAndDropArrow from './Components/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

@@ -20,4 +20,7 @@ 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, RowRenderer, LanguageProvider, useLanguage, LanguageSwitcher, ErrorBoundary, CheckBox };
+import DragAndDropArrow from './Components/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.3",
+  "version": "0.8.5",
   "description": "",
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1",
@@ -31,26 +31,28 @@
     "react-router-dom": "^6.4.2"
   },
   "dependencies": {
-    "@emotion/react": "^11.10.4",
+    "@emotion/react": "^11.10.5",
     "@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.8.0",
+    "react-admin-base": "^0.8.3",
+    "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.4.0",
-    "reactstrap": "^9.1.4",
+    "react-select": "^5.5.7",
+    "reactstrap": "^9.1.5",
     "rewire": "^6.0.0",
-    "sweetalert2": "^11.5.1"
+    "sweetalert2": "^11.6.4"
   },
   "devDependencies": {
-    "@types/react": "^18.0.21",
+    "@types/react": "^18.0.24",
     "cross-env": "^7.0.3",
     "nodemon": "^2.0.20",
-    "react-intl": "^6.1.2",
+    "react-intl": "^6.2.1",
     "typescript": "^4.8.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/CheckBox.tsx

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

package/src/Components/DragAndDropArrow.tsx

@@ -0,0 +1,14 @@
+import React from "react";
+import {Button, ButtonProps} from "reactstrap";
+import { useDragContext } from "react-admin-base";
+
+export default function DragAndDropArrow(props: ButtonProps) {
+    const [ ref, isDragging ] = useDragContext();
+
+    if (!ref)
+        return null;
+
+    return <Button type="button" innerRef={ref} outline size="sm" color="primary" {...props}>
+        <i className={"fas fa-" + (isDragging ? "circle-dot" : "arrows-up-down-left-right")} />{props.children}
+    </Button>;
+}

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

@@ -2,13 +2,15 @@
 import React, { useCallback } from 'react';
 import prettysize from 'prettysize';
 import {Button} from "reactstrap";
-import { useApp, useFilePicker, usePreviewComponent } from "react-admin-base";
+import { useApp, useFilePicker, usePreviewComponent, DragAndDropItem } from "react-admin-base";
 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) {
@@ -38,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)) {
@@ -52,7 +54,7 @@ export function Preview({ value }) {
     return null;
 }
 
-export default function FilePickerCore({ disabled, className, accepts, value, onNotify, children, transform } : { disabled?: any, className?: any, accepts?: any, value?:any, onNotify?:any, children?:any, transform?:any }) {
+export default function FilePickerCore({ disabled, index, move, className, accepts, value, onNotify, children, transform } : { disabled?: any, index?: number, move?: any, className?: any, accepts?: any, value?:any, onNotify?:any, children?:any, transform?:any }) {
     const [ uc, cancel, pick ] = useFilePicker(value, onNotify);
     const CustomPreview = usePreviewComponent() || Preview;
 
@@ -78,13 +80,16 @@ export default function FilePickerCore({ disabled, className, accepts, value, on
             { children && children(uc) }
         </div>;
     } else if(uc.$state === 3) { // yuklendi
-        return <div className={className}>
-            { !disabled && <Button color="danger" outline size="sm" onClick={cancel}><i className="fa fa-trash" /></Button> }
-            &nbsp;<Relative><a href={uc.$src} target="_blank" className="btn btn-sm btn-outline-primary"><i className="fa fa-download" /> { uc.name }</a></Relative>
-            <span>&nbsp;({ prettysize(uc.$size) })</span>
-            { <CustomPreview value={uc} /> }
-            { children && children(uc) }
-        </div>;
+        return <DragAndDropItem item={index}>
+            <div className={className}>
+                <DragAndDropArrow className="me-1" />
+                { !disabled && <Button color="danger" outline size="sm" onClick={cancel}><i className="fa fa-trash" /></Button> }
+                &nbsp;<Relative><a href={uc.$src} target="_blank" className="btn btn-sm btn-outline-primary"><i className="fa fa-download" /> { uc.name }</a></Relative>
+                <span>&nbsp;({ prettysize(uc.$size) })</span>
+                { <CustomPreview value={uc} /> }
+                { children && children(uc) }
+            </div>
+        </DragAndDropItem>;
     }
 
     return null;

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/MultiFilePicker.tsx

@@ -1,9 +1,9 @@
 
-import React, { useMemo } from 'react';
-import { useMultiFilePicker } from "react-admin-base";
-import { FormattedMessage } from "react-intl";
-import { Button } from "reactstrap";
-import FilePickerCore from "./FilePickerCore";
+import React, { useMemo } from 'react';
+import { useMultiFilePicker, DragAndDropProvider } from "react-admin-base";
+import { FormattedMessage } from "react-intl";
+import { Button } from "reactstrap";
+import FilePickerCore from "./FilePickerCore";
 
 type MultiFilePickerProps = {
     disabled?: boolean;
@@ -11,12 +11,13 @@ type MultiFilePickerProps = {
     accepts?: string;
     value: any;
     onChange: (value: any) => void;
+    noMove?: boolean;
     children?: (value: any) => React.ReactNode;
 }
 
-export default function MultiFilePicker({ disabled, className, accepts, value, onChange, children }: MultiFilePickerProps) {
+export default function MultiFilePicker({ disabled, className, noMove, accepts, value, onChange, children }: MultiFilePickerProps) {
     const uniqueIdList = useMemo(() => [] as any, []);
-    const [ controllers, _onChange, chooseFile ] = useMultiFilePicker(value, onChange);
+    const [ controllers, _onChange, chooseFile, onMove ] = useMultiFilePicker(value, onChange);
 
     function getConstantUniqueIdFor(element) {
         if (uniqueIdList.indexOf(element) < 0) {
@@ -31,13 +32,16 @@ export default function MultiFilePicker({ disabled, className, accepts, value, o
         </Button>
         { children && children(null) }
 
-        { controllers.map((a,i) => <FilePickerCore
-            key={getConstantUniqueIdFor(a)}
-            disabled={!!disabled}
-            className="mt-2"
-            accepts={accepts}
-            value={a}
-            onNotify={_onChange.bind(null, a)}
-        >{children}</FilePickerCore>) }
+        <DragAndDropProvider onMove={!noMove && onMove}>
+            { controllers.map((a,i) => <FilePickerCore
+                key={getConstantUniqueIdFor(a)}
+                disabled={!!disabled}
+                className="mt-2"
+                accepts={accepts}
+                value={a}
+                index={i}
+                onNotify={_onChange.bind(null, a)}
+            >{children}</FilePickerCore>) }
+        </DragAndDropProvider>
     </div>;
 }

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/index.ts

@@ -21,6 +21,9 @@ import ThemeProvider, { useTheme, useAllThemes } from './Components/ThemeProvide
 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,
@@ -47,5 +50,9 @@ export {
     RowRenderer,
     LanguageProvider, useLanguage, LanguageSwitcher,
     ErrorBoundary,
-    CheckBox
+    CheckBox,
+    DragAndDropArrow,
+    useBootstrapOptions,
+    BootstrapOptionsProvider,
+    BootstrapModal
 };