@chayns-components/core 5.0.0-beta.12 → 5.0.0-beta.120
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/README.md +3 -9
- package/lib/components/accordion/Accordion.d.ts +41 -2
- package/lib/components/accordion/Accordion.js +73 -75
- package/lib/components/accordion/Accordion.js.map +1 -1
- package/lib/components/accordion/Accordion.styles.d.ts +3 -2
- package/lib/components/accordion/Accordion.styles.js +67 -26
- package/lib/components/accordion/Accordion.styles.js.map +1 -1
- package/lib/components/accordion/accordion-body/AccordionBody.d.ts +13 -2
- package/lib/components/accordion/accordion-body/AccordionBody.js +19 -11
- package/lib/components/accordion/accordion-body/AccordionBody.js.map +1 -1
- package/lib/components/accordion/accordion-body/AccordionBody.styles.d.ts +4 -1
- package/lib/components/accordion/accordion-body/AccordionBody.styles.js +15 -10
- package/lib/components/accordion/accordion-body/AccordionBody.styles.js.map +1 -1
- package/lib/components/accordion/accordion-content/AccordionContent.d.ts +16 -2
- package/lib/components/accordion/accordion-content/AccordionContent.js +13 -11
- package/lib/components/accordion/accordion-content/AccordionContent.js.map +1 -1
- package/lib/components/accordion/accordion-content/AccordionContent.styles.d.ts +2 -1
- package/lib/components/accordion/accordion-content/AccordionContent.styles.js +24 -14
- package/lib/components/accordion/accordion-content/AccordionContent.styles.js.map +1 -1
- package/lib/components/accordion/accordion-group/AccordionGroup.d.ts +10 -2
- package/lib/components/accordion/accordion-group/AccordionGroup.js +31 -44
- package/lib/components/accordion/accordion-group/AccordionGroup.js.map +1 -1
- package/lib/components/accordion/accordion-head/AccordionHead.d.ts +5 -2
- package/lib/components/accordion/accordion-head/AccordionHead.js +74 -58
- package/lib/components/accordion/accordion-head/AccordionHead.js.map +1 -1
- package/lib/components/accordion/accordion-head/AccordionHead.styles.d.ts +9 -1
- package/lib/components/accordion/accordion-head/AccordionHead.styles.js +138 -45
- package/lib/components/accordion/accordion-head/AccordionHead.styles.js.map +1 -1
- package/lib/components/accordion/accordion-intro/AccordionIntro.d.ts +9 -0
- package/lib/components/accordion/accordion-intro/AccordionIntro.js +21 -0
- package/lib/components/accordion/accordion-intro/AccordionIntro.js.map +1 -0
- package/lib/components/accordion/accordion-intro/AccordionIntro.styles.d.ts +1 -0
- package/lib/components/accordion/accordion-intro/AccordionIntro.styles.js +13 -0
- package/lib/components/accordion/accordion-intro/AccordionIntro.styles.js.map +1 -0
- package/lib/components/accordion/utils.js +10 -12
- package/lib/components/accordion/utils.js.map +1 -1
- package/lib/components/badge/Badge.d.ts +9 -1
- package/lib/components/badge/Badge.js +12 -12
- package/lib/components/badge/Badge.js.map +1 -1
- package/lib/components/badge/Badge.styles.d.ts +4 -1
- package/lib/components/badge/Badge.styles.js +22 -15
- package/lib/components/badge/Badge.styles.js.map +1 -1
- package/lib/components/button/Button.d.ts +2 -2
- package/lib/components/button/Button.js +12 -20
- package/lib/components/button/Button.js.map +1 -1
- package/lib/components/button/Button.styles.js +46 -23
- package/lib/components/button/Button.styles.js.map +1 -1
- package/lib/components/checkbox/Checkbox.d.ts +25 -0
- package/lib/components/checkbox/Checkbox.js +44 -0
- package/lib/components/checkbox/Checkbox.js.map +1 -0
- package/lib/components/checkbox/Checkbox.styles.d.ts +6 -0
- package/lib/components/checkbox/Checkbox.styles.js +131 -0
- package/lib/components/checkbox/Checkbox.styles.js.map +1 -0
- package/lib/components/color-scheme-provider/ColorSchemeProvider.d.ts +2 -2
- package/lib/components/color-scheme-provider/ColorSchemeProvider.js +44 -81
- package/lib/components/color-scheme-provider/ColorSchemeProvider.js.map +1 -1
- package/lib/components/color-scheme-provider/font.d.ts +6 -0
- package/lib/components/color-scheme-provider/font.js +59 -0
- package/lib/components/color-scheme-provider/font.js.map +1 -0
- package/lib/components/context-menu/ContextMenu.d.ts +51 -0
- package/lib/components/context-menu/ContextMenu.js +154 -0
- package/lib/components/context-menu/ContextMenu.js.map +1 -0
- package/lib/components/context-menu/ContextMenu.styles.d.ts +1 -0
- package/lib/components/context-menu/ContextMenu.styles.js +13 -0
- package/lib/components/context-menu/ContextMenu.styles.js.map +1 -0
- package/lib/components/context-menu/constants/alignment.d.ts +8 -0
- package/lib/components/context-menu/constants/alignment.js +17 -0
- package/lib/components/context-menu/constants/alignment.js.map +1 -0
- package/lib/components/context-menu/context-menu-content/ContextMenuContent.d.ts +10 -0
- package/lib/components/context-menu/context-menu-content/ContextMenuContent.js +78 -0
- package/lib/components/context-menu/context-menu-content/ContextMenuContent.js.map +1 -0
- package/lib/components/context-menu/context-menu-content/ContextMenuContent.styles.d.ts +11 -0
- package/lib/components/context-menu/context-menu-content/ContextMenuContent.styles.js +117 -0
- package/lib/components/context-menu/context-menu-content/ContextMenuContent.styles.js.map +1 -0
- package/lib/components/grid-image/GridImage.d.ts +2 -2
- package/lib/components/grid-image/GridImage.js +15 -52
- package/lib/components/grid-image/GridImage.js.map +1 -1
- package/lib/components/grid-image/GridImage.styles.d.ts +3 -3
- package/lib/components/grid-image/GridImage.styles.js +83 -39
- package/lib/components/grid-image/GridImage.styles.js.map +1 -1
- package/lib/components/icon/Icon.d.ts +7 -3
- package/lib/components/icon/Icon.js +23 -33
- package/lib/components/icon/Icon.js.map +1 -1
- package/lib/components/icon/Icon.styles.d.ts +1 -1
- package/lib/components/icon/Icon.styles.js +62 -40
- package/lib/components/icon/Icon.styles.js.map +1 -1
- package/lib/components/icon/utils.js +2 -5
- package/lib/components/icon/utils.js.map +1 -1
- package/lib/components/input/Input.d.ts +37 -0
- package/lib/components/input/Input.js +75 -0
- package/lib/components/input/Input.js.map +1 -0
- package/lib/components/input/Input.styles.d.ts +7 -0
- package/lib/components/input/Input.styles.js +71 -0
- package/lib/components/input/Input.styles.js.map +1 -0
- package/lib/components/list/List.d.ts +4 -2
- package/lib/components/list/List.js +27 -61
- package/lib/components/list/List.js.map +1 -1
- package/lib/components/list/list-item/ListItem.d.ts +15 -2
- package/lib/components/list/list-item/ListItem.js +42 -48
- package/lib/components/list/list-item/ListItem.js.map +1 -1
- package/lib/components/list/list-item/ListItem.styles.js +44 -26
- package/lib/components/list/list-item/ListItem.styles.js.map +1 -1
- package/lib/components/list/list-item/list-item-body/ListItemBody.d.ts +1 -2
- package/lib/components/list/list-item/list-item-body/ListItemBody.js +8 -8
- package/lib/components/list/list-item/list-item-body/ListItemBody.js.map +1 -1
- package/lib/components/list/list-item/list-item-body/ListItemBody.styles.js +3 -9
- package/lib/components/list/list-item/list-item-body/ListItemBody.styles.js.map +1 -1
- package/lib/components/list/list-item/list-item-content/ListItemContent.js +4 -7
- package/lib/components/list/list-item/list-item-content/ListItemContent.js.map +1 -1
- package/lib/components/list/list-item/list-item-content/ListItemContent.styles.js +8 -11
- package/lib/components/list/list-item/list-item-content/ListItemContent.styles.js.map +1 -1
- package/lib/components/list/list-item/list-item-head/ListItemHead.d.ts +3 -2
- package/lib/components/list/list-item/list-item-head/ListItemHead.js +47 -93
- package/lib/components/list/list-item/list-item-head/ListItemHead.js.map +1 -1
- package/lib/components/list/list-item/list-item-head/ListItemHead.styles.d.ts +3 -11
- package/lib/components/list/list-item/list-item-head/ListItemHead.styles.js +90 -76
- package/lib/components/list/list-item/list-item-head/ListItemHead.styles.js.map +1 -1
- package/lib/components/list/list-item/list-item-head/list-item-icon/ListItemIcon.d.ts +6 -0
- package/lib/components/list/list-item/list-item-head/list-item-icon/ListItemIcon.js +23 -0
- package/lib/components/list/list-item/list-item-head/list-item-icon/ListItemIcon.js.map +1 -0
- package/lib/components/list/list-item/list-item-head/list-item-icon/ListItemIcon.styles.d.ts +1 -0
- package/lib/components/list/list-item/list-item-head/list-item-icon/ListItemIcon.styles.js +32 -0
- package/lib/components/list/list-item/list-item-head/list-item-icon/ListItemIcon.styles.js.map +1 -0
- package/lib/components/list/list-item/list-item-head/list-item-image/ListItemImage.d.ts +7 -0
- package/lib/components/list/list-item/list-item-head/list-item-image/ListItemImage.js +44 -0
- package/lib/components/list/list-item/list-item-head/list-item-image/ListItemImage.js.map +1 -0
- package/lib/components/list/list-item/list-item-head/list-item-image/ListItemImage.styles.d.ts +10 -0
- package/lib/components/list/list-item/list-item-head/list-item-image/ListItemImage.styles.js +52 -0
- package/lib/components/list/list-item/list-item-head/list-item-image/ListItemImage.styles.js.map +1 -0
- package/lib/components/mention-finder/MentionFinder.d.ts +31 -0
- package/lib/components/mention-finder/MentionFinder.js +139 -0
- package/lib/components/mention-finder/MentionFinder.js.map +1 -0
- package/lib/components/mention-finder/MentionFinder.styles.d.ts +5 -0
- package/lib/components/mention-finder/MentionFinder.styles.js +94 -0
- package/lib/components/mention-finder/MentionFinder.styles.js.map +1 -0
- package/lib/components/mention-finder/constants/alignment.d.ts +4 -0
- package/lib/components/mention-finder/constants/alignment.js +13 -0
- package/lib/components/mention-finder/constants/alignment.js.map +1 -0
- package/lib/components/mention-finder/mention-finder-item/MentionFinderItem.d.ts +10 -0
- package/lib/components/mention-finder/mention-finder-item/MentionFinderItem.js +31 -0
- package/lib/components/mention-finder/mention-finder-item/MentionFinderItem.js.map +1 -0
- package/lib/components/mention-finder/mention-finder-item/MentionFinderItem.styles.d.ts +8 -0
- package/lib/components/mention-finder/mention-finder-item/MentionFinderItem.styles.js +100 -0
- package/lib/components/mention-finder/mention-finder-item/MentionFinderItem.styles.js.map +1 -0
- package/lib/hooks/uuid.js +2 -21
- package/lib/hooks/uuid.js.map +1 -1
- package/lib/index.d.ts +9 -0
- package/lib/index.js +61 -23
- package/lib/index.js.map +1 -1
- package/lib/types/chayns.d.ts +59 -0
- package/lib/types/chayns.js +14 -0
- package/lib/types/chayns.js.map +1 -0
- package/package.json +22 -18
|
@@ -4,18 +4,9 @@ export declare const StyledListItemHead: import("styled-components").StyledCompo
|
|
|
4
4
|
theme: import("../../../color-scheme-provider/ColorSchemeProvider").Theme;
|
|
5
5
|
}, never>;
|
|
6
6
|
export declare const StyledMotionListItemHeadIndicator: import("styled-components").StyledComponent<import("framer-motion").ForwardRefComponent<HTMLDivElement, import("framer-motion").HTMLMotionProps<"div">>, any, {}, never>;
|
|
7
|
-
|
|
8
|
-
export declare const StyledListItemHeadImageWrapper: import("styled-components").StyledComponent<"div", any, {
|
|
9
|
-
shouldShowRoundImage?: boolean | undefined;
|
|
10
|
-
} & {
|
|
11
|
-
theme: import("../../../color-scheme-provider/ColorSchemeProvider").Theme;
|
|
12
|
-
}, never>;
|
|
13
|
-
declare type StyledListItemHeadImageProps = {
|
|
14
|
-
isHidden: boolean;
|
|
15
|
-
};
|
|
16
|
-
export declare const StyledListItemHeadImage: import("styled-components").StyledComponent<"img", any, StyledListItemHeadImageProps, never>;
|
|
17
|
-
declare type StyledListItemHeadContentProps = {
|
|
7
|
+
type StyledListItemHeadContentProps = {
|
|
18
8
|
isIconOrImageGiven: boolean;
|
|
9
|
+
isOpen: boolean;
|
|
19
10
|
};
|
|
20
11
|
export declare const StyledListItemHeadContent: import("styled-components").StyledComponent<"div", any, StyledListItemHeadContentProps, never>;
|
|
21
12
|
export declare const StyledListItemHeadTitle: import("styled-components").StyledComponent<"div", any, {}, never>;
|
|
@@ -24,5 +15,6 @@ export declare const StyledListItemHeadSubtitle: import("styled-components").Sty
|
|
|
24
15
|
export declare const StyledListItemHeadSubtitleText: import("styled-components").StyledComponent<"span", any, {}, never>;
|
|
25
16
|
export declare const StyledListItemHeadTopRightElement: import("styled-components").StyledComponent<"div", any, {}, never>;
|
|
26
17
|
export declare const StyledListItemHeadBottomRightElement: import("styled-components").StyledComponent<"div", any, {}, never>;
|
|
18
|
+
export declare const StyledListItemHeadRightElement: import("styled-components").StyledComponent<"div", any, {}, never>;
|
|
27
19
|
export declare const StyledMotionListItemHeadHoverItem: import("styled-components").StyledComponent<import("framer-motion").ForwardRefComponent<HTMLDivElement, import("framer-motion").HTMLMotionProps<"div">>, any, {}, never>;
|
|
28
20
|
export {};
|
|
@@ -1,96 +1,110 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
|
|
3
|
-
function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
|
|
4
|
-
|
|
5
3
|
Object.defineProperty(exports, "__esModule", {
|
|
6
4
|
value: true
|
|
7
5
|
});
|
|
8
|
-
exports.
|
|
9
|
-
|
|
6
|
+
exports.StyledMotionListItemHeadIndicator = exports.StyledMotionListItemHeadHoverItem = exports.StyledListItemHeadTopRightElement = exports.StyledListItemHeadTitleText = exports.StyledListItemHeadTitle = exports.StyledListItemHeadSubtitleText = exports.StyledListItemHeadSubtitle = exports.StyledListItemHeadRightElement = exports.StyledListItemHeadContent = exports.StyledListItemHeadBottomRightElement = exports.StyledListItemHead = void 0;
|
|
10
7
|
var _framerMotion = require("framer-motion");
|
|
11
|
-
|
|
12
8
|
var _styledComponents = _interopRequireWildcard(require("styled-components"));
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
var StyledListItemHead = _styledComponents.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n align-items: center;\n color: ", ";\n display: flex;\n height: 64px;\n padding: 12px 9px;\n\n ", "\n"])), function (_ref) {
|
|
23
|
-
var theme = _ref.theme;
|
|
9
|
+
function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
|
|
10
|
+
function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
|
|
11
|
+
const StyledListItemHead = _styledComponents.default.div`
|
|
12
|
+
align-items: center;
|
|
13
|
+
color: ${_ref => {
|
|
14
|
+
let {
|
|
15
|
+
theme
|
|
16
|
+
} = _ref;
|
|
24
17
|
return theme.text;
|
|
25
|
-
}
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
18
|
+
}};
|
|
19
|
+
display: flex;
|
|
20
|
+
height: 64px;
|
|
21
|
+
padding: 12px 9px;
|
|
22
|
+
|
|
23
|
+
${_ref2 => {
|
|
24
|
+
let {
|
|
25
|
+
isClickable
|
|
26
|
+
} = _ref2;
|
|
27
|
+
return isClickable && (0, _styledComponents.css)`
|
|
28
|
+
cursor: pointer;
|
|
29
|
+
`;
|
|
30
|
+
}}
|
|
31
|
+
`;
|
|
30
32
|
exports.StyledListItemHead = StyledListItemHead;
|
|
31
|
-
|
|
33
|
+
const StyledMotionListItemHeadIndicator = (0, _styledComponents.default)(_framerMotion.motion.div)`
|
|
34
|
+
align-items: center;
|
|
35
|
+
display: flex;
|
|
36
|
+
flex: 0 0 auto;
|
|
37
|
+
height: 26px;
|
|
38
|
+
justify-content: center;
|
|
39
|
+
width: 26px;
|
|
40
|
+
`;
|
|
32
41
|
exports.StyledMotionListItemHeadIndicator = StyledMotionListItemHeadIndicator;
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
}
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
return shouldShowRoundImage ? '50%' : undefined;
|
|
50
|
-
}, function (_ref7) {
|
|
51
|
-
var theme = _ref7.theme;
|
|
52
|
-
return theme['009-rgb'];
|
|
53
|
-
});
|
|
54
|
-
|
|
55
|
-
exports.StyledListItemHeadImageWrapper = StyledListItemHeadImageWrapper;
|
|
56
|
-
|
|
57
|
-
var StyledListItemHeadImage = _styledComponents.default.img(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n height: 100%;\n object-fit: cover;\n opacity: ", ";\n transition: opacity 0.4s ease;\n width: 100%;\n"])), function (_ref8) {
|
|
58
|
-
var isHidden = _ref8.isHidden;
|
|
59
|
-
return isHidden ? 0 : 1;
|
|
60
|
-
});
|
|
61
|
-
|
|
62
|
-
exports.StyledListItemHeadImage = StyledListItemHeadImage;
|
|
63
|
-
|
|
64
|
-
var StyledListItemHeadContent = _styledComponents.default.div(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n display: flex;\n flex: 1 1 auto;\n flex-direction: column;\n justify-content: center;\n line-height: normal;\n margin-left: ", ";\n min-width: 0;\n"])), function (_ref9) {
|
|
65
|
-
var isIconOrImageGiven = _ref9.isIconOrImageGiven;
|
|
42
|
+
const StyledListItemHeadContent = _styledComponents.default.div`
|
|
43
|
+
display: flex;
|
|
44
|
+
flex: 1 1 auto;
|
|
45
|
+
flex-direction: column;
|
|
46
|
+
font-weight: ${_ref3 => {
|
|
47
|
+
let {
|
|
48
|
+
isOpen
|
|
49
|
+
} = _ref3;
|
|
50
|
+
return isOpen ? 'bold' : 'normal';
|
|
51
|
+
}};
|
|
52
|
+
justify-content: center;
|
|
53
|
+
line-height: normal;
|
|
54
|
+
margin-left: ${_ref4 => {
|
|
55
|
+
let {
|
|
56
|
+
isIconOrImageGiven
|
|
57
|
+
} = _ref4;
|
|
66
58
|
return isIconOrImageGiven ? '10px' : undefined;
|
|
67
|
-
}
|
|
68
|
-
|
|
59
|
+
}};
|
|
60
|
+
min-width: 0;
|
|
61
|
+
`;
|
|
69
62
|
exports.StyledListItemHeadContent = StyledListItemHeadContent;
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
63
|
+
const StyledListItemHeadTitle = _styledComponents.default.div`
|
|
64
|
+
align-items: center;
|
|
65
|
+
display: flex;
|
|
66
|
+
justify-content: space-between;
|
|
67
|
+
`;
|
|
73
68
|
exports.StyledListItemHeadTitle = StyledListItemHeadTitle;
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
69
|
+
const StyledListItemHeadTitleText = _styledComponents.default.span`
|
|
70
|
+
flex: 1 1 auto;
|
|
71
|
+
min-width: 0;
|
|
72
|
+
`;
|
|
77
73
|
exports.StyledListItemHeadTitleText = StyledListItemHeadTitleText;
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
74
|
+
const StyledListItemHeadSubtitle = _styledComponents.default.div`
|
|
75
|
+
align-items: center;
|
|
76
|
+
display: flex;
|
|
77
|
+
justify-content: space-between;
|
|
78
|
+
margin-top: 2px;
|
|
79
|
+
opacity: 0.75;
|
|
80
|
+
`;
|
|
81
81
|
exports.StyledListItemHeadSubtitle = StyledListItemHeadSubtitle;
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
82
|
+
const StyledListItemHeadSubtitleText = _styledComponents.default.span`
|
|
83
|
+
flex: 1 1 auto;
|
|
84
|
+
font-size: 85%;
|
|
85
|
+
min-width: 0;
|
|
86
|
+
`;
|
|
85
87
|
exports.StyledListItemHeadSubtitleText = StyledListItemHeadSubtitleText;
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
88
|
+
const StyledListItemHeadTopRightElement = _styledComponents.default.div`
|
|
89
|
+
flex: 0 0 auto;
|
|
90
|
+
font-size: 85%;
|
|
91
|
+
margin-left: 8px;
|
|
92
|
+
opacity: 0.75;
|
|
93
|
+
`;
|
|
89
94
|
exports.StyledListItemHeadTopRightElement = StyledListItemHeadTopRightElement;
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
95
|
+
const StyledListItemHeadBottomRightElement = _styledComponents.default.div`
|
|
96
|
+
flex: 0 0 auto;
|
|
97
|
+
margin-left: 8px;
|
|
98
|
+
font-size: 85%;
|
|
99
|
+
`;
|
|
93
100
|
exports.StyledListItemHeadBottomRightElement = StyledListItemHeadBottomRightElement;
|
|
94
|
-
|
|
101
|
+
const StyledListItemHeadRightElement = _styledComponents.default.div`
|
|
102
|
+
flex: 0 0 auto;
|
|
103
|
+
margin-left: 8px;
|
|
104
|
+
`;
|
|
105
|
+
exports.StyledListItemHeadRightElement = StyledListItemHeadRightElement;
|
|
106
|
+
const StyledMotionListItemHeadHoverItem = (0, _styledComponents.default)(_framerMotion.motion.div)`
|
|
107
|
+
overflow: hidden;
|
|
108
|
+
`;
|
|
95
109
|
exports.StyledMotionListItemHeadHoverItem = StyledMotionListItemHeadHoverItem;
|
|
96
110
|
//# sourceMappingURL=ListItemHead.styles.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"
|
|
1
|
+
{"version":3,"file":"ListItemHead.styles.js","names":["_framerMotion","require","_styledComponents","_interopRequireWildcard","_getRequireWildcardCache","nodeInterop","WeakMap","cacheBabelInterop","cacheNodeInterop","obj","__esModule","default","cache","has","get","newObj","hasPropertyDescriptor","Object","defineProperty","getOwnPropertyDescriptor","key","prototype","hasOwnProperty","call","desc","set","StyledListItemHead","styled","div","_ref","theme","text","_ref2","isClickable","css","exports","StyledMotionListItemHeadIndicator","motion","StyledListItemHeadContent","_ref3","isOpen","_ref4","isIconOrImageGiven","undefined","StyledListItemHeadTitle","StyledListItemHeadTitleText","span","StyledListItemHeadSubtitle","StyledListItemHeadSubtitleText","StyledListItemHeadTopRightElement","StyledListItemHeadBottomRightElement","StyledListItemHeadRightElement","StyledMotionListItemHeadHoverItem"],"sources":["../../../../../src/components/list/list-item/list-item-head/ListItemHead.styles.ts"],"sourcesContent":["import { motion } from 'framer-motion';\nimport styled, { css } from 'styled-components';\nimport type { WithTheme } from '../../../color-scheme-provider/ColorSchemeProvider';\n\ntype StyledListItemHeadProps = WithTheme<{\n isClickable: boolean;\n}>;\n\nexport const StyledListItemHead = styled.div<StyledListItemHeadProps>`\n align-items: center;\n color: ${({ theme }: StyledListItemHeadProps) => theme.text};\n display: flex;\n height: 64px;\n padding: 12px 9px;\n\n ${({ isClickable }) =>\n isClickable &&\n css`\n cursor: pointer;\n `}\n`;\n\nexport const StyledMotionListItemHeadIndicator = styled(motion.div)`\n align-items: center;\n display: flex;\n flex: 0 0 auto;\n height: 26px;\n justify-content: center;\n width: 26px;\n`;\n\ntype StyledListItemHeadContentProps = {\n isIconOrImageGiven: boolean;\n isOpen: boolean;\n};\n\nexport const StyledListItemHeadContent = styled.div<StyledListItemHeadContentProps>`\n display: flex;\n flex: 1 1 auto;\n flex-direction: column;\n font-weight: ${({ isOpen }) => (isOpen ? 'bold' : 'normal')};\n justify-content: center;\n line-height: normal;\n margin-left: ${({ isIconOrImageGiven }) => (isIconOrImageGiven ? '10px' : undefined)};\n min-width: 0;\n`;\n\nexport const StyledListItemHeadTitle = styled.div`\n align-items: center;\n display: flex;\n justify-content: space-between;\n`;\n\nexport const StyledListItemHeadTitleText = styled.span`\n flex: 1 1 auto;\n min-width: 0;\n`;\n\nexport const StyledListItemHeadSubtitle = styled.div`\n align-items: center;\n display: flex;\n justify-content: space-between;\n margin-top: 2px;\n opacity: 0.75;\n`;\n\nexport const StyledListItemHeadSubtitleText = styled.span`\n flex: 1 1 auto;\n font-size: 85%;\n min-width: 0;\n`;\n\nexport const StyledListItemHeadTopRightElement = styled.div`\n flex: 0 0 auto;\n font-size: 85%;\n margin-left: 8px;\n opacity: 0.75;\n`;\n\nexport const StyledListItemHeadBottomRightElement = styled.div`\n flex: 0 0 auto;\n margin-left: 8px;\n font-size: 85%;\n`;\n\nexport const StyledListItemHeadRightElement = styled.div`\n flex: 0 0 auto;\n margin-left: 8px;\n`;\n\nexport const StyledMotionListItemHeadHoverItem = styled(motion.div)`\n overflow: hidden;\n`;\n"],"mappings":";;;;;;AAAA,IAAAA,aAAA,GAAAC,OAAA;AACA,IAAAC,iBAAA,GAAAC,uBAAA,CAAAF,OAAA;AAAgD,SAAAG,yBAAAC,WAAA,eAAAC,OAAA,kCAAAC,iBAAA,OAAAD,OAAA,QAAAE,gBAAA,OAAAF,OAAA,YAAAF,wBAAA,YAAAA,CAAAC,WAAA,WAAAA,WAAA,GAAAG,gBAAA,GAAAD,iBAAA,KAAAF,WAAA;AAAA,SAAAF,wBAAAM,GAAA,EAAAJ,WAAA,SAAAA,WAAA,IAAAI,GAAA,IAAAA,GAAA,CAAAC,UAAA,WAAAD,GAAA,QAAAA,GAAA,oBAAAA,GAAA,wBAAAA,GAAA,4BAAAE,OAAA,EAAAF,GAAA,UAAAG,KAAA,GAAAR,wBAAA,CAAAC,WAAA,OAAAO,KAAA,IAAAA,KAAA,CAAAC,GAAA,CAAAJ,GAAA,YAAAG,KAAA,CAAAE,GAAA,CAAAL,GAAA,SAAAM,MAAA,WAAAC,qBAAA,GAAAC,MAAA,CAAAC,cAAA,IAAAD,MAAA,CAAAE,wBAAA,WAAAC,GAAA,IAAAX,GAAA,QAAAW,GAAA,kBAAAH,MAAA,CAAAI,SAAA,CAAAC,cAAA,CAAAC,IAAA,CAAAd,GAAA,EAAAW,GAAA,SAAAI,IAAA,GAAAR,qBAAA,GAAAC,MAAA,CAAAE,wBAAA,CAAAV,GAAA,EAAAW,GAAA,cAAAI,IAAA,KAAAA,IAAA,CAAAV,GAAA,IAAAU,IAAA,CAAAC,GAAA,KAAAR,MAAA,CAAAC,cAAA,CAAAH,MAAA,EAAAK,GAAA,EAAAI,IAAA,YAAAT,MAAA,CAAAK,GAAA,IAAAX,GAAA,CAAAW,GAAA,SAAAL,MAAA,CAAAJ,OAAA,GAAAF,GAAA,MAAAG,KAAA,IAAAA,KAAA,CAAAa,GAAA,CAAAhB,GAAA,EAAAM,MAAA,YAAAA,MAAA;AAOzC,MAAMW,kBAAkB,GAAGC,yBAAM,CAACC,GAA6B;AACtE;AACA,aAAaC,IAAA;EAAA,IAAC;IAAEC;EAA+B,CAAC,GAAAD,IAAA;EAAA,OAAKC,KAAK,CAACC,IAAI;AAAA,CAAC;AAChE;AACA;AACA;AACA;AACA,MAAMC,KAAA;EAAA,IAAC;IAAEC;EAAY,CAAC,GAAAD,KAAA;EAAA,OACdC,WAAW,IACX,IAAAC,qBAAG,CAAC;AACZ;AACA,SAAS;AAAA,CAAC;AACV,CAAC;AAACC,OAAA,CAAAT,kBAAA,GAAAA,kBAAA;AAEK,MAAMU,iCAAiC,GAAG,IAAAT,yBAAM,EAACU,oBAAM,CAACT,GAAG,CAAE;AACpE;AACA;AACA;AACA;AACA;AACA;AACA,CAAC;AAACO,OAAA,CAAAC,iCAAA,GAAAA,iCAAA;AAOK,MAAME,yBAAyB,GAAGX,yBAAM,CAACC,GAAoC;AACpF;AACA;AACA;AACA,mBAAmBW,KAAA;EAAA,IAAC;IAAEC;EAAO,CAAC,GAAAD,KAAA;EAAA,OAAMC,MAAM,GAAG,MAAM,GAAG,QAAQ;AAAA,CAAE;AAChE;AACA;AACA,mBAAmBC,KAAA;EAAA,IAAC;IAAEC;EAAmB,CAAC,GAAAD,KAAA;EAAA,OAAMC,kBAAkB,GAAG,MAAM,GAAGC,SAAS;AAAA,CAAE;AACzF;AACA,CAAC;AAACR,OAAA,CAAAG,yBAAA,GAAAA,yBAAA;AAEK,MAAMM,uBAAuB,GAAGjB,yBAAM,CAACC,GAAI;AAClD;AACA;AACA;AACA,CAAC;AAACO,OAAA,CAAAS,uBAAA,GAAAA,uBAAA;AAEK,MAAMC,2BAA2B,GAAGlB,yBAAM,CAACmB,IAAK;AACvD;AACA;AACA,CAAC;AAACX,OAAA,CAAAU,2BAAA,GAAAA,2BAAA;AAEK,MAAME,0BAA0B,GAAGpB,yBAAM,CAACC,GAAI;AACrD;AACA;AACA;AACA;AACA;AACA,CAAC;AAACO,OAAA,CAAAY,0BAAA,GAAAA,0BAAA;AAEK,MAAMC,8BAA8B,GAAGrB,yBAAM,CAACmB,IAAK;AAC1D;AACA;AACA;AACA,CAAC;AAACX,OAAA,CAAAa,8BAAA,GAAAA,8BAAA;AAEK,MAAMC,iCAAiC,GAAGtB,yBAAM,CAACC,GAAI;AAC5D;AACA;AACA;AACA;AACA,CAAC;AAACO,OAAA,CAAAc,iCAAA,GAAAA,iCAAA;AAEK,MAAMC,oCAAoC,GAAGvB,yBAAM,CAACC,GAAI;AAC/D;AACA;AACA;AACA,CAAC;AAACO,OAAA,CAAAe,oCAAA,GAAAA,oCAAA;AAEK,MAAMC,8BAA8B,GAAGxB,yBAAM,CAACC,GAAI;AACzD;AACA;AACA,CAAC;AAACO,OAAA,CAAAgB,8BAAA,GAAAA,8BAAA;AAEK,MAAMC,iCAAiC,GAAG,IAAAzB,yBAAM,EAACU,oBAAM,CAACT,GAAG,CAAE;AACpE;AACA,CAAC;AAACO,OAAA,CAAAiB,iCAAA,GAAAA,iCAAA"}
|
|
@@ -0,0 +1,23 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
Object.defineProperty(exports, "__esModule", {
|
|
4
|
+
value: true
|
|
5
|
+
});
|
|
6
|
+
exports.default = void 0;
|
|
7
|
+
var _react = _interopRequireDefault(require("react"));
|
|
8
|
+
var _Icon = _interopRequireDefault(require("../../../../icon/Icon"));
|
|
9
|
+
var _ListItemIcon = require("./ListItemIcon.styles");
|
|
10
|
+
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
11
|
+
const ListItemIcon = _ref => {
|
|
12
|
+
let {
|
|
13
|
+
icons
|
|
14
|
+
} = _ref;
|
|
15
|
+
return /*#__PURE__*/_react.default.createElement(_ListItemIcon.StyledListItemIcon, null, /*#__PURE__*/_react.default.createElement(_Icon.default, {
|
|
16
|
+
icons: icons,
|
|
17
|
+
size: 22
|
|
18
|
+
}));
|
|
19
|
+
};
|
|
20
|
+
ListItemIcon.displayName = 'ListItemIcon';
|
|
21
|
+
var _default = ListItemIcon;
|
|
22
|
+
exports.default = _default;
|
|
23
|
+
//# sourceMappingURL=ListItemIcon.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"ListItemIcon.js","names":["_react","_interopRequireDefault","require","_Icon","_ListItemIcon","obj","__esModule","default","ListItemIcon","_ref","icons","createElement","StyledListItemIcon","size","displayName","_default","exports"],"sources":["../../../../../../src/components/list/list-item/list-item-head/list-item-icon/ListItemIcon.tsx"],"sourcesContent":["import React from 'react';\nimport Icon from '../../../../icon/Icon';\nimport { StyledListItemIcon } from './ListItemIcon.styles';\n\ntype ListItemIconProps = {\n icons: string[];\n};\n\nconst ListItemIcon: React.FC<ListItemIconProps> = ({ icons }) => {\n return (\n <StyledListItemIcon>\n <Icon icons={icons} size={22} />\n </StyledListItemIcon>\n );\n};\n\nListItemIcon.displayName = 'ListItemIcon';\n\nexport default ListItemIcon;\n"],"mappings":";;;;;;AAAA,IAAAA,MAAA,GAAAC,sBAAA,CAAAC,OAAA;AACA,IAAAC,KAAA,GAAAF,sBAAA,CAAAC,OAAA;AACA,IAAAE,aAAA,GAAAF,OAAA;AAA2D,SAAAD,uBAAAI,GAAA,WAAAA,GAAA,IAAAA,GAAA,CAAAC,UAAA,GAAAD,GAAA,KAAAE,OAAA,EAAAF,GAAA;AAM3D,MAAMG,YAAyC,GAAGC,IAAA,IAAe;EAAA,IAAd;IAAEC;EAAM,CAAC,GAAAD,IAAA;EACxD,oBACIT,MAAA,CAAAO,OAAA,CAAAI,aAAA,CAACP,aAAA,CAAAQ,kBAAkB,qBACfZ,MAAA,CAAAO,OAAA,CAAAI,aAAA,CAACR,KAAA,CAAAI,OAAI;IAACG,KAAK,EAAEA,KAAM;IAACG,IAAI,EAAE;EAAG,EAAG,CACf;AAE7B,CAAC;AAEDL,YAAY,CAACM,WAAW,GAAG,cAAc;AAAC,IAAAC,QAAA,GAE3BP,YAAY;AAAAQ,OAAA,CAAAT,OAAA,GAAAQ,QAAA"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export declare const StyledListItemIcon: import("styled-components").StyledComponent<"div", any, {}, never>;
|
|
@@ -0,0 +1,32 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
Object.defineProperty(exports, "__esModule", {
|
|
4
|
+
value: true
|
|
5
|
+
});
|
|
6
|
+
exports.StyledListItemIcon = void 0;
|
|
7
|
+
var _styledComponents = _interopRequireDefault(require("styled-components"));
|
|
8
|
+
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
9
|
+
const StyledListItemIcon = _styledComponents.default.div`
|
|
10
|
+
align-items: center;
|
|
11
|
+
background-color: rgba(${_ref => {
|
|
12
|
+
let {
|
|
13
|
+
theme
|
|
14
|
+
} = _ref;
|
|
15
|
+
return theme['text-rgb'];
|
|
16
|
+
}}, 0.1);
|
|
17
|
+
box-shadow: 0 0 0 1px rgba(${_ref2 => {
|
|
18
|
+
let {
|
|
19
|
+
theme
|
|
20
|
+
} = _ref2;
|
|
21
|
+
return theme['009-rgb'];
|
|
22
|
+
}}, 0.08)
|
|
23
|
+
inset;
|
|
24
|
+
display: flex;
|
|
25
|
+
flex: 0 0 auto;
|
|
26
|
+
height: 40px;
|
|
27
|
+
justify-content: center;
|
|
28
|
+
margin-right: 10px;
|
|
29
|
+
width: 40px;
|
|
30
|
+
`;
|
|
31
|
+
exports.StyledListItemIcon = StyledListItemIcon;
|
|
32
|
+
//# sourceMappingURL=ListItemIcon.styles.js.map
|
package/lib/components/list/list-item/list-item-head/list-item-icon/ListItemIcon.styles.js.map
ADDED
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"ListItemIcon.styles.js","names":["_styledComponents","_interopRequireDefault","require","obj","__esModule","default","StyledListItemIcon","styled","div","_ref","theme","_ref2","exports"],"sources":["../../../../../../src/components/list/list-item/list-item-head/list-item-icon/ListItemIcon.styles.ts"],"sourcesContent":["import styled from 'styled-components';\nimport type { WithTheme } from '../../../../color-scheme-provider/ColorSchemeProvider';\n\ntype StyledListItemIconProps = WithTheme<unknown>;\n\nexport const StyledListItemIcon = styled.div`\n align-items: center;\n background-color: rgba(${({ theme }: StyledListItemIconProps) => theme['text-rgb']}, 0.1);\n box-shadow: 0 0 0 1px rgba(${({ theme }: StyledListItemIconProps) => theme['009-rgb']}, 0.08)\n inset;\n display: flex;\n flex: 0 0 auto;\n height: 40px;\n justify-content: center;\n margin-right: 10px;\n width: 40px;\n`;\n"],"mappings":";;;;;;AAAA,IAAAA,iBAAA,GAAAC,sBAAA,CAAAC,OAAA;AAAuC,SAAAD,uBAAAE,GAAA,WAAAA,GAAA,IAAAA,GAAA,CAAAC,UAAA,GAAAD,GAAA,KAAAE,OAAA,EAAAF,GAAA;AAKhC,MAAMG,kBAAkB,GAAGC,yBAAM,CAACC,GAAI;AAC7C;AACA,6BAA6BC,IAAA;EAAA,IAAC;IAAEC;EAA+B,CAAC,GAAAD,IAAA;EAAA,OAAKC,KAAK,CAAC,UAAU,CAAC;AAAA,CAAC;AACvF,iCAAiCC,KAAA;EAAA,IAAC;IAAED;EAA+B,CAAC,GAAAC,KAAA;EAAA,OAAKD,KAAK,CAAC,SAAS,CAAC;AAAA,CAAC;AAC1F;AACA;AACA;AACA;AACA;AACA;AACA;AACA,CAAC;AAACE,OAAA,CAAAN,kBAAA,GAAAA,kBAAA"}
|
|
@@ -0,0 +1,44 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
Object.defineProperty(exports, "__esModule", {
|
|
4
|
+
value: true
|
|
5
|
+
});
|
|
6
|
+
exports.default = void 0;
|
|
7
|
+
var _react = _interopRequireWildcard(require("react"));
|
|
8
|
+
var _GridImage = _interopRequireDefault(require("../../../../grid-image/GridImage"));
|
|
9
|
+
var _ListItemImage = require("./ListItemImage.styles");
|
|
10
|
+
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
11
|
+
function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
|
|
12
|
+
function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
|
|
13
|
+
const ListItemImage = _ref => {
|
|
14
|
+
let {
|
|
15
|
+
images,
|
|
16
|
+
shouldShowRoundImage
|
|
17
|
+
} = _ref;
|
|
18
|
+
const [hasLoadedImage, setHasLoadedImage] = (0, _react.useState)(false);
|
|
19
|
+
const handleImageLoaded = (0, _react.useCallback)(() => {
|
|
20
|
+
setHasLoadedImage(true);
|
|
21
|
+
}, []);
|
|
22
|
+
if (images && images[0] && images[1] && images[2]) {
|
|
23
|
+
const gridImages = [images[0], images[1], images[2]];
|
|
24
|
+
return /*#__PURE__*/_react.default.createElement(_GridImage.default, {
|
|
25
|
+
images: gridImages,
|
|
26
|
+
shouldShowRoundImage: shouldShowRoundImage,
|
|
27
|
+
size: 40
|
|
28
|
+
});
|
|
29
|
+
}
|
|
30
|
+
if (images && images[0]) {
|
|
31
|
+
return /*#__PURE__*/_react.default.createElement(_ListItemImage.StyledListItemHeadImageWrapper, {
|
|
32
|
+
shouldShowRoundImage: shouldShowRoundImage
|
|
33
|
+
}, /*#__PURE__*/_react.default.createElement(_ListItemImage.StyledListItemHeadImage, {
|
|
34
|
+
isHidden: !hasLoadedImage,
|
|
35
|
+
onLoad: handleImageLoaded,
|
|
36
|
+
src: images[0]
|
|
37
|
+
}));
|
|
38
|
+
}
|
|
39
|
+
return null;
|
|
40
|
+
};
|
|
41
|
+
ListItemImage.displayName = 'ListItemImage';
|
|
42
|
+
var _default = ListItemImage;
|
|
43
|
+
exports.default = _default;
|
|
44
|
+
//# sourceMappingURL=ListItemImage.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"ListItemImage.js","names":["_react","_interopRequireWildcard","require","_GridImage","_interopRequireDefault","_ListItemImage","obj","__esModule","default","_getRequireWildcardCache","nodeInterop","WeakMap","cacheBabelInterop","cacheNodeInterop","cache","has","get","newObj","hasPropertyDescriptor","Object","defineProperty","getOwnPropertyDescriptor","key","prototype","hasOwnProperty","call","desc","set","ListItemImage","_ref","images","shouldShowRoundImage","hasLoadedImage","setHasLoadedImage","useState","handleImageLoaded","useCallback","gridImages","createElement","size","StyledListItemHeadImageWrapper","StyledListItemHeadImage","isHidden","onLoad","src","displayName","_default","exports"],"sources":["../../../../../../src/components/list/list-item/list-item-head/list-item-image/ListItemImage.tsx"],"sourcesContent":["import React, { useCallback, useState } from 'react';\nimport GridImage from '../../../../grid-image/GridImage';\nimport { StyledListItemHeadImage, StyledListItemHeadImageWrapper } from './ListItemImage.styles';\n\ntype ListItemImageProps = {\n images: string[];\n shouldShowRoundImage: boolean;\n};\n\nconst ListItemImage: React.FC<ListItemImageProps> = ({ images, shouldShowRoundImage }) => {\n const [hasLoadedImage, setHasLoadedImage] = useState(false);\n const handleImageLoaded = useCallback(() => {\n setHasLoadedImage(true);\n }, []);\n\n if (images && images[0] && images[1] && images[2]) {\n const gridImages = [images[0], images[1], images[2]];\n\n return (\n <GridImage images={gridImages} shouldShowRoundImage={shouldShowRoundImage} size={40} />\n );\n }\n\n if (images && images[0]) {\n return (\n <StyledListItemHeadImageWrapper shouldShowRoundImage={shouldShowRoundImage}>\n <StyledListItemHeadImage\n isHidden={!hasLoadedImage}\n onLoad={handleImageLoaded}\n src={images[0]}\n />\n </StyledListItemHeadImageWrapper>\n );\n }\n\n return null;\n};\n\nListItemImage.displayName = 'ListItemImage';\n\nexport default ListItemImage;\n"],"mappings":"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"}
|
package/lib/components/list/list-item/list-item-head/list-item-image/ListItemImage.styles.d.ts
ADDED
|
@@ -0,0 +1,10 @@
|
|
|
1
|
+
export declare const StyledListItemHeadImageWrapper: import("styled-components").StyledComponent<"div", any, {
|
|
2
|
+
shouldShowRoundImage?: boolean | undefined;
|
|
3
|
+
} & {
|
|
4
|
+
theme: import("../../../../color-scheme-provider/ColorSchemeProvider").Theme;
|
|
5
|
+
}, never>;
|
|
6
|
+
type StyledListItemHeadImageProps = {
|
|
7
|
+
isHidden: boolean;
|
|
8
|
+
};
|
|
9
|
+
export declare const StyledListItemHeadImage: import("styled-components").StyledComponent<"img", any, StyledListItemHeadImageProps, never>;
|
|
10
|
+
export {};
|
|
@@ -0,0 +1,52 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
Object.defineProperty(exports, "__esModule", {
|
|
4
|
+
value: true
|
|
5
|
+
});
|
|
6
|
+
exports.StyledListItemHeadImageWrapper = exports.StyledListItemHeadImage = void 0;
|
|
7
|
+
var _styledComponents = _interopRequireDefault(require("styled-components"));
|
|
8
|
+
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
9
|
+
const StyledListItemHeadImageWrapper = _styledComponents.default.div`
|
|
10
|
+
background-color: rgba(
|
|
11
|
+
${_ref => {
|
|
12
|
+
let {
|
|
13
|
+
theme
|
|
14
|
+
} = _ref;
|
|
15
|
+
return theme['text-rgb'];
|
|
16
|
+
}},
|
|
17
|
+
0.1
|
|
18
|
+
);
|
|
19
|
+
border-radius: ${_ref2 => {
|
|
20
|
+
let {
|
|
21
|
+
shouldShowRoundImage
|
|
22
|
+
} = _ref2;
|
|
23
|
+
return shouldShowRoundImage ? '50%' : undefined;
|
|
24
|
+
}};
|
|
25
|
+
box-shadow: 0 0 0 1px
|
|
26
|
+
rgba(${_ref3 => {
|
|
27
|
+
let {
|
|
28
|
+
theme
|
|
29
|
+
} = _ref3;
|
|
30
|
+
return theme['009-rgb'];
|
|
31
|
+
}}, 0.08) inset;
|
|
32
|
+
flex: 0 0 auto;
|
|
33
|
+
height: 40px;
|
|
34
|
+
overflow: hidden;
|
|
35
|
+
transition: border-radius 0.3s ease;
|
|
36
|
+
width: 40px;
|
|
37
|
+
`;
|
|
38
|
+
exports.StyledListItemHeadImageWrapper = StyledListItemHeadImageWrapper;
|
|
39
|
+
const StyledListItemHeadImage = _styledComponents.default.img`
|
|
40
|
+
height: 100%;
|
|
41
|
+
object-fit: cover;
|
|
42
|
+
opacity: ${_ref4 => {
|
|
43
|
+
let {
|
|
44
|
+
isHidden
|
|
45
|
+
} = _ref4;
|
|
46
|
+
return isHidden ? 0 : 1;
|
|
47
|
+
}};
|
|
48
|
+
transition: opacity 0.4s ease;
|
|
49
|
+
width: 100%;
|
|
50
|
+
`;
|
|
51
|
+
exports.StyledListItemHeadImage = StyledListItemHeadImage;
|
|
52
|
+
//# sourceMappingURL=ListItemImage.styles.js.map
|
package/lib/components/list/list-item/list-item-head/list-item-image/ListItemImage.styles.js.map
ADDED
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"ListItemImage.styles.js","names":["_styledComponents","_interopRequireDefault","require","obj","__esModule","default","StyledListItemHeadImageWrapper","styled","div","_ref","theme","_ref2","shouldShowRoundImage","undefined","_ref3","exports","StyledListItemHeadImage","img","_ref4","isHidden"],"sources":["../../../../../../src/components/list/list-item/list-item-head/list-item-image/ListItemImage.styles.ts"],"sourcesContent":["import styled from 'styled-components';\nimport type { WithTheme } from '../../../../color-scheme-provider/ColorSchemeProvider';\n\ntype StyledListItemHeadImageWrapperProps = WithTheme<{\n shouldShowRoundImage?: boolean;\n}>;\n\nexport const StyledListItemHeadImageWrapper = styled.div<StyledListItemHeadImageWrapperProps>`\n background-color: rgba(\n ${({ theme }: StyledListItemHeadImageWrapperProps) => theme['text-rgb']},\n 0.1\n );\n border-radius: ${({ shouldShowRoundImage }) => (shouldShowRoundImage ? '50%' : undefined)};\n box-shadow: 0 0 0 1px\n rgba(${({ theme }: StyledListItemHeadImageWrapperProps) => theme['009-rgb']}, 0.08) inset;\n flex: 0 0 auto;\n height: 40px;\n overflow: hidden;\n transition: border-radius 0.3s ease;\n width: 40px;\n`;\n\ntype StyledListItemHeadImageProps = {\n isHidden: boolean;\n};\n\nexport const StyledListItemHeadImage = styled.img<StyledListItemHeadImageProps>`\n height: 100%;\n object-fit: cover;\n opacity: ${({ isHidden }) => (isHidden ? 0 : 1)};\n transition: opacity 0.4s ease;\n width: 100%;\n`;\n"],"mappings":";;;;;;AAAA,IAAAA,iBAAA,GAAAC,sBAAA,CAAAC,OAAA;AAAuC,SAAAD,uBAAAE,GAAA,WAAAA,GAAA,IAAAA,GAAA,CAAAC,UAAA,GAAAD,GAAA,KAAAE,OAAA,EAAAF,GAAA;AAOhC,MAAMG,8BAA8B,GAAGC,yBAAM,CAACC,GAAyC;AAC9F;AACA,UAAUC,IAAA;EAAA,IAAC;IAAEC;EAA2C,CAAC,GAAAD,IAAA;EAAA,OAAKC,KAAK,CAAC,UAAU,CAAC;AAAA,CAAC;AAChF;AACA;AACA,qBAAqBC,KAAA;EAAA,IAAC;IAAEC;EAAqB,CAAC,GAAAD,KAAA;EAAA,OAAMC,oBAAoB,GAAG,KAAK,GAAGC,SAAS;AAAA,CAAE;AAC9F;AACA,eAAeC,KAAA;EAAA,IAAC;IAAEJ;EAA2C,CAAC,GAAAI,KAAA;EAAA,OAAKJ,KAAK,CAAC,SAAS,CAAC;AAAA,CAAC;AACpF;AACA;AACA;AACA;AACA;AACA,CAAC;AAACK,OAAA,CAAAT,8BAAA,GAAAA,8BAAA;AAMK,MAAMU,uBAAuB,GAAGT,yBAAM,CAACU,GAAkC;AAChF;AACA;AACA,eAAeC,KAAA;EAAA,IAAC;IAAEC;EAAS,CAAC,GAAAD,KAAA;EAAA,OAAMC,QAAQ,GAAG,CAAC,GAAG,CAAC;AAAA,CAAE;AACpD;AACA;AACA,CAAC;AAACJ,OAAA,CAAAC,uBAAA,GAAAA,uBAAA"}
|
|
@@ -0,0 +1,31 @@
|
|
|
1
|
+
import { FC } from 'react';
|
|
2
|
+
import type { MentionFinderPopupAlignment } from './constants/alignment';
|
|
3
|
+
export type MentionMember = {
|
|
4
|
+
id: string;
|
|
5
|
+
info: string;
|
|
6
|
+
imageUrl: string;
|
|
7
|
+
name: string;
|
|
8
|
+
};
|
|
9
|
+
export type MentionFinderProps = {
|
|
10
|
+
/**
|
|
11
|
+
* The text from the input field
|
|
12
|
+
*/
|
|
13
|
+
inputValue: string;
|
|
14
|
+
/**
|
|
15
|
+
* Members that can be selected
|
|
16
|
+
*/
|
|
17
|
+
members: MentionMember[];
|
|
18
|
+
/**
|
|
19
|
+
* Function to be executed when a member is selected
|
|
20
|
+
*/
|
|
21
|
+
onSelect: ({ fullMatch, member }: {
|
|
22
|
+
fullMatch: string;
|
|
23
|
+
member: MentionMember;
|
|
24
|
+
}) => void;
|
|
25
|
+
/**
|
|
26
|
+
* Alignment of the popup
|
|
27
|
+
*/
|
|
28
|
+
popupAlignment: MentionFinderPopupAlignment;
|
|
29
|
+
};
|
|
30
|
+
declare const MentionFinder: FC<MentionFinderProps>;
|
|
31
|
+
export default MentionFinder;
|