mirror of
https://github.com/status-im/react-native.git
synced 2025-02-11 17:07:09 +00:00
d43e0db81e
Summary: This PR adds support for both 'row-reverse' and 'column-reverse' for Android and iOS and is based on the changes in #6683 that looked like it's all but abandoned. It also adds examples for the new directions to the "Layout - Flexbox" section of UIExplorer as well as some rad new colors to the section to make the difference between "row-reverse" and "flex-end" more apparent. **Test plan (required)** Tested inside of UIExplorer Android <img width="571" alt="screen shot 2016-06-05 at 7 42 14 pm" src="https://cloud.githubusercontent.com/assets/4332237/15807140/cf8e05de-2b55-11e6-9366-a2e3194cabf8.png"> iOS <img width="578" alt="screen shot 2016-06-05 at 7 41 35 pm" src="https://cloud.githubusercontent.com/assets/4332237/15807143/dee8e9b8-2b55-11e6-8777-c30329fa54e8.png"> Closes https://github.com/facebook/react-native/pull/7938 Differential Revision: D3417182 fbshipit-source-id: e8c9f5976ca95b2d2069a5b31a20f6d6309eb3cc
111 lines
3.2 KiB
JavaScript
111 lines
3.2 KiB
JavaScript
/**
|
|
* 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 LayoutPropTypes
|
|
* @flow
|
|
*/
|
|
'use strict';
|
|
|
|
var ReactPropTypes = require('ReactPropTypes');
|
|
|
|
/**
|
|
* React Native's layout system is based on Flexbox and is powered both
|
|
* on iOS and Android by an open source project called css-layout:
|
|
* https://github.com/facebook/css-layout
|
|
*
|
|
* The implementation in css-layout is slightly different from what the
|
|
* Flexbox spec defines - for example, we chose more sensible default
|
|
* values. Please refer to the css-layout README for details.
|
|
*
|
|
* These properties are a subset of our styles that are consumed by the layout
|
|
* algorithm and affect the positioning and sizing of views.
|
|
*/
|
|
var LayoutPropTypes = {
|
|
width: ReactPropTypes.number,
|
|
height: ReactPropTypes.number,
|
|
top: ReactPropTypes.number,
|
|
left: ReactPropTypes.number,
|
|
right: ReactPropTypes.number,
|
|
bottom: ReactPropTypes.number,
|
|
margin: ReactPropTypes.number,
|
|
marginVertical: ReactPropTypes.number,
|
|
marginHorizontal: ReactPropTypes.number,
|
|
marginTop: ReactPropTypes.number,
|
|
marginBottom: ReactPropTypes.number,
|
|
marginLeft: ReactPropTypes.number,
|
|
marginRight: ReactPropTypes.number,
|
|
padding: ReactPropTypes.number,
|
|
paddingVertical: ReactPropTypes.number,
|
|
paddingHorizontal: ReactPropTypes.number,
|
|
paddingTop: ReactPropTypes.number,
|
|
paddingBottom: ReactPropTypes.number,
|
|
paddingLeft: ReactPropTypes.number,
|
|
paddingRight: ReactPropTypes.number,
|
|
borderWidth: ReactPropTypes.number,
|
|
borderTopWidth: ReactPropTypes.number,
|
|
borderRightWidth: ReactPropTypes.number,
|
|
borderBottomWidth: ReactPropTypes.number,
|
|
borderLeftWidth: ReactPropTypes.number,
|
|
|
|
position: ReactPropTypes.oneOf([
|
|
'absolute',
|
|
'relative'
|
|
]),
|
|
|
|
// https://developer.mozilla.org/en-US/docs/Web/CSS/flex-direction
|
|
flexDirection: ReactPropTypes.oneOf([
|
|
'row',
|
|
'row-reverse',
|
|
'column',
|
|
'column-reverse'
|
|
]),
|
|
|
|
// https://developer.mozilla.org/en-US/docs/Web/CSS/flex-wrap
|
|
flexWrap: ReactPropTypes.oneOf([
|
|
'wrap',
|
|
'nowrap'
|
|
]),
|
|
|
|
// How to align children in the main direction
|
|
// https://developer.mozilla.org/en-US/docs/Web/CSS/justify-content
|
|
justifyContent: ReactPropTypes.oneOf([
|
|
'flex-start',
|
|
'flex-end',
|
|
'center',
|
|
'space-between',
|
|
'space-around'
|
|
]),
|
|
|
|
// How to align children in the cross direction
|
|
// https://developer.mozilla.org/en-US/docs/Web/CSS/align-items
|
|
alignItems: ReactPropTypes.oneOf([
|
|
'flex-start',
|
|
'flex-end',
|
|
'center',
|
|
'stretch'
|
|
]),
|
|
|
|
// How to align the element in the cross direction
|
|
// https://developer.mozilla.org/en-US/docs/Web/CSS/align-items
|
|
alignSelf: ReactPropTypes.oneOf([
|
|
'auto',
|
|
'flex-start',
|
|
'flex-end',
|
|
'center',
|
|
'stretch'
|
|
]),
|
|
|
|
// https://developer.mozilla.org/en-US/docs/Web/CSS/flex
|
|
flex: ReactPropTypes.number,
|
|
|
|
// https://developer.mozilla.org/en-US/docs/Web/CSS/z-index
|
|
zIndex: ReactPropTypes.number,
|
|
};
|
|
|
|
module.exports = LayoutPropTypes;
|