react-admin-base-bootstrap 0.8.9 → 0.8.10

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

@@ -16,6 +16,11 @@ export interface ApiSelectProps<Option = any> {
     disabled?: boolean;
     placeholder?: string;
     staticOptions?: any[];
+    onAddOrEdit?: (item: any) => void;
     getNewOptionData?: (name: string, elem: React.ReactNode) => any | null;
 }
 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): jsx.JSX.Element;

package/lib/esm/Components/ApiSelect.js

@@ -9,8 +9,8 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
 };
 /** @jsx jsx */
 import { jsx } from '@emotion/react';
-import React, { useCallback, useMemo, useState } from 'react';
-import { useFetch } from 'react-admin-base';
+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';
@@ -21,7 +21,7 @@ function SingleValue(props) {
     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 EditOrAddIndicator(props) {
-    const { className, cx, getStyles, innerProps } = props;
+    const { className, cx, getStyles, innerProps, isMulti } = props;
     return (jsx("div", Object.assign({}, innerProps, { className: cx({
             indicator: true,
             'clear-indicator': true
@@ -30,7 +30,7 @@ function EditOrAddIndicator(props) {
             e.preventDefault();
             props.selectProps.onAddOrEdit();
         } }),
-        jsx("i", { className: "fas " + (props.hasValue ? 'fa-pencil-alt' : 'fa-plus') })));
+        jsx("i", { className: "fas " + (props.hasValue && !isMulti ? 'fa-pencil-alt' : 'fa-plus') })));
 }
 function IndicatorsContainer(props) {
     return jsx(components.IndicatorsContainer, Object.assign({}, props),
@@ -39,7 +39,13 @@ function IndicatorsContainer(props) {
             jsx(components.IndicatorSeparator, Object.assign({}, props))),
         props.children);
 }
-const Components = { Option, SingleValue, IndicatorsContainer };
+function MultiValueRemove(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, IndicatorsContainer, MultiValueRemove };
 export default function ApiSelect(props) {
     const { disabled, url, getOptionLabel, getOptionValue, idKey, nameKey, filter, group, onCreateOption, getNewOptionData, isMulti, onChange, value, placeholder, staticOptions } = props;
     const intl = useIntl();
@@ -47,7 +53,7 @@ export default function ApiSelect(props) {
     const params = useMemo(() => ({ query: search }), [search]);
     const [isMenuOpen, setIsMenuOpen] = useState(false);
     const [hasMenuOpen, setHasMenuOpen] = useState(false);
-    const [data, loading] = useFetch((hasMenuOpen && url) || false, params);
+    const [data, loading, error, update] = useFetch((isMenuOpen && url) || false, params);
     const [creating, setCreating] = useState(false);
     let options = staticOptions || (data && data.data) || data;
     if (group) {
@@ -80,5 +86,20 @@ export default function ApiSelect(props) {
         setIsMenuOpen(false);
     }, [setIsMenuOpen]);
     const Component = onCreateOption ? CreatableSelect : Select;
-    return 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: 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 }));
+    return jsx(RefreshScope, { update: update },
+        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: 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 })));
+}
+export function CreateSelect(props) {
+    const { Component, onChange, value, isMulti, idKey } = props;
+    const update = useRefresh();
+    const [isOpen, setIsOpen] = useState(false);
+    const isOpenId = isOpen && isOpen[idKey || "id"];
+    const onReload = useCallback(function (data) {
+        setIsOpen(false);
+        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 jsx(Fragment, null,
+        isOpen && jsx(Component, { id: isOpenId || (!isMulti && value && value["idKey"]), onReload: onReload }),
+        jsx(ApiSelect, Object.assign({}, props, { onAddOrEdit: item => setIsOpen(item || true) })));
 }

package/lib/esm/index.d.ts

@@ -5,7 +5,7 @@ import ExcelExportButton from './Components/ExcelExportButton';
 import ExternalLoginButton from './Components/ExternalLoginButton';
 import GoToTop from "./Components/GoToTop";
 import { ValidationErrors, Validator, ValueValidator } from "./Components/Validator";
-import ApiSelect from "./Components/ApiSelect";
+import ApiSelect, { CreateSelect } from "./Components/ApiSelect";
 import { Preview, Relative } from './Components/FilePickerCore';
 import ImagePicker from './Components/ImagePicker';
 import LoadingButton from './Components/LoadingButton';
@@ -23,4 +23,4 @@ import DefaultValidatorOptions from './Components/DefaultValidatorOptions';
 import DragAndDropArrow from './Components/DragAndDropArrow';
 import BootstrapOptionsProvider, { useBootstrapOptions } from './Components/BootstrapOptions';
 import BootstrapModal from './Components/BootstrapModal';
-export { ThemeProvider, useTheme, useAllThemes, useIsMobile, useMenuState, DefaultValidatorOptions, PasswordInput, StepList, StepItem, TopProgressBar, CRUD, ModalEntityEditor, CRUDActions, Relative, ApiSelect, Preview, ExcelExportButton, ExternalLoginButton, SingleFilePicker, MultiFilePicker, ImagePicker, BootstrapTable, EntityEditor, GoToTop, Validator, ValueValidator, ValidationErrors, LoadingButton, BootstrapDataTable, IdColumn, Column, ActionsColumn, Actions, useDataTableContext, RowRenderer, CustomRenderer, LanguageProvider, useLanguage, LanguageSwitcher, ErrorBoundary, CheckBox, DragAndDropArrow, useBootstrapOptions, BootstrapOptionsProvider, BootstrapModal };
+export { ThemeProvider, useTheme, useAllThemes, useIsMobile, useMenuState, DefaultValidatorOptions, PasswordInput, StepList, StepItem, TopProgressBar, CRUD, ModalEntityEditor, CRUDActions, Relative, ApiSelect, Preview, ExcelExportButton, ExternalLoginButton, SingleFilePicker, MultiFilePicker, ImagePicker, BootstrapTable, EntityEditor, GoToTop, Validator, ValueValidator, ValidationErrors, LoadingButton, BootstrapDataTable, IdColumn, Column, ActionsColumn, Actions, useDataTableContext, RowRenderer, CustomRenderer, LanguageProvider, useLanguage, LanguageSwitcher, ErrorBoundary, CheckBox, DragAndDropArrow, useBootstrapOptions, BootstrapOptionsProvider, BootstrapModal, CreateSelect };

package/lib/esm/index.js

@@ -5,7 +5,7 @@ import ExcelExportButton from './Components/ExcelExportButton';
 import ExternalLoginButton from './Components/ExternalLoginButton';
 import GoToTop from "./Components/GoToTop";
 import { ValidationErrors, Validator, ValueValidator } from "./Components/Validator";
-import ApiSelect from "./Components/ApiSelect";
+import ApiSelect, { CreateSelect } from "./Components/ApiSelect";
 import { Preview, Relative } from './Components/FilePickerCore';
 import ImagePicker from './Components/ImagePicker';
 import LoadingButton from './Components/LoadingButton';
@@ -23,4 +23,4 @@ import DefaultValidatorOptions from './Components/DefaultValidatorOptions';
 import DragAndDropArrow from './Components/DragAndDropArrow';
 import BootstrapOptionsProvider, { useBootstrapOptions } from './Components/BootstrapOptions';
 import BootstrapModal from './Components/BootstrapModal';
-export { ThemeProvider, useTheme, useAllThemes, useIsMobile, useMenuState, DefaultValidatorOptions, PasswordInput, StepList, StepItem, TopProgressBar, CRUD, ModalEntityEditor, CRUDActions, Relative, ApiSelect, Preview, ExcelExportButton, ExternalLoginButton, SingleFilePicker, MultiFilePicker, ImagePicker, BootstrapTable, EntityEditor, GoToTop, Validator, ValueValidator, ValidationErrors, LoadingButton, BootstrapDataTable, IdColumn, Column, ActionsColumn, Actions, useDataTableContext, RowRenderer, CustomRenderer, LanguageProvider, useLanguage, LanguageSwitcher, ErrorBoundary, CheckBox, DragAndDropArrow, useBootstrapOptions, BootstrapOptionsProvider, BootstrapModal };
+export { ThemeProvider, useTheme, useAllThemes, useIsMobile, useMenuState, DefaultValidatorOptions, PasswordInput, StepList, StepItem, TopProgressBar, CRUD, ModalEntityEditor, CRUDActions, Relative, ApiSelect, Preview, ExcelExportButton, ExternalLoginButton, SingleFilePicker, MultiFilePicker, ImagePicker, BootstrapTable, EntityEditor, GoToTop, Validator, ValueValidator, ValidationErrors, LoadingButton, BootstrapDataTable, IdColumn, Column, ActionsColumn, Actions, useDataTableContext, RowRenderer, CustomRenderer, LanguageProvider, useLanguage, LanguageSwitcher, ErrorBoundary, CheckBox, DragAndDropArrow, useBootstrapOptions, BootstrapOptionsProvider, BootstrapModal, CreateSelect };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-admin-base-bootstrap",
-  "version": "0.8.9",
+  "version": "0.8.10",
   "description": "",
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1",

package/src/Components/ApiSelect.tsx

@@ -1,7 +1,7 @@
 /** @jsx jsx */
 import { jsx } from '@emotion/react';
-import React, { useCallback, useMemo, useState } from 'react';
-import { useFetch } from 'react-admin-base';
+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';
@@ -25,8 +25,7 @@ function SingleValue(props) {
 }
 
 function EditOrAddIndicator(props) {
-    const { className, cx, getStyles, innerProps } = props;
-
+    const { className, cx, getStyles, innerProps, isMulti } = props;
     return (
       <div
         {...innerProps}
@@ -44,7 +43,7 @@ function EditOrAddIndicator(props) {
             props.selectProps.onAddOrEdit();
         }}
       >
-       <i className={"fas " + (props.hasValue ? 'fa-pencil-alt' : 'fa-plus')} />
+          <i className={"fas " + (props.hasValue && !isMulti ? 'fa-pencil-alt' : 'fa-plus')} />
       </div>);
 }
 
@@ -58,7 +57,16 @@ function IndicatorsContainer(props) {
     </components.IndicatorsContainer>;
 }
 
-const Components = { Option, SingleValue, IndicatorsContainer };
+function MultiValueRemove(props) {
+    return <Fragment>
+        { props.selectProps.onAddOrEdit && <components.MultiValueRemove {...props} innerProps={{ ...props.innerProps, onClick: () => props.selectProps.onAddOrEdit(props.data) }}>
+            <i className="fas fa-pencil" style={{ fontSize: '.75em' }} />
+        </components.MultiValueRemove> }
+        <components.MultiValueRemove {...props} />
+    </Fragment>;
+}
+
+const Components = { Option, SingleValue, IndicatorsContainer, MultiValueRemove };
 
 export interface ApiSelectProps<Option = any> {
     url?: string;
@@ -75,6 +83,7 @@ export interface ApiSelectProps<Option = any> {
     disabled?: boolean;
     placeholder?: string;
     staticOptions?: any[];
+    onAddOrEdit?: (item: any) => void;
     getNewOptionData?: (name: string, elem: React.ReactNode) => any|null;
 }
 
@@ -85,7 +94,7 @@ export default function ApiSelect<Option = any>(props: ApiSelectProps<Option>) {
     const params = useMemo(() => ({ query: search }), [search]);
     const [ isMenuOpen, setIsMenuOpen ] = useState(false);
     const [ hasMenuOpen, setHasMenuOpen ] = useState(false);
-    const [ data, loading ] = useFetch((hasMenuOpen && url) || false, params);
+    const [ data, loading, error, update ] = useFetch((isMenuOpen && url) || false, params);
     const [ creating, setCreating ] = useState(false);
 
     let options = staticOptions || (data && data.data) || data;
@@ -121,24 +130,49 @@ export default function ApiSelect<Option = any>(props: ApiSelectProps<Option>) {
 
     const Component = onCreateOption ? CreatableSelect : Select;
 
-    return <Component
-        {...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: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}
-    />;
+    return <RefreshScope update={update}>
+        <Component
+            {...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: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}
+        />
+    </RefreshScope>;
+}
+
+export interface CreateSelectProps<Option = any> extends ApiSelectProps<Option> {
+    Component: any;
+}
+
+export function CreateSelect(props: CreateSelectProps) {
+    const { Component, onChange, value, isMulti, idKey } = props;
+
+    const update = useRefresh();
+    const [ isOpen, setIsOpen ] = useState<any>(false);
+    const isOpenId = isOpen && isOpen[idKey || "id"];
+
+    const onReload = useCallback(function(data) {
+        setIsOpen(false);
+        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 <Fragment>
+        { isOpen && <Component id={isOpenId || (!isMulti && value && value["idKey"])} onReload={onReload} /> }
+        <ApiSelect {...props} onAddOrEdit={item => setIsOpen(item || true)} />
+    </Fragment>;
 }

package/src/index.ts

@@ -6,7 +6,7 @@ import ExcelExportButton from './Components/ExcelExportButton';
 import ExternalLoginButton from './Components/ExternalLoginButton';
 import GoToTop from "./Components/GoToTop";
 import { ValidationErrors, Validator, ValueValidator } from "./Components/Validator";
-import ApiSelect from "./Components/ApiSelect";
+import ApiSelect, { CreateSelect } from "./Components/ApiSelect";
 import { Preview, Relative } from './Components/FilePickerCore';
 import ImagePicker from './Components/ImagePicker';
 import LoadingButton from './Components/LoadingButton';
@@ -54,5 +54,6 @@ export {
     DragAndDropArrow,
     useBootstrapOptions,
     BootstrapOptionsProvider,
-    BootstrapModal
+    BootstrapModal,
+    CreateSelect
 };