Skip to content

Commit

Permalink
[add] StyleSheet.compose
Browse files Browse the repository at this point in the history
As per the recent addition to React Native.
  • Loading branch information
necolas committed Dec 20, 2017
1 parent ed1e45a commit 1a20fcf
Show file tree
Hide file tree
Showing 4 changed files with 37 additions and 2 deletions.
4 changes: 2 additions & 2 deletions benchmarks/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -29,7 +29,7 @@ const fastestTests = [
() => renderDeepTree('styletron', styletron),
() => renderWideTree('styletron', styletron),
() => renderDeepTree('aphrodite', aphrodite),
() => renderWideTree('aphrodite', aphrodite),
() => renderWideTree('aphrodite', aphrodite)
];

/**
Expand All @@ -47,7 +47,7 @@ const restTests = [
() => renderDeepTree('reactxp', xp),
() => renderWideTree('reactxp', xp),
() => renderDeepTree('radium', radium),
() => renderWideTree('radium', radium),
() => renderWideTree('radium', radium)
];

const tests = [...coreTests];
Expand Down
16 changes: 16 additions & 0 deletions docs/storybook/2-apis/StyleSheet/StyleSheetScreen.js
Original file line number Diff line number Diff line change
Expand Up @@ -21,6 +21,22 @@ const StyleSheetScreen = () => (
</Description>

<Section title="Methods">
<DocItem
description={
<AppText>
Combines two styles such that <Code>style2</Code> will override any styles in{' '}
<Code>style1</Code>. If either style is falsy, the other one is returned without
allocating an array, saving allocations and maintaining reference equality for{' '}
<Code>PureComponent</Code> checks.
</AppText>
}
example={{
code: 'StyleSheet.compose(style1, style2);'
}}
name="compose"
typeInfo="(style1, style2) => style"
/>

<DocItem
description="Each key of the object passed to `create` must define a style object. The returned object replaces style objects with IDs"
example={{
Expand Down
12 changes: 12 additions & 0 deletions src/apis/StyleSheet/__tests__/index-test.js
Original file line number Diff line number Diff line change
Expand Up @@ -22,6 +22,18 @@ describe('apis/StyleSheet', () => {
expect(isPlainObject(StyleSheet.absoluteFillObject) === true).toBeTruthy();
});

describe('compose', () => {
test('returns array when neither style is falsey', () => {
expect(StyleSheet.compose(1, 2)).toEqual([1, 2]);
});
test('returns style1 when style2 is falsey', () => {
expect(StyleSheet.compose(1, null)).toBe(1);
});
test('returns style2 when style1 is falsey', () => {
expect(StyleSheet.compose(null, 2)).toBe(2);
});
});

describe('create', () => {
test('replaces styles with numbers', () => {
const style = StyleSheet.create({ root: { position: 'absolute' } });
Expand Down
7 changes: 7 additions & 0 deletions src/apis/StyleSheet/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -36,6 +36,13 @@ const absoluteFill = StyleRegistry.register(absoluteFillObject);
const StyleSheet = {
absoluteFill,
absoluteFillObject,
compose(style1, style2) {
if (style1 && style2) {
return [style1, style2];
} else {
return style1 || style2;
}
},
create(styles) {
const result = {};
Object.keys(styles).forEach(key => {
Expand Down

0 comments on commit 1a20fcf

Please sign in to comment.