const themeColors = { active: { color: "#503BC4", hoverColor: "#8A7CD7", textColor: "#1A1A1A", }, error: { color: "#D92D20", hoverColor: "#D92D20", textColor: "#1A1A1A", }, disable: { color: "#D2D2D2", hoverColor: "#D2D2D2", textColor: "#D2D2D2", }, }; const variant = props.variant == undefined ? "active" : props.variant; const DropdownContainer = styled.div` position: relative; display: inline-block; `; const DropdownButton = styled.button` background-color: transparent; min-width: 227px; padding: 0.25em 1em; cursor: ${(props) => (props.disabled ? "not-allowed" : "pointer")}; border: ${(props) => `1px solid ${themeColors[props.variant].color} }`}; border-radius: 0; cursor: pointer; &:hover { border: ${(props) => `1px solid ${themeColors[props.variant].hoverColor} }`}; } `; const DropdownContent = styled.div` display: ${(props) => (props.isOpen ? "block" : "none")}; position: absolute; background-color: transparent; min-width: 227px; `; const DropdownItem = styled.button` display: block; width: 100%; padding: 0.25em 1em; background-color: #fff; border: ${(props) => `1px solid ${themeColors[props.variant].color} }`}; border-radius: 0; cursor: pointer; font-weight: 400; font-size: 0.875rem; line-height: 1.25rem; border-top: none; color: ${(props) => `${themeColors[props.variant].textColor} }`}; &:hover { background-color: ${(props) => `${themeColors[props.variant].color} `}; color: #fff; border-top: none; } `; const Placeholder = styled.span` color: ${(props) => `${themeColors[props.variant].textColor} }`}; display:flex; font-weight: 400; font-size: 0.875rem; line-height: 1.25rem; `; const DropdownHeader = styled.span` display:flex; justify-content: space-between; align-items: center; `; const chevronIcon = ( <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg" > <path d="M5 7.5L10 12.5L15 7.5" stroke={themeColors[variant].textColor} stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" /> </svg> ); const hintIcon = ( <svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg" > <mask id="path-1-inside-1_1906_103246" fill="white"> <path d="M9.50165 1H6.41665C6.01896 1.00035 5.63768 1.15862 5.35665 1.44L1.35665 5.44C1.07575 5.72125 0.917969 6.1025 0.917969 6.5C0.917969 6.8975 1.07575 7.27875 1.35665 7.56L4.44165 10.645C4.7229 10.9259 5.10415 11.0837 5.50165 11.0837C5.89915 11.0837 6.2804 10.9259 6.56165 10.645L10.5617 6.645C10.843 6.36397 11.0013 5.98269 11.0016 5.585V2.5C11.0016 2.10218 10.8436 1.72064 10.5623 1.43934C10.281 1.15804 9.89948 1 9.50165 1ZM10.0016 5.585C10.002 5.6508 9.98942 5.71603 9.96454 5.77695C9.93965 5.83787 9.90299 5.89328 9.85665 5.94L5.85665 9.94C5.81017 9.98687 5.75487 10.0241 5.69394 10.0494C5.63301 10.0748 5.56766 10.0879 5.50165 10.0879C5.43564 10.0879 5.37029 10.0748 5.30936 10.0494C5.24843 10.0241 5.19313 9.98687 5.14665 9.94L2.06165 6.855C2.01478 6.80852 1.97759 6.75322 1.9522 6.69229C1.92682 6.63136 1.91375 6.56601 1.91375 6.5C1.91375 6.43399 1.92682 6.36864 1.9522 6.30771C1.97759 6.24678 2.01478 6.19148 2.06165 6.145L6.06165 2.145C6.10837 2.09866 6.16378 2.062 6.2247 2.03711C6.28561 2.01223 6.35085 1.99962 6.41665 2H9.50165C9.63426 2 9.76144 2.05268 9.8552 2.14645C9.94897 2.24022 10.0016 2.36739 10.0016 2.5V5.585ZM7.50165 3C7.20498 3 6.91497 3.08797 6.66829 3.2528C6.42162 3.41762 6.22936 3.65189 6.11583 3.92598C6.0023 4.20006 5.97259 4.50166 6.03047 4.79264C6.08835 5.08361 6.23121 5.35088 6.44099 5.56066C6.65077 5.77044 6.91804 5.9133 7.20901 5.97118C7.49999 6.02906 7.80159 5.99935 8.07568 5.88582C8.34976 5.77229 8.58403 5.58003 8.74885 5.33336C8.91368 5.08668 9.00165 4.79667 9.00165 4.5C9.00165 4.10218 8.84361 3.72064 8.56231 3.43934C8.28101 3.15804 7.89947 3 7.50165 3ZM7.50165 5C7.40276 5 7.30609 4.97068 7.22386 4.91574C7.14164 4.86079 7.07755 4.78271 7.03971 4.69134C7.00187 4.59998 6.99196 4.49945 7.01126 4.40246C7.03055 4.30546 7.07817 4.21637 7.1481 4.14645C7.21802 4.07652 7.30711 4.0289 7.4041 4.00961C7.50109 3.99031 7.60163 4.00022 7.69299 4.03806C7.78435 4.0759 7.86244 4.13999 7.91738 4.22222C7.97233 4.30444 8.00165 4.40111 8.00165 4.5C8.00165 4.63261 7.94897 4.75979 7.8552 4.85355C7.76144 4.94732 7.63426 5 7.50165 5Z" /> </mask> <path d="M9.50165 1H6.41665C6.01896 1.00035 5.63768 1.15862 5.35665 1.44L1.35665 5.44C1.07575 5.72125 0.917969 6.1025 0.917969 6.5C0.917969 6.8975 1.07575 7.27875 1.35665 7.56L4.44165 10.645C4.7229 10.9259 5.10415 11.0837 5.50165 11.0837C5.89915 11.0837 6.2804 10.9259 6.56165 10.645L10.5617 6.645C10.843 6.36397 11.0013 5.98269 11.0016 5.585V2.5C11.0016 2.10218 10.8436 1.72064 10.5623 1.43934C10.281 1.15804 9.89948 1 9.50165 1ZM10.0016 5.585C10.002 5.6508 9.98942 5.71603 9.96454 5.77695C9.93965 5.83787 9.90299 5.89328 9.85665 5.94L5.85665 9.94C5.81017 9.98687 5.75487 10.0241 5.69394 10.0494C5.63301 10.0748 5.56766 10.0879 5.50165 10.0879C5.43564 10.0879 5.37029 10.0748 5.30936 10.0494C5.24843 10.0241 5.19313 9.98687 5.14665 9.94L2.06165 6.855C2.01478 6.80852 1.97759 6.75322 1.9522 6.69229C1.92682 6.63136 1.91375 6.56601 1.91375 6.5C1.91375 6.43399 1.92682 6.36864 1.9522 6.30771C1.97759 6.24678 2.01478 6.19148 2.06165 6.145L6.06165 2.145C6.10837 2.09866 6.16378 2.062 6.2247 2.03711C6.28561 2.01223 6.35085 1.99962 6.41665 2H9.50165C9.63426 2 9.76144 2.05268 9.8552 2.14645C9.94897 2.24022 10.0016 2.36739 10.0016 2.5V5.585ZM7.50165 3C7.20498 3 6.91497 3.08797 6.66829 3.2528C6.42162 3.41762 6.22936 3.65189 6.11583 3.92598C6.0023 4.20006 5.97259 4.50166 6.03047 4.79264C6.08835 5.08361 6.23121 5.35088 6.44099 5.56066C6.65077 5.77044 6.91804 5.9133 7.20901 5.97118C7.49999 6.02906 7.80159 5.99935 8.07568 5.88582C8.34976 5.77229 8.58403 5.58003 8.74885 5.33336C8.91368 5.08668 9.00165 4.79667 9.00165 4.5C9.00165 4.10218 8.84361 3.72064 8.56231 3.43934C8.28101 3.15804 7.89947 3 7.50165 3ZM7.50165 5C7.40276 5 7.30609 4.97068 7.22386 4.91574C7.14164 4.86079 7.07755 4.78271 7.03971 4.69134C7.00187 4.59998 6.99196 4.49945 7.01126 4.40246C7.03055 4.30546 7.07817 4.21637 7.1481 4.14645C7.21802 4.07652 7.30711 4.0289 7.4041 4.00961C7.50109 3.99031 7.60163 4.00022 7.69299 4.03806C7.78435 4.0759 7.86244 4.13999 7.91738 4.22222C7.97233 4.30444 8.00165 4.40111 8.00165 4.5C8.00165 4.63261 7.94897 4.75979 7.8552 4.85355C7.76144 4.94732 7.63426 5 7.50165 5Z" fill="#969696" /> <path d="M6.41665 1V-0.734286L6.41512 -0.734285L6.41665 1ZM5.35665 1.44L6.58297 2.66633L6.58374 2.66556L5.35665 1.44ZM1.35665 5.44L0.130323 4.21368L0.129561 4.21444L1.35665 5.44ZM0.917969 6.5H-0.816317H0.917969ZM1.35665 7.56L0.129561 8.78556L0.130324 8.78633L1.35665 7.56ZM4.44165 10.645L3.21532 11.8713L3.21609 11.8721L4.44165 10.645ZM6.56165 10.645L7.78721 11.8721L7.78797 11.8713L6.56165 10.645ZM10.5617 6.645L9.33609 5.41791L9.33533 5.41868L10.5617 6.645ZM11.0016 5.585L12.7359 5.58653V5.585H11.0016ZM11.0016 2.5L12.7359 2.5L11.0016 2.5ZM10.0016 5.585H8.26734L8.26739 5.59503L10.0016 5.585ZM9.85665 5.94L11.083 7.16634L11.088 7.16132L9.85665 5.94ZM5.85665 9.94L4.63031 8.71367L4.62531 8.71871L5.85665 9.94ZM5.14665 9.94L6.378 8.7187L6.37297 8.71368L5.14665 9.94ZM2.06165 6.855L3.28798 5.62866L3.28294 5.62366L2.06165 6.855ZM1.91375 6.5H3.64804H1.91375ZM2.06165 6.145L3.28295 7.37635L3.28797 7.37133L2.06165 6.145ZM6.06165 2.145L4.84032 0.913676L4.83532 0.918675L6.06165 2.145ZM6.41665 2L6.40662 3.73429H6.41665V2ZM9.00165 4.5H10.7359H9.00165ZM9.50165 -0.734286H6.41665V2.73429H9.50165V-0.734286ZM6.41512 -0.734285C5.55763 -0.73353 4.73552 -0.392281 4.12956 0.214439L6.58374 2.66556C6.53984 2.70951 6.48029 2.73423 6.41818 2.73428L6.41512 -0.734285ZM4.13032 0.213675L0.130324 4.21368L2.58297 6.66633L6.58297 2.66633L4.13032 0.213675ZM0.129561 4.21444C-0.476115 4.82087 -0.816317 5.64291 -0.816317 6.5H2.65225C2.65225 6.56209 2.62761 6.62163 2.58374 6.66556L0.129561 4.21444ZM-0.816317 6.5C-0.816317 7.35709 -0.476115 8.17913 0.129561 8.78556L2.58374 6.33444C2.62761 6.37837 2.65225 6.43791 2.65225 6.5H-0.816317ZM0.130324 8.78633L3.21532 11.8713L5.66797 9.41868L2.58297 6.33368L0.130324 8.78633ZM3.21609 11.8721C3.82252 12.4778 4.64456 12.818 5.50165 12.818V9.3494C5.56373 9.3494 5.62328 9.37404 5.66721 9.41791L3.21609 11.8721ZM5.50165 12.818C6.35874 12.818 7.18078 12.4778 7.78721 11.8721L5.33609 9.41791C5.38002 9.37404 5.43956 9.3494 5.50165 9.3494V12.818ZM7.78797 11.8713L11.788 7.87133L9.33533 5.41868L5.33532 9.41868L7.78797 11.8713ZM11.7872 7.87209C12.3939 7.26612 12.7352 6.44402 12.7359 5.58653L9.26737 5.58347C9.26742 5.52136 9.29214 5.46181 9.33609 5.41791L11.7872 7.87209ZM12.7359 5.585V2.5H9.26736V5.585H12.7359ZM12.7359 2.5C12.7359 1.64221 12.3952 0.819561 11.7886 0.213015L9.33599 2.66567C9.29205 2.62173 9.26736 2.56214 9.26736 2.5L12.7359 2.5ZM11.7886 0.213015C11.1821 -0.393532 10.3594 -0.734286 9.50165 -0.734286V2.73429C9.43951 2.73429 9.37992 2.7096 9.33599 2.66567L11.7886 0.213015ZM8.26739 5.59503C8.26645 5.43259 8.29759 5.27156 8.35901 5.12118L11.5701 6.43273C11.6812 6.16051 11.7376 5.86902 11.7359 5.57497L8.26739 5.59503ZM8.35901 5.12118C8.42044 4.97079 8.51095 4.83401 8.62534 4.71868L11.088 7.16132C11.295 6.95255 11.4589 6.70496 11.5701 6.43273L8.35901 5.12118ZM8.63032 4.71368L4.63032 8.71368L7.08297 11.1663L11.083 7.16633L8.63032 4.71368ZM4.62531 8.71871C4.74004 8.60304 4.87655 8.51121 5.02697 8.44854L6.3609 11.6504C6.63318 11.5369 6.8803 11.3707 7.08799 11.1613L4.62531 8.71871ZM5.02697 8.44854C5.17739 8.38587 5.33872 8.35361 5.50165 8.35361V11.8222C5.7966 11.8222 6.08863 11.7638 6.3609 11.6504L5.02697 8.44854ZM5.50165 8.35361C5.66458 8.35361 5.82591 8.38587 5.97633 8.44854L4.6424 11.6504C4.91467 11.7638 5.2067 11.8222 5.50165 11.8222V8.35361ZM5.97633 8.44854C6.12675 8.51121 6.26326 8.60304 6.37799 8.71871L3.91531 11.1613C4.123 11.3707 4.37011 11.5369 4.6424 11.6504L5.97633 8.44854ZM6.37297 8.71368L3.28797 5.62868L0.835324 8.08133L3.92032 11.1663L6.37297 8.71368ZM3.28294 5.62366C3.39862 5.7384 3.49045 5.87491 3.55311 6.02532L0.351296 7.35925C0.464729 7.63153 0.630948 7.87864 0.840362 8.08634L3.28294 5.62366ZM3.55311 6.02532C3.61577 6.17573 3.64804 6.33706 3.64804 6.5H0.179464C0.179464 6.79495 0.237864 7.08699 0.351296 7.35925L3.55311 6.02532ZM3.64804 6.5C3.64804 6.66294 3.61577 6.82427 3.55311 6.97468L0.351296 5.64075C0.237864 5.91302 0.179464 6.20505 0.179464 6.5H3.64804ZM3.55311 6.97468C3.49045 7.12509 3.39862 7.2616 3.28294 7.37634L0.840362 4.91366C0.630948 5.12136 0.464729 5.36848 0.351296 5.64075L3.55311 6.97468ZM3.28797 7.37133L7.28797 3.37133L4.83532 0.918675L0.835324 4.91868L3.28797 7.37133ZM7.28297 3.37631C7.16763 3.49071 7.03085 3.58121 6.88047 3.64264L5.56892 0.431592C5.2967 0.54278 5.04911 0.706609 4.84033 0.913686L7.28297 3.37631ZM6.88047 3.64264C6.73009 3.70406 6.56906 3.7352 6.40662 3.73426L6.42668 0.265743C6.13263 0.264043 5.84114 0.320403 5.56892 0.431592L6.88047 3.64264ZM6.41665 3.73429H9.50165V0.265714H6.41665V3.73429ZM9.50165 3.73429C9.1743 3.73429 8.86035 3.60425 8.62888 3.37277L11.0815 0.920122C10.6625 0.501111 10.0942 0.265714 9.50165 0.265714V3.73429ZM8.62888 3.37277C8.3974 3.1413 8.26736 2.82735 8.26736 2.5H11.7359C11.7359 1.90743 11.5005 1.33913 11.0815 0.920122L8.62888 3.37277ZM8.26736 2.5V5.585H11.7359V2.5H8.26736ZM7.50165 1.26571C6.86197 1.26571 6.23665 1.4554 5.70478 1.81079L7.63181 4.6948C7.59328 4.72055 7.54799 4.73429 7.50165 4.73429V1.26571ZM5.70478 1.81079C5.1729 2.16618 4.75835 2.6713 4.51356 3.26229L7.7181 4.58966C7.70037 4.63247 7.67034 4.66906 7.63181 4.6948L5.70478 1.81079ZM4.51356 3.26229C4.26876 3.85328 4.20471 4.50359 4.32951 5.13098L7.73143 4.45429C7.74047 4.49974 7.73583 4.54685 7.7181 4.58966L4.51356 3.26229ZM4.32951 5.13098C4.45431 5.75837 4.76234 6.33466 5.21466 6.78699L7.66731 4.33434C7.70008 4.3671 7.72239 4.40885 7.73143 4.45429L4.32951 5.13098ZM5.21466 6.78699C5.66699 7.23931 6.24328 7.54735 6.87067 7.67214L7.54736 4.27022C7.5928 4.27926 7.63455 4.30157 7.66731 4.33434L5.21466 6.78699ZM6.87067 7.67214C7.49806 7.79694 8.14837 7.73289 8.73936 7.48809L7.41199 4.28355C7.4548 4.26582 7.50191 4.26118 7.54736 4.27022L6.87067 7.67214ZM8.73936 7.48809C9.33035 7.2433 9.83547 6.82875 10.1909 6.29687L7.30685 4.36984C7.33259 4.33131 7.36918 4.30128 7.41199 4.28355L8.73936 7.48809ZM10.1909 6.29687C10.5462 5.765 10.7359 5.13968 10.7359 4.5H7.26736C7.26736 4.45366 7.2811 4.40837 7.30685 4.36984L10.1909 6.29687ZM10.7359 4.5C10.7359 3.64222 10.3952 2.81956 9.78864 2.21301L7.33599 4.66567C7.29205 4.62173 7.26736 4.56214 7.26736 4.5H10.7359ZM9.78864 2.21301C9.18209 1.60647 8.35944 1.26571 7.50165 1.26571V4.73429C7.43951 4.73429 7.37992 4.7096 7.33599 4.66567L9.78864 2.21301ZM7.50165 3.26571C7.74577 3.26571 7.9844 3.3381 8.18738 3.47373L6.26035 6.35774C6.62777 6.60325 7.05975 6.73429 7.50165 6.73429V3.26571ZM8.18738 3.47373C8.39036 3.60935 8.54856 3.80212 8.64198 4.02766L5.43744 5.35502C5.60655 5.76329 5.89292 6.11223 6.26035 6.35774L8.18738 3.47373ZM8.64198 4.02766C8.7354 4.2532 8.75984 4.50137 8.71222 4.7408L5.3103 4.06411C5.22408 4.49752 5.26833 4.94676 5.43744 5.35502L8.64198 4.02766ZM8.71222 4.7408C8.66459 4.98023 8.54704 5.20016 8.37442 5.37277L5.92177 2.92012C5.6093 3.23259 5.39651 3.6307 5.3103 4.06411L8.71222 4.7408ZM8.37442 5.37277C8.20181 5.54539 7.98188 5.66294 7.74245 5.71057L7.06576 2.30865C6.63235 2.39486 6.23424 2.60765 5.92177 2.92012L8.37442 5.37277ZM7.74245 5.71057C7.50302 5.75819 7.25485 5.73375 7.02931 5.64033L8.35667 2.43579C7.94841 2.26668 7.49917 2.22244 7.06576 2.30865L7.74245 5.71057ZM7.02931 5.64033C6.80377 5.54691 6.611 5.38871 6.47538 5.18573L9.35939 3.2587C9.11388 2.89127 8.76494 2.6049 8.35667 2.43579L7.02931 5.64033ZM6.47538 5.18573C6.33975 4.98276 6.26736 4.74412 6.26736 4.5H9.73594C9.73594 4.0581 9.6049 3.62612 9.35939 3.2587L6.47538 5.18573ZM6.26736 4.5C6.26736 4.17265 6.39741 3.8587 6.62888 3.62723L9.08153 6.07988C9.50054 5.66087 9.73594 5.09257 9.73594 4.5H6.26736ZM6.62888 3.62723C6.86035 3.39576 7.1743 3.26571 7.50165 3.26571V6.73429C8.09422 6.73429 8.66252 6.49889 9.08153 6.07988L6.62888 3.62723Z" fill="#969696" mask="url(#path-1-inside-1_1906_103246)" /> </svg> ); const Label = styled.span` color: #969696; display:flex; font-weight: 400; font-size: 0.75rem; line-height: 1rem; margin-bottom: 0.25rem; `; const HintText = styled.span` color: #969696; display:flex; font-weight: 400; font-size: 0.75rem; line-height: 1rem; margin-left: 0.25rem; `; const Dropdown = styled.div` display:flex; flex-direction: column; `; const Hint = styled.div` margin-top:0.25rem; display:flex; align-items: center; `; return ( <Dropdown> <DropdownContainer> {props.label == "" || props.label == undefined ? ( <div></div> ) : ( <Label>{props.label}</Label> )} <DropdownButton disabled={props.variant == "disable"} onClick={props.handleToggle} variant={variant} > <DropdownHeader> {props.leftIcon ? props.leftIcon : null} {props.selectedItem == null || props.selectedItem == undefined ? ( <Placeholder variant={variant}> {props.placeholder || "Placeholder"} </Placeholder> ) : ( <Placeholder variant={variant}>{props.selectedItem}</Placeholder> )} {chevronIcon} </DropdownHeader> </DropdownButton> {props.itemList == undefined ? ( <div /> ) : ( <DropdownContent isOpen={props.isOpen}> {props.itemList.map((e) => ( <DropdownItem variant={variant} onClick={() => props.handleItemClick(e)} > {e} </DropdownItem> ))} </DropdownContent> )} </DropdownContainer> {props.hint == "" || props.hint == undefined ? ( <div></div> ) : ( <Hint> {hintIcon} <HintText>{props.hint}</HintText> </Hint> )} </Dropdown> );