From 14082fe3c689c5719973cdadf74ffffeca7f41ec Mon Sep 17 00:00:00 2001 From: Gabriel Donadel Dall'Agnol Date: Sun, 6 Nov 2022 17:54:09 -0300 Subject: [PATCH] feat: Update documentation regarding W3C Web Styles --- docs/image.md | 10 ++++++++++ docs/text-style-props.md | 6 +++--- docs/transforms.md | 14 ++++++++++---- docs/view-style-props.md | 13 +++++++++++++ docs/view.md | 2 -- 5 files changed, 36 insertions(+), 9 deletions(-) diff --git a/docs/image.md b/docs/image.md index ad09cb513e1..aee0e5e6f5a 100644 --- a/docs/image.md +++ b/docs/image.md @@ -314,6 +314,16 @@ Similarly to `source`, this property represents the resource used to render the --- +### `objectFit` + +Determines how to resize the image when the frame doesn't match the raw image dimensions. + +| Type | Default | +| ------------------------------------------------------ | --------- | +| enum(`'cover'`, `'contain'`, `'fill'`, `'scale-down'`) | `'cover'` | + +--- + ### `onError` Invoked on load error. diff --git a/docs/text-style-props.md b/docs/text-style-props.md index ab6404f046b..07e883b3ec3 100644 --- a/docs/text-style-props.md +++ b/docs/text-style-props.md @@ -387,9 +387,9 @@ export default App; Specifies font weight. The values `'normal'` and `'bold'` are supported for most fonts. Not all fonts have a variant for each of the numeric values, in that case the closest one is chosen. -| Type | Default | -| ----------------------------------------------------------------------------------------------------------- | ---------- | -| enum(`'normal'`, `'bold'`, `'100'`, `'200'`, `'300'`, `'400'`, `'500'`, `'600'`, `'700'`, `'800'`, `'900'`) | `'normal'` | +| Type | Default | +| --------------------------------------------------------------------------------------------------------------------- | ---------- | +| enum(`'normal'`, `'bold'`, `'100'`, `'200'`, `'300'`, `'400'`, `'500'`, `'600'`, `'700'`, `'800'`, `'900'`) or number | `'normal'` | --- diff --git a/docs/transforms.md b/docs/transforms.md index 35b0e882f61..5bc5ac7757a 100644 --- a/docs/transforms.md +++ b/docs/transforms.md @@ -270,7 +270,7 @@ export default App; ### `transform()` -`transform` accepts an array of transformation objects. Each object specifies the property that will be transformed as the key, and the value to use in the transformation. Objects should not be combined. Use a single key/value pair per object. +`transform` accepts an array of transformation objects or space-separated string values. Each object specifies the property that will be transformed as the key, and the value to use in the transformation. Objects should not be combined. Use a single key/value pair per object. The rotate transformations require a string so that the transform may be expressed in degrees (deg) or radians (rad). For example: @@ -278,15 +278,21 @@ The rotate transformations require a string so that the transform may be express transform([{ rotateX: '45deg' }, { rotateZ: '0.785398rad' }]); ``` +The same could also be achieved using a space-separated string: + +```js +transform('rotateX(45deg) rotateZ(0.785398rad)'); +``` + The skew transformations require a string so that the transform may be expressed in degrees (deg). For example: ```js transform([{ skewX: '45deg' }]); ``` -| Type | Required | -| ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------- | -| array of objects: {matrix: number[]}, {perspective: number}, {rotate: string}, {rotateX: string}, {rotateY: string}, {rotateZ: string}, {scale: number}, {scaleX: number}, {scaleY: number}, {translateX: number}, {translateY: number}, {skewX: string}, {skewY: string} | No | +| Type | Required | +| ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------- | +| array of objects: {matrix: number[]}, {perspective: number}, {rotate: string}, {rotateX: string}, {rotateY: string}, {rotateZ: string}, {scale: number}, {scaleX: number}, {scaleY: number}, {translateX: number}, {translateY: number}, {skewX: string}, {skewY: string} or string | No | --- diff --git a/docs/view-style-props.md b/docs/view-style-props.md index 05576a7a749..6925cbf103c 100644 --- a/docs/view-style-props.md +++ b/docs/view-style-props.md @@ -274,3 +274,16 @@ Sets the elevation of a view, using Android's underlying [elevation API](https:/ | Type | | ------ | | number | + +### `pointerEvents` + +Controls whether the `View` can be the target of touch events. + +- `'auto'`: The View can be the target of touch events. +- `'none'`: The View is never the target of touch events. +- `'box-none'`: The View is never the target of touch events but its subviews can be. +- `'box-only'`: The view can be the target of touch events but its subviews cannot be. + +| Type | +| --------------------------------------------- | +| enum('auto', 'box-none', 'box-only', 'none' ) | diff --git a/docs/view.md b/docs/view.md index 977351cd910..4cd987db7ad 100644 --- a/docs/view.md +++ b/docs/view.md @@ -618,8 +618,6 @@ Controls whether the `View` can be the target of touch events. } ``` -> Since `pointerEvents` does not affect layout/appearance, and we are already deviating from the spec by adding additional modes, we opt to not include `pointerEvents` on `style`. On some platforms, we would need to implement it as a `className` anyways. Using `style` or not is an implementation detail of the platform. - | Type | | -------------------------------------------- | | enum('box-none', 'none', 'box-only', 'auto') |