@capillarytech/blaze-ui 6.1.1 → 6.1.3
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/CapCustomCheckboxList/styles.css +3 -3
- package/CapCustomCheckboxList/styles.scss +7 -8
- package/CapMobileDatePicker/index.d.ts +3 -2
- package/CapMobileDatePicker/index.d.ts.map +1 -1
- package/CapMobileDatePicker/index.js +13 -3
- package/CapMobileDatePicker/messages.d.ts +9 -0
- package/CapMobileDatePicker/messages.d.ts.map +1 -0
- package/CapMobileDatePicker/messages.js +12 -0
- package/CapMobileDatePicker/types.d.ts +6 -0
- package/CapMobileDatePicker/types.d.ts.map +1 -1
- package/CapPopoverTree/index.d.ts +40 -3
- package/CapPopoverTree/index.d.ts.map +1 -1
- package/CapPopoverTree/index.js +82 -72
- package/CapPopoverTree/style.d.ts +1 -5
- package/CapPopoverTree/style.d.ts.map +1 -1
- package/CapPopoverTree/styles.css +18 -119
- package/CapPopoverTree/styles.scss +31 -179
- package/CapRadioCard/index.d.ts.map +1 -1
- package/CapRadioCard/index.js +52 -20
- package/CapRadioCard/styles.css +25 -25
- package/CapRadioCard/styles.module.scss.js +14 -40
- package/CapRadioCard/styles.scss +20 -20
- package/CapRadioCard/types.d.ts +20 -0
- package/CapRadioCard/types.d.ts.map +1 -1
- package/CapSelectFilter/index.d.ts.map +1 -1
- package/CapSelectFilter/index.js +10 -11
- package/CapSelectFilter/styles.css +11 -10
- package/CapSelectFilter/styles.module.scss.js +8 -10
- package/CapSelectFilter/styles.scss +11 -8
- package/CapSelectFilter/types.d.ts +1 -1
- package/CapSelectFilter/types.d.ts.map +1 -1
- package/CapStaticTemplates/index.d.ts +3 -1
- package/CapStaticTemplates/index.d.ts.map +1 -1
- package/CapStaticTemplates/index.js +185 -144
- package/CapStaticTemplates/messages.d.ts +32 -0
- package/CapStaticTemplates/messages.d.ts.map +1 -0
- package/CapStaticTemplates/messages.js +35 -0
- package/CapStaticTemplates/styles.css +220 -0
- package/CapStaticTemplates/styles.module.scss.js +55 -0
- package/CapStaticTemplates/styles.scss +291 -0
- package/CapStaticTemplates/tests/CapStaticTemplates.mockData.d.ts +54 -0
- package/CapStaticTemplates/tests/CapStaticTemplates.mockData.d.ts.map +1 -0
- package/CapStaticTemplates/types.d.ts +97 -0
- package/CapStaticTemplates/types.d.ts.map +1 -0
- package/index.d.ts +2 -2
- package/index.d.ts.map +1 -1
- package/index.js +44 -44
- package/package.json +1 -1
- package/styles/_variables.scss +2 -0
- package/CapPopoverTree/styles.module.scss.js +0 -26
- package/CapPopoverTree/tests/CapPopoverTree.mockData.d.ts +0 -22
- package/CapPopoverTree/tests/CapPopoverTree.mockData.d.ts.map +0 -1
- package/CapPopoverTree/types.d.ts +0 -62
- package/CapPopoverTree/types.d.ts.map +0 -1
- package/CapStaticTemplates/style.d.ts +0 -13
- package/CapStaticTemplates/style.d.ts.map +0 -1
- package/CapStaticTemplates/style.js +0 -216
- /package/{CapPopoverTree → CapStaticTemplates}/types.js +0 -0
|
@@ -13,9 +13,9 @@
|
|
|
13
13
|
background-color: #ffffff;
|
|
14
14
|
margin-right: 0.857rem;
|
|
15
15
|
}
|
|
16
|
-
.div-icon {
|
|
17
|
-
width:
|
|
18
|
-
height:
|
|
16
|
+
.cap-customCheckboxList-v2 .div-icon {
|
|
17
|
+
width: 14.857rem;
|
|
18
|
+
height: 6.571rem;
|
|
19
19
|
padding: 1.614rem 5.714rem;
|
|
20
20
|
border-radius: 0.285rem;
|
|
21
21
|
background-color: #e9f0fe;
|
|
@@ -6,14 +6,13 @@
|
|
|
6
6
|
border: solid 1px $CAP_G07;
|
|
7
7
|
background-color: $CAP_WHITE;
|
|
8
8
|
margin-right: $CAP_SPACE_12;
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
.
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
background-color: $CAP_PALE_GREY;
|
|
9
|
+
.div-icon {
|
|
10
|
+
width: 14.857rem; // 208px
|
|
11
|
+
height: 6.571rem; // 92px
|
|
12
|
+
padding: $CAP_SPACE_23 $CAP_SPACE_80;
|
|
13
|
+
border-radius: $CAP_SPACE_04;
|
|
14
|
+
background-color: $CAP_PALE_GREY;
|
|
15
|
+
}
|
|
17
16
|
}
|
|
18
17
|
|
|
19
18
|
.customCheckbox-icon {
|
|
@@ -3,8 +3,9 @@
|
|
|
3
3
|
* MobileDatePicker
|
|
4
4
|
*
|
|
5
5
|
*/
|
|
6
|
+
import React from 'react';
|
|
6
7
|
import type { CapMobileDatePickerProps } from './types';
|
|
7
|
-
declare
|
|
8
|
-
export default
|
|
8
|
+
declare const _default: React.ComponentType<Omit<CapMobileDatePickerProps, "intl">>;
|
|
9
|
+
export default _default;
|
|
9
10
|
export type { CapMobileDatePickerProps } from './types';
|
|
10
11
|
//# sourceMappingURL=index.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../components/CapMobileDatePicker/index.tsx"],"names":[],"mappings":"AAAA;;;;GAIG;
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../components/CapMobileDatePicker/index.tsx"],"names":[],"mappings":"AAAA;;;;GAIG;AAGH,OAAO,KAAmB,MAAM,OAAO,CAAC;AAYxC,OAAO,KAAK,EAAE,wBAAwB,EAAE,MAAM,SAAS,CAAC;;AAyExD,wBAAyE;AACzE,YAAY,EAAE,wBAAwB,EAAE,MAAM,SAAS,CAAC"}
|
|
@@ -1,17 +1,25 @@
|
|
|
1
1
|
import { jsxs, Fragment, jsx } from "react/jsx-runtime";
|
|
2
2
|
import moment from "moment";
|
|
3
3
|
import { useState } from "react";
|
|
4
|
+
import { injectIntl } from "react-intl";
|
|
4
5
|
import { FORMAT_TOKENS } from "../utils/dayjs.js";
|
|
5
6
|
import CapCalendarDatePicker from "../CapCalendarDatePicker/index.js";
|
|
6
7
|
import CapIcon from "../CapIcon/index.js";
|
|
7
8
|
import InputFinal from "../CapInput/index.js";
|
|
8
9
|
import CapModalWithHoc from "../CapModal/index.js";
|
|
10
|
+
import messages from "./messages.js";
|
|
9
11
|
import styles from "./styles.module.scss.js";
|
|
10
12
|
const INCEPTION_DATE = "2000-01-01";
|
|
11
13
|
const DATE_CALC_FORMAT = FORMAT_TOKENS.ISO_8601_DATE;
|
|
12
14
|
const DATE_DISPLAY_FORMAT = FORMAT_TOKENS.DATE_DISPLAY_FULL;
|
|
13
15
|
const clsPrefix = "cap-mobile-date-picker";
|
|
14
|
-
function CapMobileDatePicker({
|
|
16
|
+
function CapMobileDatePicker({
|
|
17
|
+
intl: { formatMessage },
|
|
18
|
+
onChange,
|
|
19
|
+
value,
|
|
20
|
+
lastSyncDate,
|
|
21
|
+
placeholderLabel
|
|
22
|
+
}) {
|
|
15
23
|
const [open, setOpen] = useState(false);
|
|
16
24
|
const handleDateChange = (date) => {
|
|
17
25
|
onChange == null ? void 0 : onChange(moment(date));
|
|
@@ -30,7 +38,8 @@ function CapMobileDatePicker({ onChange, value, lastSyncDate }) {
|
|
|
30
38
|
suffix: /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx(CapIcon, { type: "calendar", style: { color: "rgb(9, 30, 66)" }, size: "m" }) }),
|
|
31
39
|
onClick: handleModalOpen,
|
|
32
40
|
value: value ? moment(value).format(DATE_DISPLAY_FORMAT) : void 0,
|
|
33
|
-
size: "large"
|
|
41
|
+
size: "large",
|
|
42
|
+
placeholder: placeholderLabel || formatMessage(messages.selectDate)
|
|
34
43
|
}
|
|
35
44
|
),
|
|
36
45
|
/* @__PURE__ */ jsx(
|
|
@@ -66,6 +75,7 @@ function CapMobileDatePicker({ onChange, value, lastSyncDate }) {
|
|
|
66
75
|
)
|
|
67
76
|
] });
|
|
68
77
|
}
|
|
78
|
+
const index = injectIntl(CapMobileDatePicker);
|
|
69
79
|
export {
|
|
70
|
-
|
|
80
|
+
index as default
|
|
71
81
|
};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"messages.d.ts","sourceRoot":"","sources":["../../components/CapMobileDatePicker/messages.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,KAAK,qDAAqD,CAAC;;;;;;;AAExE,wBAKG"}
|
|
@@ -0,0 +1,12 @@
|
|
|
1
|
+
import { defineMessages } from "react-intl";
|
|
2
|
+
const scope = "app.commonUtils.capUiLibrary.CapMobileDatePicker";
|
|
3
|
+
const messages = defineMessages({
|
|
4
|
+
selectDate: {
|
|
5
|
+
id: `${scope}.selectDate`,
|
|
6
|
+
defaultMessage: "Select date"
|
|
7
|
+
}
|
|
8
|
+
});
|
|
9
|
+
export {
|
|
10
|
+
messages as default,
|
|
11
|
+
scope
|
|
12
|
+
};
|
|
@@ -1,5 +1,7 @@
|
|
|
1
1
|
import type { Moment } from 'moment';
|
|
2
|
+
import type { IntlShape } from 'react-intl';
|
|
2
3
|
export interface CapMobileDatePickerProps {
|
|
4
|
+
intl: IntlShape;
|
|
3
5
|
/**
|
|
4
6
|
* Selected date value (moment object)
|
|
5
7
|
*/
|
|
@@ -13,5 +15,9 @@ export interface CapMobileDatePickerProps {
|
|
|
13
15
|
* @param date - Selected moment object
|
|
14
16
|
*/
|
|
15
17
|
onChange?: (date: Moment) => void;
|
|
18
|
+
/**
|
|
19
|
+
* Placeholder label for the input field
|
|
20
|
+
*/
|
|
21
|
+
placeholderLabel?: string;
|
|
16
22
|
}
|
|
17
23
|
//# sourceMappingURL=types.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../components/CapMobileDatePicker/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,QAAQ,CAAC;
|
|
1
|
+
{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../components/CapMobileDatePicker/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,QAAQ,CAAC;AACrC,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,YAAY,CAAC;AAE5C,MAAM,WAAW,wBAAwB;IACvC,IAAI,EAAE,SAAS,CAAC;IAChB;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IAEf;;OAEG;IACH,YAAY,EAAE,MAAM,CAAC;IAErB;;;OAGG;IACH,QAAQ,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IAElC;;OAEG;IACH,gBAAgB,CAAC,EAAE,MAAM,CAAC;CAC3B"}
|
|
@@ -1,6 +1,43 @@
|
|
|
1
|
+
import PropTypes from 'prop-types';
|
|
1
2
|
import React from 'react';
|
|
2
|
-
import
|
|
3
|
-
export declare const CapPopoverTree:
|
|
4
|
-
|
|
3
|
+
import './styles.scss';
|
|
4
|
+
export declare const CapPopoverTree: {
|
|
5
|
+
(props: any): import("react/jsx-runtime").JSX.Element;
|
|
6
|
+
defaultProps: {
|
|
7
|
+
trigger: string;
|
|
8
|
+
placement: string;
|
|
9
|
+
showIcon: boolean;
|
|
10
|
+
blockNode: boolean;
|
|
11
|
+
defaultExpandAll: boolean;
|
|
12
|
+
isLoadingData: boolean;
|
|
13
|
+
switcherIcon: import("react/jsx-runtime").JSX.Element;
|
|
14
|
+
renderOnKeyChange: boolean;
|
|
15
|
+
};
|
|
16
|
+
propTypes: {
|
|
17
|
+
trigger: PropTypes.Requireable<string>;
|
|
18
|
+
placement: PropTypes.Requireable<string>;
|
|
19
|
+
className: PropTypes.Requireable<string>;
|
|
20
|
+
defaultExpandAll: PropTypes.Requireable<boolean>;
|
|
21
|
+
overlayClassName: PropTypes.Requireable<string>;
|
|
22
|
+
showIcon: PropTypes.Requireable<boolean>;
|
|
23
|
+
blockNode: PropTypes.Requireable<boolean>;
|
|
24
|
+
propsTreeData: PropTypes.Requireable<any[]>;
|
|
25
|
+
switcherIcon: PropTypes.Requireable<PropTypes.ReactNodeLike>;
|
|
26
|
+
TriggerComponent: PropTypes.Requireable<PropTypes.ReactNodeLike>;
|
|
27
|
+
componentText: PropTypes.Requireable<string>;
|
|
28
|
+
triggerProps: PropTypes.Requireable<object>;
|
|
29
|
+
isTriggerDisabled: PropTypes.Requireable<boolean>;
|
|
30
|
+
triggerDisabledText: PropTypes.Requireable<string>;
|
|
31
|
+
tooltipText: PropTypes.Requireable<string>;
|
|
32
|
+
onSelect: PropTypes.Requireable<(...args: any[]) => any>;
|
|
33
|
+
propsSelectedKey: PropTypes.Requireable<any[]>;
|
|
34
|
+
isLoadingData: PropTypes.Requireable<boolean>;
|
|
35
|
+
loadingTip: PropTypes.Requireable<string>;
|
|
36
|
+
searchPlaceholder: PropTypes.Requireable<NonNullable<PropTypes.ReactNodeLike>>;
|
|
37
|
+
emptyDataMessage: PropTypes.Requireable<NonNullable<PropTypes.ReactNodeLike>>;
|
|
38
|
+
renderOnKeyChange: PropTypes.Requireable<boolean>;
|
|
39
|
+
};
|
|
40
|
+
};
|
|
41
|
+
declare const _default: React.ComponentType<Omit<any, "intl">>;
|
|
5
42
|
export default _default;
|
|
6
43
|
//# sourceMappingURL=index.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../components/CapPopoverTree/index.tsx"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../components/CapPopoverTree/index.tsx"],"names":[],"mappings":"AAEA,OAAO,SAAS,MAAM,YAAY,CAAC;AACnC,OAAO,KAA8B,MAAM,OAAO,CAAC;AAWnD,OAAO,eAAe,CAAC;AAMvB,eAAO,MAAM,cAAc;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA0M1B,CAAC;;AAsCF,wBAAoE"}
|
package/CapPopoverTree/index.js
CHANGED
|
@@ -1,56 +1,54 @@
|
|
|
1
|
-
import {
|
|
2
|
-
import {
|
|
3
|
-
import { Tree, Input, Tooltip } from "antd-v5";
|
|
1
|
+
import { jsxs, jsx, Fragment } from "react/jsx-runtime";
|
|
2
|
+
import { Tree, Tooltip, Icon } from "antd";
|
|
4
3
|
import classNames from "classnames";
|
|
4
|
+
import PropTypes from "prop-types";
|
|
5
5
|
import { useState, useEffect } from "react";
|
|
6
|
-
import CapColumn from "../CapColumn/index.js";
|
|
7
6
|
import CapHeadingWithStatic from "../CapHeading/index.js";
|
|
8
|
-
import
|
|
7
|
+
import InputFinal from "../CapInput/index.js";
|
|
9
8
|
import CapPopover from "../CapPopover/index.js";
|
|
10
9
|
import CapRow from "../CapRow/index.js";
|
|
11
10
|
import CapSpin from "../CapSpin/index.js";
|
|
12
11
|
import CapTooltip from "../CapTooltip/index.js";
|
|
13
|
-
import CapTree from "../CapTree/index.js";
|
|
14
12
|
import LocaleHoc from "../LocaleHoc/index.js";
|
|
15
|
-
import
|
|
13
|
+
import { StyledCapTree, StyledIcon, StyledCapHeading, StyledCapColumn, ExpandIcon } from "./style.js";
|
|
14
|
+
import './styles.css';/* empty css */
|
|
16
15
|
const { TreeNode } = Tree;
|
|
16
|
+
const { Search } = InputFinal;
|
|
17
17
|
const clsPrefix = "cap-popover-tree-v2";
|
|
18
18
|
const CapPopoverTree = (props) => {
|
|
19
19
|
var _a;
|
|
20
20
|
const {
|
|
21
21
|
treeData: propsTreeData = [],
|
|
22
22
|
overlayClassName,
|
|
23
|
-
trigger
|
|
23
|
+
trigger,
|
|
24
24
|
TriggerComponent,
|
|
25
25
|
componentText,
|
|
26
26
|
triggerProps,
|
|
27
27
|
isTriggerDisabled,
|
|
28
28
|
triggerDisabledText,
|
|
29
29
|
tooltipText,
|
|
30
|
-
isLoadingData
|
|
30
|
+
isLoadingData,
|
|
31
31
|
loadingTip,
|
|
32
|
-
placement
|
|
33
|
-
switcherIcon
|
|
32
|
+
placement,
|
|
33
|
+
switcherIcon,
|
|
34
34
|
className,
|
|
35
|
-
defaultExpandAll
|
|
35
|
+
defaultExpandAll,
|
|
36
36
|
onSelect,
|
|
37
37
|
selectedKey: propsSelectedKey,
|
|
38
38
|
emptyDataMessage,
|
|
39
39
|
searchPlaceholder,
|
|
40
|
-
renderOnKeyChange
|
|
40
|
+
renderOnKeyChange,
|
|
41
41
|
...rest
|
|
42
42
|
} = props || {};
|
|
43
|
-
const defaultExpandKey = (propsTreeData == null ? void 0 : propsTreeData.length) === 1 && ((_a = propsTreeData[0]) == null ? void 0 : _a.key)
|
|
43
|
+
const defaultExpandKey = (propsTreeData == null ? void 0 : propsTreeData.length) === 1 && ((_a = propsTreeData[0]) == null ? void 0 : _a.key);
|
|
44
44
|
const [searchText, setSearchText] = useState(null);
|
|
45
45
|
const [showPopover, setShowPopover] = useState(null);
|
|
46
46
|
const [filteredTreeData, setFilteredTreeData] = useState(propsTreeData || []);
|
|
47
|
-
const [expandedKeys, setExpandedKeys] = useState(
|
|
48
|
-
defaultExpandKey ? [defaultExpandKey] : []
|
|
49
|
-
);
|
|
47
|
+
const [expandedKeys, setExpandedKeys] = useState(defaultExpandKey ? [defaultExpandKey] : []);
|
|
50
48
|
useEffect(() => {
|
|
51
49
|
setFilteredTreeData(propsTreeData);
|
|
52
|
-
setExpandedKeys(
|
|
53
|
-
}, [propsTreeData
|
|
50
|
+
setExpandedKeys([defaultExpandKey]);
|
|
51
|
+
}, [propsTreeData]);
|
|
54
52
|
const handleSearch = (e) => {
|
|
55
53
|
const { value } = e.target;
|
|
56
54
|
setSearchText(value);
|
|
@@ -65,15 +63,13 @@ const CapPopoverTree = (props) => {
|
|
|
65
63
|
}
|
|
66
64
|
setExpandedKeys(keys);
|
|
67
65
|
};
|
|
68
|
-
const handleSelect = (selectedKey,
|
|
69
|
-
const {
|
|
70
|
-
const nodeProps = node == null ? void 0 : node.props;
|
|
71
|
-
const { isLeafNode, eventKey, expanded } = nodeProps || {};
|
|
66
|
+
const handleSelect = (selectedKey, { node }) => {
|
|
67
|
+
const { isLeafNode, eventKey, expanded } = (node == null ? void 0 : node.props) || {};
|
|
72
68
|
if (isLeafNode) {
|
|
73
69
|
setShowPopover(false);
|
|
74
|
-
onSelect
|
|
70
|
+
onSelect(selectedKey);
|
|
75
71
|
} else {
|
|
76
|
-
const key = expanded ? [] :
|
|
72
|
+
const key = expanded ? [] : [eventKey];
|
|
77
73
|
handleOnExpand(key);
|
|
78
74
|
}
|
|
79
75
|
};
|
|
@@ -82,38 +78,25 @@ const CapPopoverTree = (props) => {
|
|
|
82
78
|
var _a2, _b;
|
|
83
79
|
const { title, key, icon, children = [], info } = data;
|
|
84
80
|
if (title) {
|
|
85
|
-
const
|
|
86
|
-
const itemName = (_a2 = titleString == null ? void 0 : titleString.toLowerCase()) == null ? void 0 : _a2.trim();
|
|
81
|
+
const itemName = (_a2 = title == null ? void 0 : title.toLowerCase()) == null ? void 0 : _a2.trim();
|
|
87
82
|
const searchValue = (_b = searchText == null ? void 0 : searchText.toLowerCase()) == null ? void 0 : _b.trim();
|
|
88
|
-
const searchIndex = searchValue && itemName ? itemName.indexOf(searchValue)
|
|
89
|
-
const beforeString =
|
|
90
|
-
const afterString =
|
|
91
|
-
|
|
92
|
-
);
|
|
93
|
-
const matchedSearch = titleString == null ? void 0 : titleString.substr(
|
|
94
|
-
searchIndex >= 0 ? searchIndex : 0,
|
|
95
|
-
(searchValue == null ? void 0 : searchValue.length) || 0
|
|
96
|
-
);
|
|
83
|
+
const searchIndex = searchValue && (itemName == null ? void 0 : itemName.indexOf(searchValue));
|
|
84
|
+
const beforeString = title == null ? void 0 : title.substr(0, searchIndex);
|
|
85
|
+
const afterString = title == null ? void 0 : title.substr(searchIndex + (searchValue == null ? void 0 : searchValue.length));
|
|
86
|
+
const matchedSearch = title == null ? void 0 : title.substr(searchIndex, searchValue == null ? void 0 : searchValue.length);
|
|
97
87
|
const searchResult = /* @__PURE__ */ jsxs(Fragment, { children: [
|
|
98
|
-
/* @__PURE__ */ jsx(
|
|
99
|
-
/* @__PURE__ */ jsx(
|
|
100
|
-
/* @__PURE__ */ jsx(
|
|
88
|
+
/* @__PURE__ */ jsx(StyledCapColumn, { children: beforeString }),
|
|
89
|
+
/* @__PURE__ */ jsx(StyledCapColumn, { style: { fontWeight: 500 }, children: matchedSearch }),
|
|
90
|
+
/* @__PURE__ */ jsx(StyledCapColumn, { children: afterString })
|
|
101
91
|
] });
|
|
102
92
|
const treeNodeProps = {
|
|
103
|
-
title: /* @__PURE__ */ jsxs(
|
|
93
|
+
title: /* @__PURE__ */ jsxs(StyledCapHeading, { className: "tree-node-title", children: [
|
|
104
94
|
searchIndex > -1 ? searchResult : title,
|
|
105
|
-
info && /* @__PURE__ */ jsx("span", { className: "info-tooltip", children: /* @__PURE__ */ jsx(Tooltip, { placement: "right", title: info, children: /* @__PURE__ */ jsx(
|
|
95
|
+
info && /* @__PURE__ */ jsx("span", { className: "info-tooltip", children: /* @__PURE__ */ jsx(Tooltip, { placement: "right", title: info, children: /* @__PURE__ */ jsx(Icon, { className: "info-icon", type: "info-circle-o" }) }) })
|
|
106
96
|
] }),
|
|
107
97
|
key,
|
|
108
98
|
isLeafNode: !(children == null ? void 0 : children.length),
|
|
109
|
-
icon: icon && /* @__PURE__ */ jsx(
|
|
110
|
-
CapIcon,
|
|
111
|
-
{
|
|
112
|
-
className: classNames(styles.styledIcon, "tree-node-icon"),
|
|
113
|
-
size: "s",
|
|
114
|
-
type: icon
|
|
115
|
-
}
|
|
116
|
-
)
|
|
99
|
+
icon: icon && /* @__PURE__ */ jsx(StyledIcon, { className: "tree-node-icon", size: "s", type: icon })
|
|
117
100
|
};
|
|
118
101
|
result.push(
|
|
119
102
|
/* @__PURE__ */ jsx(TreeNode, { ...treeNodeProps, children: (children == null ? void 0 : children.length) && getTreeData(children) })
|
|
@@ -131,15 +114,15 @@ const CapPopoverTree = (props) => {
|
|
|
131
114
|
return;
|
|
132
115
|
}
|
|
133
116
|
const filteredData = propsTreeData.reduce((result, currentData) => {
|
|
134
|
-
var _a3;
|
|
135
|
-
const
|
|
136
|
-
const parentName = titleString == null ? void 0 : titleString.toLowerCase();
|
|
117
|
+
var _a3, _b;
|
|
118
|
+
const parentName = (_a3 = currentData == null ? void 0 : currentData.title) == null ? void 0 : _a3.toLowerCase();
|
|
137
119
|
const isParent = (parentName == null ? void 0 : parentName.indexOf(searchString)) > -1;
|
|
138
|
-
const childItems = (
|
|
139
|
-
|
|
140
|
-
|
|
141
|
-
|
|
142
|
-
|
|
120
|
+
const childItems = (_b = currentData == null ? void 0 : currentData.children) == null ? void 0 : _b.filter(
|
|
121
|
+
(childItem) => {
|
|
122
|
+
var _a4, _b2;
|
|
123
|
+
return ((_b2 = (_a4 = childItem == null ? void 0 : childItem.title) == null ? void 0 : _a4.toLowerCase()) == null ? void 0 : _b2.indexOf(searchString)) > -1;
|
|
124
|
+
}
|
|
125
|
+
);
|
|
143
126
|
const hasChildren = !!(childItems == null ? void 0 : childItems.length);
|
|
144
127
|
const currentDataCopy = { ...currentData };
|
|
145
128
|
if (hasChildren) {
|
|
@@ -158,18 +141,16 @@ const CapPopoverTree = (props) => {
|
|
|
158
141
|
/* @__PURE__ */ jsx(
|
|
159
142
|
CapPopover,
|
|
160
143
|
{
|
|
161
|
-
visible: showPopover
|
|
162
|
-
onVisibleChange:
|
|
144
|
+
visible: showPopover,
|
|
145
|
+
onVisibleChange: setShowPopover,
|
|
163
146
|
trigger,
|
|
164
147
|
placement,
|
|
165
148
|
overlayClassName: classNames(`${clsPrefix}`, overlayClassName),
|
|
166
149
|
...rest,
|
|
167
150
|
content: /* @__PURE__ */ jsx(CapRow, { className: "search-and-tree-wrapper", children: /* @__PURE__ */ jsxs(CapSpin, { spinning: isLoadingData, tip: loadingTip, children: [
|
|
168
151
|
/* @__PURE__ */ jsx(
|
|
169
|
-
|
|
152
|
+
Search,
|
|
170
153
|
{
|
|
171
|
-
prefix: /* @__PURE__ */ jsx(CapIcon, { type: "search", size: "s" }),
|
|
172
|
-
variant: "borderless",
|
|
173
154
|
placeholder: searchPlaceholder,
|
|
174
155
|
onChange: handleSearch,
|
|
175
156
|
className: "search-tree-node"
|
|
@@ -177,7 +158,7 @@ const CapPopoverTree = (props) => {
|
|
|
177
158
|
),
|
|
178
159
|
/* @__PURE__ */ jsx("div", { className: "divider" }),
|
|
179
160
|
(filteredTreeData == null ? void 0 : filteredTreeData.length) ? /* @__PURE__ */ jsx(
|
|
180
|
-
|
|
161
|
+
StyledCapTree,
|
|
181
162
|
{
|
|
182
163
|
showIcon: true,
|
|
183
164
|
blockNode: true,
|
|
@@ -187,11 +168,8 @@ const CapPopoverTree = (props) => {
|
|
|
187
168
|
onExpand: handleOnExpand,
|
|
188
169
|
onSelect: handleSelect,
|
|
189
170
|
switcherIcon,
|
|
190
|
-
|
|
191
|
-
|
|
192
|
-
(expandedKeys == null ? void 0 : expandedKeys.length) && !searchText && styles.isExpanded,
|
|
193
|
-
className
|
|
194
|
-
),
|
|
171
|
+
isExpanded: (expandedKeys == null ? void 0 : expandedKeys.length) && !searchText,
|
|
172
|
+
className,
|
|
195
173
|
...renderOnKeyChange ? { key: JSON.stringify(filteredTreeData) } : {},
|
|
196
174
|
...rest,
|
|
197
175
|
children: getTreeData(searchText ? filteredTreeData : propsTreeData)
|
|
@@ -200,12 +178,44 @@ const CapPopoverTree = (props) => {
|
|
|
200
178
|
] }) })
|
|
201
179
|
}
|
|
202
180
|
),
|
|
203
|
-
/* @__PURE__ */ jsx(CapRow, { children: !isTriggerDisabled ? /* @__PURE__ */ jsx(CapTooltip, { title: tooltipText, overlayClassName: "add-condition-tooltip", children:
|
|
181
|
+
/* @__PURE__ */ jsx(CapRow, { children: !isTriggerDisabled ? /* @__PURE__ */ jsx(CapTooltip, { title: tooltipText, overlayClassName: "add-condition-tooltip", children: /* @__PURE__ */ jsx(TriggerComponent, { ...triggerProps, onClick: () => setShowPopover(true), children: componentText }) }) : /* @__PURE__ */ jsx(CapTooltip, { title: triggerDisabledText, children: /* @__PURE__ */ jsx("span", { className: "button-disabled-tooltip-wrapper", children: /* @__PURE__ */ jsx(TriggerComponent, { ...triggerProps, children: componentText }) }) }) })
|
|
204
182
|
] });
|
|
205
183
|
};
|
|
206
|
-
|
|
207
|
-
|
|
208
|
-
|
|
184
|
+
CapPopoverTree.defaultProps = {
|
|
185
|
+
trigger: "click",
|
|
186
|
+
placement: "rightBottom",
|
|
187
|
+
showIcon: true,
|
|
188
|
+
blockNode: true,
|
|
189
|
+
defaultExpandAll: false,
|
|
190
|
+
isLoadingData: false,
|
|
191
|
+
switcherIcon: /* @__PURE__ */ jsx(ExpandIcon, { size: "m", type: "chevron-down" }),
|
|
192
|
+
renderOnKeyChange: false
|
|
193
|
+
};
|
|
194
|
+
CapPopoverTree.propTypes = {
|
|
195
|
+
trigger: PropTypes.string,
|
|
196
|
+
placement: PropTypes.string,
|
|
197
|
+
className: PropTypes.string,
|
|
198
|
+
defaultExpandAll: PropTypes.bool,
|
|
199
|
+
overlayClassName: PropTypes.string,
|
|
200
|
+
showIcon: PropTypes.bool,
|
|
201
|
+
blockNode: PropTypes.bool,
|
|
202
|
+
propsTreeData: PropTypes.array,
|
|
203
|
+
switcherIcon: PropTypes.node,
|
|
204
|
+
TriggerComponent: PropTypes.node,
|
|
205
|
+
componentText: PropTypes.string,
|
|
206
|
+
triggerProps: PropTypes.object,
|
|
207
|
+
isTriggerDisabled: PropTypes.bool,
|
|
208
|
+
triggerDisabledText: PropTypes.string,
|
|
209
|
+
tooltipText: PropTypes.string,
|
|
210
|
+
onSelect: PropTypes.func,
|
|
211
|
+
propsSelectedKey: PropTypes.array,
|
|
212
|
+
isLoadingData: PropTypes.bool,
|
|
213
|
+
loadingTip: PropTypes.string,
|
|
214
|
+
searchPlaceholder: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
|
|
215
|
+
emptyDataMessage: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
|
|
216
|
+
renderOnKeyChange: PropTypes.bool
|
|
217
|
+
};
|
|
218
|
+
const index = LocaleHoc(CapPopoverTree, { key: "CapPopoverTree" });
|
|
209
219
|
export {
|
|
210
220
|
CapPopoverTree,
|
|
211
221
|
index as default
|
|
@@ -1,10 +1,6 @@
|
|
|
1
|
-
interface StyledCapTreeProps {
|
|
2
|
-
isExpanded?: boolean;
|
|
3
|
-
}
|
|
4
1
|
export declare const ExpandIcon: import("styled-components").StyledComponent<import("../CapIcon").CapIconComponent, any, {}, never>;
|
|
5
2
|
export declare const StyledIcon: import("styled-components").StyledComponent<import("../CapIcon").CapIconComponent, any, {}, never>;
|
|
6
3
|
export declare const StyledCapHeading: import("styled-components").StyledComponent<import("../CapHeading/types").CapHeadingComponent, any, {}, never>;
|
|
7
4
|
export declare const StyledCapColumn: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("../CapColumn").CapColumnProps & import("react").RefAttributes<HTMLDivElement>>, any, {}, never>;
|
|
8
|
-
export declare const StyledCapTree: import("styled-components").StyledComponent<import("react").FC<import("../CapTree").CapTreeProps>, any,
|
|
9
|
-
export {};
|
|
5
|
+
export declare const StyledCapTree: import("styled-components").StyledComponent<import("react").FC<import("../CapTree").CapTreeProps>, any, {}, never>;
|
|
10
6
|
//# sourceMappingURL=style.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"style.d.ts","sourceRoot":"","sources":["../../components/CapPopoverTree/style.ts"],"names":[],"mappings":"AAQA,
|
|
1
|
+
{"version":3,"file":"style.d.ts","sourceRoot":"","sources":["../../components/CapPopoverTree/style.ts"],"names":[],"mappings":"AAQA,eAAO,MAAM,UAAU,oGAMtB,CAAC;AAEF,eAAO,MAAM,UAAU,oGAItB,CAAC;AAEF,eAAO,MAAM,gBAAgB,gHAI5B,CAAC;AAEF,eAAO,MAAM,eAAe,+LAE3B,CAAC;AAEF,eAAO,MAAM,aAAa,oHA4DzB,CAAC"}
|
|
@@ -6,132 +6,31 @@
|
|
|
6
6
|
/* Border Width */
|
|
7
7
|
/* Transition */
|
|
8
8
|
/* Timezones Footer */
|
|
9
|
-
.expandIcon {
|
|
10
|
-
margin-top: 0.714rem;
|
|
11
|
-
z-index: 1;
|
|
12
|
-
}
|
|
13
|
-
.expandIcon svg {
|
|
14
|
-
height: 1.714rem;
|
|
15
|
-
width: 1.714rem;
|
|
16
|
-
}
|
|
17
|
-
.styledIcon {
|
|
18
|
-
z-index: 1;
|
|
19
|
-
padding: 0.286rem;
|
|
20
|
-
border-radius: 0.571rem;
|
|
21
|
-
background: #ebecf0;
|
|
22
|
-
}
|
|
23
|
-
.styledCapHeading {
|
|
24
|
-
display: inline;
|
|
25
|
-
margin-left: 0.286rem;
|
|
26
|
-
}
|
|
27
|
-
.styledCapColumn {
|
|
28
|
-
display: inline;
|
|
29
|
-
}
|
|
30
|
-
.matchedSearch {
|
|
31
|
-
font-weight: 500;
|
|
32
|
-
}
|
|
33
|
-
.styledCapTree.ant-tree.cap-tree-v2 {
|
|
34
|
-
min-height: 8.857rem;
|
|
35
|
-
}
|
|
36
|
-
.styledCapTree.ant-tree.cap-tree-v2 li {
|
|
37
|
-
padding: 0;
|
|
38
|
-
}
|
|
39
|
-
.styledCapTree.ant-tree.cap-tree-v2 .ant-tree-node-content-wrapper {
|
|
40
|
-
height: 2.857rem;
|
|
41
|
-
padding: 0.643rem 0 0.786rem 0.286rem;
|
|
42
|
-
}
|
|
43
|
-
.styledCapTree.ant-tree.cap-tree-v2 .ant-tree-node-content-wrapper:hover {
|
|
44
|
-
background-color: #faf9f4;
|
|
45
|
-
margin-left: -2.857rem;
|
|
46
|
-
padding-left: 3.143rem;
|
|
47
|
-
}
|
|
48
|
-
.styledCapTree.ant-tree.cap-tree-v2 .ant-tree-node-selected .tree-node-title {
|
|
49
|
-
color: #1d61ee;
|
|
50
|
-
}
|
|
51
|
-
.styledCapTree.ant-tree.cap-tree-v2 .ant-tree-node-content-wrapper-open {
|
|
52
|
-
margin-left: -2.857rem;
|
|
53
|
-
padding-left: 3.143rem;
|
|
54
|
-
width: 23.143rem;
|
|
55
|
-
}
|
|
56
|
-
.styledCapTree.ant-tree.cap-tree-v2.isExpanded .ant-tree-node-content-wrapper-open {
|
|
57
|
-
background: #e9f0fe;
|
|
58
|
-
border-left: 0.143rem solid #2466ea;
|
|
59
|
-
}
|
|
60
|
-
.styledCapTree.ant-tree.cap-tree-v2.isExpanded .ant-tree-node-content-wrapper-open:hover {
|
|
61
|
-
background-color: #e9f0fe;
|
|
62
|
-
}
|
|
63
|
-
.styledCapTree.ant-tree.cap-tree-v2.isExpanded .ant-tree-node-content-wrapper-open .tree-node-title {
|
|
64
|
-
color: #1d61ee;
|
|
65
|
-
}
|
|
66
|
-
.styledCapTree.ant-tree.cap-tree-v2.isExpanded .ant-tree-node-content-wrapper-open .tree-node-icon {
|
|
67
|
-
z-index: 1;
|
|
68
|
-
background: #2466ea;
|
|
69
|
-
color: #ffffff;
|
|
70
|
-
}
|
|
71
|
-
.styledCapTree.ant-tree.cap-tree-v2 .ant-tree-child-tree .ant-tree-node-content-wrapper {
|
|
72
|
-
position: relative;
|
|
73
|
-
margin-left: 1.143rem;
|
|
74
|
-
padding-left: 0;
|
|
75
|
-
width: 17.857rem;
|
|
76
|
-
}
|
|
77
|
-
.styledCapTree.ant-tree.cap-tree-v2 .ant-tree-child-tree .ant-tree-node-selected {
|
|
78
|
-
background-color: #e9f0fe;
|
|
79
|
-
}
|
|
80
|
-
.styledCapTree.ant-tree.cap-tree-v2 .ant-tree-child-tree .ant-tree-title {
|
|
81
|
-
margin-left: -0.857rem;
|
|
82
|
-
}
|
|
83
|
-
.styledCapTree.ant-tree.cap-tree-v2 .ant-tree-child-tree .ant-tree-title .info-icon {
|
|
84
|
-
position: absolute;
|
|
85
|
-
right: 1.786rem;
|
|
86
|
-
top: 1rem;
|
|
87
|
-
}
|
|
88
|
-
.isExpanded.ant-tree.cap-tree-v2 .ant-tree-node-content-wrapper-open {
|
|
89
|
-
background: #e9f0fe;
|
|
90
|
-
border-left: 0.143rem solid #2466ea;
|
|
91
|
-
}
|
|
92
|
-
.isExpanded.ant-tree.cap-tree-v2 .ant-tree-node-content-wrapper-open:hover {
|
|
93
|
-
background-color: #e9f0fe;
|
|
94
|
-
}
|
|
95
|
-
.isExpanded.ant-tree.cap-tree-v2 .ant-tree-node-content-wrapper-open .tree-node-title {
|
|
96
|
-
color: #1d61ee;
|
|
97
|
-
}
|
|
98
|
-
.isExpanded.ant-tree.cap-tree-v2 .ant-tree-node-content-wrapper-open .tree-node-icon {
|
|
99
|
-
z-index: 1;
|
|
100
|
-
background: #2466ea;
|
|
101
|
-
color: #ffffff;
|
|
102
|
-
}
|
|
103
|
-
.ant-popover.cap-popover-tree-v2 {
|
|
104
|
-
width: 23.857rem;
|
|
105
|
-
}
|
|
106
9
|
.ant-popover.cap-popover-tree-v2 .ant-popover-content {
|
|
10
|
+
width: 334px;
|
|
107
11
|
padding: 0;
|
|
108
|
-
min-height:
|
|
109
|
-
}
|
|
110
|
-
.ant-popover.cap-popover-tree-v2 .ant-popover-inner-content {
|
|
111
|
-
padding: 0 0 0.857rem 0;
|
|
112
|
-
}
|
|
113
|
-
.ant-popover.cap-popover-tree-v2 .search-and-tree-wrapper {
|
|
114
|
-
display: block;
|
|
115
|
-
}
|
|
116
|
-
.ant-popover.cap-popover-tree-v2 .search-and-tree-wrapper .ant-spin-container {
|
|
117
|
-
width: 100%;
|
|
118
|
-
}
|
|
119
|
-
.ant-popover.cap-popover-tree-v2 .search-tree-node.ant-input-affix-wrapper {
|
|
120
|
-
width: 100%;
|
|
121
|
-
padding: 0.571rem 0.857rem;
|
|
122
|
-
border-bottom: 0.071rem solid #dfe2e7;
|
|
123
|
-
}
|
|
124
|
-
.ant-popover.cap-popover-tree-v2 .search-tree-node.ant-input-affix-wrapper .ant-input {
|
|
125
|
-
margin-left: 0.286rem;
|
|
12
|
+
min-height: 176px;
|
|
126
13
|
}
|
|
127
14
|
.ant-popover.cap-popover-tree-v2 .divider {
|
|
128
|
-
|
|
15
|
+
border-top: 1px solid #dfe2e7;
|
|
129
16
|
}
|
|
130
17
|
.ant-popover.cap-popover-tree-v2 .empty-data-text {
|
|
131
18
|
text-align: center;
|
|
132
|
-
margin-top:
|
|
133
|
-
padding:
|
|
19
|
+
margin-top: 12px;
|
|
20
|
+
padding: 10px 0;
|
|
21
|
+
}
|
|
22
|
+
.ant-popover.cap-popover-tree-v2 .ant-popover-inner-content {
|
|
23
|
+
padding: 0 0 12px 0;
|
|
24
|
+
}
|
|
25
|
+
.ant-popover.cap-popover-tree-v2 .search-tree-node .ant-input-affix-wrapper {
|
|
26
|
+
width: 300px;
|
|
27
|
+
margin-left: 12px;
|
|
28
|
+
}
|
|
29
|
+
.ant-popover.cap-popover-tree-v2 .search-tree-node .ant-input-affix-wrapper .ant-input.ant-input-lg {
|
|
30
|
+
border: none !important;
|
|
31
|
+
border-radius: 0 !important;
|
|
32
|
+
margin-left: 8px;
|
|
134
33
|
}
|
|
135
34
|
.add-condition-tooltip .ant-tooltip-inner {
|
|
136
|
-
width:
|
|
35
|
+
width: 386px;
|
|
137
36
|
}
|