zoriya/react-native-web
1
0
Fork 0
mirror of https://github.com/zoriya/react-native-web.git synced 2026-05-23 14:57:13 +00:00
Code Issues Packages Projects Releases Wiki Activity

Minor renames and docs

Browse Source
This commit is contained in:
Nicolas Gallagher
2015-06-09 20:05:01 -07:00
parent 78b23428bd
commit bdcc54809c
7 changed files with 90 additions and 62 deletions
Download Patch File Download Diff File Expand all files Collapse all files
README.md
+57 -28
View File
@@ -33,7 +33,7 @@ to happen at breakpoints. And that would avoid the need for any additional
CSS. Alternatively, rely on something similar to `react-style`'s approach and
duplicate the single-purpose classes within static CSS media queries.
## Example
### Example
```js
import React from 'react';
@@ -72,13 +72,17 @@ const style = {
export default Example;
```
## Component: `SDKComponent`
---
## Components
### `Component`
A component that manages styles across the `className` and `style` properties.
The building block upon which all other components in `react-web-sdk` are
build.
### PropTypes
#### PropTypes
All other props are transferred directly to the `element`.
@@ -86,32 +90,41 @@ All other props are transferred directly to the `element`.
+ `element`: `func` or `string`
+ `style`: `object`
### Examples
#### Examples
```js
const ViewStylePropTypes = {
import {Component, getOtherProps, pickProps} from 'react-web-sdk';
import React, {PropTypes} from 'react';
const ExampleStylePropTypes = {
opacity: PropTypes.number
};
const ViewStyleDefaultProps = {
const ExampleStyleDefaultProps = {
opacity: 1
};
class ViewExample extends React.Component {
class Example extends React.Component {
static propTypes = {
anExampleProp: PropTypes.number,
someExampleProp: PropTypes.string,
style: PropTypes.shape(ExampleStylePropTypes)
}
static defaultProps = {
style: ExampleStyleDefaultProps
}
render() {
// filter other props
const other = ReactWebSDK.getOtherProps(this);
// exclude other styles
const supportedStyle = ReactWebSDK.objectWithProps(this.props.style, ViewStylePropTypes);
// merge defaults with instance styles
const style = { ...ViewStyleDefaultProps, ...supportedStyle }
const other = getOtherProps(this);
const supportedStyle = pickProps(this.props.style, ExampleStylePropTypes);
const style = { ...ExampleStyleDefaultProps, ...supportedStyle }
return (
<SDKComponent
<Component
{...other}
children={this.props.children}
className={`ViewExample ${this.props.className}`}
element={this.props.element}
className={`Example`}
element="main"
style={style}
/>
);
@@ -120,11 +133,11 @@ class ViewExample extends React.Component {
```
## Component: `Image`
### `Image`
TODO
### PropTypes
#### PropTypes
All other props are transferred directly to the `element`.
@@ -134,7 +147,7 @@ All other props are transferred directly to the `element`.
+ `src`: `string`
+ `style`: `ImageStylePropTypes`
### ImageStylePropTypes
#### ImageStylePropTypes
+ `BackgroundPropTypes`
+ `BorderThemePropTypes`
@@ -142,11 +155,11 @@ All other props are transferred directly to the `element`.
+ `opacity`: `string`
## Component: `Text`
### `Text`
Text layout and styles.
### PropTypes
#### PropTypes
All other props are transferred directly to the `element`.
@@ -154,19 +167,19 @@ All other props are transferred directly to the `element`.
+ `element`: `func` or `string` (default `"div"`)
+ `style`: `TextStylePropTypes`
### TextStylePropTypes
#### TextStylePropTypes
+ ViewStylePropTypes
+ TypographicPropTypes
## Component: `View`
### `View`
`View` is a flexbox container and the fundamental building block for UI. It is
designed to be nested inside other `View`'s and to have 0-to-many children of
any type.
### PropTypes
#### PropTypes
All other props are transferred directly to the `element`.
@@ -175,7 +188,7 @@ All other props are transferred directly to the `element`.
+ `pointerEvents`: `oneOf('all', 'box-only', 'box-none', 'none')`
+ `style`: `ViewStylePropTypes`
### ViewStylePropTypes
#### ViewStylePropTypes
+ BackgroundPropTypes
+ BorderThemePropTypes
@@ -184,7 +197,7 @@ All other props are transferred directly to the `element`.
+ `color`: `string`
+ `opacity`: `number`
### ViewStyleDefaultProps
#### ViewStyleDefaultProps
Implements the default styles from
[facebook/css-layout](https://github.com/facebook/css-layout).
@@ -222,12 +235,26 @@ const ViewStyleDefaultProps = {
it in the DOM instead of relying of CSS. It also makes `top`, `left`,
`right`, `bottom` do something when not specifying `position:absolute`.
### Examples
#### Examples
```js
// TODO
```
---
## Utilities
### Object property filtering
Create a new object that includes or excludes a list of properties.
* `.getOtherProps(reactComponentInstance)` (strips propTypes from `this.props`)
* `.pickProps(obj, arrayOfIncludedProps)`
* `.omitProps(obj, arrayOfExcludedProps)`
---
## StylePropTypes
### Background
@@ -318,6 +345,8 @@ See this [guide to flexbox](https://css-tricks.com/snippets/css/a-guide-to-flexb
* `textTransform`: `oneOf('capitalize', 'lowercase', 'none', 'uppercase')`
* `wordWrap`: `oneOf('break-word', 'normal')`
---
## Development
```
index.js
+4 -4
View File
@@ -1,14 +1,14 @@
import getOtherProps, {objectWithProps} from './lib/getOtherProps';
import {getOtherProps, pickProps, omit} from './lib/filterObjectProps';
import Component from './lib/components/Component';
import Image from './lib/components/Image';
import SDKComponent from './lib/components/SDKComponent';
import Text from './lib/components/Text';
import View from './lib/components/View';
export default {
getOtherProps,
pickProps,
Component,
Image,
objectWithProps,
SDKComponent,
Text,
View
};
lib/components/SDKComponent.js → lib/components/Component.js
+5 -5
View File
@@ -1,11 +1,11 @@
import autoprefix from '../autoprefix';
import getOtherProps from '../getOtherProps';
import {getOtherProps} from '../filterObjectProps';
import React, {PropTypes} from 'react';
// styles
import styleMap from '../styleMap';
class SDKComponent extends React.Component {
class Component extends React.Component {
static _getPropTypes() {
return {
className: PropTypes.string,
@@ -68,7 +68,7 @@ class SDKComponent extends React.Component {
}
}
SDKComponent.propTypes = SDKComponent._getPropTypes();
SDKComponent.defaultProps = SDKComponent._getDefaultProps();
Component.propTypes = Component._getPropTypes();
Component.defaultProps = Component._getDefaultProps();
export default SDKComponent;
export default Component;
lib/components/Image.js
+4 -4
View File
@@ -1,7 +1,7 @@
import {objectWithProps} from '../getOtherProps';
import Component from './Component';
import {pickProps} from '../filterObjectProps';
import React, {PropTypes} from 'react';
import StylePropTypes from '../StylePropTypes';
import SDKComponent from './SDKComponent';
const ImageStyleDefaultProps = {
backgroundColor: 'lightGray',
@@ -39,11 +39,11 @@ class Image extends React.Component {
render() {
const { alt, className, src, style, ...other } = this.props;
const filteredStyle = objectWithProps(style, Object.keys(ImageStylePropTypes));
const filteredStyle = pickProps(style, Object.keys(ImageStylePropTypes));
const mergedStyle = { ...ImageStyleDefaultProps, ...filteredStyle };
return (
<SDKComponent
<Component
{...other}
alt={alt}
className={`Image ${className}`}
lib/components/Text.js
+5 -4
View File
@@ -1,7 +1,7 @@
import {objectWithProps} from '../getOtherProps';
import Component from './Component';
import {pickProps} from '../filterObjectProps';
import React, {PropTypes} from 'react';
import StylePropTypes from '../StylePropTypes';
import SDKComponent from './SDKComponent';
import {ViewStylePropTypes} from './View';
const TextStyleDefaultProps = {
@@ -45,11 +45,11 @@ class Text extends React.Component {
render() {
const { className, element, style, ...other } = this.props;
const filteredStyle = objectWithProps(style, Object.keys(TextStylePropTypes));
const filteredStyle = pickProps(style, Object.keys(TextStylePropTypes));
const mergedStyle = { ...TextStyleDefaultProps, ...filteredStyle };
return (
<SDKComponent
<Component
{...other}
className={`Text ${className}`}
element={element}
@@ -63,3 +63,4 @@ Text.propTypes = Text._getPropTypes();
Text.defaultProps = Text._getDefaultProps();
export default Text;
export {TextStylePropTypes};
lib/components/View.js
+4 -4
View File
@@ -1,7 +1,7 @@
import {objectWithProps} from '../getOtherProps';
import Component from './Component';
import {pickProps} from '../filterObjectProps';
import React, {PropTypes} from 'react';
import StylePropTypes from '../StylePropTypes';
import SDKComponent from './SDKComponent';
// https://github.com/facebook/css-layout#default-values
const ViewStyleDefaultProps = {
@@ -55,7 +55,7 @@ class View extends React.Component {
render() {
const { className, element, pointerEvents, style, ...other } = this.props;
const filteredStyle = objectWithProps(style, Object.keys(ViewStylePropTypes));
const filteredStyle = pickProps(style, Object.keys(ViewStylePropTypes));
const pointerEventsStyle = pointerEvents && { pointerEvents };
const mergedStyle = {
...ViewStyleDefaultProps,
@@ -64,7 +64,7 @@ class View extends React.Component {
};
return (
<SDKComponent
<Component
{...other}
className={`View ${className}`}
element={element}
lib/getOtherProps.js → lib/filterObjectProps.js
+11 -13
View File
@@ -1,12 +1,4 @@
/**
* Extract all props that are not part of the React Component's 'propTypes'
*/
export default (componentInstance) => {
const excludedProps = Object.keys(componentInstance.constructor.propTypes);
return objectWithoutProps(componentInstance.props, excludedProps);
};
function objectFilterProps(obj, props, excluded=false) {
function filterProps(obj, props, excluded=false) {
if (!Array.isArray(props)) {
throw new TypeError('props is not an Array');
}
@@ -28,10 +20,16 @@ function objectFilterProps(obj, props, excluded=false) {
return filtered;
}
export function objectWithProps(obj, props) {
return objectFilterProps(obj, props);
// Extract all props that are not part of the React Component's 'propTypes'
export function getOtherProps(componentInstance) {
const excludedProps = Object.keys(componentInstance.constructor.propTypes);
return omitProps(componentInstance.props, excludedProps);
}
export function objectWithoutProps(obj, props) {
return objectFilterProps(obj, props, true);
export function pickProps(obj, props) {
return filterProps(obj, props);
}
export function omitProps(obj, props) {
return filterProps(obj, props, true);
}