react-admin-base-bootstrap 0.9.10 → 0.9.12

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.
Files changed (7) hide show
  1. package/lib/esm/Components/ApiSelect.d.ts +2 -4
  2. package/lib/esm/Components/ApiSelect.js +13 -26
  3. package/lib/esm/Components/CRUD.d.ts +2 -1
  4. package/lib/esm/Components/CRUD.js +10 -8
  5. package/package.json +1 -1
  6. package/src/Components/ApiSelect.tsx +2 -2
  7. package/src/Components/CRUD.tsx +5 -3
package/lib/esm/Components/ApiSelect.d.ts CHANGED
@@ -1,5 +1,3 @@
1
- /** @jsx jsx */
2
- import { jsx } from '@emotion/react';
3
1
  import React from 'react';
4
2
  export interface ApiSelectProps<Option = any> {
5
3
  url?: string;
@@ -20,8 +18,8 @@ export interface ApiSelectProps<Option = any> {
20
18
  onAddOrEdit?: (item: any) => void;
21
19
  getNewOptionData?: (name: string, elem: React.ReactNode) => any | null;
22
20
  }
23
- export default function ApiSelect<Option = any>(props: ApiSelectProps<Option>): jsx.JSX.Element;
21
+ export default function ApiSelect<Option = any>(props: ApiSelectProps<Option>): import("@emotion/react/jsx-runtime").JSX.Element;
24
22
  export interface CreateSelectProps<Option = any> extends ApiSelectProps<Option> {
25
23
  Component: any;
26
24
  }
27
- export declare function CreateSelect(props: CreateSelectProps): jsx.JSX.Element;
25
+ export declare function CreateSelect(props: CreateSelectProps): import("@emotion/react/jsx-runtime").JSX.Element;
package/lib/esm/Components/ApiSelect.js CHANGED
@@ -7,8 +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
- /** @jsx jsx */
11
- import { jsx } from '@emotion/react';
10
+ import { jsx as _jsx, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
12
11
  import React, { Fragment, useCallback, useMemo, useState } from 'react';
13
12
  import { RefreshScope, useFetch, useRefresh } from 'react-admin-base';
14
13
  import { FormattedMessage, useIntl } from 'react-intl';
@@ -19,38 +18,30 @@ import { restrictToParentElement } from '@dnd-kit/modifiers';
19
18
  import { arrayMove, horizontalListSortingStrategy, SortableContext, useSortable, } from '@dnd-kit/sortable';
20
19
  import { CSS } from '@dnd-kit/utilities';
21
20
  function Option(props) {
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
+ 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) }));
23
22
  }
24
23
  function SingleValue(props) {
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
+ 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) }));
26
25
  }
27
26
  function MultiValue(props) {
28
- return jsx(components.MultiValue, Object.assign({}, props), (props.selectProps.children && props.selectProps.children(props.data)) || props.children);
27
+ return _jsx(components.MultiValue, Object.assign({}, props, { children: (props.selectProps.children && props.selectProps.children(props.data)) || props.children }));
29
28
  }
30
29
  function EditOrAddIndicator(props) {
31
30
  const { className, cx, getStyles, innerProps, isMulti } = props;
32
- return (jsx("div", Object.assign({}, innerProps, { className: cx({
31
+ return (_jsx("div", Object.assign({}, innerProps, { className: cx({
33
32
  indicator: true,
34
33
  'clear-indicator': true
35
34
  }, className), css: getStyles('clearIndicator', props), onMouseDown: e => {
36
35
  e.stopPropagation();
37
36
  e.preventDefault();
38
37
  props.selectProps.onAddOrEdit();
39
- } }),
40
- jsx("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') }) })));
41
39
  }
42
40
  function IndicatorsContainer(props) {
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))),
47
- 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] }));
48
42
  }
49
43
  function MultiValueRemove(props) {
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)));
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))] });
54
45
  }
55
46
  const Components = { Option, SingleValue, MultiValue, IndicatorsContainer, MultiValueRemove };
56
47
  const SortableMultiValue = (props) => {
@@ -66,11 +57,10 @@ const SortableMultiValue = (props) => {
66
57
  transform: CSS.Transform.toString(transform),
67
58
  transition,
68
59
  };
69
- return (jsx("div", Object.assign({ style: style, ref: setNodeRef }, attributes, listeners),
70
- jsx(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 })) })));
71
61
  };
72
62
  const SortableMultiValueRemove = (props) => {
73
- return (jsx(MultiValueRemove, Object.assign({}, props, { innerProps: Object.assign({ onPointerDown: (e) => e.stopPropagation() }, props.innerProps) })));
63
+ return (_jsx(MultiValueRemove, Object.assign({}, props, { innerProps: Object.assign({ onPointerDown: (e) => e.stopPropagation() }, props.innerProps) })));
74
64
  };
75
65
  const SortableComponents = { Option, SingleValue, MultiValue: SortableMultiValue, IndicatorsContainer, MultiValueRemove: SortableMultiValueRemove };
76
66
  export default function ApiSelect(props) {
@@ -123,9 +113,8 @@ export default function ApiSelect(props) {
123
113
  }, [_getOptionValue, value, onChange]);
124
114
  const Component = (onCreateOption ? CreatableSelect : Select);
125
115
  const useSort = isMulti && sortable;
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);
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 });
129
118
  }
130
119
  export function CreateSelect(props) {
131
120
  const { Component, onChange, value, isMulti, idKey } = props;
@@ -137,7 +126,5 @@ export function CreateSelect(props) {
137
126
  data && onChange(isMulti ? isOpenId ? value.map(b => b.id === isOpenId ? data : b) : (value || []).concat([data]) : data);
138
127
  update && update();
139
128
  }, [value, onChange, isMulti, isOpenId, isOpen, update, setIsOpen]);
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) })));
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) }))] });
143
130
  }
