UNPKG

@particle-network/connectkit

Version:

particle.network

8 lines (7 loc) • 4.26 kB
1
2
3
4
5
6
7
8
{ "version": 3, "sources": ["../../src/hooks/useClickAway.ts", "../../src/components/chainDropdown/styles.ts"], "sourcesContent": ["import { useEffect } from 'react';\n\n/**\n * Hook to listen for clicks outside of the target elements\n * @param {Function} callback - The function to call when a click outside is detected\n * @param {Array<React.RefObject>} refs - An array of refs of the target elements\n */\nconst useClickAway = (callback, refs) => {\n useEffect(() => {\n const handleClickOutside = (event) => {\n if (refs.every((ref) => ref.current && !ref.current.contains(event.target))) {\n callback();\n }\n };\n\n document.addEventListener('mousedown', handleClickOutside);\n\n return () => {\n document.removeEventListener('mousedown', handleClickOutside);\n };\n }, [callback, refs]);\n};\n\nexport default useClickAway;\n", "import { styled } from 'styled-components';\n\ninterface StylePrefixWrapProps {\n index: number;\n $source?: string;\n}\n\ninterface StyleDropdownContentProps {\n top: number;\n}\nexport const StyleDropdownContent = styled.div<StyleDropdownContentProps>`\n position: absolute;\n top: ${({ top }) => top || 46}px;\n left: 0%;\n box-shadow: var(--pcm-modal-box-shadow);\n background: var(--pcm-body-background);\n border-radius: var(--pcm-rounded-lg);\n z-index: 10;\n overflow: hidden;\n`;\n\nexport const StyleDropdownWrapper = styled.div`\n flex-shrink: 0;\n padding: 8px;\n overflow-y: auto;\n position: relative;\n -ms-overflow-style: none;\n scrollbar-width: none;\n\n &::-webkit-scrollbar {\n display: none;\n }\n`;\n\nexport const StyleChainItem = styled.div<{ selected: boolean }>`\n height: 36px;\n display: flex;\n justify-content: flex-start;\n padding-left: 8px;\n padding-right: 30px;\n position: relative;\n border-radius: var(--pcm-rounded-sm);\n align-items: center;\n z-index: 2;\n cursor: pointer;\n ${({ selected }) =>\n selected &&\n `\n .chain-name {\n color: #a257fa;\n }\n &:after {\n content: '';\n position: absolute;\n width: 100%;\n height: 34px;\n left: 0;\n top: 0px;\n background-color: var(--pcm-accent-color);\n opacity: 0.2;\n border-radius: var(--pcm-rounded-sm);\n }\n `}\n`;\n\nexport const StyleCheckIcon = styled.div`\n position: absolute;\n right: 11px;\n top: 50%;\n transform: translateY(-60%);\n`;\n\nexport const StyleChainName = styled.div`\n font-size: 12px;\n`;\n\nexport const StyleHoverBg = styled.div<StylePrefixWrapProps>`\n pointer-events: none;\n position: absolute;\n top: ${({ index, $source }) => ($source === 'countryList' ? index * 46 + 8 : index * 36 + 9)}px;\n left: 8px;\n width: calc(100% - 16px);\n height: ${({ $source }) => ($source === 'countryList' ? '46px' : '34px')};\n background-color: var(--pcm-accent-color);\n opacity: 0.1;\n border-radius: var(--pcm-rounded-sm);\n z-index: 11;\n display: ${({ index }) => (index === -1 ? 'none' : 'block')};\n transition: top 0.1s;\n`;\n"], "mappings": ";;;;;;AAAA,SAAS,iBAAiB;AAA1B,IAOM,cAgBC;AAvBP;AAAA;AAAA;AAOA,IAAM,eAAe,CAAC,UAAU,SAAS;AACvC,gBAAU,MAAM;AACd,cAAM,qBAAqB,CAAC,UAAU;AACpC,cAAI,KAAK,MAAM,CAAC,QAAQ,IAAI,WAAW,CAAC,IAAI,QAAQ,SAAS,MAAM,MAAM,CAAC,GAAG;AAC3E,qBAAS;AAAA,UACX;AAAA,QACF;AAEA,iBAAS,iBAAiB,aAAa,kBAAkB;AAEzD,eAAO,MAAM;AACX,mBAAS,oBAAoB,aAAa,kBAAkB;AAAA,QAC9D;AAAA,MACF,GAAG,CAAC,UAAU,IAAI,CAAC;AAAA,IACrB;AAEA,IAAO,uBAAQ;AAAA;AAAA;;;ACvBf,SAAS,cAAc;AAAvB,IAUa,sBAWA,sBAaA,gBA+BA,gBAOA,gBAIA;AA5Eb;AAAA;AAAA;AAUO,IAAM,uBAAuB,OAAO;AAAA;AAAA,SAElC,CAAC,EAAE,IAAI,MAAM,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAStB,IAAM,uBAAuB,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAapC,IAAM,iBAAiB,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAWjC,CAAC,EAAE,SAAS,MACZ,YACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAkBG,IAAM,iBAAiB,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAO9B,IAAM,iBAAiB,OAAO;AAAA;AAAA;AAI9B,IAAM,eAAe,OAAO;AAAA;AAAA;AAAA,SAG1B,CAAC,EAAE,OAAO,QAAQ,MAAO,YAAY,gBAAgB,QAAQ,KAAK,IAAI,QAAQ,KAAK;AAAA;AAAA;AAAA,YAGhF,CAAC,EAAE,QAAQ,MAAO,YAAY,gBAAgB,SAAS;AAAA;AAAA;AAAA;AAAA;AAAA,aAKtD,CAAC,EAAE,MAAM,MAAO,UAAU,KAAK,SAAS;AAAA;AAAA;AAAA;AAAA;", "names": [] }