mirror of
https://github.com/status-im/react-native.git
synced 2025-01-10 01:25:39 +00:00
1f9c9ecb4b
Summary: Introduce `overflow:scroll` so that scrolling can be implemented without the current overflow:visible hackiness. Currently we use AT_MOST to measure in the cross axis but not in the main axis. This was done to enable scrolling containers where children are not constraint in the main axis by their parent. This caused problems for non-scrolling containers though as it meant that their children cannot be measured correctly in the main axis. Introducing `overflow:scroll` fixes this. Reviewed By: astreet Differential Revision: D3855801 fbshipit-source-id: 6077b0bcb68fe5ddd4aa22926acab40ff4d83949
384 lines
13 KiB
JavaScript
384 lines
13 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('react/lib/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. Since our layout docs are generated from the comments in this
|
|
* file, please keep a brief comment describing each prop type.
|
|
*
|
|
* 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` sets the width of this component.
|
|
*
|
|
* It works similarly to `width` in CSS, but in React Native you
|
|
* must use logical pixel units, rather than percents, ems, or any of that.
|
|
* See https://developer.mozilla.org/en-US/docs/Web/CSS/width for more details.
|
|
*/
|
|
width: ReactPropTypes.number,
|
|
|
|
/** `height` sets the height of this component.
|
|
*
|
|
* It works similarly to `height` in CSS, but in React Native you
|
|
* must use logical pixel units, rather than percents, ems, or any of that.
|
|
* See https://developer.mozilla.org/en-US/docs/Web/CSS/height for more details.
|
|
*/
|
|
height: ReactPropTypes.number,
|
|
|
|
/** `top` is the number of logical pixels to offset the top edge of
|
|
* this component.
|
|
*
|
|
* It works similarly to `top` in CSS, but in React Native you must
|
|
* use logical pixel units, rather than percents, ems, or any of that.
|
|
*
|
|
* See https://developer.mozilla.org/en-US/docs/Web/CSS/top
|
|
* for more details of how `top` affects layout.
|
|
*/
|
|
top: ReactPropTypes.number,
|
|
|
|
/** `left` is the number of logical pixels to offset the left edge of
|
|
* this component.
|
|
*
|
|
* It works similarly to `left` in CSS, but in React Native you must
|
|
* use logical pixel units, rather than percents, ems, or any of that.
|
|
*
|
|
* See https://developer.mozilla.org/en-US/docs/Web/CSS/left
|
|
* for more details of how `left` affects layout.
|
|
*/
|
|
left: ReactPropTypes.number,
|
|
|
|
/** `right` is the number of logical pixels to offset the right edge of
|
|
* this component.
|
|
*
|
|
* It works similarly to `right` in CSS, but in React Native you must
|
|
* use logical pixel units, rather than percents, ems, or any of that.
|
|
*
|
|
* See https://developer.mozilla.org/en-US/docs/Web/CSS/right
|
|
* for more details of how `right` affects layout.
|
|
*/
|
|
right: ReactPropTypes.number,
|
|
|
|
/** `bottom` is the number of logical pixels to offset the bottom edge of
|
|
* this component.
|
|
*
|
|
* It works similarly to `bottom` in CSS, but in React Native you must
|
|
* use logical pixel units, rather than percents, ems, or any of that.
|
|
*
|
|
* See https://developer.mozilla.org/en-US/docs/Web/CSS/bottom
|
|
* for more details of how `top` affects layout.
|
|
*/
|
|
bottom: ReactPropTypes.number,
|
|
|
|
/** `minWidth` is the minimum width for this component, in logical pixels.
|
|
*
|
|
* It works similarly to `min-width` in CSS, but in React Native you
|
|
* must use logical pixel units, rather than percents, ems, or any of that.
|
|
*
|
|
* See https://developer.mozilla.org/en-US/docs/Web/CSS/min-width
|
|
* for more details.
|
|
*/
|
|
minWidth: ReactPropTypes.number,
|
|
|
|
/** `maxWidth` is the maximum width for this component, in logical pixels.
|
|
*
|
|
* It works similarly to `max-width` in CSS, but in React Native you
|
|
* must use logical pixel units, rather than percents, ems, or any of that.
|
|
*
|
|
* See https://developer.mozilla.org/en-US/docs/Web/CSS/max-width
|
|
* for more details.
|
|
*/
|
|
maxWidth: ReactPropTypes.number,
|
|
|
|
/** `minHeight` is the minimum height for this component, in logical pixels.
|
|
*
|
|
* It works similarly to `min-height` in CSS, but in React Native you
|
|
* must use logical pixel units, rather than percents, ems, or any of that.
|
|
*
|
|
* See https://developer.mozilla.org/en-US/docs/Web/CSS/min-height
|
|
* for more details.
|
|
*/
|
|
minHeight: ReactPropTypes.number,
|
|
|
|
/** `maxHeight` is the maximum height for this component, in logical pixels.
|
|
*
|
|
* It works similarly to `max-height` in CSS, but in React Native you
|
|
* must use logical pixel units, rather than percents, ems, or any of that.
|
|
*
|
|
* See https://developer.mozilla.org/en-US/docs/Web/CSS/max-height
|
|
* for more details.
|
|
*/
|
|
maxHeight: ReactPropTypes.number,
|
|
|
|
/** Setting `margin` has the same effect as setting each of
|
|
* `marginTop`, `marginLeft`, `marginBottom`, and `marginRight`.
|
|
* See https://developer.mozilla.org/en-US/docs/Web/CSS/margin
|
|
* for more details.
|
|
*/
|
|
margin: ReactPropTypes.number,
|
|
|
|
/** Setting `marginVertical` has the same effect as setting both
|
|
* `marginTop` and `marginBottom`.
|
|
*/
|
|
marginVertical: ReactPropTypes.number,
|
|
|
|
/** Setting `marginHorizontal` has the same effect as setting
|
|
* both `marginLeft` and `marginRight`.
|
|
*/
|
|
marginHorizontal: ReactPropTypes.number,
|
|
|
|
/** `marginTop` works like `margin-top` in CSS.
|
|
* See https://developer.mozilla.org/en-US/docs/Web/CSS/margin-top
|
|
* for more details.
|
|
*/
|
|
marginTop: ReactPropTypes.number,
|
|
|
|
/** `marginBottom` works like `margin-bottom` in CSS.
|
|
* See https://developer.mozilla.org/en-US/docs/Web/CSS/margin-bottom
|
|
* for more details.
|
|
*/
|
|
marginBottom: ReactPropTypes.number,
|
|
|
|
/** `marginLeft` works like `margin-left` in CSS.
|
|
* See https://developer.mozilla.org/en-US/docs/Web/CSS/margin-left
|
|
* for more details.
|
|
*/
|
|
marginLeft: ReactPropTypes.number,
|
|
|
|
/** `marginRight` works like `margin-right` in CSS.
|
|
* See https://developer.mozilla.org/en-US/docs/Web/CSS/margin-right
|
|
* for more details.
|
|
*/
|
|
marginRight: ReactPropTypes.number,
|
|
|
|
/** Setting `padding` has the same effect as setting each of
|
|
* `paddingTop`, `paddingBottom`, `paddingLeft`, and `paddingRight`.
|
|
* See https://developer.mozilla.org/en-US/docs/Web/CSS/padding
|
|
* for more details.
|
|
*/
|
|
padding: ReactPropTypes.number,
|
|
|
|
/** Setting `paddingVertical` is like setting both of
|
|
* `paddingTop` and `paddingBottom`.
|
|
*/
|
|
paddingVertical: ReactPropTypes.number,
|
|
|
|
/** Setting `paddingHorizontal` is like setting both of
|
|
* `paddingLeft` and `paddingRight`.
|
|
*/
|
|
paddingHorizontal: ReactPropTypes.number,
|
|
|
|
/** `paddingTop` works like `padding-top` in CSS.
|
|
* See https://developer.mozilla.org/en-US/docs/Web/CSS/padding-top
|
|
* for more details.
|
|
*/
|
|
paddingTop: ReactPropTypes.number,
|
|
|
|
/** `paddingBottom` works like `padding-bottom` in CSS.
|
|
* See https://developer.mozilla.org/en-US/docs/Web/CSS/padding-bottom
|
|
* for more details.
|
|
*/
|
|
paddingBottom: ReactPropTypes.number,
|
|
|
|
/** `paddingLeft` works like `padding-left` in CSS.
|
|
* See https://developer.mozilla.org/en-US/docs/Web/CSS/padding-left
|
|
* for more details.
|
|
*/
|
|
paddingLeft: ReactPropTypes.number,
|
|
|
|
/** `paddingRight` works like `padding-right` in CSS.
|
|
* See https://developer.mozilla.org/en-US/docs/Web/CSS/padding-right
|
|
* for more details.
|
|
*/
|
|
paddingRight: ReactPropTypes.number,
|
|
|
|
/** `borderWidth` works like `border-width` in CSS.
|
|
* See https://developer.mozilla.org/en-US/docs/Web/CSS/border-width
|
|
* for more details.
|
|
*/
|
|
borderWidth: ReactPropTypes.number,
|
|
|
|
/** `borderTopWidth` works like `border-top-width` in CSS.
|
|
* See https://developer.mozilla.org/en-US/docs/Web/CSS/border-top-width
|
|
* for more details.
|
|
*/
|
|
borderTopWidth: ReactPropTypes.number,
|
|
|
|
/** `borderRightWidth` works like `border-right-width` in CSS.
|
|
* See https://developer.mozilla.org/en-US/docs/Web/CSS/border-right-width
|
|
* for more details.
|
|
*/
|
|
borderRightWidth: ReactPropTypes.number,
|
|
|
|
/** `borderBottomWidth` works like `border-bottom-width` in CSS.
|
|
* See https://developer.mozilla.org/en-US/docs/Web/CSS/border-bottom-width
|
|
* for more details.
|
|
*/
|
|
borderBottomWidth: ReactPropTypes.number,
|
|
|
|
/** `borderLeftWidth` works like `border-left-width` in CSS.
|
|
* See https://developer.mozilla.org/en-US/docs/Web/CSS/border-left-width
|
|
* for more details.
|
|
*/
|
|
borderLeftWidth: ReactPropTypes.number,
|
|
|
|
/** `position` in React Native is similar to regular CSS, but
|
|
* everything is set to `relative` by default, so `absolute`
|
|
* positioning is always just relative to the parent.
|
|
*
|
|
* If you want to position a child using specific numbers of logical
|
|
* pixels relative to its parent, set the child to have `absolute`
|
|
* position.
|
|
*
|
|
* If you want to position a child relative to something
|
|
* that is not its parent, just don't use styles for that. Use the
|
|
* component tree.
|
|
*
|
|
* See https://github.com/facebook/css-layout
|
|
* for more details on how `position` differs between React Native
|
|
* and CSS.
|
|
*/
|
|
position: ReactPropTypes.oneOf([
|
|
'absolute',
|
|
'relative'
|
|
]),
|
|
|
|
/** `flexDirection` controls which directions children of a container go.
|
|
* `row` goes left to right, `column` goes top to bottom, and you may
|
|
* be able to guess what the other two do. It works like `flex-direction`
|
|
* in CSS, except the default is `column`.
|
|
* See https://developer.mozilla.org/en-US/docs/Web/CSS/flex-direction
|
|
* for more details.
|
|
*/
|
|
flexDirection: ReactPropTypes.oneOf([
|
|
'row',
|
|
'row-reverse',
|
|
'column',
|
|
'column-reverse'
|
|
]),
|
|
|
|
/** `flexWrap` controls whether children can wrap around after they
|
|
* hit the end of a flex container.
|
|
* It works like `flex-wrap` in CSS (default: nowrap).
|
|
* See https://developer.mozilla.org/en-US/docs/Web/CSS/flex-wrap
|
|
* for more details.
|
|
*/
|
|
flexWrap: ReactPropTypes.oneOf([
|
|
'wrap',
|
|
'nowrap'
|
|
]),
|
|
|
|
/** `justifyContent` aligns children in the main direction.
|
|
* For example, if children are flowing vertically, `justifyContent`
|
|
* controls how they align vertically.
|
|
* It works like `justify-content` in CSS (default: flex-start).
|
|
* See https://developer.mozilla.org/en-US/docs/Web/CSS/justify-content
|
|
* for more details.
|
|
*/
|
|
justifyContent: ReactPropTypes.oneOf([
|
|
'flex-start',
|
|
'flex-end',
|
|
'center',
|
|
'space-between',
|
|
'space-around'
|
|
]),
|
|
|
|
/** `alignItems` aligns children in the cross direction.
|
|
* For example, if children are flowing vertically, `alignItems`
|
|
* controls how they align horizontally.
|
|
* It works like `align-items` in CSS (default: stretch).
|
|
* See https://developer.mozilla.org/en-US/docs/Web/CSS/align-items
|
|
* for more details.
|
|
*/
|
|
alignItems: ReactPropTypes.oneOf([
|
|
'flex-start',
|
|
'flex-end',
|
|
'center',
|
|
'stretch'
|
|
]),
|
|
|
|
/** `alignSelf` controls how a child aligns in the cross direction,
|
|
* overriding the `alignItems` of the parent. It works like `align-self`
|
|
* in CSS (default: auto).
|
|
* See https://developer.mozilla.org/en-US/docs/Web/CSS/align-self
|
|
* for more details.
|
|
*/
|
|
alignSelf: ReactPropTypes.oneOf([
|
|
'auto',
|
|
'flex-start',
|
|
'flex-end',
|
|
'center',
|
|
'stretch'
|
|
]),
|
|
|
|
/** `overflow` controls how a children are measured and displayed.
|
|
* `overflow: hidden` causes views to be clipped while `overflow: scroll`
|
|
* causes views to be measured independently of their parents main axis.`
|
|
* It works like `overflow` in CSS (default: visible).
|
|
* See https://developer.mozilla.org/en/docs/Web/CSS/overflow
|
|
* for more details.
|
|
*/
|
|
overflow: ReactPropTypes.oneOf([
|
|
'visible',
|
|
'hidden',
|
|
'scroll',
|
|
]),
|
|
|
|
/** In React Native `flex` does not work the same way that it does in CSS.
|
|
* `flex` is a number rather than a string, and it works
|
|
* according to the `css-layout` library
|
|
* at https://github.com/facebook/css-layout.
|
|
*
|
|
* When `flex` is a positive number, it makes the component flexible
|
|
* and it will be sized proportional to its flex value. So a
|
|
* component with `flex` set to 2 will take twice the space as a
|
|
* component with `flex` set to 1.
|
|
*
|
|
* When `flex` is 0, the component is sized according to `width`
|
|
* and `height` and it is inflexible.
|
|
*
|
|
* When `flex` is -1, the component is normally sized according
|
|
* `width` and `height`. However, if there's not enough space,
|
|
* the component will shrink to its `minWidth` and `minHeight`.
|
|
*
|
|
* flexGrow, flexShrink, and flexBasis work the same as in CSS.
|
|
*/
|
|
flex: ReactPropTypes.number,
|
|
flexGrow: ReactPropTypes.number,
|
|
flexShrink: ReactPropTypes.number,
|
|
flexBasis: ReactPropTypes.number,
|
|
|
|
/** `zIndex` controls which components display on top of others.
|
|
* Normally, you don't use `zIndex`. Components render according to
|
|
* their order in the document tree, so later components draw over
|
|
* earlier ones. `zIndex` may be useful if you have animations or custom
|
|
* modal interfaces where you don't want this behavior.
|
|
*
|
|
* It works like the CSS `z-index` property - components with a larger
|
|
* `zIndex` will render on top. Think of the z-direction like it's
|
|
* pointing from the phone into your eyeball.
|
|
* See https://developer.mozilla.org/en-US/docs/Web/CSS/z-index for
|
|
* more details.
|
|
*/
|
|
zIndex: ReactPropTypes.number,
|
|
};
|
|
|
|
module.exports = LayoutPropTypes;
|