Files
react-native/ReactCommon/react/renderer/components/view/YogaStylableProps.h
T
Nick Gerleman 67b8e182fa Add Fabric implementation of flow-relative padding and margin (#35342)
Summary:
Pull Request resolved: https://github.com/facebook/react-native/pull/35342

This is a native implementation of the JS shimmed layout-specific properties in https://github.com/facebook/react-native/pull/35316.

There is an experiment splitting the prop splitting codepath in Fabric, so this change effectively has two implementations depending on whether `enablePropIteratorSetter` is enabled.

None of these changes make sense to propagate Yoga. `inlineEnd`, etc are already mapped to `YGEdgeStart` and `YGEdgeEnd`, but RN's mapping used a different name. Then `blockStart`, `blockEnd`, map directly to existing edges in all cases since we don't support a writing mode.

On web, the last value in the style which computes the given dimension is given precedence. E.g. if "left" comes after "start" it will be chosen. Yoga stylesheets are unordered, and precedence for edges is given based on specificity (left > start > horizontal > all).

We give precedence to new renamings (e.g. start to inlineStart), but to preserve consistent behavior, we give precedence to specific edges before overwriting them with flow relative ones (e.g. marginTop has precedence over marginBlockStar).

Changelog:
[General][Added] - Add Fabric implementation of flow-relative padding and margin

Reviewed By: javache

Differential Revision: D41267765

fbshipit-source-id: 896e2ed71fe8bf83aef00b0a9d70fd20b2ce47a7
2022-11-16 12:31:33 -08:00

82 lines
2.1 KiB
C++

/*
* 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.
*/
#pragma once
#include <yoga/YGStyle.h>
#include <react/renderer/core/Props.h>
#include <react/renderer/core/PropsParserContext.h>
#include <react/renderer/debug/DebugStringConvertible.h>
namespace facebook {
namespace react {
class YogaStylableProps : public Props {
using CompactValue = facebook::yoga::detail::CompactValue;
public:
YogaStylableProps() = default;
YogaStylableProps(
const PropsParserContext &context,
YogaStylableProps const &sourceProps,
RawProps const &rawProps,
bool shouldSetRawProps = true);
void setProp(
const PropsParserContext &context,
RawPropsPropNameHash hash,
const char *propName,
RawValue const &value);
#ifdef ANDROID
void propsDiffMapBuffer(Props const *oldProps, MapBufferBuilder &builder)
const override;
#endif
#pragma mark - Props
YGStyle yogaStyle{};
// Duplicates of existing properties with different names, taking
// precendence. E.g. "marginBlock" instead of "marginVertical"
CompactValue marginInline;
CompactValue marginInlineStart;
CompactValue marginInlineEnd;
CompactValue marginBlock;
CompactValue paddingInline;
CompactValue paddingInlineStart;
CompactValue paddingInlineEnd;
CompactValue paddingBlock;
// BlockEnd/BlockStart map to top/bottom (no writing mode), but we preserve
// Yoga's precedence and prefer specific edges (e.g. top) to ones which are
// flow relative (e.g. blockStart).
CompactValue marginBlockStart;
CompactValue marginBlockEnd;
CompactValue paddingBlockStart;
CompactValue paddingBlockEnd;
#if RN_DEBUG_STRING_CONVERTIBLE
#pragma mark - DebugStringConvertible (Partial)
SharedDebugStringConvertibleList getDebugProps() const override;
#endif
private:
void convertRawPropAliases(
const PropsParserContext &context,
YogaStylableProps const &sourceProps,
RawProps const &rawProps);
};
} // namespace react
} // namespace facebook