Merge pull request #24 from linked-planet/feature/nesting-helpers

Feature/nesting helpers
linked-planet · Sep 22, 2022 · 192c32d · 192c32d
2 parents b963770 + 900f13b
commit 192c32d
Show file tree

Hide file tree

Showing 2 changed files with 45 additions and 8 deletions.
diff --git a/...otlin/com/linkedplanet/uikit/wrapper/atlaskit/sidenavigation/SideNavigationDefinitions.kt b/...otlin/com/linkedplanet/uikit/wrapper/atlaskit/sidenavigation/SideNavigationDefinitions.kt
@@ -13,6 +13,10 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
+
+import react.ElementType
+import com.linkedplanet.uikit.wrapper.atlaskit.sidenavigation.useShouldNestedElementRender
+import react.Props
 import com.linkedplanet.uikit.wrapper.atlaskit.sidenavigation.ButtonItemProps
 import com.linkedplanet.uikit.wrapper.atlaskit.sidenavigation.GoBackItem
 import com.linkedplanet.uikit.wrapper.atlaskit.sidenavigation.NestingItemOverrides
@@ -42,3 +46,27 @@ fun NestingItemProps.overrideBackButton(block: ChildrenBuilder.(props: ButtonIte
         }, props)
     })
 }
+
+// region NestableNavigationContent Helpers
+
+/**
+ * Convenience wrapper around a functional component
+ * that will only render at the correct hierarchy inside a NestableNavigationContent
+ */
+fun <P : Props> nestingFC(
+    block: ChildrenBuilder.(props: P) -> Unit,
+): FC<P> = FC {
+    if (useShouldNestedElementRender().shouldRender) {
+        block(this, it)
+    }
+}
+
+/**
+ * Creates a nestable Element for an ElementType
+ * that will only render at the correct hierarchy inside a NestableNavigationContent
+ */
+fun <PropsType : Props> ElementType<PropsType>.nesting(): FC<PropsType> = nestingFC {
+    +createElement(type = this@nesting, props = it)
+}
+
+// endregion NestableNavigationContent Helpers
diff --git a/ui-kit-showcase/src/main/kotlin/com/linkedplanet/uikit/component/ShowcaseLeftSidebar.kt b/ui-kit-showcase/src/main/kotlin/com/linkedplanet/uikit/component/ShowcaseLeftSidebar.kt
@@ -24,6 +24,8 @@ import com.linkedplanet.uikit.wrapper.atlaskit.textfield.TextField
 import csstype.FlexDirection
 import kotlinx.browser.document
 import kotlinx.js.jso
+import nesting
+import nestingFC
 import org.w3c.dom.HTMLInputElement
 import overrideBackButton
 import react.*
@@ -32,20 +34,16 @@ import react.dom.html.ReactHTML.div
 
 external interface ShowcaseLeftSidebarProps : Props
 
-val textFieldWithClearButtonCustomComponent = FC<Props> {
-    val nestedElement = useShouldNestedElementRender()
+val nestingTextFieldWithClearButtonCustomComponent = nestingFC<Props> {
     var data by useState("")
 
-    if (!nestedElement.shouldRender){
-        return@FC
-    }
     div {
         style = jso {
             display = csstype.Display.flex
             flexDirection = FlexDirection.row
         }
         TextField {
-            placeholder = "Custom TextField"
+            placeholder = "Custom Nesting TextField"
             value = data
             isCompact = true
             type = "text"
@@ -57,11 +55,14 @@ val textFieldWithClearButtonCustomComponent = FC<Props> {
             onClick = {
                 data = ""
             }
-            + "Clear"
+            + "Clear ${data.take(10)}"
         }
     }
 }
 
+val nestingTextField = TextField.nesting()
+
+
 val ShowcaseLeftSidebar = fc<ShowcaseLeftSidebarProps> {
 
     LeftSidebar {
@@ -120,7 +121,15 @@ val ShowcaseLeftSidebar = fc<ShowcaseLeftSidebarProps> {
 
                         Section {
                             attrs.title = "Custom Component Section"
-                            textFieldWithClearButtonCustomComponent {
+                            nestingTextField {
+                                attrs.placeholder = "Nesting Textfield"
+                                attrs.isCompact = true
+                            }
+                            TextField {
+                                attrs.placeholder = "Sticks if Going Deeper"
+                                attrs.isCompact = true
+                            }
+                            nestingTextFieldWithClearButtonCustomComponent {
                             }
                         }