Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat(autoScrollonMobile): #19 #27

Open
wants to merge 2 commits into
base: master
Choose a base branch
from

Conversation

cha2hyun
Copy link
Collaborator

@cha2hyun cha2hyun commented Mar 7, 2023

New feature for issue #18, issue #19

Code inspeciton is needed 👍

return item.label.split("").map((label, idx) => {
if (idx >= start && idx < end) {
return (
<span key={idx} className={`font-bold text-${primaryColor}-500`}>
Copy link
Owner

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Unfortunately, you can't use string interpolation like text-${primaryColor}-500 as described in the Tailwind documentation https://tailwindcss.com/docs/content-configuration#dynamic-class-names

const getTextColor = useMemo(() => {
        if (COLORS.includes(primaryColor)) {
            return THEME_DATA.text[primaryColor as keyof typeof THEME_DATA.text];
        }
        return THEME_DATA.text[DEFAULT_THEME];
    }, [primaryColor]);

You can use this code to get the color of the text based on primaryColor.
The code (here) contains other examples.

Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thanks !! 👍

options={options}
/>
);
return <Select value={animal} onChange={this.handleChange} options={options} />;
Copy link
Owner

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

It's true that it's fewer lines, but I find it's more readable on multiple lines.

Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Oops sorry for that, sorry. I guess this was changed because of auto formatting (probably Prettier Extension) in my vscode settings 😅

Copy link
Owner

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

😅 OK, I understand

options={options}
/>
);
return <Select value={animal} onChange={handleChange} options={options} />;
Copy link
Owner

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Same here, readability

onChange={handleChange}
options={options}
/>
<Select primaryColor={"indigo"} value={animal} onChange={handleChange} options={options} />
Copy link
Owner

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Same here, readability

@onesine
Copy link
Owner

onesine commented Mar 7, 2023

Thank you @cha2hyun for this PR

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants