@chayns-components/core 5.0.0-beta.9 → 5.0.0-beta.98
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 +47 -9
- package/lib/components/accordion/Accordion.js +83 -87
- package/lib/components/accordion/Accordion.js.map +1 -1
- package/lib/components/accordion/Accordion.styles.d.ts +6 -5
- 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 +11 -3
- 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 +5 -4
- package/lib/components/accordion/accordion-content/AccordionContent.styles.js +25 -12
- package/lib/components/accordion/accordion-content/AccordionContent.styles.js.map +1 -1
- package/lib/components/accordion/accordion-group/AccordionGroup.d.ts +26 -0
- package/lib/components/accordion/accordion-group/AccordionGroup.js +57 -0
- package/lib/components/accordion/accordion-group/AccordionGroup.js.map +1 -0
- package/lib/components/accordion/accordion-head/AccordionHead.d.ts +8 -4
- package/lib/components/accordion/accordion-head/AccordionHead.js +79 -64
- package/lib/components/accordion/accordion-head/AccordionHead.js.map +1 -1
- package/lib/components/accordion/accordion-head/AccordionHead.styles.d.ts +10 -5
- package/lib/components/accordion/accordion-head/AccordionHead.styles.js +142 -32
- 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.d.ts +2 -0
- package/lib/components/button/Button.styles.js +47 -24
- 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 +7 -1
- package/lib/components/color-scheme-provider/ColorSchemeProvider.js +41 -78
- 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 +19 -0
- package/lib/components/grid-image/GridImage.js +46 -0
- package/lib/components/grid-image/GridImage.js.map +1 -0
- package/lib/components/grid-image/GridImage.styles.d.ts +21 -0
- package/lib/components/grid-image/GridImage.styles.js +105 -0
- package/lib/components/grid-image/GridImage.styles.js.map +1 -0
- package/lib/components/icon/Icon.d.ts +11 -3
- package/lib/components/icon/Icon.js +32 -30
- package/lib/components/icon/Icon.js.map +1 -1
- package/lib/components/icon/Icon.styles.d.ts +8 -1
- package/lib/components/icon/Icon.styles.js +64 -42
- 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 +18 -0
- package/lib/components/list/List.js +54 -0
- package/lib/components/list/List.js.map +1 -0
- package/lib/components/list/list-item/ListItem.d.ts +67 -0
- package/lib/components/list/list-item/ListItem.js +90 -0
- package/lib/components/list/list-item/ListItem.js.map +1 -0
- package/lib/components/list/list-item/ListItem.styles.d.ts +6 -0
- package/lib/components/list/list-item/ListItem.styles.js +56 -0
- package/lib/components/list/list-item/ListItem.styles.js.map +1 -0
- package/lib/components/list/list-item/list-item-body/ListItemBody.d.ts +3 -0
- package/lib/components/list/list-item/list-item-body/ListItemBody.js +36 -0
- package/lib/components/list/list-item/list-item-body/ListItemBody.js.map +1 -0
- package/lib/components/list/list-item/list-item-body/ListItemBody.styles.d.ts +1 -0
- package/lib/components/list/list-item/list-item-body/ListItemBody.styles.js +14 -0
- package/lib/components/list/list-item/list-item-body/ListItemBody.styles.js.map +1 -0
- package/lib/components/list/list-item/list-item-content/ListItemContent.d.ts +3 -0
- package/lib/components/list/list-item/list-item-content/ListItemContent.js +21 -0
- package/lib/components/list/list-item/list-item-content/ListItemContent.js.map +1 -0
- package/lib/components/list/list-item/list-item-content/ListItemContent.styles.d.ts +1 -0
- package/lib/components/list/list-item/list-item-content/ListItemContent.styles.js +19 -0
- package/lib/components/list/list-item/list-item-content/ListItemContent.styles.js.map +1 -0
- package/lib/components/list/list-item/list-item-head/ListItemHead.d.ts +18 -0
- package/lib/components/list/list-item/list-item-head/ListItemHead.js +100 -0
- package/lib/components/list/list-item/list-item-head/ListItemHead.js.map +1 -0
- package/lib/components/list/list-item/list-item-head/ListItemHead.styles.d.ts +20 -0
- package/lib/components/list/list-item/list-item-head/ListItemHead.styles.js +110 -0
- package/lib/components/list/list-item/list-item-head/ListItemHead.styles.js.map +1 -0
- 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/hooks/uuid.d.ts +1 -0
- package/lib/hooks/uuid.js +14 -0
- package/lib/hooks/uuid.js.map +1 -0
- package/lib/index.d.ts +10 -0
- package/lib/index.js +69 -13
- package/lib/index.js.map +1 -1
- package/lib/types/chayns.d.ts +57 -0
- package/lib/types/chayns.js +14 -0
- package/lib/types/chayns.js.map +1 -0
- package/package.json +64 -62
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"GridImage.js","names":["_react","_interopRequireWildcard","require","_GridImage","_getRequireWildcardCache","nodeInterop","WeakMap","cacheBabelInterop","cacheNodeInterop","obj","__esModule","default","cache","has","get","newObj","hasPropertyDescriptor","Object","defineProperty","getOwnPropertyDescriptor","key","prototype","hasOwnProperty","call","desc","set","GridImage","_ref","images","shouldShowRoundImage","size","hasLoadedLeftImage","setHasLoadedLeftImage","useState","hasLoadedTopRightImage","setHasLoadedTopRightImage","hasLoadedBottomRightImage","setHasLoadedBottomRightImage","handleLeftImageLoaded","useCallback","handleTopRightImageLoaded","handleBottomRightImageLoaded","isGridImageHidden","createElement","StyledGridImage","StyledGridLeftImage","isHidden","onLoad","src","StyledGridTopRightImage","StyledGridBottomRightImage","displayName","_default","exports"],"sources":["../../../src/components/grid-image/GridImage.tsx"],"sourcesContent":["import React, { FC, useCallback, useState } from 'react';\nimport {\n StyledGridBottomRightImage,\n StyledGridImage,\n StyledGridLeftImage,\n StyledGridTopRightImage,\n} from './GridImage.styles';\n\ntype GridImageProps = {\n /**\n * The images to be displayed in the `GridImage`. Only the first three\n * images are displayed.\n */\n images: string[];\n /**\n * Images of users should always be displayed in a round shape. Therefore\n * this property can be set to true.\n */\n shouldShowRoundImage?: boolean;\n /**\n * The size of the `GridImage` in pixels, which is set as both width and height.\n */\n size: number;\n};\n\nconst GridImage: FC<GridImageProps> = ({ images, shouldShowRoundImage, size }) => {\n const [hasLoadedLeftImage, setHasLoadedLeftImage] = useState(false);\n const [hasLoadedTopRightImage, setHasLoadedTopRightImage] = useState(false);\n const [hasLoadedBottomRightImage, setHasLoadedBottomRightImage] = useState(false);\n\n const handleLeftImageLoaded = useCallback(() => setHasLoadedLeftImage(true), []);\n\n const handleTopRightImageLoaded = useCallback(() => setHasLoadedTopRightImage(true), []);\n\n const handleBottomRightImageLoaded = useCallback(() => setHasLoadedBottomRightImage(true), []);\n\n const isGridImageHidden =\n !hasLoadedLeftImage || !hasLoadedTopRightImage || !hasLoadedBottomRightImage;\n\n return (\n <StyledGridImage shouldShowRoundImage={shouldShowRoundImage} size={size}>\n <StyledGridLeftImage\n isHidden={isGridImageHidden}\n onLoad={handleLeftImageLoaded}\n size={size}\n src={images[0]}\n />\n <StyledGridTopRightImage\n isHidden={isGridImageHidden}\n onLoad={handleTopRightImageLoaded}\n size={size}\n src={images[1]}\n />\n <StyledGridBottomRightImage\n isHidden={isGridImageHidden}\n onLoad={handleBottomRightImageLoaded}\n src={images[2]}\n />\n </StyledGridImage>\n );\n};\n\nGridImage.displayName = 'GridImage';\n\nexport default GridImage;\n"],"mappings":"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"}
|
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
export declare const StyledGridImage: import("styled-components").StyledComponent<"div", any, {
|
|
2
|
+
shouldShowRoundImage?: boolean | undefined;
|
|
3
|
+
size: number;
|
|
4
|
+
} & {
|
|
5
|
+
theme: import("../color-scheme-provider/ColorSchemeProvider").Theme;
|
|
6
|
+
}, never>;
|
|
7
|
+
type StyledGridLeftImageProps = {
|
|
8
|
+
isHidden: boolean;
|
|
9
|
+
size: number;
|
|
10
|
+
};
|
|
11
|
+
export declare const StyledGridLeftImage: import("styled-components").StyledComponent<"img", any, StyledGridLeftImageProps, never>;
|
|
12
|
+
type StyledGridTopRightImageProps = {
|
|
13
|
+
isHidden: boolean;
|
|
14
|
+
size: number;
|
|
15
|
+
};
|
|
16
|
+
export declare const StyledGridTopRightImage: import("styled-components").StyledComponent<"img", any, StyledGridTopRightImageProps, never>;
|
|
17
|
+
type StyledGridBottomRightImageProps = {
|
|
18
|
+
isHidden: boolean;
|
|
19
|
+
};
|
|
20
|
+
export declare const StyledGridBottomRightImage: import("styled-components").StyledComponent<"img", any, StyledGridBottomRightImageProps, never>;
|
|
21
|
+
export {};
|
|
@@ -0,0 +1,105 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
Object.defineProperty(exports, "__esModule", {
|
|
4
|
+
value: true
|
|
5
|
+
});
|
|
6
|
+
exports.StyledGridTopRightImage = exports.StyledGridLeftImage = exports.StyledGridImage = exports.StyledGridBottomRightImage = void 0;
|
|
7
|
+
var _styledComponents = _interopRequireDefault(require("styled-components"));
|
|
8
|
+
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
9
|
+
const StyledGridImage = _styledComponents.default.div`
|
|
10
|
+
background-color: rgba(${_ref => {
|
|
11
|
+
let {
|
|
12
|
+
theme
|
|
13
|
+
} = _ref;
|
|
14
|
+
return theme['text-rgb'];
|
|
15
|
+
}}, 0.1);
|
|
16
|
+
border-radius: ${_ref2 => {
|
|
17
|
+
let {
|
|
18
|
+
shouldShowRoundImage
|
|
19
|
+
} = _ref2;
|
|
20
|
+
return shouldShowRoundImage ? '50%' : undefined;
|
|
21
|
+
}};
|
|
22
|
+
box-shadow: 0 0 0 1px rgba(${_ref3 => {
|
|
23
|
+
let {
|
|
24
|
+
theme
|
|
25
|
+
} = _ref3;
|
|
26
|
+
return theme['009-rgb'];
|
|
27
|
+
}}, 0.08) inset;
|
|
28
|
+
height: ${_ref4 => {
|
|
29
|
+
let {
|
|
30
|
+
size
|
|
31
|
+
} = _ref4;
|
|
32
|
+
return size;
|
|
33
|
+
}}px;
|
|
34
|
+
overflow: hidden;
|
|
35
|
+
position: relative;
|
|
36
|
+
transition: border-radius 0.3s ease;
|
|
37
|
+
width: ${_ref5 => {
|
|
38
|
+
let {
|
|
39
|
+
size
|
|
40
|
+
} = _ref5;
|
|
41
|
+
return size;
|
|
42
|
+
}}px;
|
|
43
|
+
`;
|
|
44
|
+
exports.StyledGridImage = StyledGridImage;
|
|
45
|
+
const StyledGridLeftImage = _styledComponents.default.img`
|
|
46
|
+
border-right: ${_ref6 => {
|
|
47
|
+
let {
|
|
48
|
+
size
|
|
49
|
+
} = _ref6;
|
|
50
|
+
return size / 40;
|
|
51
|
+
}}px solid white;
|
|
52
|
+
height: 100%;
|
|
53
|
+
left: 0;
|
|
54
|
+
object-fit: cover;
|
|
55
|
+
opacity: ${_ref7 => {
|
|
56
|
+
let {
|
|
57
|
+
isHidden
|
|
58
|
+
} = _ref7;
|
|
59
|
+
return isHidden ? 0 : 1;
|
|
60
|
+
}};
|
|
61
|
+
position: absolute;
|
|
62
|
+
top: 0;
|
|
63
|
+
transition: opacity 0.4s ease;
|
|
64
|
+
width: 60%;
|
|
65
|
+
`;
|
|
66
|
+
exports.StyledGridLeftImage = StyledGridLeftImage;
|
|
67
|
+
const StyledGridTopRightImage = _styledComponents.default.img`
|
|
68
|
+
border-bottom: ${_ref8 => {
|
|
69
|
+
let {
|
|
70
|
+
size
|
|
71
|
+
} = _ref8;
|
|
72
|
+
return size / 40;
|
|
73
|
+
}}px solid white;
|
|
74
|
+
height: 50%;
|
|
75
|
+
object-fit: cover;
|
|
76
|
+
opacity: ${_ref9 => {
|
|
77
|
+
let {
|
|
78
|
+
isHidden
|
|
79
|
+
} = _ref9;
|
|
80
|
+
return isHidden ? 0 : 1;
|
|
81
|
+
}};
|
|
82
|
+
position: absolute;
|
|
83
|
+
right: 0;
|
|
84
|
+
top: 0;
|
|
85
|
+
transition: opacity 0.3s ease;
|
|
86
|
+
width: 40%;
|
|
87
|
+
`;
|
|
88
|
+
exports.StyledGridTopRightImage = StyledGridTopRightImage;
|
|
89
|
+
const StyledGridBottomRightImage = _styledComponents.default.img`
|
|
90
|
+
bottom: 0;
|
|
91
|
+
height: 50%;
|
|
92
|
+
object-fit: cover;
|
|
93
|
+
opacity: ${_ref10 => {
|
|
94
|
+
let {
|
|
95
|
+
isHidden
|
|
96
|
+
} = _ref10;
|
|
97
|
+
return isHidden ? 0 : 1;
|
|
98
|
+
}};
|
|
99
|
+
position: absolute;
|
|
100
|
+
right: 0;
|
|
101
|
+
transition: opacity 0.3s ease;
|
|
102
|
+
width: 40%;
|
|
103
|
+
`;
|
|
104
|
+
exports.StyledGridBottomRightImage = StyledGridBottomRightImage;
|
|
105
|
+
//# sourceMappingURL=GridImage.styles.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"GridImage.styles.js","names":["_styledComponents","_interopRequireDefault","require","obj","__esModule","default","StyledGridImage","styled","div","_ref","theme","_ref2","shouldShowRoundImage","undefined","_ref3","_ref4","size","_ref5","exports","StyledGridLeftImage","img","_ref6","_ref7","isHidden","StyledGridTopRightImage","_ref8","_ref9","StyledGridBottomRightImage","_ref10"],"sources":["../../../src/components/grid-image/GridImage.styles.ts"],"sourcesContent":["import styled from 'styled-components';\nimport type { WithTheme } from '../color-scheme-provider/ColorSchemeProvider';\n\ntype StyledGridImageProps = WithTheme<{\n shouldShowRoundImage?: boolean;\n size: number;\n}>;\n\nexport const StyledGridImage = styled.div<StyledGridImageProps>`\n background-color: rgba(${({ theme }: StyledGridImageProps) => theme['text-rgb']}, 0.1);\n border-radius: ${({ shouldShowRoundImage }) => (shouldShowRoundImage ? '50%' : undefined)};\n box-shadow: 0 0 0 1px rgba(${({ theme }: StyledGridImageProps) => theme['009-rgb']}, 0.08) inset;\n height: ${({ size }) => size}px;\n overflow: hidden;\n position: relative;\n transition: border-radius 0.3s ease;\n width: ${({ size }) => size}px;\n`;\n\ntype StyledGridLeftImageProps = {\n isHidden: boolean;\n size: number;\n};\n\nexport const StyledGridLeftImage = styled.img<StyledGridLeftImageProps>`\n border-right: ${({ size }) => size / 40}px solid white;\n height: 100%;\n left: 0;\n object-fit: cover;\n opacity: ${({ isHidden }) => (isHidden ? 0 : 1)};\n position: absolute;\n top: 0;\n transition: opacity 0.4s ease;\n width: 60%;\n`;\n\ntype StyledGridTopRightImageProps = {\n isHidden: boolean;\n size: number;\n};\n\nexport const StyledGridTopRightImage = styled.img<StyledGridTopRightImageProps>`\n border-bottom: ${({ size }) => size / 40}px solid white;\n height: 50%;\n object-fit: cover;\n opacity: ${({ isHidden }) => (isHidden ? 0 : 1)};\n position: absolute;\n right: 0;\n top: 0;\n transition: opacity 0.3s ease;\n width: 40%;\n`;\n\ntype StyledGridBottomRightImageProps = {\n isHidden: boolean;\n};\n\nexport const StyledGridBottomRightImage = styled.img<StyledGridBottomRightImageProps>`\n bottom: 0;\n height: 50%;\n object-fit: cover;\n opacity: ${({ isHidden }) => (isHidden ? 0 : 1)};\n position: absolute;\n right: 0;\n transition: opacity 0.3s ease;\n width: 40%;\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;AAQhC,MAAMG,eAAe,GAAGC,yBAAM,CAACC,GAA0B;AAChE,6BAA6BC,IAAA;EAAA,IAAC;IAAEC;EAA4B,CAAC,GAAAD,IAAA;EAAA,OAAKC,KAAK,CAAC,UAAU,CAAC;AAAA,CAAC;AACpF,qBAAqBC,KAAA;EAAA,IAAC;IAAEC;EAAqB,CAAC,GAAAD,KAAA;EAAA,OAAMC,oBAAoB,GAAG,KAAK,GAAGC,SAAS;AAAA,CAAE;AAC9F,iCAAiCC,KAAA;EAAA,IAAC;IAAEJ;EAA4B,CAAC,GAAAI,KAAA;EAAA,OAAKJ,KAAK,CAAC,SAAS,CAAC;AAAA,CAAC;AACvF,cAAcK,KAAA;EAAA,IAAC;IAAEC;EAAK,CAAC,GAAAD,KAAA;EAAA,OAAKC,IAAI;AAAA,CAAC;AACjC;AACA;AACA;AACA,aAAaC,KAAA;EAAA,IAAC;IAAED;EAAK,CAAC,GAAAC,KAAA;EAAA,OAAKD,IAAI;AAAA,CAAC;AAChC,CAAC;AAACE,OAAA,CAAAZ,eAAA,GAAAA,eAAA;AAOK,MAAMa,mBAAmB,GAAGZ,yBAAM,CAACa,GAA8B;AACxE,oBAAoBC,KAAA;EAAA,IAAC;IAAEL;EAAK,CAAC,GAAAK,KAAA;EAAA,OAAKL,IAAI,GAAG,EAAE;AAAA,CAAC;AAC5C;AACA;AACA;AACA,eAAeM,KAAA;EAAA,IAAC;IAAEC;EAAS,CAAC,GAAAD,KAAA;EAAA,OAAMC,QAAQ,GAAG,CAAC,GAAG,CAAC;AAAA,CAAE;AACpD;AACA;AACA;AACA;AACA,CAAC;AAACL,OAAA,CAAAC,mBAAA,GAAAA,mBAAA;AAOK,MAAMK,uBAAuB,GAAGjB,yBAAM,CAACa,GAAkC;AAChF,qBAAqBK,KAAA;EAAA,IAAC;IAAET;EAAK,CAAC,GAAAS,KAAA;EAAA,OAAKT,IAAI,GAAG,EAAE;AAAA,CAAC;AAC7C;AACA;AACA,eAAeU,KAAA;EAAA,IAAC;IAAEH;EAAS,CAAC,GAAAG,KAAA;EAAA,OAAMH,QAAQ,GAAG,CAAC,GAAG,CAAC;AAAA,CAAE;AACpD;AACA;AACA;AACA;AACA;AACA,CAAC;AAACL,OAAA,CAAAM,uBAAA,GAAAA,uBAAA;AAMK,MAAMG,0BAA0B,GAAGpB,yBAAM,CAACa,GAAqC;AACtF;AACA;AACA;AACA,eAAeQ,MAAA;EAAA,IAAC;IAAEL;EAAS,CAAC,GAAAK,MAAA;EAAA,OAAML,QAAQ,GAAG,CAAC,GAAG,CAAC;AAAA,CAAE;AACpD;AACA;AACA;AACA;AACA,CAAC;AAACL,OAAA,CAAAS,0BAAA,GAAAA,0BAAA"}
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { FC, MouseEventHandler } from 'react';
|
|
2
|
-
export
|
|
2
|
+
export type IconProps = {
|
|
3
3
|
/**
|
|
4
4
|
* Additional class names for the root element
|
|
5
5
|
*/
|
|
@@ -11,15 +11,23 @@ export declare type IconProps = {
|
|
|
11
11
|
/**
|
|
12
12
|
* The FontAwesome or tobit icons to render. Multiple icons are stacked.
|
|
13
13
|
*/
|
|
14
|
-
icons:
|
|
14
|
+
icons: string[];
|
|
15
15
|
/**
|
|
16
16
|
* Disables the icon so that it cannot be clicked anymore
|
|
17
17
|
*/
|
|
18
18
|
isDisabled?: boolean;
|
|
19
19
|
/**
|
|
20
|
-
* Function to be executed when the icon
|
|
20
|
+
* Function to be executed when the icon was clicked
|
|
21
21
|
*/
|
|
22
22
|
onClick?: MouseEventHandler<HTMLSpanElement>;
|
|
23
|
+
/**
|
|
24
|
+
* Function to be executed when the icon was double-clicked
|
|
25
|
+
*/
|
|
26
|
+
onDoubleClick?: MouseEventHandler<HTMLSpanElement>;
|
|
27
|
+
/**
|
|
28
|
+
* Function to be executed when a mouse button is pressed on the icon
|
|
29
|
+
*/
|
|
30
|
+
onMouseDown?: MouseEventHandler<HTMLSpanElement>;
|
|
23
31
|
/**
|
|
24
32
|
* Size of the icon in pixel
|
|
25
33
|
*/
|
|
@@ -4,55 +4,58 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
4
4
|
value: true
|
|
5
5
|
});
|
|
6
6
|
exports.default = void 0;
|
|
7
|
-
|
|
8
7
|
var _clsx = _interopRequireDefault(require("clsx"));
|
|
9
|
-
|
|
10
8
|
var _react = _interopRequireDefault(require("react"));
|
|
11
|
-
|
|
12
9
|
var _Icon = require("./Icon.styles");
|
|
13
|
-
|
|
14
10
|
var _utils = require("./utils");
|
|
15
|
-
|
|
16
11
|
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
12
|
+
const Icon = _ref => {
|
|
13
|
+
let {
|
|
14
|
+
className,
|
|
15
|
+
color,
|
|
16
|
+
icons,
|
|
17
|
+
isDisabled,
|
|
18
|
+
onClick,
|
|
19
|
+
onDoubleClick,
|
|
20
|
+
onMouseDown,
|
|
21
|
+
size = 15,
|
|
22
|
+
shouldStopPropagation
|
|
23
|
+
} = _ref;
|
|
24
|
+
const handleClick = event => {
|
|
29
25
|
if (shouldStopPropagation) {
|
|
30
26
|
event.stopPropagation();
|
|
31
27
|
}
|
|
32
|
-
|
|
33
28
|
if (typeof onClick === 'function') {
|
|
34
29
|
onClick(event);
|
|
35
30
|
}
|
|
36
31
|
};
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
32
|
+
const handleDoubleClick = event => {
|
|
33
|
+
if (shouldStopPropagation) {
|
|
34
|
+
event.stopPropagation();
|
|
35
|
+
}
|
|
36
|
+
if (typeof onDoubleClick === 'function') {
|
|
37
|
+
onDoubleClick(event);
|
|
38
|
+
}
|
|
39
|
+
};
|
|
40
|
+
let maxStackSizeFactor = 1;
|
|
41
|
+
icons.forEach(icon => {
|
|
42
|
+
const stackSizeFactor = (0, _utils.getStackSizeFactor)(icon);
|
|
42
43
|
if (stackSizeFactor && stackSizeFactor > maxStackSizeFactor) {
|
|
43
44
|
maxStackSizeFactor = stackSizeFactor;
|
|
44
45
|
}
|
|
45
46
|
});
|
|
46
|
-
|
|
47
|
-
|
|
47
|
+
const shouldUseStackedIcon = icons.length > 1;
|
|
48
|
+
const wrapperClasses = (0, _clsx.default)('beta-chayns-icon', shouldUseStackedIcon ? 'fa-stack' : '', className);
|
|
48
49
|
return /*#__PURE__*/_react.default.createElement(_Icon.StyledIconWrapper, {
|
|
49
50
|
className: wrapperClasses,
|
|
50
51
|
isDisabled: isDisabled,
|
|
51
|
-
onClick: handleClick,
|
|
52
|
+
onClick: typeof onClick === 'function' ? handleClick : undefined,
|
|
53
|
+
onDoubleClick: typeof onDoubleClick === 'function' ? handleDoubleClick : undefined,
|
|
54
|
+
onMouseDown: onMouseDown,
|
|
52
55
|
size: size
|
|
53
|
-
}, icons.map(
|
|
54
|
-
|
|
55
|
-
|
|
56
|
+
}, icons.map(icon => {
|
|
57
|
+
const stackSizeFactor = (0, _utils.getStackSizeFactor)(icon);
|
|
58
|
+
const iconClasses = (0, _clsx.default)(icon, className, {
|
|
56
59
|
'fa-stack-1x': shouldUseStackedIcon && stackSizeFactor === undefined
|
|
57
60
|
});
|
|
58
61
|
return /*#__PURE__*/_react.default.createElement(_Icon.StyledIcon, {
|
|
@@ -65,7 +68,6 @@ var Icon = function Icon(_ref) {
|
|
|
65
68
|
});
|
|
66
69
|
}));
|
|
67
70
|
};
|
|
68
|
-
|
|
69
71
|
Icon.displayName = 'Icon';
|
|
70
72
|
var _default = Icon;
|
|
71
73
|
exports.default = _default;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"
|
|
1
|
+
{"version":3,"file":"Icon.js","names":["_clsx","_interopRequireDefault","require","_react","_Icon","_utils","obj","__esModule","default","Icon","_ref","className","color","icons","isDisabled","onClick","onDoubleClick","onMouseDown","size","shouldStopPropagation","handleClick","event","stopPropagation","handleDoubleClick","maxStackSizeFactor","forEach","icon","stackSizeFactor","getStackSizeFactor","shouldUseStackedIcon","length","wrapperClasses","clsx","createElement","StyledIconWrapper","undefined","map","iconClasses","StyledIcon","includes","fontSize","isStacked","key","displayName","_default","exports"],"sources":["../../../src/components/icon/Icon.tsx"],"sourcesContent":["import clsx from 'clsx';\nimport React, { FC, MouseEventHandler } from 'react';\nimport { StyledIcon, StyledIconWrapper } from './Icon.styles';\nimport { getStackSizeFactor } from './utils';\n\nexport type IconProps = {\n /**\n * Additional class names for the root element\n */\n className?: string;\n /**\n * The color of the icon\n */\n color?: string;\n /**\n * The FontAwesome or tobit icons to render. Multiple icons are stacked.\n */\n icons: string[];\n /**\n * Disables the icon so that it cannot be clicked anymore\n */\n isDisabled?: boolean;\n /**\n * Function to be executed when the icon was clicked\n */\n onClick?: MouseEventHandler<HTMLSpanElement>;\n /**\n * Function to be executed when the icon was double-clicked\n */\n onDoubleClick?: MouseEventHandler<HTMLSpanElement>;\n /**\n * Function to be executed when a mouse button is pressed on the icon\n */\n onMouseDown?: MouseEventHandler<HTMLSpanElement>;\n /**\n * Size of the icon in pixel\n */\n size?: number;\n /**\n * Stops event propagation on click\n */\n shouldStopPropagation?: boolean;\n};\n\nconst Icon: FC<IconProps> = ({\n className,\n color,\n icons,\n isDisabled,\n onClick,\n onDoubleClick,\n onMouseDown,\n size = 15,\n shouldStopPropagation,\n}) => {\n const handleClick: MouseEventHandler<HTMLSpanElement> = (event) => {\n if (shouldStopPropagation) {\n event.stopPropagation();\n }\n\n if (typeof onClick === 'function') {\n onClick(event);\n }\n };\n\n const handleDoubleClick: MouseEventHandler<HTMLSpanElement> = (event) => {\n if (shouldStopPropagation) {\n event.stopPropagation();\n }\n\n if (typeof onDoubleClick === 'function') {\n onDoubleClick(event);\n }\n };\n\n let maxStackSizeFactor = 1;\n\n icons.forEach((icon) => {\n const stackSizeFactor = getStackSizeFactor(icon);\n\n if (stackSizeFactor && stackSizeFactor > maxStackSizeFactor) {\n maxStackSizeFactor = stackSizeFactor;\n }\n });\n\n const shouldUseStackedIcon = icons.length > 1;\n\n const wrapperClasses = clsx(\n 'beta-chayns-icon',\n shouldUseStackedIcon ? 'fa-stack' : '',\n className\n );\n\n return (\n <StyledIconWrapper\n className={wrapperClasses}\n isDisabled={isDisabled}\n onClick={typeof onClick === 'function' ? handleClick : undefined}\n onDoubleClick={typeof onDoubleClick === 'function' ? handleDoubleClick : undefined}\n onMouseDown={onMouseDown}\n size={size}\n >\n {icons.map((icon) => {\n const stackSizeFactor = getStackSizeFactor(icon);\n\n const iconClasses = clsx(icon, className, {\n 'fa-stack-1x': shouldUseStackedIcon && stackSizeFactor === undefined,\n });\n\n return (\n <StyledIcon\n className={iconClasses}\n color={icon.includes('fa-inverse') ? 'white' : color}\n fontSize={((stackSizeFactor || 1) / maxStackSizeFactor) * size}\n isStacked={shouldUseStackedIcon}\n key={icon}\n size={size}\n />\n );\n })}\n </StyledIconWrapper>\n );\n};\n\nIcon.displayName = 'Icon';\n\nexport default Icon;\n"],"mappings":"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"}
|
|
@@ -1,8 +1,15 @@
|
|
|
1
|
+
import type { MouseEventHandler } from 'react';
|
|
1
2
|
import type { IconProps } from './Icon';
|
|
2
|
-
|
|
3
|
+
type StyledIconWrapperProps = {
|
|
4
|
+
isDisabled?: boolean;
|
|
5
|
+
onClick?: MouseEventHandler<HTMLSpanElement>;
|
|
6
|
+
size: number;
|
|
7
|
+
};
|
|
3
8
|
export declare const StyledIconWrapper: import("styled-components").StyledComponent<"span", any, StyledIconWrapperProps, never>;
|
|
4
9
|
export declare const StyledIcon: import("styled-components").StyledComponent<"i", any, Omit<IconProps, "icons"> & {
|
|
5
10
|
fontSize: number;
|
|
6
11
|
isStacked?: boolean | undefined;
|
|
12
|
+
} & {
|
|
13
|
+
theme: import("../color-scheme-provider/ColorSchemeProvider").Theme;
|
|
7
14
|
}, never>;
|
|
8
15
|
export {};
|
|
@@ -1,54 +1,76 @@
|
|
|
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.StyledIconWrapper = exports.StyledIcon = void 0;
|
|
10
7
|
var _styledComponents = _interopRequireWildcard(require("styled-components"));
|
|
11
|
-
|
|
12
|
-
var
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
8
|
+
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); }
|
|
9
|
+
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; }
|
|
10
|
+
const StyledIconWrapper = _styledComponents.default.span`
|
|
11
|
+
align-items: center;
|
|
12
|
+
cursor: ${_ref => {
|
|
13
|
+
let {
|
|
14
|
+
isDisabled,
|
|
15
|
+
onClick
|
|
16
|
+
} = _ref;
|
|
17
|
+
return typeof onClick === 'function' && !isDisabled ? 'pointer' : 'inherit';
|
|
18
|
+
}};
|
|
19
|
+
display: inline-flex;
|
|
20
|
+
height: ${_ref2 => {
|
|
21
|
+
let {
|
|
22
|
+
size
|
|
23
|
+
} = _ref2;
|
|
24
|
+
return `${size}px`;
|
|
25
|
+
}};
|
|
26
|
+
justify-content: center;
|
|
27
|
+
opacity: ${_ref3 => {
|
|
28
|
+
let {
|
|
29
|
+
isDisabled
|
|
30
|
+
} = _ref3;
|
|
29
31
|
return isDisabled ? 0.5 : 1;
|
|
30
|
-
}
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
32
|
+
}};
|
|
33
|
+
position: relative;
|
|
34
|
+
transition: opacity 0.3s ease;
|
|
35
|
+
width: ${_ref4 => {
|
|
36
|
+
let {
|
|
37
|
+
size
|
|
38
|
+
} = _ref4;
|
|
39
|
+
return `${size}px`;
|
|
40
|
+
}};
|
|
41
|
+
`;
|
|
35
42
|
exports.StyledIconWrapper = StyledIconWrapper;
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
}
|
|
42
|
-
|
|
43
|
+
const StyledIcon = _styledComponents.default.i`
|
|
44
|
+
color: ${_ref5 => {
|
|
45
|
+
let {
|
|
46
|
+
color,
|
|
47
|
+
theme
|
|
48
|
+
} = _ref5;
|
|
49
|
+
return color || theme.headline;
|
|
50
|
+
}};
|
|
51
|
+
display: ${_ref6 => {
|
|
52
|
+
let {
|
|
53
|
+
isStacked
|
|
54
|
+
} = _ref6;
|
|
43
55
|
return isStacked ? undefined : 'inline-flex';
|
|
44
|
-
}
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
});
|
|
56
|
+
}};
|
|
57
|
+
font-size: ${_ref7 => {
|
|
58
|
+
let {
|
|
59
|
+
fontSize
|
|
60
|
+
} = _ref7;
|
|
61
|
+
return `${fontSize}px`;
|
|
62
|
+
}};
|
|
52
63
|
|
|
64
|
+
${_ref8 => {
|
|
65
|
+
let {
|
|
66
|
+
fontSize,
|
|
67
|
+
size
|
|
68
|
+
} = _ref8;
|
|
69
|
+
return fontSize !== size && (0, _styledComponents.css)`
|
|
70
|
+
top: 50%;
|
|
71
|
+
transform: translateY(-50%);
|
|
72
|
+
`;
|
|
73
|
+
}}
|
|
74
|
+
`;
|
|
53
75
|
exports.StyledIcon = StyledIcon;
|
|
54
76
|
//# sourceMappingURL=Icon.styles.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"
|
|
1
|
+
{"version":3,"file":"Icon.styles.js","names":["_styledComponents","_interopRequireWildcard","require","_getRequireWildcardCache","nodeInterop","WeakMap","cacheBabelInterop","cacheNodeInterop","obj","__esModule","default","cache","has","get","newObj","hasPropertyDescriptor","Object","defineProperty","getOwnPropertyDescriptor","key","prototype","hasOwnProperty","call","desc","set","StyledIconWrapper","styled","span","_ref","isDisabled","onClick","_ref2","size","_ref3","_ref4","exports","StyledIcon","i","_ref5","color","theme","headline","_ref6","isStacked","undefined","_ref7","fontSize","_ref8","css"],"sources":["../../../src/components/icon/Icon.styles.ts"],"sourcesContent":["import type { MouseEventHandler } from 'react';\nimport styled, { css } from 'styled-components';\nimport type { IconProps } from './Icon';\nimport type { WithTheme } from '../color-scheme-provider/ColorSchemeProvider';\n\ntype StyledIconWrapperProps = {\n isDisabled?: boolean;\n onClick?: MouseEventHandler<HTMLSpanElement>;\n size: number;\n};\n\nexport const StyledIconWrapper = styled.span<StyledIconWrapperProps>`\n align-items: center;\n cursor: ${({ isDisabled, onClick }) =>\n typeof onClick === 'function' && !isDisabled ? 'pointer' : 'inherit'};\n display: inline-flex;\n height: ${({ size }) => `${size}px`};\n justify-content: center;\n opacity: ${({ isDisabled }) => (isDisabled ? 0.5 : 1)};\n position: relative;\n transition: opacity 0.3s ease;\n width: ${({ size }) => `${size}px`};\n`;\n\ntype StyledIconProps = Omit<IconProps, 'icons'> &\n WithTheme<{\n fontSize: number;\n isStacked?: boolean;\n }>;\n\nexport const StyledIcon = styled.i<StyledIconProps>`\n color: ${({ color, theme }: StyledIconProps) => color || theme.headline};\n display: ${({ isStacked }) => (isStacked ? undefined : 'inline-flex')};\n font-size: ${({ fontSize }) => `${fontSize}px`};\n\n ${({ fontSize, size }) =>\n fontSize !== size &&\n css`\n top: 50%;\n transform: translateY(-50%);\n `}\n`;\n"],"mappings":"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"}
|
|
@@ -4,13 +4,10 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
4
4
|
value: true
|
|
5
5
|
});
|
|
6
6
|
exports.getStackSizeFactor = void 0;
|
|
7
|
-
|
|
8
|
-
var getStackSizeFactor = function getStackSizeFactor(icon) {
|
|
7
|
+
const getStackSizeFactor = icon => {
|
|
9
8
|
var _icon$match;
|
|
10
|
-
|
|
11
|
-
var sizeFactorString = (_icon$match = icon.match(/fa-stack-([\d])x/)) === null || _icon$match === void 0 ? void 0 : _icon$match[1];
|
|
9
|
+
const sizeFactorString = (_icon$match = icon.match(/fa-stack-([\d])x/)) === null || _icon$match === void 0 ? void 0 : _icon$match[1];
|
|
12
10
|
return typeof sizeFactorString === 'string' ? parseInt(sizeFactorString, 10) : undefined;
|
|
13
11
|
};
|
|
14
|
-
|
|
15
12
|
exports.getStackSizeFactor = getStackSizeFactor;
|
|
16
13
|
//# sourceMappingURL=utils.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"
|
|
1
|
+
{"version":3,"file":"utils.js","names":["getStackSizeFactor","icon","_icon$match","sizeFactorString","match","parseInt","undefined","exports"],"sources":["../../../src/components/icon/utils.ts"],"sourcesContent":["export const getStackSizeFactor = (icon: string) => {\n const sizeFactorString = icon.match(/fa-stack-([\\d])x/)?.[1];\n\n return typeof sizeFactorString === 'string' ? parseInt(sizeFactorString, 10) : undefined;\n};\n"],"mappings":";;;;;;AAAO,MAAMA,kBAAkB,GAAIC,IAAY,IAAK;EAAA,IAAAC,WAAA;EAChD,MAAMC,gBAAgB,IAAAD,WAAA,GAAGD,IAAI,CAACG,KAAK,CAAC,kBAAkB,CAAC,cAAAF,WAAA,uBAA9BA,WAAA,CAAiC,CAAC,CAAC;EAE5D,OAAO,OAAOC,gBAAgB,KAAK,QAAQ,GAAGE,QAAQ,CAACF,gBAAgB,EAAE,EAAE,CAAC,GAAGG,SAAS;AAC5F,CAAC;AAACC,OAAA,CAAAP,kBAAA,GAAAA,kBAAA"}
|
|
@@ -0,0 +1,37 @@
|
|
|
1
|
+
import { ChangeEventHandler, FC, FocusEventHandler, HTMLInputTypeAttribute, KeyboardEventHandler } from 'react';
|
|
2
|
+
export type InputProps = {
|
|
3
|
+
/**
|
|
4
|
+
* Disables the input so that it cannot be changed anymore
|
|
5
|
+
*/
|
|
6
|
+
isDisabled?: boolean;
|
|
7
|
+
/**
|
|
8
|
+
* Function that is executed when the input field loses focus
|
|
9
|
+
*/
|
|
10
|
+
onBlur?: FocusEventHandler<HTMLInputElement>;
|
|
11
|
+
/**
|
|
12
|
+
* Function that is executed when the text of the input changes
|
|
13
|
+
*/
|
|
14
|
+
onChange?: ChangeEventHandler<HTMLInputElement>;
|
|
15
|
+
/**
|
|
16
|
+
* Function that is executed when the input field is focused
|
|
17
|
+
*/
|
|
18
|
+
onFocus?: FocusEventHandler<HTMLInputElement>;
|
|
19
|
+
/**
|
|
20
|
+
* Function that is executed when a letter is pressed
|
|
21
|
+
*/
|
|
22
|
+
onKeyDown?: KeyboardEventHandler<HTMLInputElement>;
|
|
23
|
+
/**
|
|
24
|
+
* Placeholder for the input field
|
|
25
|
+
*/
|
|
26
|
+
placeholder?: string;
|
|
27
|
+
/**
|
|
28
|
+
* Input type set for input element (e.g. 'text', 'number' or 'password')
|
|
29
|
+
*/
|
|
30
|
+
type?: HTMLInputTypeAttribute;
|
|
31
|
+
/**
|
|
32
|
+
* Value if the input field should be controlled
|
|
33
|
+
*/
|
|
34
|
+
value?: string;
|
|
35
|
+
};
|
|
36
|
+
declare const Input: FC<InputProps>;
|
|
37
|
+
export default Input;
|
|
@@ -0,0 +1,75 @@
|
|
|
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 _Input = require("./Input.styles");
|
|
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 Input = _ref => {
|
|
12
|
+
let {
|
|
13
|
+
isDisabled,
|
|
14
|
+
onBlur,
|
|
15
|
+
onChange,
|
|
16
|
+
onFocus,
|
|
17
|
+
onKeyDown,
|
|
18
|
+
placeholder,
|
|
19
|
+
type = 'text',
|
|
20
|
+
value
|
|
21
|
+
} = _ref;
|
|
22
|
+
const [hasValue, setHasValue] = (0, _react.useState)(typeof value === 'string' && value !== '');
|
|
23
|
+
const handleInputFieldChange = (0, _react.useCallback)(event => {
|
|
24
|
+
setHasValue(event.target.value !== '');
|
|
25
|
+
if (typeof onChange === 'function') {
|
|
26
|
+
onChange(event);
|
|
27
|
+
}
|
|
28
|
+
}, [onChange]);
|
|
29
|
+
(0, _react.useEffect)(() => {
|
|
30
|
+
if (typeof value === 'string') {
|
|
31
|
+
setHasValue(value !== '');
|
|
32
|
+
}
|
|
33
|
+
}, [value]);
|
|
34
|
+
const labelPosition = (0, _react.useMemo)(() => {
|
|
35
|
+
if (hasValue) {
|
|
36
|
+
return {
|
|
37
|
+
bottom: -8,
|
|
38
|
+
right: -6
|
|
39
|
+
};
|
|
40
|
+
}
|
|
41
|
+
return {
|
|
42
|
+
left: 0,
|
|
43
|
+
top: 0
|
|
44
|
+
};
|
|
45
|
+
}, [hasValue]);
|
|
46
|
+
return /*#__PURE__*/_react.default.createElement(_Input.StyledInput, {
|
|
47
|
+
className: "beta-chayns-input",
|
|
48
|
+
isDisabled: isDisabled
|
|
49
|
+
}, /*#__PURE__*/_react.default.createElement(_Input.StyledInputContent, null, /*#__PURE__*/_react.default.createElement(_Input.StyledInputField, {
|
|
50
|
+
disabled: isDisabled,
|
|
51
|
+
onBlur: onBlur,
|
|
52
|
+
onChange: handleInputFieldChange,
|
|
53
|
+
onFocus: onFocus,
|
|
54
|
+
onKeyDown: onKeyDown,
|
|
55
|
+
value: value,
|
|
56
|
+
type: type
|
|
57
|
+
}), /*#__PURE__*/_react.default.createElement(_Input.StyledMotionInputLabel, {
|
|
58
|
+
animate: {
|
|
59
|
+
scale: hasValue ? 0.6 : 1
|
|
60
|
+
},
|
|
61
|
+
layout: true,
|
|
62
|
+
style: {
|
|
63
|
+
...labelPosition,
|
|
64
|
+
originX: 1,
|
|
65
|
+
originY: 1
|
|
66
|
+
},
|
|
67
|
+
transition: {
|
|
68
|
+
type: 'tween'
|
|
69
|
+
}
|
|
70
|
+
}, placeholder)));
|
|
71
|
+
};
|
|
72
|
+
Input.displayName = 'Input';
|
|
73
|
+
var _default = Input;
|
|
74
|
+
exports.default = _default;
|
|
75
|
+
//# sourceMappingURL=Input.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Input.js","names":["_react","_interopRequireWildcard","require","_Input","_getRequireWildcardCache","nodeInterop","WeakMap","cacheBabelInterop","cacheNodeInterop","obj","__esModule","default","cache","has","get","newObj","hasPropertyDescriptor","Object","defineProperty","getOwnPropertyDescriptor","key","prototype","hasOwnProperty","call","desc","set","Input","_ref","isDisabled","onBlur","onChange","onFocus","onKeyDown","placeholder","type","value","hasValue","setHasValue","useState","handleInputFieldChange","useCallback","event","target","useEffect","labelPosition","useMemo","bottom","right","left","top","createElement","StyledInput","className","StyledInputContent","StyledInputField","disabled","StyledMotionInputLabel","animate","scale","layout","style","originX","originY","transition","displayName","_default","exports"],"sources":["../../../src/components/input/Input.tsx"],"sourcesContent":["import React, {\n ChangeEvent,\n ChangeEventHandler,\n FC,\n FocusEventHandler,\n HTMLInputTypeAttribute,\n KeyboardEventHandler,\n useCallback,\n useEffect,\n useMemo,\n useState,\n} from 'react';\nimport {\n StyledInput,\n StyledInputContent,\n StyledInputField,\n StyledMotionInputLabel,\n} from './Input.styles';\n\nexport type InputProps = {\n /**\n * Disables the input so that it cannot be changed anymore\n */\n isDisabled?: boolean;\n /**\n * Function that is executed when the input field loses focus\n */\n onBlur?: FocusEventHandler<HTMLInputElement>;\n /**\n * Function that is executed when the text of the input changes\n */\n onChange?: ChangeEventHandler<HTMLInputElement>;\n /**\n * Function that is executed when the input field is focused\n */\n onFocus?: FocusEventHandler<HTMLInputElement>;\n /**\n * Function that is executed when a letter is pressed\n */\n onKeyDown?: KeyboardEventHandler<HTMLInputElement>;\n /**\n * Placeholder for the input field\n */\n placeholder?: string;\n /**\n * Input type set for input element (e.g. 'text', 'number' or 'password')\n */\n type?: HTMLInputTypeAttribute;\n /**\n * Value if the input field should be controlled\n */\n value?: string;\n};\n\nconst Input: FC<InputProps> = ({\n isDisabled,\n onBlur,\n onChange,\n onFocus,\n onKeyDown,\n placeholder,\n type = 'text',\n value,\n}) => {\n const [hasValue, setHasValue] = useState(typeof value === 'string' && value !== '');\n\n const handleInputFieldChange = useCallback(\n (event: ChangeEvent<HTMLInputElement>) => {\n setHasValue(event.target.value !== '');\n\n if (typeof onChange === 'function') {\n onChange(event);\n }\n },\n [onChange]\n );\n\n useEffect(() => {\n if (typeof value === 'string') {\n setHasValue(value !== '');\n }\n }, [value]);\n\n const labelPosition = useMemo(() => {\n if (hasValue) {\n return { bottom: -8, right: -6 };\n }\n\n return { left: 0, top: 0 };\n }, [hasValue]);\n\n return (\n <StyledInput className=\"beta-chayns-input\" isDisabled={isDisabled}>\n <StyledInputContent>\n <StyledInputField\n disabled={isDisabled}\n onBlur={onBlur}\n onChange={handleInputFieldChange}\n onFocus={onFocus}\n onKeyDown={onKeyDown}\n value={value}\n type={type}\n />\n <StyledMotionInputLabel\n animate={{ scale: hasValue ? 0.6 : 1 }}\n layout\n style={{ ...labelPosition, originX: 1, originY: 1 }}\n transition={{ type: 'tween' }}\n >\n {placeholder}\n </StyledMotionInputLabel>\n </StyledInputContent>\n </StyledInput>\n );\n};\n\nInput.displayName = 'Input';\n\nexport default Input;\n"],"mappings":"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"}
|