react-admin-base-bootstrap 0.8.2 → 0.8.4

package/lib/esm/Components/BootstrapDataTable.js

@@ -86,7 +86,6 @@ export default function BootstrapTable({ url, bordered, noStrip, defaultParams,
     const [page, lastPage, setPage, data, itemPerPage, setItemPerPage, update] = useDataTable(url, params, body);
     const intl = useIntl();
     const [api] = useAuth();
-    console.log(children[1]);
     const ref = useRef(defaultParams);
     useEffect(function () {
         if (ref.current !== defaultParams) {

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,8 +1,9 @@
 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;
@@ -33,7 +34,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 +63,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/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,5 @@ 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';
+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 };

package/lib/esm/index.js

@@ -20,4 +20,5 @@ 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';
+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 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-admin-base-bootstrap",
-  "version": "0.8.2",
+  "version": "0.8.4",
   "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/BootstrapDataTable.tsx

@@ -114,8 +114,6 @@ export default function BootstrapTable({url, bordered, noStrip, defaultParams, a
     const intl = useIntl();
     const [ api ] = useAuth();
 
-    console.log(children[1]);
-
     const ref = useRef(defaultParams);
     useEffect(function () {
         if (ref.current !== defaultParams) {

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

@@ -2,8 +2,9 @@
 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"];
 
@@ -52,7 +53,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 +79,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/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/index.ts

@@ -21,6 +21,7 @@ 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';
 
 export {
     ThemeProvider, useTheme, useAllThemes,
@@ -47,5 +48,6 @@ export {
     RowRenderer,
     LanguageProvider, useLanguage, LanguageSwitcher,
     ErrorBoundary,
-    CheckBox
+    CheckBox,
+    DragAndDropArrow
 };