From bd3e3edc753a3357dfaea058d75a241afe4ae53b Mon Sep 17 00:00:00 2001 From: Joe Vilches Date: Tue, 12 Mar 2024 11:31:46 -0700 Subject: [PATCH] Add layout direction documentation (#1599) Summary: Pull Request resolved: https://github.com/facebook/yoga/pull/1599 tsia. Had to add JS api support for set/get direction Reviewed By: yungsters Differential Revision: D54778992 fbshipit-source-id: 346152e1d61c80aa524b515e8b30a96fe32fe7c3 --- javascript/src/Node.cpp | 8 +++++ javascript/src/Node.h | 2 ++ javascript/src/embind.cpp | 6 +++- javascript/src/wrapAssembly.ts | 2 ++ .../docs/examples/layout-direction.mdx | 29 +++++++++++++++++++ website-next/src/components/FlexStyle.ts | 15 ++++++++++ 6 files changed, 61 insertions(+), 1 deletion(-) diff --git a/javascript/src/Node.cpp b/javascript/src/Node.cpp index 5a5a1859..bd427d85 100644 --- a/javascript/src/Node.cpp +++ b/javascript/src/Node.cpp @@ -104,6 +104,10 @@ void Node::setFlexDirection(int flexDirection) { m_node, static_cast(flexDirection)); } +void Node::setDirection(int direction) { + YGNodeStyleSetDirection(m_node, static_cast(direction)); +} + void Node::setFlexWrap(int flexWrap) { YGNodeStyleSetFlexWrap(m_node, static_cast(flexWrap)); } @@ -261,6 +265,10 @@ int Node::getFlexDirection(void) const { return YGNodeStyleGetFlexDirection(m_node); } +int Node::getDirection(void) const { + return YGNodeStyleGetDirection(m_node); +} + int Node::getFlexWrap(void) const { return YGNodeStyleGetFlexWrap(m_node); } diff --git a/javascript/src/Node.h b/javascript/src/Node.h index 373af92f..9b339be8 100644 --- a/javascript/src/Node.h +++ b/javascript/src/Node.h @@ -83,6 +83,7 @@ class Node { void setFlexDirection(int flexDirection); void setFlexWrap(int flexWrap); void setJustifyContent(int justifyContent); + void setDirection(int direction); void setMargin(int edge, double margin); void setMarginPercent(int edge, double margin); @@ -134,6 +135,7 @@ class Node { int getFlexDirection(void) const; int getFlexWrap(void) const; int getJustifyContent(void) const; + int getDirection(void) const; Value getMargin(int edge) const; diff --git a/javascript/src/embind.cpp b/javascript/src/embind.cpp index 48093652..a858cf5c 100644 --- a/javascript/src/embind.cpp +++ b/javascript/src/embind.cpp @@ -117,6 +117,8 @@ EMSCRIPTEN_BINDINGS(YOGA_LAYOUT) { .function("setPaddingPercent", &Node::setPaddingPercent) .function("setGap", &Node::setGap) + .function("setDirection", &Node::setDirection) + .function("getPositionType", &Node::getPositionType) .function("getPosition", &Node::getPosition) @@ -190,5 +192,7 @@ EMSCRIPTEN_BINDINGS(YOGA_LAYOUT) { .function("getComputedMargin", &Node::getComputedMargin) .function("getComputedBorder", &Node::getComputedBorder) - .function("getComputedPadding", &Node::getComputedPadding); + .function("getComputedPadding", &Node::getComputedPadding) + + .function("getDirection", &Node::getDirection); } diff --git a/javascript/src/wrapAssembly.ts b/javascript/src/wrapAssembly.ts index 691daa93..3b75f8c6 100644 --- a/javascript/src/wrapAssembly.ts +++ b/javascript/src/wrapAssembly.ts @@ -95,6 +95,7 @@ export type Node = { getComputedRight(): number; getComputedTop(): number; getComputedWidth(): number; + getDirection(): Direction; getDisplay(): Display; getFlexBasis(): Value; getFlexDirection(): FlexDirection; @@ -126,6 +127,7 @@ export type Node = { setAlignSelf(alignSelf: Align): void; setAspectRatio(aspectRatio: number | undefined): void; setBorder(edge: Edge, borderWidth: number | undefined): void; + setDirection(direction: Direction): void; setDisplay(display: Display): void; setFlex(flex: number | undefined): void; setFlexBasis(flexBasis: number | 'auto' | `${number}%` | undefined): void; diff --git a/website-next/docs/examples/layout-direction.mdx b/website-next/docs/examples/layout-direction.mdx index 6f1bb2f4..b145fd99 100644 --- a/website-next/docs/examples/layout-direction.mdx +++ b/website-next/docs/examples/layout-direction.mdx @@ -2,4 +2,33 @@ sidebar_position: 10 --- +import Playground from '@site/src/components/Playground'; + # Layout Direction + +Layout direction specifies the direction in which children and text +in a hierarchy should be laid out. Layout direction also effects what +edge `start` and `end` refer to. By default Yoga lays out with `LTR` +layout direction. In this mode `start` refers to `left` and `end` +refers to `right`. When localizing your apps for markets with RTL languages +you should customize this by either by passing a direction +to the `CalculateLayout` call or by setting the direction on the root node. + +**LTR (default)**: Text and children and laid out from left to right. Styles applied +the start of an element are applied on the left side. + +**RTL**: Text and children and laid out from right to left. Styles applied the +start of an element are applied on the right side. + + + + + + +`} /> diff --git a/website-next/src/components/FlexStyle.ts b/website-next/src/components/FlexStyle.ts index b428adda..a37a3ee2 100644 --- a/website-next/src/components/FlexStyle.ts +++ b/website-next/src/components/FlexStyle.ts @@ -9,6 +9,7 @@ import { Align, + Direction, Display, Edge, FlexDirection, @@ -59,6 +60,7 @@ export type FlexStyle = { borderInlineWidth?: number; borderBlockWidth?: number; bottom?: number | `${number}%`; + direction?: 'ltr' | 'rtl'; display?: 'none' | 'flex'; end?: number | `${number}%`; flex?: number; @@ -152,6 +154,9 @@ export function applyStyle(node: YogaNode, style: FlexStyle = {}): void { case 'bottom': node.setPosition(Edge.Bottom, style.bottom); break; + case 'direction': + node.setDirection(direction(style.direction)); + break; case 'display': node.setDisplay(display(style.display)); break; @@ -330,6 +335,16 @@ function alignItems(str?: AlignItems): Align { throw new Error(`"${str}" is not a valid value for alignItems`); } +function direction(str?: 'ltr' | 'rtl'): Direction { + switch (str) { + case 'ltr': + return Direction.LTR; + case 'rtl': + return Direction.RTL; + } + throw new Error(`"${str}" is not a valid value for direction`); +} + function display(str?: 'none' | 'flex'): Display { switch (str) { case 'none':