@pega/cosmos-react-build 3.0.0-dev.19.0 → 3.0.0-dev.20.0
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.
- package/lib/components/ObjectSelect/ObjectPicker.d.ts +6 -3
- package/lib/components/ObjectSelect/ObjectPicker.d.ts.map +1 -1
- package/lib/components/ObjectSelect/ObjectPicker.js +10 -3
- package/lib/components/ObjectSelect/ObjectPicker.js.map +1 -1
- package/lib/components/ObjectSelect/ObjectSelect.d.ts +7 -37
- package/lib/components/ObjectSelect/ObjectSelect.d.ts.map +1 -1
- package/lib/components/ObjectSelect/ObjectSelect.js +19 -60
- package/lib/components/ObjectSelect/ObjectSelect.js.map +1 -1
- package/lib/components/ObjectSelect/useCreateModal.d.ts +34 -0
- package/lib/components/ObjectSelect/useCreateModal.d.ts.map +1 -0
- package/lib/components/ObjectSelect/useCreateModal.js +61 -0
- package/lib/components/ObjectSelect/useCreateModal.js.map +1 -0
- package/package.json +3 -3
|
@@ -1,10 +1,13 @@
|
|
|
1
|
-
import { FunctionComponent } from 'react';
|
|
2
|
-
import { BaseProps, MenuProps, MenuItemProps, ComboBoxProps, NoChildrenProp } from '@pega/cosmos-react-core';
|
|
1
|
+
import { FunctionComponent, MouseEventHandler } from 'react';
|
|
2
|
+
import { BaseProps, MenuProps, MenuItemProps, ComboBoxProps, NoChildrenProp, ButtonProps } from '@pega/cosmos-react-core';
|
|
3
3
|
export interface ObjectPickerProps extends BaseProps, NoChildrenProp, Pick<ComboBoxProps, 'id' | 'label' | 'labelHidden' | 'required' | 'disabled' | 'readOnly' | 'name' | 'status' | 'info' | 'placeholder'> {
|
|
4
4
|
items: MenuProps['items'];
|
|
5
5
|
loading: MenuProps['loading'];
|
|
6
6
|
onSelect: MenuItemProps['onClick'];
|
|
7
|
-
|
|
7
|
+
createProps?: {
|
|
8
|
+
onClick?: MouseEventHandler<HTMLButtonElement>;
|
|
9
|
+
href?: ButtonProps['href'];
|
|
10
|
+
};
|
|
8
11
|
ref?: ComboBoxProps['ref'];
|
|
9
12
|
}
|
|
10
13
|
declare const ObjectPicker: FunctionComponent<ObjectPickerProps>;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ObjectPicker.d.ts","sourceRoot":"","sources":["../../../src/components/ObjectSelect/ObjectPicker.tsx"],"names":[],"mappings":"AAAA,OAAO,
|
|
1
|
+
{"version":3,"file":"ObjectPicker.d.ts","sourceRoot":"","sources":["../../../src/components/ObjectSelect/ObjectPicker.tsx"],"names":[],"mappings":"AAAA,OAAO,EAKL,iBAAiB,EACjB,iBAAiB,EAClB,MAAM,OAAO,CAAC;AAEf,OAAO,EACL,SAAS,EAGT,SAAS,EACT,aAAa,EAEb,aAAa,EACb,cAAc,EAMd,WAAW,EAEZ,MAAM,yBAAyB,CAAC;AAMjC,MAAM,WAAW,iBACf,SAAQ,SAAS,EACf,cAAc,EACd,IAAI,CACF,aAAa,EACX,IAAI,GACJ,OAAO,GACP,aAAa,GACb,UAAU,GACV,UAAU,GACV,UAAU,GACV,MAAM,GACN,QAAQ,GACR,MAAM,GACN,aAAa,CAChB;IACH,KAAK,EAAE,SAAS,CAAC,OAAO,CAAC,CAAC;IAC1B,OAAO,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAC9B,QAAQ,EAAE,aAAa,CAAC,SAAS,CAAC,CAAC;IACnC,WAAW,CAAC,EAAE;QAAE,OAAO,CAAC,EAAE,iBAAiB,CAAC,iBAAiB,CAAC,CAAC;QAAC,IAAI,CAAC,EAAE,WAAW,CAAC,MAAM,CAAC,CAAA;KAAE,CAAC;IAC7F,GAAG,CAAC,EAAE,aAAa,CAAC,KAAK,CAAC,CAAC;CAC5B;AAED,QAAA,MAAM,YAAY,EAAE,iBAAiB,CAAC,iBAAiB,CAwDtD,CAAC;AAEF,eAAe,YAAY,CAAC"}
|
|
@@ -1,7 +1,10 @@
|
|
|
1
1
|
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
2
|
import { forwardRef, useState, useMemo } from 'react';
|
|
3
|
-
import { ComboBox, menuHelpers, createStringMatcher, Flex, Button, Icon, useI18n, useConsolidatedRef } from '@pega/cosmos-react-core';
|
|
4
|
-
|
|
3
|
+
import { ComboBox, menuHelpers, createStringMatcher, Flex, Button, Icon, useI18n, useConsolidatedRef, registerIcon } from '@pega/cosmos-react-core';
|
|
4
|
+
import * as openIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/open.icon';
|
|
5
|
+
import * as plusIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/plus.icon';
|
|
6
|
+
registerIcon(openIcon, plusIcon);
|
|
7
|
+
const ObjectPicker = forwardRef(({ items, onSelect, createProps, loading, ...restProps }, ref) => {
|
|
5
8
|
const [filterValue, setFilterValue] = useState('');
|
|
6
9
|
const filterRegex = filterValue ? createStringMatcher(filterValue) : undefined;
|
|
7
10
|
const t = useI18n();
|
|
@@ -22,7 +25,11 @@ const ObjectPicker = forwardRef(({ items, onSelect, onCreateNew, loading, ...res
|
|
|
22
25
|
onItemClick: onSelect,
|
|
23
26
|
accent: filterRegex,
|
|
24
27
|
loading,
|
|
25
|
-
footer:
|
|
28
|
+
footer: createProps ? (_jsx(Flex, { container: { justify: 'start' }, children: _jsxs(Button, { type: 'button', variant: 'simple', onClick: createProps.onClick, ...(createProps.href && {
|
|
29
|
+
href: createProps.href,
|
|
30
|
+
target: '_blank',
|
|
31
|
+
'aria-label': t('create_in_new_tab')
|
|
32
|
+
}), children: [_jsx(Icon, { name: 'plus' }), t('create_new'), createProps.href && _jsx(Icon, { name: 'open' })] }) })) : undefined
|
|
26
33
|
} }));
|
|
27
34
|
});
|
|
28
35
|
export default ObjectPicker;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ObjectPicker.js","sourceRoot":"","sources":["../../../src/components/ObjectSelect/ObjectPicker.tsx"],"names":[],"mappings":";AAAA,OAAO,
|
|
1
|
+
{"version":3,"file":"ObjectPicker.js","sourceRoot":"","sources":["../../../src/components/ObjectSelect/ObjectPicker.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n forwardRef,\n useState,\n useMemo,\n ChangeEvent,\n FunctionComponent,\n MouseEventHandler\n} from 'react';\n\nimport {\n BaseProps,\n ComboBox,\n menuHelpers,\n MenuProps,\n MenuItemProps,\n createStringMatcher,\n ComboBoxProps,\n NoChildrenProp,\n Flex,\n Button,\n Icon,\n useI18n,\n useConsolidatedRef,\n ButtonProps,\n registerIcon\n} from '@pega/cosmos-react-core';\nimport * as openIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/open.icon';\nimport * as plusIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/plus.icon';\n\nregisterIcon(openIcon, plusIcon);\n\nexport interface ObjectPickerProps\n extends BaseProps,\n NoChildrenProp,\n Pick<\n ComboBoxProps,\n | 'id'\n | 'label'\n | 'labelHidden'\n | 'required'\n | 'disabled'\n | 'readOnly'\n | 'name'\n | 'status'\n | 'info'\n | 'placeholder'\n > {\n items: MenuProps['items'];\n loading: MenuProps['loading'];\n onSelect: MenuItemProps['onClick'];\n createProps?: { onClick?: MouseEventHandler<HTMLButtonElement>; href?: ButtonProps['href'] };\n ref?: ComboBoxProps['ref'];\n}\n\nconst ObjectPicker: FunctionComponent<ObjectPickerProps> = forwardRef(\n ({ items, onSelect, createProps, loading, ...restProps }, ref: ObjectPickerProps['ref']) => {\n const [filterValue, setFilterValue] = useState('');\n const filterRegex = filterValue ? createStringMatcher(filterValue) : undefined;\n\n const t = useI18n();\n const comboboxRef = useConsolidatedRef(ref);\n\n const itemsToRender = useMemo(() => {\n const newItems = filterValue\n ? menuHelpers.flatten(items).filter(({ primary }: MenuItemProps) => {\n return filterRegex?.test(primary);\n })\n : items;\n\n return menuHelpers.mapTree(newItems, item => ({\n ...item,\n selected: item.items ? undefined : !!item.selected\n }));\n }, [filterValue, items]);\n\n return (\n <ComboBox\n {...restProps}\n ref={comboboxRef}\n mode='single-select'\n value={filterValue}\n onChange={(e: ChangeEvent<HTMLInputElement>) => setFilterValue(e.target.value)}\n onBlur={() => setFilterValue('')}\n menu={{\n items: itemsToRender,\n onItemClick: onSelect,\n accent: filterRegex,\n loading,\n footer: createProps ? (\n <Flex container={{ justify: 'start' }}>\n <Button\n type='button'\n variant='simple'\n onClick={createProps.onClick}\n {...(createProps.href && {\n href: createProps.href,\n target: '_blank',\n 'aria-label': t('create_in_new_tab')\n })}\n >\n <Icon name='plus' />\n {t('create_new')}\n {createProps.href && <Icon name='open' />}\n </Button>\n </Flex>\n ) : undefined\n }}\n />\n );\n }\n);\n\nexport default ObjectPicker;\n"]}
|
|
@@ -1,7 +1,8 @@
|
|
|
1
|
-
import {
|
|
2
|
-
import { BaseProps, FormControlProps, MenuItemProps, NoChildrenProp, MenuProps,
|
|
1
|
+
import { Ref } from 'react';
|
|
2
|
+
import { BaseProps, FormControlProps, MenuItemProps, NoChildrenProp, MenuProps, ForwardProps } from '@pega/cosmos-react-core';
|
|
3
3
|
import { ObjectPickerProps } from './ObjectPicker';
|
|
4
4
|
import { ObjectSummaryProps } from './ObjectSummary';
|
|
5
|
+
import { CreateModalActionProps, UseCreateModalConfig } from './useCreateModal';
|
|
5
6
|
export interface ObjectSelectProps<P extends object = object> extends BaseProps, NoChildrenProp, Omit<FormControlProps, 'value'> {
|
|
6
7
|
/** An array of MenuItemProps to be shown in the ObjectPicker menu. */
|
|
7
8
|
items: MenuProps['items'];
|
|
@@ -19,41 +20,10 @@ export interface ObjectSelectProps<P extends object = object> extends BaseProps,
|
|
|
19
20
|
}) => void;
|
|
20
21
|
/** Callback fired on click of the link inside summary item */
|
|
21
22
|
onLinkClick?: ObjectSummaryProps['onLinkClick'];
|
|
22
|
-
/** New object creation form options
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
/**
|
|
27
|
-
* Called when a user submits a form.
|
|
28
|
-
*/
|
|
29
|
-
onSubmit: ({ close }: {
|
|
30
|
-
close: () => void;
|
|
31
|
-
}) => void;
|
|
32
|
-
/**
|
|
33
|
-
* Called when a user cancels a form.
|
|
34
|
-
*/
|
|
35
|
-
onDismiss: ({ close }: {
|
|
36
|
-
close: () => void;
|
|
37
|
-
}) => void;
|
|
38
|
-
/**
|
|
39
|
-
* Called before the modal opens.
|
|
40
|
-
*/
|
|
41
|
-
onBeforeOpen?: ModalProps['onBeforeOpen'];
|
|
42
|
-
/**
|
|
43
|
-
* Called after the modal closes.
|
|
44
|
-
*/
|
|
45
|
-
onAfterClose?: ModalProps['onAfterClose'];
|
|
46
|
-
} & (Record<string, never> extends P ? {
|
|
47
|
-
/**
|
|
48
|
-
* A props object that will be passed to the form renderer.
|
|
49
|
-
*/
|
|
50
|
-
rendererProps?: DeferInfer<P>;
|
|
51
|
-
} : {
|
|
52
|
-
/**
|
|
53
|
-
* A props object that will be passed to the form renderer.
|
|
54
|
-
*/
|
|
55
|
-
rendererProps: DeferInfer<P>;
|
|
56
|
-
});
|
|
23
|
+
/** New object creation form options or a link */
|
|
24
|
+
createConfiguration?: (UseCreateModalConfig<P> & CreateModalActionProps<P>) | {
|
|
25
|
+
href: string;
|
|
26
|
+
};
|
|
57
27
|
/** Ref placed on the element. */
|
|
58
28
|
ref?: Ref<HTMLDivElement>;
|
|
59
29
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ObjectSelect.d.ts","sourceRoot":"","sources":["../../../src/components/ObjectSelect/ObjectSelect.tsx"],"names":[],"mappings":"AAAA,OAAO,
|
|
1
|
+
{"version":3,"file":"ObjectSelect.d.ts","sourceRoot":"","sources":["../../../src/components/ObjectSelect/ObjectSelect.tsx"],"names":[],"mappings":"AAAA,OAAO,EAA+B,GAAG,EAA+B,MAAM,OAAO,CAAC;AAEtF,OAAO,EACL,SAAS,EACT,gBAAgB,EAChB,aAAa,EACb,cAAc,EACd,SAAS,EACT,YAAY,EAGb,MAAM,yBAAyB,CAAC;AAEjC,OAAqB,EAAE,iBAAiB,EAAE,MAAM,gBAAgB,CAAC;AACjE,OAAsB,EAAE,kBAAkB,EAAE,MAAM,iBAAiB,CAAC;AACpE,OAAuB,EAAE,sBAAsB,EAAE,oBAAoB,EAAE,MAAM,kBAAkB,CAAC;AAEhG,MAAM,WAAW,iBAAiB,CAAC,CAAC,SAAS,MAAM,GAAG,MAAM,CAC1D,SAAQ,SAAS,EACf,cAAc,EACd,IAAI,CAAC,gBAAgB,EAAE,OAAO,CAAC;IACjC,sEAAsE;IACtE,KAAK,EAAE,SAAS,CAAC,OAAO,CAAC,CAAC;IAC1B,yDAAyD;IACzD,OAAO,CAAC,EAAE,iBAAiB,CAAC,SAAS,CAAC,CAAC;IACvC,sCAAsC;IACtC,KAAK,CAAC,EAAE,kBAAkB,CAAC,OAAO,CAAC,CAAC;IACpC,sCAAsC;IACtC,aAAa,CAAC,EAAE,kBAAkB,CAAC,eAAe,CAAC,CAAC;IACpD,oFAAoF;IACpF,QAAQ,EAAE,aAAa,CAAC,SAAS,CAAC,CAAC;IACnC,4EAA4E;IAC5E,SAAS,CAAC,EAAE,CAAC,EAAE,EAAE,aAAa,CAAC,IAAI,CAAC,EAAE,CAAC,EAAE;QAAE,IAAI,EAAE,MAAM,CAAA;KAAE,KAAK,IAAI,CAAC;IACnE,8DAA8D;IAC9D,WAAW,CAAC,EAAE,kBAAkB,CAAC,aAAa,CAAC,CAAC;IAChD,iDAAiD;IACjD,mBAAmB,CAAC,EAAE,CAAC,oBAAoB,CAAC,CAAC,CAAC,GAAG,sBAAsB,CAAC,CAAC,CAAC,CAAC,GAAG;QAAE,IAAI,EAAE,MAAM,CAAA;KAAE,CAAC;IAC/F,iCAAiC;IACjC,GAAG,CAAC,EAAE,GAAG,CAAC,cAAc,CAAC,CAAC;CAC3B;AAED,QAAA,MAAM,YAAY,6EAmF8D,WAAW,GAAG,IAAI,CAAC;AAEnG,eAAe,YAAY,CAAC"}
|
|
@@ -1,82 +1,41 @@
|
|
|
1
|
-
import { jsx as _jsx
|
|
2
|
-
import { forwardRef,
|
|
3
|
-
import {
|
|
1
|
+
import { jsx as _jsx } from "react/jsx-runtime";
|
|
2
|
+
import { forwardRef, useEffect, useRef, useState } from 'react';
|
|
3
|
+
import { useAfterInitialEffect, hasProp } from '@pega/cosmos-react-core';
|
|
4
4
|
import ObjectPicker from './ObjectPicker';
|
|
5
5
|
import ObjectSummary from './ObjectSummary';
|
|
6
|
-
|
|
7
|
-
|
|
6
|
+
import useCreateModal from './useCreateModal';
|
|
7
|
+
const ObjectSelect = forwardRef(({ items, value, configuration, disabled, onChange, onPreview, onLinkClick, loading, createConfiguration, ...restProps }, ref) => {
|
|
8
8
|
const [mode, setMode] = useState(value ? 'summary' : 'picker');
|
|
9
9
|
const objectPickerRef = useRef(null);
|
|
10
10
|
const objectSummaryRef = useRef(null);
|
|
11
|
+
const isCreateModalConfig = createConfiguration && hasProp(createConfiguration, 'renderer');
|
|
11
12
|
useAfterInitialEffect(() => {
|
|
12
13
|
const element = mode === 'summary'
|
|
13
14
|
? objectSummaryRef.current?.querySelector('a')
|
|
14
15
|
: objectPickerRef.current?.querySelector('input');
|
|
15
16
|
element?.focus();
|
|
16
17
|
}, [mode]);
|
|
17
|
-
const
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
progressMsgRef.current = t('loading');
|
|
24
|
-
};
|
|
25
|
-
let modalContent = null;
|
|
26
|
-
if (mode === 'create' && form && !form.loading) {
|
|
27
|
-
modalContent = _jsx(form.renderer, { ...form.rendererProps });
|
|
28
|
-
}
|
|
29
|
-
let formActions = null;
|
|
30
|
-
if (mode === 'create' && (!form?.loading || progressMsgRef.current === t('submitting'))) {
|
|
31
|
-
const close = () => {
|
|
32
|
-
if (mode === 'create') {
|
|
33
|
-
modalMethods.current?.dismiss();
|
|
34
|
-
}
|
|
35
|
-
else {
|
|
36
|
-
closeModal();
|
|
18
|
+
const { renderModal } = useCreateModal(isCreateModalConfig
|
|
19
|
+
? {
|
|
20
|
+
...createConfiguration,
|
|
21
|
+
onAfterClose: () => {
|
|
22
|
+
createConfiguration.onAfterClose?.();
|
|
23
|
+
setMode('summary');
|
|
37
24
|
}
|
|
38
|
-
};
|
|
39
|
-
formActions = (_jsxs(_Fragment, { children: [_jsx(Button, { disabled: form?.loading, onClick: () => {
|
|
40
|
-
form?.onDismiss?.({ close });
|
|
41
|
-
}, children: t('cancel') }), _jsx(Button, { disabled: form?.loading, type: 'submit', variant: 'primary', onClick: () => {
|
|
42
|
-
progressMsgRef.current = t('submitting');
|
|
43
|
-
form?.onSubmit?.({ close });
|
|
44
|
-
}, children: t('submit') })] }));
|
|
45
|
-
}
|
|
46
|
-
useEffect(() => {
|
|
47
|
-
if (mode !== 'create') {
|
|
48
|
-
modalMethods.current = undefined;
|
|
49
|
-
return;
|
|
50
25
|
}
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
onRequestDismiss: form?.loading && progressMsgRef.current === t('submitting') ? () => false : undefined
|
|
56
|
-
};
|
|
57
|
-
if (modalMethods.current) {
|
|
58
|
-
modalMethods.current.update(modalProps);
|
|
59
|
-
}
|
|
60
|
-
else {
|
|
61
|
-
modalMethods.current = createModal(Modal, {
|
|
62
|
-
...modalProps,
|
|
63
|
-
heading: t('create_new'),
|
|
64
|
-
onBeforeOpen: form?.onBeforeOpen,
|
|
65
|
-
onAfterClose: () => {
|
|
66
|
-
form?.onAfterClose?.();
|
|
67
|
-
progressMsgRef.current = t('loading');
|
|
68
|
-
setMode('summary');
|
|
69
|
-
}
|
|
70
|
-
});
|
|
26
|
+
: undefined);
|
|
27
|
+
useEffect(() => {
|
|
28
|
+
if (mode === 'create' && isCreateModalConfig) {
|
|
29
|
+
renderModal(createConfiguration);
|
|
71
30
|
}
|
|
72
|
-
}, [mode,
|
|
31
|
+
}, [mode, createConfiguration]);
|
|
73
32
|
return (_jsx("div", { ref: ref, children: value ? (_jsx(ObjectSummary, { ...restProps, value: value, disabled: disabled, onDelete: e => {
|
|
74
33
|
setMode('picker');
|
|
75
34
|
onChange?.('', e);
|
|
76
|
-
}, ref: objectSummaryRef, configuration: configuration, onPreview: e => onPreview?.(value.id, e), onLinkClick: onLinkClick })) : (_jsx(ObjectPicker, {
|
|
35
|
+
}, ref: objectSummaryRef, configuration: configuration, onPreview: e => onPreview?.(value.id, e), onLinkClick: onLinkClick })) : (_jsx(ObjectPicker, { ...restProps, loading: loading, disabled: disabled, ref: objectPickerRef, items: items, onSelect: (id, e) => {
|
|
77
36
|
setMode('summary');
|
|
78
37
|
onChange?.(id, e);
|
|
79
|
-
} })) }));
|
|
38
|
+
}, createProps: isCreateModalConfig ? { onClick: () => setMode('create') } : createConfiguration })) }));
|
|
80
39
|
});
|
|
81
40
|
export default ObjectSelect;
|
|
82
41
|
//# sourceMappingURL=ObjectSelect.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ObjectSelect.js","sourceRoot":"","sources":["../../../src/components/ObjectSelect/ObjectSelect.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n ComponentType,\n forwardRef,\n PropsWithoutRef,\n ReactNode,\n Ref,\n useContext,\n useEffect,\n useRef,\n useState\n} from 'react';\n\nimport {\n BaseProps,\n FormControlProps,\n MenuItemProps,\n NoChildrenProp,\n MenuProps,\n DeferInfer,\n ModalProps,\n useI18n,\n Button,\n Modal,\n ModalManagerContext,\n ModalMethods,\n OmitStrict,\n ForwardProps,\n useAfterInitialEffect\n} from '@pega/cosmos-react-core';\n\nimport ObjectPicker, { ObjectPickerProps } from './ObjectPicker';\nimport ObjectSummary, { ObjectSummaryProps } from './ObjectSummary';\n\nexport interface ObjectSelectProps<P extends object = object>\n extends BaseProps,\n NoChildrenProp,\n Omit<FormControlProps, 'value'> {\n /** An array of MenuItemProps to be shown in the ObjectPicker menu. */\n items: MenuProps['items'];\n /** Boolean to trigger loading state for combobox menu */\n loading?: ObjectPickerProps['loading'];\n /** The value for the ObjectSummary */\n value?: ObjectSummaryProps['value'];\n /** Props for configuration popover */\n configuration?: ObjectSummaryProps['configuration'];\n /** Callback fired when a new item is selected and on clearing the selected item. */\n onChange: MenuItemProps['onClick'];\n /** Callback fired when the preview in the ObjectSummary link is clicked. */\n onPreview?: (id: MenuItemProps['id'], e: { href: string }) => void;\n /** Callback fired on click of the link inside summary item */\n onLinkClick?: ObjectSummaryProps['onLinkClick'];\n /** New object creation form options. */\n form?: {\n /* Indicates the form is in a loading state either initially or after add is submitted. */\n loading?: boolean;\n /*\n * A component to render the add new form.\n */\n renderer: ComponentType<P>;\n /**\n * Called when a user submits a form.\n */\n onSubmit: ({ close }: { close: () => void }) => void;\n /**\n * Called when a user cancels a form.\n */\n onDismiss: ({ close }: { close: () => void }) => void;\n /**\n * Called before the modal opens.\n */\n onBeforeOpen?: ModalProps['onBeforeOpen'];\n /**\n * Called after the modal closes.\n */\n onAfterClose?: ModalProps['onAfterClose'];\n } & (Record<string, never> extends P\n ? {\n /**\n * A props object that will be passed to the form renderer.\n */\n rendererProps?: DeferInfer<P>;\n }\n : {\n /**\n * A props object that will be passed to the form renderer.\n */\n rendererProps: DeferInfer<P>;\n });\n /** Ref placed on the element. */\n ref?: Ref<HTMLDivElement>;\n}\n\nconst ObjectSelect = forwardRef(\n <P extends object = object>(\n {\n items,\n value,\n configuration,\n disabled,\n onChange,\n onPreview,\n onLinkClick,\n loading,\n form,\n ...restProps\n }: PropsWithoutRef<ObjectSelectProps<P>> & ForwardProps,\n ref: ObjectSelectProps['ref']\n ) => {\n const t = useI18n();\n\n const [mode, setMode] = useState<'picker' | 'summary' | 'create'>(value ? 'summary' : 'picker');\n const objectPickerRef = useRef<HTMLDivElement>(null);\n const objectSummaryRef = useRef<HTMLDivElement>(null);\n\n useAfterInitialEffect(() => {\n const element =\n mode === 'summary'\n ? objectSummaryRef.current?.querySelector('a')\n : objectPickerRef.current?.querySelector('input');\n element?.focus();\n }, [mode]);\n\n const progressMsgRef = useRef(t('loading'));\n const modalMethods = useRef<ModalMethods>();\n const { create: createModal } = useContext(ModalManagerContext);\n\n const closeModal = () => {\n if (form?.loading && progressMsgRef.current === t('submitting')) return;\n progressMsgRef.current = t('loading');\n };\n\n let modalContent: ReactNode = null;\n if (mode === 'create' && form && !form.loading) {\n modalContent = <form.renderer {...(form.rendererProps as P)} />;\n }\n\n let formActions: ReactNode = null;\n if (mode === 'create' && (!form?.loading || progressMsgRef.current === t('submitting'))) {\n const close = () => {\n if (mode === 'create') {\n modalMethods.current?.dismiss();\n } else {\n closeModal();\n }\n };\n\n formActions = (\n <>\n <Button\n disabled={form?.loading}\n onClick={() => {\n form?.onDismiss?.({ close });\n }}\n >\n {t('cancel')}\n </Button>\n <Button\n disabled={form?.loading}\n type='submit'\n variant='primary'\n onClick={() => {\n progressMsgRef.current = t('submitting');\n form?.onSubmit?.({ close });\n }}\n >\n {t('submit')}\n </Button>\n </>\n );\n }\n\n useEffect(() => {\n if (mode !== 'create') {\n modalMethods.current = undefined;\n return;\n }\n\n const modalProps: OmitStrict<ModalProps, 'heading'> = {\n progress: form?.loading ? { message: progressMsgRef.current } : undefined,\n children: modalContent,\n actions: formActions,\n onRequestDismiss:\n form?.loading && progressMsgRef.current === t('submitting') ? () => false : undefined\n };\n\n if (modalMethods.current) {\n modalMethods.current.update(modalProps);\n } else {\n modalMethods.current = createModal(Modal, {\n ...modalProps,\n heading: t('create_new'),\n onBeforeOpen: form?.onBeforeOpen,\n onAfterClose: () => {\n form?.onAfterClose?.();\n progressMsgRef.current = t('loading');\n setMode('summary');\n }\n });\n }\n }, [mode, modalContent, form?.loading, formActions]);\n\n return (\n <div ref={ref}>\n {value ? (\n <ObjectSummary\n {...restProps}\n value={value}\n disabled={disabled}\n onDelete={e => {\n setMode('picker');\n onChange?.('', e);\n }}\n ref={objectSummaryRef}\n configuration={configuration}\n onPreview={e => onPreview?.(value.id, e)}\n onLinkClick={onLinkClick}\n />\n ) : (\n <ObjectPicker\n onCreateNew={form ? () => setMode('create') : undefined}\n {...restProps}\n loading={loading}\n disabled={disabled}\n ref={objectPickerRef}\n items={items}\n onSelect={(id, e) => {\n setMode('summary');\n onChange?.(id, e);\n }}\n />\n )}\n </div>\n );\n }\n) as <P extends object = object>(props: ObjectSelectProps<P> & ForwardProps) => JSX.Element | null;\n\nexport default ObjectSelect;\n"]}
|
|
1
|
+
{"version":3,"file":"ObjectSelect.js","sourceRoot":"","sources":["../../../src/components/ObjectSelect/ObjectSelect.tsx"],"names":[],"mappings":"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","sourcesContent":["import { forwardRef, PropsWithoutRef, Ref, useEffect, useRef, useState } from 'react';\n\nimport {\n BaseProps,\n FormControlProps,\n MenuItemProps,\n NoChildrenProp,\n MenuProps,\n ForwardProps,\n useAfterInitialEffect,\n hasProp\n} from '@pega/cosmos-react-core';\n\nimport ObjectPicker, { ObjectPickerProps } from './ObjectPicker';\nimport ObjectSummary, { ObjectSummaryProps } from './ObjectSummary';\nimport useCreateModal, { CreateModalActionProps, UseCreateModalConfig } from './useCreateModal';\n\nexport interface ObjectSelectProps<P extends object = object>\n extends BaseProps,\n NoChildrenProp,\n Omit<FormControlProps, 'value'> {\n /** An array of MenuItemProps to be shown in the ObjectPicker menu. */\n items: MenuProps['items'];\n /** Boolean to trigger loading state for combobox menu */\n loading?: ObjectPickerProps['loading'];\n /** The value for the ObjectSummary */\n value?: ObjectSummaryProps['value'];\n /** Props for configuration popover */\n configuration?: ObjectSummaryProps['configuration'];\n /** Callback fired when a new item is selected and on clearing the selected item. */\n onChange: MenuItemProps['onClick'];\n /** Callback fired when the preview in the ObjectSummary link is clicked. */\n onPreview?: (id: MenuItemProps['id'], e: { href: string }) => void;\n /** Callback fired on click of the link inside summary item */\n onLinkClick?: ObjectSummaryProps['onLinkClick'];\n /** New object creation form options or a link */\n createConfiguration?: (UseCreateModalConfig<P> & CreateModalActionProps<P>) | { href: string };\n /** Ref placed on the element. */\n ref?: Ref<HTMLDivElement>;\n}\n\nconst ObjectSelect = forwardRef(\n <P extends object = object>(\n {\n items,\n value,\n configuration,\n disabled,\n onChange,\n onPreview,\n onLinkClick,\n loading,\n createConfiguration,\n ...restProps\n }: PropsWithoutRef<ObjectSelectProps<P>> & ForwardProps,\n ref: ObjectSelectProps['ref']\n ) => {\n const [mode, setMode] = useState<'picker' | 'summary' | 'create'>(value ? 'summary' : 'picker');\n const objectPickerRef = useRef<HTMLDivElement>(null);\n const objectSummaryRef = useRef<HTMLDivElement>(null);\n\n const isCreateModalConfig = createConfiguration && hasProp(createConfiguration, 'renderer');\n\n useAfterInitialEffect(() => {\n const element =\n mode === 'summary'\n ? objectSummaryRef.current?.querySelector('a')\n : objectPickerRef.current?.querySelector('input');\n element?.focus();\n }, [mode]);\n\n const { renderModal } = useCreateModal(\n isCreateModalConfig\n ? {\n ...createConfiguration,\n onAfterClose: () => {\n createConfiguration.onAfterClose?.();\n setMode('summary');\n }\n }\n : undefined\n );\n\n useEffect(() => {\n if (mode === 'create' && isCreateModalConfig) {\n renderModal(createConfiguration);\n }\n }, [mode, createConfiguration]);\n\n return (\n <div ref={ref}>\n {value ? (\n <ObjectSummary\n {...restProps}\n value={value}\n disabled={disabled}\n onDelete={e => {\n setMode('picker');\n onChange?.('', e);\n }}\n ref={objectSummaryRef}\n configuration={configuration}\n onPreview={e => onPreview?.(value.id, e)}\n onLinkClick={onLinkClick}\n />\n ) : (\n <ObjectPicker\n {...restProps}\n loading={loading}\n disabled={disabled}\n ref={objectPickerRef}\n items={items}\n onSelect={(id, e) => {\n setMode('summary');\n onChange?.(id, e);\n }}\n createProps={\n isCreateModalConfig ? { onClick: () => setMode('create') } : createConfiguration\n }\n />\n )}\n </div>\n );\n }\n) as <P extends object = object>(props: ObjectSelectProps<P> & ForwardProps) => JSX.Element | null;\n\nexport default ObjectSelect;\n"]}
|
|
@@ -0,0 +1,34 @@
|
|
|
1
|
+
import { ComponentType } from 'react';
|
|
2
|
+
import { ModalProps } from '@pega/cosmos-react-core';
|
|
3
|
+
export interface UseCreateModalConfig<P extends object = object> {
|
|
4
|
+
renderer: ComponentType<P>;
|
|
5
|
+
/**
|
|
6
|
+
* Called when a user submits a form.
|
|
7
|
+
*/
|
|
8
|
+
onSubmit: ({ close }: {
|
|
9
|
+
close: () => void;
|
|
10
|
+
}) => void;
|
|
11
|
+
/**
|
|
12
|
+
* Called when a user cancels a form.
|
|
13
|
+
*/
|
|
14
|
+
onDismiss: ({ close }: {
|
|
15
|
+
close: () => void;
|
|
16
|
+
}) => void;
|
|
17
|
+
/**
|
|
18
|
+
* Called before the modal opens.
|
|
19
|
+
*/
|
|
20
|
+
onBeforeOpen?: ModalProps['onBeforeOpen'];
|
|
21
|
+
/**
|
|
22
|
+
* Called after the modal closes.
|
|
23
|
+
*/
|
|
24
|
+
onAfterClose?: ModalProps['onAfterClose'];
|
|
25
|
+
}
|
|
26
|
+
export interface CreateModalActionProps<P extends object = object> {
|
|
27
|
+
loading?: boolean;
|
|
28
|
+
rendererProps: P;
|
|
29
|
+
}
|
|
30
|
+
declare const useCreateModal: <P extends object = object>(config: UseCreateModalConfig<P> | undefined) => {
|
|
31
|
+
renderModal: ({ rendererProps, loading }: CreateModalActionProps<P>) => void;
|
|
32
|
+
};
|
|
33
|
+
export default useCreateModal;
|
|
34
|
+
//# sourceMappingURL=useCreateModal.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"useCreateModal.d.ts","sourceRoot":"","sources":["../../../src/components/ObjectSelect/useCreateModal.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAiC,aAAa,EAAE,MAAM,OAAO,CAAC;AAErE,OAAO,EAKL,UAAU,EAGX,MAAM,yBAAyB,CAAC;AAEjC,MAAM,WAAW,oBAAoB,CAAC,CAAC,SAAS,MAAM,GAAG,MAAM;IAI7D,QAAQ,EAAE,aAAa,CAAC,CAAC,CAAC,CAAC;IAC3B;;OAEG;IACH,QAAQ,EAAE,CAAC,EAAE,KAAK,EAAE,EAAE;QAAE,KAAK,EAAE,MAAM,IAAI,CAAA;KAAE,KAAK,IAAI,CAAC;IACrD;;OAEG;IACH,SAAS,EAAE,CAAC,EAAE,KAAK,EAAE,EAAE;QAAE,KAAK,EAAE,MAAM,IAAI,CAAA;KAAE,KAAK,IAAI,CAAC;IACtD;;OAEG;IACH,YAAY,CAAC,EAAE,UAAU,CAAC,cAAc,CAAC,CAAC;IAC1C;;OAEG;IACH,YAAY,CAAC,EAAE,UAAU,CAAC,cAAc,CAAC,CAAC;CAC3C;AAED,MAAM,WAAW,sBAAsB,CAAC,CAAC,SAAS,MAAM,GAAG,MAAM;IAC/D,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,aAAa,EAAE,CAAC,CAAC;CAClB;AAED,QAAA,MAAM,cAAc;;CAgFnB,CAAC;AAEF,eAAe,cAAc,CAAC"}
|
|
@@ -0,0 +1,61 @@
|
|
|
1
|
+
import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
|
+
import { useRef, useContext } from 'react';
|
|
3
|
+
import { ModalManagerContext, Button, Modal, useI18n } from '@pega/cosmos-react-core';
|
|
4
|
+
const useCreateModal = (config) => {
|
|
5
|
+
const t = useI18n();
|
|
6
|
+
const submittingRef = useRef(false);
|
|
7
|
+
const modalMethods = useRef();
|
|
8
|
+
const { create: createModal } = useContext(ModalManagerContext);
|
|
9
|
+
if (config) {
|
|
10
|
+
const { renderer: Renderer, onSubmit, onDismiss, onBeforeOpen, onAfterClose } = config;
|
|
11
|
+
const renderModal = ({ rendererProps, loading = false }) => {
|
|
12
|
+
let modalContent = null;
|
|
13
|
+
if (!loading) {
|
|
14
|
+
modalContent = _jsx(Renderer, { ...rendererProps });
|
|
15
|
+
}
|
|
16
|
+
let formActions = null;
|
|
17
|
+
if (!loading || submittingRef.current) {
|
|
18
|
+
const close = () => {
|
|
19
|
+
modalMethods.current?.dismiss();
|
|
20
|
+
modalMethods.current = undefined;
|
|
21
|
+
};
|
|
22
|
+
formActions = (_jsxs(_Fragment, { children: [_jsx(Button, { disabled: loading, onClick: () => {
|
|
23
|
+
onDismiss({ close });
|
|
24
|
+
}, children: t('cancel') }), _jsx(Button, { disabled: loading, type: 'submit', variant: 'primary', onClick: () => {
|
|
25
|
+
submittingRef.current = true;
|
|
26
|
+
onSubmit({ close });
|
|
27
|
+
}, children: t('submit') })] }));
|
|
28
|
+
}
|
|
29
|
+
const modalProps = {
|
|
30
|
+
progress: loading
|
|
31
|
+
? { message: submittingRef.current ? t('submitting') : t('loading') }
|
|
32
|
+
: undefined,
|
|
33
|
+
children: modalContent,
|
|
34
|
+
actions: formActions,
|
|
35
|
+
onRequestDismiss: loading && submittingRef.current ? () => false : undefined
|
|
36
|
+
};
|
|
37
|
+
if (modalMethods.current) {
|
|
38
|
+
modalMethods.current.update(modalProps);
|
|
39
|
+
}
|
|
40
|
+
else {
|
|
41
|
+
modalMethods.current = createModal(Modal, {
|
|
42
|
+
...modalProps,
|
|
43
|
+
heading: t('create_new'),
|
|
44
|
+
onBeforeOpen,
|
|
45
|
+
onAfterClose: () => {
|
|
46
|
+
onAfterClose?.();
|
|
47
|
+
submittingRef.current = false;
|
|
48
|
+
}
|
|
49
|
+
});
|
|
50
|
+
}
|
|
51
|
+
};
|
|
52
|
+
return {
|
|
53
|
+
renderModal
|
|
54
|
+
};
|
|
55
|
+
}
|
|
56
|
+
return {
|
|
57
|
+
renderModal: () => { }
|
|
58
|
+
};
|
|
59
|
+
};
|
|
60
|
+
export default useCreateModal;
|
|
61
|
+
//# sourceMappingURL=useCreateModal.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"useCreateModal.js","sourceRoot":"","sources":["../../../src/components/ObjectSelect/useCreateModal.tsx"],"names":[],"mappings":"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","sourcesContent":["import { useRef, useContext, ReactNode, ComponentType } from 'react';\n\nimport {\n ModalMethods,\n ModalManagerContext,\n Button,\n OmitStrict,\n ModalProps,\n Modal,\n useI18n\n} from '@pega/cosmos-react-core';\n\nexport interface UseCreateModalConfig<P extends object = object> {\n /*\n * A component to render the add new form.\n */\n renderer: ComponentType<P>;\n /**\n * Called when a user submits a form.\n */\n onSubmit: ({ close }: { close: () => void }) => void;\n /**\n * Called when a user cancels a form.\n */\n onDismiss: ({ close }: { close: () => void }) => void;\n /**\n * Called before the modal opens.\n */\n onBeforeOpen?: ModalProps['onBeforeOpen'];\n /**\n * Called after the modal closes.\n */\n onAfterClose?: ModalProps['onAfterClose'];\n}\n\nexport interface CreateModalActionProps<P extends object = object> {\n loading?: boolean;\n rendererProps: P;\n}\n\nconst useCreateModal = <P extends object = object>(config: UseCreateModalConfig<P> | undefined) => {\n const t = useI18n();\n\n const submittingRef = useRef(false);\n const modalMethods = useRef<ModalMethods>();\n const { create: createModal } = useContext(ModalManagerContext);\n\n if (config) {\n const { renderer: Renderer, onSubmit, onDismiss, onBeforeOpen, onAfterClose } = config;\n const renderModal = ({ rendererProps, loading = false }: CreateModalActionProps<P>) => {\n let modalContent: ReactNode = null;\n\n if (!loading) {\n modalContent = <Renderer {...rendererProps} />;\n }\n let formActions: ReactNode = null;\n\n if (!loading || submittingRef.current) {\n const close = () => {\n modalMethods.current?.dismiss();\n modalMethods.current = undefined;\n };\n\n formActions = (\n <>\n <Button\n disabled={loading}\n onClick={() => {\n onDismiss({ close });\n }}\n >\n {t('cancel')}\n </Button>\n <Button\n disabled={loading}\n type='submit'\n variant='primary'\n onClick={() => {\n submittingRef.current = true;\n onSubmit({ close });\n }}\n >\n {t('submit')}\n </Button>\n </>\n );\n }\n\n const modalProps: OmitStrict<ModalProps, 'heading'> = {\n progress: loading\n ? { message: submittingRef.current ? t('submitting') : t('loading') }\n : undefined,\n children: modalContent,\n actions: formActions,\n onRequestDismiss: loading && submittingRef.current ? () => false : undefined\n };\n\n if (modalMethods.current) {\n modalMethods.current.update(modalProps);\n } else {\n modalMethods.current = createModal(Modal, {\n ...modalProps,\n heading: t('create_new'),\n onBeforeOpen,\n onAfterClose: () => {\n onAfterClose?.();\n submittingRef.current = false;\n }\n });\n }\n };\n\n return {\n renderModal\n };\n }\n\n return {\n renderModal: () => {}\n };\n};\n\nexport default useCreateModal;\n"]}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@pega/cosmos-react-build",
|
|
3
|
-
"version": "3.0.0-dev.
|
|
3
|
+
"version": "3.0.0-dev.20.0",
|
|
4
4
|
"author": "Pegasystems",
|
|
5
5
|
"license": "SEE LICENSE IN LICENSE",
|
|
6
6
|
"repository": {
|
|
@@ -20,8 +20,8 @@
|
|
|
20
20
|
"build": "tsc -b"
|
|
21
21
|
},
|
|
22
22
|
"dependencies": {
|
|
23
|
-
"@pega/cosmos-react-core": "3.0.0-dev.
|
|
24
|
-
"@pega/cosmos-react-dnd": "3.0.0-dev.
|
|
23
|
+
"@pega/cosmos-react-core": "3.0.0-dev.20.0",
|
|
24
|
+
"@pega/cosmos-react-dnd": "3.0.0-dev.20.0",
|
|
25
25
|
"@types/dagre": "^0.7.46",
|
|
26
26
|
"@types/react": "^16.14.24 || ^17.0.38",
|
|
27
27
|
"@types/react-dom": "^16.9.14 || ^17.0.11",
|