@pega/cosmos-react-cs 3.0.0-dev.13.0 → 3.0.0-dev.14.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/CallControlPanel/CallControlPanel.d.ts.map +1 -1
- package/lib/components/CallControlPanel/CallControlPanel.js +2 -2
- package/lib/components/CallControlPanel/CallControlPanel.js.map +1 -1
- package/lib/components/CallControlPanel/CallControlPanel.types.d.ts +4 -1
- package/lib/components/CallControlPanel/CallControlPanel.types.d.ts.map +1 -1
- package/lib/components/CallControlPanel/CallControlPanel.types.js.map +1 -1
- package/lib/components/CallControlPanel/CallControlPanelIcon.d.ts +0 -4
- package/lib/components/CallControlPanel/CallControlPanelIcon.d.ts.map +1 -1
- package/lib/components/CallControlPanel/CallControlPanelIcon.js +22 -17
- package/lib/components/CallControlPanel/CallControlPanelIcon.js.map +1 -1
- package/lib/components/CallControlPanel/CallHandoverForm.d.ts.map +1 -1
- package/lib/components/CallControlPanel/CallHandoverForm.js +1 -1
- package/lib/components/CallControlPanel/CallHandoverForm.js.map +1 -1
- package/lib/components/CallControlPanel/ExternalCTI.d.ts +3 -0
- package/lib/components/CallControlPanel/ExternalCTI.d.ts.map +1 -1
- package/lib/components/CallControlPanel/ExternalCTI.js +2 -2
- package/lib/components/CallControlPanel/ExternalCTI.js.map +1 -1
- package/lib/components/CallControlPanel/FloatingPanel.d.ts +3 -0
- package/lib/components/CallControlPanel/FloatingPanel.d.ts.map +1 -1
- package/lib/components/CallControlPanel/FloatingPanel.js +10 -3
- package/lib/components/CallControlPanel/FloatingPanel.js.map +1 -1
- package/package.json +3 -3
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"CallControlPanel.d.ts","sourceRoot":"","sources":["../../../src/components/CallControlPanel/CallControlPanel.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAc,iBAAiB,EAAqC,MAAM,OAAO,CAAC;AAEzF,OAAO,EASL,YAAY,EAGb,MAAM,yBAAyB,CAAC;AAIjC,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,0BAA0B,CAAC;AAStE,QAAA,MAAM,gBAAgB,EAAE,iBAAiB,CAAC,qBAAqB,GAAG,YAAY,
|
|
1
|
+
{"version":3,"file":"CallControlPanel.d.ts","sourceRoot":"","sources":["../../../src/components/CallControlPanel/CallControlPanel.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAc,iBAAiB,EAAqC,MAAM,OAAO,CAAC;AAEzF,OAAO,EASL,YAAY,EAGb,MAAM,yBAAyB,CAAC;AAIjC,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,0BAA0B,CAAC;AAStE,QAAA,MAAM,gBAAgB,EAAE,iBAAiB,CAAC,qBAAqB,GAAG,YAAY,CAoG7E,CAAC;AAEF,eAAe,gBAAgB,CAAC"}
|
|
@@ -9,7 +9,7 @@ import { StyledStatusRow } from './CallControlPanel.styles';
|
|
|
9
9
|
import { UserStatusIcon } from './CallControlPanelIcon';
|
|
10
10
|
import FloatingPanel from './FloatingPanel';
|
|
11
11
|
registerIcon(plusIcon);
|
|
12
|
-
const CallControlPanel = forwardRef(({ heading, status, statusOptions, onStatusChange, inStatusSince, message, draggable = false, calls, onAddCall, contactsList, onFavoriteToggle, ...restProps }, ref) => {
|
|
12
|
+
const CallControlPanel = forwardRef(({ heading, status, statusOptions, onStatusChange, inStatusSince, message, draggable = false, calls, onAddCall, contactsList, onFavoriteToggle, visible, ...restProps }, ref) => {
|
|
13
13
|
const t = useI18n();
|
|
14
14
|
const newCallButtonRef = useRef(null);
|
|
15
15
|
const [showPopover, setShowPopover] = useState(false);
|
|
@@ -30,7 +30,7 @@ const CallControlPanel = forwardRef(({ heading, status, statusOptions, onStatusC
|
|
|
30
30
|
return (_jsx(ContactsContext.Provider, { value: {
|
|
31
31
|
contacts: contactsList,
|
|
32
32
|
onFavoriteToggle
|
|
33
|
-
}, children: _jsxs(FloatingPanel, { ...restProps, ref: containerRef, draggable: draggable, heading: heading, actions: [newCallButton], children: [_jsxs(CardContent, { container: { itemGap: 2 }, children: [_jsxs(Flex, { as: StyledStatusRow, container: { alignItems: 'start', itemGap: 1 }, children: [_jsx(UserStatusIcon, { variant: 'dot', status: selectedStatusOption?.status }), _jsx(Flex, { item: { grow: 1 }, children: _jsx(ComboBox, { label: t('call_panel_agent_status'), labelHidden: true, selected: {
|
|
33
|
+
}, children: _jsxs(FloatingPanel, { ...restProps, ref: containerRef, draggable: draggable, visible: visible, heading: heading, actions: [newCallButton], children: [_jsxs(CardContent, { container: { itemGap: 2 }, children: [_jsxs(Flex, { as: StyledStatusRow, container: { alignItems: 'start', itemGap: 1 }, children: [_jsx(UserStatusIcon, { variant: 'dot', status: selectedStatusOption?.status }), _jsx(Flex, { item: { grow: 1 }, children: _jsx(ComboBox, { label: t('call_panel_agent_status'), labelHidden: true, selected: {
|
|
34
34
|
items: {
|
|
35
35
|
id: status,
|
|
36
36
|
text: selectedStatusOption?.label || ''
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"CallControlPanel.js","sourceRoot":"","sources":["../../../src/components/CallControlPanel/CallControlPanel.tsx"],"names":[],"mappings":"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","sourcesContent":["import { forwardRef, FunctionComponent, PropsWithoutRef, useRef, useState } from 'react';\n\nimport {\n CardContent,\n useI18n,\n registerIcon,\n Flex,\n ComboBox,\n Popover,\n useOuterEvent,\n useElement,\n ForwardProps,\n useConsolidatedRef,\n useEscape\n} from '@pega/cosmos-react-core';\nimport * as plusIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/plus.icon';\n\nimport CalleePicker, { ContactsContext } from './CalleePicker';\nimport type { CallControlPanelProps } from './CallControlPanel.types';\nimport Call from './Call';\nimport StopWatch from './StopWatch';\nimport { StyledStatusRow } from './CallControlPanel.styles';\nimport { UserStatusIcon } from './CallControlPanelIcon';\nimport FloatingPanel, { FloatingPanelActionProps } from './FloatingPanel';\n\nregisterIcon(plusIcon);\n\nconst CallControlPanel: FunctionComponent<CallControlPanelProps & ForwardProps> = forwardRef(\n (\n {\n heading,\n status,\n statusOptions,\n onStatusChange,\n inStatusSince,\n message,\n draggable = false,\n calls,\n onAddCall,\n contactsList,\n onFavoriteToggle,\n ...restProps\n }: PropsWithoutRef<CallControlPanelProps>,\n ref: CallControlPanelProps['ref']\n ) => {\n const t = useI18n();\n const newCallButtonRef = useRef<HTMLButtonElement>(null);\n const [showPopover, setShowPopover] = useState(false);\n const containerRef = useConsolidatedRef(ref);\n const [popoverEl, setPopoverRef] = useElement<HTMLElement>();\n\n useOuterEvent('mousedown', [popoverEl], () => {\n setShowPopover(false);\n });\n\n useEscape(() => setShowPopover(false), popoverEl);\n\n const selectedStatusOption = statusOptions.find(s => s.id === status);\n\n const newCallButton: FloatingPanelActionProps = {\n id: 'new-call',\n text: t('call_panel_make_new_call'),\n onClick: () => setShowPopover(true),\n icon: 'plus',\n ref: newCallButtonRef\n };\n\n return (\n <ContactsContext.Provider\n value={{\n contacts: contactsList,\n onFavoriteToggle\n }}\n >\n <FloatingPanel\n {...restProps}\n ref={containerRef}\n draggable={draggable}\n heading={heading}\n actions={[newCallButton]}\n >\n <CardContent container={{ itemGap: 2 }}>\n <Flex as={StyledStatusRow} container={{ alignItems: 'start', itemGap: 1 }}>\n <UserStatusIcon variant='dot' status={selectedStatusOption?.status} />\n <Flex item={{ grow: 1 }}>\n <ComboBox\n label={t('call_panel_agent_status')}\n labelHidden\n selected={{\n items: {\n id: status,\n text: selectedStatusOption?.label || ''\n }\n }}\n menu={{\n items: statusOptions.map(({ id, label, disabled }) => {\n return { id, primary: label, selected: id === status, disabled };\n }),\n onItemClick: onStatusChange\n }}\n info={message}\n />\n </Flex>\n <StopWatch startTime={inStatusSince} />\n </Flex>\n {calls.map(callProps => (\n <Call key={callProps.id} {...callProps} />\n ))}\n </CardContent>\n {showPopover && (\n <Popover target={newCallButtonRef.current} ref={setPopoverRef} placement='top-end'>\n <CalleePicker\n heading={t('call_panel_new_call_heading')}\n onClose={() => setShowPopover(false)}\n onCall={phoneNumber => {\n onAddCall(phoneNumber);\n setShowPopover(false);\n }}\n />\n </Popover>\n )}\n </FloatingPanel>\n </ContactsContext.Provider>\n );\n }\n);\n\nexport default CallControlPanel;\n"]}
|
|
1
|
+
{"version":3,"file":"CallControlPanel.js","sourceRoot":"","sources":["../../../src/components/CallControlPanel/CallControlPanel.tsx"],"names":[],"mappings":"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","sourcesContent":["import { forwardRef, FunctionComponent, PropsWithoutRef, useRef, useState } from 'react';\n\nimport {\n CardContent,\n useI18n,\n registerIcon,\n Flex,\n ComboBox,\n Popover,\n useOuterEvent,\n useElement,\n ForwardProps,\n useConsolidatedRef,\n useEscape\n} from '@pega/cosmos-react-core';\nimport * as plusIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/plus.icon';\n\nimport CalleePicker, { ContactsContext } from './CalleePicker';\nimport type { CallControlPanelProps } from './CallControlPanel.types';\nimport Call from './Call';\nimport StopWatch from './StopWatch';\nimport { StyledStatusRow } from './CallControlPanel.styles';\nimport { UserStatusIcon } from './CallControlPanelIcon';\nimport FloatingPanel, { FloatingPanelActionProps } from './FloatingPanel';\n\nregisterIcon(plusIcon);\n\nconst CallControlPanel: FunctionComponent<CallControlPanelProps & ForwardProps> = forwardRef(\n (\n {\n heading,\n status,\n statusOptions,\n onStatusChange,\n inStatusSince,\n message,\n draggable = false,\n calls,\n onAddCall,\n contactsList,\n onFavoriteToggle,\n visible,\n ...restProps\n }: PropsWithoutRef<CallControlPanelProps>,\n ref: CallControlPanelProps['ref']\n ) => {\n const t = useI18n();\n const newCallButtonRef = useRef<HTMLButtonElement>(null);\n const [showPopover, setShowPopover] = useState(false);\n const containerRef = useConsolidatedRef(ref);\n const [popoverEl, setPopoverRef] = useElement<HTMLElement>();\n\n useOuterEvent('mousedown', [popoverEl], () => {\n setShowPopover(false);\n });\n\n useEscape(() => setShowPopover(false), popoverEl);\n\n const selectedStatusOption = statusOptions.find(s => s.id === status);\n\n const newCallButton: FloatingPanelActionProps = {\n id: 'new-call',\n text: t('call_panel_make_new_call'),\n onClick: () => setShowPopover(true),\n icon: 'plus',\n ref: newCallButtonRef\n };\n\n return (\n <ContactsContext.Provider\n value={{\n contacts: contactsList,\n onFavoriteToggle\n }}\n >\n <FloatingPanel\n {...restProps}\n ref={containerRef}\n draggable={draggable}\n visible={visible}\n heading={heading}\n actions={[newCallButton]}\n >\n <CardContent container={{ itemGap: 2 }}>\n <Flex as={StyledStatusRow} container={{ alignItems: 'start', itemGap: 1 }}>\n <UserStatusIcon variant='dot' status={selectedStatusOption?.status} />\n <Flex item={{ grow: 1 }}>\n <ComboBox\n label={t('call_panel_agent_status')}\n labelHidden\n selected={{\n items: {\n id: status,\n text: selectedStatusOption?.label || ''\n }\n }}\n menu={{\n items: statusOptions.map(({ id, label, disabled }) => {\n return { id, primary: label, selected: id === status, disabled };\n }),\n onItemClick: onStatusChange\n }}\n info={message}\n />\n </Flex>\n <StopWatch startTime={inStatusSince} />\n </Flex>\n {calls.map(callProps => (\n <Call key={callProps.id} {...callProps} />\n ))}\n </CardContent>\n {showPopover && (\n <Popover target={newCallButtonRef.current} ref={setPopoverRef} placement='top-end'>\n <CalleePicker\n heading={t('call_panel_new_call_heading')}\n onClose={() => setShowPopover(false)}\n onCall={phoneNumber => {\n onAddCall(phoneNumber);\n setShowPopover(false);\n }}\n />\n </Popover>\n )}\n </FloatingPanel>\n </ContactsContext.Provider>\n );\n }\n);\n\nexport default CallControlPanel;\n"]}
|
|
@@ -1,5 +1,6 @@
|
|
|
1
1
|
import { ReactNode, Ref } from 'react';
|
|
2
|
-
import { BaseProps, NoChildrenProp } from '@pega/cosmos-react-core';
|
|
2
|
+
import type { BaseProps, NoChildrenProp } from '@pega/cosmos-react-core';
|
|
3
|
+
import type { FloatingPanelProps } from './FloatingPanel';
|
|
3
4
|
export interface Contact {
|
|
4
5
|
/** Contact phone number */
|
|
5
6
|
phoneNumber: string;
|
|
@@ -115,6 +116,8 @@ export interface CallControlPanelProps extends BaseProps, NoChildrenProp {
|
|
|
115
116
|
contactsList: Contact[];
|
|
116
117
|
/** Callback fired on adding/removing contact to/from favorites */
|
|
117
118
|
onFavoriteToggle: (phoneNumber: string, favorite: boolean) => void;
|
|
119
|
+
/** Flag driving panel visibility. */
|
|
120
|
+
visible?: FloatingPanelProps['visible'];
|
|
118
121
|
/** Reference to the root component. */
|
|
119
122
|
ref?: Ref<HTMLDivElement>;
|
|
120
123
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"CallControlPanel.types.d.ts","sourceRoot":"","sources":["../../../src/components/CallControlPanel/CallControlPanel.types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,GAAG,EAAE,MAAM,OAAO,CAAC;AAEvC,OAAO,EAAE,SAAS,EAAE,cAAc,EAAE,MAAM,yBAAyB,CAAC;
|
|
1
|
+
{"version":3,"file":"CallControlPanel.types.d.ts","sourceRoot":"","sources":["../../../src/components/CallControlPanel/CallControlPanel.types.ts"],"names":[],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"CallControlPanel.types.js","sourceRoot":"","sources":["../../../src/components/CallControlPanel/CallControlPanel.types.ts"],"names":[],"mappings":"","sourcesContent":["import { ReactNode, Ref } from 'react';\n\nimport { BaseProps, NoChildrenProp } from '@pega/cosmos-react-core';\n\nexport interface Contact {\n /** Contact phone number */\n phoneNumber: string;\n /** Contact name */\n primary: string;\n /** Additional contact information */\n secondary: string;\n /** Determines if contact is favorite */\n favorite: boolean;\n}\n\nexport interface CallParticipant {\n /** Caller id. */\n id: string;\n /** Caller's name. */\n name: string;\n /** Additional caller's info. */\n info?: string;\n /** Callback fired when the user ends the call. */\n onHangUp?: (id: CallProps['id'], participantId: CallParticipant['id']) => void;\n}\n\nexport interface TransferReasonOption {\n id: string;\n label: string;\n}\n\nexport interface TransferData {\n /** Selected reason option identifier. */\n reason?: TransferReasonOption['id'];\n /** Transfer comments. */\n comments?: string;\n /** Flag determining where interaction should be transferred along the call. */\n interaction: boolean;\n /** Phone number to transfer the call to. */\n phoneNumber: string;\n}\n\nexport interface CallProps {\n /** Call identifier. */\n id: string;\n /** Timestamp when the call has begun. */\n startedAt: number | Date;\n /** Timestamp when the call has been put on hold. */\n onHoldSince?: number | Date;\n /** SLA configuration timeups. Array of numbers of seconds after which the particular SLA level\n * time is up.\n */\n slaConfig?: number[];\n /** Call participants. */\n participants: CallParticipant[];\n /** The flag whether the mic is muted on this call. */\n muted?: boolean;\n /** Callback fired when 'pause' icon has been clicked. */\n onPauseToggle?: (id: CallProps['id']) => void;\n /** Callback fired when 'mute' icon has been clicked. */\n onMuteToggle: (id: CallProps['id']) => void;\n /** Callback fired when 'Consult' action has been clicked. */\n onConsultAction?: (id: CallProps['id'], transferData: TransferData) => void;\n /** Callback fired when 'Conference' action has been clicked. */\n onConferenceAction?: (id: CallProps['id'], transferData: TransferData) => void;\n /** Callback fired when 'Merge call' action has been chosen. */\n onMergeCall?: (id: CallProps['id']) => void;\n /** Callback fired for every dial pad key press. */\n onDTMFPress?: (id: CallProps['id'], key: string) => void;\n /** Callback fired when 'Transfer' action has been clicked. */\n onTransferAction?: (id: CallProps['id'], transferData: TransferData) => void;\n /** Callback fired when 'Transfer' action has been clicked. */\n onHandOffCall?: (id: CallProps['id']) => void;\n /** Callback fired when the user ends the call. */\n onEndCall?: (id: CallProps['id']) => void;\n /**\n * Transfer reason options\n */\n transferOptions: Readonly<TransferReasonOption[]>;\n}\n\nexport type UserAvailabilityStatus = 'available' | 'unavailable' | 'busy' | 'after_work' | 'logout';\n\nexport interface UserAvailabilityStatusOption {\n readonly id: string;\n readonly label: string;\n readonly status: UserAvailabilityStatus;\n readonly disabled?: boolean;\n}\n\nexport interface CallControlPanelProps extends BaseProps, NoChildrenProp {\n /** The heading rendered. */\n heading: string;\n /**\n * User availability statuses.\n */\n statusOptions: Readonly<UserAvailabilityStatusOption[]>;\n /** User current status. */\n status: UserAvailabilityStatusOption['id'];\n /** Timestamp since the user is in the current status. */\n inStatusSince: number | Date;\n /** If true, the component will be draggable */\n draggable?: boolean;\n /**\n * Region for messages: errors, notifications, etc.\n */\n message?: ReactNode;\n /**\n * Callback fired when user changes their status.\n * @param value new chosen status.\n */\n onStatusChange: (value: UserAvailabilityStatusOption['id']) => void;\n /**\n * List of current calls. Having two or more not declared as \"on hold\" (onHoldSince defined) means there's\n * a conference call.\n */\n calls: CallProps[];\n /**\n * Callback fired on new call made by the user.\n * @param phoneNumber the number chosen.\n */\n onAddCall: (phoneNumber: string) => void;\n /** An array of contacts objects. */\n contactsList: Contact[];\n /** Callback fired on adding/removing contact to/from favorites */\n onFavoriteToggle: (phoneNumber: string, favorite: boolean) => void;\n /** Reference to the root component. */\n ref?: Ref<HTMLDivElement>;\n}\n"]}
|
|
1
|
+
{"version":3,"file":"CallControlPanel.types.js","sourceRoot":"","sources":["../../../src/components/CallControlPanel/CallControlPanel.types.ts"],"names":[],"mappings":"","sourcesContent":["import { ReactNode, Ref } from 'react';\n\nimport type { BaseProps, NoChildrenProp } from '@pega/cosmos-react-core';\n\nimport type { FloatingPanelProps } from './FloatingPanel';\n\nexport interface Contact {\n /** Contact phone number */\n phoneNumber: string;\n /** Contact name */\n primary: string;\n /** Additional contact information */\n secondary: string;\n /** Determines if contact is favorite */\n favorite: boolean;\n}\n\nexport interface CallParticipant {\n /** Caller id. */\n id: string;\n /** Caller's name. */\n name: string;\n /** Additional caller's info. */\n info?: string;\n /** Callback fired when the user ends the call. */\n onHangUp?: (id: CallProps['id'], participantId: CallParticipant['id']) => void;\n}\n\nexport interface TransferReasonOption {\n id: string;\n label: string;\n}\n\nexport interface TransferData {\n /** Selected reason option identifier. */\n reason?: TransferReasonOption['id'];\n /** Transfer comments. */\n comments?: string;\n /** Flag determining where interaction should be transferred along the call. */\n interaction: boolean;\n /** Phone number to transfer the call to. */\n phoneNumber: string;\n}\n\nexport interface CallProps {\n /** Call identifier. */\n id: string;\n /** Timestamp when the call has begun. */\n startedAt: number | Date;\n /** Timestamp when the call has been put on hold. */\n onHoldSince?: number | Date;\n /** SLA configuration timeups. Array of numbers of seconds after which the particular SLA level\n * time is up.\n */\n slaConfig?: number[];\n /** Call participants. */\n participants: CallParticipant[];\n /** The flag whether the mic is muted on this call. */\n muted?: boolean;\n /** Callback fired when 'pause' icon has been clicked. */\n onPauseToggle?: (id: CallProps['id']) => void;\n /** Callback fired when 'mute' icon has been clicked. */\n onMuteToggle: (id: CallProps['id']) => void;\n /** Callback fired when 'Consult' action has been clicked. */\n onConsultAction?: (id: CallProps['id'], transferData: TransferData) => void;\n /** Callback fired when 'Conference' action has been clicked. */\n onConferenceAction?: (id: CallProps['id'], transferData: TransferData) => void;\n /** Callback fired when 'Merge call' action has been chosen. */\n onMergeCall?: (id: CallProps['id']) => void;\n /** Callback fired for every dial pad key press. */\n onDTMFPress?: (id: CallProps['id'], key: string) => void;\n /** Callback fired when 'Transfer' action has been clicked. */\n onTransferAction?: (id: CallProps['id'], transferData: TransferData) => void;\n /** Callback fired when 'Transfer' action has been clicked. */\n onHandOffCall?: (id: CallProps['id']) => void;\n /** Callback fired when the user ends the call. */\n onEndCall?: (id: CallProps['id']) => void;\n /**\n * Transfer reason options\n */\n transferOptions: Readonly<TransferReasonOption[]>;\n}\n\nexport type UserAvailabilityStatus = 'available' | 'unavailable' | 'busy' | 'after_work' | 'logout';\n\nexport interface UserAvailabilityStatusOption {\n readonly id: string;\n readonly label: string;\n readonly status: UserAvailabilityStatus;\n readonly disabled?: boolean;\n}\n\nexport interface CallControlPanelProps extends BaseProps, NoChildrenProp {\n /** The heading rendered. */\n heading: string;\n /**\n * User availability statuses.\n */\n statusOptions: Readonly<UserAvailabilityStatusOption[]>;\n /** User current status. */\n status: UserAvailabilityStatusOption['id'];\n /** Timestamp since the user is in the current status. */\n inStatusSince: number | Date;\n /** If true, the component will be draggable */\n draggable?: boolean;\n /**\n * Region for messages: errors, notifications, etc.\n */\n message?: ReactNode;\n /**\n * Callback fired when user changes their status.\n * @param value new chosen status.\n */\n onStatusChange: (value: UserAvailabilityStatusOption['id']) => void;\n /**\n * List of current calls. Having two or more not declared as \"on hold\" (onHoldSince defined) means there's\n * a conference call.\n */\n calls: CallProps[];\n /**\n * Callback fired on new call made by the user.\n * @param phoneNumber the number chosen.\n */\n onAddCall: (phoneNumber: string) => void;\n /** An array of contacts objects. */\n contactsList: Contact[];\n /** Callback fired on adding/removing contact to/from favorites */\n onFavoriteToggle: (phoneNumber: string, favorite: boolean) => void;\n /** Flag driving panel visibility. */\n visible?: FloatingPanelProps['visible'];\n /** Reference to the root component. */\n ref?: Ref<HTMLDivElement>;\n}\n"]}
|
|
@@ -1,5 +1,4 @@
|
|
|
1
1
|
import { FunctionComponent } from 'react';
|
|
2
|
-
import { DefaultTheme } from 'styled-components';
|
|
3
2
|
import { ForwardProps, NoChildrenProp } from '@pega/cosmos-react-core';
|
|
4
3
|
import type { UserAvailabilityStatus } from './CallControlPanel.types';
|
|
5
4
|
interface CallControlPanelIconProps extends NoChildrenProp {
|
|
@@ -10,9 +9,6 @@ interface CallControlPanelIconProps extends NoChildrenProp {
|
|
|
10
9
|
interface UserStatusIconProps extends Pick<CallControlPanelIconProps, 'status'> {
|
|
11
10
|
variant: 'icon' | 'dot';
|
|
12
11
|
}
|
|
13
|
-
export declare const StyledCallControlPanelIcon: import("styled-components").StyledComponent<"div", DefaultTheme, {
|
|
14
|
-
userStatus: UserAvailabilityStatus;
|
|
15
|
-
}, never>;
|
|
16
12
|
export declare const UserStatusIcon: FunctionComponent<UserStatusIconProps>;
|
|
17
13
|
declare const CallControlPanelIcon: FunctionComponent<CallControlPanelIconProps & ForwardProps>;
|
|
18
14
|
export default CallControlPanelIcon;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"CallControlPanelIcon.d.ts","sourceRoot":"","sources":["../../../src/components/CallControlPanel/CallControlPanelIcon.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAQ,MAAM,OAAO,CAAC;
|
|
1
|
+
{"version":3,"file":"CallControlPanelIcon.d.ts","sourceRoot":"","sources":["../../../src/components/CallControlPanel/CallControlPanelIcon.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAQ,MAAM,OAAO,CAAC;AAIhD,OAAO,EAEL,YAAY,EAGZ,cAAc,EAMf,MAAM,yBAAyB,CAAC;AAKjC,OAAO,KAAK,EAAE,sBAAsB,EAAE,MAAM,0BAA0B,CAAC;AAOvE,UAAU,yBAA0B,SAAQ,cAAc;IACxD,MAAM,CAAC,EAAE,sBAAsB,CAAC;IAChC,KAAK,EAAE,MAAM,CAAC;IACd,YAAY,EAAE,OAAO,CAAC;CACvB;AAED,UAAU,mBAAoB,SAAQ,IAAI,CAAC,yBAAyB,EAAE,QAAQ,CAAC;IAC7E,OAAO,EAAE,MAAM,GAAG,KAAK,CAAC;CACzB;AAgFD,eAAO,MAAM,cAAc,EAAE,iBAAiB,CAAC,mBAAmB,CA4BjE,CAAC;AAEF,QAAA,MAAM,oBAAoB,EAAE,iBAAiB,CAAC,yBAAyB,GAAG,YAAY,CAWrF,CAAC;AAEF,eAAe,oBAAoB,CAAC"}
|
|
@@ -2,7 +2,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
|
2
2
|
import { memo } from 'react';
|
|
3
3
|
import styled, { css } from 'styled-components';
|
|
4
4
|
import { readableColor } from 'polished';
|
|
5
|
-
import { defaultThemeProp, Icon, registerIcon, StyledAvatar, StyledIcon, useTheme } from '@pega/cosmos-react-core';
|
|
5
|
+
import { defaultThemeProp, Icon, registerIcon, StyledAvatar, StyledIcon, useTheme, VisuallyHiddenText } from '@pega/cosmos-react-core';
|
|
6
6
|
import * as headsetIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/headset.icon';
|
|
7
7
|
import * as eyeOffSolidIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/eye-off-solid.icon';
|
|
8
8
|
registerIcon(headsetIcon, eyeOffSolidIcon);
|
|
@@ -31,12 +31,6 @@ const StyledStatusIcon = styled.div(({ theme: { base: { colors } }, userStatus }
|
|
|
31
31
|
});
|
|
32
32
|
StyledStatusIcon.defaultProps = defaultThemeProp;
|
|
33
33
|
const StyledUserStatusIcon = styled(StyledStatusIcon) `
|
|
34
|
-
position: absolute;
|
|
35
|
-
inset-block-start: -0.25rem;
|
|
36
|
-
inset-inline-end: -0.25rem;
|
|
37
|
-
z-index: 1;
|
|
38
|
-
width: 0.875rem;
|
|
39
|
-
height: 0.875rem;
|
|
40
34
|
border-radius: 50%;
|
|
41
35
|
border: 0.0625rem solid black;
|
|
42
36
|
|
|
@@ -47,28 +41,39 @@ const StyledUserStatusIcon = styled(StyledStatusIcon) `
|
|
|
47
41
|
}
|
|
48
42
|
`;
|
|
49
43
|
StyledUserStatusIcon.defaultProps = defaultThemeProp;
|
|
50
|
-
|
|
51
|
-
|
|
44
|
+
const StyledPanelVisibilityIcon = styled(Icon) `
|
|
45
|
+
width: 0.875rem;
|
|
46
|
+
height: 0.875rem;
|
|
47
|
+
fill: ${p => p.theme.base.colors.gray.medium};
|
|
48
|
+
`;
|
|
49
|
+
StyledPanelVisibilityIcon.defaultProps = defaultThemeProp;
|
|
50
|
+
const StyledCallControlPanelIcon = styled(StyledStatusIcon) `
|
|
51
|
+
${StyledUserStatusIcon}, ${StyledPanelVisibilityIcon} {
|
|
52
52
|
position: absolute;
|
|
53
|
-
inset-block-end: -0.25rem;
|
|
54
|
-
inset-inline-end: -0.25rem;
|
|
55
|
-
z-index: 1;
|
|
56
53
|
width: 0.875rem;
|
|
57
54
|
height: 0.875rem;
|
|
58
|
-
|
|
55
|
+
z-index: 1;
|
|
56
|
+
}
|
|
57
|
+
|
|
58
|
+
${StyledUserStatusIcon} {
|
|
59
|
+
inset-block-start: -0.25rem;
|
|
60
|
+
inset-inline-end: -0.25rem;
|
|
61
|
+
}
|
|
62
|
+
|
|
63
|
+
${StyledPanelVisibilityIcon} {
|
|
64
|
+
inset-block-end: -0.25rem;
|
|
65
|
+
inset-inline-end: -0.25rem;
|
|
59
66
|
}
|
|
60
67
|
`;
|
|
61
|
-
StyledCallControlPanelIcon.defaultProps = defaultThemeProp;
|
|
62
68
|
export const UserStatusIcon = memo(({ status = 'logout', variant }) => {
|
|
63
69
|
const { base: { colors } } = useTheme();
|
|
64
70
|
const [colorName, colorVariant] = colorMapping[status].split('-', 2);
|
|
65
71
|
const bgColor = colors[colorName][colorVariant];
|
|
66
72
|
const iconName = iconMapping[status];
|
|
67
|
-
return variant === 'dot' ? (_jsx("svg", { role: '
|
|
73
|
+
return variant === 'dot' ? (_jsx("svg", { role: 'presentation', height: '1rem', width: '1rem', viewBox: '0 0 10 10', xmlns: 'http://www.w3.org/2000/svg', children: _jsx("circle", { cx: '50%', cy: '50%', r: '50%', fill: bgColor }) })) : (_jsx(StyledUserStatusIcon, { userStatus: status, children: iconName && _jsx(Icon, { name: iconName }) }));
|
|
68
74
|
});
|
|
69
75
|
const CallControlPanelIcon = memo(({ status = 'logout', label, panelVisible, ...restProps }) => {
|
|
70
|
-
|
|
71
|
-
return (_jsxs(StyledCallControlPanelIcon, { as: StyledAvatar, ...restProps, size: 'm', userStatus: status, "aria-label": label, children: [_jsx(Icon, { name: 'headset' }), iconName && _jsx(UserStatusIcon, { variant: 'icon', status: status }), !panelVisible && _jsx(Icon, { name: 'eye-off-solid' })] }));
|
|
76
|
+
return (_jsxs(StyledCallControlPanelIcon, { as: StyledAvatar, ...restProps, size: 'm', userStatus: status, children: [_jsx(Icon, { name: 'headset' }), status !== 'available' && _jsx(UserStatusIcon, { variant: 'icon', status: status }), !panelVisible && _jsx(StyledPanelVisibilityIcon, { name: 'eye-off-solid' }), _jsx(VisuallyHiddenText, { children: label })] }));
|
|
72
77
|
});
|
|
73
78
|
export default CallControlPanelIcon;
|
|
74
79
|
//# sourceMappingURL=CallControlPanelIcon.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"CallControlPanelIcon.js","sourceRoot":"","sources":["../../../src/components/CallControlPanel/CallControlPanelIcon.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAqB,IAAI,EAAE,MAAM,OAAO,CAAC;AAChD,OAAO,MAAM,EAAE,EAAE,GAAG,EAAgB,MAAM,mBAAmB,CAAC;AAC9D,OAAO,EAAE,aAAa,EAAE,MAAM,UAAU,CAAC;AAEzC,OAAO,EACL,gBAAgB,EAEhB,IAAI,EACJ,YAAY,EAGZ,YAAY,EACZ,UAAU,EACV,QAAQ,
|
|
1
|
+
{"version":3,"file":"CallControlPanelIcon.js","sourceRoot":"","sources":["../../../src/components/CallControlPanel/CallControlPanelIcon.tsx"],"names":[],"mappings":"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","sourcesContent":["import { FunctionComponent, memo } from 'react';\nimport styled, { css, DefaultTheme } from 'styled-components';\nimport { readableColor } from 'polished';\n\nimport {\n defaultThemeProp,\n ForwardProps,\n Icon,\n registerIcon,\n NoChildrenProp,\n OmitStrict,\n StyledAvatar,\n StyledIcon,\n useTheme,\n VisuallyHiddenText\n} from '@pega/cosmos-react-core';\nimport { IconNames } from '@pega/cosmos-react-core/lib/components/Icon/iconNames';\nimport * as headsetIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/headset.icon';\nimport * as eyeOffSolidIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/eye-off-solid.icon';\n\nimport type { UserAvailabilityStatus } from './CallControlPanel.types';\n\nregisterIcon(headsetIcon, eyeOffSolidIcon);\n\ntype ThemeColor = keyof OmitStrict<DefaultTheme['base']['colors'], 'white' | 'black'>;\ntype ThemeColorVariant = 'extra-light' | 'light' | 'medium' | 'dark' | 'extra-dark';\n\ninterface CallControlPanelIconProps extends NoChildrenProp {\n status?: UserAvailabilityStatus;\n label: string;\n panelVisible: boolean;\n}\n\ninterface UserStatusIconProps extends Pick<CallControlPanelIconProps, 'status'> {\n variant: 'icon' | 'dot';\n}\n\nconst colorMapping: Record<UserAvailabilityStatus, `${ThemeColor}-${ThemeColorVariant}`> = {\n unavailable: 'slate-light',\n available: 'green-light',\n busy: 'red-medium',\n after_work: 'orange-light',\n logout: 'slate-light'\n};\n\nconst iconMapping: Record<UserAvailabilityStatus, IconNames | undefined> = {\n unavailable: 'times',\n available: undefined,\n busy: 'minus',\n after_work: 'clock',\n logout: 'times'\n};\n\nconst StyledStatusIcon = styled.div<{ userStatus: UserAvailabilityStatus }>(\n ({\n theme: {\n base: { colors }\n },\n userStatus\n }) => {\n const [colorName, colorVariant] = colorMapping[userStatus].split('-', 2) as [\n ThemeColor,\n ThemeColorVariant\n ];\n const bgColor = colors[colorName][colorVariant];\n const fgColor = readableColor(bgColor);\n return css`\n background-color: ${bgColor};\n color: ${fgColor};\n `;\n }\n);\n\nStyledStatusIcon.defaultProps = defaultThemeProp;\n\nconst StyledUserStatusIcon = styled(StyledStatusIcon)`\n border-radius: 50%;\n border: 0.0625rem solid black;\n\n ${StyledIcon} {\n display: block;\n width: 100%;\n margin: 0 auto;\n }\n`;\n\nStyledUserStatusIcon.defaultProps = defaultThemeProp;\n\nconst StyledPanelVisibilityIcon = styled(Icon)`\n width: 0.875rem;\n height: 0.875rem;\n fill: ${p => p.theme.base.colors.gray.medium};\n`;\n\nStyledPanelVisibilityIcon.defaultProps = defaultThemeProp;\n\nconst StyledCallControlPanelIcon = styled(StyledStatusIcon)`\n ${StyledUserStatusIcon}, ${StyledPanelVisibilityIcon} {\n position: absolute;\n width: 0.875rem;\n height: 0.875rem;\n z-index: 1;\n }\n\n ${StyledUserStatusIcon} {\n inset-block-start: -0.25rem;\n inset-inline-end: -0.25rem;\n }\n\n ${StyledPanelVisibilityIcon} {\n inset-block-end: -0.25rem;\n inset-inline-end: -0.25rem;\n }\n`;\n\nexport const UserStatusIcon: FunctionComponent<UserStatusIconProps> = memo(\n ({ status = 'logout', variant }) => {\n const {\n base: { colors }\n } = useTheme();\n const [colorName, colorVariant] = colorMapping[status].split('-', 2) as [\n ThemeColor,\n ThemeColorVariant\n ];\n const bgColor = colors[colorName][colorVariant];\n const iconName = iconMapping[status];\n\n return variant === 'dot' ? (\n <svg\n role='presentation'\n height='1rem'\n width='1rem'\n viewBox='0 0 10 10'\n xmlns='http://www.w3.org/2000/svg'\n >\n <circle cx='50%' cy='50%' r='50%' fill={bgColor} />\n </svg>\n ) : (\n <StyledUserStatusIcon userStatus={status}>\n {iconName && <Icon name={iconName} />}\n </StyledUserStatusIcon>\n );\n }\n);\n\nconst CallControlPanelIcon: FunctionComponent<CallControlPanelIconProps & ForwardProps> = memo(\n ({ status = 'logout', label, panelVisible, ...restProps }) => {\n return (\n <StyledCallControlPanelIcon as={StyledAvatar} {...restProps} size='m' userStatus={status}>\n <Icon name='headset' />\n {status !== 'available' && <UserStatusIcon variant='icon' status={status} />}\n {!panelVisible && <StyledPanelVisibilityIcon name='eye-off-solid' />}\n <VisuallyHiddenText>{label}</VisuallyHiddenText>\n </StyledCallControlPanelIcon>\n );\n }\n);\n\nexport default CallControlPanelIcon;\n"]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"CallHandoverForm.d.ts","sourceRoot":"","sources":["../../../src/components/CallControlPanel/CallHandoverForm.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAc,iBAAiB,EAAE,GAAG,EAAkC,MAAM,OAAO,CAAC;AAmB3F,OAAO,KAAK,EAAE,oBAAoB,EAAE,YAAY,EAAW,MAAM,0BAA0B,CAAC;AAK5F,MAAM,WAAW,qBAAqB;IACpC;;;OAGG;IACH,QAAQ,EAAE,CAAC,aAAa,EAAE,YAAY,KAAK,IAAI,CAAC;IAChD,gDAAgD;IAChD,QAAQ,EAAE,MAAM,IAAI,CAAC;IACrB,+BAA+B;IAC/B,eAAe,EAAE,QAAQ,CAAC,oBAAoB,EAAE,CAAC,CAAC;IAClD,uCAAuC;IACvC,GAAG,CAAC,EAAE,GAAG,CAAC,cAAc,CAAC,CAAC;CAC3B;AAED,eAAO,MAAM,sBAAsB,oNAElC,CAAC;AAIF,QAAA,MAAM,gBAAgB,EAAE,iBAAiB,CAAC,qBAAqB,
|
|
1
|
+
{"version":3,"file":"CallHandoverForm.d.ts","sourceRoot":"","sources":["../../../src/components/CallControlPanel/CallHandoverForm.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAc,iBAAiB,EAAE,GAAG,EAAkC,MAAM,OAAO,CAAC;AAmB3F,OAAO,KAAK,EAAE,oBAAoB,EAAE,YAAY,EAAW,MAAM,0BAA0B,CAAC;AAK5F,MAAM,WAAW,qBAAqB;IACpC;;;OAGG;IACH,QAAQ,EAAE,CAAC,aAAa,EAAE,YAAY,KAAK,IAAI,CAAC;IAChD,gDAAgD;IAChD,QAAQ,EAAE,MAAM,IAAI,CAAC;IACrB,+BAA+B;IAC/B,eAAe,EAAE,QAAQ,CAAC,oBAAoB,EAAE,CAAC,CAAC;IAClD,uCAAuC;IACvC,GAAG,CAAC,EAAE,GAAG,CAAC,cAAc,CAAC,CAAC;CAC3B;AAED,eAAO,MAAM,sBAAsB,oNAElC,CAAC;AAIF,QAAA,MAAM,gBAAgB,EAAE,iBAAiB,CAAC,qBAAqB,CAkI9D,CAAC;AAEF,eAAe,gBAAgB,CAAC"}
|
|
@@ -34,7 +34,7 @@ const CallHandoverForm = ({ onCancel: onClose, onSubmit: onTransferCall, transfe
|
|
|
34
34
|
const clearSelection = () => {
|
|
35
35
|
setSelectedContact(undefined);
|
|
36
36
|
};
|
|
37
|
-
return (_jsxs(
|
|
37
|
+
return (_jsxs(StyledCallHandoverForm, { actions: _jsxs(_Fragment, { children: [_jsx(Button, { variant: 'secondary', onClick: onClose, children: t('cancel') }), _jsx(Button, { variant: 'primary', disabled: !(selectedContact && (!interaction || (selectedReason && comments))), onClick: () => {
|
|
38
38
|
if (!selectedContact)
|
|
39
39
|
return;
|
|
40
40
|
onTransferCall({
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"CallHandoverForm.js","sourceRoot":"","sources":["../../../src/components/CallControlPanel/CallHandoverForm.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAA0B,QAAQ,EAAE,OAAO,EAAe,MAAM,OAAO,CAAC;AAC3F,OAAO,MAAM,MAAM,mBAAmB,CAAC;AAEvC,OAAO,EACL,MAAM,EACN,IAAI,EACJ,YAAY,EACZ,gBAAgB,EAChB,OAAO,EACP,gBAAgB,EAChB,WAAW,EACX,QAAQ,EACR,QAAQ,EACR,IAAI,EACJ,mBAAmB,EAEpB,MAAM,yBAAyB,CAAC;AACjC,OAAO,KAAK,SAAS,MAAM,8DAA8D,CAAC;AAG1F,OAAO,EAAE,eAAe,EAAE,MAAM,gBAAgB,CAAC;AAEjD,YAAY,CAAC,SAAS,CAAC,CAAC;AAgBxB,MAAM,CAAC,MAAM,sBAAsB,GAAG,MAAM,CAAC,IAAI,CAAC,CAAA;;CAEjD,CAAC;AAEF,sBAAsB,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAEvD,MAAM,gBAAgB,GAA6C,CAAC,EAClE,QAAQ,EAAE,OAAO,EACjB,QAAQ,EAAE,cAAc,EACxB,eAAe,EACO,EAAE,EAAE;IAC1B,MAAM,CAAC,GAAG,OAAO,EAAE,CAAC;IACpB,MAAM,EAAE,QAAQ,EAAE,GAAG,UAAU,CAAC,eAAe,CAAC,CAAC;IACjD,MAAM,CAAC,cAAc,EAAE,iBAAiB,CAAC,GAAG,QAAQ,EAAwB,CAAC;IAC7E,MAAM,CAAC,eAAe,EAAE,kBAAkB,CAAC,GAAG,QAAQ,EAAW,CAAC;IAClE,MAAM,CAAC,WAAW,EAAE,cAAc,CAAC,GAAG,QAAQ,CAAC,EAAE,CAAC,CAAC;IACnD,MAAM,CAAC,QAAQ,EAAE,WAAW,CAAC,GAAG,QAAQ,CAAC,EAAE,CAAC,CAAC;IAC7C,MAAM,CAAC,WAAW,EAAE,cAAc,CAAC,GAAG,QAAQ,CAAC,IAAI,CAAC,CAAC;IAErD,MAAM,gBAAgB,GAAG,OAAO,CAAqB,GAAG,EAAE;QACxD,IAAI,KAAK,GAAG,QAAQ,CAAC;QACrB,IAAI,WAAW,EAAE;YACf,MAAM,OAAO,GAAG,mBAAmB,CAAC,WAAW,EAAE,UAAU,CAAC,CAAC;YAC7D,KAAK,GAAG,KAAK,CAAC,MAAM,CAAC,IAAI,CAAC,EAAE,CAAC,OAAO,CAAC,IAAI,CAAC,IAAI,CAAC,OAAO,CAAC,IAAI,OAAO,CAAC,IAAI,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC,CAAC;SAC5F;QAED,OAAO,KAAK,CAAC,GAAG,CAAC,CAAC,EAAE,WAAW,EAAE,OAAO,EAAE,SAAS,EAAE,QAAQ,EAAE,EAAE,EAAE,CAAC,CAAC;YACnE,EAAE,EAAE,WAAW;YACf,OAAO;YACP,SAAS,EAAE,CAAC,SAAS,CAAC;YACtB,MAAM,EAAE,KAAC,IAAI,IAAC,IAAI,EAAE,QAAQ,CAAC,CAAC,CAAC,YAAY,CAAC,CAAC,CAAC,MAAM,GAAI;YACxD,QAAQ,EAAE,WAAW,KAAK,eAAe,EAAE,WAAW;SACvD,CAAC,CAAC,CAAC;IACN,CAAC,EAAE,CAAC,WAAW,EAAE,eAAe,EAAE,QAAQ,CAAC,CAAC,CAAC;IAE7C,MAAM,cAAc,GAAG,GAAG,EAAE;QAC1B,kBAAkB,CAAC,SAAS,CAAC,CAAC;IAChC,CAAC,CAAC;IAEF,OAAO,CACL,MAAC,
|
|
1
|
+
{"version":3,"file":"CallHandoverForm.js","sourceRoot":"","sources":["../../../src/components/CallControlPanel/CallHandoverForm.tsx"],"names":[],"mappings":"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","sourcesContent":["import { useContext, FunctionComponent, Ref, useState, useMemo, ChangeEvent } from 'react';\nimport styled from 'styled-components';\n\nimport {\n Button,\n Icon,\n registerIcon,\n defaultThemeProp,\n useI18n,\n RadioButtonGroup,\n RadioButton,\n TextArea,\n ComboBox,\n Form,\n createStringMatcher,\n MenuProps\n} from '@pega/cosmos-react-core';\nimport * as timesIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/times.icon';\n\nimport type { TransferReasonOption, TransferData, Contact } from './CallControlPanel.types';\nimport { ContactsContext } from './CalleePicker';\n\nregisterIcon(timesIcon);\n\nexport interface CallHandoverFormProps {\n /**\n * Callback fired on handover submission.\n * @param transferParam the transfer parameters.\n */\n onSubmit: (transferParam: TransferData) => void;\n /** Callback fired on clicking Cancel button. */\n onCancel: () => void;\n /** Transfer reason options. */\n transferOptions: Readonly<TransferReasonOption[]>;\n /** Reference to the root component. */\n ref?: Ref<HTMLDivElement>;\n}\n\nexport const StyledCallHandoverForm = styled(Form)`\n min-width: 50ch;\n`;\n\nStyledCallHandoverForm.defaultProps = defaultThemeProp;\n\nconst CallHandoverForm: FunctionComponent<CallHandoverFormProps> = ({\n onCancel: onClose,\n onSubmit: onTransferCall,\n transferOptions\n}: CallHandoverFormProps) => {\n const t = useI18n();\n const { contacts } = useContext(ContactsContext);\n const [selectedReason, setSelectedReason] = useState<TransferReasonOption>();\n const [selectedContact, setSelectedContact] = useState<Contact>();\n const [filterValue, setFilterValue] = useState('');\n const [comments, setComments] = useState('');\n const [interaction, setInteraction] = useState(true);\n\n const contactsToRender = useMemo<MenuProps['items']>(() => {\n let items = contacts;\n if (filterValue) {\n const matcher = createStringMatcher(filterValue, 'boundary');\n items = items.filter(item => matcher.test(item.primary) || matcher.test(item.phoneNumber));\n }\n\n return items.map(({ phoneNumber, primary, secondary, favorite }) => ({\n id: phoneNumber,\n primary,\n secondary: [secondary],\n visual: <Icon name={favorite ? 'star-solid' : 'star'} />,\n selected: phoneNumber === selectedContact?.phoneNumber\n }));\n }, [filterValue, selectedContact, contacts]);\n\n const clearSelection = () => {\n setSelectedContact(undefined);\n };\n\n return (\n <StyledCallHandoverForm\n actions={\n <>\n <Button variant='secondary' onClick={onClose}>\n {t('cancel')}\n </Button>\n <Button\n variant='primary'\n disabled={!(selectedContact && (!interaction || (selectedReason && comments)))}\n onClick={() => {\n if (!selectedContact) return;\n onTransferCall({\n reason: selectedReason?.id,\n comments,\n interaction,\n phoneNumber: selectedContact.phoneNumber\n });\n }}\n >\n {t('submit')}\n </Button>\n </>\n }\n >\n <RadioButtonGroup name={t('call_panel_handover_call_option_label')}>\n <RadioButton\n label={t('call_panel_handover_call_and_interaction_option')}\n defaultChecked\n onChange={() => setInteraction(true)}\n />\n <RadioButton\n label={t('call_panel_handover_call_only_option')}\n onChange={() => setInteraction(false)}\n />\n </RadioButtonGroup>\n\n <ComboBox\n label={t('call_panel_handover_reason_label')}\n required={interaction}\n disabled={!interaction}\n selected={{\n items: selectedReason ? { id: selectedReason.id, text: selectedReason.label } : undefined\n }}\n menu={{\n items: transferOptions.map(({ id, label }) => ({\n id,\n primary: label,\n selected: id === selectedReason?.id\n })),\n onItemClick: id => setSelectedReason(transferOptions.find(option => option.id === id))\n }}\n />\n\n <TextArea\n name='comments'\n required={interaction}\n disabled={!interaction}\n label={t('call_panel_handover_comments_label')}\n displayCharCount\n maxLength={300}\n value={comments}\n onChange={(e: ChangeEvent<HTMLTextAreaElement>) => setComments(e.target.value)}\n />\n\n <ComboBox\n label={t('call_panel_handover_to_label')}\n required\n selected={\n selectedContact\n ? {\n items: {\n id: selectedContact.phoneNumber,\n text: selectedContact.primary\n }\n }\n : undefined\n }\n value={filterValue}\n onChange={(e: ChangeEvent<HTMLInputElement>) => {\n if (!e.target.value) clearSelection();\n setFilterValue(e.target.value);\n }}\n onBlur={() => {\n setFilterValue('');\n }}\n menu={{\n items: contactsToRender,\n onItemClick: phoneNumber => {\n setFilterValue('');\n setSelectedContact(contacts.find(contact => contact.phoneNumber === phoneNumber));\n },\n emptyText: t('no_items')\n }}\n />\n </StyledCallHandoverForm>\n );\n};\n\nexport default CallHandoverForm;\n"]}
|
|
@@ -1,10 +1,13 @@
|
|
|
1
1
|
import { FunctionComponent, Ref } from 'react';
|
|
2
2
|
import { ForwardProps } from '@pega/cosmos-react-core';
|
|
3
|
+
import { FloatingPanelProps } from './FloatingPanel';
|
|
3
4
|
export interface ExternalCTIProps {
|
|
4
5
|
/** The heading rendered. */
|
|
5
6
|
heading: string;
|
|
6
7
|
/** If true, the component will be draggable. */
|
|
7
8
|
draggable?: boolean;
|
|
9
|
+
/** If true, the component will be visible. */
|
|
10
|
+
visible?: FloatingPanelProps['visible'];
|
|
8
11
|
/** Container element size in px. */
|
|
9
12
|
size?: {
|
|
10
13
|
width: number;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ExternalCTI.d.ts","sourceRoot":"","sources":["../../../src/components/CallControlPanel/ExternalCTI.tsx"],"names":[],"mappings":"AAAA,OAAO,EAA6B,iBAAiB,EAAmB,GAAG,EAAE,MAAM,OAAO,CAAC;AAG3F,OAAO,EAAoB,YAAY,EAAE,MAAM,yBAAyB,CAAC;
|
|
1
|
+
{"version":3,"file":"ExternalCTI.d.ts","sourceRoot":"","sources":["../../../src/components/CallControlPanel/ExternalCTI.tsx"],"names":[],"mappings":"AAAA,OAAO,EAA6B,iBAAiB,EAAmB,GAAG,EAAE,MAAM,OAAO,CAAC;AAG3F,OAAO,EAAoB,YAAY,EAAE,MAAM,yBAAyB,CAAC;AAEzE,OAAsB,EAAE,kBAAkB,EAAE,MAAM,iBAAiB,CAAC;AAEpE,MAAM,WAAW,gBAAgB;IAC/B,4BAA4B;IAC5B,OAAO,EAAE,MAAM,CAAC;IAChB,gDAAgD;IAChD,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,8CAA8C;IAC9C,OAAO,CAAC,EAAE,kBAAkB,CAAC,SAAS,CAAC,CAAC;IACxC,oCAAoC;IACpC,IAAI,CAAC,EAAE;QACL,KAAK,EAAE,MAAM,CAAC;QACd,MAAM,EAAE,MAAM,CAAC;KAChB,CAAC;IACF,kCAAkC;IAClC,GAAG,CAAC,EAAE,GAAG,CAAC,cAAc,CAAC,CAAC;CAC3B;AAgCD,QAAA,MAAM,WAAW,EAAE,iBAAiB,CAAC,gBAAgB,GAAG,YAAY,CAqBnE,CAAC;AAEF,eAAe,WAAW,CAAC"}
|
|
@@ -21,8 +21,8 @@ const StyledCTIContainer = styled.div `
|
|
|
21
21
|
overflow-y: auto;
|
|
22
22
|
`;
|
|
23
23
|
StyledCTIContainer.defaultProps = defaultThemeProp;
|
|
24
|
-
const ExternalCTI = forwardRef(({ heading, draggable = false, size }, ref) => {
|
|
25
|
-
return (_jsx(StyledExternalCTIPanel, { heading: heading, draggable: draggable, children: _jsx(StyledCTIContainer, { style: size
|
|
24
|
+
const ExternalCTI = forwardRef(({ heading, draggable = false, visible = true, size }, ref) => {
|
|
25
|
+
return (_jsx(StyledExternalCTIPanel, { heading: heading, draggable: draggable, visible: visible, children: _jsx(StyledCTIContainer, { style: size
|
|
26
26
|
? {
|
|
27
27
|
'--cti-container-width': `${size.width}px`,
|
|
28
28
|
'--cti-container-height': `${size.height}px`
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ExternalCTI.js","sourceRoot":"","sources":["../../../src/components/CallControlPanel/ExternalCTI.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAiB,UAAU,EAA2C,MAAM,OAAO,CAAC;AAC3F,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AAEhD,OAAO,EAAE,gBAAgB,EAAgB,MAAM,yBAAyB,CAAC;AAEzE,OAAO,
|
|
1
|
+
{"version":3,"file":"ExternalCTI.js","sourceRoot":"","sources":["../../../src/components/CallControlPanel/ExternalCTI.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAiB,UAAU,EAA2C,MAAM,OAAO,CAAC;AAC3F,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AAEhD,OAAO,EAAE,gBAAgB,EAAgB,MAAM,yBAAyB,CAAC;AAEzE,OAAO,aAAqC,MAAM,iBAAiB,CAAC;AAkBpE,MAAM,sBAAsB,GAAG,MAAM,CAAC,aAAa,CAAC,CAClD,CAAC,EACC,KAAK,EAAE,EACL,UAAU,EAAE,EACV,IAAI,EAAE,EAAE,eAAe,EAAE,YAAY,EAAE,EACxC,EACF,EACF,EAAE,EAAE;IACH,OAAO,GAAG,CAAA;;;;;mCAKqB,YAAY;iCACd,YAAY;;KAExC,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,sBAAsB,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAEvD,MAAM,kBAAkB,GAAG,MAAM,CAAC,GAAG,CAAA;;;;CAIpC,CAAC;AAEF,kBAAkB,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAEnD,MAAM,WAAW,GAAuD,UAAU,CAChF,CACE,EAAE,OAAO,EAAE,SAAS,GAAG,KAAK,EAAE,OAAO,GAAG,IAAI,EAAE,IAAI,EAAqC,EACvF,GAA4B,EAC5B,EAAE;IACF,OAAO,CACL,KAAC,sBAAsB,IAAC,OAAO,EAAE,OAAO,EAAE,SAAS,EAAE,SAAS,EAAE,OAAO,EAAE,OAAO,YAC9E,KAAC,kBAAkB,IACjB,KAAK,EACH,IAAI;gBACF,CAAC,CAAE;oBACC,uBAAuB,EAAE,GAAG,IAAI,CAAC,KAAK,IAAI;oBAC1C,wBAAwB,EAAE,GAAG,IAAI,CAAC,MAAM,IAAI;iBAC3B;gBACrB,CAAC,CAAC,SAAS,EAEf,GAAG,EAAE,GAAG,GACR,GACqB,CAC1B,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,eAAe,WAAW,CAAC","sourcesContent":["import { CSSProperties, forwardRef, FunctionComponent, PropsWithoutRef, Ref } from 'react';\nimport styled, { css } from 'styled-components';\n\nimport { defaultThemeProp, ForwardProps } from '@pega/cosmos-react-core';\n\nimport FloatingPanel, { FloatingPanelProps } from './FloatingPanel';\n\nexport interface ExternalCTIProps {\n /** The heading rendered. */\n heading: string;\n /** If true, the component will be draggable. */\n draggable?: boolean;\n /** If true, the component will be visible. */\n visible?: FloatingPanelProps['visible'];\n /** Container element size in px. */\n size?: {\n width: number;\n height: number;\n };\n /** Reference to the container. */\n ref?: Ref<HTMLDivElement>;\n}\n\nconst StyledExternalCTIPanel = styled(FloatingPanel)(\n ({\n theme: {\n components: {\n card: { 'border-radius': borderRadius }\n }\n }\n }) => {\n return css`\n width: auto;\n iframe {\n border: transparent;\n display: block;\n border-end-start-radius: ${borderRadius};\n border-end-end-radius: ${borderRadius};\n }\n `;\n }\n);\n\nStyledExternalCTIPanel.defaultProps = defaultThemeProp;\n\nconst StyledCTIContainer = styled.div`\n width: var(--cti-container-width, auto);\n height: var(--cti-container-height, auto);\n overflow-y: auto;\n`;\n\nStyledCTIContainer.defaultProps = defaultThemeProp;\n\nconst ExternalCTI: FunctionComponent<ExternalCTIProps & ForwardProps> = forwardRef(\n (\n { heading, draggable = false, visible = true, size }: PropsWithoutRef<ExternalCTIProps>,\n ref: ExternalCTIProps['ref']\n ) => {\n return (\n <StyledExternalCTIPanel heading={heading} draggable={draggable} visible={visible}>\n <StyledCTIContainer\n style={\n size\n ? ({\n '--cti-container-width': `${size.width}px`,\n '--cti-container-height': `${size.height}px`\n } as CSSProperties)\n : undefined\n }\n ref={ref}\n />\n </StyledExternalCTIPanel>\n );\n }\n);\n\nexport default ExternalCTI;\n"]}
|
|
@@ -21,12 +21,15 @@ export interface FloatingPanelProps {
|
|
|
21
21
|
actions?: FloatingPanelActionProps[];
|
|
22
22
|
/** If true, the component will be draggable */
|
|
23
23
|
draggable?: boolean;
|
|
24
|
+
/** If true, the panel is visible. */
|
|
25
|
+
visible?: boolean;
|
|
24
26
|
/** Reference to the root component. */
|
|
25
27
|
ref?: Ref<HTMLDivElement>;
|
|
26
28
|
}
|
|
27
29
|
export declare const StyledFloatingPanel: import("styled-components").StyledComponent<"article", import("styled-components").DefaultTheme, Partial<import("@pega/cosmos-react-core").CardProps> & {
|
|
28
30
|
isCollapsed: boolean;
|
|
29
31
|
isDraggable?: boolean | undefined;
|
|
32
|
+
isVisible?: boolean | undefined;
|
|
30
33
|
}, never>;
|
|
31
34
|
declare const FloatingPanel: FunctionComponent<FloatingPanelProps & ForwardProps>;
|
|
32
35
|
export default FloatingPanel;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"FloatingPanel.d.ts","sourceRoot":"","sources":["../../../src/components/CallControlPanel/FloatingPanel.tsx"],"names":[],"mappings":"AAAA,OAAO,EAGL,iBAAiB,EAEjB,SAAS,EACT,GAAG,EAKJ,MAAM,OAAO,CAAC;AAGf,OAAO,EAQL,YAAY,EAGZ,MAAM,EACN,SAAS,EAIV,MAAM,yBAAyB,CAAC;AAYjC,MAAM,WAAW,wBAAyB,SAAQ,YAAY;IAC5D,4EAA4E;IAC5E,EAAE,EAAE,MAAM,CAAC,IAAI,CAAC,CAAC;IACjB,sCAAsC;IACtC,IAAI,EAAE,MAAM,CAAC,MAAM,CAAC,CAAC;IACrB,4CAA4C;IAC5C,IAAI,EAAE,SAAS,CAAC;IAChB,iDAAiD;IACjD,QAAQ,CAAC,EAAE,MAAM,CAAC,UAAU,CAAC,CAAC;IAC9B,yCAAyC;IACzC,OAAO,EAAE,WAAW,CAAC,MAAM,CAAC,SAAS,CAAC,CAAC,CAAC;CACzC;AAED,MAAM,WAAW,kBAAkB;IACjC,4BAA4B;IAC5B,OAAO,EAAE,MAAM,CAAC;IAChB,2BAA2B;IAC3B,QAAQ,EAAE,SAAS,CAAC;IACpB,6CAA6C;IAC7C,OAAO,CAAC,EAAE,wBAAwB,EAAE,CAAC;IACrC,+CAA+C;IAC/C,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,uCAAuC;IACvC,GAAG,CAAC,EAAE,GAAG,CAAC,cAAc,CAAC,CAAC;CAC3B;AAED,eAAO,MAAM,mBAAmB;iBACjB,OAAO
|
|
1
|
+
{"version":3,"file":"FloatingPanel.d.ts","sourceRoot":"","sources":["../../../src/components/CallControlPanel/FloatingPanel.tsx"],"names":[],"mappings":"AAAA,OAAO,EAGL,iBAAiB,EAEjB,SAAS,EACT,GAAG,EAKJ,MAAM,OAAO,CAAC;AAGf,OAAO,EAQL,YAAY,EAGZ,MAAM,EACN,SAAS,EAIV,MAAM,yBAAyB,CAAC;AAYjC,MAAM,WAAW,wBAAyB,SAAQ,YAAY;IAC5D,4EAA4E;IAC5E,EAAE,EAAE,MAAM,CAAC,IAAI,CAAC,CAAC;IACjB,sCAAsC;IACtC,IAAI,EAAE,MAAM,CAAC,MAAM,CAAC,CAAC;IACrB,4CAA4C;IAC5C,IAAI,EAAE,SAAS,CAAC;IAChB,iDAAiD;IACjD,QAAQ,CAAC,EAAE,MAAM,CAAC,UAAU,CAAC,CAAC;IAC9B,yCAAyC;IACzC,OAAO,EAAE,WAAW,CAAC,MAAM,CAAC,SAAS,CAAC,CAAC,CAAC;CACzC;AAED,MAAM,WAAW,kBAAkB;IACjC,4BAA4B;IAC5B,OAAO,EAAE,MAAM,CAAC;IAChB,2BAA2B;IAC3B,QAAQ,EAAE,SAAS,CAAC;IACpB,6CAA6C;IAC7C,OAAO,CAAC,EAAE,wBAAwB,EAAE,CAAC;IACrC,+CAA+C;IAC/C,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,qCAAqC;IACrC,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,uCAAuC;IACvC,GAAG,CAAC,EAAE,GAAG,CAAC,cAAc,CAAC,CAAC;CAC3B;AAED,eAAO,MAAM,mBAAmB;iBACjB,OAAO;;;SAsCpB,CAAC;AAIH,QAAA,MAAM,aAAa,EAAE,iBAAiB,CAAC,kBAAkB,GAAG,YAAY,CAoEvE,CAAC;AAEF,eAAe,aAAa,CAAC"}
|
|
@@ -11,7 +11,7 @@ const resetPopoverToDefaultPosition = (containerRef) => {
|
|
|
11
11
|
if (containerRef && containerRef.current)
|
|
12
12
|
containerRef.current.style.transform = 'translate(0px, 0px)';
|
|
13
13
|
};
|
|
14
|
-
export const StyledFloatingPanel = styled(StyledCard)(({ theme, isCollapsed, isDraggable }) => {
|
|
14
|
+
export const StyledFloatingPanel = styled(StyledCard)(({ theme, isCollapsed, isDraggable, isVisible = true }) => {
|
|
15
15
|
return css `
|
|
16
16
|
max-height: calc(100% - 2rem);
|
|
17
17
|
position: fixed;
|
|
@@ -20,12 +20,19 @@ export const StyledFloatingPanel = styled(StyledCard)(({ theme, isCollapsed, isD
|
|
|
20
20
|
inset-inline-end: calc(2 * ${theme.base.spacing});
|
|
21
21
|
bottom: calc(2 * ${theme.base.spacing});
|
|
22
22
|
box-shadow: ${theme.base.shadow.high};
|
|
23
|
+
|
|
24
|
+
${!isVisible &&
|
|
25
|
+
css `
|
|
26
|
+
display: none;
|
|
27
|
+
`}
|
|
28
|
+
|
|
23
29
|
${isCollapsed &&
|
|
24
30
|
css `
|
|
25
31
|
transform: translateY(
|
|
26
32
|
calc(100% - var(--headerHeight) + calc(2 * ${theme.base.spacing}))
|
|
27
33
|
) !important;
|
|
28
34
|
`}
|
|
35
|
+
|
|
29
36
|
${StyledCardHeader} {
|
|
30
37
|
${!isCollapsed &&
|
|
31
38
|
isDraggable &&
|
|
@@ -41,7 +48,7 @@ export const StyledFloatingPanel = styled(StyledCard)(({ theme, isCollapsed, isD
|
|
|
41
48
|
`;
|
|
42
49
|
});
|
|
43
50
|
StyledFloatingPanel.defaultProps = defaultThemeProp;
|
|
44
|
-
const FloatingPanel = forwardRef(({ heading, actions = [], draggable, children, ...restProps }, ref) => {
|
|
51
|
+
const FloatingPanel = forwardRef(({ heading, actions = [], draggable, children, visible = true, ...restProps }, ref) => {
|
|
45
52
|
const t = useI18n();
|
|
46
53
|
const [collapsed, setCollapsed] = useState(false);
|
|
47
54
|
const containerRef = useConsolidatedRef(ref);
|
|
@@ -53,7 +60,7 @@ const FloatingPanel = forwardRef(({ heading, actions = [], draggable, children,
|
|
|
53
60
|
setHeaderHeight(containerRef.current.querySelector('header')?.offsetHeight || 0);
|
|
54
61
|
}
|
|
55
62
|
}, [containerRef.current]);
|
|
56
|
-
return (_jsxs(
|
|
63
|
+
return (_jsxs(StyledFloatingPanel, { ...restProps, ref: containerRef, isCollapsed: collapsed, isDraggable: draggable, isVisible: visible, style: { '--headerHeight': `${headerHeight}px` }, children: [_jsx(CardHeader, { ref: dragRef, actions: _jsxs(_Fragment, { children: [actions.map(({ id, icon, text, ...restAction }) => (_createElement(Button, { ...restAction, icon: true, variant: 'simple', key: id, label: text },
|
|
57
64
|
_jsx(Icon, { name: icon })))), _jsx(Button, { icon: true, variant: 'simple', label: t(collapsed ? 'call_panel_expand' : 'call_panel_collapse'), onClick: () => {
|
|
58
65
|
resetPopoverToDefaultPosition(containerRef);
|
|
59
66
|
setCollapsed(state => !state);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"FloatingPanel.js","sourceRoot":"","sources":["../../../src/components/CallControlPanel/FloatingPanel.tsx"],"names":[],"mappings":";;AAAA,OAAO,EAEL,UAAU,EAMV,eAAe,EACf,MAAM,EACN,QAAQ,EACT,MAAM,OAAO,CAAC;AACf,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AAEhD,OAAO,EACL,UAAU,EACV,MAAM,EACN,OAAO,EACP,IAAI,EACJ,YAAY,EACZ,IAAI,EACJ,IAAI,EAEJ,kBAAkB,EAClB,YAAY,EAGZ,gBAAgB,EAChB,YAAY,EACZ,UAAU,EACX,MAAM,yBAAyB,CAAC;AACjC,OAAO,KAAK,aAAa,MAAM,mEAAmE,CAAC;AACnG,OAAO,KAAK,cAAc,MAAM,oEAAoE,CAAC;AACrG,OAAO,EAAE,gBAAgB,EAAE,MAAM,wDAAwD,CAAC;AAE1F,YAAY,CAAC,aAAa,EAAE,cAAc,CAAC,CAAC;AAE5C,MAAM,6BAA6B,GAAG,CAAC,YAAuC,EAAQ,EAAE;IACtF,IAAI,YAAY,IAAI,YAAY,CAAC,OAAO;QACtC,YAAY,CAAC,OAAO,CAAC,KAAK,CAAC,SAAS,GAAG,qBAAqB,CAAC;AACjE,CAAC,CAAC;
|
|
1
|
+
{"version":3,"file":"FloatingPanel.js","sourceRoot":"","sources":["../../../src/components/CallControlPanel/FloatingPanel.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n CSSProperties,\n forwardRef,\n FunctionComponent,\n PropsWithoutRef,\n ReactNode,\n Ref,\n RefObject,\n useLayoutEffect,\n useRef,\n useState\n} from 'react';\nimport styled, { css } from 'styled-components';\n\nimport {\n CardHeader,\n Button,\n useI18n,\n Icon,\n registerIcon,\n Flex,\n Text,\n ForwardProps,\n useConsolidatedRef,\n useDraggable,\n Action,\n IconNames,\n defaultThemeProp,\n StyledButton,\n StyledCard\n} from '@pega/cosmos-react-core';\nimport * as caretDownIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/caret-down.icon';\nimport * as phoneSolidIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/phone-solid.icon';\nimport { StyledCardHeader } from '@pega/cosmos-react-core/lib/components/Card/CardHeader';\n\nregisterIcon(caretDownIcon, phoneSolidIcon);\n\nconst resetPopoverToDefaultPosition = (containerRef: RefObject<HTMLDivElement>): void => {\n if (containerRef && containerRef.current)\n containerRef.current.style.transform = 'translate(0px, 0px)';\n};\n\nexport interface FloatingPanelActionProps extends ForwardProps {\n /** A string to uniquely identify this Action within the onClick handler. */\n id: Action['id'];\n /** The text content of the Action. */\n text: Action['text'];\n /** Name of the icon from the cosmos set. */\n icon: IconNames;\n /** Determines if the Action will be disabled. */\n disabled?: Action['disabled'];\n /** Called when the Action is clicked. */\n onClick: NonNullable<Action['onClick']>;\n}\n\nexport interface FloatingPanelProps {\n /** The heading rendered. */\n heading: string;\n /** Content of the panel */\n children: ReactNode;\n /** Action button to be rendered in header */\n actions?: FloatingPanelActionProps[];\n /** If true, the component will be draggable */\n draggable?: boolean;\n /** If true, the panel is visible. */\n visible?: boolean;\n /** Reference to the root component. */\n ref?: Ref<HTMLDivElement>;\n}\n\nexport const StyledFloatingPanel = styled(StyledCard)<{\n isCollapsed: boolean;\n isDraggable?: boolean;\n isVisible?: boolean;\n}>(({ theme, isCollapsed, isDraggable, isVisible = true }) => {\n return css`\n max-height: calc(100% - 2rem);\n position: fixed;\n z-index: ${theme.base['z-index'].modal};\n width: 25rem;\n inset-inline-end: calc(2 * ${theme.base.spacing});\n bottom: calc(2 * ${theme.base.spacing});\n box-shadow: ${theme.base.shadow.high};\n\n ${!isVisible &&\n css`\n display: none;\n `}\n\n ${isCollapsed &&\n css`\n transform: translateY(\n calc(100% - var(--headerHeight) + calc(2 * ${theme.base.spacing}))\n ) !important;\n `}\n\n ${StyledCardHeader} {\n ${!isCollapsed &&\n isDraggable &&\n css`\n cursor: all-scroll;\n `}\n }\n ${StyledCardHeader} ${StyledButton}:last-child {\n transition: transform calc(2 * ${theme.base.animation.speed})\n ${theme.base.animation.timing.ease};\n transform: ${isCollapsed ? 'rotate(-180deg)' : 'rotate(0)'};\n }\n `;\n});\n\nStyledFloatingPanel.defaultProps = defaultThemeProp;\n\nconst FloatingPanel: FunctionComponent<FloatingPanelProps & ForwardProps> = forwardRef(\n (\n {\n heading,\n actions = [],\n draggable,\n children,\n visible = true,\n ...restProps\n }: PropsWithoutRef<FloatingPanelProps>,\n ref: FloatingPanelProps['ref']\n ) => {\n const t = useI18n();\n const [collapsed, setCollapsed] = useState(false);\n const containerRef = useConsolidatedRef(ref);\n const dragRef = useRef<HTMLDivElement>(null);\n useDraggable(containerRef, dragRef, !collapsed && draggable);\n\n const [headerHeight, setHeaderHeight] = useState(0);\n\n useLayoutEffect(() => {\n if (containerRef.current) {\n setHeaderHeight(containerRef.current.querySelector('header')?.offsetHeight || 0);\n }\n }, [containerRef.current]);\n\n return (\n <StyledFloatingPanel\n {...restProps}\n ref={containerRef}\n isCollapsed={collapsed}\n isDraggable={draggable}\n isVisible={visible}\n style={{ '--headerHeight': `${headerHeight}px` } as CSSProperties}\n >\n <CardHeader\n ref={dragRef}\n actions={\n <>\n {actions.map(({ id, icon, text, ...restAction }) => (\n <Button {...restAction} icon variant='simple' key={id} label={text}>\n <Icon name={icon} />\n </Button>\n ))}\n <Button\n icon\n variant='simple'\n key='expand-collapse'\n label={t(collapsed ? 'call_panel_expand' : 'call_panel_collapse')}\n onClick={() => {\n resetPopoverToDefaultPosition(containerRef);\n setCollapsed(state => !state);\n }}\n >\n <Icon name='caret-down' />\n </Button>\n </>\n }\n >\n <Flex container={{ alignItems: 'center', itemGap: 1 }}>\n <Icon name='phone-solid' />\n <Text variant='h3'>{heading}</Text>\n </Flex>\n </CardHeader>\n {children}\n </StyledFloatingPanel>\n );\n }\n);\n\nexport default FloatingPanel;\n"]}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@pega/cosmos-react-cs",
|
|
3
|
-
"version": "3.0.0-dev.
|
|
3
|
+
"version": "3.0.0-dev.14.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.14.0",
|
|
24
|
+
"@pega/cosmos-react-dnd": "3.0.0-dev.14.0",
|
|
25
25
|
"@types/react": "^16.14.24 || ^17.0.38",
|
|
26
26
|
"@types/react-dom": "^16.9.14 || ^17.0.11",
|
|
27
27
|
"@types/styled-components": "^5.1.7",
|