@synerise/ds-information-card 1.6.4 → 1.6.6
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/CHANGELOG.md +8 -0
- package/dist/InformationCard.d.ts +6 -6
- package/dist/InformationCard.js +82 -135
- package/dist/InformationCard.styles.d.ts +25 -25
- package/dist/InformationCard.styles.js +68 -69
- package/dist/InformationCard.types.d.ts +8 -8
- package/dist/InformationCard.types.js +1 -1
- package/dist/InformationCard.utils.d.ts +3 -3
- package/dist/InformationCard.utils.js +29 -36
- package/dist/InformationCardActions/InformationCardActions.d.ts +2 -2
- package/dist/InformationCardActions/InformationCardActions.js +22 -26
- package/dist/InformationCardActions/InformationCardActions.types.d.ts +2 -2
- package/dist/InformationCardActions/InformationCardActions.types.js +1 -1
- package/dist/InformationCardDescription/InformationCardDescription.d.ts +2 -2
- package/dist/InformationCardDescription/InformationCardDescription.js +23 -29
- package/dist/InformationCardFooter/InformationCardFooter.d.ts +2 -2
- package/dist/InformationCardFooter/InformationCardFooter.js +29 -42
- package/dist/InformationCardFooter/InformationCardFooter.types.d.ts +3 -3
- package/dist/InformationCardFooter/InformationCardFooter.types.js +1 -1
- package/dist/InformationCardPropertyList/InformationCardPropertyList.d.ts +2 -2
- package/dist/InformationCardPropertyList/InformationCardPropertyList.js +32 -30
- package/dist/InformationCardPropertyList/InformationCardPropertyList.types.d.ts +1 -1
- package/dist/InformationCardPropertyList/InformationCardPropertyList.types.js +1 -1
- package/dist/InformationCardSummary/InformationCardSummary.d.ts +2 -2
- package/dist/InformationCardSummary/InformationCardSummary.js +29 -30
- package/dist/InformationCardSummary/InformationCardSummary.types.d.ts +2 -2
- package/dist/InformationCardSummary/InformationCardSummary.types.js +1 -1
- package/dist/InformationCardTooltip/InformationCard.constants.d.ts +1 -1
- package/dist/InformationCardTooltip/InformationCard.constants.js +13 -6
- package/dist/InformationCardTooltip/InformationCardTooltip.d.ts +4 -4
- package/dist/InformationCardTooltip/InformationCardTooltip.js +27 -43
- package/dist/InformationCardTooltip/InformationCardTooltip.styles.d.ts +1 -1
- package/dist/InformationCardTooltip/InformationCardTooltip.styles.js +6 -3
- package/dist/InformationCardTooltip/InformationCardTooltip.types.d.ts +5 -5
- package/dist/InformationCardTooltip/InformationCardTooltip.types.js +1 -1
- package/dist/index.js +12 -7
- package/dist/modules.d.js +1 -1
- package/dist/modules.d.ts +0 -0
- package/package.json +23 -23
|
@@ -1,36 +1,27 @@
|
|
|
1
|
-
|
|
2
|
-
import
|
|
3
|
-
import
|
|
4
|
-
import
|
|
5
|
-
import
|
|
6
|
-
import
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
return /*#__PURE__*/React.createElement(Initials, {
|
|
10
|
-
name: name
|
|
11
|
-
});
|
|
1
|
+
import { jsx } from "react/jsx-runtime";
|
|
2
|
+
import Alert from "@synerise/ds-alert";
|
|
3
|
+
import Avatar, { ObjectAvatar } from "@synerise/ds-avatar";
|
|
4
|
+
import Badge from "@synerise/ds-badge";
|
|
5
|
+
import Icon from "@synerise/ds-icon";
|
|
6
|
+
import { ExtraInfo } from "./InformationCard.styles.js";
|
|
7
|
+
function buildInitialsBadge(name) {
|
|
8
|
+
return /* @__PURE__ */ jsx(Initials, { name });
|
|
12
9
|
}
|
|
13
|
-
|
|
14
|
-
return
|
|
15
|
-
type: level || 'warning',
|
|
16
|
-
message: message
|
|
17
|
-
}));
|
|
10
|
+
function buildExtraInfo(message, level) {
|
|
11
|
+
return /* @__PURE__ */ jsx(ExtraInfo, { children: /* @__PURE__ */ jsx(Alert.InlineAlert, { type: level || "warning", message }) });
|
|
18
12
|
}
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
return name.substring(0, hasTokens ? 1 : 2) + (hasTokens ? name.charAt(name.lastIndexOf(
|
|
13
|
+
function getInitials(name) {
|
|
14
|
+
const hasTokens = name.indexOf(" ") !== -1;
|
|
15
|
+
return name.substring(0, hasTokens ? 1 : 2) + (hasTokens ? name.charAt(name.lastIndexOf(" ") + 1) : "");
|
|
22
16
|
}
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
shape: "circle",
|
|
29
|
-
backgroundColor: "blue"
|
|
30
|
-
}, name && getInitials(name) || children));
|
|
17
|
+
function Initials({
|
|
18
|
+
name,
|
|
19
|
+
children
|
|
20
|
+
}) {
|
|
21
|
+
return /* @__PURE__ */ jsx(Badge, { children: /* @__PURE__ */ jsx(Avatar, { size: "medium", shape: "circle", backgroundColor: "blue", children: name && getInitials(name) || children }) });
|
|
31
22
|
}
|
|
32
|
-
|
|
33
|
-
|
|
23
|
+
function buildIconBadge(data) {
|
|
24
|
+
const avatarExtra = {
|
|
34
25
|
object: {}
|
|
35
26
|
};
|
|
36
27
|
if (data.avatarTooltipText) {
|
|
@@ -38,10 +29,12 @@ export function buildIconBadge(data) {
|
|
|
38
29
|
description: data.avatarTooltipText
|
|
39
30
|
};
|
|
40
31
|
}
|
|
41
|
-
return
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
32
|
+
return /* @__PURE__ */ jsx(ObjectAvatar, { ...avatarExtra, color: data.iconColor, iconComponent: /* @__PURE__ */ jsx(Icon, { component: data.iconElement }) });
|
|
33
|
+
}
|
|
34
|
+
export {
|
|
35
|
+
Initials,
|
|
36
|
+
buildExtraInfo,
|
|
37
|
+
buildIconBadge,
|
|
38
|
+
buildInitialsBadge,
|
|
39
|
+
getInitials
|
|
40
|
+
};
|
|
@@ -1,3 +1,3 @@
|
|
|
1
|
-
import React from 'react';
|
|
2
|
-
import {
|
|
1
|
+
import { default as React } from 'react';
|
|
2
|
+
import { InformationCardActionsProps } from './InformationCardActions.types';
|
|
3
3
|
export declare const InformationCardActions: ({ onHeaderClick, navigationLabel, items, menuProps, maxHeight, }: InformationCardActionsProps) => React.JSX.Element;
|
|
@@ -1,26 +1,22 @@
|
|
|
1
|
-
|
|
2
|
-
import
|
|
3
|
-
import
|
|
4
|
-
import
|
|
5
|
-
import
|
|
6
|
-
import
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
return
|
|
16
|
-
label: navigationLabel ||
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
}, /*#__PURE__*/React.createElement(Menu, _extends({}, menuProps, {
|
|
24
|
-
dataSource: items
|
|
25
|
-
})))));
|
|
26
|
-
};
|
|
1
|
+
import { jsxs, Fragment, jsx } from "react/jsx-runtime";
|
|
2
|
+
import { FormattedMessage } from "react-intl";
|
|
3
|
+
import Dropdown from "@synerise/ds-dropdown";
|
|
4
|
+
import Menu from "@synerise/ds-menu";
|
|
5
|
+
import Scrollbar from "@synerise/ds-scrollbar";
|
|
6
|
+
import { InformationCardActionsWrapper } from "../InformationCard.styles.js";
|
|
7
|
+
const NAV_HEIGHT = 61;
|
|
8
|
+
const InformationCardActions = ({
|
|
9
|
+
onHeaderClick,
|
|
10
|
+
navigationLabel,
|
|
11
|
+
items,
|
|
12
|
+
menuProps,
|
|
13
|
+
maxHeight
|
|
14
|
+
}) => {
|
|
15
|
+
return /* @__PURE__ */ jsxs(Fragment, { children: [
|
|
16
|
+
/* @__PURE__ */ jsx(Dropdown.BackAction, { label: navigationLabel || /* @__PURE__ */ jsx(FormattedMessage, { id: "DS.INFORMATION-CARD.QUICK-ACTIONS", defaultMessage: "Quick actions" }), onClick: onHeaderClick }),
|
|
17
|
+
/* @__PURE__ */ jsx(InformationCardActionsWrapper, { children: /* @__PURE__ */ jsx(Scrollbar, { maxHeight: maxHeight ? maxHeight - NAV_HEIGHT : void 0, children: /* @__PURE__ */ jsx(Menu, { ...menuProps, dataSource: items }) }) })
|
|
18
|
+
] });
|
|
19
|
+
};
|
|
20
|
+
export {
|
|
21
|
+
InformationCardActions
|
|
22
|
+
};
|
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
import {
|
|
2
|
-
import {
|
|
1
|
+
import { ReactNode } from 'react';
|
|
2
|
+
import { AntdMenuProps, MenuItemProps } from '@synerise/ds-menu';
|
|
3
3
|
export type InformationCardActionsProps = {
|
|
4
4
|
items: MenuItemProps[];
|
|
5
5
|
menuProps?: Partial<AntdMenuProps>;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
|
|
1
|
+
|
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
import React,
|
|
2
|
-
import {
|
|
1
|
+
import { default as React, ReactNode } from 'react';
|
|
2
|
+
import { SubtleTextAreaProps } from '@synerise/ds-subtle-form/dist/Elements/TextArea/TextArea.types';
|
|
3
3
|
type InformationCardDescriptionProps = {
|
|
4
4
|
extraInformation?: ReactNode;
|
|
5
5
|
descriptionConfig?: SubtleTextAreaProps | string | null;
|
|
@@ -1,32 +1,26 @@
|
|
|
1
|
-
|
|
2
|
-
import
|
|
3
|
-
import SubtleForm from
|
|
4
|
-
import
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
setDescription = _useState[1];
|
|
12
|
-
var renderDescription = function renderDescription() {
|
|
1
|
+
import { jsxs, jsx, Fragment } from "react/jsx-runtime";
|
|
2
|
+
import { useState } from "react";
|
|
3
|
+
import SubtleForm from "@synerise/ds-subtle-form";
|
|
4
|
+
import { DescriptionWrapper, AlertWrapper, NonEditableWrapper } from "../InformationCard.styles.js";
|
|
5
|
+
const InformationCardDescription = ({
|
|
6
|
+
extraInformation = void 0,
|
|
7
|
+
descriptionConfig
|
|
8
|
+
}) => {
|
|
9
|
+
const [description, setDescription] = useState("");
|
|
10
|
+
const renderDescription = () => {
|
|
13
11
|
if (descriptionConfig) {
|
|
14
|
-
return typeof descriptionConfig ===
|
|
15
|
-
|
|
16
|
-
value
|
|
17
|
-
|
|
18
|
-
descriptionConfig.onChange && descriptionConfig.onChange(value);
|
|
19
|
-
setDescription(value);
|
|
20
|
-
},
|
|
21
|
-
placeholder: "placeholder",
|
|
22
|
-
suffixTooltip: "Edit"
|
|
23
|
-
}, descriptionConfig, {
|
|
24
|
-
disabled: descriptionConfig.disabled
|
|
25
|
-
}));
|
|
12
|
+
return typeof descriptionConfig === "string" ? /* @__PURE__ */ jsx(NonEditableWrapper, { children: descriptionConfig }) : /* @__PURE__ */ jsx(SubtleForm.TextArea, { minRows: 1, value: description, onChange: (value) => {
|
|
13
|
+
descriptionConfig.onChange && descriptionConfig.onChange(value);
|
|
14
|
+
setDescription(value);
|
|
15
|
+
}, placeholder: "placeholder", suffixTooltip: "Edit", ...descriptionConfig, disabled: descriptionConfig.disabled });
|
|
26
16
|
}
|
|
27
|
-
return
|
|
17
|
+
return /* @__PURE__ */ jsx(Fragment, {});
|
|
28
18
|
};
|
|
29
|
-
return
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
};
|
|
19
|
+
return /* @__PURE__ */ jsxs(DescriptionWrapper, { "data-testid": "information-card-description", children: [
|
|
20
|
+
/* @__PURE__ */ jsx(AlertWrapper, { children: extraInformation }),
|
|
21
|
+
descriptionConfig && renderDescription()
|
|
22
|
+
] });
|
|
23
|
+
};
|
|
24
|
+
export {
|
|
25
|
+
InformationCardDescription
|
|
26
|
+
};
|
|
@@ -1,3 +1,3 @@
|
|
|
1
|
-
import React from 'react';
|
|
2
|
-
import {
|
|
1
|
+
import { default as React } from 'react';
|
|
2
|
+
import { InformationCardFooterProps } from './InformationCardFooter.types';
|
|
3
3
|
export declare const InformationCardFooter: ({ actionButton, actionButtonCallback, actionsMenuButtonLabel, actionsMenuButtonOnClick, actionButtonTooltipText, text, }: InformationCardFooterProps) => React.JSX.Element;
|
|
@@ -1,42 +1,29 @@
|
|
|
1
|
-
import
|
|
2
|
-
import { FormattedMessage } from
|
|
3
|
-
import Button from
|
|
4
|
-
import Icon, { AngleRightS, ArrowRuCircleM } from
|
|
5
|
-
import Tooltip from
|
|
6
|
-
import { Text } from
|
|
7
|
-
import
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
"
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
}
|
|
23
|
-
|
|
24
|
-
type: "ghost",
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
}), /*#__PURE__*/React.createElement(Icon, {
|
|
31
|
-
component: /*#__PURE__*/React.createElement(AngleRightS, null)
|
|
32
|
-
})), /*#__PURE__*/React.createElement(S.FlexGrow, null, text && /*#__PURE__*/React.createElement(Text, {
|
|
33
|
-
size: "xsmall"
|
|
34
|
-
}, text)), /*#__PURE__*/React.createElement(S.ActionButtonContainer, null, actionButton && actionButton === true && /*#__PURE__*/React.createElement(Tooltip, {
|
|
35
|
-
type: "default",
|
|
36
|
-
title: actionButtonTooltipText
|
|
37
|
-
}, /*#__PURE__*/React.createElement(Button, {
|
|
38
|
-
type: "ghost",
|
|
39
|
-
mode: "single-icon",
|
|
40
|
-
onClick: actionButtonCallback
|
|
41
|
-
}, /*#__PURE__*/React.createElement(ArrowRuCircleM, null))) || typeof actionButton === 'function' && actionButton()));
|
|
42
|
-
};
|
|
1
|
+
import { jsxs, jsx } from "react/jsx-runtime";
|
|
2
|
+
import { FormattedMessage } from "react-intl";
|
|
3
|
+
import Button from "@synerise/ds-button";
|
|
4
|
+
import Icon, { AngleRightS, ArrowRuCircleM } from "@synerise/ds-icon";
|
|
5
|
+
import Tooltip from "@synerise/ds-tooltip";
|
|
6
|
+
import { Text } from "@synerise/ds-typography";
|
|
7
|
+
import { FooterWrapper, FlexGrow, ActionButtonContainer } from "../InformationCard.styles.js";
|
|
8
|
+
const InformationCardFooter = ({
|
|
9
|
+
actionButton = false,
|
|
10
|
+
actionButtonCallback,
|
|
11
|
+
actionsMenuButtonLabel,
|
|
12
|
+
actionsMenuButtonOnClick,
|
|
13
|
+
actionButtonTooltipText = "",
|
|
14
|
+
text = ""
|
|
15
|
+
}) => {
|
|
16
|
+
return /* @__PURE__ */ jsxs(FooterWrapper, { "data-testid": "information-card-footer", style: {
|
|
17
|
+
alignItems: "center"
|
|
18
|
+
}, children: [
|
|
19
|
+
actionsMenuButtonOnClick && /* @__PURE__ */ jsxs(Button, { type: "ghost", mode: "label-icon", onClick: actionsMenuButtonOnClick, children: [
|
|
20
|
+
actionsMenuButtonLabel || /* @__PURE__ */ jsx(FormattedMessage, { id: "DS.INFORMATION-CARD.QUICK-ACTIONS", defaultMessage: "Quick actions" }),
|
|
21
|
+
/* @__PURE__ */ jsx(Icon, { component: /* @__PURE__ */ jsx(AngleRightS, {}) })
|
|
22
|
+
] }),
|
|
23
|
+
/* @__PURE__ */ jsx(FlexGrow, { children: text && /* @__PURE__ */ jsx(Text, { size: "xsmall", children: text }) }),
|
|
24
|
+
/* @__PURE__ */ jsx(ActionButtonContainer, { children: actionButton && actionButton === true && /* @__PURE__ */ jsx(Tooltip, { type: "default", title: actionButtonTooltipText, children: /* @__PURE__ */ jsx(Button, { type: "ghost", mode: "single-icon", onClick: actionButtonCallback, children: /* @__PURE__ */ jsx(ArrowRuCircleM, {}) }) }) || typeof actionButton === "function" && actionButton() })
|
|
25
|
+
] });
|
|
26
|
+
};
|
|
27
|
+
export {
|
|
28
|
+
InformationCardFooter
|
|
29
|
+
};
|
|
@@ -1,6 +1,6 @@
|
|
|
1
|
-
import {
|
|
2
|
-
import {
|
|
3
|
-
import {
|
|
1
|
+
import { MouseEvent } from 'react';
|
|
2
|
+
import { InformationCardProps } from '../InformationCard.types';
|
|
3
|
+
import { InformationCardActionsProps } from '../InformationCardActions/InformationCardActions.types';
|
|
4
4
|
export type InformationCardFooterProps = {
|
|
5
5
|
text: InformationCardProps['footerText'];
|
|
6
6
|
actionsMenuButtonLabel?: InformationCardActionsProps['buttonLabel'];
|
|
@@ -1 +1 @@
|
|
|
1
|
-
|
|
1
|
+
|
|
@@ -1,3 +1,3 @@
|
|
|
1
|
-
import React from 'react';
|
|
2
|
-
import {
|
|
1
|
+
import { default as React } from 'react';
|
|
2
|
+
import { InformationCardPropertyListProps } from './InformationCardPropertyList.types';
|
|
3
3
|
export declare const InformationCardPropertyList: ({ items, }: InformationCardPropertyListProps) => React.JSX.Element;
|
|
@@ -1,33 +1,35 @@
|
|
|
1
|
-
|
|
2
|
-
import
|
|
3
|
-
import { v4
|
|
4
|
-
import
|
|
5
|
-
|
|
6
|
-
return
|
|
1
|
+
import { jsx, jsxs } from "react/jsx-runtime";
|
|
2
|
+
import { useMemo } from "react";
|
|
3
|
+
import { v4 } from "uuid";
|
|
4
|
+
import { InformationCardPropertyListWrapper, Divider, InformationCardPropertyItem, InformationCardPropertyItemLabel, InformationCardPropertyItemValue } from "../InformationCard.styles.js";
|
|
5
|
+
const isDivider = (item) => {
|
|
6
|
+
return "type" in item && item.type === "divider";
|
|
7
7
|
};
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
}, [items]);
|
|
17
|
-
return /*#__PURE__*/React.createElement(S.InformationCardPropertyListWrapper, {
|
|
18
|
-
"data-testid": "information-card-property-list"
|
|
19
|
-
}, itemsWithIDs == null ? void 0 : itemsWithIDs.map(function (item) {
|
|
8
|
+
const InformationCardPropertyList = ({
|
|
9
|
+
items
|
|
10
|
+
}) => {
|
|
11
|
+
const itemsWithIDs = useMemo(() => items?.map((item) => ({
|
|
12
|
+
id: v4(),
|
|
13
|
+
...item
|
|
14
|
+
})), [items]);
|
|
15
|
+
return /* @__PURE__ */ jsx(InformationCardPropertyListWrapper, { "data-testid": "information-card-property-list", children: itemsWithIDs?.map((item) => {
|
|
20
16
|
if (isDivider(item)) {
|
|
21
|
-
return
|
|
22
|
-
dashed: true,
|
|
23
|
-
key: item.id
|
|
24
|
-
});
|
|
17
|
+
return /* @__PURE__ */ jsx(Divider, { dashed: true }, item.id);
|
|
25
18
|
}
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
19
|
+
const {
|
|
20
|
+
label,
|
|
21
|
+
value,
|
|
22
|
+
id
|
|
23
|
+
} = item;
|
|
24
|
+
return /* @__PURE__ */ jsxs(InformationCardPropertyItem, { children: [
|
|
25
|
+
label && /* @__PURE__ */ jsxs(InformationCardPropertyItemLabel, { children: [
|
|
26
|
+
label,
|
|
27
|
+
":"
|
|
28
|
+
] }),
|
|
29
|
+
/* @__PURE__ */ jsx(InformationCardPropertyItemValue, { children: value })
|
|
30
|
+
] }, id);
|
|
31
|
+
}) });
|
|
32
|
+
};
|
|
33
|
+
export {
|
|
34
|
+
InformationCardPropertyList
|
|
35
|
+
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
|
|
1
|
+
|
|
@@ -1,3 +1,3 @@
|
|
|
1
|
-
import React from 'react';
|
|
2
|
-
import {
|
|
1
|
+
import { default as React } from 'react';
|
|
2
|
+
import { InformationCardSummaryProps } from './InformationCardSummary.types';
|
|
3
3
|
export declare const InformationCardSummary: ({ items, }: InformationCardSummaryProps) => React.JSX.Element;
|
|
@@ -1,30 +1,29 @@
|
|
|
1
|
-
|
|
2
|
-
import
|
|
3
|
-
import { v4
|
|
4
|
-
import Tooltip from
|
|
5
|
-
import
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
};
|
|
1
|
+
import { jsx, Fragment, jsxs } from "react/jsx-runtime";
|
|
2
|
+
import { useMemo } from "react";
|
|
3
|
+
import { v4 } from "uuid";
|
|
4
|
+
import Tooltip from "@synerise/ds-tooltip";
|
|
5
|
+
import { InformationCardSummaryWrapper, InformationCardSummaryItem } from "../InformationCard.styles.js";
|
|
6
|
+
const InformationCardSummary = ({
|
|
7
|
+
items
|
|
8
|
+
}) => {
|
|
9
|
+
const itemsWithIDs = useMemo(() => items?.map((item) => ({
|
|
10
|
+
id: v4(),
|
|
11
|
+
...item
|
|
12
|
+
})), [items]);
|
|
13
|
+
return /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsx(InformationCardSummaryWrapper, { "data-testid": "information-card-summary", children: itemsWithIDs?.map(({
|
|
14
|
+
icon,
|
|
15
|
+
label,
|
|
16
|
+
tooltip,
|
|
17
|
+
tooltipProps,
|
|
18
|
+
id
|
|
19
|
+
}) => {
|
|
20
|
+
const item = /* @__PURE__ */ jsxs(InformationCardSummaryItem, { children: [
|
|
21
|
+
icon && /* @__PURE__ */ jsx("div", { children: icon }),
|
|
22
|
+
label && /* @__PURE__ */ jsx("div", { children: label })
|
|
23
|
+
] }, id);
|
|
24
|
+
return tooltip ? /* @__PURE__ */ jsx(Tooltip, { title: tooltip, ...tooltipProps, children: item }) : item;
|
|
25
|
+
}) }) });
|
|
26
|
+
};
|
|
27
|
+
export {
|
|
28
|
+
InformationCardSummary
|
|
29
|
+
};
|
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
import
|
|
2
|
-
import
|
|
1
|
+
import { Key, ReactNode } from 'react';
|
|
2
|
+
import { TooltipProps } from '@synerise/ds-tooltip';
|
|
3
3
|
export type InformationCardSummaryItem = {
|
|
4
4
|
key?: string | number;
|
|
5
5
|
label: ReactNode;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
|
|
1
|
+
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import {
|
|
1
|
+
import { FlipConfig, HoverConfig, OffsetConfig, ShiftConfig } from '@synerise/ds-popover';
|
|
2
2
|
export declare const TRANSITION_DURATION = 150;
|
|
3
3
|
export declare const OFFSET_CONFIG: OffsetConfig;
|
|
4
4
|
export declare const FLIP_CONFIG: FlipConfig;
|
|
@@ -1,14 +1,21 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
1
|
+
const TRANSITION_DURATION = 150;
|
|
2
|
+
const OFFSET_CONFIG = {
|
|
3
3
|
mainAxis: 8
|
|
4
4
|
};
|
|
5
|
-
|
|
6
|
-
|
|
5
|
+
const FLIP_CONFIG = {};
|
|
6
|
+
const HOVER_CONFIG = {
|
|
7
7
|
delay: {
|
|
8
8
|
open: 100,
|
|
9
9
|
close: 400
|
|
10
10
|
}
|
|
11
11
|
};
|
|
12
|
-
|
|
12
|
+
const SHIFT_CONFIG = {
|
|
13
13
|
crossAxis: true
|
|
14
|
-
};
|
|
14
|
+
};
|
|
15
|
+
export {
|
|
16
|
+
FLIP_CONFIG,
|
|
17
|
+
HOVER_CONFIG,
|
|
18
|
+
OFFSET_CONFIG,
|
|
19
|
+
SHIFT_CONFIG,
|
|
20
|
+
TRANSITION_DURATION
|
|
21
|
+
};
|
|
@@ -1,8 +1,8 @@
|
|
|
1
|
-
import React from 'react';
|
|
1
|
+
import { default as React } from 'react';
|
|
2
2
|
export declare const InformationCardTooltip: React.ForwardRefExoticComponent<{
|
|
3
|
-
informationCardProps?: import(
|
|
3
|
+
informationCardProps?: import('..').InformationCardProps;
|
|
4
4
|
content?: React.ReactNode;
|
|
5
5
|
children: React.ReactNode;
|
|
6
|
-
popoverProps?: Omit<import(
|
|
6
|
+
popoverProps?: Omit<import('@synerise/ds-popover').PopoverOptions, "listNavigationConfig" | "arrowConfig" | "returnFocus" | "modal">;
|
|
7
7
|
asChild?: boolean;
|
|
8
|
-
} & Omit<React.HTMLAttributes<HTMLDivElement>, "children" | "content" | "asChild" | "popoverProps" | "informationCardProps"> & import(
|
|
8
|
+
} & Omit<React.HTMLAttributes<HTMLDivElement>, "children" | "content" | "asChild" | "popoverProps" | "informationCardProps"> & import('@synerise/ds-utils').DataAttributes & React.RefAttributes<HTMLDivElement>>;
|
|
@@ -1,43 +1,27 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
import
|
|
5
|
-
import
|
|
6
|
-
import {
|
|
7
|
-
import
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
componentId: "information-card",
|
|
29
|
-
testId: "information-card",
|
|
30
|
-
shiftConfig: SHIFT_CONFIG,
|
|
31
|
-
offsetConfig: OFFSET_CONFIG,
|
|
32
|
-
flipConfig: FLIP_CONFIG,
|
|
33
|
-
hoverConfig: HOVER_CONFIG,
|
|
34
|
-
placement: "right",
|
|
35
|
-
zIndex: zIndex
|
|
36
|
-
}, popoverProps), /*#__PURE__*/React.createElement(PopoverContent, null, /*#__PURE__*/React.createElement(S.InformationCardTooltipWrapper, _extends({}, rest, {
|
|
37
|
-
onKeyDown: cancelBubblingEvent,
|
|
38
|
-
onClick: cancelBubblingEvent
|
|
39
|
-
}), informationCardProps ? /*#__PURE__*/React.createElement(InformationCard, informationCardProps) : content)), /*#__PURE__*/React.createElement(PopoverTrigger, {
|
|
40
|
-
asChild: asChild,
|
|
41
|
-
ref: ref
|
|
42
|
-
}, children));
|
|
43
|
-
});
|
|
1
|
+
import { jsxs, jsx } from "react/jsx-runtime";
|
|
2
|
+
import { forwardRef, useCallback } from "react";
|
|
3
|
+
import { useTheme } from "@synerise/ds-core";
|
|
4
|
+
import { Popover, PopoverContent, PopoverTrigger } from "@synerise/ds-popover";
|
|
5
|
+
import InformationCard from "../InformationCard.js";
|
|
6
|
+
import { HOVER_CONFIG, FLIP_CONFIG, OFFSET_CONFIG, SHIFT_CONFIG } from "./InformationCard.constants.js";
|
|
7
|
+
import { InformationCardTooltipWrapper } from "./InformationCardTooltip.styles.js";
|
|
8
|
+
const InformationCardTooltip = forwardRef(({
|
|
9
|
+
popoverProps,
|
|
10
|
+
asChild,
|
|
11
|
+
children,
|
|
12
|
+
style,
|
|
13
|
+
content,
|
|
14
|
+
informationCardProps,
|
|
15
|
+
...rest
|
|
16
|
+
}, ref) => {
|
|
17
|
+
const theme = useTheme();
|
|
18
|
+
const zIndex = parseInt(theme.variables["zindex-tooltip"], 10);
|
|
19
|
+
const cancelBubblingEvent = useCallback(() => (event) => event.stopPropagation(), []);
|
|
20
|
+
return /* @__PURE__ */ jsxs(Popover, { trigger: "hover", modal: false, componentId: "information-card", testId: "information-card", shiftConfig: SHIFT_CONFIG, offsetConfig: OFFSET_CONFIG, flipConfig: FLIP_CONFIG, hoverConfig: HOVER_CONFIG, placement: "right", zIndex, ...popoverProps, children: [
|
|
21
|
+
/* @__PURE__ */ jsx(PopoverContent, { children: /* @__PURE__ */ jsx(InformationCardTooltipWrapper, { ...rest, onKeyDown: cancelBubblingEvent, onClick: cancelBubblingEvent, children: informationCardProps ? /* @__PURE__ */ jsx(InformationCard, { ...informationCardProps }) : content }) }),
|
|
22
|
+
/* @__PURE__ */ jsx(PopoverTrigger, { asChild, ref, children })
|
|
23
|
+
] });
|
|
24
|
+
});
|
|
25
|
+
export {
|
|
26
|
+
InformationCardTooltip
|
|
27
|
+
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
export declare const InformationCardTooltipWrapper: import(
|
|
1
|
+
export declare const InformationCardTooltipWrapper: import('styled-components').StyledComponent<"div", any, {}, never>;
|