From bdcc54809ca1642de72029a8078d6e0d8e3ea117 Mon Sep 17 00:00:00 2001 From: Nicolas Gallagher Date: Tue, 9 Jun 2015 20:05:01 -0700 Subject: [PATCH] Minor renames and docs --- README.md | 85 +++++++++++++------ index.js | 8 +- .../{SDKComponent.js => Component.js} | 10 +-- lib/components/Image.js | 8 +- lib/components/Text.js | 9 +- lib/components/View.js | 8 +- ...{getOtherProps.js => filterObjectProps.js} | 24 +++--- 7 files changed, 90 insertions(+), 62 deletions(-) rename lib/components/{SDKComponent.js => Component.js} (86%) rename lib/{getOtherProps.js => filterObjectProps.js} (55%) diff --git a/README.md b/README.md index 5206c6f3..118fcd7e 100644 --- a/README.md +++ b/README.md @@ -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 ( - ); @@ -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 ``` diff --git a/index.js b/index.js index 283ef7c1..131addcd 100644 --- a/index.js +++ b/index.js @@ -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 }; diff --git a/lib/components/SDKComponent.js b/lib/components/Component.js similarity index 86% rename from lib/components/SDKComponent.js rename to lib/components/Component.js index c0f83fae..f3d97661 100644 --- a/lib/components/SDKComponent.js +++ b/lib/components/Component.js @@ -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; diff --git a/lib/components/Image.js b/lib/components/Image.js index bb755cbd..1e1f4e6f 100644 --- a/lib/components/Image.js +++ b/lib/components/Image.js @@ -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 ( - { - 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); }