react-admin-base-bootstrap 0.9.9 → 0.9.10
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.
|
@@ -1,3 +1,5 @@
|
|
|
1
|
+
/** @jsx jsx */
|
|
2
|
+
import { jsx } from '@emotion/react';
|
|
1
3
|
import React from 'react';
|
|
2
4
|
export interface ApiSelectProps<Option = any> {
|
|
3
5
|
url?: string;
|
|
@@ -18,8 +20,8 @@ export interface ApiSelectProps<Option = any> {
|
|
|
18
20
|
onAddOrEdit?: (item: any) => void;
|
|
19
21
|
getNewOptionData?: (name: string, elem: React.ReactNode) => any | null;
|
|
20
22
|
}
|
|
21
|
-
export default function ApiSelect<Option = any>(props: ApiSelectProps<Option>):
|
|
23
|
+
export default function ApiSelect<Option = any>(props: ApiSelectProps<Option>): jsx.JSX.Element;
|
|
22
24
|
export interface CreateSelectProps<Option = any> extends ApiSelectProps<Option> {
|
|
23
25
|
Component: any;
|
|
24
26
|
}
|
|
25
|
-
export declare function CreateSelect(props: CreateSelectProps):
|
|
27
|
+
export declare function CreateSelect(props: CreateSelectProps): jsx.JSX.Element;
|
|
@@ -7,6 +7,8 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
|
|
|
7
7
|
step((generator = generator.apply(thisArg, _arguments || [])).next());
|
|
8
8
|
});
|
|
9
9
|
};
|
|
10
|
+
/** @jsx jsx */
|
|
11
|
+
import { jsx } from '@emotion/react';
|
|
10
12
|
import React, { Fragment, useCallback, useMemo, useState } from 'react';
|
|
11
13
|
import { RefreshScope, useFetch, useRefresh } from 'react-admin-base';
|
|
12
14
|
import { FormattedMessage, useIntl } from 'react-intl';
|
|
@@ -17,17 +19,17 @@ import { restrictToParentElement } from '@dnd-kit/modifiers';
|
|
|
17
19
|
import { arrayMove, horizontalListSortingStrategy, SortableContext, useSortable, } from '@dnd-kit/sortable';
|
|
18
20
|
import { CSS } from '@dnd-kit/utilities';
|
|
19
21
|
function Option(props) {
|
|
20
|
-
return
|
|
22
|
+
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));
|
|
21
23
|
}
|
|
22
24
|
function SingleValue(props) {
|
|
23
|
-
return
|
|
25
|
+
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));
|
|
24
26
|
}
|
|
25
27
|
function MultiValue(props) {
|
|
26
|
-
return
|
|
28
|
+
return jsx(components.MultiValue, Object.assign({}, props), (props.selectProps.children && props.selectProps.children(props.data)) || props.children);
|
|
27
29
|
}
|
|
28
30
|
function EditOrAddIndicator(props) {
|
|
29
31
|
const { className, cx, getStyles, innerProps, isMulti } = props;
|
|
30
|
-
return (
|
|
32
|
+
return (jsx("div", Object.assign({}, innerProps, { className: cx({
|
|
31
33
|
indicator: true,
|
|
32
34
|
'clear-indicator': true
|
|
33
35
|
}, className), css: getStyles('clearIndicator', props), onMouseDown: e => {
|
|
@@ -35,20 +37,20 @@ function EditOrAddIndicator(props) {
|
|
|
35
37
|
e.preventDefault();
|
|
36
38
|
props.selectProps.onAddOrEdit();
|
|
37
39
|
} }),
|
|
38
|
-
|
|
40
|
+
jsx("i", { className: "fas " + (props.hasValue && !isMulti ? 'fa-pencil-alt' : 'fa-plus') })));
|
|
39
41
|
}
|
|
40
42
|
function IndicatorsContainer(props) {
|
|
41
|
-
return
|
|
42
|
-
props.selectProps.onAddOrEdit &&
|
|
43
|
-
|
|
44
|
-
|
|
43
|
+
return jsx(components.IndicatorsContainer, Object.assign({}, props),
|
|
44
|
+
props.selectProps.onAddOrEdit && jsx(React.Fragment, null,
|
|
45
|
+
jsx(EditOrAddIndicator, Object.assign({}, props)),
|
|
46
|
+
jsx(components.IndicatorSeparator, Object.assign({}, props))),
|
|
45
47
|
props.children);
|
|
46
48
|
}
|
|
47
49
|
function MultiValueRemove(props) {
|
|
48
|
-
return
|
|
49
|
-
props.selectProps.onAddOrEdit &&
|
|
50
|
-
|
|
51
|
-
|
|
50
|
+
return jsx(Fragment, null,
|
|
51
|
+
props.selectProps.onAddOrEdit && jsx(components.MultiValueRemove, Object.assign({}, props, { innerProps: Object.assign(Object.assign({}, props.innerProps), { onClick: () => props.selectProps.onAddOrEdit(props.data) }) }),
|
|
52
|
+
jsx("i", { className: "fas fa-pencil", style: { fontSize: '.75em' } })),
|
|
53
|
+
jsx(components.MultiValueRemove, Object.assign({}, props)));
|
|
52
54
|
}
|
|
53
55
|
const Components = { Option, SingleValue, MultiValue, IndicatorsContainer, MultiValueRemove };
|
|
54
56
|
const SortableMultiValue = (props) => {
|
|
@@ -58,17 +60,17 @@ const SortableMultiValue = (props) => {
|
|
|
58
60
|
};
|
|
59
61
|
const innerProps = Object.assign(Object.assign({}, props.innerProps), { onMouseDown });
|
|
60
62
|
const { attributes, listeners, setNodeRef, transform, transition } = useSortable({
|
|
61
|
-
id: props.data
|
|
63
|
+
id: props.selectProps.getOptionValue(props.data),
|
|
62
64
|
});
|
|
63
65
|
const style = {
|
|
64
66
|
transform: CSS.Transform.toString(transform),
|
|
65
67
|
transition,
|
|
66
68
|
};
|
|
67
|
-
return (
|
|
68
|
-
|
|
69
|
+
return (jsx("div", Object.assign({ style: style, ref: setNodeRef }, attributes, listeners),
|
|
70
|
+
jsx(MultiValue, Object.assign({}, props, { innerProps: innerProps }))));
|
|
69
71
|
};
|
|
70
72
|
const SortableMultiValueRemove = (props) => {
|
|
71
|
-
return (
|
|
73
|
+
return (jsx(MultiValueRemove, Object.assign({}, props, { innerProps: Object.assign({ onPointerDown: (e) => e.stopPropagation() }, props.innerProps) })));
|
|
72
74
|
};
|
|
73
75
|
const SortableComponents = { Option, SingleValue, MultiValue: SortableMultiValue, IndicatorsContainer, MultiValueRemove: SortableMultiValueRemove };
|
|
74
76
|
export default function ApiSelect(props) {
|
|
@@ -121,9 +123,9 @@ export default function ApiSelect(props) {
|
|
|
121
123
|
}, [_getOptionValue, value, onChange]);
|
|
122
124
|
const Component = (onCreateOption ? CreatableSelect : Select);
|
|
123
125
|
const useSort = isMulti && sortable;
|
|
124
|
-
const elem =
|
|
125
|
-
return
|
|
126
|
-
|
|
126
|
+
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 }));
|
|
127
|
+
return jsx(RefreshScope, { update: update }, useSort ? jsx(DndContext, { modifiers: [restrictToParentElement], onDragEnd: onDragEnd, collisionDetection: closestCenter },
|
|
128
|
+
jsx(SortableContext, { items: (value || []).map(_getOptionValue), strategy: horizontalListSortingStrategy }, elem)) : elem);
|
|
127
129
|
}
|
|
128
130
|
export function CreateSelect(props) {
|
|
129
131
|
const { Component, onChange, value, isMulti, idKey } = props;
|
|
@@ -135,7 +137,7 @@ export function CreateSelect(props) {
|
|
|
135
137
|
data && onChange(isMulti ? isOpenId ? value.map(b => b.id === isOpenId ? data : b) : (value || []).concat([data]) : data);
|
|
136
138
|
update && update();
|
|
137
139
|
}, [value, onChange, isMulti, isOpenId, isOpen, update, setIsOpen]);
|
|
138
|
-
return
|
|
139
|
-
isOpen &&
|
|
140
|
-
|
|
140
|
+
return jsx(Fragment, null,
|
|
141
|
+
isOpen && jsx(Component, { id: isOpenId || (!isMulti && value && value[idKey || "id"]), onReload: onReload }),
|
|
142
|
+
jsx(ApiSelect, Object.assign({}, props, { onAddOrEdit: item => setIsOpen(item || true) })));
|
|
141
143
|
}
|
package/package.json
CHANGED
|
@@ -1,3 +1,4 @@
|
|
|
1
|
+
/** @jsx jsx */
|
|
1
2
|
import { jsx } from '@emotion/react';
|
|
2
3
|
import React, {Fragment, useCallback, useMemo, useState} from 'react';
|
|
3
4
|
import {RefreshScope, useFetch, useRefresh} from 'react-admin-base';
|
|
@@ -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),
|