Where communities thrive


  • Join over 1.5M+ people
  • Join over 100K+ communities
  • Free without limits
  • Create your own community
People
Activity
  • 05:20
    github-actions[bot] commented #2215
  • 05:17
    codeclimate[bot] commented #2215
  • 05:16
    wildergd review_requested #2215
  • 05:16
    commit-lint[bot] commented #2215
  • 05:16
    wildergd opened #2215
  • 05:15

    wildergd on fix-lookup-to-use-internal-overlay

    fix: fix implement using Intern… fix: fix tests (compare)

  • Apr 06 22:58
    TahimiLeonBravo labeled #2195
  • Apr 06 22:58
    TahimiLeonBravo assigned #2195
  • Apr 06 22:57
    TahimiLeonBravo labeled #2205
  • Apr 06 22:57
    TahimiLeonBravo assigned #2205
  • Apr 06 22:57
    TahimiLeonBravo labeled #2205
  • Apr 06 22:57
    TahimiLeonBravo labeled #2209
  • Apr 06 22:57
    TahimiLeonBravo assigned #2209
  • Apr 06 15:39

    TahimiLeonBravo on fix-markdownoutput-styles

    (compare)

  • Apr 06 15:39

    TahimiLeonBravo on master

    fix: lift some CSS to MarkdownO… (compare)

  • Apr 06 15:39
    TahimiLeonBravo closed #2214
  • Apr 05 19:01
    github-actions[bot] commented #2214
  • Apr 05 18:59
    codeclimate[bot] commented #2214
  • Apr 05 18:58
    commit-lint[bot] commented #2214
  • Apr 05 18:58
    HellWolf93 review_requested #2214
