react-admin-base-bootstrap 0.9.4 → 0.9.6

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

@@ -14,6 +14,7 @@ export interface ApiSelectProps<Option = any> {
     disabled?: boolean;
     placeholder?: string;
     staticOptions?: any[];
+    sortable?: boolean;
     onAddOrEdit?: (item: any) => void;
     getNewOptionData?: (name: string, elem: React.ReactNode) => any | null;
 }

package/lib/esm/Components/ApiSelect.js

@@ -12,6 +12,12 @@ 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;
+}
 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));
 }
@@ -47,8 +53,20 @@ function MultiValueRemove(props) {
         React.createElement(components.MultiValueRemove, Object.assign({}, props)));
 }
 const Components = { Option, SingleValue, MultiValue, IndicatorsContainer, MultiValueRemove };
+const SortableMultiValue = SortableElement((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);
 export default function ApiSelect(props) {
-    const { disabled, url, getOptionLabel, getOptionValue, idKey, nameKey, filter, group, onCreateOption, getNewOptionData, isMulti, onChange, value, placeholder, staticOptions } = props;
+    const { disabled, url, getOptionLabel, sortable, getOptionValue, idKey, nameKey, filter, group, onCreateOption, getNewOptionData, isMulti, onChange, value, placeholder, staticOptions } = props;
     const intl = useIntl();
     const [search, setSearch] = useState('');
     const params = useMemo(() => ({ query: search }), [search]);
@@ -86,9 +104,13 @@ export default function ApiSelect(props) {
     const onMenuClose = useCallback(function () {
         setIsMenuOpen(false);
     }, [setIsMenuOpen]);
-    const Component = onCreateOption ? CreatableSelect : Select;
+    const onSortEnd = useCallback(({ oldIndex, newIndex }) => {
+        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: 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 })));
+        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() })));
 }
 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.4",
+  "version": "0.9.6",
   "description": "",
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1",
@@ -44,6 +44,7 @@
     "react-password-strength-bar": "^0.4.1",
     "react-responsive": "^9.0.2",
     "react-select": "^5.8.0",
+    "react-sortable-hoc": "1.11.0",
     "reactstrap": "^9.2.2",
     "sweetalert2": "^11.10.4"
   },

package/src/Components/ApiSelect.tsx

@@ -5,6 +5,24 @@ import { FormattedMessage, useIntl } from 'react-intl';
 import Select, { components } from "react-select";
 import CreatableSelect from 'react-select/creatable';
 
+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;
+}
+
+
 function Option(props) {
     return <components.Option {...props}>
         { (props.selectProps.children && props.selectProps.children(props.data)) || (props.data.__isNew__ ? <FormattedMessage
@@ -42,7 +60,7 @@ function EditOrAddIndicator(props) {
           className
         )}
         css={getStyles('clearIndicator', props)}
-        onMouseDown={e => { 
+        onMouseDown={e => {
             e.stopPropagation();
             e.preventDefault();
             props.selectProps.onAddOrEdit();
@@ -73,6 +91,26 @@ 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 SortableSelect = SortableContainer(Select);
+const SortableCreateableSelect = SortableContainer(CreatableSelect);
+
 export interface ApiSelectProps<Option = any> {
     url?: string;
     value: Option|Option[];
@@ -88,12 +126,14 @@ export interface ApiSelectProps<Option = any> {
     disabled?: boolean;
     placeholder?: string;
     staticOptions?: any[];
+    sortable?: boolean;
     onAddOrEdit?: (item: any) => void;
     getNewOptionData?: (name: string, elem: React.ReactNode) => any|null;
 }
 
+
 export default function ApiSelect<Option = any>(props: ApiSelectProps<Option>) {
-    const { disabled, url, getOptionLabel, getOptionValue, idKey, nameKey, filter, group, onCreateOption, getNewOptionData, isMulti, onChange, value, placeholder, staticOptions } = props;
+    const { disabled, url, getOptionLabel, sortable, getOptionValue, idKey, nameKey, filter, group, onCreateOption, getNewOptionData, isMulti, onChange, value, placeholder, staticOptions } = props;
     const intl = useIntl();
     const [ search, setSearch ] = useState('');
     const params = useMemo(() => ({ query: search }), [search]);
@@ -133,18 +173,23 @@ export default function ApiSelect<Option = any>(props: ApiSelectProps<Option>) {
         setIsMenuOpen(false);
     }, [ setIsMenuOpen ]);
 
-    const Component = onCreateOption ? CreatableSelect : Select;
+    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;
 
     return <RefreshScope update={update}>
         <Component
             {...props}
             className='react-select-container'
             classNamePrefix="react-select"
-            onCreateOption={onCreateOption && handleCreateOption}
+            onCreateOption={(onCreateOption && handleCreateOption) as any}
             getNewOptionData={(onCreateOption && (getNewOptionData || ((inputValue) =>( { [nameKey || 'name']: inputValue, __isNew__: true })))) || undefined}
             inputValue={search}
             onInputChange={a => setSearch(a)}
-            components={Components}
+            components={(isMulti && sortable ? SortableComponents : Components) as any}
             isLoading={!!loading || creating}
             getOptionLabel={getOptionLabel || ((row:any) => row[nameKey || 'name'])}
             getOptionValue={getOptionValue || ((row:any) => row[idKey || 'id'])}
@@ -155,6 +200,11 @@ export default function ApiSelect<Option = any>(props: ApiSelectProps<Option>) {
             options={!options ? [] : ((filter && options.filter(filter)) || options)}
             onMenuOpen={onMenuOpen}
             onMenuClose={onMenuClose}
+
+            axis="xy"
+            onSortEnd={onSortEnd}
+            distance={4}
+            getHelperDimensions={({ node }) => node.getBoundingClientRect()}
         />
     </RefreshScope>;
 }