@pega/cosmos-react-cs 3.0.0-dev.27.2 → 3.0.0-dev.28.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.
|
@@ -4,9 +4,9 @@ import { forwardRef, useLayoutEffect, useRef, useState } from 'react';
|
|
|
4
4
|
import styled, { css } from 'styled-components';
|
|
5
5
|
import { CardHeader, Button, useI18n, Icon, registerIcon, Flex, Text, useConsolidatedRef, useDraggable, defaultThemeProp, StyledButton, StyledCard } from '@pega/cosmos-react-core';
|
|
6
6
|
import * as caretDownIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/caret-down.icon';
|
|
7
|
-
import * as
|
|
7
|
+
import * as headsetIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/headset.icon';
|
|
8
8
|
import { StyledCardHeader } from '@pega/cosmos-react-core/lib/components/Card/CardHeader';
|
|
9
|
-
registerIcon(caretDownIcon,
|
|
9
|
+
registerIcon(caretDownIcon, headsetIcon);
|
|
10
10
|
const resetPopoverToDefaultPosition = (containerRef) => {
|
|
11
11
|
if (containerRef && containerRef.current)
|
|
12
12
|
containerRef.current.style.transform = 'translate(0px, 0px)';
|
|
@@ -64,7 +64,7 @@ const FloatingPanel = forwardRef(({ heading, actions = [], draggable, children,
|
|
|
64
64
|
_jsx(Icon, { name: icon })))), _jsx(Button, { icon: true, variant: 'simple', label: t(collapsed ? 'call_panel_expand' : 'call_panel_collapse'), onClick: () => {
|
|
65
65
|
resetPopoverToDefaultPosition(containerRef);
|
|
66
66
|
setCollapsed(state => !state);
|
|
67
|
-
}, children: _jsx(Icon, { name: 'caret-down' }) }, 'expand-collapse')] }), children: _jsxs(Flex, { container: { alignItems: 'center', itemGap: 1 }, children: [_jsx(Icon, { name: '
|
|
67
|
+
}, children: _jsx(Icon, { name: 'caret-down' }) }, 'expand-collapse')] }), children: _jsxs(Flex, { container: { alignItems: 'center', itemGap: 1 }, children: [_jsx(Icon, { name: 'headset' }), _jsx(Text, { variant: 'h3', children: heading })] }) }), children] }));
|
|
68
68
|
});
|
|
69
69
|
export default FloatingPanel;
|
|
70
70
|
//# sourceMappingURL=FloatingPanel.js.map
|
|
@@ -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,
|
|
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 headsetIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/headset.icon';\nimport { StyledCardHeader } from '@pega/cosmos-react-core/lib/components/Card/CardHeader';\n\nregisterIcon(caretDownIcon, headsetIcon);\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 }, [collapsed]);\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='headset' />\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.28.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.28.0",
|
|
24
|
+
"@pega/cosmos-react-dnd": "3.0.0-dev.28.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",
|