Tahimi
@TahimiLeonBravo
if so, you need to wrap the entire application with the <Application> component
and define the mains colors on the theme
const theme = { rainbow: { palette: { brand: '#80deea', mainBackground: '#303030', }, }, };
Tahimi
@TahimiLeonBravo
once you define the colors of the palette in the ʻApplication` component of your application, this will change those colors in all the components of your application
if you use an Application component that wraps only one component of your application this will only change the colors of that single component
Tahimi
@TahimiLeonBravo
this has been helpful to you ??
Dimitri Ivashchuk
@d-ivashchuk

@TahimiLeonBravo It is helpful, thanks! But I've tried it with one component which resulted in style change for the whole app. I am not sure what you are using under the hood but seems not to play well with Chakra UI. What about going for deeper customization of DateTime picker. How would you go with styling the modal, it seems like it's not within the scope of the component itself and is summoned on the upper app level - which makes it hard to style within the scope of that particular component.

Thanks a lot for helping again!

Jose Leandro Torres
@LeandroTorresSicilia
@d-ivashchuk If you want to change colors for one specific component, you can wrapp only this specific component with the application and pass your custom theme, which will cause only that component to get the custom colors
@d-ivashchuk right now we only let to customize some colors but not change other internal styles
We will add more customization in the future.
can you tell us what others styles do you want to be able to change?
Dimitri Ivashchuk
@d-ivashchuk
Thanks for clarifying. I want to implement dark theme to date-time picker, so basically all styles of the modal. Right now I will need to override with styled components on global level as it seems
Dimitri Ivashchuk
@d-ivashchuk
What would be helpful for date time picker - is being able to assign modal class at least, so I am able to find it in the app
or scoping modal to the component and not app highest level
minhho3199
@minhho3199
Is there any way that I can change the color of an individual event in the WeeklyCalendar component?
Tahimi
@TahimiLeonBravo
@minhho3199 right now it is not possible to change the color of a specific event, we are working on a solution that will be available in the next release :)
Maxx Greene
@maxxgreene
@d-ivashchuk this example implements light/dark mode https://rainbow-algolia-search.web.app/
it will be more helpful for new developer using the library
codeho
@codeho_gitlab
Hi Guys, i'm using DateTimePicker, and i'm trying to figure out a way to trigger the opening of the module automatically.
i'm a bit of a noob, but i'm happy to dig through any kind of links you have for me :)
Jose Leandro Torres
@LeandroTorresSicilia
@codeho_gitlab what you can do is click the input programmatically when mount the component like this:
const ref = useRef();

useEffect(() => {
    ref.current.click();
}, []);

return (
    …
    <DateTimePicker ref={ref} />
    …
);
Dimitri Ivashchuk
@d-ivashchuk
Hey people! Running into strange issue. Using rainbow-component , namely DateTimePicker. Import another third party library component and suddenly all the styling for rainbow-component is gone. Anyone experienced this?
Jose Leandro Torres
@LeandroTorresSicilia
@d-ivashchuk No, can you share the code that causes this?
minhho3199
@minhho3199
I see that the WeeklyCalendar component has added custom background colors to events in the calendar. I changed the react-rainbow-component version in package.json to 1.18.1 but the CalendarEvent interface, which I presume is what you pass into the events props of the component, doesn't have the backgroundColor and color field. I'm wondering if I did something wrong here since your github page has the correct code
Zoltán Németh
@nemethzoli1997_gitlab
Can someone tell me how Column's component prop works? From the examples I figured out that it's a function which can translate the column value into JSX. My question is can I reference somehow the whole row in the component function?
Anshul Agarwal
@AnshulAg03
I am trying to use date range selector,but its working as single data selector
Jose Leandro Torres
@LeandroTorresSicilia
@nemethzoli1997_gitlab yes, the component prop receive two props, value and row, value is the current cell value and row is an object with all row values, you can debug and see what props it receive. We are working on improve the documentation.
@AnshulAg03 you need to pass selectionType=“range”, also you can pass variant=“double” and it will show two calendars
Cat Carbonell
@catcarbonell
Hi everyone! Wanted to know how we can handle timezones when using the DatePicker calendar-- is there a way in JS or in the actual component we can set the timezone for the calendar so we have an accurate date?
Tahimi
@TahimiLeonBravo
Hi @minhho3199 in the version 1.8.1 this functionality is not available, we have already implemented it but we have not published it in a stable version yet. Currently we have a canary version of testing that we are testing 1.18.1-canary.e45b993 you can install it and use it taking into account that this version is not stable, soon we will publish a new version with that feature.
Jose Leandro Torres
@LeandroTorresSicilia
@catcarbonell The component does not know about timezone it only select a date and you can get the value in the onChange event and do whatever you want with the date. Can you give me more context about your use case?
Cat Carbonell
@catcarbonell
Ahh actually, I was trying to type out our problem, but I realized I just needed to tell my coworker that the timezone doesn't matter when using DatePicker.
Thanks! My bad.lol
minhho3199
@minhho3199
@TahimiLeonBravo Oh ok I'll wait for the stable release then. Thank you
I have a problem with using the Drawer component with MenuItem and MultiSelect. Right now I have these components inside the Drawer and I would like the Drawer to stay open when MenuItem is clicked, but it's working exactly the opposite way. Whenever MenuItem is clicked, it would close the Drawer
minhho3199
@minhho3199
It's as if whenever I click on a MenuItem, it runs onRequestClose on the Drawer component
Tahimi
@TahimiLeonBravo
Hi @minhho3199 you're using a ButtonMenu withMenuItem, right?
Tahimi
@TahimiLeonBravo
Hey guys!! It’s official! #Rainbow will be in the #JSConfMX. Join us from November 2nd-4th for the online event. See you there!
I share the link to cheer you up https://hopin.to/events/jsconf-mx-online
minhho3199
@minhho3199
@TahimiLeonBravo Yes, I'm using ButtonMenu with MenuItem. The problem also occurs when I use MultiSelect inside the Drawer as well
Tahimi
@TahimiLeonBravo
react-rainbow-components v1.19.0 is out! 🎉 Check the release notes here => https://github.com/nexxtway/react-rainbow/releases
@minhho3199 the new version now available, the bug on the ButtonMenu was fixed
soystiken
@soystiken
Failed building JavaScript bundle.
Unable to resolve "./fonts/Lato-Black/Lato-Black.eot" from "node_modules\react-rainbow-components\components\Application\rainbowLegacyStyles.js"
i am having this error
Jose Leandro Torres
@LeandroTorresSicilia
@soystiken can you give more context, like if you are using create-react-app or ssr, or some code example?
hgulersen
@hgulersen
@soystiken I got around that problem importing the component like this:
import DateTimePicker from "react-rainbow-components/components/DateTimePicker";
instead of this:
import { DateTimePicker } from "react-rainbow-components";
Jose Leandro Torres
@LeandroTorresSicilia
@hgulersen The main issue here is the Application component which has import some fonts, you can see here nexxtway/react-rainbow#939 to get a workaround, although we are working in moving the fonts to a cdn which will solve this problem, note that you can find issues with SSR in other components, we will be looking for them and will fix them in the time they arise up
Dimitri Ivashchuk
@d-ivashchuk
Hey team! I was exploring the possibility to use https://react-rainbow.io/#/WeeklyCalendar in one of my apps. Is it possible to click on the calendar inside and get the date. workflow would be adding events by clicking calendar :D
Nuno Pexirra
@npexirra
Hey, is there anyway to have VerticalNavigation component on the right? (and have the selected element's blue border on the left)