@chayns-components/core 5.0.0-beta.630 → 5.0.0-beta.632
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/lib/cjs/components/context-menu/context-menu-content/ContextMenuContent.js +25 -5
- package/lib/cjs/components/context-menu/context-menu-content/ContextMenuContent.js.map +1 -1
- package/lib/cjs/components/context-menu/context-menu-content/ContextMenuContent.styles.js +16 -4
- package/lib/cjs/components/context-menu/context-menu-content/ContextMenuContent.styles.js.map +1 -1
- package/lib/esm/components/context-menu/context-menu-content/ContextMenuContent.js +23 -5
- package/lib/esm/components/context-menu/context-menu-content/ContextMenuContent.js.map +1 -1
- package/lib/esm/components/context-menu/context-menu-content/ContextMenuContent.styles.js +16 -4
- package/lib/esm/components/context-menu/context-menu-content/ContextMenuContent.styles.js.map +1 -1
- package/package.json +2 -2
|
@@ -4,11 +4,13 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
4
4
|
value: true
|
|
5
5
|
});
|
|
6
6
|
exports.default = void 0;
|
|
7
|
-
var _react =
|
|
7
|
+
var _react = _interopRequireWildcard(require("react"));
|
|
8
8
|
var _contextMenu = require("../../../types/contextMenu");
|
|
9
9
|
var _Icon = _interopRequireDefault(require("../../icon/Icon"));
|
|
10
10
|
var _ContextMenuContent = require("./ContextMenuContent.styles");
|
|
11
11
|
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
|
|
12
|
+
function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
|
|
13
|
+
function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
|
|
12
14
|
const ContextMenuContent = /*#__PURE__*/_react.default.forwardRef(({
|
|
13
15
|
alignment,
|
|
14
16
|
coordinates,
|
|
@@ -17,10 +19,28 @@ const ContextMenuContent = /*#__PURE__*/_react.default.forwardRef(({
|
|
|
17
19
|
const isBottomLeftAlignment = alignment === _contextMenu.ContextMenuAlignment.BottomLeft;
|
|
18
20
|
const isTopLeftAlignment = alignment === _contextMenu.ContextMenuAlignment.TopLeft;
|
|
19
21
|
const isTopRightAlignment = alignment === _contextMenu.ContextMenuAlignment.TopRight;
|
|
20
|
-
const
|
|
21
|
-
const
|
|
22
|
-
const
|
|
23
|
-
|
|
22
|
+
const isTopCenterAlignment = alignment === _contextMenu.ContextMenuAlignment.TopCenter;
|
|
23
|
+
const isBottomCenterAlignment = alignment === _contextMenu.ContextMenuAlignment.BottomCenter;
|
|
24
|
+
const percentageOffsetX = (0, _react.useMemo)(() => {
|
|
25
|
+
if (isBottomLeftAlignment || isTopLeftAlignment) {
|
|
26
|
+
return -100;
|
|
27
|
+
}
|
|
28
|
+
if (isBottomCenterAlignment || isTopCenterAlignment) {
|
|
29
|
+
return -50;
|
|
30
|
+
}
|
|
31
|
+
return 0;
|
|
32
|
+
}, [isBottomCenterAlignment, isBottomLeftAlignment, isTopCenterAlignment, isTopLeftAlignment]);
|
|
33
|
+
const anchorOffsetX = (0, _react.useMemo)(() => {
|
|
34
|
+
if (isBottomLeftAlignment || isTopLeftAlignment) {
|
|
35
|
+
return 15;
|
|
36
|
+
}
|
|
37
|
+
if (isBottomCenterAlignment || isTopCenterAlignment) {
|
|
38
|
+
return 0;
|
|
39
|
+
}
|
|
40
|
+
return -15;
|
|
41
|
+
}, [isBottomCenterAlignment, isBottomLeftAlignment, isTopCenterAlignment, isTopLeftAlignment]);
|
|
42
|
+
const percentageOffsetY = isTopRightAlignment || isTopLeftAlignment || isTopCenterAlignment ? -100 : 0;
|
|
43
|
+
const anchorOffsetY = isTopRightAlignment || isTopLeftAlignment || isTopCenterAlignment ? -21 : 21;
|
|
24
44
|
const exitAndInitialY = isTopLeftAlignment || isTopRightAlignment ? -16 : 16;
|
|
25
45
|
return /*#__PURE__*/_react.default.createElement(_ContextMenuContent.StyledMotionContextMenuContent, {
|
|
26
46
|
animate: {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ContextMenuContent.js","names":["_react","
|
|
1
|
+
{"version":3,"file":"ContextMenuContent.js","names":["_react","_interopRequireWildcard","require","_contextMenu","_Icon","_interopRequireDefault","_ContextMenuContent","e","__esModule","default","_getRequireWildcardCache","WeakMap","r","t","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","ContextMenuContent","React","forwardRef","alignment","coordinates","items","ref","isBottomLeftAlignment","ContextMenuAlignment","BottomLeft","isTopLeftAlignment","TopLeft","isTopRightAlignment","TopRight","isTopCenterAlignment","TopCenter","isBottomCenterAlignment","BottomCenter","percentageOffsetX","useMemo","anchorOffsetX","percentageOffsetY","anchorOffsetY","exitAndInitialY","createElement","StyledMotionContextMenuContent","animate","opacity","y","exit","initial","$position","style","left","x","top","transition","type","transformTemplate","map","icons","key","onClick","text","StyledContextMenuContentItem","event","preventDefault","stopPropagation","StyledContextMenuContentItemIconWrapper","StyledContextMenuContentItemText","displayName","_default","exports"],"sources":["../../../../../src/components/context-menu/context-menu-content/ContextMenuContent.tsx"],"sourcesContent":["import React, { useMemo } from 'react';\nimport { ContextMenuAlignment } from '../../../types/contextMenu';\nimport Icon from '../../icon/Icon';\nimport type { ContextMenuCoordinates, ContextMenuItem } from '../ContextMenu';\nimport {\n StyledContextMenuContentItem,\n StyledContextMenuContentItemIconWrapper,\n StyledContextMenuContentItemText,\n StyledMotionContextMenuContent,\n} from './ContextMenuContent.styles';\n\ntype ContextMenuContentProps = {\n alignment: ContextMenuAlignment;\n coordinates: ContextMenuCoordinates;\n items: ContextMenuItem[];\n};\n\nconst ContextMenuContent = React.forwardRef<HTMLDivElement, ContextMenuContentProps>(\n ({ alignment, coordinates, items }, ref) => {\n const isBottomLeftAlignment = alignment === ContextMenuAlignment.BottomLeft;\n const isTopLeftAlignment = alignment === ContextMenuAlignment.TopLeft;\n const isTopRightAlignment = alignment === ContextMenuAlignment.TopRight;\n const isTopCenterAlignment = alignment === ContextMenuAlignment.TopCenter;\n const isBottomCenterAlignment = alignment === ContextMenuAlignment.BottomCenter;\n\n const percentageOffsetX = useMemo(() => {\n if (isBottomLeftAlignment || isTopLeftAlignment) {\n return -100;\n }\n\n if (isBottomCenterAlignment || isTopCenterAlignment) {\n return -50;\n }\n\n return 0;\n }, [\n isBottomCenterAlignment,\n isBottomLeftAlignment,\n isTopCenterAlignment,\n isTopLeftAlignment,\n ]);\n\n const anchorOffsetX = useMemo(() => {\n if (isBottomLeftAlignment || isTopLeftAlignment) {\n return 15;\n }\n\n if (isBottomCenterAlignment || isTopCenterAlignment) {\n return 0;\n }\n\n return -15;\n }, [\n isBottomCenterAlignment,\n isBottomLeftAlignment,\n isTopCenterAlignment,\n isTopLeftAlignment,\n ]);\n\n const percentageOffsetY =\n isTopRightAlignment || isTopLeftAlignment || isTopCenterAlignment ? -100 : 0;\n\n const anchorOffsetY =\n isTopRightAlignment || isTopLeftAlignment || isTopCenterAlignment ? -21 : 21;\n\n const exitAndInitialY = isTopLeftAlignment || isTopRightAlignment ? -16 : 16;\n\n return (\n <StyledMotionContextMenuContent\n animate={{ opacity: 1, y: 0 }}\n exit={{ opacity: 0, y: exitAndInitialY }}\n initial={{ opacity: 0, y: exitAndInitialY }}\n $position={alignment}\n ref={ref}\n style={{ left: coordinates.x, top: coordinates.y }}\n transition={{ type: 'tween' }}\n transformTemplate={({ y = '0px' }) => `\n translateX(${percentageOffsetX}%)\n translateY(${percentageOffsetY}%)\n translateX(${anchorOffsetX}px)\n translateY(${anchorOffsetY}px)\n translateY(${y})\n `}\n >\n {items.map(({ icons, key, onClick, text }) => (\n <StyledContextMenuContentItem\n key={key}\n onClick={(event) => {\n event.preventDefault();\n event.stopPropagation();\n\n void onClick(event);\n }}\n >\n <StyledContextMenuContentItemIconWrapper>\n <Icon icons={icons} />\n </StyledContextMenuContentItemIconWrapper>\n <StyledContextMenuContentItemText>{text}</StyledContextMenuContentItemText>\n </StyledContextMenuContentItem>\n ))}\n </StyledMotionContextMenuContent>\n );\n },\n);\n\nContextMenuContent.displayName = 'ContextMenuContent';\n\nexport default ContextMenuContent;\n"],"mappings":"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","ignoreList":[]}
|
|
@@ -40,26 +40,38 @@ const StyledMotionContextMenuContent = exports.StyledMotionContextMenuContent =
|
|
|
40
40
|
case _contextMenu.ContextMenuAlignment.TopLeft:
|
|
41
41
|
return (0, _styledComponents.css)`
|
|
42
42
|
bottom: -7px;
|
|
43
|
-
right:
|
|
43
|
+
right: 7px;
|
|
44
44
|
transform: rotate(45deg);
|
|
45
45
|
`;
|
|
46
46
|
case _contextMenu.ContextMenuAlignment.BottomLeft:
|
|
47
47
|
return (0, _styledComponents.css)`
|
|
48
48
|
top: -7px;
|
|
49
|
-
right:
|
|
49
|
+
right: 7px;
|
|
50
50
|
transform: rotate(225deg);
|
|
51
51
|
`;
|
|
52
52
|
case _contextMenu.ContextMenuAlignment.TopRight:
|
|
53
53
|
return (0, _styledComponents.css)`
|
|
54
54
|
transform: rotate(45deg);
|
|
55
55
|
bottom: -7px;
|
|
56
|
-
left:
|
|
56
|
+
left: 7px;
|
|
57
57
|
`;
|
|
58
58
|
case _contextMenu.ContextMenuAlignment.BottomRight:
|
|
59
59
|
return (0, _styledComponents.css)`
|
|
60
60
|
transform: rotate(225deg);
|
|
61
61
|
top: -7px;
|
|
62
|
-
left:
|
|
62
|
+
left: 7px;
|
|
63
|
+
`;
|
|
64
|
+
case _contextMenu.ContextMenuAlignment.TopCenter:
|
|
65
|
+
return (0, _styledComponents.css)`
|
|
66
|
+
bottom: -7px;
|
|
67
|
+
right: 45%;
|
|
68
|
+
transform: rotate(45deg);
|
|
69
|
+
`;
|
|
70
|
+
case _contextMenu.ContextMenuAlignment.BottomCenter:
|
|
71
|
+
return (0, _styledComponents.css)`
|
|
72
|
+
transform: rotate(225deg);
|
|
73
|
+
top: -7px;
|
|
74
|
+
left: 45%;
|
|
63
75
|
`;
|
|
64
76
|
default:
|
|
65
77
|
return undefined;
|
package/lib/cjs/components/context-menu/context-menu-content/ContextMenuContent.styles.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ContextMenuContent.styles.js","names":["_framerMotion","require","_styledComponents","_interopRequireWildcard","_contextMenu","_getRequireWildcardCache","e","WeakMap","r","t","__esModule","default","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","StyledMotionContextMenuContent","exports","styled","motion","div","theme","text","$position","ContextMenuAlignment","TopLeft","css","BottomLeft","TopRight","BottomRight","undefined","StyledContextMenuContentItem","StyledContextMenuContentItemIconWrapper","StyledContextMenuContentItemText"],"sources":["../../../../../src/components/context-menu/context-menu-content/ContextMenuContent.styles.ts"],"sourcesContent":["import { motion } from 'framer-motion';\nimport styled, { css } from 'styled-components';\nimport { ContextMenuAlignment } from '../../../types/contextMenu';\nimport type { WithTheme } from '../../color-scheme-provider/ColorSchemeProvider';\n\ntype StyledMotionContextMenuContentProps = WithTheme<{\n $position: ContextMenuAlignment;\n}>;\n\nexport const StyledMotionContextMenuContent = styled(\n motion.div,\n)<StyledMotionContextMenuContentProps>`\n background-color: ${({ theme }: StyledMotionContextMenuContentProps) => theme['001']};\n border: 1px solid rgba(0, 0, 0, 0.1);\n border-radius: 3px;\n box-shadow: 1px 3px 8px rgb(0 0 0 / 30%);\n color: ${({ theme }: StyledMotionContextMenuContentProps) => theme.text};\n position: absolute;\n z-index: 0;\n\n &::after {\n background-color: inherit;\n border-bottom: 1px solid rgba(0, 0, 0, 0.1);\n border-right: 1px solid rgba(0, 0, 0, 0.1);\n box-shadow: 2px 2px 8px rgb(4 3 4 / 10%);\n content: '';\n height: 14px;\n position: absolute;\n width: 14px;\n z-index: -2;\n\n ${({ $position }) => {\n switch ($position) {\n case ContextMenuAlignment.TopLeft:\n return css`\n bottom: -7px;\n right:
|
|
1
|
+
{"version":3,"file":"ContextMenuContent.styles.js","names":["_framerMotion","require","_styledComponents","_interopRequireWildcard","_contextMenu","_getRequireWildcardCache","e","WeakMap","r","t","__esModule","default","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","StyledMotionContextMenuContent","exports","styled","motion","div","theme","text","$position","ContextMenuAlignment","TopLeft","css","BottomLeft","TopRight","BottomRight","TopCenter","BottomCenter","undefined","StyledContextMenuContentItem","StyledContextMenuContentItemIconWrapper","StyledContextMenuContentItemText"],"sources":["../../../../../src/components/context-menu/context-menu-content/ContextMenuContent.styles.ts"],"sourcesContent":["import { motion } from 'framer-motion';\nimport styled, { css } from 'styled-components';\nimport { ContextMenuAlignment } from '../../../types/contextMenu';\nimport type { WithTheme } from '../../color-scheme-provider/ColorSchemeProvider';\n\ntype StyledMotionContextMenuContentProps = WithTheme<{\n $position: ContextMenuAlignment;\n}>;\n\nexport const StyledMotionContextMenuContent = styled(\n motion.div,\n)<StyledMotionContextMenuContentProps>`\n background-color: ${({ theme }: StyledMotionContextMenuContentProps) => theme['001']};\n border: 1px solid rgba(0, 0, 0, 0.1);\n border-radius: 3px;\n box-shadow: 1px 3px 8px rgb(0 0 0 / 30%);\n color: ${({ theme }: StyledMotionContextMenuContentProps) => theme.text};\n position: absolute;\n z-index: 0;\n\n &::after {\n background-color: inherit;\n border-bottom: 1px solid rgba(0, 0, 0, 0.1);\n border-right: 1px solid rgba(0, 0, 0, 0.1);\n box-shadow: 2px 2px 8px rgb(4 3 4 / 10%);\n content: '';\n height: 14px;\n position: absolute;\n width: 14px;\n z-index: -2;\n\n ${({ $position }) => {\n switch ($position) {\n case ContextMenuAlignment.TopLeft:\n return css`\n bottom: -7px;\n right: 7px;\n transform: rotate(45deg);\n `;\n case ContextMenuAlignment.BottomLeft:\n return css`\n top: -7px;\n right: 7px;\n transform: rotate(225deg);\n `;\n case ContextMenuAlignment.TopRight:\n return css`\n transform: rotate(45deg);\n bottom: -7px;\n left: 7px;\n `;\n case ContextMenuAlignment.BottomRight:\n return css`\n transform: rotate(225deg);\n top: -7px;\n left: 7px;\n `;\n case ContextMenuAlignment.TopCenter:\n return css`\n bottom: -7px;\n right: 45%;\n transform: rotate(45deg);\n `;\n case ContextMenuAlignment.BottomCenter:\n return css`\n transform: rotate(225deg);\n top: -7px;\n left: 45%;\n `;\n\n default:\n return undefined;\n }\n }}\n }\n\n &::before {\n background-color: inherit;\n bottom: 0;\n content: '';\n left: 0;\n position: absolute;\n right: 0;\n top: 0;\n z-index: -1;\n }\n`;\n\ntype StyledContextMenuContentItemProps = WithTheme<unknown>;\n\nexport const StyledContextMenuContentItem = styled.div<StyledContextMenuContentItemProps>`\n cursor: pointer;\n display: flex;\n padding: 5px 8px 5px 5px;\n transition: background-color 0.3s ease;\n\n &:hover {\n background-color: ${({ theme }: StyledContextMenuContentItemProps) =>\n theme['secondary-103']};\n }\n`;\n\nexport const StyledContextMenuContentItemIconWrapper = styled.div`\n flex: 0 0 auto;\n margin: 0 8px 0 3px;\n width: 20px;\n`;\n\nexport const StyledContextMenuContentItemText = styled.div`\n flex: 0 0 auto;\n white-space: nowrap;\n`;\n"],"mappings":"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","ignoreList":[]}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import React from 'react';
|
|
1
|
+
import React, { useMemo } from 'react';
|
|
2
2
|
import { ContextMenuAlignment } from '../../../types/contextMenu';
|
|
3
3
|
import Icon from '../../icon/Icon';
|
|
4
4
|
import { StyledContextMenuContentItem, StyledContextMenuContentItemIconWrapper, StyledContextMenuContentItemText, StyledMotionContextMenuContent } from './ContextMenuContent.styles';
|
|
@@ -11,10 +11,28 @@ const ContextMenuContent = /*#__PURE__*/React.forwardRef((_ref, ref) => {
|
|
|
11
11
|
const isBottomLeftAlignment = alignment === ContextMenuAlignment.BottomLeft;
|
|
12
12
|
const isTopLeftAlignment = alignment === ContextMenuAlignment.TopLeft;
|
|
13
13
|
const isTopRightAlignment = alignment === ContextMenuAlignment.TopRight;
|
|
14
|
-
const
|
|
15
|
-
const
|
|
16
|
-
const
|
|
17
|
-
|
|
14
|
+
const isTopCenterAlignment = alignment === ContextMenuAlignment.TopCenter;
|
|
15
|
+
const isBottomCenterAlignment = alignment === ContextMenuAlignment.BottomCenter;
|
|
16
|
+
const percentageOffsetX = useMemo(() => {
|
|
17
|
+
if (isBottomLeftAlignment || isTopLeftAlignment) {
|
|
18
|
+
return -100;
|
|
19
|
+
}
|
|
20
|
+
if (isBottomCenterAlignment || isTopCenterAlignment) {
|
|
21
|
+
return -50;
|
|
22
|
+
}
|
|
23
|
+
return 0;
|
|
24
|
+
}, [isBottomCenterAlignment, isBottomLeftAlignment, isTopCenterAlignment, isTopLeftAlignment]);
|
|
25
|
+
const anchorOffsetX = useMemo(() => {
|
|
26
|
+
if (isBottomLeftAlignment || isTopLeftAlignment) {
|
|
27
|
+
return 15;
|
|
28
|
+
}
|
|
29
|
+
if (isBottomCenterAlignment || isTopCenterAlignment) {
|
|
30
|
+
return 0;
|
|
31
|
+
}
|
|
32
|
+
return -15;
|
|
33
|
+
}, [isBottomCenterAlignment, isBottomLeftAlignment, isTopCenterAlignment, isTopLeftAlignment]);
|
|
34
|
+
const percentageOffsetY = isTopRightAlignment || isTopLeftAlignment || isTopCenterAlignment ? -100 : 0;
|
|
35
|
+
const anchorOffsetY = isTopRightAlignment || isTopLeftAlignment || isTopCenterAlignment ? -21 : 21;
|
|
18
36
|
const exitAndInitialY = isTopLeftAlignment || isTopRightAlignment ? -16 : 16;
|
|
19
37
|
return /*#__PURE__*/React.createElement(StyledMotionContextMenuContent, {
|
|
20
38
|
animate: {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ContextMenuContent.js","names":["React","ContextMenuAlignment","Icon","StyledContextMenuContentItem","StyledContextMenuContentItemIconWrapper","StyledContextMenuContentItemText","StyledMotionContextMenuContent","ContextMenuContent","forwardRef","_ref","ref","alignment","coordinates","items","isBottomLeftAlignment","BottomLeft","isTopLeftAlignment","TopLeft","isTopRightAlignment","TopRight","
|
|
1
|
+
{"version":3,"file":"ContextMenuContent.js","names":["React","useMemo","ContextMenuAlignment","Icon","StyledContextMenuContentItem","StyledContextMenuContentItemIconWrapper","StyledContextMenuContentItemText","StyledMotionContextMenuContent","ContextMenuContent","forwardRef","_ref","ref","alignment","coordinates","items","isBottomLeftAlignment","BottomLeft","isTopLeftAlignment","TopLeft","isTopRightAlignment","TopRight","isTopCenterAlignment","TopCenter","isBottomCenterAlignment","BottomCenter","percentageOffsetX","anchorOffsetX","percentageOffsetY","anchorOffsetY","exitAndInitialY","createElement","animate","opacity","y","exit","initial","$position","style","left","x","top","transition","type","transformTemplate","_ref2","map","_ref3","icons","key","onClick","text","event","preventDefault","stopPropagation","displayName"],"sources":["../../../../../src/components/context-menu/context-menu-content/ContextMenuContent.tsx"],"sourcesContent":["import React, { useMemo } from 'react';\nimport { ContextMenuAlignment } from '../../../types/contextMenu';\nimport Icon from '../../icon/Icon';\nimport type { ContextMenuCoordinates, ContextMenuItem } from '../ContextMenu';\nimport {\n StyledContextMenuContentItem,\n StyledContextMenuContentItemIconWrapper,\n StyledContextMenuContentItemText,\n StyledMotionContextMenuContent,\n} from './ContextMenuContent.styles';\n\ntype ContextMenuContentProps = {\n alignment: ContextMenuAlignment;\n coordinates: ContextMenuCoordinates;\n items: ContextMenuItem[];\n};\n\nconst ContextMenuContent = React.forwardRef<HTMLDivElement, ContextMenuContentProps>(\n ({ alignment, coordinates, items }, ref) => {\n const isBottomLeftAlignment = alignment === ContextMenuAlignment.BottomLeft;\n const isTopLeftAlignment = alignment === ContextMenuAlignment.TopLeft;\n const isTopRightAlignment = alignment === ContextMenuAlignment.TopRight;\n const isTopCenterAlignment = alignment === ContextMenuAlignment.TopCenter;\n const isBottomCenterAlignment = alignment === ContextMenuAlignment.BottomCenter;\n\n const percentageOffsetX = useMemo(() => {\n if (isBottomLeftAlignment || isTopLeftAlignment) {\n return -100;\n }\n\n if (isBottomCenterAlignment || isTopCenterAlignment) {\n return -50;\n }\n\n return 0;\n }, [\n isBottomCenterAlignment,\n isBottomLeftAlignment,\n isTopCenterAlignment,\n isTopLeftAlignment,\n ]);\n\n const anchorOffsetX = useMemo(() => {\n if (isBottomLeftAlignment || isTopLeftAlignment) {\n return 15;\n }\n\n if (isBottomCenterAlignment || isTopCenterAlignment) {\n return 0;\n }\n\n return -15;\n }, [\n isBottomCenterAlignment,\n isBottomLeftAlignment,\n isTopCenterAlignment,\n isTopLeftAlignment,\n ]);\n\n const percentageOffsetY =\n isTopRightAlignment || isTopLeftAlignment || isTopCenterAlignment ? -100 : 0;\n\n const anchorOffsetY =\n isTopRightAlignment || isTopLeftAlignment || isTopCenterAlignment ? -21 : 21;\n\n const exitAndInitialY = isTopLeftAlignment || isTopRightAlignment ? -16 : 16;\n\n return (\n <StyledMotionContextMenuContent\n animate={{ opacity: 1, y: 0 }}\n exit={{ opacity: 0, y: exitAndInitialY }}\n initial={{ opacity: 0, y: exitAndInitialY }}\n $position={alignment}\n ref={ref}\n style={{ left: coordinates.x, top: coordinates.y }}\n transition={{ type: 'tween' }}\n transformTemplate={({ y = '0px' }) => `\n translateX(${percentageOffsetX}%)\n translateY(${percentageOffsetY}%)\n translateX(${anchorOffsetX}px)\n translateY(${anchorOffsetY}px)\n translateY(${y})\n `}\n >\n {items.map(({ icons, key, onClick, text }) => (\n <StyledContextMenuContentItem\n key={key}\n onClick={(event) => {\n event.preventDefault();\n event.stopPropagation();\n\n void onClick(event);\n }}\n >\n <StyledContextMenuContentItemIconWrapper>\n <Icon icons={icons} />\n </StyledContextMenuContentItemIconWrapper>\n <StyledContextMenuContentItemText>{text}</StyledContextMenuContentItemText>\n </StyledContextMenuContentItem>\n ))}\n </StyledMotionContextMenuContent>\n );\n },\n);\n\nContextMenuContent.displayName = 'ContextMenuContent';\n\nexport default ContextMenuContent;\n"],"mappings":"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","ignoreList":[]}
|
|
@@ -39,26 +39,38 @@ export const StyledMotionContextMenuContent = styled(motion.div)`
|
|
|
39
39
|
case ContextMenuAlignment.TopLeft:
|
|
40
40
|
return css`
|
|
41
41
|
bottom: -7px;
|
|
42
|
-
right:
|
|
42
|
+
right: 7px;
|
|
43
43
|
transform: rotate(45deg);
|
|
44
44
|
`;
|
|
45
45
|
case ContextMenuAlignment.BottomLeft:
|
|
46
46
|
return css`
|
|
47
47
|
top: -7px;
|
|
48
|
-
right:
|
|
48
|
+
right: 7px;
|
|
49
49
|
transform: rotate(225deg);
|
|
50
50
|
`;
|
|
51
51
|
case ContextMenuAlignment.TopRight:
|
|
52
52
|
return css`
|
|
53
53
|
transform: rotate(45deg);
|
|
54
54
|
bottom: -7px;
|
|
55
|
-
left:
|
|
55
|
+
left: 7px;
|
|
56
56
|
`;
|
|
57
57
|
case ContextMenuAlignment.BottomRight:
|
|
58
58
|
return css`
|
|
59
59
|
transform: rotate(225deg);
|
|
60
60
|
top: -7px;
|
|
61
|
-
left:
|
|
61
|
+
left: 7px;
|
|
62
|
+
`;
|
|
63
|
+
case ContextMenuAlignment.TopCenter:
|
|
64
|
+
return css`
|
|
65
|
+
bottom: -7px;
|
|
66
|
+
right: 45%;
|
|
67
|
+
transform: rotate(45deg);
|
|
68
|
+
`;
|
|
69
|
+
case ContextMenuAlignment.BottomCenter:
|
|
70
|
+
return css`
|
|
71
|
+
transform: rotate(225deg);
|
|
72
|
+
top: -7px;
|
|
73
|
+
left: 45%;
|
|
62
74
|
`;
|
|
63
75
|
default:
|
|
64
76
|
return undefined;
|
package/lib/esm/components/context-menu/context-menu-content/ContextMenuContent.styles.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ContextMenuContent.styles.js","names":["motion","styled","css","ContextMenuAlignment","StyledMotionContextMenuContent","div","_ref","theme","_ref2","text","_ref3","$position","TopLeft","BottomLeft","TopRight","BottomRight","undefined","StyledContextMenuContentItem","_ref4","StyledContextMenuContentItemIconWrapper","StyledContextMenuContentItemText"],"sources":["../../../../../src/components/context-menu/context-menu-content/ContextMenuContent.styles.ts"],"sourcesContent":["import { motion } from 'framer-motion';\nimport styled, { css } from 'styled-components';\nimport { ContextMenuAlignment } from '../../../types/contextMenu';\nimport type { WithTheme } from '../../color-scheme-provider/ColorSchemeProvider';\n\ntype StyledMotionContextMenuContentProps = WithTheme<{\n $position: ContextMenuAlignment;\n}>;\n\nexport const StyledMotionContextMenuContent = styled(\n motion.div,\n)<StyledMotionContextMenuContentProps>`\n background-color: ${({ theme }: StyledMotionContextMenuContentProps) => theme['001']};\n border: 1px solid rgba(0, 0, 0, 0.1);\n border-radius: 3px;\n box-shadow: 1px 3px 8px rgb(0 0 0 / 30%);\n color: ${({ theme }: StyledMotionContextMenuContentProps) => theme.text};\n position: absolute;\n z-index: 0;\n\n &::after {\n background-color: inherit;\n border-bottom: 1px solid rgba(0, 0, 0, 0.1);\n border-right: 1px solid rgba(0, 0, 0, 0.1);\n box-shadow: 2px 2px 8px rgb(4 3 4 / 10%);\n content: '';\n height: 14px;\n position: absolute;\n width: 14px;\n z-index: -2;\n\n ${({ $position }) => {\n switch ($position) {\n case ContextMenuAlignment.TopLeft:\n return css`\n bottom: -7px;\n right:
|
|
1
|
+
{"version":3,"file":"ContextMenuContent.styles.js","names":["motion","styled","css","ContextMenuAlignment","StyledMotionContextMenuContent","div","_ref","theme","_ref2","text","_ref3","$position","TopLeft","BottomLeft","TopRight","BottomRight","TopCenter","BottomCenter","undefined","StyledContextMenuContentItem","_ref4","StyledContextMenuContentItemIconWrapper","StyledContextMenuContentItemText"],"sources":["../../../../../src/components/context-menu/context-menu-content/ContextMenuContent.styles.ts"],"sourcesContent":["import { motion } from 'framer-motion';\nimport styled, { css } from 'styled-components';\nimport { ContextMenuAlignment } from '../../../types/contextMenu';\nimport type { WithTheme } from '../../color-scheme-provider/ColorSchemeProvider';\n\ntype StyledMotionContextMenuContentProps = WithTheme<{\n $position: ContextMenuAlignment;\n}>;\n\nexport const StyledMotionContextMenuContent = styled(\n motion.div,\n)<StyledMotionContextMenuContentProps>`\n background-color: ${({ theme }: StyledMotionContextMenuContentProps) => theme['001']};\n border: 1px solid rgba(0, 0, 0, 0.1);\n border-radius: 3px;\n box-shadow: 1px 3px 8px rgb(0 0 0 / 30%);\n color: ${({ theme }: StyledMotionContextMenuContentProps) => theme.text};\n position: absolute;\n z-index: 0;\n\n &::after {\n background-color: inherit;\n border-bottom: 1px solid rgba(0, 0, 0, 0.1);\n border-right: 1px solid rgba(0, 0, 0, 0.1);\n box-shadow: 2px 2px 8px rgb(4 3 4 / 10%);\n content: '';\n height: 14px;\n position: absolute;\n width: 14px;\n z-index: -2;\n\n ${({ $position }) => {\n switch ($position) {\n case ContextMenuAlignment.TopLeft:\n return css`\n bottom: -7px;\n right: 7px;\n transform: rotate(45deg);\n `;\n case ContextMenuAlignment.BottomLeft:\n return css`\n top: -7px;\n right: 7px;\n transform: rotate(225deg);\n `;\n case ContextMenuAlignment.TopRight:\n return css`\n transform: rotate(45deg);\n bottom: -7px;\n left: 7px;\n `;\n case ContextMenuAlignment.BottomRight:\n return css`\n transform: rotate(225deg);\n top: -7px;\n left: 7px;\n `;\n case ContextMenuAlignment.TopCenter:\n return css`\n bottom: -7px;\n right: 45%;\n transform: rotate(45deg);\n `;\n case ContextMenuAlignment.BottomCenter:\n return css`\n transform: rotate(225deg);\n top: -7px;\n left: 45%;\n `;\n\n default:\n return undefined;\n }\n }}\n }\n\n &::before {\n background-color: inherit;\n bottom: 0;\n content: '';\n left: 0;\n position: absolute;\n right: 0;\n top: 0;\n z-index: -1;\n }\n`;\n\ntype StyledContextMenuContentItemProps = WithTheme<unknown>;\n\nexport const StyledContextMenuContentItem = styled.div<StyledContextMenuContentItemProps>`\n cursor: pointer;\n display: flex;\n padding: 5px 8px 5px 5px;\n transition: background-color 0.3s ease;\n\n &:hover {\n background-color: ${({ theme }: StyledContextMenuContentItemProps) =>\n theme['secondary-103']};\n }\n`;\n\nexport const StyledContextMenuContentItemIconWrapper = styled.div`\n flex: 0 0 auto;\n margin: 0 8px 0 3px;\n width: 20px;\n`;\n\nexport const StyledContextMenuContentItemText = styled.div`\n flex: 0 0 auto;\n white-space: nowrap;\n`;\n"],"mappings":"AAAA,SAASA,MAAM,QAAQ,eAAe;AACtC,OAAOC,MAAM,IAAIC,GAAG,QAAQ,mBAAmB;AAC/C,SAASC,oBAAoB,QAAQ,4BAA4B;AAOjE,OAAO,MAAMC,8BAA8B,GAAGH,MAAM,CAChDD,MAAM,CAACK,GACX,CAAsC;AACtC,wBAAwBC,IAAA;EAAA,IAAC;IAAEC;EAA2C,CAAC,GAAAD,IAAA;EAAA,OAAKC,KAAK,CAAC,KAAK,CAAC;AAAA;AACxF;AACA;AACA;AACA,aAAaC,KAAA;EAAA,IAAC;IAAED;EAA2C,CAAC,GAAAC,KAAA;EAAA,OAAKD,KAAK,CAACE,IAAI;AAAA;AAC3E;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,UAAUC,KAAA,IAAmB;EAAA,IAAlB;IAAEC;EAAU,CAAC,GAAAD,KAAA;EACZ,QAAQC,SAAS;IACb,KAAKR,oBAAoB,CAACS,OAAO;MAC7B,OAAOV,GAAG;AAC9B;AACA;AACA;AACA,qBAAqB;IACL,KAAKC,oBAAoB,CAACU,UAAU;MAChC,OAAOX,GAAG;AAC9B;AACA;AACA;AACA,qBAAqB;IACL,KAAKC,oBAAoB,CAACW,QAAQ;MAC9B,OAAOZ,GAAG;AAC9B;AACA;AACA;AACA,qBAAqB;IACL,KAAKC,oBAAoB,CAACY,WAAW;MACjC,OAAOb,GAAG;AAC9B;AACA;AACA;AACA,qBAAqB;IACL,KAAKC,oBAAoB,CAACa,SAAS;MAC/B,OAAOd,GAAG;AAC9B;AACA;AACA;AACA,qBAAqB;IACL,KAAKC,oBAAoB,CAACc,YAAY;MAClC,OAAOf,GAAG;AAC9B;AACA;AACA;AACA,qBAAqB;IAEL;MACI,OAAOgB,SAAS;EACxB;AACJ,CAAC;AACT;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,CAAC;AAID,OAAO,MAAMC,4BAA4B,GAAGlB,MAAM,CAACI,GAAsC;AACzF;AACA;AACA;AACA;AACA;AACA;AACA,4BAA4Be,KAAA;EAAA,IAAC;IAAEb;EAAyC,CAAC,GAAAa,KAAA;EAAA,OAC7Db,KAAK,CAAC,eAAe,CAAC;AAAA;AAClC;AACA,CAAC;AAED,OAAO,MAAMc,uCAAuC,GAAGpB,MAAM,CAACI,GAAG;AACjE;AACA;AACA;AACA,CAAC;AAED,OAAO,MAAMiB,gCAAgC,GAAGrB,MAAM,CAACI,GAAG;AAC1D;AACA;AACA,CAAC","ignoreList":[]}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@chayns-components/core",
|
|
3
|
-
"version": "5.0.0-beta.
|
|
3
|
+
"version": "5.0.0-beta.632",
|
|
4
4
|
"description": "A set of beautiful React components for developing your own applications with chayns.",
|
|
5
5
|
"sideEffects": false,
|
|
6
6
|
"browserslist": [
|
|
@@ -85,5 +85,5 @@
|
|
|
85
85
|
"publishConfig": {
|
|
86
86
|
"access": "public"
|
|
87
87
|
},
|
|
88
|
-
"gitHead": "
|
|
88
|
+
"gitHead": "3fc87356bc5ce498d5e8d6a463bb7314476c70b4"
|
|
89
89
|
}
|