javivelasco / react-toolbox-airbnb Goto Github PK

View Code? Open in Web Editor NEW

41.0 41.0 3.0 94 KB

An Airbnb DatePicker implementation using React Toolbox Core and Styled Components 💅

HTML 6.32% JavaScript 71.61% CSS 22.07%

agnostic date-picker react react-toolbox styled-components

react-toolbox-airbnb's People

Contributors

Stargazers

Watchers

Forkers

kutyel

react-toolbox-airbnb's Issues

Conclusions about this method of theming

We're currently dealing with the issues of building a flexible theming solution for a big React app and when I landed on react-toolbox I found the style as a dependency pattern to be very close to our needs. We're also heavily invested in styled-components so whenever I see it mentioned on toolbox I get excited.

Seeing the react-toolbox-core package makes me think you might find this solution appropriate for the future so I'm curious if you drew any particular conclusions from this experiment? Do you find yourself writing too much wiring/boilerplate? How can you be sure the dependencies passed to a factory are appropriate? How do you convey that to the theme developer?

requestAnimationFrame

Sorry to use issues this way, but looking through the code,

react-toolbox-airbnb/src/Airbnb/DatePicker/Pickers/MonthsWrapper.js

Lines 48 to 59 in c2e3044

    
           requestAnimationFrame(() => { 
        
             const items = this.childrenRefs 
        
               .map(child => child && child.getBoundingClientRect()) 
        
               .map(size => size && size.height) 
        
               .filter(item => !!item); 
        
             const itemsSlice = this.direction === RIGHT 
        
               ? items.slice(items.length - this.props.numberOfMonths) 
        
               : items.slice(0, this.props.numberOfMonths); 
        
             fn(itemsSlice.reduce((result, item) => (item && item > result) ? item : result, 0)); 
        
           });

I was wondering, what is the purpose of wrapping the code block in requestAnimationFrame?

Thank you !

javivelasco / react-toolbox-airbnb Goto Github PK

react-toolbox-airbnb's People

Contributors

Stargazers

Watchers

Forkers

react-toolbox-airbnb's Issues

Conclusions about this method of theming

requestAnimationFrame

Recommend Projects

React

Vue.js

Typescript

TensorFlow

Django

Laravel

D3

Recommend Topics

javascript

web

server

Machine learning

Visualization

Game

Recommend Org

Facebook

Microsoft

Google

Alibaba

D3

Tencent

	requestAnimationFrame(() => {
	const items = this.childrenRefs
	.map(child => child && child.getBoundingClientRect())
	.map(size => size && size.height)
	.filter(item => !!item);

	const itemsSlice = this.direction === RIGHT
	? items.slice(items.length - this.props.numberOfMonths)
	: items.slice(0, this.props.numberOfMonths);

	fn(itemsSlice.reduce((result, item) => (item && item > result) ? item : result, 0));
	});