From 5ce42d4e2a2a37a63b26506eb0038e4fdc67e98b Mon Sep 17 00:00:00 2001 From: Fadil Sutomo Date: Thu, 21 Jul 2016 07:53:22 +0700 Subject: [PATCH 1/4] Add IndicatorSizePropType --- Libraries/react-native/react-native.js | 1 + Libraries/react-native/react-native.js.flow | 1 + 2 files changed, 2 insertions(+) diff --git a/Libraries/react-native/react-native.js b/Libraries/react-native/react-native.js index 4ce701b3c89014..520cc93ac43323 100644 --- a/Libraries/react-native/react-native.js +++ b/Libraries/react-native/react-native.js @@ -121,6 +121,7 @@ const ReactNative = { get ColorPropType() { return require('ColorPropType'); }, get EdgeInsetsPropType() { return require('EdgeInsetsPropType'); }, get PointPropType() { return require('PointPropType'); }, + get IndicatorSizePropType() { return require('IndicatorSizePropType'); }, // See http://facebook.github.io/react/docs/addons.html addons: { diff --git a/Libraries/react-native/react-native.js.flow b/Libraries/react-native/react-native.js.flow index 930ec4e04c6d96..3d3cb265fe1e22 100644 --- a/Libraries/react-native/react-native.js.flow +++ b/Libraries/react-native/react-native.js.flow @@ -133,6 +133,7 @@ var ReactNative = { ColorPropType: require('ColorPropType'), EdgeInsetsPropType: require('EdgeInsetsPropType'), PointPropType: require('PointPropType'), + IndicatorSizePropType: require('IndicatorSizePropType'), }; module.exports = ReactNative; From ecd5b299c673a51e5794d3a65bd170883015ecd0 Mon Sep 17 00:00:00 2001 From: Fadil Sutomo Date: Mon, 18 Jul 2016 00:27:07 +0700 Subject: [PATCH 2/4] Add IndicatorSize docs --- docs/IndicatorSize.md | 15 +++++++++++++++ website/layout/AutodocsLayout.js | 3 +++ 2 files changed, 18 insertions(+) create mode 100644 docs/IndicatorSize.md diff --git a/docs/IndicatorSize.md b/docs/IndicatorSize.md new file mode 100644 index 00000000000000..67635de9bbc88a --- /dev/null +++ b/docs/IndicatorSize.md @@ -0,0 +1,15 @@ +--- +id: indicatorSize +title: Indicator Size +layout: docs +category: Guides +permalink: docs/indicator-size.html +next: images +previous: integration-with-existing-apps +--- + +The following formats are supported: + +- `'small'` (size: 20) +- `'large'` (size: 36) +- `positive number` diff --git a/website/layout/AutodocsLayout.js b/website/layout/AutodocsLayout.js index ceebe4aca5488b..8bfb69309b95a6 100644 --- a/website/layout/AutodocsLayout.js +++ b/website/layout/AutodocsLayout.js @@ -74,6 +74,9 @@ function renderType(type) { if (type.raw === 'ColorPropType') { return color; } + if (type.raw === 'IndicatorSizePropType') { + return indicator size; + } if (type.raw === 'EdgeInsetsPropType') { return '{top: number, left: number, bottom: number, right: number}'; } From 08015c0107674b72cccfef3fecfa81820143fbd9 Mon Sep 17 00:00:00 2001 From: Fadil Sutomo Date: Sun, 17 Jul 2016 14:57:40 +0700 Subject: [PATCH 3/4] Add examples with custom size number usage --- .../UIExplorer/js/ActivityIndicatorExample.js | 28 +++++++++++++++++-- 1 file changed, 25 insertions(+), 3 deletions(-) diff --git a/Examples/UIExplorer/js/ActivityIndicatorExample.js b/Examples/UIExplorer/js/ActivityIndicatorExample.js index 4832b1d0eb1958..905d548a246098 100644 --- a/Examples/UIExplorer/js/ActivityIndicatorExample.js +++ b/Examples/UIExplorer/js/ActivityIndicatorExample.js @@ -113,8 +113,8 @@ exports.examples = [ return ( ); } @@ -151,12 +151,34 @@ exports.examples = [ } }, { - title: 'Custom size', + title: 'Custom size (size: 49)', + render() { + return ( + + ); + } + }, + { + title: 'Custom size (size: 57)', + render() { + return ( + + ); + } + }, + { + title: 'Custom size (size: 31, scale transform: 1.5)', render() { return ( ); } From 6e91039407e6228c63ca55be4102626cb3257158 Mon Sep 17 00:00:00 2001 From: Fadil Sutomo Date: Sun, 17 Jul 2016 14:38:59 +0700 Subject: [PATCH 4/4] Accept number for size prop Previously, size can only accept either 'small' or 'large'. And to obtain a custom size, scale transformation is used. This is to let users to possibly pass number value to define ActivityIndicator's size. --- .../ActivityIndicator/ActivityIndicator.js | 33 ++++++++------- Libraries/StyleSheet/IndicatorSizePropType.js | 41 +++++++++++++++++++ 2 files changed, 59 insertions(+), 15 deletions(-) create mode 100644 Libraries/StyleSheet/IndicatorSizePropType.js diff --git a/Libraries/Components/ActivityIndicator/ActivityIndicator.js b/Libraries/Components/ActivityIndicator/ActivityIndicator.js index 282960556e3174..c3f67b95c2246d 100644 --- a/Libraries/Components/ActivityIndicator/ActivityIndicator.js +++ b/Libraries/Components/ActivityIndicator/ActivityIndicator.js @@ -12,6 +12,7 @@ 'use strict'; const ColorPropType = require('ColorPropType'); +const IndicatorSizePropType = require('IndicatorSizePropType'); const NativeMethodsMixin = require('react/lib/NativeMethodsMixin'); const Platform = require('Platform'); const PropTypes = require('react/lib/ReactPropTypes'); @@ -40,13 +41,9 @@ const ActivityIndicator = React.createClass({ */ color: ColorPropType, /** - * Size of the indicator. Small has a height of 20, large has a height of 36. - * Other sizes can be obtained using a scale transform. + * Size of the indicator (default is 20). */ - size: PropTypes.oneOf([ - 'small', - 'large', - ]), + size: IndicatorSizePropType, /** * Whether the indicator should hide when not animating (true by default). * @@ -60,21 +57,27 @@ const ActivityIndicator = React.createClass({ animating: true, color: Platform.OS === 'ios' ? GRAY : undefined, hidesWhenStopped: true, - size: 'small', }; }, render() { const {onLayout, style, ...props} = this.props; let sizeStyle; - switch (props.size) { - case 'small': - sizeStyle = styles.sizeSmall; - break; - case 'large': - sizeStyle = styles.sizeLarge; - break; + if (isNaN(props.size)) { + switch (props.size) { + case null: + case undefined: + case 'small': + sizeStyle = styles.sizeSmall; + break; + case 'large': + sizeStyle = styles.sizeLarge; + break; + } + } else { + sizeStyle = {height: props.size, width: props.size}; } + return ( + /> ); } diff --git a/Libraries/StyleSheet/IndicatorSizePropType.js b/Libraries/StyleSheet/IndicatorSizePropType.js new file mode 100644 index 00000000000000..e35f9ac755d91d --- /dev/null +++ b/Libraries/StyleSheet/IndicatorSizePropType.js @@ -0,0 +1,41 @@ +/** + * Copyright (c) 2015-present, Facebook, Inc. + * All rights reserved. + * + * This source code is licensed under the BSD-style license found in the + * LICENSE file in the root directory of this source tree. An additional grant + * of patent rights can be found in the PATENTS file in the same directory. + * + * @providesModule IndicatorSizePropType + */ +'use strict'; + +var ReactPropTypeLocationNames = require('react/lib/ReactPropTypeLocationNames'); + +var indicatorSizePropType = function(isRequired, props, propName, componentName, location, propFullName) { + var size = props[propName]; + + if (size !== undefined && size !== null && typeof size !== 'number' && size !== 'small' && size !== 'large') { + var locationName = ReactPropTypeLocationNames[location]; + return new Error( + 'Invalid ' + ReactPropTypeLocationNames[location] + ' `' + (propFullName || propName) + + '` supplied to `' + componentName + '`: ' + size + '\n' + + `Valid size formats are + - 'small' + - 'large' + - positive number + `); + } + + if (typeof size === 'number') { + if (size <= 0) { + return new Error( + 'Size number has to be greater than 0. Default size will be used' + ); + } + } + +}; + +var IndicatorSizePropType = indicatorSizePropType.bind(null, false); +module.exports = IndicatorSizePropType;