github.com/turbot/steampipe@v1.7.0-rc.0.0.20240517123944-7cef272d4458/ui/dashboard/src/components/dashboards/inputs/common/useSelectInputStyles.ts (about)

     1  import { useDashboard } from "../../../../hooks/useDashboard";
     2  import { useEffect, useState } from "react";
     3  
     4  const useSelectInputStyles = () => {
     5    const [, setRandomVal] = useState(0);
     6    const {
     7      themeContext: { theme, wrapperRef },
     8    } = useDashboard();
     9  
    10    // This is annoying, but unless I force a refresh the theme doesn't stay in sync when you switch
    11    useEffect(() => setRandomVal(Math.random()), [theme.name]);
    12  
    13    if (!wrapperRef) {
    14      return null;
    15    }
    16  
    17    // @ts-ignore
    18    const style = window.getComputedStyle(wrapperRef);
    19    const background = style.getPropertyValue("--color-dashboard");
    20    const backgroundPanel = style.getPropertyValue("--color-dashboard-panel");
    21    const foreground = style.getPropertyValue("--color-foreground");
    22    const blackScale3 = style.getPropertyValue("--color-black-scale-3");
    23  
    24    return {
    25      clearIndicator: (provided) => ({
    26        ...provided,
    27        cursor: "pointer",
    28      }),
    29      control: (provided, state) => {
    30        return {
    31          ...provided,
    32          backgroundColor: backgroundPanel,
    33          borderColor: state.isFocused ? "#2684FF" : blackScale3,
    34          boxShadow: "none",
    35        };
    36      },
    37      dropdownIndicator: (provided) => ({
    38        ...provided,
    39        cursor: "pointer",
    40      }),
    41      input: (provided) => {
    42        return {
    43          ...provided,
    44          color: foreground,
    45        };
    46      },
    47      singleValue: (provided) => {
    48        return {
    49          ...provided,
    50          color: foreground,
    51        };
    52      },
    53      menu: (provided) => {
    54        return {
    55          ...provided,
    56          backgroundColor: backgroundPanel,
    57          border: `1px solid ${blackScale3}`,
    58          boxShadow: "none",
    59          marginTop: 0,
    60          marginBottom: 0,
    61        };
    62      },
    63      menuList: (provided) => {
    64        return {
    65          ...provided,
    66          paddingTop: 0,
    67          paddingBottom: 0,
    68        };
    69      },
    70      menuPortal: (base) => ({ ...base, zIndex: 9999 }),
    71      option: (provided, state) => {
    72        return {
    73          ...provided,
    74          backgroundColor: state.isFocused ? background : "none",
    75          color: foreground,
    76        };
    77      },
    78    };
    79  };
    80  
    81  export default useSelectInputStyles;