package/lib/esm/Components/CRUD.d.ts CHANGED
@@ -7,9 +7,10 @@ type ModalEntityEditorParams = {
7
7
  url?: string;
8
8
  onReload?: any;
9
9
  disabled?: Boolean;
10
+ beforeSave?: () => Promise<Boolean> | Boolean;
10
11
  children: React.ReactNode;
11
12
  };
12
- export declare function ModalEntityEditor({ entity, title, size, url, onReload, disabled, children }: ModalEntityEditorParams): React.JSX.Element;
13
+ export declare function ModalEntityEditor({ entity, title, size, url, onReload, disabled, beforeSave, children }: ModalEntityEditorParams): React.JSX.Element;
13
14
  type CrudActionProps = {
14
15
  id: any;
15
16
  edit?: Boolean;
package/lib/esm/Components/CRUD.js CHANGED
@@ -27,7 +27,7 @@ import LoadingButton from '../Components/LoadingButton';
27
27
  import BootstrapDataTable, { Actions } from './BootstrapDataTable';
28
28
  import BootstrapModal from './BootstrapModal';
29
29
  import { useBootstrapOptions } from "./BootstrapOptions";
30
- export function ModalEntityEditor({ entity, title, size, url, onReload, disabled, children }) {
30
+ export function ModalEntityEditor({ entity, title, size, url, onReload, disabled, beforeSave, children }) {
31
31
  const [data, , save, loading, dirty] = entity;
32
32
  const bsOptions = useBootstrapOptions();
33
33
  const [open, setOpen] = useState(true);
@@ -44,12 +44,14 @@ export function ModalEntityEditor({ entity, title, size, url, onReload, disabled
44
44
  setError(null);
45
45
  }
46
46
  try {
47
- let data = yield save();
48
- if (onReload) {
49
- yield onReload(data);
50
- }
51
- if (url) {
52
- setSaved(true);
47
+ if (!beforeSave || (yield beforeSave())) {
48
+ let data = yield save();
49
+ if (onReload) {
50
+ yield onReload(data);
51
+ }
52
+ if (url) {
53
+ setSaved(true);
54
+ }
53
55
  }
54
56
  }
55
57
  catch (e) {
@@ -59,7 +61,7 @@ export function ModalEntityEditor({ entity, title, size, url, onReload, disabled
59
61
  finally {
60
62
  }
61
63
  });
62
- }, [save, saved, error, onReload, url]);
64
+ }, [save, saved, error, onReload, url, beforeSave]);
63
65
  const check = bsOptions.noCloseOnSave && dirty;
64
66
  const intl = useIntl();
65
67
  const checkConfirmText = intl.formatMessage({ id: 'CANCEL_ENTITY_SAVE' });
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "react-admin-base-bootstrap",
3
- "version": "0.9.10",
3
+ "version": "0.9.12",
4
4
  "description": "",
5
5
  "scripts": {
6
6
  "test": "echo \"Error: no test specified\" && exit 1",
package/src/Components/ApiSelect.tsx CHANGED
@@ -1,5 +1,5 @@
1
- /** @jsx jsx */
2
- import { jsx } from '@emotion/react';
1
+ /** @jsxImportSource @emotion/react */
2
+ import { css } from "@emotion/react"
3
3
  import React, {Fragment, useCallback, useMemo, useState} from 'react';
4
4
  import {RefreshScope, useFetch, useRefresh} from 'react-admin-base';
5
5
  import { FormattedMessage, useIntl } from 'react-intl';
package/src/Components/CRUD.tsx CHANGED
@@ -15,10 +15,11 @@ type ModalEntityEditorParams = {
15
15
  url?: string;
16
16
  onReload?: any;
17
17
  disabled?: Boolean;
18
+ beforeSave?: () => Promise<Boolean> | Boolean;
18
19
  children: React.ReactNode;
19
20
  }
20
21
 
21
- export function ModalEntityEditor({ entity, title, size, url, onReload, disabled, children } : ModalEntityEditorParams) {
22
+ export function ModalEntityEditor({ entity, title, size, url, onReload, disabled, beforeSave, children } : ModalEntityEditorParams) {
22
23
  const [ data, , save, loading, dirty ] = entity;
23
24
  const bsOptions = useBootstrapOptions();
24
25
 
@@ -30,7 +31,6 @@ export function ModalEntityEditor({ entity, title, size, url, onReload, disabled
30
31
  e.stopPropagation();
31
32
  e.preventDefault();
32
33
 
33
-
34
34
  if (saved) {
35
35
  setSaved(false);
36
36
  }
@@ -40,6 +40,7 @@ export function ModalEntityEditor({ entity, title, size, url, onReload, disabled
40
40
  }
41
41
 
42
42
  try {
43
+ if (!beforeSave || await beforeSave()) {
43
44
  let data = await save();
44
45
  if (onReload) {
45
46
  await onReload(data);
@@ -48,6 +49,7 @@ export function ModalEntityEditor({ entity, title, size, url, onReload, disabled
48
49
  if (url) {
49
50
  setSaved(true);
50
51
  }
52
+ }
51
53
  } catch(e) {
52
54
  console.error(e);
53
55
  setError((e.response && e.response.data && e.response.data.message) || (error.data && error.data.message) || e.data || e.message || e);
@@ -56,7 +58,7 @@ export function ModalEntityEditor({ entity, title, size, url, onReload, disabled
56
58
  {
57
59
 
58
60
  }
59
- }, [save, saved, error, onReload, url]);
61
+ }, [save, saved, error, onReload, url, beforeSave]);
60
62
 
61
63
  const check = bsOptions.noCloseOnSave && dirty;
62
64
  const intl = useIntl();