react-admin-base-bootstrap 0.9.8 → 0.9.10

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

@@ -1,3 +1,5 @@
+/** @jsx jsx */
+import { jsx } from '@emotion/react';
 import React from 'react';
 export interface ApiSelectProps<Option = any> {
     url?: string;
@@ -18,8 +20,8 @@ export interface ApiSelectProps<Option = any> {
     onAddOrEdit?: (item: any) => void;
     getNewOptionData?: (name: string, elem: React.ReactNode) => any | null;
 }
-export default function ApiSelect<Option = any>(props: ApiSelectProps<Option>): React.JSX.Element;
+export default function ApiSelect<Option = any>(props: ApiSelectProps<Option>): jsx.JSX.Element;
 export interface CreateSelectProps<Option = any> extends ApiSelectProps<Option> {
     Component: any;
 }
-export declare function CreateSelect(props: CreateSelectProps): React.JSX.Element;
+export declare function CreateSelect(props: CreateSelectProps): jsx.JSX.Element;

package/lib/esm/Components/ApiSelect.js

@@ -7,29 +7,29 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
         step((generator = generator.apply(thisArg, _arguments || [])).next());
     });
 };
+/** @jsx jsx */
+import { jsx } from '@emotion/react';
 import React, { Fragment, useCallback, useMemo, useState } from 'react';
 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));
+    return jsx(components.Option, Object.assign({}, props), (props.selectProps.children && props.selectProps.children(props.data)) || (props.data.__isNew__ ? jsx(FormattedMessage, { id: "CREATE_VALUE", values: { text: props.children } }) : props.children));
 }
 function SingleValue(props) {
-    return React.createElement(components.SingleValue, 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));
+    return jsx(components.SingleValue, Object.assign({}, props), (props.selectProps.children && props.selectProps.children(props.data)) || (props.data.__isNew__ ? jsx(FormattedMessage, { id: "CREATE_VALUE", values: { text: props.children } }) : props.children));
 }
 function MultiValue(props) {
-    return React.createElement(components.MultiValue, Object.assign({}, props), (props.selectProps.children && props.selectProps.children(props.data)) || props.children);
+    return jsx(components.MultiValue, Object.assign({}, props), (props.selectProps.children && props.selectProps.children(props.data)) || props.children);
 }
 function EditOrAddIndicator(props) {
     const { className, cx, getStyles, innerProps, isMulti } = props;
-    return (React.createElement("div", Object.assign({}, innerProps, { className: cx({
+    return (jsx("div", Object.assign({}, innerProps, { className: cx({
             indicator: true,
             'clear-indicator': true
         }, className), css: getStyles('clearIndicator', props), onMouseDown: e => {
@@ -37,34 +37,42 @@ function EditOrAddIndicator(props) {
             e.preventDefault();
             props.selectProps.onAddOrEdit();
         } }),
-        React.createElement("i", { className: "fas " + (props.hasValue && !isMulti ? 'fa-pencil-alt' : 'fa-plus') })));
+        jsx("i", { className: "fas " + (props.hasValue && !isMulti ? 'fa-pencil-alt' : 'fa-plus') })));
 }
 function IndicatorsContainer(props) {
-    return React.createElement(components.IndicatorsContainer, Object.assign({}, props),
-        props.selectProps.onAddOrEdit && React.createElement(React.Fragment, null,
-            React.createElement(EditOrAddIndicator, Object.assign({}, props)),
-            React.createElement(components.IndicatorSeparator, Object.assign({}, props))),
+    return jsx(components.IndicatorsContainer, Object.assign({}, props),
+        props.selectProps.onAddOrEdit && jsx(React.Fragment, null,
+            jsx(EditOrAddIndicator, Object.assign({}, props)),
+            jsx(components.IndicatorSeparator, Object.assign({}, props))),
         props.children);
 }
 function MultiValueRemove(props) {
-    return React.createElement(Fragment, null,
-        props.selectProps.onAddOrEdit && React.createElement(components.MultiValueRemove, Object.assign({}, props, { innerProps: Object.assign(Object.assign({}, props.innerProps), { onClick: () => props.selectProps.onAddOrEdit(props.data) }) }),
-            React.createElement("i", { className: "fas fa-pencil", style: { fontSize: '.75em' } })),
-        React.createElement(components.MultiValueRemove, Object.assign({}, props)));
+    return jsx(Fragment, null,
+        props.selectProps.onAddOrEdit && jsx(components.MultiValueRemove, Object.assign({}, props, { innerProps: Object.assign(Object.assign({}, props.innerProps), { onClick: () => props.selectProps.onAddOrEdit(props.data) }) }),
+            jsx("i", { className: "fas fa-pencil", style: { fontSize: '.75em' } })),
+        jsx(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.selectProps.getOptionValue(props.data),
+    });
+    const style = {
+        transform: CSS.Transform.toString(transform),
+        transition,
+    };
+    return (jsx("div", Object.assign({ style: style, ref: setNodeRef }, attributes, listeners),
+        jsx(MultiValue, Object.assign({}, props, { innerProps: innerProps }))));
+};
+const SortableMultiValueRemove = (props) => {
+    return (jsx(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 +112,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, useDragHandle: true, axis: "xy", onSortEnd: onSortEnd, distance: 4, getHelperDimensions: ({ node }) => node.getBoundingClientRect() })));
+    }, [_getOptionValue, value, onChange]);
+    const Component = (onCreateOption ? CreatableSelect : Select);
+    const useSort = isMulti && sortable;
+    const elem = 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: (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 jsx(RefreshScope, { update: update }, useSort ? jsx(DndContext, { modifiers: [restrictToParentElement], onDragEnd: onDragEnd, collisionDetection: closestCenter },
+        jsx(SortableContext, { items: (value || []).map(_getOptionValue), strategy: horizontalListSortingStrategy }, elem)) : elem);
 }
 export function CreateSelect(props) {
     const { Component, onChange, value, isMulti, idKey } = props;
@@ -122,7 +137,7 @@ export function CreateSelect(props) {
         data && onChange(isMulti ? isOpenId ? value.map(b => b.id === isOpenId ? data : b) : (value || []).concat([data]) : data);
         update && update();
     }, [value, onChange, isMulti, isOpenId, isOpen, update, setIsOpen]);
-    return React.createElement(Fragment, null,
-        isOpen && React.createElement(Component, { id: isOpenId || (!isMulti && value && value[idKey || "id"]), onReload: onReload }),
-        React.createElement(ApiSelect, Object.assign({}, props, { onAddOrEdit: item => setIsOpen(item || true) })));
+    return jsx(Fragment, null,
+        isOpen && jsx(Component, { id: isOpenId || (!isMulti && value && value[idKey || "id"]), onReload: onReload }),
+        jsx(ApiSelect, Object.assign({}, props, { onAddOrEdit: item => setIsOpen(item || true) })));
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-admin-base-bootstrap",
-  "version": "0.9.8",
+  "version": "0.9.10",
   "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

@@ -1,3 +1,4 @@
+/** @jsx jsx */
 import { jsx } from '@emotion/react';
 import React, {Fragment, useCallback, useMemo, useState} from 'react';
 import {RefreshScope, useFetch, useRefresh} from 'react-admin-base';
@@ -5,23 +6,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 +84,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.selectProps.getOptionValue(props.data),
+    });
+  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,40 +182,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}
-
-            useDragHandle
-            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>;
 }