react-admin-base-bootstrap 0.9.7 → 0.9.9

package/lib/esm/Components/ApiSelect.js

@@ -12,12 +12,10 @@ import { RefreshScope, useFetch, useRefresh } from 'react-admin-base';
 import { FormattedMessage, useIntl } from 'react-intl';
 import Select, { components } from "react-select";
 import CreatableSelect from 'react-select/creatable';
-import { SortableContainer, SortableElement, SortableHandle, } from 'react-sortable-hoc';
-function arrayMove(array, from, to) {
-    const slicedArray = array.slice();
-    slicedArray.splice(to < 0 ? array.length + to : to, 0, slicedArray.splice(from, 1)[0]);
-    return slicedArray;
-}
+import { closestCenter, DndContext } from '@dnd-kit/core';
+import { restrictToParentElement } from '@dnd-kit/modifiers';
+import { arrayMove, horizontalListSortingStrategy, SortableContext, useSortable, } from '@dnd-kit/sortable';
+import { CSS } from '@dnd-kit/utilities';
 function Option(props) {
     return React.createElement(components.Option, Object.assign({}, props), (props.selectProps.children && props.selectProps.children(props.data)) || (props.data.__isNew__ ? React.createElement(FormattedMessage, { id: "CREATE_VALUE", values: { text: props.children } }) : props.children));
 }
@@ -53,18 +51,26 @@ function MultiValueRemove(props) {
         React.createElement(components.MultiValueRemove, Object.assign({}, props)));
 }
 const Components = { Option, SingleValue, MultiValue, IndicatorsContainer, MultiValueRemove };
