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

Simple, robust and performant API #597

Closed
wants to merge 28 commits into from
Closed
Changes from 1 commit
Commits
File filter...
Filter file types
Jump to…
Jump to file or symbol
Failed to load files and symbols.

Always

Just for now

remove extend in favor of extendable style prop

  • Loading branch information...
rofrischmann
rofrischmann committed Sep 27, 2018
commit 7057e3e8aa66cbbe900e78cc3a9c0ac2a269b5af
@@ -1,35 +1,19 @@
/* @flow */
import { combineRules } from 'fela'

function resolveRule(style, extend) {
if (extend) {
const mergedRules = [].concat(style, extend)
return combineRules(...mergedRules)
}

if (Array.isArray(style)) {
return combineRules(...style)
}

if (typeof style === 'object') {
return () => style
}

return style
}

export default function FelaComponentFactory(
createElement: Function,
FelaTheme: Function,
contextTypes?: Object
): Function {
function FelaComponent(
{ children, as = 'div', style, extend, ...otherProps },
{ children, as = 'div', style, ...otherProps },
{ renderer }
) {
// TODO: add warning when no style is not provided
return createElement(FelaTheme, undefined, theme => {
const className = renderer.renderRule(resolveRule(style, extend), {
// TODO: could optimise perf by not calling combineRules if not neccessary
const className = renderer.renderRule(combineRules(style), {
...otherProps,
theme,
})
@@ -158,13 +158,16 @@ describe('Using the FelaComponent component', () => {
})

it('should compose extension rules', () => {
const Button = props => (
<FelaComponent style={{ fontSize: '12px', color: 'red' }} {...props} />
const Button = ({ style, ...props }) => (
<FelaComponent
style={[{ fontSize: '12px', color: 'red' }, style]}
{...props}
/>
)

expect(
createSnapshot(
<Button extend={{ backgroundColor: 'blue' }} as="button">
<Button style={{ backgroundColor: 'blue' }} as="button">
Hello World
</Button>
)
@@ -177,15 +180,15 @@ describe('Using the FelaComponent component', () => {
color,
})

const Button = ({ children, ...props }) => (
<FelaComponent style={rule} {...props}>
const Button = ({ children, style, ...props }) => (
<FelaComponent style={[rule, style]} {...props}>
{({ className }) => <button className={className}>{children}</button>}
</FelaComponent>
)

expect(
createSnapshot(
<Button extend={{ backgroundColor: 'blue' }} color="black">
<Button style={{ backgroundColor: 'blue' }} color="black">
Hello World
</Button>
)
@@ -198,24 +201,22 @@ describe('Using the FelaComponent component', () => {
color,
})

const Button = ({ children, ...props }) => (
<FelaComponent style={rule} {...props}>
const Button = ({ children, style, ...props }) => (
<FelaComponent style={[rule, style]} {...props}>
{({ className }) => <button className={className}>{children}</button>}
</FelaComponent>
)

const ExtendedButton = ({ children, extend = {}, padding, ...props }) => (
<Button
{...props}
extend={[{ border: '1px solid grey', padding }, extend]}>
const ExtendedButton = ({ children, style = {}, padding, ...props }) => (
<Button {...props} style={[{ border: '1px solid grey', padding }, style]}>
{children}
</Button>
)

expect(
createSnapshot(
<ExtendedButton
extend={{ backgroundColor: 'blue' }}
style={{ backgroundColor: 'blue' }}
color="black"
padding="10px">
Hello World
@@ -2,15 +2,30 @@
import assignStyle from 'css-in-js-utils/lib/assignStyle'
import arrayReduce from 'fast-loops/lib/arrayReduce'

import type { DOMRenderer } from '../../../flowtypes/DOMRenderer'
import type { NativeRenderer } from '../../../flowtypes/NativeRenderer'

function resolveRule(
rule: Array<Function | Object> | Function | Object,
props: Object,
renderer: DOMRenderer | NativeRenderer
): Object {
if (Array.isArray(rule)) {
return resolveRule(combineRules(...rule), props, renderer)
}

if (typeof rule === 'function') {
return rule(props, renderer)
}

return rule
}

export default function combineRules(...rules: Array<Function>): Function {
return (props, renderer) =>
arrayReduce(
rules,
(style, rule) =>
assignStyle(
style,
typeof rule === 'function' ? rule(props, renderer) : rule
),
(style, rule) => assignStyle(style, resolveRule(rule, props, renderer)),
{}
)
}
ProTip! Use n and p to navigate between commits in a pull request.
You can’t perform that action at this time.