[Recompose] When nesting affects Style
In CSS we use the descendant selector to style elements based on their nesting. Thankfully in React we don't need to consider this most of the time because this nesting of elements happens within the bounds of a single component.
However occasionally the nesting of components affects the styles. In these rare cases we can use context to influence styles yielding a user friendly api to our components.
The html structure should looks like:
<ButtonGroup isVertical>
<Button element={'a'}>Click</Button>
<Button element={'a'}>Click</Button>
</ButtonGroup>
So what ButtonGroup should do is affect its child elements alignments and styling (marign or padding).
So if html is like:
<ButtonGroup>
<Button element={'a'}>Click</Button>
<Button element={'a'}>Click</Button>
</ButtonGroup>
It should looks like:
In the article, only point out 3 important thing, so rest of stuff, go to the github.
1. Styling ButtonGroup component itself, add padding it.
We have a default theme.js file to config the theme:
export default {
color: {
keyColor: '#3f8bae',
textLight: '#fff',
},
number: {
buttonRadius: 5,
buttonGroupSpace: 6,
},
string: {
mainFontFamily: 'sans-serif'
}
}
'buttonGroupSpace' is the one to control the padding for ButtonGroup.
And we have the function to modify style according to the theme ready in hocs.js:
export const themeStyle = mapThemeToStyle => mapProps(
props => {
const { theme, style } = props; return {
...props,
style: [
mapThemeToStyle(theme, props),
style
]
};
}
);
So what we need to do is give 'mapThemeToStyle' fucntion to enable it modify the style according to the theme.
ButtonGroup.js:
import React, {PropTypes} from 'react'; import {
addStyle,
getTheme,
themeStyle
} from './hocs';
import {
setDisplayName,
compose
} from 'recompose';
import Radium from 'radium'; const mapThemeToStyle = ({number}, porps) => ({
padding: (number.buttonGroupSpace || 6) * 1
}); const ButtonGroup = ({ children, ...rest }) => (
<div {...rest}>
{children}
</div>
); const enhance = compose(
setDisplayName('ButtonGroup'),
getTheme,
themeStyle(mapThemeToStyle),
addStyle({
padding: 6,
display: 'flex'
}),
Radium
); export default enhance(ButtonGroup);
Notice that 'themeStyle' can override 'addStyle' function, 'compose' read from buttom to top.
2. Pass context down from ButtonGroup to Button.
For the Buttons inside ButtonGroup, we want each has some margin instead of stick with each other. So we need one way to tell whether the Buttons are inside ButtonGroup or not.
One way is to use Context. From ButtonGroup we provide a context called 'buttonGroup', boolean value.
We can use recompose's withContext method:
import React, {PropTypes} from 'react'; import {
addStyle,
getTheme,
themeStyle
} from './hocs';
import {
setDisplayName,
withContext,
compose
} from 'recompose';
import Radium from 'radium'; const mapThemeToStyle = ({number}, porps) => ({
padding: (number.buttonGroupSpace || 6) * 1
}); const ButtonGroup = ({ children, ...rest }) => (
<div {...rest}>
{children}
</div>
); const enhance = compose(
setDisplayName('ButtonGroup'),
getTheme,
themeStyle(mapThemeToStyle),
withContext(
{buttonGroup: PropTypes.bool}, // define the context type
(props) => ({buttonGroup: true}) // set the value of context
),
addStyle({
padding: 60,
display: 'flex'
}),
Radium
); export default enhance(ButtonGroup);
Now, because the concept of 'Context' is for re-useable. We put 'buttonGroup' context into hocs.js:
import {
getContext
} from 'recompose'; export const getButtonGroup = getContext({
buttonGroup: PropTypes.bool
});
It uses 'getContext' from recompose lib.
Now, in the Button.js, we can get the context on props:
import React from 'react';
import {
mapProps,
compose,
defaultProps,
setDisplayName,
componentFromProp
} from 'recompose';
import Radium from 'radium'; import {
getTheme,
themeStyle,
addStyle,
getButtonGroup
} from './hocs'; const mapThemeToStyle = ({
color,
number,
string
}, props) => {
return {
...(color.keyColor &&
{backgroundColor: color.keyColor} || {}
),
...(props.buttonGroup &&
{margin: number.buttonGroupSpace} || {}
),
color: color.textLight,
borderRadius: number.buttonRadius,
fontFamily: string.mainFontFamily
};
}; const style = {
backgroundColor: 'red',
borderWidth: 0,
borderStyle: 'solid',
boxSizing: 'border-box',
fontFamily: 'sans-serif',
fontSize: 18,
borderRadius: 3,
fontWeight: 100,
padding: 12,
verticalAlign: 'middle',
whiteSpace: 'nowrap',
color: 'white',
alignItems: 'center',
justifyContent: 'center',
textDecoration: 'none',
display: 'flex',
flex: 1,
cursor: 'pointer',
':hover': {
backgroundColor: 'purple'
}
}; const enhance = compose(
getButtonGroup,
getTheme, // using the container's defined theme
themeStyle(mapThemeToStyle), // apply the default theme to the component
addStyle(style),
setDisplayName('Button'),
defaultProps({
element: 'button'
}),
Radium
);
export default enhance(componentFromProp('element'));
Once 'buttonGroup' is true, it will add margin for each Buttons inside ButtonGroup.
3. 'isVertical' prop.
We can add this prop on to the html:
<ButtonGroup isVertical>
<Button element={'a'}>Click</Button>
<Button element={'a'}>Click</Button>
</ButtonGroup>
Then in the ButtonGroup.js, we can check that whether this props exists, if yes, then set display direction to 'column' otherwise to 'row'.
import React, {PropTypes} from 'react'; import {
addStyle,
getTheme,
themeStyle
} from './hocs';
import {
setDisplayName,
withContext,
compose
} from 'recompose';
import Radium from 'radium'; const mapThemeToStyle = ({number}, porps) => ({
padding: (number.buttonGroupSpace || ) * ,
flexDirection: porps.isVertical ? 'column': 'row'
}); const ButtonGroup = ({ children, ...rest }) => (
<div {...rest}>
{children}
</div>
); const enhance = compose(
setDisplayName('ButtonGroup'),
getTheme,
themeStyle(mapThemeToStyle),
withContext(
{buttonGroup: PropTypes.bool},
(props) => ({buttonGroup: true})
),
addStyle({
padding: ,
display: 'flex'
}),
Radium
); export default enhance(ButtonGroup);
[Recompose] When nesting affects Style的更多相关文章
- 《C Elements of Style》 书摘
<C Elements of Style> 书摘 学完C语言和数据结构后,虽然能解决一些问题,但总觉得自己写的程序丑陋,不专业.这时候看到了Steve Oualline写的<C El ...
- WPF整理-Style
"Consistency in a user interface is an important trait; there are many facets of consistency, ...
- A CIRCULAR PROGRESSBAR STYLE USING AN ATTACHED VIEWMODEL
This blog post describes how to re-template the Silverlight ProgressBar control to render a circular ...
- BootStrap入门教程 (一) :手脚架Scaffolding(全局样式(Global Style),格网系统(Grid System),流式格网(Fluid grid System),自定义(Customing),布局(Layouts))
2011年,twitter的“一小撮”工程师为了提高他们内部的分析和管理能力,用业余时间为他们的产品构建了一套易用.优雅.灵活.可扩展的前端工具集--BootStrap.Bootstrap由MARK ...
- linux c coding style
Linux kernel coding style This is a short document describing the preferred coding style for the lin ...
- [中英对照]Linux kernel coding style | Linux内核编码风格
Linux kernel coding style | Linux内核编码风格 This is a short document describing the preferred coding sty ...
- Google JavaScript Style Guide
转自:http://google.github.io/styleguide/javascriptguide.xml Google JavaScript Style Guide Revision 2.9 ...
- [Recompose] Compute Expensive Props Lazily using Recompose
Learn how to use the 'withPropsOnChange' higher order component to help ensure that expensive prop c ...
- [Recompose] Show a Spinner While a Component is Loading using Recompose
Learn how to use the 'branch' and 'renderComponent' higher-order components to show a spinner while ...
随机推荐
- 【Codeforces Round #453 (Div. 2) B】Coloring a Tree
[链接] 我是链接,点我呀:) [题意] 在这里输入题意 [题解] 从根节点开始. 显然它是什么颜色.就要改成对应的颜色.(如果上面已经有某个点传了值就不用改 然后往下传值. [代码] #includ ...
- C语言速度优化之指针赋值与if推断
近期在写的一个项目须要优化处理速度,我写了一下程序来測试指针赋值与指针推断的速度比較.结果让我大吃一惊. #include <stdio.h> #include <stdlib.h& ...
- Accelerated C++:通过演示样例进行编程实践——练习解答(第9章)
我的Github地址:https://github.com/lanbeilyj/Accerlerated-C-plus-plus 9-0. Compile, execute, and test the ...
- 【解决方法】Unexpected namespace prefix “xmlns” found for tag Layout
问题描写叙述 出错代码例如以下: <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android&quo ...
- android中常见声音操作方式(Ringtone,SoundPool,MediaPlayer)小结
在Android开发中有时候需要用到播放声音操作,在android API 的media包中有三种方式可供我们选择,它们分别是Ringtone,SoundPool,MediaPlayer.因为在我目前 ...
- Android内存泄露分析之StrictMode
转载请注明地址:http://blog.csdn.NET/yincheng886337/article/details/50524709 StrictMode(严格模式)使用 StrictMode严格 ...
- golang 获取环境信息
os.Environ() os.Getenv("TMP")
- Python的主成分分析PCA算法
这篇文章很不错:https://blog.csdn.net/u013082989/article/details/53792010 为什么数据处理之前要进行归一化???(这个一直不明白) 这个也很不错 ...
- ajax缓存 header头文件
浏览器第一次访问服务器的时候,需要从服务器加载很多静态资源,并将这些资源文件缓存在浏览器中,当再次访问页面的时候,如果有相同资源文件就直接到缓存中去加载,这样就会降低服务器的负载和带宽,加快用户访问, ...
- 主定理(Master Theorem)与时间复杂度
1. 问题 Karatsuba 大整数的快速乘积算法的运行时间(时间复杂度的递推关系式)为 T(n)=O(n)+4⋅T(n/2),求其最终的时间复杂度. 2. 主定理的内容 3. 分析 所以根据主定理 ...