@chayns-components/core 5.0.0-beta.413 → 5.0.0-beta.415
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/api/signature/delete.js +2 -2
- package/lib/api/signature/delete.js.map +1 -1
- package/lib/api/signature/get.js +2 -2
- package/lib/api/signature/get.js.map +1 -1
- package/lib/api/signature/put.js +2 -2
- package/lib/api/signature/put.js.map +1 -1
- package/lib/components/accordion/accordion-head/AccordionHead.js +3 -3
- package/lib/components/accordion/accordion-head/AccordionHead.js.map +1 -1
- package/lib/components/amount-control/AmountControl.js +4 -4
- package/lib/components/amount-control/AmountControl.js.map +1 -1
- package/lib/components/amount-control/AmountControl.styles.js.map +1 -1
- package/lib/components/color-scheme-provider/ColorSchemeProvider.js +1 -1
- package/lib/components/color-scheme-provider/ColorSchemeProvider.js.map +1 -1
- package/lib/components/combobox/ComboBox.js.map +1 -1
- package/lib/components/context-menu/ContextMenu.d.ts +1 -1
- package/lib/components/context-menu/ContextMenu.js +7 -7
- package/lib/components/context-menu/ContextMenu.js.map +1 -1
- package/lib/components/context-menu/context-menu-content/ContextMenuContent.d.ts +1 -1
- package/lib/components/context-menu/context-menu-content/ContextMenuContent.js +5 -5
- package/lib/components/context-menu/context-menu-content/ContextMenuContent.js.map +1 -1
- package/lib/components/context-menu/context-menu-content/ContextMenuContent.styles.d.ts +1 -1
- package/lib/components/context-menu/context-menu-content/ContextMenuContent.styles.js +5 -5
- package/lib/components/context-menu/context-menu-content/ContextMenuContent.styles.js.map +1 -1
- package/lib/components/date-info/DateInfo.js +7 -8
- package/lib/components/date-info/DateInfo.js.map +1 -1
- package/lib/components/file-input/FileInput.js.map +1 -1
- package/lib/components/filter-buttons/FilterButtons.d.ts +1 -1
- package/lib/components/filter-buttons/FilterButtons.js +4 -4
- package/lib/components/filter-buttons/FilterButtons.js.map +1 -1
- package/lib/components/filter-buttons/filter-button/FilterButton.d.ts +1 -1
- package/lib/components/filter-buttons/filter-button/FilterButton.js +3 -3
- package/lib/components/filter-buttons/filter-button/FilterButton.js.map +1 -1
- package/lib/components/filter-buttons/filter-button/FilterButton.styles.d.ts +1 -1
- package/lib/components/filter-buttons/filter-button/FilterButton.styles.js +4 -4
- package/lib/components/filter-buttons/filter-button/FilterButton.styles.js.map +1 -1
- package/lib/components/icon/Icon.js +3 -3
- package/lib/components/icon/Icon.js.map +1 -1
- package/lib/components/input/Input.d.ts +4 -0
- package/lib/components/input/Input.js +3 -1
- package/lib/components/input/Input.js.map +1 -1
- package/lib/components/input/Input.styles.js +1 -0
- package/lib/components/input/Input.styles.js.map +1 -1
- package/lib/components/list/list-item/list-item-head/ListItemHead.js.map +1 -1
- package/lib/components/mention-finder/MentionFinder.d.ts +1 -1
- package/lib/components/mention-finder/MentionFinder.js.map +1 -1
- package/lib/components/mention-finder/MentionFinder.styles.js +3 -3
- package/lib/components/mention-finder/MentionFinder.styles.js.map +1 -1
- package/lib/components/number-input/NumberInput.js +8 -8
- package/lib/components/number-input/NumberInput.js.map +1 -1
- package/lib/components/popup/Popup.d.ts +1 -1
- package/lib/components/popup/Popup.js +6 -6
- package/lib/components/popup/Popup.js.map +1 -1
- package/lib/components/popup/popup-content/PopupContent.d.ts +1 -1
- package/lib/components/popup/popup-content/PopupContent.js +4 -4
- package/lib/components/popup/popup-content/PopupContent.js.map +1 -1
- package/lib/components/popup/popup-content/PopupContent.styles.d.ts +1 -1
- package/lib/components/popup/popup-content/PopupContent.styles.js +5 -5
- package/lib/components/popup/popup-content/PopupContent.styles.js.map +1 -1
- package/lib/components/position-input/PositionInput.d.ts +42 -0
- package/lib/components/position-input/PositionInput.js +41 -0
- package/lib/components/position-input/PositionInput.js.map +1 -0
- package/lib/components/position-input/PositionInput.styles.d.ts +3 -0
- package/lib/components/position-input/PositionInput.styles.js +19 -0
- package/lib/components/position-input/PositionInput.styles.js.map +1 -0
- package/lib/components/position-input/map-wrapper/MapWrapper.d.ts +14 -0
- package/lib/components/position-input/map-wrapper/MapWrapper.js +179 -0
- package/lib/components/position-input/map-wrapper/MapWrapper.js.map +1 -0
- package/lib/components/position-input/map-wrapper/MapWrapper.styles.d.ts +2 -0
- package/lib/components/position-input/map-wrapper/MapWrapper.styles.js +12 -0
- package/lib/components/position-input/map-wrapper/MapWrapper.styles.js.map +1 -0
- package/lib/components/position-input/map-wrapper/map/Map.d.ts +16 -0
- package/lib/components/position-input/map-wrapper/map/Map.js +97 -0
- package/lib/components/position-input/map-wrapper/map/Map.js.map +1 -0
- package/lib/components/position-input/map-wrapper/map/Map.styles.d.ts +2 -0
- package/lib/components/position-input/map-wrapper/map/Map.styles.js +13 -0
- package/lib/components/position-input/map-wrapper/map/Map.styles.js.map +1 -0
- package/lib/components/position-input/map-wrapper/map/marker/Marker.d.ts +13 -0
- package/lib/components/position-input/map-wrapper/map/marker/Marker.js +66 -0
- package/lib/components/position-input/map-wrapper/map/marker/Marker.js.map +1 -0
- package/lib/components/radio-button/RadioButton.d.ts +1 -1
- package/lib/components/radio-button/RadioButton.js.map +1 -1
- package/lib/components/search-box/SearchBox.d.ts +1 -1
- package/lib/components/search-box/SearchBox.js +3 -3
- package/lib/components/search-box/SearchBox.js.map +1 -1
- package/lib/components/search-box/search-box-item/SearchBoxItem.d.ts +1 -1
- package/lib/components/search-box/search-box-item/SearchBoxItem.js.map +1 -1
- package/lib/components/select-button/SelectButton.d.ts +1 -1
- package/lib/components/select-button/SelectButton.js.map +1 -1
- package/lib/components/sharing-bar/SharingBar.d.ts +1 -1
- package/lib/components/sharing-bar/SharingBar.js.map +1 -1
- package/lib/components/signature/Signature.js.map +1 -1
- package/lib/components/tooltip/Tooltip.d.ts +1 -1
- package/lib/components/tooltip/Tooltip.js +1 -1
- package/lib/components/tooltip/Tooltip.js.map +1 -1
- package/lib/{components/date-info/constants/language.js → constants/dateInfo.js} +1 -1
- package/lib/constants/dateInfo.js.map +1 -0
- package/lib/{components/mention-finder/constants/alignment.js → constants/mentionFinder.js} +1 -1
- package/lib/constants/mentionFinder.js.map +1 -0
- package/lib/{components/number-input/constants/number.js → constants/numberInput.js} +1 -1
- package/lib/constants/numberInput.js.map +1 -0
- package/lib/constants/positionInput.d.ts +3 -0
- package/lib/constants/positionInput.js +24 -0
- package/lib/constants/positionInput.js.map +1 -0
- package/lib/constants/{serverUrls.js → signature.js} +1 -1
- package/lib/constants/signature.js.map +1 -0
- package/lib/hooks/positionInput.d.ts +2 -0
- package/lib/hooks/positionInput.js +37 -0
- package/lib/hooks/positionInput.js.map +1 -0
- package/lib/index.d.ts +7 -5
- package/lib/index.js +9 -2
- package/lib/index.js.map +1 -1
- package/lib/{components/context-menu/constants/alignment.js → types/contextMenu.js} +1 -1
- package/lib/types/contextMenu.js.map +1 -0
- package/lib/{components/filter-buttons/types.js → types/filterButtons.js} +1 -1
- package/lib/types/filterButtons.js.map +1 -0
- package/lib/{components/popup/types.js → types/popup.js} +1 -1
- package/lib/types/popup.js.map +1 -0
- package/lib/types/positionInput.d.ts +21 -0
- package/lib/types/positionInput.js +2 -0
- package/lib/types/positionInput.js.map +1 -0
- package/lib/types/radioButton.js +2 -0
- package/lib/types/radioButton.js.map +1 -0
- package/lib/types/searchBox.js +2 -0
- package/lib/types/searchBox.js.map +1 -0
- package/lib/types/selectButton.js +2 -0
- package/lib/types/selectButton.js.map +1 -0
- package/lib/types/tooltip.js +2 -0
- package/lib/types/tooltip.js.map +1 -0
- package/lib/{components/accordion/utils.js → utils/accordion.js} +1 -1
- package/lib/utils/accordion.js.map +1 -0
- package/lib/{components/amount-control/utils.js → utils/amountControl.js} +1 -1
- package/lib/utils/amountControl.js.map +1 -0
- package/lib/{components/date-info/utils/format.d.ts → utils/dateInfo.d.ts} +7 -1
- package/lib/{components/date-info/utils/format.js → utils/dateInfo.js} +65 -16
- package/lib/utils/dateInfo.js.map +1 -0
- package/lib/utils/font.js.map +1 -0
- package/lib/{components/icon/utils.js → utils/icon.js} +1 -1
- package/lib/utils/icon.js.map +1 -0
- package/lib/{components/number-input/utils/number.js → utils/numberInput.js} +6 -6
- package/lib/utils/numberInput.js.map +1 -0
- package/lib/{components/search-box/utils.d.ts → utils/searchBox.d.ts} +1 -1
- package/lib/{components/search-box/utils.js → utils/searchBox.js} +1 -1
- package/lib/{components/search-box/utils.js.map → utils/searchBox.js.map} +1 -1
- package/package.json +7 -2
- package/lib/components/accordion/utils.js.map +0 -1
- package/lib/components/amount-control/utils.js.map +0 -1
- package/lib/components/color-scheme-provider/font.js.map +0 -1
- package/lib/components/context-menu/constants/alignment.js.map +0 -1
- package/lib/components/date-info/constants/language.js.map +0 -1
- package/lib/components/date-info/utils/format.js.map +0 -1
- package/lib/components/date-info/utils/language.d.ts +0 -7
- package/lib/components/date-info/utils/language.js +0 -57
- package/lib/components/date-info/utils/language.js.map +0 -1
- package/lib/components/filter-buttons/types.js.map +0 -1
- package/lib/components/icon/utils.js.map +0 -1
- package/lib/components/mention-finder/constants/alignment.js.map +0 -1
- package/lib/components/number-input/constants/number.js.map +0 -1
- package/lib/components/number-input/utils/number.js.map +0 -1
- package/lib/components/popup/types.js.map +0 -1
- package/lib/components/radio-button/types.js +0 -2
- package/lib/components/radio-button/types.js.map +0 -1
- package/lib/components/search-box/types.js +0 -2
- package/lib/components/search-box/types.js.map +0 -1
- package/lib/components/select-button/types.js +0 -2
- package/lib/components/select-button/types.js.map +0 -1
- package/lib/components/tooltip/interface.js +0 -2
- package/lib/components/tooltip/interface.js.map +0 -1
- package/lib/constants/serverUrls.js.map +0 -1
- /package/lib/{components/date-info/constants/language.d.ts → constants/dateInfo.d.ts} +0 -0
- /package/lib/{components/mention-finder/constants/alignment.d.ts → constants/mentionFinder.d.ts} +0 -0
- /package/lib/{components/number-input/constants/number.d.ts → constants/numberInput.d.ts} +0 -0
- /package/lib/constants/{serverUrls.d.ts → signature.d.ts} +0 -0
- /package/lib/{components/context-menu/constants/alignment.d.ts → types/contextMenu.d.ts} +0 -0
- /package/lib/{components/filter-buttons/types.d.ts → types/filterButtons.d.ts} +0 -0
- /package/lib/{components/popup/types.d.ts → types/popup.d.ts} +0 -0
- /package/lib/{components/radio-button/types.d.ts → types/radioButton.d.ts} +0 -0
- /package/lib/{components/search-box/types.d.ts → types/searchBox.d.ts} +0 -0
- /package/lib/{components/select-button/types.d.ts → types/selectButton.d.ts} +0 -0
- /package/lib/{components/tooltip/interface.d.ts → types/tooltip.d.ts} +0 -0
- /package/lib/{components/accordion/utils.d.ts → utils/accordion.d.ts} +0 -0
- /package/lib/{components/amount-control/utils.d.ts → utils/amountControl.d.ts} +0 -0
- /package/lib/{components/color-scheme-provider → utils}/font.d.ts +0 -0
- /package/lib/{components/color-scheme-provider → utils}/font.js +0 -0
- /package/lib/{components/icon/utils.d.ts → utils/icon.d.ts} +0 -0
- /package/lib/{components/number-input/utils/number.d.ts → utils/numberInput.d.ts} +0 -0
|
@@ -4,13 +4,13 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
4
4
|
value: true
|
|
5
5
|
});
|
|
6
6
|
exports.deleteUserSignature = void 0;
|
|
7
|
-
var
|
|
7
|
+
var _signature = require("../../constants/signature");
|
|
8
8
|
const deleteUserSignature = async () => {
|
|
9
9
|
if (!chayns.env.user.isAuthenticated) {
|
|
10
10
|
return false;
|
|
11
11
|
}
|
|
12
12
|
try {
|
|
13
|
-
const response = await fetch(
|
|
13
|
+
const response = await fetch(_signature.SIGNATURE_SERVER_URL, {
|
|
14
14
|
method: 'DELETE',
|
|
15
15
|
headers: {
|
|
16
16
|
accept: 'application/json',
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"delete.js","names":["
|
|
1
|
+
{"version":3,"file":"delete.js","names":["_signature","require","deleteUserSignature","chayns","env","user","isAuthenticated","response","fetch","SIGNATURE_SERVER_URL","method","headers","accept","authorization","tobitAccessToken","ok","status","console","error","ex","exports"],"sources":["../../../src/api/signature/delete.ts"],"sourcesContent":["import { SIGNATURE_SERVER_URL } from '../../constants/signature';\n\nexport const deleteUserSignature = async () => {\n if (!chayns.env.user.isAuthenticated) {\n return false;\n }\n\n try {\n const response = await fetch(SIGNATURE_SERVER_URL, {\n method: 'DELETE',\n headers: {\n accept: 'application/json',\n authorization: `bearer ${chayns.env.user.tobitAccessToken}`,\n },\n });\n\n if (response.ok || response.status === 304) {\n return true;\n }\n\n console.error(\n '[chayns components] Signature: failed to delete user signature',\n response.status,\n );\n } catch (ex) {\n console.error('[chayns components] Signature: failed to delete user signature', ex);\n }\n\n return false;\n};\n"],"mappings":";;;;;;AAAA,IAAAA,UAAA,GAAAC,OAAA;AAEO,MAAMC,mBAAmB,GAAG,MAAAA,CAAA,KAAY;EAC3C,IAAI,CAACC,MAAM,CAACC,GAAG,CAACC,IAAI,CAACC,eAAe,EAAE;IAClC,OAAO,KAAK;EAChB;EAEA,IAAI;IACA,MAAMC,QAAQ,GAAG,MAAMC,KAAK,CAACC,+BAAoB,EAAE;MAC/CC,MAAM,EAAE,QAAQ;MAChBC,OAAO,EAAE;QACLC,MAAM,EAAE,kBAAkB;QAC1BC,aAAa,EAAG,UAASV,MAAM,CAACC,GAAG,CAACC,IAAI,CAACS,gBAAiB;MAC9D;IACJ,CAAC,CAAC;IAEF,IAAIP,QAAQ,CAACQ,EAAE,IAAIR,QAAQ,CAACS,MAAM,KAAK,GAAG,EAAE;MACxC,OAAO,IAAI;IACf;IAEAC,OAAO,CAACC,KAAK,CACT,gEAAgE,EAChEX,QAAQ,CAACS,MACb,CAAC;EACL,CAAC,CAAC,OAAOG,EAAE,EAAE;IACTF,OAAO,CAACC,KAAK,CAAC,gEAAgE,EAAEC,EAAE,CAAC;EACvF;EAEA,OAAO,KAAK;AAChB,CAAC;AAACC,OAAA,CAAAlB,mBAAA,GAAAA,mBAAA"}
|
package/lib/api/signature/get.js
CHANGED
|
@@ -5,7 +5,7 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
5
5
|
});
|
|
6
6
|
exports.getUserSignature = void 0;
|
|
7
7
|
var _chaynsApi = require("chayns-api");
|
|
8
|
-
var
|
|
8
|
+
var _signature = require("../../constants/signature");
|
|
9
9
|
const getUserSignature = async () => {
|
|
10
10
|
const {
|
|
11
11
|
accessToken
|
|
@@ -14,7 +14,7 @@ const getUserSignature = async () => {
|
|
|
14
14
|
return undefined;
|
|
15
15
|
}
|
|
16
16
|
try {
|
|
17
|
-
const response = await fetch(
|
|
17
|
+
const response = await fetch(_signature.SIGNATURE_SERVER_URL, {
|
|
18
18
|
method: 'GET',
|
|
19
19
|
headers: {
|
|
20
20
|
accept: 'application/json',
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"get.js","names":["_chaynsApi","require","
|
|
1
|
+
{"version":3,"file":"get.js","names":["_chaynsApi","require","_signature","getUserSignature","accessToken","getAccessToken","undefined","response","fetch","SIGNATURE_SERVER_URL","method","headers","accept","authorization","status","value","json","console","error","ex","exports"],"sources":["../../../src/api/signature/get.ts"],"sourcesContent":["import { getAccessToken } from 'chayns-api';\nimport type { GetUserSignatureResult } from '../../types/signature';\nimport { SIGNATURE_SERVER_URL } from '../../constants/signature';\n\nexport const getUserSignature = async (): Promise<string | undefined> => {\n const { accessToken } = await getAccessToken();\n\n if (!accessToken) {\n return undefined;\n }\n\n try {\n const response = await fetch(SIGNATURE_SERVER_URL, {\n method: 'GET',\n headers: {\n accept: 'application/json',\n authorization: `bearer ${accessToken}`,\n },\n });\n\n if (response.status === 200) {\n const { value } = (await response.json()) as GetUserSignatureResult;\n\n return value;\n }\n\n if (response.status === 204) {\n return undefined;\n }\n\n console.error(\n '[chayns components] Signature: failed to get user signature',\n response.status,\n );\n } catch (ex) {\n console.error('[chayns components] Signature: failed to get user signature', ex);\n }\n\n return undefined;\n};\n"],"mappings":";;;;;;AAAA,IAAAA,UAAA,GAAAC,OAAA;AAEA,IAAAC,UAAA,GAAAD,OAAA;AAEO,MAAME,gBAAgB,GAAG,MAAAA,CAAA,KAAyC;EACrE,MAAM;IAAEC;EAAY,CAAC,GAAG,MAAM,IAAAC,yBAAc,EAAC,CAAC;EAE9C,IAAI,CAACD,WAAW,EAAE;IACd,OAAOE,SAAS;EACpB;EAEA,IAAI;IACA,MAAMC,QAAQ,GAAG,MAAMC,KAAK,CAACC,+BAAoB,EAAE;MAC/CC,MAAM,EAAE,KAAK;MACbC,OAAO,EAAE;QACLC,MAAM,EAAE,kBAAkB;QAC1BC,aAAa,EAAG,UAAST,WAAY;MACzC;IACJ,CAAC,CAAC;IAEF,IAAIG,QAAQ,CAACO,MAAM,KAAK,GAAG,EAAE;MACzB,MAAM;QAAEC;MAAM,CAAC,GAAI,MAAMR,QAAQ,CAACS,IAAI,CAAC,CAA4B;MAEnE,OAAOD,KAAK;IAChB;IAEA,IAAIR,QAAQ,CAACO,MAAM,KAAK,GAAG,EAAE;MACzB,OAAOR,SAAS;IACpB;IAEAW,OAAO,CAACC,KAAK,CACT,6DAA6D,EAC7DX,QAAQ,CAACO,MACb,CAAC;EACL,CAAC,CAAC,OAAOK,EAAE,EAAE;IACTF,OAAO,CAACC,KAAK,CAAC,6DAA6D,EAAEC,EAAE,CAAC;EACpF;EAEA,OAAOb,SAAS;AACpB,CAAC;AAACc,OAAA,CAAAjB,gBAAA,GAAAA,gBAAA"}
|
package/lib/api/signature/put.js
CHANGED
|
@@ -4,13 +4,13 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
4
4
|
value: true
|
|
5
5
|
});
|
|
6
6
|
exports.putUserSignature = void 0;
|
|
7
|
-
var
|
|
7
|
+
var _signature = require("../../constants/signature");
|
|
8
8
|
const putUserSignature = async dataURL => {
|
|
9
9
|
if (!chayns.env.user.isAuthenticated) {
|
|
10
10
|
return false;
|
|
11
11
|
}
|
|
12
12
|
try {
|
|
13
|
-
const response = await fetch(
|
|
13
|
+
const response = await fetch(_signature.SIGNATURE_SERVER_URL, {
|
|
14
14
|
method: 'PUT',
|
|
15
15
|
headers: {
|
|
16
16
|
accept: 'application/json',
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"put.js","names":["
|
|
1
|
+
{"version":3,"file":"put.js","names":["_signature","require","putUserSignature","dataURL","chayns","env","user","isAuthenticated","response","fetch","SIGNATURE_SERVER_URL","method","headers","accept","authorization","tobitAccessToken","body","JSON","stringify","value","ok","console","error","status","ex","exports"],"sources":["../../../src/api/signature/put.ts"],"sourcesContent":["import { SIGNATURE_SERVER_URL } from '../../constants/signature';\n\nexport const putUserSignature = async (dataURL: string) => {\n if (!chayns.env.user.isAuthenticated) {\n return false;\n }\n\n try {\n const response = await fetch(SIGNATURE_SERVER_URL, {\n method: 'PUT',\n headers: {\n accept: 'application/json',\n authorization: `bearer ${chayns.env.user.tobitAccessToken}`,\n 'content-type': 'application/json',\n },\n body: JSON.stringify({ value: dataURL }),\n });\n\n if (response.ok) {\n return true;\n }\n\n console.error(\n '[chayns components] Signature: failed to put user signature',\n response.status,\n );\n } catch (ex) {\n console.error('[chayns components] Signature: failed to put user signature', ex);\n }\n\n return false;\n};\n"],"mappings":";;;;;;AAAA,IAAAA,UAAA,GAAAC,OAAA;AAEO,MAAMC,gBAAgB,GAAG,MAAOC,OAAe,IAAK;EACvD,IAAI,CAACC,MAAM,CAACC,GAAG,CAACC,IAAI,CAACC,eAAe,EAAE;IAClC,OAAO,KAAK;EAChB;EAEA,IAAI;IACA,MAAMC,QAAQ,GAAG,MAAMC,KAAK,CAACC,+BAAoB,EAAE;MAC/CC,MAAM,EAAE,KAAK;MACbC,OAAO,EAAE;QACLC,MAAM,EAAE,kBAAkB;QAC1BC,aAAa,EAAG,UAASV,MAAM,CAACC,GAAG,CAACC,IAAI,CAACS,gBAAiB,EAAC;QAC3D,cAAc,EAAE;MACpB,CAAC;MACDC,IAAI,EAAEC,IAAI,CAACC,SAAS,CAAC;QAAEC,KAAK,EAAEhB;MAAQ,CAAC;IAC3C,CAAC,CAAC;IAEF,IAAIK,QAAQ,CAACY,EAAE,EAAE;MACb,OAAO,IAAI;IACf;IAEAC,OAAO,CAACC,KAAK,CACT,6DAA6D,EAC7Dd,QAAQ,CAACe,MACb,CAAC;EACL,CAAC,CAAC,OAAOC,EAAE,EAAE;IACTH,OAAO,CAACC,KAAK,CAAC,6DAA6D,EAAEE,EAAE,CAAC;EACpF;EAEA,OAAO,KAAK;AAChB,CAAC;AAACC,OAAA,CAAAvB,gBAAA,GAAAA,gBAAA"}
|
|
@@ -6,9 +6,9 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
6
6
|
exports.default = void 0;
|
|
7
7
|
var _framerMotion = require("framer-motion");
|
|
8
8
|
var _react = _interopRequireWildcard(require("react"));
|
|
9
|
-
var _Icon = _interopRequireDefault(require("../../icon/Icon"));
|
|
10
|
-
var _utils = require("../utils");
|
|
11
9
|
var _AccordionHead = require("./AccordionHead.styles");
|
|
10
|
+
var _accordion = require("../../../utils/accordion");
|
|
11
|
+
var _Icon = _interopRequireDefault(require("../../icon/Icon"));
|
|
12
12
|
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
13
13
|
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); }
|
|
14
14
|
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 && Object.prototype.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; }
|
|
@@ -35,7 +35,7 @@ const AccordionHead = _ref => {
|
|
|
35
35
|
const titleWrapperRef = (0, _react.useRef)(null);
|
|
36
36
|
const hasSearchIcon = Array.isArray(searchIcon);
|
|
37
37
|
(0, _react.useEffect)(() => {
|
|
38
|
-
setHeadHeight((0,
|
|
38
|
+
setHeadHeight((0, _accordion.getAccordionHeadHeight)({
|
|
39
39
|
isWrapped,
|
|
40
40
|
title,
|
|
41
41
|
width: (titleWrapperRef.current?.clientWidth ?? 0) - 10
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"AccordionHead.js","names":["_framerMotion","require","_react","_interopRequireWildcard","_Icon","_interopRequireDefault","_utils","_AccordionHead","obj","__esModule","default","_getRequireWildcardCache","e","WeakMap","r","t","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","prototype","hasOwnProperty","call","i","set","AccordionHead","_ref","icon","isOpen","isFixed","isTitleGreyed","isWrapped","onClick","onSearchChange","rightElement","searchIcon","searchPlaceholder","shouldRotateIcon","title","titleElement","headHeight","setHeadHeight","useState","closed","open","titleWrapperRef","useRef","hasSearchIcon","Array","isArray","useEffect","getAccordionHeadHeight","width","current","clientWidth","createElement","StyledMotionAccordionHead","animate","height","className","initial","StyledMotionIconWrapper","rotate","undefined","icons","StyledMotionContentWrapper","opacity","ref","LayoutGroup","StyledMotionTitleWrapper","AnimatePresence","StyledMotionTitle","scale","key","StyledMotionTitleElementWrapper","layout","StyledRightWrapper","Fragment","StyledMotionRightInput","autoComplete","exit","hasIcon","onChange","placeholder","type","StyledMotionRightInputIconWrapper","StyledMotionRightElementWrapper","displayName","_default","exports"],"sources":["../../../../src/components/accordion/accordion-head/AccordionHead.tsx"],"sourcesContent":["import { AnimatePresence, LayoutGroup } from 'framer-motion';\nimport React, {\n ChangeEventHandler,\n FC,\n MouseEventHandler,\n ReactNode,\n useEffect,\n useRef,\n useState,\n} from 'react';\nimport Icon from '../../icon/Icon';\nimport { getAccordionHeadHeight } from '../utils';\nimport {\n StyledMotionAccordionHead,\n StyledMotionContentWrapper,\n StyledMotionIconWrapper,\n StyledMotionRightElementWrapper,\n StyledMotionRightInput,\n StyledMotionRightInputIconWrapper,\n StyledMotionTitle,\n StyledMotionTitleElementWrapper,\n StyledMotionTitleWrapper,\n StyledRightWrapper,\n} from './AccordionHead.styles';\n\ntype AccordionHeadProps = {\n icon?: string;\n isOpen: boolean;\n isFixed: boolean;\n isTitleGreyed: boolean;\n isWrapped: boolean;\n onClick: MouseEventHandler<HTMLDivElement>;\n onSearchChange?: ChangeEventHandler<HTMLInputElement>;\n rightElement?: ReactNode;\n searchIcon?: string[];\n searchPlaceholder?: string;\n shouldRotateIcon?: boolean;\n title: string;\n titleElement?: ReactNode;\n};\n\ninterface HeadHeight {\n closed: number;\n open: number;\n}\n\nconst AccordionHead: FC<AccordionHeadProps> = ({\n icon,\n isOpen,\n isFixed,\n isTitleGreyed,\n isWrapped,\n onClick,\n onSearchChange,\n rightElement,\n searchIcon,\n searchPlaceholder,\n shouldRotateIcon,\n title,\n titleElement,\n}) => {\n const [headHeight, setHeadHeight] = useState<HeadHeight>({\n closed: isWrapped ? 40 : 33,\n open: isWrapped ? 40 : 33,\n });\n\n const titleWrapperRef = useRef<HTMLDivElement>(null);\n\n const hasSearchIcon = Array.isArray(searchIcon);\n\n useEffect(() => {\n setHeadHeight(\n getAccordionHeadHeight({\n isWrapped,\n title,\n width: (titleWrapperRef.current?.clientWidth ?? 0) - 10,\n })\n );\n }, [isWrapped, title]);\n\n return (\n <StyledMotionAccordionHead\n animate={{ height: isOpen ? headHeight.open : headHeight.closed }}\n className=\"beta-chayns-accordion-head\"\n initial={false}\n >\n <StyledMotionIconWrapper\n animate={{ rotate: (isOpen || isFixed) && shouldRotateIcon ? 90 : 0 }}\n initial={false}\n onClick={!isFixed ? onClick : undefined}\n >\n <Icon icons={[isFixed ? 'fa fa-horizontal-rule' : icon ?? 'fa fa-chevron-right']} />\n </StyledMotionIconWrapper>\n <StyledMotionContentWrapper\n animate={{ opacity: isTitleGreyed ? 0.5 : 1 }}\n initial={false}\n onClick={!isFixed ? onClick : undefined}\n ref={titleWrapperRef}\n >\n <LayoutGroup>\n <StyledMotionTitleWrapper>\n <AnimatePresence initial={false}>\n <StyledMotionTitle\n animate={{ scale: 1 }}\n initial={{ scale: isOpen && !isWrapped ? 1 / 1.3 : 1.3 }}\n isOpen={isOpen}\n isWrapped={isWrapped}\n key={\n isOpen && !isWrapped\n ? 'accordionHeadTitleBig'\n : 'accordionHeadTitle'\n }\n >\n {title}\n </StyledMotionTitle>\n </AnimatePresence>\n </StyledMotionTitleWrapper>\n {titleElement && (\n <StyledMotionTitleElementWrapper layout>\n {titleElement}\n </StyledMotionTitleElementWrapper>\n )}\n </LayoutGroup>\n </StyledMotionContentWrapper>\n {(typeof onSearchChange === 'function' || rightElement) && (\n <StyledRightWrapper>\n <AnimatePresence initial={false}>\n {typeof onSearchChange === 'function' && isOpen ? (\n <>\n <StyledMotionRightInput\n animate={{ opacity: 1, width: '165px' }}\n autoComplete=\"off\"\n exit={{ opacity: 0, width: 0 }}\n hasIcon={hasSearchIcon}\n initial={{ opacity: 0, width: 0 }}\n key=\"rightInput\"\n onChange={onSearchChange}\n placeholder={searchPlaceholder}\n type=\"text\"\n />\n {hasSearchIcon && (\n <StyledMotionRightInputIconWrapper\n animate={{ opacity: 1 }}\n exit={{ opacity: 0 }}\n initial={{ opacity: 0 }}\n key=\"rightInputIcon\"\n >\n <Icon icons={searchIcon} />\n </StyledMotionRightInputIconWrapper>\n )}\n </>\n ) : (\n <StyledMotionRightElementWrapper\n animate={{ opacity: 1 }}\n exit={{ opacity: 0 }}\n initial={{ opacity: 0 }}\n key=\"rightElementWrapper\"\n >\n {rightElement}\n </StyledMotionRightElementWrapper>\n )}\n </AnimatePresence>\n </StyledRightWrapper>\n )}\n </StyledMotionAccordionHead>\n );\n};\n\nAccordionHead.displayName = 'AccordionHead';\n\nexport default AccordionHead;\n"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"AccordionHead.js","names":["_framerMotion","require","_react","_interopRequireWildcard","_AccordionHead","_accordion","_Icon","_interopRequireDefault","obj","__esModule","default","_getRequireWildcardCache","e","WeakMap","r","t","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","prototype","hasOwnProperty","call","i","set","AccordionHead","_ref","icon","isOpen","isFixed","isTitleGreyed","isWrapped","onClick","onSearchChange","rightElement","searchIcon","searchPlaceholder","shouldRotateIcon","title","titleElement","headHeight","setHeadHeight","useState","closed","open","titleWrapperRef","useRef","hasSearchIcon","Array","isArray","useEffect","getAccordionHeadHeight","width","current","clientWidth","createElement","StyledMotionAccordionHead","animate","height","className","initial","StyledMotionIconWrapper","rotate","undefined","icons","StyledMotionContentWrapper","opacity","ref","LayoutGroup","StyledMotionTitleWrapper","AnimatePresence","StyledMotionTitle","scale","key","StyledMotionTitleElementWrapper","layout","StyledRightWrapper","Fragment","StyledMotionRightInput","autoComplete","exit","hasIcon","onChange","placeholder","type","StyledMotionRightInputIconWrapper","StyledMotionRightElementWrapper","displayName","_default","exports"],"sources":["../../../../src/components/accordion/accordion-head/AccordionHead.tsx"],"sourcesContent":["import { AnimatePresence, LayoutGroup } from 'framer-motion';\nimport React, {\n ChangeEventHandler,\n FC,\n MouseEventHandler,\n ReactNode,\n useEffect,\n useRef,\n useState,\n} from 'react';\nimport {\n StyledMotionAccordionHead,\n StyledMotionContentWrapper,\n StyledMotionIconWrapper,\n StyledMotionRightElementWrapper,\n StyledMotionRightInput,\n StyledMotionRightInputIconWrapper,\n StyledMotionTitle,\n StyledMotionTitleElementWrapper,\n StyledMotionTitleWrapper,\n StyledRightWrapper,\n} from './AccordionHead.styles';\nimport { getAccordionHeadHeight } from '../../../utils/accordion';\nimport Icon from '../../icon/Icon';\n\ntype AccordionHeadProps = {\n icon?: string;\n isOpen: boolean;\n isFixed: boolean;\n isTitleGreyed: boolean;\n isWrapped: boolean;\n onClick: MouseEventHandler<HTMLDivElement>;\n onSearchChange?: ChangeEventHandler<HTMLInputElement>;\n rightElement?: ReactNode;\n searchIcon?: string[];\n searchPlaceholder?: string;\n shouldRotateIcon?: boolean;\n title: string;\n titleElement?: ReactNode;\n};\n\ninterface HeadHeight {\n closed: number;\n open: number;\n}\n\nconst AccordionHead: FC<AccordionHeadProps> = ({\n icon,\n isOpen,\n isFixed,\n isTitleGreyed,\n isWrapped,\n onClick,\n onSearchChange,\n rightElement,\n searchIcon,\n searchPlaceholder,\n shouldRotateIcon,\n title,\n titleElement,\n}) => {\n const [headHeight, setHeadHeight] = useState<HeadHeight>({\n closed: isWrapped ? 40 : 33,\n open: isWrapped ? 40 : 33,\n });\n\n const titleWrapperRef = useRef<HTMLDivElement>(null);\n\n const hasSearchIcon = Array.isArray(searchIcon);\n\n useEffect(() => {\n setHeadHeight(\n getAccordionHeadHeight({\n isWrapped,\n title,\n width: (titleWrapperRef.current?.clientWidth ?? 0) - 10,\n }),\n );\n }, [isWrapped, title]);\n\n return (\n <StyledMotionAccordionHead\n animate={{ height: isOpen ? headHeight.open : headHeight.closed }}\n className=\"beta-chayns-accordion-head\"\n initial={false}\n >\n <StyledMotionIconWrapper\n animate={{ rotate: (isOpen || isFixed) && shouldRotateIcon ? 90 : 0 }}\n initial={false}\n onClick={!isFixed ? onClick : undefined}\n >\n <Icon icons={[isFixed ? 'fa fa-horizontal-rule' : icon ?? 'fa fa-chevron-right']} />\n </StyledMotionIconWrapper>\n <StyledMotionContentWrapper\n animate={{ opacity: isTitleGreyed ? 0.5 : 1 }}\n initial={false}\n onClick={!isFixed ? onClick : undefined}\n ref={titleWrapperRef}\n >\n <LayoutGroup>\n <StyledMotionTitleWrapper>\n <AnimatePresence initial={false}>\n <StyledMotionTitle\n animate={{ scale: 1 }}\n initial={{ scale: isOpen && !isWrapped ? 1 / 1.3 : 1.3 }}\n isOpen={isOpen}\n isWrapped={isWrapped}\n key={\n isOpen && !isWrapped\n ? 'accordionHeadTitleBig'\n : 'accordionHeadTitle'\n }\n >\n {title}\n </StyledMotionTitle>\n </AnimatePresence>\n </StyledMotionTitleWrapper>\n {titleElement && (\n <StyledMotionTitleElementWrapper layout>\n {titleElement}\n </StyledMotionTitleElementWrapper>\n )}\n </LayoutGroup>\n </StyledMotionContentWrapper>\n {(typeof onSearchChange === 'function' || rightElement) && (\n <StyledRightWrapper>\n <AnimatePresence initial={false}>\n {typeof onSearchChange === 'function' && isOpen ? (\n <>\n <StyledMotionRightInput\n animate={{ opacity: 1, width: '165px' }}\n autoComplete=\"off\"\n exit={{ opacity: 0, width: 0 }}\n hasIcon={hasSearchIcon}\n initial={{ opacity: 0, width: 0 }}\n key=\"rightInput\"\n onChange={onSearchChange}\n placeholder={searchPlaceholder}\n type=\"text\"\n />\n {hasSearchIcon && (\n <StyledMotionRightInputIconWrapper\n animate={{ opacity: 1 }}\n exit={{ opacity: 0 }}\n initial={{ opacity: 0 }}\n key=\"rightInputIcon\"\n >\n <Icon icons={searchIcon} />\n </StyledMotionRightInputIconWrapper>\n )}\n </>\n ) : (\n <StyledMotionRightElementWrapper\n animate={{ opacity: 1 }}\n exit={{ opacity: 0 }}\n initial={{ opacity: 0 }}\n key=\"rightElementWrapper\"\n >\n {rightElement}\n </StyledMotionRightElementWrapper>\n )}\n </AnimatePresence>\n </StyledRightWrapper>\n )}\n </StyledMotionAccordionHead>\n );\n};\n\nAccordionHead.displayName = 'AccordionHead';\n\nexport default AccordionHead;\n"],"mappings":"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"}
|
|
@@ -8,7 +8,7 @@ var _framerMotion = require("framer-motion");
|
|
|
8
8
|
var _react = _interopRequireWildcard(require("react"));
|
|
9
9
|
var _Icon = _interopRequireDefault(require("../icon/Icon"));
|
|
10
10
|
var _AmountControl = require("./AmountControl.styles");
|
|
11
|
-
var
|
|
11
|
+
var _amountControl = require("../../utils/amountControl");
|
|
12
12
|
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
13
13
|
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); }
|
|
14
14
|
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 && Object.prototype.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; }
|
|
@@ -50,12 +50,12 @@ const AmountControl = _ref => {
|
|
|
50
50
|
if (!amount) {
|
|
51
51
|
return;
|
|
52
52
|
}
|
|
53
|
-
setAmountValue((0,
|
|
53
|
+
setAmountValue((0, _amountControl.checkForValidAmount)({
|
|
54
54
|
amount,
|
|
55
55
|
maxAmount,
|
|
56
56
|
minAmount
|
|
57
57
|
}));
|
|
58
|
-
setInputValue((0,
|
|
58
|
+
setInputValue((0, _amountControl.checkForValidAmount)({
|
|
59
59
|
amount,
|
|
60
60
|
maxAmount,
|
|
61
61
|
minAmount
|
|
@@ -93,7 +93,7 @@ const AmountControl = _ref => {
|
|
|
93
93
|
}, [inputValue]);
|
|
94
94
|
const handleInputChange = (0, _react.useCallback)(event => {
|
|
95
95
|
const valueBeforeCheck = Number(event.target.value);
|
|
96
|
-
const checkedValue = (0,
|
|
96
|
+
const checkedValue = (0, _amountControl.checkForValidAmount)({
|
|
97
97
|
minAmount,
|
|
98
98
|
maxAmount,
|
|
99
99
|
amount: Number(event.target.value)
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"AmountControl.js","names":["_framerMotion","require","_react","_interopRequireWildcard","_Icon","_interopRequireDefault","_AmountControl","_utils","obj","__esModule","default","_getRequireWildcardCache","e","WeakMap","r","t","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","prototype","hasOwnProperty","call","i","set","AmountControl","_ref","amount","label","maxAmount","onChange","amountValue","setAmountValue","useState","inputValue","setInputValue","displayState","setDisplayState","minAmount","useEffect","checkForValidAmount","toString","handleAmountAdd","prevState","Number","handleAmountRemove","handleFirstAmount","useCallback","handleInputBlur","handleInputChange","event","valueBeforeCheck","target","value","checkedValue","leftIcon","useMemo","item","createElement","icons","size","color","StyledAmountControl","onClick","StyledMotionAmountControlButton","disabled","StyledAmountControlInput","onBlur","type","AnimatePresence","initial","key","width","opacity","padding","animate","exit","transition","duration","displayName","_default","exports"],"sources":["../../../src/components/amount-control/AmountControl.tsx"],"sourcesContent":["import { AnimatePresence } from 'framer-motion';\nimport React, {\n ChangeEvent,\n FC,\n ReactElement,\n useCallback,\n useEffect,\n useMemo,\n useState,\n} from 'react';\nimport Icon from '../icon/Icon';\nimport {\n StyledAmountControl,\n StyledAmountControlInput,\n StyledMotionAmountControlButton,\n} from './AmountControl.styles';\nimport { checkForValidAmount } from './utils';\n\nexport type DisplayState = 'default' | 'delete' | 'normal' | 'maxAmount';\n\nexport type AmountControlProps = {\n /**\n * The amount that should be displayed.\n */\n amount?: number;\n /**\n * A Text that should be displayed, if no amount is selected;\n */\n label?: string;\n /**\n * The maximum allowed amount. If the maxAmount is set to one, a delete button is displayed on the left side.\n */\n maxAmount?: number;\n /**\n * A Function that is executed when the amount is changed\n */\n onChange?: (amount: number) => void;\n};\n\nconst AmountControl: FC<AmountControlProps> = ({ amount, label, maxAmount, onChange }) => {\n const [amountValue, setAmountValue] = useState(0);\n const [inputValue, setInputValue] = useState('0');\n const [displayState, setDisplayState] = useState<DisplayState>('default');\n\n const minAmount = 0;\n\n /**\n * This function controls the displayState\n */\n useEffect(() => {\n switch (true) {\n case maxAmount === 1 && amountValue === 1:\n setDisplayState('delete');\n return;\n case maxAmount && amountValue >= maxAmount:\n setDisplayState('maxAmount');\n return;\n case amountValue > 0:\n setDisplayState('normal');\n return;\n default:\n setDisplayState('default');\n }\n }, [amountValue, maxAmount]);\n\n /**\n * Function that sets the amountValue to the amount\n */\n useEffect(() => {\n if (!amount) {\n return;\n }\n\n setAmountValue(checkForValidAmount({ amount, maxAmount, minAmount }));\n setInputValue(checkForValidAmount({ amount, maxAmount, minAmount }).toString());\n }, [amount, maxAmount, minAmount]);\n\n /**\n * Function that updates the onChange event\n */\n useEffect(() => {\n if (onChange) {\n onChange(amountValue);\n }\n }, [amountValue, onChange]);\n\n const handleAmountAdd = () => {\n setAmountValue((prevState) => prevState + 1);\n setInputValue((prevState) => (Number(prevState) + 1).toString());\n };\n\n const handleAmountRemove = () => {\n setAmountValue((prevState) => prevState - 1);\n setInputValue((prevState) => (Number(prevState) - 1).toString());\n };\n\n const handleFirstAmount = useCallback(() => {\n if (amountValue !== 0) {\n return;\n }\n\n setAmountValue(1);\n setInputValue('1');\n }, [amountValue]);\n\n const handleInputBlur = useCallback(() => {\n setAmountValue(inputValue === '' ? 0 : Number(inputValue));\n\n if (inputValue === '') {\n setInputValue('0');\n }\n }, [inputValue]);\n\n const handleInputChange = useCallback(\n (event: ChangeEvent<HTMLInputElement>) => {\n const valueBeforeCheck = Number(event.target.value);\n\n const checkedValue = checkForValidAmount({\n minAmount,\n maxAmount,\n amount: Number(event.target.value),\n });\n\n if (valueBeforeCheck < minAmount && minAmount === 0) {\n setInputValue('0');\n\n return;\n }\n\n setInputValue(checkedValue === 0 ? '' : checkedValue.toString());\n },\n [maxAmount, minAmount]\n );\n\n const leftIcon = useMemo(() => {\n let item: ReactElement | null = null;\n\n switch (displayState) {\n case 'default':\n item = <Icon icons={['fa fa-cart-shopping']} size={15} />;\n break;\n case 'delete':\n item = <Icon icons={['fa ts-trash']} size={25} />;\n break;\n case 'normal':\n item = <Icon icons={['fa fa-minus']} size={15} color=\"red\" />;\n break;\n case 'maxAmount':\n item = <Icon icons={['fa fa-minus']} size={15} color=\"red\" />;\n break;\n default:\n break;\n }\n\n return item;\n }, [displayState]);\n\n return useMemo(\n () => (\n <StyledAmountControl onClick={handleFirstAmount}>\n <StyledMotionAmountControlButton\n onClick={handleAmountRemove}\n disabled={amountValue !== 0 && amountValue <= minAmount}\n >\n {leftIcon}\n </StyledMotionAmountControlButton>\n <StyledAmountControlInput\n displayState={displayState}\n onBlur={handleInputBlur}\n onChange={handleInputChange}\n value={displayState === 'default' && label ? label : inputValue}\n type={amountValue === 0 ? 'text' : 'number'}\n />\n <AnimatePresence initial={false}>\n {displayState === 'normal' && (\n <StyledMotionAmountControlButton\n key=\"right_button\"\n initial={{ width: 0, opacity: 0, padding: 0 }}\n animate={{ width: 40, opacity: 1, padding: 0 }}\n exit={{ width: 0, opacity: 0, padding: 0 }}\n transition={{ duration: 0.2, type: 'tween' }}\n onClick={handleAmountAdd}\n disabled={maxAmount ? amountValue >= maxAmount : false}\n >\n <Icon icons={['fa fa-plus']} size={15} color=\"green\" />\n </StyledMotionAmountControlButton>\n )}\n </AnimatePresence>\n </StyledAmountControl>\n ),\n [\n amountValue,\n displayState,\n handleFirstAmount,\n handleInputBlur,\n handleInputChange,\n inputValue,\n label,\n leftIcon,\n maxAmount,\n minAmount,\n ]\n );\n};\n\nAmountControl.displayName = 'AmountControl';\n\nexport default AmountControl;\n"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"AmountControl.js","names":["_framerMotion","require","_react","_interopRequireWildcard","_Icon","_interopRequireDefault","_AmountControl","_amountControl","obj","__esModule","default","_getRequireWildcardCache","e","WeakMap","r","t","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","prototype","hasOwnProperty","call","i","set","AmountControl","_ref","amount","label","maxAmount","onChange","amountValue","setAmountValue","useState","inputValue","setInputValue","displayState","setDisplayState","minAmount","useEffect","checkForValidAmount","toString","handleAmountAdd","prevState","Number","handleAmountRemove","handleFirstAmount","useCallback","handleInputBlur","handleInputChange","event","valueBeforeCheck","target","value","checkedValue","leftIcon","useMemo","item","createElement","icons","size","color","StyledAmountControl","onClick","StyledMotionAmountControlButton","disabled","StyledAmountControlInput","onBlur","type","AnimatePresence","initial","key","width","opacity","padding","animate","exit","transition","duration","displayName","_default","exports"],"sources":["../../../src/components/amount-control/AmountControl.tsx"],"sourcesContent":["import { AnimatePresence } from 'framer-motion';\nimport React, {\n ChangeEvent,\n FC,\n ReactElement,\n useCallback,\n useEffect,\n useMemo,\n useState,\n} from 'react';\nimport Icon from '../icon/Icon';\nimport {\n StyledAmountControl,\n StyledAmountControlInput,\n StyledMotionAmountControlButton,\n} from './AmountControl.styles';\nimport { checkForValidAmount } from '../../utils/amountControl';\n\nexport type DisplayState = 'default' | 'delete' | 'normal' | 'maxAmount';\n\nexport type AmountControlProps = {\n /**\n * The amount that should be displayed.\n */\n amount?: number;\n /**\n * A Text that should be displayed, if no amount is selected;\n */\n label?: string;\n /**\n * The maximum allowed amount. If the maxAmount is set to one, a delete button is displayed on the left side.\n */\n maxAmount?: number;\n /**\n * A Function that is executed when the amount is changed\n */\n onChange?: (amount: number) => void;\n};\n\nconst AmountControl: FC<AmountControlProps> = ({ amount, label, maxAmount, onChange }) => {\n const [amountValue, setAmountValue] = useState(0);\n const [inputValue, setInputValue] = useState('0');\n const [displayState, setDisplayState] = useState<DisplayState>('default');\n\n const minAmount = 0;\n\n /**\n * This function controls the displayState\n */\n useEffect(() => {\n switch (true) {\n case maxAmount === 1 && amountValue === 1:\n setDisplayState('delete');\n return;\n case maxAmount && amountValue >= maxAmount:\n setDisplayState('maxAmount');\n return;\n case amountValue > 0:\n setDisplayState('normal');\n return;\n default:\n setDisplayState('default');\n }\n }, [amountValue, maxAmount]);\n\n /**\n * Function that sets the amountValue to the amount\n */\n useEffect(() => {\n if (!amount) {\n return;\n }\n\n setAmountValue(checkForValidAmount({ amount, maxAmount, minAmount }));\n setInputValue(checkForValidAmount({ amount, maxAmount, minAmount }).toString());\n }, [amount, maxAmount, minAmount]);\n\n /**\n * Function that updates the onChange event\n */\n useEffect(() => {\n if (onChange) {\n onChange(amountValue);\n }\n }, [amountValue, onChange]);\n\n const handleAmountAdd = () => {\n setAmountValue((prevState) => prevState + 1);\n setInputValue((prevState) => (Number(prevState) + 1).toString());\n };\n\n const handleAmountRemove = () => {\n setAmountValue((prevState) => prevState - 1);\n setInputValue((prevState) => (Number(prevState) - 1).toString());\n };\n\n const handleFirstAmount = useCallback(() => {\n if (amountValue !== 0) {\n return;\n }\n\n setAmountValue(1);\n setInputValue('1');\n }, [amountValue]);\n\n const handleInputBlur = useCallback(() => {\n setAmountValue(inputValue === '' ? 0 : Number(inputValue));\n\n if (inputValue === '') {\n setInputValue('0');\n }\n }, [inputValue]);\n\n const handleInputChange = useCallback(\n (event: ChangeEvent<HTMLInputElement>) => {\n const valueBeforeCheck = Number(event.target.value);\n\n const checkedValue = checkForValidAmount({\n minAmount,\n maxAmount,\n amount: Number(event.target.value),\n });\n\n if (valueBeforeCheck < minAmount && minAmount === 0) {\n setInputValue('0');\n\n return;\n }\n\n setInputValue(checkedValue === 0 ? '' : checkedValue.toString());\n },\n [maxAmount, minAmount],\n );\n\n const leftIcon = useMemo(() => {\n let item: ReactElement | null = null;\n\n switch (displayState) {\n case 'default':\n item = <Icon icons={['fa fa-cart-shopping']} size={15} />;\n break;\n case 'delete':\n item = <Icon icons={['fa ts-trash']} size={25} />;\n break;\n case 'normal':\n item = <Icon icons={['fa fa-minus']} size={15} color=\"red\" />;\n break;\n case 'maxAmount':\n item = <Icon icons={['fa fa-minus']} size={15} color=\"red\" />;\n break;\n default:\n break;\n }\n\n return item;\n }, [displayState]);\n\n return useMemo(\n () => (\n <StyledAmountControl onClick={handleFirstAmount}>\n <StyledMotionAmountControlButton\n onClick={handleAmountRemove}\n disabled={amountValue !== 0 && amountValue <= minAmount}\n >\n {leftIcon}\n </StyledMotionAmountControlButton>\n <StyledAmountControlInput\n displayState={displayState}\n onBlur={handleInputBlur}\n onChange={handleInputChange}\n value={displayState === 'default' && label ? label : inputValue}\n type={amountValue === 0 ? 'text' : 'number'}\n />\n <AnimatePresence initial={false}>\n {displayState === 'normal' && (\n <StyledMotionAmountControlButton\n key=\"right_button\"\n initial={{ width: 0, opacity: 0, padding: 0 }}\n animate={{ width: 40, opacity: 1, padding: 0 }}\n exit={{ width: 0, opacity: 0, padding: 0 }}\n transition={{ duration: 0.2, type: 'tween' }}\n onClick={handleAmountAdd}\n disabled={maxAmount ? amountValue >= maxAmount : false}\n >\n <Icon icons={['fa fa-plus']} size={15} color=\"green\" />\n </StyledMotionAmountControlButton>\n )}\n </AnimatePresence>\n </StyledAmountControl>\n ),\n [\n amountValue,\n displayState,\n handleFirstAmount,\n handleInputBlur,\n handleInputChange,\n inputValue,\n label,\n leftIcon,\n maxAmount,\n minAmount,\n ],\n );\n};\n\nAmountControl.displayName = 'AmountControl';\n\nexport default AmountControl;\n"],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"AmountControl.styles.js","names":["_framerMotion","require","_styledComponents","_interopRequireWildcard","_getRequireWildcardCache","e","WeakMap","r","t","__esModule","default","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","prototype","hasOwnProperty","call","i","set","StyledAmountControl","exports","styled","div","_ref","theme","StyledAmountControlInput","input","_ref2","_ref3","displayState","css","StyledMotionAmountControlButton","motion","button","_ref4","disabled"],"sources":["../../../src/components/amount-control/AmountControl.styles.ts"],"sourcesContent":["import { motion } from 'framer-motion';\nimport styled, { css } from 'styled-components';\nimport type { WithTheme } from '../color-scheme-provider/ColorSchemeProvider';\nimport type { DisplayState } from './AmountControl';\n\ntype StyledAmountControlProps = WithTheme<unknown>;\n\nexport const StyledAmountControl = styled.div<StyledAmountControlProps>`\n background-color: ${({ theme }: StyledAmountControlProps) => theme['202']};\n display: flex;\n width: fit-content;\n border-radius: 3px;\n`;\n\ntype StyledAmountControlInputProps = WithTheme<{\n displayState: DisplayState;\n}>;\n\nexport const StyledAmountControlInput = styled.input<StyledAmountControlInputProps>`\n background-color: ${({ theme }: StyledAmountControlInputProps) => theme['202']};\n border: none;\n height: 28px;\n width: 95px;\n text-align: center;\n ${({ displayState }) =>\n displayState !== 'normal' &&\n css`\n border-bottom-right-radius: 3px;\n border-top-right-radius: 3px;\n `}\n`;\n\ntype StyledAmountControlButtonProps = WithTheme<{\n disabled: boolean;\n}>;\n\nexport const StyledMotionAmountControlButton = styled(\n motion.button
|
|
1
|
+
{"version":3,"file":"AmountControl.styles.js","names":["_framerMotion","require","_styledComponents","_interopRequireWildcard","_getRequireWildcardCache","e","WeakMap","r","t","__esModule","default","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","prototype","hasOwnProperty","call","i","set","StyledAmountControl","exports","styled","div","_ref","theme","StyledAmountControlInput","input","_ref2","_ref3","displayState","css","StyledMotionAmountControlButton","motion","button","_ref4","disabled"],"sources":["../../../src/components/amount-control/AmountControl.styles.ts"],"sourcesContent":["import { motion } from 'framer-motion';\nimport styled, { css } from 'styled-components';\nimport type { WithTheme } from '../color-scheme-provider/ColorSchemeProvider';\nimport type { DisplayState } from './AmountControl';\n\ntype StyledAmountControlProps = WithTheme<unknown>;\n\nexport const StyledAmountControl = styled.div<StyledAmountControlProps>`\n background-color: ${({ theme }: StyledAmountControlProps) => theme['202']};\n display: flex;\n width: fit-content;\n border-radius: 3px;\n`;\n\ntype StyledAmountControlInputProps = WithTheme<{\n displayState: DisplayState;\n}>;\n\nexport const StyledAmountControlInput = styled.input<StyledAmountControlInputProps>`\n background-color: ${({ theme }: StyledAmountControlInputProps) => theme['202']};\n border: none;\n height: 28px;\n width: 95px;\n text-align: center;\n ${({ displayState }) =>\n displayState !== 'normal' &&\n css`\n border-bottom-right-radius: 3px;\n border-top-right-radius: 3px;\n `}\n`;\n\ntype StyledAmountControlButtonProps = WithTheme<{\n disabled: boolean;\n}>;\n\nexport const StyledMotionAmountControlButton = styled(\n motion.button,\n)<StyledAmountControlButtonProps>`\n overflow: hidden;\n background-color: rgba(255, 255, 255, 0.2);\n height: 28px;\n width: 40px;\n\n ${({ disabled }) =>\n disabled &&\n css`\n opacity: 0.5;\n `}\n`;\n"],"mappings":";;;;;;AAAA,IAAAA,aAAA,GAAAC,OAAA;AACA,IAAAC,iBAAA,GAAAC,uBAAA,CAAAF,OAAA;AAAgD,SAAAG,yBAAAC,CAAA,6BAAAC,OAAA,mBAAAC,CAAA,OAAAD,OAAA,IAAAE,CAAA,OAAAF,OAAA,YAAAF,wBAAA,YAAAA,CAAAC,CAAA,WAAAA,CAAA,GAAAG,CAAA,GAAAD,CAAA,KAAAF,CAAA;AAAA,SAAAF,wBAAAE,CAAA,EAAAE,CAAA,SAAAA,CAAA,IAAAF,CAAA,IAAAA,CAAA,CAAAI,UAAA,SAAAJ,CAAA,eAAAA,CAAA,uBAAAA,CAAA,yBAAAA,CAAA,WAAAK,OAAA,EAAAL,CAAA,QAAAG,CAAA,GAAAJ,wBAAA,CAAAG,CAAA,OAAAC,CAAA,IAAAA,CAAA,CAAAG,GAAA,CAAAN,CAAA,UAAAG,CAAA,CAAAI,GAAA,CAAAP,CAAA,OAAAQ,CAAA,KAAAC,SAAA,UAAAC,CAAA,GAAAC,MAAA,CAAAC,cAAA,IAAAD,MAAA,CAAAE,wBAAA,WAAAC,CAAA,IAAAd,CAAA,oBAAAc,CAAA,IAAAH,MAAA,CAAAI,SAAA,CAAAC,cAAA,CAAAC,IAAA,CAAAjB,CAAA,EAAAc,CAAA,SAAAI,CAAA,GAAAR,CAAA,GAAAC,MAAA,CAAAE,wBAAA,CAAAb,CAAA,EAAAc,CAAA,UAAAI,CAAA,KAAAA,CAAA,CAAAX,GAAA,IAAAW,CAAA,CAAAC,GAAA,IAAAR,MAAA,CAAAC,cAAA,CAAAJ,CAAA,EAAAM,CAAA,EAAAI,CAAA,IAAAV,CAAA,CAAAM,CAAA,IAAAd,CAAA,CAAAc,CAAA,YAAAN,CAAA,CAAAH,OAAA,GAAAL,CAAA,EAAAG,CAAA,IAAAA,CAAA,CAAAgB,GAAA,CAAAnB,CAAA,EAAAQ,CAAA,GAAAA,CAAA;AAMzC,MAAMY,mBAAmB,GAAAC,OAAA,CAAAD,mBAAA,GAAGE,yBAAM,CAACC,GAA8B;AACxE,wBAAwBC,IAAA;EAAA,IAAC;IAAEC;EAAgC,CAAC,GAAAD,IAAA;EAAA,OAAKC,KAAK,CAAC,KAAK,CAAC;AAAA,CAAC;AAC9E;AACA;AACA;AACA,CAAC;AAMM,MAAMC,wBAAwB,GAAAL,OAAA,CAAAK,wBAAA,GAAGJ,yBAAM,CAACK,KAAqC;AACpF,wBAAwBC,KAAA;EAAA,IAAC;IAAEH;EAAqC,CAAC,GAAAG,KAAA;EAAA,OAAKH,KAAK,CAAC,KAAK,CAAC;AAAA,CAAC;AACnF;AACA;AACA;AACA;AACA,MAAMI,KAAA;EAAA,IAAC;IAAEC;EAAa,CAAC,GAAAD,KAAA;EAAA,OACfC,YAAY,KAAK,QAAQ,IACzB,IAAAC,qBAAG,CAAC;AACZ;AACA;AACA,SAAS;AAAA,CAAC;AACV,CAAC;AAMM,MAAMC,+BAA+B,GAAAX,OAAA,CAAAW,+BAAA,GAAG,IAAAV,yBAAM,EACjDW,oBAAM,CAACC,MACX,CAAkC;AAClC;AACA;AACA;AACA;AACA;AACA,MAAMC,KAAA;EAAA,IAAC;IAAEC;EAAS,CAAC,GAAAD,KAAA;EAAA,OACXC,QAAQ,IACR,IAAAL,qBAAG,CAAC;AACZ;AACA,SAAS;AAAA,CAAC;AACV,CAAC"}
|
|
@@ -7,7 +7,7 @@ exports.default = void 0;
|
|
|
7
7
|
var _colors = require("@chayns/colors");
|
|
8
8
|
var _react = _interopRequireWildcard(require("react"));
|
|
9
9
|
var _styledComponents = require("styled-components");
|
|
10
|
-
var _font = require("
|
|
10
|
+
var _font = require("../../utils/font");
|
|
11
11
|
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); }
|
|
12
12
|
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 && Object.prototype.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; }
|
|
13
13
|
var ColorMode = /*#__PURE__*/function (ColorMode) {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ColorSchemeProvider.js","names":["_colors","require","_react","_interopRequireWildcard","_styledComponents","_font","_getRequireWildcardCache","e","WeakMap","r","t","__esModule","default","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","prototype","hasOwnProperty","call","i","set","ColorMode","GlobalStyle","createGlobalStyle","generateFontFaces","ColorSchemeProvider","_ref","children","color","colorMode","Classic","cssVariables","secondaryColor","style","colors","setColors","useState","themeColors","setThemeColors","useEffect","availableColors","getAvailableColorList","newColors","newThemeColors","forEach","colorName","hexColor","getColorFromPalette","rgbColor","hexToRgb255","g","b","createElement","ThemeProvider","theme","displayName","_default","exports"],"sources":["../../../src/components/color-scheme-provider/ColorSchemeProvider.tsx"],"sourcesContent":["import { getAvailableColorList, getColorFromPalette, hexToRgb255 } from '@chayns/colors';\nimport React, { FC, ReactNode, useEffect, useState } from 'react';\nimport { createGlobalStyle, ThemeProvider } from 'styled-components';\nimport { generateFontFaces } from '
|
|
1
|
+
{"version":3,"file":"ColorSchemeProvider.js","names":["_colors","require","_react","_interopRequireWildcard","_styledComponents","_font","_getRequireWildcardCache","e","WeakMap","r","t","__esModule","default","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","prototype","hasOwnProperty","call","i","set","ColorMode","GlobalStyle","createGlobalStyle","generateFontFaces","ColorSchemeProvider","_ref","children","color","colorMode","Classic","cssVariables","secondaryColor","style","colors","setColors","useState","themeColors","setThemeColors","useEffect","availableColors","getAvailableColorList","newColors","newThemeColors","forEach","colorName","hexColor","getColorFromPalette","rgbColor","hexToRgb255","g","b","createElement","ThemeProvider","theme","displayName","_default","exports"],"sources":["../../../src/components/color-scheme-provider/ColorSchemeProvider.tsx"],"sourcesContent":["import { getAvailableColorList, getColorFromPalette, hexToRgb255 } from '@chayns/colors';\nimport React, { FC, ReactNode, useEffect, useState } from 'react';\nimport { createGlobalStyle, ThemeProvider } from 'styled-components';\nimport { generateFontFaces } from '../../utils/font';\n\nenum ColorMode {\n Classic,\n Dark,\n Light,\n}\n\ntype ColorSchemeProviderProps = {\n /**\n * The content of the application or the components for which the styles should be set\n */\n children: ReactNode;\n /**\n * The hex color to be used for the children\n */\n color?: string;\n /**\n * The color mode to be used for the children\n */\n colorMode?: ColorMode;\n /**\n * Css variables to be added in addition to the chayns variables\n */\n cssVariables?: { [key: string]: string | number };\n /**\n * The secondary hex color to be used for the children\n */\n secondaryColor?: string;\n /**\n * Additional styles set on the root element\n */\n style?: { [key: string]: string | number };\n};\n\nexport interface Theme {\n [key: string]: string;\n}\n\nexport type WithTheme<T> = T & {\n theme: Theme;\n};\n\n// ToDo remove type after the framer-motion bug is Fixed\nexport type FramerMotionBugFix = WithTheme<unknown>;\n\nconst GlobalStyle = createGlobalStyle`\n ${generateFontFaces}\n\n .ellipsis {\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n }\n`;\n\nconst ColorSchemeProvider: FC<ColorSchemeProviderProps> = ({\n children,\n color = '#005EB8',\n colorMode = ColorMode.Classic,\n cssVariables = {},\n secondaryColor,\n style = {},\n}) => {\n const [colors, setColors] = useState<Theme>({});\n const [themeColors, setThemeColors] = useState<Theme>({});\n\n useEffect(() => {\n const availableColors = getAvailableColorList();\n\n const newColors: Theme = {};\n const newThemeColors: Theme = {};\n\n availableColors.forEach((colorName: string) => {\n const hexColor = getColorFromPalette(colorName, {\n color,\n colorMode,\n secondaryColor,\n });\n\n if (hexColor) {\n const rgbColor = hexToRgb255(hexColor);\n\n newColors[`--chayns-color--${colorName}`] = hexColor;\n newThemeColors[colorName] = hexColor;\n\n if (rgbColor) {\n newColors[`--chayns-color-rgb--${colorName}`] =\n `${rgbColor.r}, ${rgbColor.g}, ${rgbColor.b}`;\n newThemeColors[`${colorName}-rgb`] =\n `${rgbColor.r}, ${rgbColor.g}, ${rgbColor.b}`;\n }\n }\n });\n\n setColors(newColors);\n setThemeColors(newThemeColors);\n }, [color, colorMode, secondaryColor]);\n\n return (\n <ThemeProvider theme={themeColors}>\n <div style={{ ...colors, ...cssVariables, ...style }}>{children}</div>\n <GlobalStyle />\n </ThemeProvider>\n );\n};\n\nColorSchemeProvider.displayName = 'ColorSchemeProvider';\n\nexport default ColorSchemeProvider;\n"],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ComboBox.js","names":["_react","_interopRequireWildcard","require","_comboBox","_calculate","_Icon","_interopRequireDefault","_ComboBoxItem","_ComboBox","obj","__esModule","default","_getRequireWildcardCache","e","WeakMap","r","t","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","prototype","hasOwnProperty","call","i","set","ComboBox","_ref","direction","ComboBoxDirection","BOTTOM","isDisabled","list","maxHeight","onSelect","placeholder","selectedItem","shouldShowRoundImage","item","setItem","useState","isAnimating","setIsAnimating","minWidth","setMinWidth","height","setHeight","ref","useRef","isMobile","chayns","env","handleClick","useCallback","event","current","contains","target","useEffect","document","addEventListener","removeEventListener","handleSetSelectedItem","itemToSelect","isAtLeastOneItemWithImageGiven","some","_ref2","imageUrl","textArray","map","_ref3","text","calculateContentHeight","push","calculateContentWidth","placeholderImageUrl","useMemo","undefined","placeholderText","handleHeaderClick","prevState","comboBoxBody","items","_ref4","value","createElement","isSelected","key","animate","opacity","style","TOP","transform","StyledMotionComboBoxBody","initial","transition","duration","StyledComboBox","StyledComboBoxHeader","onClick","isOpen","StyledComboBoxPlaceholder","StyledComboBoxPlaceholderImage","src","StyledComboBoxIconWrapper","icons","displayName","_default","exports"],"sources":["../../../src/components/combobox/ComboBox.tsx"],"sourcesContent":["import React, {\n FC,\n useCallback,\n useEffect,\n useMemo,\n useRef,\n useState,\n type CSSProperties,\n} from 'react';\nimport { ComboBoxDirection } from '../../types/comboBox';\nimport { calculateContentHeight, calculateContentWidth } from '../../utils/calculate';\nimport Icon from '../icon/Icon';\nimport ComboBoxItem from './combobox-item/ComboBoxItem';\nimport {\n StyledComboBox,\n StyledComboBoxHeader,\n StyledComboBoxIconWrapper,\n StyledComboBoxPlaceholder,\n StyledComboBoxPlaceholderImage,\n StyledMotionComboBoxBody,\n} from './ComboBox.styles';\n\nexport interface IComboBoxItem {\n imageUrl?: string;\n text: string;\n value: string | number;\n}\n\nexport type ComboBoxProps = {\n /**\n * The direction in which the combobox should open.\n */\n direction?: ComboBoxDirection;\n /**\n * Whether the combobox should be disabled.\n */\n isDisabled?: boolean;\n /**\n * The list of the items that should be displayed.\n */\n list: IComboBoxItem[];\n /**\n * The maximum height of the combobox content.\n */\n maxHeight?: CSSProperties['maxHeight'];\n /**\n * Function that should be executed when an item is selected.\n */\n onSelect?: (comboboxItem: IComboBoxItem) => void;\n /**\n * A text that should be displayed when no item is selected.\n */\n placeholder: string;\n /**\n * An item that should be preselected.\n */\n selectedItem?: IComboBoxItem;\n /**\n * If true, the images of the items are displayed in a round shape.\n */\n shouldShowRoundImage?: boolean;\n};\n\nconst ComboBox: FC<ComboBoxProps> = ({\n direction = ComboBoxDirection.BOTTOM,\n isDisabled = false,\n list,\n maxHeight = '300px',\n onSelect,\n placeholder,\n selectedItem,\n shouldShowRoundImage,\n}) => {\n const [item, setItem] = useState<IComboBoxItem>();\n const [isAnimating, setIsAnimating] = useState(false);\n const [minWidth, setMinWidth] = useState(0);\n const [height, setHeight] = useState(0);\n\n const ref = useRef<HTMLDivElement>(null);\n\n const { isMobile } = chayns.env;\n\n const handleClick = useCallback(\n (event: MouseEvent) => {\n if (ref.current && !ref.current.contains(event.target as Node)) {\n setIsAnimating(false);\n }\n },\n [ref]\n );\n\n /**\n * This function adds an event listener to the document to close the combobox when the user clicks outside of it\n */\n useEffect(() => {\n document.addEventListener('click', handleClick);\n\n return () => {\n document.removeEventListener('click', handleClick);\n };\n }, [handleClick, ref]);\n\n /**\n * This function sets the selected item\n */\n const handleSetSelectedItem = useCallback(\n (itemToSelect: IComboBoxItem) => {\n setItem(itemToSelect);\n setIsAnimating(false);\n\n if (onSelect) {\n onSelect(itemToSelect);\n }\n },\n [onSelect]\n );\n\n /**\n * This function calculates the greatest width\n */\n useEffect(() => {\n const isAtLeastOneItemWithImageGiven = list.some(({ imageUrl }) => imageUrl);\n\n const textArray = list.map(({ text }) => text);\n\n setHeight(calculateContentHeight(textArray));\n\n textArray.push(placeholder);\n\n // 45px = padding left + padding right + border left + border right + arrow icon width + arrow icon margin left\n // 32px = image width + flex gap\n setMinWidth(\n calculateContentWidth(textArray) + 45 + (isAtLeastOneItemWithImageGiven ? 32 : 0)\n );\n }, [list, placeholder]);\n\n /**\n * This function sets the external selected item\n */\n useEffect(() => {\n if (selectedItem) {\n setItem(selectedItem);\n setIsAnimating(false);\n }\n }, [selectedItem]);\n\n const placeholderImageUrl = useMemo(() => {\n if (selectedItem) {\n return selectedItem.imageUrl;\n }\n\n if (item) {\n return item.imageUrl;\n }\n\n return undefined;\n }, [item, selectedItem]);\n\n /**\n * This function resets the placeholder\n */\n const placeholderText = useMemo(() => {\n let text = placeholder;\n\n if (selectedItem) {\n text = selectedItem.text;\n } else if (item) {\n text = item.text;\n }\n\n return text;\n }, [item, placeholder, selectedItem]);\n\n /**\n * This function opens the content of the combobox\n */\n const handleHeaderClick = useCallback(() => {\n if (!isDisabled) {\n setIsAnimating((prevState) => !prevState);\n }\n }, [isDisabled]);\n\n const comboBoxBody = useMemo(() => {\n const items = list.map(({ imageUrl, text, value }) => (\n <ComboBoxItem\n imageUrl={imageUrl}\n isSelected={selectedItem ? value === selectedItem.value : false}\n key={value}\n onSelect={handleSetSelectedItem}\n shouldShowRoundImage={shouldShowRoundImage}\n text={text}\n value={value}\n />\n ));\n\n const animate = isAnimating\n ? { height: 'fit-content', opacity: 1 }\n : { height: 0, opacity: 0 };\n\n const style =\n direction === ComboBoxDirection.TOP ? { transform: 'translateY(-100%)' } : undefined;\n\n return (\n <StyledMotionComboBoxBody\n animate={animate}\n height={height}\n initial={{ height: 0, opacity: 0 }}\n maxHeight={maxHeight}\n minWidth={minWidth}\n style={style}\n direction={direction}\n transition={{ duration: 0.2 }}\n >\n {items}\n </StyledMotionComboBoxBody>\n );\n }, [\n direction,\n handleSetSelectedItem,\n height,\n isAnimating,\n list,\n maxHeight,\n minWidth,\n selectedItem,\n shouldShowRoundImage,\n ]);\n\n return useMemo(\n () => (\n <StyledComboBox ref={ref}>\n {direction === ComboBoxDirection.TOP && comboBoxBody}\n <StyledComboBoxHeader\n direction={direction}\n minWidth={minWidth}\n onClick={handleHeaderClick}\n isOpen={isAnimating}\n isMobile={isMobile}\n isDisabled={isDisabled}\n >\n <StyledComboBoxPlaceholder>\n {placeholderImageUrl && (\n <StyledComboBoxPlaceholderImage\n src={placeholderImageUrl}\n shouldShowRoundImage={shouldShowRoundImage}\n />\n )}\n {placeholderText}\n </StyledComboBoxPlaceholder>\n <StyledComboBoxIconWrapper>\n <Icon icons={['fa fa-chevron-down']} />\n </StyledComboBoxIconWrapper>\n </StyledComboBoxHeader>\n {direction === ComboBoxDirection.BOTTOM && comboBoxBody}\n </StyledComboBox>\n ),\n [\n comboBoxBody,\n direction,\n handleHeaderClick,\n isAnimating,\n isDisabled,\n isMobile,\n minWidth,\n placeholderImageUrl,\n placeholderText,\n shouldShowRoundImage,\n ]\n );\n};\n\nComboBox.displayName = 'ComboBox';\n\nexport default ComboBox;\n"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"ComboBox.js","names":["_react","_interopRequireWildcard","require","_comboBox","_calculate","_Icon","_interopRequireDefault","_ComboBoxItem","_ComboBox","obj","__esModule","default","_getRequireWildcardCache","e","WeakMap","r","t","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","prototype","hasOwnProperty","call","i","set","ComboBox","_ref","direction","ComboBoxDirection","BOTTOM","isDisabled","list","maxHeight","onSelect","placeholder","selectedItem","shouldShowRoundImage","item","setItem","useState","isAnimating","setIsAnimating","minWidth","setMinWidth","height","setHeight","ref","useRef","isMobile","chayns","env","handleClick","useCallback","event","current","contains","target","useEffect","document","addEventListener","removeEventListener","handleSetSelectedItem","itemToSelect","isAtLeastOneItemWithImageGiven","some","_ref2","imageUrl","textArray","map","_ref3","text","calculateContentHeight","push","calculateContentWidth","placeholderImageUrl","useMemo","undefined","placeholderText","handleHeaderClick","prevState","comboBoxBody","items","_ref4","value","createElement","isSelected","key","animate","opacity","style","TOP","transform","StyledMotionComboBoxBody","initial","transition","duration","StyledComboBox","StyledComboBoxHeader","onClick","isOpen","StyledComboBoxPlaceholder","StyledComboBoxPlaceholderImage","src","StyledComboBoxIconWrapper","icons","displayName","_default","exports"],"sources":["../../../src/components/combobox/ComboBox.tsx"],"sourcesContent":["import React, {\n FC,\n useCallback,\n useEffect,\n useMemo,\n useRef,\n useState,\n type CSSProperties,\n} from 'react';\nimport { ComboBoxDirection } from '../../types/comboBox';\nimport { calculateContentHeight, calculateContentWidth } from '../../utils/calculate';\nimport Icon from '../icon/Icon';\nimport ComboBoxItem from './combobox-item/ComboBoxItem';\nimport {\n StyledComboBox,\n StyledComboBoxHeader,\n StyledComboBoxIconWrapper,\n StyledComboBoxPlaceholder,\n StyledComboBoxPlaceholderImage,\n StyledMotionComboBoxBody,\n} from './ComboBox.styles';\n\nexport interface IComboBoxItem {\n imageUrl?: string;\n text: string;\n value: string | number;\n}\n\nexport type ComboBoxProps = {\n /**\n * The direction in which the combobox should open.\n */\n direction?: ComboBoxDirection;\n /**\n * Whether the combobox should be disabled.\n */\n isDisabled?: boolean;\n /**\n * The list of the items that should be displayed.\n */\n list: IComboBoxItem[];\n /**\n * The maximum height of the combobox content.\n */\n maxHeight?: CSSProperties['maxHeight'];\n /**\n * Function that should be executed when an item is selected.\n */\n onSelect?: (comboboxItem: IComboBoxItem) => void;\n /**\n * A text that should be displayed when no item is selected.\n */\n placeholder: string;\n /**\n * An item that should be preselected.\n */\n selectedItem?: IComboBoxItem;\n /**\n * If true, the images of the items are displayed in a round shape.\n */\n shouldShowRoundImage?: boolean;\n};\n\nconst ComboBox: FC<ComboBoxProps> = ({\n direction = ComboBoxDirection.BOTTOM,\n isDisabled = false,\n list,\n maxHeight = '300px',\n onSelect,\n placeholder,\n selectedItem,\n shouldShowRoundImage,\n}) => {\n const [item, setItem] = useState<IComboBoxItem>();\n const [isAnimating, setIsAnimating] = useState(false);\n const [minWidth, setMinWidth] = useState(0);\n const [height, setHeight] = useState(0);\n\n const ref = useRef<HTMLDivElement>(null);\n\n const { isMobile } = chayns.env;\n\n const handleClick = useCallback(\n (event: MouseEvent) => {\n if (ref.current && !ref.current.contains(event.target as Node)) {\n setIsAnimating(false);\n }\n },\n [ref],\n );\n\n /**\n * This function adds an event listener to the document to close the combobox when the user clicks outside of it\n */\n useEffect(() => {\n document.addEventListener('click', handleClick);\n\n return () => {\n document.removeEventListener('click', handleClick);\n };\n }, [handleClick, ref]);\n\n /**\n * This function sets the selected item\n */\n const handleSetSelectedItem = useCallback(\n (itemToSelect: IComboBoxItem) => {\n setItem(itemToSelect);\n setIsAnimating(false);\n\n if (onSelect) {\n onSelect(itemToSelect);\n }\n },\n [onSelect],\n );\n\n /**\n * This function calculates the greatest width\n */\n useEffect(() => {\n const isAtLeastOneItemWithImageGiven = list.some(({ imageUrl }) => imageUrl);\n\n const textArray = list.map(({ text }) => text);\n\n setHeight(calculateContentHeight(textArray));\n\n textArray.push(placeholder);\n\n // 45px = padding left + padding right + border left + border right + arrow icon width + arrow icon margin left\n // 32px = image width + flex gap\n setMinWidth(\n calculateContentWidth(textArray) + 45 + (isAtLeastOneItemWithImageGiven ? 32 : 0),\n );\n }, [list, placeholder]);\n\n /**\n * This function sets the external selected item\n */\n useEffect(() => {\n if (selectedItem) {\n setItem(selectedItem);\n setIsAnimating(false);\n }\n }, [selectedItem]);\n\n const placeholderImageUrl = useMemo(() => {\n if (selectedItem) {\n return selectedItem.imageUrl;\n }\n\n if (item) {\n return item.imageUrl;\n }\n\n return undefined;\n }, [item, selectedItem]);\n\n /**\n * This function resets the placeholder\n */\n const placeholderText = useMemo(() => {\n let text = placeholder;\n\n if (selectedItem) {\n text = selectedItem.text;\n } else if (item) {\n text = item.text;\n }\n\n return text;\n }, [item, placeholder, selectedItem]);\n\n /**\n * This function opens the content of the combobox\n */\n const handleHeaderClick = useCallback(() => {\n if (!isDisabled) {\n setIsAnimating((prevState) => !prevState);\n }\n }, [isDisabled]);\n\n const comboBoxBody = useMemo(() => {\n const items = list.map(({ imageUrl, text, value }) => (\n <ComboBoxItem\n imageUrl={imageUrl}\n isSelected={selectedItem ? value === selectedItem.value : false}\n key={value}\n onSelect={handleSetSelectedItem}\n shouldShowRoundImage={shouldShowRoundImage}\n text={text}\n value={value}\n />\n ));\n\n const animate = isAnimating\n ? { height: 'fit-content', opacity: 1 }\n : { height: 0, opacity: 0 };\n\n const style =\n direction === ComboBoxDirection.TOP ? { transform: 'translateY(-100%)' } : undefined;\n\n return (\n <StyledMotionComboBoxBody\n animate={animate}\n height={height}\n initial={{ height: 0, opacity: 0 }}\n maxHeight={maxHeight}\n minWidth={minWidth}\n style={style}\n direction={direction}\n transition={{ duration: 0.2 }}\n >\n {items}\n </StyledMotionComboBoxBody>\n );\n }, [\n direction,\n handleSetSelectedItem,\n height,\n isAnimating,\n list,\n maxHeight,\n minWidth,\n selectedItem,\n shouldShowRoundImage,\n ]);\n\n return useMemo(\n () => (\n <StyledComboBox ref={ref}>\n {direction === ComboBoxDirection.TOP && comboBoxBody}\n <StyledComboBoxHeader\n direction={direction}\n minWidth={minWidth}\n onClick={handleHeaderClick}\n isOpen={isAnimating}\n isMobile={isMobile}\n isDisabled={isDisabled}\n >\n <StyledComboBoxPlaceholder>\n {placeholderImageUrl && (\n <StyledComboBoxPlaceholderImage\n src={placeholderImageUrl}\n shouldShowRoundImage={shouldShowRoundImage}\n />\n )}\n {placeholderText}\n </StyledComboBoxPlaceholder>\n <StyledComboBoxIconWrapper>\n <Icon icons={['fa fa-chevron-down']} />\n </StyledComboBoxIconWrapper>\n </StyledComboBoxHeader>\n {direction === ComboBoxDirection.BOTTOM && comboBoxBody}\n </StyledComboBox>\n ),\n [\n comboBoxBody,\n direction,\n handleHeaderClick,\n isAnimating,\n isDisabled,\n isMobile,\n minWidth,\n placeholderImageUrl,\n placeholderText,\n shouldShowRoundImage,\n ],\n );\n};\n\nComboBox.displayName = 'ComboBox';\n\nexport default ComboBox;\n"],"mappings":"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"}
|
|
@@ -8,10 +8,10 @@ var _framerMotion = require("framer-motion");
|
|
|
8
8
|
var _react = _interopRequireWildcard(require("react"));
|
|
9
9
|
var _reactDom = require("react-dom");
|
|
10
10
|
var _uuid = require("../../hooks/uuid");
|
|
11
|
-
var
|
|
12
|
-
var _alignment = require("./constants/alignment");
|
|
11
|
+
var _contextMenu = require("../../types/contextMenu");
|
|
13
12
|
var _ContextMenuContent = _interopRequireDefault(require("./context-menu-content/ContextMenuContent"));
|
|
14
13
|
var _ContextMenu = require("./ContextMenu.styles");
|
|
14
|
+
var _Icon = _interopRequireDefault(require("../icon/Icon"));
|
|
15
15
|
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
16
16
|
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); }
|
|
17
17
|
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 && Object.prototype.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; }
|
|
@@ -31,7 +31,7 @@ const ContextMenu = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
|
|
|
31
31
|
x: 0,
|
|
32
32
|
y: 0
|
|
33
33
|
});
|
|
34
|
-
const [internalAlignment, setInternalAlignment] = (0, _react.useState)(
|
|
34
|
+
const [internalAlignment, setInternalAlignment] = (0, _react.useState)(_contextMenu.ContextMenuAlignment.TopLeft);
|
|
35
35
|
const [isContentShown, setIsContentShown] = (0, _react.useState)(false);
|
|
36
36
|
const [portal, setPortal] = (0, _react.useState)();
|
|
37
37
|
const uuid = (0, _uuid.useUuid)();
|
|
@@ -88,14 +88,14 @@ const ContextMenu = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
|
|
|
88
88
|
} = rootElement.getBoundingClientRect();
|
|
89
89
|
if (x < width / 2) {
|
|
90
90
|
if (y < height / 2) {
|
|
91
|
-
setInternalAlignment(
|
|
91
|
+
setInternalAlignment(_contextMenu.ContextMenuAlignment.BottomRight);
|
|
92
92
|
} else {
|
|
93
|
-
setInternalAlignment(
|
|
93
|
+
setInternalAlignment(_contextMenu.ContextMenuAlignment.TopRight);
|
|
94
94
|
}
|
|
95
95
|
} else if (y < height / 2) {
|
|
96
|
-
setInternalAlignment(
|
|
96
|
+
setInternalAlignment(_contextMenu.ContextMenuAlignment.BottomLeft);
|
|
97
97
|
} else {
|
|
98
|
-
setInternalAlignment(
|
|
98
|
+
setInternalAlignment(_contextMenu.ContextMenuAlignment.TopLeft);
|
|
99
99
|
}
|
|
100
100
|
setIsContentShown(true);
|
|
101
101
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ContextMenu.js","names":["_framerMotion","require","_react","_interopRequireWildcard","_reactDom","_uuid","_Icon","_interopRequireDefault","_alignment","_ContextMenuContent","_ContextMenu","obj","__esModule","default","_getRequireWildcardCache","e","WeakMap","r","t","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","prototype","hasOwnProperty","call","i","set","ContextMenu","forwardRef","_ref","ref","alignment","children","createElement","icons","container","document","body","coordinates","items","onHide","onShow","internalCoordinates","setInternalCoordinates","useState","x","y","internalAlignment","setInternalAlignment","ContextMenuAlignment","TopLeft","isContentShown","setIsContentShown","portal","setPortal","uuid","useUuid","contextMenuContentRef","useRef","contextMenuRef","handleHide","useCallback","handleShow","isMobile","isTablet","chayns","env","buttonType","selection","dialog","select","buttons","list","map","_ref2","index","text","name","value","icon","type","onClick","current","rootElement","querySelector","height","childrenHeight","width","childrenWidth","getBoundingClientRect","BottomRight","TopRight","BottomLeft","handleClick","event","preventDefault","stopPropagation","handleDocumentClick","contains","target","useImperativeHandle","hide","show","useEffect","addEventListener","window","removeEventListener","createPortal","AnimatePresence","initial","key","Fragment","StyledContextMenu","className","displayName","_default","exports"],"sources":["../../../src/components/context-menu/ContextMenu.tsx"],"sourcesContent":["import { AnimatePresence } from 'framer-motion';\nimport React, {\n forwardRef,\n MouseEvent,\n MouseEventHandler,\n ReactNode,\n ReactPortal,\n useCallback,\n useEffect,\n useImperativeHandle,\n useRef,\n useState,\n} from 'react';\nimport { createPortal } from 'react-dom';\nimport { useUuid } from '../../hooks/uuid';\nimport Icon from '../icon/Icon';\nimport { ContextMenuAlignment } from './constants/alignment';\nimport ContextMenuContent from './context-menu-content/ContextMenuContent';\nimport { StyledContextMenu } from './ContextMenu.styles';\n\nexport type ContextMenuCoordinates = {\n x: number;\n y: number;\n};\n\nexport type ContextMenuItem = {\n icons: string[];\n key: string;\n onClick: (event?: MouseEvent<HTMLDivElement>) => Promise<void> | void;\n text: string;\n};\n\nexport type ContextMenuRef = {\n hide: VoidFunction;\n show: VoidFunction;\n};\n\ntype ContextMenuProps = {\n /**\n * Optional custom alignment used instead of calculating it using the\n * alignment within the page. The available alignment can be taken from the\n * ContextMenuAlignment enum.\n */\n alignment?: ContextMenuAlignment;\n /**\n * The element over which the content of the `ContextMenu` should be displayed.\n */\n children?: ReactNode;\n /**\n * The element where the content of the `ContextMenu` should be rendered via React Portal.\n */\n container?: Element;\n /**\n * Optional own coordinates to be used instead of calculating the alignment\n * based on the alignment of the children.\n */\n coordinates?: ContextMenuCoordinates;\n /**\n * The items that will be displayed in the content of the `ContextMenu`.\n */\n items: ContextMenuItem[];\n /**\n * Function to be executed when the content of the Context menu has been hidden.\n */\n onHide?: VoidFunction;\n /**\n * Function to be executed when the content of the Context menu has been shown.\n */\n onShow?: VoidFunction;\n};\n\nconst ContextMenu = forwardRef<ContextMenuRef, ContextMenuProps>(\n (\n {\n alignment,\n children = <Icon icons={['ts-ellipsis_v']} />,\n container = document.body,\n coordinates,\n items,\n onHide,\n onShow,\n },\n ref\n ) => {\n const [internalCoordinates, setInternalCoordinates] = useState<ContextMenuCoordinates>({\n x: 0,\n y: 0,\n });\n const [internalAlignment, setInternalAlignment] = useState<ContextMenuAlignment>(\n ContextMenuAlignment.TopLeft\n );\n const [isContentShown, setIsContentShown] = useState(false);\n const [portal, setPortal] = useState<ReactPortal>();\n\n const uuid = useUuid();\n\n // ToDo: Replace with hook if new chayns api is ready\n const contextMenuContentRef = useRef<HTMLDivElement>(null);\n const contextMenuRef = useRef<HTMLSpanElement>(null);\n\n const handleHide = useCallback(() => {\n setIsContentShown(false);\n }, []);\n\n const handleShow = useCallback(async () => {\n const { isMobile, isTablet } = chayns.env;\n\n if (isMobile || isTablet) {\n // ToDo: Replace with new api function if new api is ready\n const { buttonType, selection } = await chayns.dialog.select({\n buttons: [],\n list: items.map(({ icons, text }, index) => ({\n name: text,\n value: index,\n icon: icons[0],\n })),\n type: 2,\n });\n\n if (buttonType === 1 && typeof selection[0]?.value === 'number') {\n void items[selection[0].value]?.onClick();\n }\n } else if (contextMenuRef.current) {\n const rootElement = document.querySelector('.tapp') || document.body;\n\n const {\n x,\n y,\n height: childrenHeight,\n width: childrenWidth,\n } = contextMenuRef.current.getBoundingClientRect();\n\n setInternalCoordinates({ x: x + childrenWidth / 2, y: y + childrenHeight / 2 });\n\n const { height, width } = rootElement.getBoundingClientRect();\n\n if (x < width / 2) {\n if (y < height / 2) {\n setInternalAlignment(ContextMenuAlignment.BottomRight);\n } else {\n setInternalAlignment(ContextMenuAlignment.TopRight);\n }\n } else if (y < height / 2) {\n setInternalAlignment(ContextMenuAlignment.BottomLeft);\n } else {\n setInternalAlignment(ContextMenuAlignment.TopLeft);\n }\n\n setIsContentShown(true);\n }\n }, [items]);\n\n const handleClick = useCallback<MouseEventHandler<HTMLDivElement>>(\n (event) => {\n event.preventDefault();\n event.stopPropagation();\n\n void handleShow();\n },\n [handleShow]\n );\n\n const handleDocumentClick = useCallback<EventListener>(\n (event) => {\n if (!contextMenuContentRef.current?.contains(event.target as Node)) {\n event.preventDefault();\n event.stopPropagation();\n }\n\n handleHide();\n },\n [handleHide]\n );\n\n useImperativeHandle(\n ref,\n () => ({\n hide: handleHide,\n show: handleShow,\n }),\n [handleHide, handleShow]\n );\n\n useEffect(() => {\n if (isContentShown) {\n document.addEventListener('click', handleDocumentClick, true);\n window.addEventListener('blur', handleHide);\n\n if (typeof onShow === 'function') {\n onShow();\n }\n } else if (typeof onHide === 'function') {\n onHide();\n }\n\n return () => {\n document.removeEventListener('click', handleDocumentClick, true);\n window.removeEventListener('blur', handleHide);\n };\n }, [handleDocumentClick, handleHide, isContentShown, onHide, onShow]);\n\n useEffect(() => {\n setPortal(() =>\n createPortal(\n <AnimatePresence initial={false}>\n {isContentShown && (\n <ContextMenuContent\n coordinates={coordinates ?? internalCoordinates}\n items={items}\n key={`contextMenu_${uuid}`}\n alignment={alignment ?? internalAlignment}\n ref={contextMenuContentRef}\n />\n )}\n </AnimatePresence>,\n container\n )\n );\n }, [\n alignment,\n container,\n coordinates,\n internalAlignment,\n internalCoordinates,\n isContentShown,\n items,\n uuid,\n ]);\n\n return (\n <>\n <StyledContextMenu\n className=\"beta-chayns-context-menu\"\n onClick={handleClick}\n ref={contextMenuRef}\n >\n {children}\n </StyledContextMenu>\n {portal}\n </>\n );\n }\n);\n\nContextMenu.displayName = 'ContextMenu';\n\nexport default ContextMenu;\n"],"mappings":";;;;;;AAAA,IAAAA,aAAA,GAAAC,OAAA;AACA,IAAAC,MAAA,GAAAC,uBAAA,CAAAF,OAAA;AAYA,IAAAG,SAAA,GAAAH,OAAA;AACA,IAAAI,KAAA,GAAAJ,OAAA;AACA,IAAAK,KAAA,GAAAC,sBAAA,CAAAN,OAAA;AACA,IAAAO,UAAA,GAAAP,OAAA;AACA,IAAAQ,mBAAA,GAAAF,sBAAA,CAAAN,OAAA;AACA,IAAAS,YAAA,GAAAT,OAAA;AAAyD,SAAAM,uBAAAI,GAAA,WAAAA,GAAA,IAAAA,GAAA,CAAAC,UAAA,GAAAD,GAAA,KAAAE,OAAA,EAAAF,GAAA;AAAA,SAAAG,yBAAAC,CAAA,6BAAAC,OAAA,mBAAAC,CAAA,OAAAD,OAAA,IAAAE,CAAA,OAAAF,OAAA,YAAAF,wBAAA,YAAAA,CAAAC,CAAA,WAAAA,CAAA,GAAAG,CAAA,GAAAD,CAAA,KAAAF,CAAA;AAAA,SAAAZ,wBAAAY,CAAA,EAAAE,CAAA,SAAAA,CAAA,IAAAF,CAAA,IAAAA,CAAA,CAAAH,UAAA,SAAAG,CAAA,eAAAA,CAAA,uBAAAA,CAAA,yBAAAA,CAAA,WAAAF,OAAA,EAAAE,CAAA,QAAAG,CAAA,GAAAJ,wBAAA,CAAAG,CAAA,OAAAC,CAAA,IAAAA,CAAA,CAAAC,GAAA,CAAAJ,CAAA,UAAAG,CAAA,CAAAE,GAAA,CAAAL,CAAA,OAAAM,CAAA,KAAAC,SAAA,UAAAC,CAAA,GAAAC,MAAA,CAAAC,cAAA,IAAAD,MAAA,CAAAE,wBAAA,WAAAC,CAAA,IAAAZ,CAAA,oBAAAY,CAAA,IAAAH,MAAA,CAAAI,SAAA,CAAAC,cAAA,CAAAC,IAAA,CAAAf,CAAA,EAAAY,CAAA,SAAAI,CAAA,GAAAR,CAAA,GAAAC,MAAA,CAAAE,wBAAA,CAAAX,CAAA,EAAAY,CAAA,UAAAI,CAAA,KAAAA,CAAA,CAAAX,GAAA,IAAAW,CAAA,CAAAC,GAAA,IAAAR,MAAA,CAAAC,cAAA,CAAAJ,CAAA,EAAAM,CAAA,EAAAI,CAAA,IAAAV,CAAA,CAAAM,CAAA,IAAAZ,CAAA,CAAAY,CAAA,YAAAN,CAAA,CAAAR,OAAA,GAAAE,CAAA,EAAAG,CAAA,IAAAA,CAAA,CAAAc,GAAA,CAAAjB,CAAA,EAAAM,CAAA,GAAAA,CAAA;AAqDzD,MAAMY,WAAW,gBAAG,IAAAC,iBAAU,EAC1B,CAAAC,IAAA,EAUIC,GAAG,KACF;EAAA,IAVD;IACIC,SAAS;IACTC,QAAQ,gBAAGpC,MAAA,CAAAW,OAAA,CAAA0B,aAAA,CAACjC,KAAA,CAAAO,OAAI;MAAC2B,KAAK,EAAE,CAAC,eAAe;IAAE,CAAE,CAAC;IAC7CC,SAAS,GAAGC,QAAQ,CAACC,IAAI;IACzBC,WAAW;IACXC,KAAK;IACLC,MAAM;IACNC;EACJ,CAAC,GAAAZ,IAAA;EAGD,MAAM,CAACa,mBAAmB,EAAEC,sBAAsB,CAAC,GAAG,IAAAC,eAAQ,EAAyB;IACnFC,CAAC,EAAE,CAAC;IACJC,CAAC,EAAE;EACP,CAAC,CAAC;EACF,MAAM,CAACC,iBAAiB,EAAEC,oBAAoB,CAAC,GAAG,IAAAJ,eAAQ,EACtDK,+BAAoB,CAACC,OACzB,CAAC;EACD,MAAM,CAACC,cAAc,EAAEC,iBAAiB,CAAC,GAAG,IAAAR,eAAQ,EAAC,KAAK,CAAC;EAC3D,MAAM,CAACS,MAAM,EAAEC,SAAS,CAAC,GAAG,IAAAV,eAAQ,EAAc,CAAC;EAEnD,MAAMW,IAAI,GAAG,IAAAC,aAAO,EAAC,CAAC;;EAEtB;EACA,MAAMC,qBAAqB,GAAG,IAAAC,aAAM,EAAiB,IAAI,CAAC;EAC1D,MAAMC,cAAc,GAAG,IAAAD,aAAM,EAAkB,IAAI,CAAC;EAEpD,MAAME,UAAU,GAAG,IAAAC,kBAAW,EAAC,MAAM;IACjCT,iBAAiB,CAAC,KAAK,CAAC;EAC5B,CAAC,EAAE,EAAE,CAAC;EAEN,MAAMU,UAAU,GAAG,IAAAD,kBAAW,EAAC,YAAY;IACvC,MAAM;MAAEE,QAAQ;MAAEC;IAAS,CAAC,GAAGC,MAAM,CAACC,GAAG;IAEzC,IAAIH,QAAQ,IAAIC,QAAQ,EAAE;MACtB;MACA,MAAM;QAAEG,UAAU;QAAEC;MAAU,CAAC,GAAG,MAAMH,MAAM,CAACI,MAAM,CAACC,MAAM,CAAC;QACzDC,OAAO,EAAE,EAAE;QACXC,IAAI,EAAEjC,KAAK,CAACkC,GAAG,CAAC,CAAAC,KAAA,EAAkBC,KAAK;UAAA,IAAtB;YAAEzC,KAAK;YAAE0C;UAAK,CAAC,GAAAF,KAAA;UAAA,OAAa;YACzCG,IAAI,EAAED,IAAI;YACVE,KAAK,EAAEH,KAAK;YACZI,IAAI,EAAE7C,KAAK,CAAC,CAAC;UACjB,CAAC;QAAA,CAAC,CAAC;QACH8C,IAAI,EAAE;MACV,CAAC,CAAC;MAEF,IAAIb,UAAU,KAAK,CAAC,IAAI,OAAOC,SAAS,CAAC,CAAC,CAAC,EAAEU,KAAK,KAAK,QAAQ,EAAE;QAC7D,KAAKvC,KAAK,CAAC6B,SAAS,CAAC,CAAC,CAAC,CAACU,KAAK,CAAC,EAAEG,OAAO,CAAC,CAAC;MAC7C;IACJ,CAAC,MAAM,IAAItB,cAAc,CAACuB,OAAO,EAAE;MAC/B,MAAMC,WAAW,GAAG/C,QAAQ,CAACgD,aAAa,CAAC,OAAO,CAAC,IAAIhD,QAAQ,CAACC,IAAI;MAEpE,MAAM;QACFQ,CAAC;QACDC,CAAC;QACDuC,MAAM,EAAEC,cAAc;QACtBC,KAAK,EAAEC;MACX,CAAC,GAAG7B,cAAc,CAACuB,OAAO,CAACO,qBAAqB,CAAC,CAAC;MAElD9C,sBAAsB,CAAC;QAAEE,CAAC,EAAEA,CAAC,GAAG2C,aAAa,GAAG,CAAC;QAAE1C,CAAC,EAAEA,CAAC,GAAGwC,cAAc,GAAG;MAAE,CAAC,CAAC;MAE/E,MAAM;QAAED,MAAM;QAAEE;MAAM,CAAC,GAAGJ,WAAW,CAACM,qBAAqB,CAAC,CAAC;MAE7D,IAAI5C,CAAC,GAAG0C,KAAK,GAAG,CAAC,EAAE;QACf,IAAIzC,CAAC,GAAGuC,MAAM,GAAG,CAAC,EAAE;UAChBrC,oBAAoB,CAACC,+BAAoB,CAACyC,WAAW,CAAC;QAC1D,CAAC,MAAM;UACH1C,oBAAoB,CAACC,+BAAoB,CAAC0C,QAAQ,CAAC;QACvD;MACJ,CAAC,MAAM,IAAI7C,CAAC,GAAGuC,MAAM,GAAG,CAAC,EAAE;QACvBrC,oBAAoB,CAACC,+BAAoB,CAAC2C,UAAU,CAAC;MACzD,CAAC,MAAM;QACH5C,oBAAoB,CAACC,+BAAoB,CAACC,OAAO,CAAC;MACtD;MAEAE,iBAAiB,CAAC,IAAI,CAAC;IAC3B;EACJ,CAAC,EAAE,CAACb,KAAK,CAAC,CAAC;EAEX,MAAMsD,WAAW,GAAG,IAAAhC,kBAAW,EAC1BiC,KAAK,IAAK;IACPA,KAAK,CAACC,cAAc,CAAC,CAAC;IACtBD,KAAK,CAACE,eAAe,CAAC,CAAC;IAEvB,KAAKlC,UAAU,CAAC,CAAC;EACrB,CAAC,EACD,CAACA,UAAU,CACf,CAAC;EAED,MAAMmC,mBAAmB,GAAG,IAAApC,kBAAW,EAClCiC,KAAK,IAAK;IACP,IAAI,CAACrC,qBAAqB,CAACyB,OAAO,EAAEgB,QAAQ,CAACJ,KAAK,CAACK,MAAc,CAAC,EAAE;MAChEL,KAAK,CAACC,cAAc,CAAC,CAAC;MACtBD,KAAK,CAACE,eAAe,CAAC,CAAC;IAC3B;IAEApC,UAAU,CAAC,CAAC;EAChB,CAAC,EACD,CAACA,UAAU,CACf,CAAC;EAED,IAAAwC,0BAAmB,EACftE,GAAG,EACH,OAAO;IACHuE,IAAI,EAAEzC,UAAU;IAChB0C,IAAI,EAAExC;EACV,CAAC,CAAC,EACF,CAACF,UAAU,EAAEE,UAAU,CAC3B,CAAC;EAED,IAAAyC,gBAAS,EAAC,MAAM;IACZ,IAAIpD,cAAc,EAAE;MAChBf,QAAQ,CAACoE,gBAAgB,CAAC,OAAO,EAAEP,mBAAmB,EAAE,IAAI,CAAC;MAC7DQ,MAAM,CAACD,gBAAgB,CAAC,MAAM,EAAE5C,UAAU,CAAC;MAE3C,IAAI,OAAOnB,MAAM,KAAK,UAAU,EAAE;QAC9BA,MAAM,CAAC,CAAC;MACZ;IACJ,CAAC,MAAM,IAAI,OAAOD,MAAM,KAAK,UAAU,EAAE;MACrCA,MAAM,CAAC,CAAC;IACZ;IAEA,OAAO,MAAM;MACTJ,QAAQ,CAACsE,mBAAmB,CAAC,OAAO,EAAET,mBAAmB,EAAE,IAAI,CAAC;MAChEQ,MAAM,CAACC,mBAAmB,CAAC,MAAM,EAAE9C,UAAU,CAAC;IAClD,CAAC;EACL,CAAC,EAAE,CAACqC,mBAAmB,EAAErC,UAAU,EAAET,cAAc,EAAEX,MAAM,EAAEC,MAAM,CAAC,CAAC;EAErE,IAAA8D,gBAAS,EAAC,MAAM;IACZjD,SAAS,CAAC,mBACN,IAAAqD,sBAAY,gBACR/G,MAAA,CAAAW,OAAA,CAAA0B,aAAA,CAACvC,aAAA,CAAAkH,eAAe;MAACC,OAAO,EAAE;IAAM,GAC3B1D,cAAc,iBACXvD,MAAA,CAAAW,OAAA,CAAA0B,aAAA,CAAC9B,mBAAA,CAAAI,OAAkB;MACf+B,WAAW,EAAEA,WAAW,IAAII,mBAAoB;MAChDH,KAAK,EAAEA,KAAM;MACbuE,GAAG,EAAG,eAAcvD,IAAK,EAAE;MAC3BxB,SAAS,EAAEA,SAAS,IAAIgB,iBAAkB;MAC1CjB,GAAG,EAAE2B;IAAsB,CAC9B,CAEQ,CAAC,EAClBtB,SACJ,CACJ,CAAC;EACL,CAAC,EAAE,CACCJ,SAAS,EACTI,SAAS,EACTG,WAAW,EACXS,iBAAiB,EACjBL,mBAAmB,EACnBS,cAAc,EACdZ,KAAK,EACLgB,IAAI,CACP,CAAC;EAEF,oBACI3D,MAAA,CAAAW,OAAA,CAAA0B,aAAA,CAAArC,MAAA,CAAAW,OAAA,CAAAwG,QAAA,qBACInH,MAAA,CAAAW,OAAA,CAAA0B,aAAA,CAAC7B,YAAA,CAAA4G,iBAAiB;IACdC,SAAS,EAAC,0BAA0B;IACpChC,OAAO,EAAEY,WAAY;IACrB/D,GAAG,EAAE6B;EAAe,GAEnB3B,QACc,CAAC,EACnBqB,MACH,CAAC;AAEX,CACJ,CAAC;AAED1B,WAAW,CAACuF,WAAW,GAAG,aAAa;AAAC,IAAAC,QAAA,GAAAC,OAAA,CAAA7G,OAAA,GAEzBoB,WAAW"}
|
|
1
|
+
{"version":3,"file":"ContextMenu.js","names":["_framerMotion","require","_react","_interopRequireWildcard","_reactDom","_uuid","_contextMenu","_ContextMenuContent","_interopRequireDefault","_ContextMenu","_Icon","obj","__esModule","default","_getRequireWildcardCache","e","WeakMap","r","t","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","prototype","hasOwnProperty","call","i","set","ContextMenu","forwardRef","_ref","ref","alignment","children","createElement","icons","container","document","body","coordinates","items","onHide","onShow","internalCoordinates","setInternalCoordinates","useState","x","y","internalAlignment","setInternalAlignment","ContextMenuAlignment","TopLeft","isContentShown","setIsContentShown","portal","setPortal","uuid","useUuid","contextMenuContentRef","useRef","contextMenuRef","handleHide","useCallback","handleShow","isMobile","isTablet","chayns","env","buttonType","selection","dialog","select","buttons","list","map","_ref2","index","text","name","value","icon","type","onClick","current","rootElement","querySelector","height","childrenHeight","width","childrenWidth","getBoundingClientRect","BottomRight","TopRight","BottomLeft","handleClick","event","preventDefault","stopPropagation","handleDocumentClick","contains","target","useImperativeHandle","hide","show","useEffect","addEventListener","window","removeEventListener","createPortal","AnimatePresence","initial","key","Fragment","StyledContextMenu","className","displayName","_default","exports"],"sources":["../../../src/components/context-menu/ContextMenu.tsx"],"sourcesContent":["import { AnimatePresence } from 'framer-motion';\nimport React, {\n forwardRef,\n MouseEvent,\n MouseEventHandler,\n ReactNode,\n ReactPortal,\n useCallback,\n useEffect,\n useImperativeHandle,\n useRef,\n useState,\n} from 'react';\nimport { createPortal } from 'react-dom';\nimport { useUuid } from '../../hooks/uuid';\nimport { ContextMenuAlignment } from '../../types/contextMenu';\nimport ContextMenuContent from './context-menu-content/ContextMenuContent';\nimport { StyledContextMenu } from './ContextMenu.styles';\nimport Icon from '../icon/Icon';\n\nexport type ContextMenuCoordinates = {\n x: number;\n y: number;\n};\n\nexport type ContextMenuItem = {\n icons: string[];\n key: string;\n onClick: (event?: MouseEvent<HTMLDivElement>) => Promise<void> | void;\n text: string;\n};\n\nexport type ContextMenuRef = {\n hide: VoidFunction;\n show: VoidFunction;\n};\n\ntype ContextMenuProps = {\n /**\n * Optional custom alignment used instead of calculating it using the\n * alignment within the page. The available alignment can be taken from the\n * ContextMenuAlignment enum.\n */\n alignment?: ContextMenuAlignment;\n /**\n * The element over which the content of the `ContextMenu` should be displayed.\n */\n children?: ReactNode;\n /**\n * The element where the content of the `ContextMenu` should be rendered via React Portal.\n */\n container?: Element;\n /**\n * Optional own coordinates to be used instead of calculating the alignment\n * based on the alignment of the children.\n */\n coordinates?: ContextMenuCoordinates;\n /**\n * The items that will be displayed in the content of the `ContextMenu`.\n */\n items: ContextMenuItem[];\n /**\n * Function to be executed when the content of the Context menu has been hidden.\n */\n onHide?: VoidFunction;\n /**\n * Function to be executed when the content of the Context menu has been shown.\n */\n onShow?: VoidFunction;\n};\n\nconst ContextMenu = forwardRef<ContextMenuRef, ContextMenuProps>(\n (\n {\n alignment,\n children = <Icon icons={['ts-ellipsis_v']} />,\n container = document.body,\n coordinates,\n items,\n onHide,\n onShow,\n },\n ref,\n ) => {\n const [internalCoordinates, setInternalCoordinates] = useState<ContextMenuCoordinates>({\n x: 0,\n y: 0,\n });\n const [internalAlignment, setInternalAlignment] = useState<ContextMenuAlignment>(\n ContextMenuAlignment.TopLeft,\n );\n const [isContentShown, setIsContentShown] = useState(false);\n const [portal, setPortal] = useState<ReactPortal>();\n\n const uuid = useUuid();\n\n // ToDo: Replace with hook if new chayns api is ready\n const contextMenuContentRef = useRef<HTMLDivElement>(null);\n const contextMenuRef = useRef<HTMLSpanElement>(null);\n\n const handleHide = useCallback(() => {\n setIsContentShown(false);\n }, []);\n\n const handleShow = useCallback(async () => {\n const { isMobile, isTablet } = chayns.env;\n\n if (isMobile || isTablet) {\n // ToDo: Replace with new api function if new api is ready\n const { buttonType, selection } = await chayns.dialog.select({\n buttons: [],\n list: items.map(({ icons, text }, index) => ({\n name: text,\n value: index,\n icon: icons[0],\n })),\n type: 2,\n });\n\n if (buttonType === 1 && typeof selection[0]?.value === 'number') {\n void items[selection[0].value]?.onClick();\n }\n } else if (contextMenuRef.current) {\n const rootElement = document.querySelector('.tapp') || document.body;\n\n const {\n x,\n y,\n height: childrenHeight,\n width: childrenWidth,\n } = contextMenuRef.current.getBoundingClientRect();\n\n setInternalCoordinates({ x: x + childrenWidth / 2, y: y + childrenHeight / 2 });\n\n const { height, width } = rootElement.getBoundingClientRect();\n\n if (x < width / 2) {\n if (y < height / 2) {\n setInternalAlignment(ContextMenuAlignment.BottomRight);\n } else {\n setInternalAlignment(ContextMenuAlignment.TopRight);\n }\n } else if (y < height / 2) {\n setInternalAlignment(ContextMenuAlignment.BottomLeft);\n } else {\n setInternalAlignment(ContextMenuAlignment.TopLeft);\n }\n\n setIsContentShown(true);\n }\n }, [items]);\n\n const handleClick = useCallback<MouseEventHandler<HTMLDivElement>>(\n (event) => {\n event.preventDefault();\n event.stopPropagation();\n\n void handleShow();\n },\n [handleShow],\n );\n\n const handleDocumentClick = useCallback<EventListener>(\n (event) => {\n if (!contextMenuContentRef.current?.contains(event.target as Node)) {\n event.preventDefault();\n event.stopPropagation();\n }\n\n handleHide();\n },\n [handleHide],\n );\n\n useImperativeHandle(\n ref,\n () => ({\n hide: handleHide,\n show: handleShow,\n }),\n [handleHide, handleShow],\n );\n\n useEffect(() => {\n if (isContentShown) {\n document.addEventListener('click', handleDocumentClick, true);\n window.addEventListener('blur', handleHide);\n\n if (typeof onShow === 'function') {\n onShow();\n }\n } else if (typeof onHide === 'function') {\n onHide();\n }\n\n return () => {\n document.removeEventListener('click', handleDocumentClick, true);\n window.removeEventListener('blur', handleHide);\n };\n }, [handleDocumentClick, handleHide, isContentShown, onHide, onShow]);\n\n useEffect(() => {\n setPortal(() =>\n createPortal(\n <AnimatePresence initial={false}>\n {isContentShown && (\n <ContextMenuContent\n coordinates={coordinates ?? internalCoordinates}\n items={items}\n key={`contextMenu_${uuid}`}\n alignment={alignment ?? internalAlignment}\n ref={contextMenuContentRef}\n />\n )}\n </AnimatePresence>,\n container,\n ),\n );\n }, [\n alignment,\n container,\n coordinates,\n internalAlignment,\n internalCoordinates,\n isContentShown,\n items,\n uuid,\n ]);\n\n return (\n <>\n <StyledContextMenu\n className=\"beta-chayns-context-menu\"\n onClick={handleClick}\n ref={contextMenuRef}\n >\n {children}\n </StyledContextMenu>\n {portal}\n </>\n );\n },\n);\n\nContextMenu.displayName = 'ContextMenu';\n\nexport default ContextMenu;\n"],"mappings":"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"}
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
|
-
import { ContextMenuAlignment } from '
|
|
2
|
+
import { ContextMenuAlignment } from '../../../types/contextMenu';
|
|
3
3
|
import type { ContextMenuCoordinates, ContextMenuItem } from '../ContextMenu';
|
|
4
4
|
type ContextMenuContentProps = {
|
|
5
5
|
alignment: ContextMenuAlignment;
|