some idea of label styles (highlighting searchinput value) with preview sceenshot

cha2hyun commented 1 year ago

Hi there 👋 Thanks for woderful components. I have some idea for label styles. (highlight searchinput value) If you like it, i will make a PR

Preview

before

highlight

Some Code

Item.tsx


import React, { useCallback, useMemo } from 'react';

import DisabledItem from './DisabledItem'; import { useSelectContext } from './SelectProvider'; import { Option } from './type'; import { COLORS, DEFAULT_THEME, THEME_DATA } from '../constants';

interface ItemProps { item: Option; primaryColor: string; searchInput?: string; }

const Item: React.FC = ({ item, primaryColor, searchInput }) => { const { classNames, value, handleValueChange, formatOptionLabel } = useSelectContext();

const isSelected = useMemo(() => { return ( value !== null && !Array.isArray(value) && value.value === item.value ); }, [item.value, value]);

const textHoverColor = useMemo(() => { if (COLORS.includes(primaryColor)) { // eslint-disable-next-line @typescript-eslint/ban-ts-comment // @ts-ignore return THEME_DATA.textHover[primaryColor]; } return THEME_DATA.textHover[DEFAULT_THEME]; }, [primaryColor]);

const bgColor = useMemo(() => { if (COLORS.includes(primaryColor)) { // eslint-disable-next-line @typescript-eslint/ban-ts-comment // @ts-ignore return THEME_DATA.bg[primaryColor]; } return THEME_DATA.bg[DEFAULT_THEME]; }, [primaryColor]);

const bgHoverColor = useMemo(() => { if (COLORS.includes(primaryColor)) { // eslint-disable-next-line @typescript-eslint/ban-ts-comment // @ts-ignore return THEME_DATA.bgHover[primaryColor]; } return THEME_DATA.bgHover[DEFAULT_THEME]; }, [primaryColor]);

const getItemClass = useCallback(() => { const baseClass = 'block transition duration-200 px-2 py-2 pl-5 cursor-pointer select-none truncate rounded'; const selectedClass = isSelected ? text-white ${bgColor} : text-gray-500 ${bgHoverColor} ${textHoverColor};

return classNames && classNames.listItem
  ? classNames.listItem({ isSelected })
  : `${baseClass} ${selectedClass}`;

}, [bgColor, bgHoverColor, classNames, isSelected, textHoverColor]);

// HERE👇👇👇 const getItemLabelWithColor = () => { if (searchInput) { const upperSearchInput = searchInput?.toUpperCase(); const start = item.label.indexOf(upperSearchInput); const end = start + searchInput.length; const labelArray = item.label.split(''); return labelArray.map((label, idx) => { if (idx >= start && idx < end) { <span className={font-bold text-${primaryColor}-500}> {label} } else { return {label}; } }); } else { return item.label; } }; //

return ( <> {formatOptionLabel ? ( <div onClick={() => handleValueChange(item)}> {formatOptionLabel({ ...item, isSelected })}

) : ( <> {item.disabled ? (

{item.label}

      ) : (
        <li
          aria-selected={isSelected}
          role='option'
          onClick={() => handleValueChange(item)}
          className={getItemClass()}
        >
          {/* {item.label} */}👇👇👇
          {getItemLabelWithColor()}
        </li>
      )}
    </>
  )}
</>

); };

export default Item;

onesine commented 1 year ago

Hi @cha2hyun 👋

Thank you for this idea. It would be really great to have this option. But, it would have to be an option that the user can enable or not via a props. Also, it would be nice if he could use the utility classes to change the style of the elements that are highlighted. By default, the style of the highlighted elements will be consistent with the theme. If the user uses the blue theme, the color of the highlighted items in the filter will be blue.

This would be a really interesting PR. We look forward to it.

cha2hyun commented 1 year ago

Hi @cha2hyun 👋

Thank you for this idea. It would be really great to have this option. But, it would have to be an option that the user can enable or not via a props. Also, it would be nice if he could use the utility classes to change the style of the elements that are highlighted. By default, the style of the highlighted elements will be consistent with the theme. If the user uses the blue theme, the color of the highlighted items in the filter will be blue.

This would be a really interesting PR. We look forward to it.

Thanks for amazing library i really like it.

Looking forward to customizing feature with utility classes 👍

Also you can test issue #18 #19 on here

I will requests a PR when im ready

please feel free to cantact me if you need any ideas or contributes 😀

Best regards

onesine commented 1 year ago

I am glad to hear that you liked it and that you used it on your site. By the way, your site looks great and I've already tested the package on your site. I'm curious to know what technology stack you used to make it.

Any contribution is welcome and I would be glad to see you contribute to this package.

Best regards

cha2hyun commented 1 year ago

I am glad to hear that you liked it and that you used it on your site. By the way, your site looks great and I've already tested the package on your site. I'm curious to know what technology stack you used to make it.

Any contribution is welcome and I would be glad to see you contribute to this package.

Best regards

Hi onesine 👋

Front : Next.js + Typescript + Tailwind Package : react-tailwind-select, react-query, react-table, aos, ..

I use https://github.com/theodorusclarence/ts-nextjs-tailwind-starter 👈 template.

onesine commented 1 year ago

Thank you for this information. And for the Backend, what do you use?

cha2hyun commented 1 year ago

I use Django or Fast API 😀

onesine commented 1 year ago

Okay, it's a great technology. And especially thank you for this feature.

onesine / react-tailwindcss-select