react-admin-base-bootstrap 0.9.9 → 0.9.11
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -18,8 +18,8 @@ export interface ApiSelectProps<Option = any> {
|
|
|
18
18
|
onAddOrEdit?: (item: any) => void;
|
|
19
19
|
getNewOptionData?: (name: string, elem: React.ReactNode) => any | null;
|
|
20
20
|
}
|
|
21
|
-
export default function ApiSelect<Option = any>(props: ApiSelectProps<Option>):
|
|
21
|
+
export default function ApiSelect<Option = any>(props: ApiSelectProps<Option>): import("@emotion/react/jsx-runtime").JSX.Element;
|
|
22
22
|
export interface CreateSelectProps<Option = any> extends ApiSelectProps<Option> {
|
|
23
23
|
Component: any;
|
|
24
24
|
}
|
|
25
|
-
export declare function CreateSelect(props: CreateSelectProps):
|
|
25
|
+
export declare function CreateSelect(props: CreateSelectProps): import("@emotion/react/jsx-runtime").JSX.Element;
|
|
@@ -7,6 +7,7 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
|
|
|
7
7
|
step((generator = generator.apply(thisArg, _arguments || [])).next());
|
|
8
8
|
});
|
|
9
9
|
};
|
|
10
|
+
import { jsx as _jsx, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
|
|
10
11
|
import React, { Fragment, useCallback, useMemo, useState } from 'react';
|
|
11
12
|
import { RefreshScope, useFetch, useRefresh } from 'react-admin-base';
|
|
12
13
|
import { FormattedMessage, useIntl } from 'react-intl';
|
|
@@ -17,38 +18,30 @@ import { restrictToParentElement } from '@dnd-kit/modifiers';
|
|
|
17
18
|
import { arrayMove, horizontalListSortingStrategy, SortableContext, useSortable, } from '@dnd-kit/sortable';
|
|
18
19
|
import { CSS } from '@dnd-kit/utilities';
|
|
19
20
|
function Option(props) {
|
|
20
|
-
return
|
|
21
|
+
return _jsx(components.Option, Object.assign({}, props, { children: (props.selectProps.children && props.selectProps.children(props.data)) || (props.data.__isNew__ ? _jsx(FormattedMessage, { id: "CREATE_VALUE", values: { text: props.children } }) : props.children) }));
|
|
21
22
|
}
|
|
22
23
|
function SingleValue(props) {
|
|
23
|
-
return
|
|
24
|
+
return _jsx(components.SingleValue, Object.assign({}, props, { children: (props.selectProps.children && props.selectProps.children(props.data)) || (props.data.__isNew__ ? _jsx(FormattedMessage, { id: "CREATE_VALUE", values: { text: props.children } }) : props.children) }));
|
|
24
25
|
}
|
|
25
26
|
function MultiValue(props) {
|
|
26
|
-
return
|
|
27
|
+
return _jsx(components.MultiValue, Object.assign({}, props, { children: (props.selectProps.children && props.selectProps.children(props.data)) || props.children }));
|
|
27
28
|
}
|
|
28
29
|
function EditOrAddIndicator(props) {
|
|
29
30
|
const { className, cx, getStyles, innerProps, isMulti } = props;
|
|
30
|
-
return (
|
|
31
|
+
return (_jsx("div", Object.assign({}, innerProps, { className: cx({
|
|
31
32
|
indicator: true,
|
|
32
33
|
'clear-indicator': true
|
|
33
34
|
}, className), css: getStyles('clearIndicator', props), onMouseDown: e => {
|
|
34
35
|
e.stopPropagation();
|
|
35
36
|
e.preventDefault();
|
|
36
37
|
props.selectProps.onAddOrEdit();
|
|
37
|
-
} })
|
|
38
|
-
React.createElement("i", { className: "fas " + (props.hasValue && !isMulti ? 'fa-pencil-alt' : 'fa-plus') })));
|
|
38
|
+
}, children: _jsx("i", { className: "fas " + (props.hasValue && !isMulti ? 'fa-pencil-alt' : 'fa-plus') }) })));
|
|
39
39
|
}
|
|
40
40
|
function IndicatorsContainer(props) {
|
|
41
|
-
return React.
|
|
42
|
-
props.selectProps.onAddOrEdit && React.createElement(React.Fragment, null,
|
|
43
|
-
React.createElement(EditOrAddIndicator, Object.assign({}, props)),
|
|
44
|
-
React.createElement(components.IndicatorSeparator, Object.assign({}, props))),
|
|
45
|
-
props.children);
|
|
41
|
+
return _jsxs(components.IndicatorsContainer, Object.assign({}, props, { children: [props.selectProps.onAddOrEdit && _jsxs(React.Fragment, { children: [_jsx(EditOrAddIndicator, Object.assign({}, props)), _jsx(components.IndicatorSeparator, Object.assign({}, props))] }), props.children] }));
|
|
46
42
|
}
|
|
47
43
|
function MultiValueRemove(props) {
|
|
48
|
-
return
|
|
49
|
-
props.selectProps.onAddOrEdit && React.createElement(components.MultiValueRemove, Object.assign({}, props, { innerProps: Object.assign(Object.assign({}, props.innerProps), { onClick: () => props.selectProps.onAddOrEdit(props.data) }) }),
|
|
50
|
-
React.createElement("i", { className: "fas fa-pencil", style: { fontSize: '.75em' } })),
|
|
51
|
-
React.createElement(components.MultiValueRemove, Object.assign({}, props)));
|
|
44
|
+
return _jsxs(Fragment, { children: [props.selectProps.onAddOrEdit && _jsx(components.MultiValueRemove, Object.assign({}, props, { innerProps: Object.assign(Object.assign({}, props.innerProps), { onClick: () => props.selectProps.onAddOrEdit(props.data) }), children: _jsx("i", { className: "fas fa-pencil", style: { fontSize: '.75em' } }) })), _jsx(components.MultiValueRemove, Object.assign({}, props))] });
|
|
52
45
|
}
|
|
53
46
|
const Components = { Option, SingleValue, MultiValue, IndicatorsContainer, MultiValueRemove };
|
|
54
47
|
const SortableMultiValue = (props) => {
|
|
@@ -58,17 +51,16 @@ const SortableMultiValue = (props) => {
|
|
|
58
51
|
};
|
|
59
52
|
const innerProps = Object.assign(Object.assign({}, props.innerProps), { onMouseDown });
|
|
60
53
|
const { attributes, listeners, setNodeRef, transform, transition } = useSortable({
|
|
61
|
-
id: props.data
|
|
54
|
+
id: props.selectProps.getOptionValue(props.data),
|
|
62
55
|
});
|
|
63
56
|
const style = {
|
|
64
57
|
transform: CSS.Transform.toString(transform),
|
|
65
58
|
transition,
|
|
66
59
|
};
|
|
67
|
-
return (
|
|
68
|
-
React.createElement(MultiValue, Object.assign({}, props, { innerProps: innerProps }))));
|
|
60
|
+
return (_jsx("div", Object.assign({ style: style, ref: setNodeRef }, attributes, listeners, { children: _jsx(MultiValue, Object.assign({}, props, { innerProps: innerProps })) })));
|
|
69
61
|
};
|
|
70
62
|
const SortableMultiValueRemove = (props) => {
|
|
71
|
-
return (
|
|
63
|
+
return (_jsx(MultiValueRemove, Object.assign({}, props, { innerProps: Object.assign({ onPointerDown: (e) => e.stopPropagation() }, props.innerProps) })));
|
|
72
64
|
};
|
|
73
65
|
const SortableComponents = { Option, SingleValue, MultiValue: SortableMultiValue, IndicatorsContainer, MultiValueRemove: SortableMultiValueRemove };
|
|
74
66
|
export default function ApiSelect(props) {
|
|
@@ -121,9 +113,8 @@ export default function ApiSelect(props) {
|
|
|
121
113
|
}, [_getOptionValue, value, onChange]);
|
|
122
114
|
const Component = (onCreateOption ? CreatableSelect : Select);
|
|
123
115
|
const useSort = isMulti && sortable;
|
|
124
|
-
const elem =
|
|
125
|
-
return
|
|
126
|
-
React.createElement(SortableContext, { items: (value || []).map(_getOptionValue), strategy: horizontalListSortingStrategy }, elem)) : elem);
|
|
116
|
+
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 }));
|
|
117
|
+
return _jsx(RefreshScope, { update: update, children: useSort ? _jsx(DndContext, { modifiers: [restrictToParentElement], onDragEnd: onDragEnd, collisionDetection: closestCenter, children: _jsx(SortableContext, { items: (value || []).map(_getOptionValue), strategy: horizontalListSortingStrategy, children: elem }) }) : elem });
|
|
127
118
|
}
|
|
128
119
|
export function CreateSelect(props) {
|
|
129
120
|
const { Component, onChange, value, isMulti, idKey } = props;
|
|
@@ -135,7 +126,5 @@ export function CreateSelect(props) {
|
|
|
135
126
|
data && onChange(isMulti ? isOpenId ? value.map(b => b.id === isOpenId ? data : b) : (value || []).concat([data]) : data);
|
|
136
127
|
update && update();
|
|
137
128
|
}, [value, onChange, isMulti, isOpenId, isOpen, update, setIsOpen]);
|
|
138
|
-
return
|
|
139
|
-
isOpen && React.createElement(Component, { id: isOpenId || (!isMulti && value && value[idKey || "id"]), onReload: onReload }),
|
|
140
|
-
React.createElement(ApiSelect, Object.assign({}, props, { onAddOrEdit: item => setIsOpen(item || true) })));
|
|
129
|
+
return _jsxs(Fragment, { children: [isOpen && _jsx(Component, { id: isOpenId || (!isMulti && value && value[idKey || "id"]), onReload: onReload }), _jsx(ApiSelect, Object.assign({}, props, { onAddOrEdit: item => setIsOpen(item || true) }))] });
|
|
141
130
|
}
|
package/package.json
CHANGED
|
@@ -1,4 +1,5 @@
|
|
|
1
|
-
|
|
1
|
+
/** @jsxImportSource @emotion/react */
|
|
2
|
+
import { css } from "@emotion/react"
|
|
2
3
|
import React, {Fragment, useCallback, useMemo, useState} from 'react';
|
|
3
4
|
import {RefreshScope, useFetch, useRefresh} from 'react-admin-base';
|
|
4
5
|
import { FormattedMessage, useIntl } from 'react-intl';
|
|
@@ -91,7 +92,7 @@ const SortableMultiValue = (props) => {
|
|
|
91
92
|
const innerProps = { ...props.innerProps, onMouseDown };
|
|
92
93
|
const { attributes, listeners, setNodeRef, transform, transition } =
|
|
93
94
|
useSortable({
|
|
94
|
-
id: props.data
|
|
95
|
+
id: props.selectProps.getOptionValue(props.data),
|
|
95
96
|
});
|
|
96
97
|
const style = {
|
|
97
98
|
transform: CSS.Transform.toString(transform),
|