mirror of
https://github.com/zhigang1992/react-native-web.git
synced 2026-04-24 04:25:27 +08:00
18440158b3
Includes a 'css-modules' implementation of the nested trees to act as a baseline for comparison.
50 lines
864 B
JavaScript
50 lines
864 B
JavaScript
/* eslint-disable react/prop-types */
|
|
import { css } from 'glamor';
|
|
import React from 'react';
|
|
import View from '../View';
|
|
|
|
const Box = ({ color, fixed = false, layout = 'column', outer = false, ...other }) => (
|
|
<View
|
|
{...other}
|
|
style={[
|
|
styles[`color${color}`],
|
|
fixed && styles.fixed,
|
|
layout === 'row' && styles.row,
|
|
outer && styles.outer
|
|
]}
|
|
/>
|
|
);
|
|
|
|
const styles = {
|
|
outer: css({
|
|
padding: 4
|
|
}),
|
|
row: css({
|
|
flexDirection: 'row'
|
|
}),
|
|
color0: css({
|
|
backgroundColor: '#222'
|
|
}),
|
|
color1: css({
|
|
backgroundColor: '#666'
|
|
}),
|
|
color2: css({
|
|
backgroundColor: '#999'
|
|
}),
|
|
color3: css({
|
|
backgroundColor: 'blue'
|
|
}),
|
|
color4: css({
|
|
backgroundColor: 'orange'
|
|
}),
|
|
color5: css({
|
|
backgroundColor: 'red'
|
|
}),
|
|
fixed: css({
|
|
width: 20,
|
|
height: 20
|
|
})
|
|
};
|
|
|
|
module.exports = Box;
|