mirror of
https://github.com/CommunityOx/ox_lib.git
synced 2026-08-16 22:46:03 +01:00
refactor(web): scale fade transition
This commit is contained in:
Luke
@@ -25,7 +25,7 @@
|
||||
"@vitejs/plugin-react": "^1.3.2",
|
||||
"dayjs": "^1.11.7",
|
||||
"focus-trap-react": "^9.0.2",
|
||||
"framer-motion": "^6.2.8",
|
||||
"framer-motion": "^8.0.2",
|
||||
"prettier": "^2.7.1",
|
||||
"react": "18.2.0",
|
||||
"react-dom": "18.2.0",
|
||||
|
||||
173
web/pnpm-lock.yaml
generated
173
web/pnpm-lock.yaml
generated
@@ -28,7 +28,7 @@ specifiers:
|
||||
cross-env: ^7.0.3
|
||||
dayjs: ^1.11.7
|
||||
focus-trap-react: ^9.0.2
|
||||
framer-motion: ^6.2.8
|
||||
framer-motion: ^8.0.2
|
||||
postcss: ^8.1.0
|
||||
prettier: ^2.7.1
|
||||
prop-types: ^15.8.1
|
||||
@@ -41,7 +41,7 @@ specifiers:
|
||||
web-vitals: ^2.1.4
|
||||
|
||||
dependencies:
|
||||
'@chakra-ui/react': 2.3.6_i4qi6vz53hwxibic4snumhcfqy
|
||||
'@chakra-ui/react': 2.3.6_lmf4e2bglwbz7zrp52glh3vtb4
|
||||
'@emotion/react': 11.10.5_tazjupc4o35ph7b3pedstd2nsy
|
||||
'@emotion/styled': 11.8.1_u4t5zvghn4tibzhpavspmf3vfe
|
||||
'@fortawesome/fontawesome-svg-core': 6.1.1
|
||||
@@ -62,7 +62,7 @@ dependencies:
|
||||
'@vitejs/plugin-react': 1.3.2
|
||||
dayjs: 1.11.7
|
||||
focus-trap-react: 9.0.2_v2m5e27vhdewzwhryxwfaorcca
|
||||
framer-motion: 6.2.8_biqbaboplfbrettd7655fr4n2y
|
||||
framer-motion: 8.0.2_biqbaboplfbrettd7655fr4n2y
|
||||
prettier: 2.7.1
|
||||
react: 18.2.0
|
||||
react-dom: 18.2.0_react@18.2.0
|
||||
@@ -607,7 +607,7 @@ packages:
|
||||
'@babel/helper-validator-identifier': 7.18.6
|
||||
to-fast-properties: 2.0.0
|
||||
|
||||
/@chakra-ui/accordion/2.1.2_kmlicq6bwxmlcznv6sr6tuc4dy:
|
||||
/@chakra-ui/accordion/2.1.2_r5w2a5xvuufbpzdplx7rhu5d34:
|
||||
resolution: {integrity: sha512-Jf7A6I0eIGk34zO5TiTW8orJOFQb5A/D1ekNYbaukNccoUPKJg/xdQ/b00oIR6LT93nJxggkoP/vszfmmTHuFg==}
|
||||
peerDependencies:
|
||||
'@chakra-ui/system': '>=2.0.0'
|
||||
@@ -620,8 +620,8 @@ packages:
|
||||
'@chakra-ui/react-use-controllable-state': 2.0.5_react@18.2.0
|
||||
'@chakra-ui/react-use-merge-refs': 2.0.4_react@18.2.0
|
||||
'@chakra-ui/system': 2.3.0_czahumb22fzwzcv7wksbqto7oq
|
||||
'@chakra-ui/transition': 2.0.11_4tlgiwfhwimjjb62viejpa3zx4
|
||||
framer-motion: 6.2.8_biqbaboplfbrettd7655fr4n2y
|
||||
'@chakra-ui/transition': 2.0.11_mpyaigbqivyzkdvk6rklhdk7tm
|
||||
framer-motion: 8.0.2_biqbaboplfbrettd7655fr4n2y
|
||||
react: 18.2.0
|
||||
dev: false
|
||||
|
||||
@@ -684,7 +684,7 @@ packages:
|
||||
react: 18.2.0
|
||||
dev: false
|
||||
|
||||
/@chakra-ui/checkbox/2.2.2_kmlicq6bwxmlcznv6sr6tuc4dy:
|
||||
/@chakra-ui/checkbox/2.2.2_r5w2a5xvuufbpzdplx7rhu5d34:
|
||||
resolution: {integrity: sha512-Y6Zbkkk5VNoe0RzqU6F+rKlFVPlubz1KIgYcb7CCNHGOM97dLtRm78eAvJ+7Xmpitr+7zZ4hJLLjfAz+e1X7rA==}
|
||||
peerDependencies:
|
||||
'@chakra-ui/system': '>=2.0.0'
|
||||
@@ -702,7 +702,7 @@ packages:
|
||||
'@chakra-ui/system': 2.3.0_czahumb22fzwzcv7wksbqto7oq
|
||||
'@chakra-ui/visually-hidden': 2.0.11_e5d2utcogkjxxdp5h2rcoxuz2u
|
||||
'@zag-js/focus-visible': 0.1.0
|
||||
framer-motion: 6.2.8_biqbaboplfbrettd7655fr4n2y
|
||||
framer-motion: 8.0.2_biqbaboplfbrettd7655fr4n2y
|
||||
react: 18.2.0
|
||||
dev: false
|
||||
|
||||
@@ -917,7 +917,7 @@ packages:
|
||||
react: 18.2.0
|
||||
dev: false
|
||||
|
||||
/@chakra-ui/menu/2.1.2_kmlicq6bwxmlcznv6sr6tuc4dy:
|
||||
/@chakra-ui/menu/2.1.2_r5w2a5xvuufbpzdplx7rhu5d34:
|
||||
resolution: {integrity: sha512-6Z7ecXjp6BtZ1ExbFggfxsAj1hwtcathXekmCTxHpXOD+BdjAC/13+oLclwXeuBO85aoTmQrQ2ovfTkO31bzRQ==}
|
||||
peerDependencies:
|
||||
'@chakra-ui/system': '>=2.0.0'
|
||||
@@ -938,12 +938,12 @@ packages:
|
||||
'@chakra-ui/react-use-outside-click': 2.0.4_react@18.2.0
|
||||
'@chakra-ui/react-use-update-effect': 2.0.4_react@18.2.0
|
||||
'@chakra-ui/system': 2.3.0_czahumb22fzwzcv7wksbqto7oq
|
||||
'@chakra-ui/transition': 2.0.11_4tlgiwfhwimjjb62viejpa3zx4
|
||||
framer-motion: 6.2.8_biqbaboplfbrettd7655fr4n2y
|
||||
'@chakra-ui/transition': 2.0.11_mpyaigbqivyzkdvk6rklhdk7tm
|
||||
framer-motion: 8.0.2_biqbaboplfbrettd7655fr4n2y
|
||||
react: 18.2.0
|
||||
dev: false
|
||||
|
||||
/@chakra-ui/modal/2.2.2_fxic6zwo3wicn63jm64z3m2h6e:
|
||||
/@chakra-ui/modal/2.2.2_eedpjql22igyjxizmegfp4w7aq:
|
||||
resolution: {integrity: sha512-cCYuqLZO4QqFUI1H+uEqixDk6UiCP3yC+sxkhFTXHIApSG9Z44v5np7BVTd6LKdmAN8pAWcc8Oxf14RvD6LWLw==}
|
||||
peerDependencies:
|
||||
'@chakra-ui/system': '>=2.0.0'
|
||||
@@ -958,9 +958,9 @@ packages:
|
||||
'@chakra-ui/react-types': 2.0.3_react@18.2.0
|
||||
'@chakra-ui/react-use-merge-refs': 2.0.4_react@18.2.0
|
||||
'@chakra-ui/system': 2.3.0_czahumb22fzwzcv7wksbqto7oq
|
||||
'@chakra-ui/transition': 2.0.11_4tlgiwfhwimjjb62viejpa3zx4
|
||||
'@chakra-ui/transition': 2.0.11_mpyaigbqivyzkdvk6rklhdk7tm
|
||||
aria-hidden: 1.1.3
|
||||
framer-motion: 6.2.8_biqbaboplfbrettd7655fr4n2y
|
||||
framer-motion: 8.0.2_biqbaboplfbrettd7655fr4n2y
|
||||
react: 18.2.0
|
||||
react-dom: 18.2.0_react@18.2.0
|
||||
react-remove-scroll: 2.5.5_bbvjflvjoibwhtpmedigb26h6y
|
||||
@@ -1012,7 +1012,7 @@ packages:
|
||||
react: 18.2.0
|
||||
dev: false
|
||||
|
||||
/@chakra-ui/popover/2.1.1_kmlicq6bwxmlcznv6sr6tuc4dy:
|
||||
/@chakra-ui/popover/2.1.1_r5w2a5xvuufbpzdplx7rhu5d34:
|
||||
resolution: {integrity: sha512-j09NsesfT+eaYITkITYJXDlRcPoOeQUM80neJZKOBgul2iHkVsEoii8dwS5Ip5ONeu4ane1b6zEOlYvYj2SrkA==}
|
||||
peerDependencies:
|
||||
'@chakra-ui/system': '>=2.0.0'
|
||||
@@ -1030,7 +1030,7 @@ packages:
|
||||
'@chakra-ui/react-use-focus-on-pointer-down': 2.0.3_react@18.2.0
|
||||
'@chakra-ui/react-use-merge-refs': 2.0.4_react@18.2.0
|
||||
'@chakra-ui/system': 2.3.0_czahumb22fzwzcv7wksbqto7oq
|
||||
framer-motion: 6.2.8_biqbaboplfbrettd7655fr4n2y
|
||||
framer-motion: 8.0.2_biqbaboplfbrettd7655fr4n2y
|
||||
react: 18.2.0
|
||||
dev: false
|
||||
|
||||
@@ -1295,7 +1295,7 @@ packages:
|
||||
react: 18.2.0
|
||||
dev: false
|
||||
|
||||
/@chakra-ui/react/2.3.6_i4qi6vz53hwxibic4snumhcfqy:
|
||||
/@chakra-ui/react/2.3.6_lmf4e2bglwbz7zrp52glh3vtb4:
|
||||
resolution: {integrity: sha512-xo43UU+yMqRGHZLU4fSgzojeRl5stlIfT+GLbT9CUVEm0HMJCt2m8RsNPBvGOMzANdC+bzwSiOm+MNzQBi9IBQ==}
|
||||
peerDependencies:
|
||||
'@emotion/react': ^11.0.0
|
||||
@@ -1304,12 +1304,12 @@ packages:
|
||||
react: '>=18'
|
||||
react-dom: '>=18'
|
||||
dependencies:
|
||||
'@chakra-ui/accordion': 2.1.2_kmlicq6bwxmlcznv6sr6tuc4dy
|
||||
'@chakra-ui/accordion': 2.1.2_r5w2a5xvuufbpzdplx7rhu5d34
|
||||
'@chakra-ui/alert': 2.0.11_e5d2utcogkjxxdp5h2rcoxuz2u
|
||||
'@chakra-ui/avatar': 2.2.0_e5d2utcogkjxxdp5h2rcoxuz2u
|
||||
'@chakra-ui/breadcrumb': 2.1.0_e5d2utcogkjxxdp5h2rcoxuz2u
|
||||
'@chakra-ui/button': 2.0.11_e5d2utcogkjxxdp5h2rcoxuz2u
|
||||
'@chakra-ui/checkbox': 2.2.2_kmlicq6bwxmlcznv6sr6tuc4dy
|
||||
'@chakra-ui/checkbox': 2.2.2_r5w2a5xvuufbpzdplx7rhu5d34
|
||||
'@chakra-ui/close-button': 2.0.11_e5d2utcogkjxxdp5h2rcoxuz2u
|
||||
'@chakra-ui/control-box': 2.0.10_e5d2utcogkjxxdp5h2rcoxuz2u
|
||||
'@chakra-ui/counter': 2.0.10_react@18.2.0
|
||||
@@ -1323,11 +1323,11 @@ packages:
|
||||
'@chakra-ui/layout': 2.1.9_e5d2utcogkjxxdp5h2rcoxuz2u
|
||||
'@chakra-ui/live-region': 2.0.10_react@18.2.0
|
||||
'@chakra-ui/media-query': 3.2.7_e5d2utcogkjxxdp5h2rcoxuz2u
|
||||
'@chakra-ui/menu': 2.1.2_kmlicq6bwxmlcznv6sr6tuc4dy
|
||||
'@chakra-ui/modal': 2.2.2_fxic6zwo3wicn63jm64z3m2h6e
|
||||
'@chakra-ui/menu': 2.1.2_r5w2a5xvuufbpzdplx7rhu5d34
|
||||
'@chakra-ui/modal': 2.2.2_eedpjql22igyjxizmegfp4w7aq
|
||||
'@chakra-ui/number-input': 2.0.12_e5d2utcogkjxxdp5h2rcoxuz2u
|
||||
'@chakra-ui/pin-input': 2.0.15_e5d2utcogkjxxdp5h2rcoxuz2u
|
||||
'@chakra-ui/popover': 2.1.1_kmlicq6bwxmlcznv6sr6tuc4dy
|
||||
'@chakra-ui/popover': 2.1.1_r5w2a5xvuufbpzdplx7rhu5d34
|
||||
'@chakra-ui/popper': 3.0.8_react@18.2.0
|
||||
'@chakra-ui/portal': 2.0.10_biqbaboplfbrettd7655fr4n2y
|
||||
'@chakra-ui/progress': 2.0.12_e5d2utcogkjxxdp5h2rcoxuz2u
|
||||
@@ -1340,7 +1340,7 @@ packages:
|
||||
'@chakra-ui/spinner': 2.0.10_e5d2utcogkjxxdp5h2rcoxuz2u
|
||||
'@chakra-ui/stat': 2.0.11_e5d2utcogkjxxdp5h2rcoxuz2u
|
||||
'@chakra-ui/styled-system': 2.3.4
|
||||
'@chakra-ui/switch': 2.0.14_kmlicq6bwxmlcznv6sr6tuc4dy
|
||||
'@chakra-ui/switch': 2.0.14_r5w2a5xvuufbpzdplx7rhu5d34
|
||||
'@chakra-ui/system': 2.3.0_czahumb22fzwzcv7wksbqto7oq
|
||||
'@chakra-ui/table': 2.0.11_e5d2utcogkjxxdp5h2rcoxuz2u
|
||||
'@chakra-ui/tabs': 2.1.4_e5d2utcogkjxxdp5h2rcoxuz2u
|
||||
@@ -1348,14 +1348,14 @@ packages:
|
||||
'@chakra-ui/textarea': 2.0.12_e5d2utcogkjxxdp5h2rcoxuz2u
|
||||
'@chakra-ui/theme': 2.1.14_kzevwk2hxgy6fnrjqv25jdmqp4
|
||||
'@chakra-ui/theme-utils': 2.0.1
|
||||
'@chakra-ui/toast': 4.0.0_i5i4bpvpaizvkddebpliczlnaa
|
||||
'@chakra-ui/tooltip': 2.2.0_i5i4bpvpaizvkddebpliczlnaa
|
||||
'@chakra-ui/transition': 2.0.11_4tlgiwfhwimjjb62viejpa3zx4
|
||||
'@chakra-ui/toast': 4.0.0_fh2kdmbk3zrge73f3a7mcxr4rm
|
||||
'@chakra-ui/tooltip': 2.2.0_fh2kdmbk3zrge73f3a7mcxr4rm
|
||||
'@chakra-ui/transition': 2.0.11_mpyaigbqivyzkdvk6rklhdk7tm
|
||||
'@chakra-ui/utils': 2.0.11
|
||||
'@chakra-ui/visually-hidden': 2.0.11_e5d2utcogkjxxdp5h2rcoxuz2u
|
||||
'@emotion/react': 11.10.5_tazjupc4o35ph7b3pedstd2nsy
|
||||
'@emotion/styled': 11.8.1_u4t5zvghn4tibzhpavspmf3vfe
|
||||
framer-motion: 6.2.8_biqbaboplfbrettd7655fr4n2y
|
||||
framer-motion: 8.0.2_biqbaboplfbrettd7655fr4n2y
|
||||
react: 18.2.0
|
||||
react-dom: 18.2.0_react@18.2.0
|
||||
transitivePeerDependencies:
|
||||
@@ -1438,16 +1438,16 @@ packages:
|
||||
lodash.mergewith: 4.6.2
|
||||
dev: false
|
||||
|
||||
/@chakra-ui/switch/2.0.14_kmlicq6bwxmlcznv6sr6tuc4dy:
|
||||
/@chakra-ui/switch/2.0.14_r5w2a5xvuufbpzdplx7rhu5d34:
|
||||
resolution: {integrity: sha512-6lzhCkJq7vbD3yGaorGLp0ZZU4ewdKwAu0e62qR8TfYZwbcbpkXbBKloIHbA2XKOduISzS2WYqjmoP6jSKIxrA==}
|
||||
peerDependencies:
|
||||
'@chakra-ui/system': '>=2.0.0'
|
||||
framer-motion: '>=4.0.0'
|
||||
react: '>=18'
|
||||
dependencies:
|
||||
'@chakra-ui/checkbox': 2.2.2_kmlicq6bwxmlcznv6sr6tuc4dy
|
||||
'@chakra-ui/checkbox': 2.2.2_r5w2a5xvuufbpzdplx7rhu5d34
|
||||
'@chakra-ui/system': 2.3.0_czahumb22fzwzcv7wksbqto7oq
|
||||
framer-motion: 6.2.8_biqbaboplfbrettd7655fr4n2y
|
||||
framer-motion: 8.0.2_biqbaboplfbrettd7655fr4n2y
|
||||
react: 18.2.0
|
||||
dev: false
|
||||
|
||||
@@ -1549,7 +1549,7 @@ packages:
|
||||
'@chakra-ui/theme-tools': 2.0.12_kzevwk2hxgy6fnrjqv25jdmqp4
|
||||
dev: false
|
||||
|
||||
/@chakra-ui/toast/4.0.0_i5i4bpvpaizvkddebpliczlnaa:
|
||||
/@chakra-ui/toast/4.0.0_fh2kdmbk3zrge73f3a7mcxr4rm:
|
||||
resolution: {integrity: sha512-abeeloJac5T9WK2IN76fEM5FSRH+erNXln2HqDf5wLBn33avSBXWyTiUL8riVSUqto0lrIn6FuK/MmKo0DH4og==}
|
||||
peerDependencies:
|
||||
'@chakra-ui/system': 2.3.0
|
||||
@@ -1565,12 +1565,12 @@ packages:
|
||||
'@chakra-ui/styled-system': 2.3.4
|
||||
'@chakra-ui/system': 2.3.0_czahumb22fzwzcv7wksbqto7oq
|
||||
'@chakra-ui/theme': 2.1.14_kzevwk2hxgy6fnrjqv25jdmqp4
|
||||
framer-motion: 6.2.8_biqbaboplfbrettd7655fr4n2y
|
||||
framer-motion: 8.0.2_biqbaboplfbrettd7655fr4n2y
|
||||
react: 18.2.0
|
||||
react-dom: 18.2.0_react@18.2.0
|
||||
dev: false
|
||||
|
||||
/@chakra-ui/tooltip/2.2.0_i5i4bpvpaizvkddebpliczlnaa:
|
||||
/@chakra-ui/tooltip/2.2.0_fh2kdmbk3zrge73f3a7mcxr4rm:
|
||||
resolution: {integrity: sha512-oB97aQJBW+U3rRIt1ct7NaDRMnbW16JQ5ZBCl3BzN1VJWO3djiNuscpjVdZSceb+FdGSFo+GoDozp1ZwqdfFeQ==}
|
||||
peerDependencies:
|
||||
'@chakra-ui/system': '>=2.0.0'
|
||||
@@ -1585,18 +1585,18 @@ packages:
|
||||
'@chakra-ui/react-use-event-listener': 2.0.4_react@18.2.0
|
||||
'@chakra-ui/react-use-merge-refs': 2.0.4_react@18.2.0
|
||||
'@chakra-ui/system': 2.3.0_czahumb22fzwzcv7wksbqto7oq
|
||||
framer-motion: 6.2.8_biqbaboplfbrettd7655fr4n2y
|
||||
framer-motion: 8.0.2_biqbaboplfbrettd7655fr4n2y
|
||||
react: 18.2.0
|
||||
react-dom: 18.2.0_react@18.2.0
|
||||
dev: false
|
||||
|
||||
/@chakra-ui/transition/2.0.11_4tlgiwfhwimjjb62viejpa3zx4:
|
||||
/@chakra-ui/transition/2.0.11_mpyaigbqivyzkdvk6rklhdk7tm:
|
||||
resolution: {integrity: sha512-O0grc162LARPurjz1R+J+zr4AAKsVwN5+gaqLfZLMWg6TpvczJhwEA2fLCNAdkC/gomere390bJsy52xfUacUw==}
|
||||
peerDependencies:
|
||||
framer-motion: '>=4.0.0'
|
||||
react: '>=18'
|
||||
dependencies:
|
||||
framer-motion: 6.2.8_biqbaboplfbrettd7655fr4n2y
|
||||
framer-motion: 8.0.2_biqbaboplfbrettd7655fr4n2y
|
||||
react: 18.2.0
|
||||
dev: false
|
||||
|
||||
@@ -2002,6 +2002,53 @@ packages:
|
||||
react: 18.2.0
|
||||
dev: false
|
||||
|
||||
/@motionone/animation/10.15.1:
|
||||
resolution: {integrity: sha512-mZcJxLjHor+bhcPuIFErMDNyrdb2vJur8lSfMCsuCB4UyV8ILZLvK+t+pg56erv8ud9xQGK/1OGPt10agPrCyQ==}
|
||||
dependencies:
|
||||
'@motionone/easing': 10.15.1
|
||||
'@motionone/types': 10.15.1
|
||||
'@motionone/utils': 10.15.1
|
||||
tslib: 2.4.0
|
||||
dev: false
|
||||
|
||||
/@motionone/dom/10.15.3:
|
||||
resolution: {integrity: sha512-FQ7a2zMBXc1UeU8CG9G3yDpst55fbb0+C9A0VGfwOITitBCzigKZnXRgsRSWWR+FW57GSc13eGQxtYB0lKG0Ng==}
|
||||
dependencies:
|
||||
'@motionone/animation': 10.15.1
|
||||
'@motionone/generators': 10.15.1
|
||||
'@motionone/types': 10.15.1
|
||||
'@motionone/utils': 10.15.1
|
||||
hey-listen: 1.0.8
|
||||
tslib: 2.4.0
|
||||
dev: false
|
||||
|
||||
/@motionone/easing/10.15.1:
|
||||
resolution: {integrity: sha512-6hIHBSV+ZVehf9dcKZLT7p5PEKHGhDwky2k8RKkmOvUoYP3S+dXsKupyZpqx5apjd9f+php4vXk4LuS+ADsrWw==}
|
||||
dependencies:
|
||||
'@motionone/utils': 10.15.1
|
||||
tslib: 2.4.0
|
||||
dev: false
|
||||
|
||||
/@motionone/generators/10.15.1:
|
||||
resolution: {integrity: sha512-67HLsvHJbw6cIbLA/o+gsm7h+6D4Sn7AUrB/GPxvujse1cGZ38F5H7DzoH7PhX+sjvtDnt2IhFYF2Zp1QTMKWQ==}
|
||||
dependencies:
|
||||
'@motionone/types': 10.15.1
|
||||
'@motionone/utils': 10.15.1
|
||||
tslib: 2.4.0
|
||||
dev: false
|
||||
|
||||
/@motionone/types/10.15.1:
|
||||
resolution: {integrity: sha512-iIUd/EgUsRZGrvW0jqdst8st7zKTzS9EsKkP+6c6n4MPZoQHwiHuVtTQLD6Kp0bsBLhNzKIBlHXponn/SDT4hA==}
|
||||
dev: false
|
||||
|
||||
/@motionone/utils/10.15.1:
|
||||
resolution: {integrity: sha512-p0YncgU+iklvYr/Dq4NobTRdAPv9PveRDUXabPEeOjBLSO/1FNB2phNTZxOxpi1/GZwYpAoECEa0Wam+nsmhSw==}
|
||||
dependencies:
|
||||
'@motionone/types': 10.15.1
|
||||
hey-listen: 1.0.8
|
||||
tslib: 2.4.0
|
||||
dev: false
|
||||
|
||||
/@popperjs/core/2.11.4:
|
||||
resolution: {integrity: sha512-q/ytXxO5NKvyT37pmisQAItCFqA7FD/vNb8dgaJy3/630Fsc+Mz9/9f2SziBoIZ30TJooXyTwZmhi1zjXmObYg==}
|
||||
dev: false
|
||||
@@ -2849,7 +2896,7 @@ packages:
|
||||
resolution: {integrity: sha512-4n0pYcPTa/uI7Q66BZna61nRT7lDhnuJ9PJr6wiDjx4uStg491ks41y7uOG+s0umaaa+hulNKSldU9aTg9/yVg==}
|
||||
engines: {node: '>=10'}
|
||||
dependencies:
|
||||
tslib: 2.3.1
|
||||
tslib: 2.4.0
|
||||
dev: false
|
||||
|
||||
/focus-trap-react/9.0.2_v2m5e27vhdewzwhryxwfaorcca:
|
||||
@@ -2876,19 +2923,17 @@ packages:
|
||||
resolution: {integrity: sha512-MhLuK+2gUcnZe8ZHlaaINnQLl0xRIGRfcGk2yl8xoQAfHrSsL3rYu6FCmBdkdbhc9EPlwyGHewaRsvwRMJtAlA==}
|
||||
dev: true
|
||||
|
||||
/framer-motion/6.2.8_biqbaboplfbrettd7655fr4n2y:
|
||||
resolution: {integrity: sha512-4PtBWFJ6NqR350zYVt9AsFDtISTqsdqna79FvSYPfYDXuuqFmiKtZdkTnYPslnsOMedTW0pEvaQ7eqjD+sA+HA==}
|
||||
/framer-motion/8.0.2_biqbaboplfbrettd7655fr4n2y:
|
||||
resolution: {integrity: sha512-xuIiQchVh/cLqUzzu5/8ok4o0nkwYPyIRtkDl8wDvrQUNRhSfRaZu1MMdzN0TjpBtG66oP03PSLO7Qtu1YqPrA==}
|
||||
peerDependencies:
|
||||
react: '>=16.8 || ^17.0.0 || ^18.0.0'
|
||||
react-dom: '>=16.8 || ^17.0.0 || ^18.0.0'
|
||||
react: ^18.0.0
|
||||
react-dom: ^18.0.0
|
||||
dependencies:
|
||||
framesync: 6.0.1
|
||||
'@motionone/dom': 10.15.3
|
||||
hey-listen: 1.0.8
|
||||
popmotion: 11.0.3
|
||||
react: 18.2.0
|
||||
react-dom: 18.2.0_react@18.2.0
|
||||
style-value-types: 5.0.0
|
||||
tslib: 2.3.1
|
||||
tslib: 2.4.0
|
||||
optionalDependencies:
|
||||
'@emotion/is-prop-valid': 0.8.8
|
||||
dev: false
|
||||
@@ -2896,13 +2941,7 @@ packages:
|
||||
/framesync/5.3.0:
|
||||
resolution: {integrity: sha512-oc5m68HDO/tuK2blj7ZcdEBRx3p1PjrgHazL8GYEpvULhrtGIFbQArN6cQS2QhW8mitffaB+VYzMjDqBxxQeoA==}
|
||||
dependencies:
|
||||
tslib: 2.3.1
|
||||
dev: false
|
||||
|
||||
/framesync/6.0.1:
|
||||
resolution: {integrity: sha512-fUY88kXvGiIItgNC7wcTOl0SNRCVXMKSWW2Yzfmn7EKNc+MpCzcz9DhdHcdjbrtN3c6R4H5dTY2jiCpPdysEjA==}
|
||||
dependencies:
|
||||
tslib: 2.3.1
|
||||
tslib: 2.4.0
|
||||
dev: false
|
||||
|
||||
/fs.realpath/1.0.0:
|
||||
@@ -3409,15 +3448,6 @@ packages:
|
||||
engines: {node: '>=8.6'}
|
||||
dev: false
|
||||
|
||||
/popmotion/11.0.3:
|
||||
resolution: {integrity: sha512-Y55FLdj3UxkR7Vl3s7Qr4e9m0onSnP8W7d/xQLsoJM40vs6UKHFdygs6SWryasTZYqugMjm3BepCF4CWXDiHgA==}
|
||||
dependencies:
|
||||
framesync: 6.0.1
|
||||
hey-listen: 1.0.8
|
||||
style-value-types: 5.0.0
|
||||
tslib: 2.3.1
|
||||
dev: false
|
||||
|
||||
/postcss-value-parser/4.2.0:
|
||||
resolution: {integrity: sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ==}
|
||||
dev: true
|
||||
@@ -3568,7 +3598,7 @@ packages:
|
||||
'@types/react': 18.0.24
|
||||
react: 18.2.0
|
||||
react-style-singleton: 2.2.1_bbvjflvjoibwhtpmedigb26h6y
|
||||
tslib: 2.3.1
|
||||
tslib: 2.4.0
|
||||
dev: false
|
||||
|
||||
/react-remove-scroll/2.5.5_bbvjflvjoibwhtpmedigb26h6y:
|
||||
@@ -3585,7 +3615,7 @@ packages:
|
||||
react: 18.2.0
|
||||
react-remove-scroll-bar: 2.3.4_bbvjflvjoibwhtpmedigb26h6y
|
||||
react-style-singleton: 2.2.1_bbvjflvjoibwhtpmedigb26h6y
|
||||
tslib: 2.3.1
|
||||
tslib: 2.4.0
|
||||
use-callback-ref: 1.3.0_bbvjflvjoibwhtpmedigb26h6y
|
||||
use-sidecar: 1.1.2_bbvjflvjoibwhtpmedigb26h6y
|
||||
dev: false
|
||||
@@ -3604,7 +3634,7 @@ packages:
|
||||
get-nonce: 1.0.1
|
||||
invariant: 2.2.4
|
||||
react: 18.2.0
|
||||
tslib: 2.3.1
|
||||
tslib: 2.4.0
|
||||
dev: false
|
||||
|
||||
/react-textarea-autosize/8.3.4_bbvjflvjoibwhtpmedigb26h6y:
|
||||
@@ -3761,13 +3791,6 @@ packages:
|
||||
inline-style-parser: 0.1.1
|
||||
dev: false
|
||||
|
||||
/style-value-types/5.0.0:
|
||||
resolution: {integrity: sha512-08yq36Ikn4kx4YU6RD7jWEv27v4V+PUsOGa4n/as8Et3CuODMJQ00ENeAVXAeydX4Z2j1XHZF1K2sX4mGl18fA==}
|
||||
dependencies:
|
||||
hey-listen: 1.0.8
|
||||
tslib: 2.3.1
|
||||
dev: false
|
||||
|
||||
/stylis/4.0.13:
|
||||
resolution: {integrity: sha512-xGPXiFVl4YED9Jh7Euv2V220mriG9u4B2TA6Ybjc1catrstKD2PpIdU3U0RKpkVBC2EhmL/F0sPCr9vrFTNRag==}
|
||||
dev: false
|
||||
@@ -3817,8 +3840,8 @@ packages:
|
||||
resolution: {integrity: sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg==}
|
||||
dev: false
|
||||
|
||||
/tslib/2.3.1:
|
||||
resolution: {integrity: sha512-77EbyPPpMz+FRFRuAFlWMtmgUWGe9UOG2Z25NqCwiIjRhOf5iKGuzSe5P2w1laq+FkRy4p+PCuVkJSGkzTEKVw==}
|
||||
/tslib/2.4.0:
|
||||
resolution: {integrity: sha512-d6xOpEDfsi2CZVlPQzGeux8XMwLT9hssAsaPYExaQMuYskwb+x1x7J371tWlbBdWHroy99KnVB6qIkUbs5X3UQ==}
|
||||
dev: false
|
||||
|
||||
/typescript/4.6.3:
|
||||
@@ -3907,7 +3930,7 @@ packages:
|
||||
dependencies:
|
||||
'@types/react': 18.0.24
|
||||
react: 18.2.0
|
||||
tslib: 2.3.1
|
||||
tslib: 2.4.0
|
||||
dev: false
|
||||
|
||||
/use-composed-ref/1.3.0_react@18.2.0:
|
||||
@@ -3958,7 +3981,7 @@ packages:
|
||||
'@types/react': 18.0.24
|
||||
detect-node-es: 1.1.0
|
||||
react: 18.2.0
|
||||
tslib: 2.3.1
|
||||
tslib: 2.4.0
|
||||
dev: false
|
||||
|
||||
/uvu/0.5.3:
|
||||
|
||||
@@ -6,6 +6,7 @@ import ContextButton from './components/ContextButton';
|
||||
import { fetchNui } from '../../../utils/fetchNui';
|
||||
import ReactMarkdown from 'react-markdown';
|
||||
import HeaderButton from './components/HeaderButton';
|
||||
import ScaleFade from '../../../transitions/ScaleFade';
|
||||
|
||||
const openMenu = (id: string | undefined) => {
|
||||
fetchNui<ContextMenuProps>('openContext', { id: id, back: true });
|
||||
@@ -49,30 +50,28 @@ const ContextMenu: React.FC = () => {
|
||||
});
|
||||
|
||||
return (
|
||||
<Transition mounted={visible} transition="pop" duration={100} exitDuration={100}>
|
||||
{(styles) => (
|
||||
<Box style={styles} sx={{ position: 'absolute', top: '15%', right: '25%' }} w={320} h={580}>
|
||||
<Flex justify="center" align="center" mb={10} gap={6}>
|
||||
{contextMenu.menu && (
|
||||
<HeaderButton icon="chevron-left" iconSize={16} handleClick={() => openMenu(contextMenu.menu)} />
|
||||
)}
|
||||
<Box sx={{ borderRadius: 4, flex: '1 85%' }} bg="dark.6">
|
||||
<Text color="dark.0" p={6} align="center">
|
||||
<ReactMarkdown>{contextMenu.title}</ReactMarkdown>
|
||||
</Text>
|
||||
</Box>
|
||||
<HeaderButton icon="xmark" canClose={contextMenu.canClose} iconSize={18} handleClick={closeContext} />
|
||||
</Flex>
|
||||
<Box sx={{ height: 560, overflowY: 'scroll' }}>
|
||||
<Stack spacing={3}>
|
||||
{Object.entries(contextMenu.options).map((option, index) => (
|
||||
<ContextButton option={option} key={`context-item-${index}`} />
|
||||
))}
|
||||
</Stack>
|
||||
<Box sx={{ position: 'absolute', top: '15%', right: '25%' }} w={320} h={580}>
|
||||
<ScaleFade visible={visible}>
|
||||
<Flex justify="center" align="center" mb={10} gap={6}>
|
||||
{contextMenu.menu && (
|
||||
<HeaderButton icon="chevron-left" iconSize={16} handleClick={() => openMenu(contextMenu.menu)} />
|
||||
)}
|
||||
<Box sx={{ borderRadius: 4, flex: '1 85%' }} bg="dark.6">
|
||||
<Text color="dark.0" p={6} align="center">
|
||||
<ReactMarkdown>{contextMenu.title}</ReactMarkdown>
|
||||
</Text>
|
||||
</Box>
|
||||
<HeaderButton icon="xmark" canClose={contextMenu.canClose} iconSize={18} handleClick={closeContext} />
|
||||
</Flex>
|
||||
<Box sx={{ height: 560, overflowY: 'scroll' }}>
|
||||
<Stack spacing={3}>
|
||||
{Object.entries(contextMenu.options).map((option, index) => (
|
||||
<ContextButton option={option} key={`context-item-${index}`} />
|
||||
))}
|
||||
</Stack>
|
||||
</Box>
|
||||
)}
|
||||
</Transition>
|
||||
</ScaleFade>
|
||||
</Box>
|
||||
);
|
||||
};
|
||||
|
||||
|
||||
@@ -4,6 +4,7 @@ import { Box, createStyles, Group } from '@mantine/core';
|
||||
import ReactMarkdown from 'react-markdown';
|
||||
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
|
||||
import { IconProp } from '@fortawesome/fontawesome-svg-core';
|
||||
import ScaleFade from '../../transitions/ScaleFade';
|
||||
|
||||
type Position = 'right-center' | 'left-center' | 'top-center';
|
||||
|
||||
@@ -55,16 +56,16 @@ const TextUI: React.FC = () => {
|
||||
|
||||
return (
|
||||
<>
|
||||
{visible && (
|
||||
<Box className={classes.wrapper}>
|
||||
<Box className={classes.wrapper}>
|
||||
<ScaleFade visible={visible}>
|
||||
<Box style={data.style} className={classes.container}>
|
||||
<Group spacing={12}>
|
||||
{data.icon && <FontAwesomeIcon icon={data.icon} fixedWidth size="lg" style={{ color: data.iconColor }} />}
|
||||
<ReactMarkdown>{data.text}</ReactMarkdown>
|
||||
</Group>
|
||||
</Box>
|
||||
</Box>
|
||||
)}
|
||||
</ScaleFade>
|
||||
</Box>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
22
web/src/transitions/ScaleFade.tsx
Normal file
22
web/src/transitions/ScaleFade.tsx
Normal file
@@ -0,0 +1,22 @@
|
||||
import { AnimatePresence, motion } from 'framer-motion';
|
||||
|
||||
const ScaleFade: React.FC<{ visible: boolean; children: React.ReactNode }> = ({ visible, children }) => {
|
||||
return (
|
||||
<>
|
||||
<AnimatePresence initial={false}>
|
||||
{visible && (
|
||||
<motion.div
|
||||
initial={{ opacity: 0, scale: 0.95 }}
|
||||
animate={{ opacity: 1, scale: 1 }}
|
||||
exit={{ opacity: 0, scale: 0.95 }}
|
||||
transition={{ duration: 0.1 }}
|
||||
>
|
||||
{children}
|
||||
</motion.div>
|
||||
)}
|
||||
</AnimatePresence>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default ScaleFade;
|
||||
Reference in New Issue
Block a user