-
Notifications
You must be signed in to change notification settings - Fork 24.3k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat: mapped layout props for view component (#34590)
Summary:
This PR adds mapping for layout props, it maps
marginInlineStart: 'marginStart',
marginInlineEnd: 'marginEnd',
marginBlockStart: 'marginTop',
marginBlockEnd: 'marginBottom',
marginBlock: 'marginVertical',
marginInline: 'marginHorizontal',
paddingInlineStart: 'paddingStart',
paddingInlineEnd: 'paddingEnd',
paddingBlockStart: 'paddingTop',
paddingBlockEnd: 'paddingBottom',
paddingBlock: 'paddingVertical',
paddingInline: 'paddingHorizontal',
as requested on #34425
## Changelog
<!-- Help reviewers and the release process by writing your own changelog entry. For an example, see:
https://reactnative.dev/contributing/changelogs-in-pull-requests
-->
[General][Added] - Added CSS logical properties by mapping layout props.
Pull Request resolved: #34590
Test Plan:
```js
<View
style={[
{
marginBlockStart: 5, // maps to "marginTop"
borderWidth: 1,
borderRadius: 5,
padding: 5,
}
]}>
<Text style={{fontSize: 11}}>Hello World!</Text>
</View>
```
Reviewed By: cipolleschi
Differential Revision: D41108750
Pulled By: necolas
fbshipit-source-id: 870b9b58a740aba12290a0604a9f6b52aa52de4c- Loading branch information
1 parent
082a033
commit cf37479
Showing
10 changed files
with
254 additions
and
25 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,83 @@ | ||
| /** | ||
| * Copyright (c) Meta Platforms, Inc. and affiliates. | ||
| * | ||
| * This source code is licensed under the MIT license found in the | ||
| * LICENSE file in the root directory of this source tree. | ||
| * | ||
| * @format | ||
| * @emails oncall+react_native | ||
| */ | ||
|
|
||
| 'use strict'; | ||
|
|
||
| const processLayoutProps = require('../processStyles'); | ||
|
|
||
| describe('processLayoutProps', () => { | ||
| it('it should map layout style properties', () => { | ||
| const style = { | ||
| marginInlineStart: 10, | ||
| marginInlineEnd: 20, | ||
| marginBlockStart: 30, | ||
| marginBlockEnd: 40, | ||
| marginBlock: 50, | ||
| marginInline: 60, | ||
| paddingInlineStart: 70, | ||
| paddingInlineEnd: 80, | ||
| paddingBlockStart: 90, | ||
| paddingBlockEnd: 100, | ||
| paddingBlock: 110, | ||
| paddingInline: 120, | ||
| }; | ||
| const processedStyle = processLayoutProps(style); | ||
| expect(processedStyle.marginStart).toBe(10); | ||
| expect(processedStyle.marginEnd).toBe(20); | ||
| expect(processedStyle.marginTop).toBe(30); | ||
| expect(processedStyle.marginBottom).toBe(40); | ||
| expect(processedStyle.marginVertical).toBe(50); | ||
| expect(processedStyle.marginHorizontal).toBe(60); | ||
| expect(processedStyle.paddingStart).toBe(70); | ||
| expect(processedStyle.paddingEnd).toBe(80); | ||
| expect(processedStyle.paddingTop).toBe(90); | ||
| expect(processedStyle.paddingBottom).toBe(100); | ||
| expect(processedStyle.paddingVertical).toBe(110); | ||
| expect(processedStyle.paddingHorizontal).toBe(120); | ||
|
|
||
| expect(processedStyle.marginInlineStart).toBe(undefined); | ||
| expect(processedStyle.marginInlineEnd).toBe(undefined); | ||
| expect(processedStyle.marginBlockStart).toBe(undefined); | ||
| expect(processedStyle.marginBlockEnd).toBe(undefined); | ||
| expect(processedStyle.marginBlock).toBe(undefined); | ||
| expect(processedStyle.marginInline).toBe(undefined); | ||
| expect(processedStyle.paddingInlineStart).toBe(undefined); | ||
| expect(processedStyle.paddingInlineEnd).toBe(undefined); | ||
| expect(processedStyle.paddingBlockStart).toBe(undefined); | ||
| expect(processedStyle.paddingBlockEnd).toBe(undefined); | ||
| expect(processedStyle.paddingBlock).toBe(undefined); | ||
| expect(processedStyle.paddingInline).toBe(undefined); | ||
| }); | ||
|
|
||
| it('should override style properties', () => { | ||
| const style = {marginStart: 20, marginInlineStart: 40}; | ||
| const processedStyle = processLayoutProps(style); | ||
| expect(processedStyle.marginStart).toBe(40); | ||
| }); | ||
|
|
||
| it('should overwrite properties with `undefined`', () => { | ||
| const style = {marginInlineStart: 40, marginStart: undefined}; | ||
| const processedStyle = processLayoutProps(style); | ||
| expect(processedStyle.marginStart).toBe(40); | ||
| }); | ||
|
|
||
| it('should not fail on falsy values', () => { | ||
| expect(() => processLayoutProps({})).not.toThrow(); | ||
| expect(() => processLayoutProps(null)).not.toThrow(); | ||
| expect(() => processLayoutProps(false)).not.toThrow(); | ||
| expect(() => processLayoutProps(undefined)).not.toThrow(); | ||
| }); | ||
|
|
||
| it('should not change style if there is no layout style property', () => { | ||
| const style = {backgroundColor: '#000', width: 10}; | ||
| const processedStyle = processLayoutProps(style); | ||
| expect(processedStyle).toStrictEqual(style); | ||
| }); | ||
| }); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,45 @@ | ||
| /** | ||
| * Copyright (c) Meta Platforms, Inc. and affiliates. | ||
| * | ||
| * This source code is licensed under the MIT license found in the | ||
| * LICENSE file in the root directory of this source tree. | ||
| * | ||
| * @format | ||
| * @flow strict-local | ||
| */ | ||
|
|
||
| 'use strict'; | ||
|
|
||
| import type {____FlattenStyleProp_Internal} from './StyleSheetTypes'; | ||
|
|
||
| function processLayoutProps<T>( | ||
| flattenedStyle: ____FlattenStyleProp_Internal<T>, | ||
| ): ____FlattenStyleProp_Internal<T> { | ||
| const _flattenedStyle = {...flattenedStyle}; | ||
| const layoutPropMap = { | ||
| marginInlineStart: 'marginStart', | ||
| marginInlineEnd: 'marginEnd', | ||
| marginBlockStart: 'marginTop', | ||
| marginBlockEnd: 'marginBottom', | ||
| marginBlock: 'marginVertical', | ||
| marginInline: 'marginHorizontal', | ||
| paddingInlineStart: 'paddingStart', | ||
| paddingInlineEnd: 'paddingEnd', | ||
| paddingBlockStart: 'paddingTop', | ||
| paddingBlockEnd: 'paddingBottom', | ||
| paddingBlock: 'paddingVertical', | ||
| paddingInline: 'paddingHorizontal', | ||
| }; | ||
| if (_flattenedStyle) { | ||
| Object.keys(layoutPropMap).forEach(key => { | ||
| if (_flattenedStyle && _flattenedStyle[key] !== undefined) { | ||
| _flattenedStyle[layoutPropMap[key]] = _flattenedStyle[key]; | ||
| delete _flattenedStyle[key]; | ||
| } | ||
| }); | ||
| } | ||
|
|
||
| return _flattenedStyle; | ||
| } | ||
|
|
||
| module.exports = processLayoutProps; |
Oops, something went wrong.