@pega/cosmos-react-cs 3.0.0-rc.5 → 3.0.0-rc.7
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/CallControlPanel/ContactList/CalleePicker.js +6 -4
- package/lib/components/CallControlPanel/ContactList/CalleePicker.js.map +1 -1
- package/lib/components/DialPad/DialPad.d.ts +6 -4
- package/lib/components/DialPad/DialPad.d.ts.map +1 -1
- package/lib/components/DialPad/DialPad.js +9 -12
- package/lib/components/DialPad/DialPad.js.map +1 -1
- package/lib/components/DialPad/DialPadDialog.d.ts +1 -2
- package/lib/components/DialPad/DialPadDialog.d.ts.map +1 -1
- package/lib/components/DialPad/DialPadDialog.js +8 -2
- package/lib/components/DialPad/DialPadDialog.js.map +1 -1
- package/package.json +5 -4
|
@@ -30,16 +30,18 @@ const CalleePicker = forwardRef(({ selectedContact, onSelection, variant }, ref)
|
|
|
30
30
|
},
|
|
31
31
|
{ id: 'dial-pad', name: t('call_panel_contacts_dial_pad_heading') }
|
|
32
32
|
];
|
|
33
|
+
const [phoneNumber, setPhoneNumber] = useState('');
|
|
33
34
|
const tabContent = (tabId) => {
|
|
34
35
|
if (tabId === 'dial-pad')
|
|
35
36
|
return (_jsx(DialPad, { mode: 'default', ...(variant === 'action'
|
|
36
37
|
? {
|
|
37
|
-
|
|
38
|
+
value: phoneNumber,
|
|
39
|
+
onChange: setPhoneNumber,
|
|
40
|
+
onCallClick: () => onSelection(phoneNumber)
|
|
38
41
|
}
|
|
39
42
|
: {
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
: (selectedContact ?? '') + String.fromCharCode(charCode))
|
|
43
|
+
value: selectedContact ?? '',
|
|
44
|
+
onChange: onSelection
|
|
43
45
|
}) }));
|
|
44
46
|
return (_jsx(ContactList, { contacts: (tabId === 'favorites' ? favorites : contacts).map(contact => ({
|
|
45
47
|
...contact,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"CalleePicker.js","sourceRoot":"","sources":["../../../../src/components/CallControlPanel/ContactList/CalleePicker.tsx"],"names":[],"mappings":";AAAA,OAAO,EACL,UAAU,EACV,UAAU,EAIV,MAAM,EACN,QAAQ,EACT,MAAM,OAAO,CAAC;AACf,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AAEhD,OAAO,EACL,YAAY,EACZ,QAAQ,EACR,IAAI,EAEJ,gBAAgB,EAChB,OAAO,EACR,MAAM,yBAAyB,CAAC;AACjC,OAAO,EAAE,cAAc,EAAE,MAAM,sDAAsD,CAAC;AACtF,OAAO,KAAK,SAAS,MAAM,8DAA8D,CAAC;AAE1F,OAAO,OAAO,MAAM,uBAAuB,CAAC;AAE5C,OAAO,WAAW,EAAE,EAAE,eAAe,EAAE,MAAM,eAAe,CAAC;AAE7D,YAAY,CAAC,SAAS,CAAC,CAAC;AAgBxB,MAAM,kBAAkB,GAAG,MAAM,CAAC,GAAG,CAAC,GAAG,EAAE;IACzC,OAAO,GAAG,CAAA;MACN,cAAc;;;GAGjB,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,kBAAkB,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAEnD,MAAM,YAAY,GAAwD,UAAU,CAClF,CACE,EAAE,eAAe,EAAE,WAAW,EAAE,OAAO,EAAsC,EAC7E,GAA6B,EAC7B,EAAE;IACF,MAAM,CAAC,GAAG,OAAO,EAAE,CAAC;IACpB,MAAM,CAAC,UAAU,EAAE,aAAa,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IACpD,MAAM,OAAO,GAAG,MAAM,CAAc,IAAI,CAAC,CAAC;IAC1C,MAAM,EAAE,QAAQ,EAAE,gBAAgB,EAAE,GAAG,UAAU,CAAC,eAAe,CAAC,CAAC;IACnE,MAAM,SAAS,GAAG,QAAQ,CAAC,MAAM,CAAC,IAAI,CAAC,EAAE,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC;IAEzD,MAAM,IAAI,GAAG;QACX,EAAE,EAAE,EAAE,KAAK,EAAE,IAAI,EAAE,CAAC,CAAC,kCAAkC,CAAC,EAAE,KAAK,EAAE,QAAQ,CAAC,MAAM,EAAE;QAClF;YACE,EAAE,EAAE,WAAW;YACf,IAAI,EAAE,CAAC,CAAC,uCAAuC,CAAC;YAChD,KAAK,EAAE,QAAQ,CAAC,MAAM,CAAC,IAAI,CAAC,EAAE,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC,MAAM;SACrD;QACD,EAAE,EAAE,EAAE,UAAU,EAAE,IAAI,EAAE,CAAC,CAAC,sCAAsC,CAAC,EAAE;KACpE,CAAC;IAEF,MAAM,UAAU,GAAG,CAAC,KAAa,EAAE,EAAE;QACnC,IAAI,KAAK,KAAK,UAAU;YACtB,OAAO,CACL,KAAC,OAAO,IACN,IAAI,EAAC,SAAS,KACV,CAAC,OAAO,KAAK,QAAQ;oBACvB,CAAC,CAAC;wBACE,
|
|
1
|
+
{"version":3,"file":"CalleePicker.js","sourceRoot":"","sources":["../../../../src/components/CallControlPanel/ContactList/CalleePicker.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n useContext,\n forwardRef,\n FunctionComponent,\n PropsWithoutRef,\n Ref,\n useRef,\n useState\n} from 'react';\nimport styled, { css } from 'styled-components';\n\nimport {\n registerIcon,\n TabPanel,\n Tabs,\n ForwardProps,\n defaultThemeProp,\n useI18n\n} from '@pega/cosmos-react-core';\nimport { StyledTabPanel } from '@pega/cosmos-react-core/lib/components/Tabs/TabPanel';\nimport * as timesIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/times.icon';\n\nimport DialPad from '../../DialPad/DialPad';\n\nimport ContactList, { ContactsContext } from './ContactList';\n\nregisterIcon(timesIcon);\n\nexport interface CalleePickerProps {\n /** Currently selected number. */\n selectedContact?: string;\n /**\n * Callback fired on new call made by the user.\n * @param phoneNumber the number chosen.\n */\n onSelection: (phoneNumber: string) => void;\n /** Variant of the list. */\n variant: 'action' | 'select';\n /** Reference to the root component. */\n ref?: Ref<HTMLDivElement>;\n}\n\nconst StyledCalleePicker = styled.div(() => {\n return css`\n ${StyledTabPanel} {\n height: 24rem;\n }\n `;\n});\n\nStyledCalleePicker.defaultProps = defaultThemeProp;\n\nconst CalleePicker: FunctionComponent<CalleePickerProps & ForwardProps> = forwardRef(\n (\n { selectedContact, onSelection, variant }: PropsWithoutRef<CalleePickerProps>,\n ref: CalleePickerProps['ref']\n ) => {\n const t = useI18n();\n const [currentTab, setCurrentTab] = useState('all');\n const tabsRef = useRef<HTMLElement>(null);\n const { contacts, onFavoriteToggle } = useContext(ContactsContext);\n const favorites = contacts.filter(item => item.favorite);\n\n const tabs = [\n { id: 'all', name: t('call_panel_contacts_list_heading'), count: contacts.length },\n {\n id: 'favorites',\n name: t('call_panel_contacts_favorites_heading'),\n count: contacts.filter(item => item.favorite).length\n },\n { id: 'dial-pad', name: t('call_panel_contacts_dial_pad_heading') }\n ];\n\n const [phoneNumber, setPhoneNumber] = useState('');\n\n const tabContent = (tabId: string) => {\n if (tabId === 'dial-pad')\n return (\n <DialPad\n mode='default'\n {...(variant === 'action'\n ? {\n value: phoneNumber,\n onChange: setPhoneNumber,\n onCallClick: () => onSelection(phoneNumber)\n }\n : {\n value: selectedContact ?? '',\n onChange: onSelection\n })}\n />\n );\n return (\n <ContactList\n contacts={(tabId === 'favorites' ? favorites : contacts).map(contact => ({\n ...contact,\n selected: contact.phoneNumber === selectedContact\n }))}\n onFavoriteToggle={onFavoriteToggle}\n onItemClick={onSelection}\n variant={variant}\n />\n );\n };\n\n return (\n <StyledCalleePicker ref={ref}>\n <Tabs\n ref={tabsRef}\n tabs={tabs}\n type='horizontal'\n onTabClick={setCurrentTab}\n currentTabId={currentTab}\n />\n <TabPanel tabId={currentTab}>{tabContent(currentTab)}</TabPanel>\n </StyledCalleePicker>\n );\n }\n);\n\nexport default CalleePicker;\n"]}
|
|
@@ -2,10 +2,12 @@ import { FunctionComponent, Ref } from 'react';
|
|
|
2
2
|
import { ForwardProps, NoChildrenProp } from '@pega/cosmos-react-core';
|
|
3
3
|
import { DialPadKeyboardProps } from './DialPadKeyboard';
|
|
4
4
|
export interface DialPadProps extends NoChildrenProp {
|
|
5
|
-
/**
|
|
6
|
-
|
|
7
|
-
/**
|
|
8
|
-
|
|
5
|
+
/** Entered number. */
|
|
6
|
+
value: string;
|
|
7
|
+
/** Callback fired when user types in the input or clicks on dialpad. */
|
|
8
|
+
onChange: (value: string) => void;
|
|
9
|
+
/** Callback fired when user clicks call button. */
|
|
10
|
+
onCallClick?: () => void;
|
|
9
11
|
/** Keypad mode, regular or DTMF. */
|
|
10
12
|
mode: DialPadKeyboardProps['mode'];
|
|
11
13
|
/** Ref for the wrapping element. */
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"DialPad.d.ts","sourceRoot":"","sources":["../../../src/components/DialPad/DialPad.tsx"],"names":[],"mappings":"AAAA,OAAO,
|
|
1
|
+
{"version":3,"file":"DialPad.d.ts","sourceRoot":"","sources":["../../../src/components/DialPad/DialPad.tsx"],"names":[],"mappings":"AAAA,OAAO,EAA2B,iBAAiB,EAAmB,GAAG,EAAE,MAAM,OAAO,CAAC;AAGzF,OAAO,EACL,YAAY,EAQZ,cAAc,EACf,MAAM,yBAAyB,CAAC;AAEjC,OAAwB,EAAE,oBAAoB,EAAE,MAAM,mBAAmB,CAAC;AAE1E,MAAM,WAAW,YAAa,SAAQ,cAAc;IAClD,sBAAsB;IACtB,KAAK,EAAE,MAAM,CAAC;IACd,wEAAwE;IACxE,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAClC,mDAAmD;IACnD,WAAW,CAAC,EAAE,MAAM,IAAI,CAAC;IACzB,oCAAoC;IACpC,IAAI,EAAE,oBAAoB,CAAC,MAAM,CAAC,CAAC;IACnC,oCAAoC;IACpC,GAAG,CAAC,EAAE,GAAG,CAAC,cAAc,CAAC,CAAC;CAC3B;AAiBD,QAAA,MAAM,OAAO,EAAE,iBAAiB,CAAC,YAAY,GAAG,YAAY,CAuC3D,CAAC;AAEF,eAAe,OAAO,CAAC"}
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
|
-
import { forwardRef
|
|
2
|
+
import { forwardRef } from 'react';
|
|
3
3
|
import styled, { css } from 'styled-components';
|
|
4
4
|
import { defaultThemeProp, Input, Button, useI18n, Flex, StyledIcon, StyledFlex } from '@pega/cosmos-react-core';
|
|
5
5
|
import DialPadKeyboard from './DialPadKeyboard';
|
|
@@ -16,18 +16,15 @@ const StyledDialPad = styled.div(({ theme: { base } }) => {
|
|
|
16
16
|
`;
|
|
17
17
|
});
|
|
18
18
|
StyledDialPad.defaultProps = defaultThemeProp;
|
|
19
|
-
const DialPad = forwardRef(({
|
|
19
|
+
const DialPad = forwardRef(({ value, onCallClick, onChange, mode }, ref) => {
|
|
20
20
|
const t = useI18n();
|
|
21
|
-
const
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
onDialButtonClickProp?.(charCode);
|
|
29
|
-
}, [onDialButtonClickProp]);
|
|
30
|
-
return (_jsxs(StyledDialPad, { ref: ref, children: [_jsxs(Flex, { container: { alignItems: 'center', justify: 'center', itemGap: 1 }, children: [_jsx(Input, { value: number, onChange: (e) => setNumber(e.target.value), "aria-label": t('dial_pad_phone_number_input_label'), readOnly: mode === 'DTMF' }), mode !== 'DTMF' && onCallButtonClick && (_jsx(Button, { variant: 'primary', onClick: () => onCallButtonClick?.(number), "aria-label": t('dial_pad_call_button_label', [number]), disabled: number.length === 0, children: t('dial_pad_call_button_label') }))] }), _jsx(DialPadKeyboard, { onDialButtonClick: onDialButtonClick, mode: mode })] }));
|
|
21
|
+
const onDialButtonClick = (charCode) => {
|
|
22
|
+
const newValue = charCode === 127 ? value.slice(0, -1) : value + String.fromCharCode(charCode);
|
|
23
|
+
onChange(newValue);
|
|
24
|
+
};
|
|
25
|
+
return (_jsxs(StyledDialPad, { ref: ref, children: [_jsxs(Flex, { container: { alignItems: 'center', justify: 'center', itemGap: 1 }, children: [_jsx(Input, { value: value, onChange: (e) => {
|
|
26
|
+
onChange(e.target.value);
|
|
27
|
+
}, "aria-label": t('dial_pad_phone_number_input_label'), readOnly: mode === 'DTMF' }), mode !== 'DTMF' && onCallClick && (_jsx(Button, { variant: 'primary', onClick: onCallClick, "aria-label": t('dial_pad_call_button_label', [value]), disabled: value.length === 0, children: t('dial_pad_call_button_label') }))] }), _jsx(DialPadKeyboard, { onDialButtonClick: onDialButtonClick, mode: mode })] }));
|
|
31
28
|
});
|
|
32
29
|
export default DialPad;
|
|
33
30
|
//# sourceMappingURL=DialPad.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"DialPad.js","sourceRoot":"","sources":["../../../src/components/DialPad/DialPad.tsx"],"names":[],"mappings":";AAAA,OAAO,
|
|
1
|
+
{"version":3,"file":"DialPad.js","sourceRoot":"","sources":["../../../src/components/DialPad/DialPad.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAe,UAAU,EAA2C,MAAM,OAAO,CAAC;AACzF,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AAEhD,OAAO,EAEL,gBAAgB,EAChB,KAAK,EACL,MAAM,EACN,OAAO,EACP,IAAI,EACJ,UAAU,EACV,UAAU,EAEX,MAAM,yBAAyB,CAAC;AAEjC,OAAO,eAAyC,MAAM,mBAAmB,CAAC;AAe1E,MAAM,aAAa,GAAG,MAAM,CAAC,GAAG,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE,IAAI,EAAE,EAAE,EAAE,EAAE;IACvD,OAAO,GAAG,CAAA;MACN,UAAU;uBACO,IAAI,CAAC,OAAO;iBAClB,IAAI,CAAC,OAAO;;;MAGvB,UAAU,IAAI,UAAU;eACf,IAAI,CAAC,OAAO,CAAC,WAAW;;GAEpC,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,aAAa,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAE9C,MAAM,OAAO,GAAmD,UAAU,CACxE,CACE,EAAE,KAAK,EAAE,WAAW,EAAE,QAAQ,EAAE,IAAI,EAAiC,EACrE,GAAwB,EACxB,EAAE;IACF,MAAM,CAAC,GAAG,OAAO,EAAE,CAAC;IAEpB,MAAM,iBAAiB,GAAG,CAAC,QAAgB,EAAE,EAAE;QAC7C,MAAM,QAAQ,GACZ,QAAQ,KAAK,GAAG,CAAC,CAAC,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,KAAK,GAAG,MAAM,CAAC,YAAY,CAAC,QAAQ,CAAC,CAAC;QAChF,QAAQ,CAAC,QAAQ,CAAC,CAAC;IACrB,CAAC,CAAC;IAEF,OAAO,CACL,MAAC,aAAa,IAAC,GAAG,EAAE,GAAG,aACrB,MAAC,IAAI,IAAC,SAAS,EAAE,EAAE,UAAU,EAAE,QAAQ,EAAE,OAAO,EAAE,QAAQ,EAAE,OAAO,EAAE,CAAC,EAAE,aACtE,KAAC,KAAK,IACJ,KAAK,EAAE,KAAK,EACZ,QAAQ,EAAE,CAAC,CAAgC,EAAE,EAAE;4BAC7C,QAAQ,CAAC,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC;wBAC3B,CAAC,gBACW,CAAC,CAAC,mCAAmC,CAAC,EAClD,QAAQ,EAAE,IAAI,KAAK,MAAM,GACzB,EACD,IAAI,KAAK,MAAM,IAAI,WAAW,IAAI,CACjC,KAAC,MAAM,IACL,OAAO,EAAC,SAAS,EACjB,OAAO,EAAE,WAAW,gBACR,CAAC,CAAC,4BAA4B,EAAE,CAAC,KAAK,CAAC,CAAC,EACpD,QAAQ,EAAE,KAAK,CAAC,MAAM,KAAK,CAAC,YAE3B,CAAC,CAAC,4BAA4B,CAAC,GACzB,CACV,IACI,EACP,KAAC,eAAe,IAAC,iBAAiB,EAAE,iBAAiB,EAAE,IAAI,EAAE,IAAI,GAAI,IACvD,CACjB,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,eAAe,OAAO,CAAC","sourcesContent":["import { ChangeEvent, forwardRef, FunctionComponent, PropsWithoutRef, Ref } from 'react';\nimport styled, { css } from 'styled-components';\n\nimport {\n ForwardProps,\n defaultThemeProp,\n Input,\n Button,\n useI18n,\n Flex,\n StyledIcon,\n StyledFlex,\n NoChildrenProp\n} from '@pega/cosmos-react-core';\n\nimport DialPadKeyboard, { DialPadKeyboardProps } from './DialPadKeyboard';\n\nexport interface DialPadProps extends NoChildrenProp {\n /** Entered number. */\n value: string;\n /** Callback fired when user types in the input or clicks on dialpad. */\n onChange: (value: string) => void;\n /** Callback fired when user clicks call button. */\n onCallClick?: () => void;\n /** Keypad mode, regular or DTMF. */\n mode: DialPadKeyboardProps['mode'];\n /** Ref for the wrapping element. */\n ref?: Ref<HTMLDivElement>;\n}\n\nconst StyledDialPad = styled.div(({ theme: { base } }) => {\n return css`\n ${StyledFlex} {\n margin: 0 auto ${base.spacing} auto;\n padding: ${base.spacing} 0;\n }\n\n ${StyledFlex} ${StyledIcon} {\n color: ${base.palette.interactive};\n }\n `;\n});\n\nStyledDialPad.defaultProps = defaultThemeProp;\n\nconst DialPad: FunctionComponent<DialPadProps & ForwardProps> = forwardRef(\n (\n { value, onCallClick, onChange, mode }: PropsWithoutRef<DialPadProps>,\n ref: Ref<HTMLDivElement>\n ) => {\n const t = useI18n();\n\n const onDialButtonClick = (charCode: number) => {\n const newValue =\n charCode === 127 ? value.slice(0, -1) : value + String.fromCharCode(charCode);\n onChange(newValue);\n };\n\n return (\n <StyledDialPad ref={ref}>\n <Flex container={{ alignItems: 'center', justify: 'center', itemGap: 1 }}>\n <Input\n value={value}\n onChange={(e: ChangeEvent<HTMLInputElement>) => {\n onChange(e.target.value);\n }}\n aria-label={t('dial_pad_phone_number_input_label')}\n readOnly={mode === 'DTMF'}\n />\n {mode !== 'DTMF' && onCallClick && (\n <Button\n variant='primary'\n onClick={onCallClick}\n aria-label={t('dial_pad_call_button_label', [value])}\n disabled={value.length === 0}\n >\n {t('dial_pad_call_button_label')}\n </Button>\n )}\n </Flex>\n <DialPadKeyboard onDialButtonClick={onDialButtonClick} mode={mode} />\n </StyledDialPad>\n );\n }\n);\n\nexport default DialPad;\n"]}
|
|
@@ -1,9 +1,8 @@
|
|
|
1
1
|
import { FunctionComponent } from 'react';
|
|
2
|
-
import { DialPadProps } from './DialPad';
|
|
3
2
|
interface DialPadDialogProps {
|
|
4
3
|
target: HTMLElement | null;
|
|
5
4
|
onClose: () => void;
|
|
6
|
-
onDialButtonClick:
|
|
5
|
+
onDialButtonClick: (charCode: number) => void;
|
|
7
6
|
}
|
|
8
7
|
declare const DialPadDialog: FunctionComponent<DialPadDialogProps>;
|
|
9
8
|
export default DialPadDialog;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"DialPadDialog.d.ts","sourceRoot":"","sources":["../../../src/components/DialPad/DialPadDialog.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,
|
|
1
|
+
{"version":3,"file":"DialPadDialog.d.ts","sourceRoot":"","sources":["../../../src/components/DialPad/DialPadDialog.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAA+B,MAAM,OAAO,CAAC;AAmBvE,UAAU,kBAAkB;IAC1B,MAAM,EAAE,WAAW,GAAG,IAAI,CAAC;IAC3B,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,iBAAiB,EAAE,CAAC,QAAQ,EAAE,MAAM,KAAK,IAAI,CAAC;CAC/C;AAED,QAAA,MAAM,aAAa,EAAE,iBAAiB,CAAC,kBAAkB,CA+DxD,CAAC;AAEF,eAAe,aAAa,CAAC"}
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
|
-
import { useRef, useEffect } from 'react';
|
|
2
|
+
import { useRef, useEffect, useState } from 'react';
|
|
3
3
|
import { Button, Card, CardContent, CardHeader, getFocusables, Icon, Popover, Text, useEscape, useFocusTrap, useI18n, useOuterEvent } from '@pega/cosmos-react-core';
|
|
4
4
|
import DialPad from './DialPad';
|
|
5
5
|
const DialPadDialog = ({ target, onClose: onCloseProp, onDialButtonClick }) => {
|
|
@@ -15,6 +15,7 @@ const DialPadDialog = ({ target, onClose: onCloseProp, onDialButtonClick }) => {
|
|
|
15
15
|
useEffect(() => {
|
|
16
16
|
getFocusables(popoverRef)[0]?.focus();
|
|
17
17
|
}, []);
|
|
18
|
+
const [phoneNumber, setPhoneNumber] = useState('');
|
|
18
19
|
return (_jsx(Popover, { target: target, ref: popoverRef, placement: 'top-end', modifiers: [
|
|
19
20
|
{
|
|
20
21
|
name: 'flip',
|
|
@@ -22,7 +23,12 @@ const DialPadDialog = ({ target, onClose: onCloseProp, onDialButtonClick }) => {
|
|
|
22
23
|
fallbackPlacements: ['bottom-end', 'left', 'right']
|
|
23
24
|
}
|
|
24
25
|
}
|
|
25
|
-
], heading: t('call_panel_send_dtmf_heading'), children: _jsxs(Card, { children: [_jsx(CardHeader, { actions: _jsx(Button, { icon: true, variant: 'simple', "aria-label": t('close'), onClick: onClose, children: _jsx(Icon, { name: 'times' }) }), children: _jsx(Text, { variant: 'h3', children: t('call_panel_send_dtmf_heading') }) }), _jsx(CardContent, { children: _jsx(DialPad, {
|
|
26
|
+
], heading: t('call_panel_send_dtmf_heading'), children: _jsxs(Card, { children: [_jsx(CardHeader, { actions: _jsx(Button, { icon: true, variant: 'simple', "aria-label": t('close'), onClick: onClose, children: _jsx(Icon, { name: 'times' }) }), children: _jsx(Text, { variant: 'h3', children: t('call_panel_send_dtmf_heading') }) }), _jsx(CardContent, { children: _jsx(DialPad, { value: phoneNumber, onChange: inputText => {
|
|
27
|
+
setPhoneNumber(inputText);
|
|
28
|
+
// In DTMF mode only dialpad can be used for input without possibility to delete,
|
|
29
|
+
// so always last character can be send to the parent component.
|
|
30
|
+
onDialButtonClick(inputText.charCodeAt(inputText.length - 1));
|
|
31
|
+
}, mode: 'DTMF' }) })] }) }));
|
|
26
32
|
};
|
|
27
33
|
export default DialPadDialog;
|
|
28
34
|
//# sourceMappingURL=DialPadDialog.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"DialPadDialog.js","sourceRoot":"","sources":["../../../src/components/DialPad/DialPadDialog.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAqB,MAAM,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;
|
|
1
|
+
{"version":3,"file":"DialPadDialog.js","sourceRoot":"","sources":["../../../src/components/DialPad/DialPadDialog.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAqB,MAAM,EAAE,SAAS,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAEvE,OAAO,EACL,MAAM,EACN,IAAI,EACJ,WAAW,EACX,UAAU,EACV,aAAa,EACb,IAAI,EACJ,OAAO,EACP,IAAI,EACJ,SAAS,EACT,YAAY,EACZ,OAAO,EACP,aAAa,EACd,MAAM,yBAAyB,CAAC;AAEjC,OAAO,OAAO,MAAM,WAAW,CAAC;AAQhC,MAAM,aAAa,GAA0C,CAAC,EAC5D,MAAM,EACN,OAAO,EAAE,WAAW,EACpB,iBAAiB,EACE,EAAE,EAAE;IACvB,MAAM,CAAC,GAAG,OAAO,EAAE,CAAC;IACpB,MAAM,UAAU,GAAG,MAAM,CAAiB,IAAI,CAAC,CAAC;IAEhD,MAAM,OAAO,GAAG,GAAG,EAAE;QACnB,WAAW,EAAE,CAAC;QACd,MAAM,EAAE,KAAK,EAAE,CAAC;IAClB,CAAC,CAAC;IAEF,aAAa,CAAC,WAAW,EAAE,CAAC,UAAU,CAAC,EAAE,OAAO,CAAC,CAAC;IAClD,SAAS,CAAC,OAAO,EAAE,UAAU,CAAC,CAAC;IAC/B,YAAY,CAAC,UAAU,CAAC,CAAC;IAEzB,SAAS,CAAC,GAAG,EAAE;QACb,aAAa,CAAC,UAAU,CAAC,CAAC,CAAC,CAAC,EAAE,KAAK,EAAE,CAAC;IACxC,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,MAAM,CAAC,WAAW,EAAE,cAAc,CAAC,GAAG,QAAQ,CAAC,EAAE,CAAC,CAAC;IAEnD,OAAO,CACL,KAAC,OAAO,IACN,MAAM,EAAE,MAAM,EACd,GAAG,EAAE,UAAU,EACf,SAAS,EAAC,SAAS,EACnB,SAAS,EAAE;YACT;gBACE,IAAI,EAAE,MAAM;gBACZ,OAAO,EAAE;oBACP,kBAAkB,EAAE,CAAC,YAAY,EAAE,MAAM,EAAE,OAAO,CAAC;iBACpD;aACF;SACF,EACD,OAAO,EAAE,CAAC,CAAC,8BAA8B,CAAC,YAE1C,MAAC,IAAI,eACH,KAAC,UAAU,IACT,OAAO,EACL,KAAC,MAAM,IAAC,IAAI,QAAC,OAAO,EAAC,QAAQ,gBAAa,CAAC,CAAC,OAAO,CAAC,EAAE,OAAO,EAAE,OAAO,YACpE,KAAC,IAAI,IAAC,IAAI,EAAC,OAAO,GAAG,GACd,YAGX,KAAC,IAAI,IAAC,OAAO,EAAC,IAAI,YAAE,CAAC,CAAC,8BAA8B,CAAC,GAAQ,GAClD,EACb,KAAC,WAAW,cACV,KAAC,OAAO,IACN,KAAK,EAAE,WAAW,EAClB,QAAQ,EAAE,SAAS,CAAC,EAAE;4BACpB,cAAc,CAAC,SAAS,CAAC,CAAC;4BAC1B,iFAAiF;4BACjF,gEAAgE;4BAChE,iBAAiB,CAAC,SAAS,CAAC,UAAU,CAAC,SAAS,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC,CAAC;wBAChE,CAAC,EACD,IAAI,EAAC,MAAM,GACX,GACU,IACT,GACC,CACX,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,aAAa,CAAC","sourcesContent":["import { FunctionComponent, useRef, useEffect, useState } from 'react';\n\nimport {\n Button,\n Card,\n CardContent,\n CardHeader,\n getFocusables,\n Icon,\n Popover,\n Text,\n useEscape,\n useFocusTrap,\n useI18n,\n useOuterEvent\n} from '@pega/cosmos-react-core';\n\nimport DialPad from './DialPad';\n\ninterface DialPadDialogProps {\n target: HTMLElement | null;\n onClose: () => void;\n onDialButtonClick: (charCode: number) => void;\n}\n\nconst DialPadDialog: FunctionComponent<DialPadDialogProps> = ({\n target,\n onClose: onCloseProp,\n onDialButtonClick\n}: DialPadDialogProps) => {\n const t = useI18n();\n const popoverRef = useRef<HTMLDivElement>(null);\n\n const onClose = () => {\n onCloseProp();\n target?.focus();\n };\n\n useOuterEvent('mousedown', [popoverRef], onClose);\n useEscape(onClose, popoverRef);\n useFocusTrap(popoverRef);\n\n useEffect(() => {\n getFocusables(popoverRef)[0]?.focus();\n }, []);\n\n const [phoneNumber, setPhoneNumber] = useState('');\n\n return (\n <Popover\n target={target}\n ref={popoverRef}\n placement='top-end'\n modifiers={[\n {\n name: 'flip',\n options: {\n fallbackPlacements: ['bottom-end', 'left', 'right']\n }\n }\n ]}\n heading={t('call_panel_send_dtmf_heading')}\n >\n <Card>\n <CardHeader\n actions={\n <Button icon variant='simple' aria-label={t('close')} onClick={onClose}>\n <Icon name='times' />\n </Button>\n }\n >\n <Text variant='h3'>{t('call_panel_send_dtmf_heading')}</Text>\n </CardHeader>\n <CardContent>\n <DialPad\n value={phoneNumber}\n onChange={inputText => {\n setPhoneNumber(inputText);\n // In DTMF mode only dialpad can be used for input without possibility to delete,\n // so always last character can be send to the parent component.\n onDialButtonClick(inputText.charCodeAt(inputText.length - 1));\n }}\n mode='DTMF'\n />\n </CardContent>\n </Card>\n </Popover>\n );\n};\n\nexport default DialPadDialog;\n"]}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@pega/cosmos-react-cs",
|
|
3
|
-
"version": "3.0.0-rc.
|
|
3
|
+
"version": "3.0.0-rc.7",
|
|
4
4
|
"author": "Pegasystems",
|
|
5
5
|
"license": "SEE LICENSE IN LICENSE",
|
|
6
6
|
"repository": {
|
|
@@ -20,11 +20,11 @@
|
|
|
20
20
|
"build": "tsc -b"
|
|
21
21
|
},
|
|
22
22
|
"dependencies": {
|
|
23
|
-
"@pega/cosmos-react-core": "3.0.0-rc.
|
|
24
|
-
"@pega/cosmos-react-dnd": "3.0.0-rc.
|
|
23
|
+
"@pega/cosmos-react-core": "3.0.0-rc.7",
|
|
24
|
+
"@pega/cosmos-react-dnd": "3.0.0-rc.7",
|
|
25
25
|
"@types/react": "^16.14.24 || ^17.0.38",
|
|
26
26
|
"@types/react-dom": "^16.9.14 || ^17.0.11",
|
|
27
|
-
"@types/styled-components": "^5.1.
|
|
27
|
+
"@types/styled-components": "^5.1.26",
|
|
28
28
|
"polished": "^4.1.0",
|
|
29
29
|
"react": "^16.14.0 || ^17.0.0",
|
|
30
30
|
"react-dom": "^16.14.0 || ^17.0.0",
|
|
@@ -37,6 +37,7 @@
|
|
|
37
37
|
"@storybook/addon-toolbars": "^6.4.19",
|
|
38
38
|
"@storybook/addons": "^6.4.19",
|
|
39
39
|
"@storybook/react": "^6.4.19",
|
|
40
|
+
"@storybook/testing-react": "^1.2.4",
|
|
40
41
|
"@storybook/theming": "^6.4.19",
|
|
41
42
|
"@testing-library/react": "^12.1.3",
|
|
42
43
|
"@testing-library/user-event": "^13.5.0",
|