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

@@ -104,6 +104,10 @@ void Node::setFlexDirection(int flexDirection) {
       m_node, static_cast<YGFlexDirection>(flexDirection));
 }
 
+void Node::setDirection(int direction) {
+  YGNodeStyleSetDirection(m_node, static_cast<YGDirection>(direction));
+}
+
 void Node::setFlexWrap(int flexWrap) {
   YGNodeStyleSetFlexWrap(m_node, static_cast<YGWrap>(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);
 }

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;
 

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);
 }

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;

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.
+
+<Playground code={`<Layout config={{useWebDefaults: false}}>
+  <Node
+    style={{
+      width: 200,
+      height: 200,
+      padding: 10,
+      direction: 'ltr'
+    }}>
+    <Node style={{margin: 5, height: 50, width: 50}} />
+    <Node style={{margin: 5, height: 50, width: 50}} />
+  </Node>
+</Layout>`} />

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':