Implement Percentage support for gap styles (#1643)

Summary:
X-link: https://github.com/facebook/react-native/pull/44067

X-link: https://github.com/facebook/litho/pull/980

Pull Request resolved: https://github.com/facebook/yoga/pull/1643

Changelog [Internal]:
- Added percentage value for flex layout gap
- Wired up to pass proper available width and height to implement this feature

Reviewed By: NickGerleman

Differential Revision: D56002340

fbshipit-source-id: c0bc86ac70a1391f115c87da99c2ef411535f68b

javascript/src/Node.cpp

@@ -240,6 +240,10 @@ void Node::setGap(int gutter, double gapLength) {
   YGNodeStyleSetGap(m_node, static_cast<YGGutter>(gutter), gapLength);
 }
 
+void Node::setGapPercent(int gutter, double gapLength) {
+  YGNodeStyleSetGapPercent(m_node, static_cast<YGGutter>(gutter), gapLength);
+}
+
 int Node::getPositionType(void) const {
   return YGNodeStyleGetPositionType(m_node);
 }

javascript/src/Node.h

@@ -124,6 +124,7 @@ class Node {
   void setPaddingPercent(int edge, double padding);
 
   void setGap(int gutter, double gapLength);
+  void setGapPercent(int gutter, double gapLength);
 
  public: // Style getters
   int getPositionType(void) const;

javascript/src/embind.cpp

@@ -116,6 +116,7 @@ EMSCRIPTEN_BINDINGS(YOGA_LAYOUT) {
       .function("setPadding", &Node::setPadding)
       .function("setPaddingPercent", &Node::setPaddingPercent)
       .function("setGap", &Node::setGap)
+      .function("setGapPercent", &Node::setGapPercent)
 
       .function("setDirection", &Node::setDirection)
 

javascript/src/wrapAssembly.ts

@@ -144,7 +144,8 @@ export type Node = {
   setHeightAuto(): void;
   setHeightPercent(height: number | undefined): void;
   setJustifyContent(justifyContent: Justify): void;
-  setGap(gutter: Gutter, gapLength: number | undefined): Value;
+  setGap(gutter: Gutter, gapLength: number | `${number}%` | undefined): Value;
+  setGapPercent(gutter: Gutter, gapLength: number | undefined): Value;
   setMargin(
     edge: Edge,
     margin: number | 'auto' | `${number}%` | undefined,
@@ -209,6 +210,7 @@ export default function wrapAssembly(lib: any): Yoga {
     'setMaxWidth',
     'setMaxHeight',
     'setPadding',
+    'setGap',
   ]) {
     const methods = {
       [Unit.Point]: lib.Node.prototype[fnName],