-const SortableMultiValue = SortableElement((props) => {
+const SortableMultiValue = (props) => {
     const onMouseDown = (e) => {
         e.preventDefault();
         e.stopPropagation();
     };
     const innerProps = Object.assign(Object.assign({}, props.innerProps), { onMouseDown });
-    return React.createElement(MultiValue, Object.assign({}, props, { innerProps: innerProps }));
-});
-const SortableMultiValueLabel = SortableHandle((props) => React.createElement(components.MultiValueLabel, Object.assign({}, props)));
-const SortableComponents = { Option, SingleValue, MultiValue: SortableMultiValue, MultiValueLabel: SortableMultiValueLabel, IndicatorsContainer, MultiValueRemove };
-const SortableSelect = SortableContainer(Select);
-const SortableCreateableSelect = SortableContainer(CreatableSelect);
+    const { attributes, listeners, setNodeRef, transform, transition } = useSortable({
+        id: props.data.id,
+    });
+    const style = {
+        transform: CSS.Transform.toString(transform),
+        transition,
+    };
+    return (React.createElement("div", Object.assign({ style: style, ref: setNodeRef }, attributes, listeners),
+        React.createElement(MultiValue, Object.assign({}, props, { innerProps: innerProps }))));
+};
+const SortableMultiValueRemove = (props) => {
+    return (React.createElement(MultiValueRemove, Object.assign({}, props, { innerProps: Object.assign({ onPointerDown: (e) => e.stopPropagation() }, props.innerProps) })));
+};
+const SortableComponents = { Option, SingleValue, MultiValue: SortableMultiValue, IndicatorsContainer, MultiValueRemove: SortableMultiValueRemove };
 export default function ApiSelect(props) {
     const { disabled, url, getOptionLabel, sortable, getOptionValue, idKey, nameKey, filter, group, onCreateOption, getNewOptionData, isMulti, onChange, value, placeholder, staticOptions } = props;
     const intl = useIntl();
@@ -104,13 +110,20 @@ export default function ApiSelect(props) {
     const onMenuClose = useCallback(function () {
         setIsMenuOpen(false);
     }, [setIsMenuOpen]);
-    const onSortEnd = useCallback(({ oldIndex, newIndex }) => {
+    const _getOptionValue = getOptionValue || ((row) => row[idKey || 'id']);
+    const onDragEnd = useCallback(({ active, over }) => {
+        if (!active || !over)
+            return;
+        const oldIndex = value.findIndex((item) => _getOptionValue(item) === active.id);
+        const newIndex = value.findIndex((item) => _getOptionValue(item) === over.id);
         const newValue = arrayMove(value, oldIndex, newIndex);
         onChange(newValue);
-    }, [value, onChange]);
-    const Component = (onCreateOption ? (sortable && isMulti ? SortableCreateableSelect : CreatableSelect) : (sortable && isMulti ? SortableSelect : Select));
-    return React.createElement(RefreshScope, { update: update },
-        React.createElement(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: (isMulti && sortable ? SortableComponents : 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, axis: "xy", onSortEnd: onSortEnd, distance: 4, getHelperDimensions: ({ node }) => node.getBoundingClientRect() })));
+    }, [_getOptionValue, value, onChange]);
+    const Component = (onCreateOption ? CreatableSelect : Select);
+    const useSort = isMulti && sortable;
+    const elem = React.createElement(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: (useSort ? SortableComponents : Components), isLoading: !!loading || creating, getOptionLabel: getOptionLabel || ((row) => row[nameKey || 'name']), getOptionValue: _getOptionValue, isDisabled: !!disabled || creating, isClearable: true, isSearchable: true, placeholder: placeholder || intl.formatMessage({ id: 'SELECT' }), options: !options ? [] : ((filter && options.filter(filter)) || options), onMenuOpen: onMenuOpen, onMenuClose: onMenuClose }));
+    return React.createElement(RefreshScope, { update: update }, useSort ? React.createElement(DndContext, { modifiers: [restrictToParentElement], onDragEnd: onDragEnd, collisionDetection: closestCenter },
+        React.createElement(SortableContext, { items: (value || []).map(_getOptionValue), strategy: horizontalListSortingStrategy }, elem)) : elem);
 }
 export function CreateSelect(props) {
     const { Component, onChange, value, isMulti, idKey } = props;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-admin-base-bootstrap",
-  "version": "0.9.7",
+  "version": "0.9.9",
   "description": "",
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1",
@@ -44,9 +44,12 @@
     "react-password-strength-bar": "^0.4.1",
     "react-responsive": "^9.0.2",
     "react-select": "^5.8.0",
-    "react-sortable-hoc": "1.9.1",
     "reactstrap": "^9.2.2",
-    "sweetalert2": "^11.10.4"
+    "sweetalert2": "^11.10.5",
+    "@dnd-kit/core": "^6.1.0",
+    "@dnd-kit/modifiers": "^7.0.0",
+    "@dnd-kit/sortable": "^8.0.0",
+    "@dnd-kit/utilities": "^3.2.2"
   },
   "devDependencies": {
     "nodemon": "^3.0.3",

package/src/Components/ApiSelect.tsx

@@ -5,23 +5,15 @@ import { FormattedMessage, useIntl } from 'react-intl';
 import Select, { components } from "react-select";
 import CreatableSelect from 'react-select/creatable';
 
+import { closestCenter, DndContext, DragEndEvent } from '@dnd-kit/core';
+import { restrictToParentElement } from '@dnd-kit/modifiers';
 import {
-  SortableContainer,
-  SortableElement,
-  SortEndHandler,
-  SortableHandle,
-} from 'react-sortable-hoc';
-
-function arrayMove<T>(array: readonly T[], from: number, to: number) {
-  const slicedArray = array.slice();
-  slicedArray.splice(
-    to < 0 ? array.length + to : to,
-    0,
-    slicedArray.splice(from, 1)[0]
-  );
-  return slicedArray;
-}
-
+  arrayMove,
+  horizontalListSortingStrategy,
+  SortableContext,
+  useSortable,
+} from '@dnd-kit/sortable';
+import { CSS } from '@dnd-kit/utilities';
 
 function Option(props) {
     return <components.Option {...props}>
@@ -91,25 +83,41 @@ function MultiValueRemove(props) {
 
 const Components = { Option, SingleValue, MultiValue, IndicatorsContainer, MultiValueRemove };
 
-const SortableMultiValue = SortableElement(
-  (props) => {
-    const onMouseDown = (e) => {
-      e.preventDefault();
-      e.stopPropagation();
-    };
-    const innerProps = { ...props.innerProps, onMouseDown };
-    return <MultiValue {...props} innerProps={innerProps} />;
-  }
-);
-
-const SortableMultiValueLabel = SortableHandle(
-  (props) => <components.MultiValueLabel {...props} />
-);
-
-const SortableComponents = { Option, SingleValue, MultiValue: SortableMultiValue, MultiValueLabel: SortableMultiValueLabel, IndicatorsContainer, MultiValueRemove };
+const SortableMultiValue = (props) => {
+  const onMouseDown = (e) => {
+    e.preventDefault();
+    e.stopPropagation();
+  };
+  const innerProps = { ...props.innerProps, onMouseDown };
+  const { attributes, listeners, setNodeRef, transform, transition } =
+    useSortable({
+      id: props.data.id,
+    });
+  const style = {
+    transform: CSS.Transform.toString(transform),
+    transition,
+  };
+
+  return (
+    <div style={style} ref={setNodeRef} {...attributes} {...listeners}>
+      <MultiValue {...props} innerProps={innerProps} />
+    </div>
+  );
+};
+
+const SortableMultiValueRemove = (props) => {
+  return (
+    <MultiValueRemove
+      {...props}
+      innerProps={{
+        onPointerDown: (e) => e.stopPropagation(),
+        ...props.innerProps,
+      }}
+    />
+  );
+};
 
-const SortableSelect = SortableContainer(Select);
-const SortableCreateableSelect = SortableContainer(CreatableSelect);
+const SortableComponents = { Option, SingleValue, MultiValue: SortableMultiValue, IndicatorsContainer, MultiValueRemove: SortableMultiValueRemove };
 
 export interface ApiSelectProps<Option = any> {
     url?: string;
@@ -173,39 +181,50 @@ export default function ApiSelect<Option = any>(props: ApiSelectProps<Option>) {
         setIsMenuOpen(false);
     }, [ setIsMenuOpen ]);
 
-    const onSortEnd: SortEndHandler = useCallback(({ oldIndex, newIndex }) => {
-        const newValue = arrayMove(value as any, oldIndex, newIndex);
-        onChange(newValue as any);
-    }, [ value, onChange ]);
-
-    const Component = (onCreateOption ? (sortable && isMulti ? SortableCreateableSelect : CreatableSelect) : (sortable && isMulti ? SortableSelect : Select)) as any;
+    const _getOptionValue = getOptionValue || ((row:any) => row[idKey || 'id']);
+
+    const onDragEnd = useCallback(({ active, over }) => {
+      if (!active || !over) return;
+
+      const oldIndex = (value as any).findIndex((item) => _getOptionValue(item) === active.id);
+      const newIndex = (value as any).findIndex((item) => _getOptionValue(item) === over.id);
+      const newValue = arrayMove(value as any, oldIndex, newIndex);
+      onChange(newValue as any);
+    }, [ _getOptionValue, value, onChange ]);
+
+    const Component = (onCreateOption ? CreatableSelect : Select);
+
+    const useSort = isMulti && sortable;
+    const elem = <Component
+        {...props}
+        className='react-select-container'
+        classNamePrefix="react-select"
+        onCreateOption={(onCreateOption && handleCreateOption) as any}
+        getNewOptionData={(onCreateOption && (getNewOptionData || ((inputValue) =>( { [nameKey || 'name']: inputValue, __isNew__: true })))) || undefined}
+        inputValue={search}
+        onInputChange={a => setSearch(a)}
+        components={(useSort ? SortableComponents : Components) as any}
+        isLoading={!!loading || creating}
+        getOptionLabel={getOptionLabel || ((row:any) => row[nameKey || 'name'])}
+        getOptionValue={_getOptionValue}
+        isDisabled={!!disabled || creating}
+        isClearable
+        isSearchable
+        placeholder={placeholder || intl.formatMessage({ id: 'SELECT' })}
+        options={!options ? [] : ((filter && options.filter(filter)) || options)}
+        onMenuOpen={onMenuOpen}
+        onMenuClose={onMenuClose}
+    />;
 
     return <RefreshScope update={update}>
-        <Component
-            {...props}
-            className='react-select-container'
-            classNamePrefix="react-select"
-            onCreateOption={(onCreateOption && handleCreateOption) as any}
-            getNewOptionData={(onCreateOption && (getNewOptionData || ((inputValue) =>( { [nameKey || 'name']: inputValue, __isNew__: true })))) || undefined}
-            inputValue={search}
-            onInputChange={a => setSearch(a)}
-            components={(isMulti && sortable ? SortableComponents : Components) as any}
-            isLoading={!!loading || creating}
-            getOptionLabel={getOptionLabel || ((row:any) => row[nameKey || 'name'])}
-            getOptionValue={getOptionValue || ((row:any) => row[idKey || 'id'])}
-            isDisabled={!!disabled || creating}
-            isClearable
-            isSearchable
-            placeholder={placeholder || intl.formatMessage({ id: 'SELECT' })}
-            options={!options ? [] : ((filter && options.filter(filter)) || options)}
-            onMenuOpen={onMenuOpen}
-            onMenuClose={onMenuClose}
-
-            axis="xy"
-            onSortEnd={onSortEnd}
-            distance={4}
-            getHelperDimensions={({ node }) => node.getBoundingClientRect()}
-        />
+        { useSort ? <DndContext modifiers={[restrictToParentElement]} onDragEnd={onDragEnd} collisionDetection={closestCenter}>
+              <SortableContext
+                items={((value || []) as any).map(_getOptionValue)}
+                strategy={horizontalListSortingStrategy}
+              >
+              {elem}
+             </SortableContext>
+          </DndContext> : elem }
     </RefreshScope>;
 }