New Unwrap and Times helper components (#157)

Author: pirelenito

packages/@react-facet/core/src/components/Times.spec.tsx

@@ -0,0 +1,12 @@
+import { render } from '@react-facet/dom-fiber-testing-library'
+import { createFacet } from '../facet'
+import React from 'react'
+import { Times } from './Times'
+
+it('renders the child n times, passing the index', () => {
+  const mockFacet = createFacet({ initialValue: 3 })
+  const result = render(<Times count={mockFacet}>{(index) => <>{index}</>}</Times>)
+
+  // Has all the indexes, proving it looped and rendered all the children
+  expect(result.container).toHaveTextContent('012')
+})

packages/@react-facet/core/src/components/Times.tsx

@@ -0,0 +1,31 @@
+import React, { ReactElement } from 'react'
+import { Facet } from '../types'
+import { Unwrap } from './Unwrap'
+
+/**
+ * Given a facet with a number, it renders its children "count" times.
+ *
+ * @param count facet with the amount of items to render
+ * @param children function that will be called passing an index and the total.
+ */
+export const Times = ({
+  count,
+  children,
+}: {
+  count: Facet<number>
+  children: (index: number, count: number) => ReactElement | null
+}) => {
+  return (
+    <Unwrap data={count}>
+      {(count) => {
+        const array = new Array(count)
+
+        for (let index = 0; index < count; index++) {
+          array[index] = <React.Fragment key={index}>{children(index, count)}</React.Fragment>
+        }
+
+        return <>{array}</>
+      }}
+    </Unwrap>
+  )
+}

packages/@react-facet/core/src/components/Unwrap.spec.tsx

@@ -0,0 +1,27 @@
+import React from 'react'
+import { render, screen } from '@react-facet/dom-fiber-testing-library'
+import { createFacet } from '../facet'
+import { NO_VALUE } from '../types'
+import { Unwrap } from './Unwrap'
+
+it('renders the child with unwrapped data', () => {
+  const mockText = 'Foo'
+  const mockFacet = createFacet({ initialValue: mockText })
+  render(<Unwrap data={mockFacet}>{(data) => <>{data}</>}</Unwrap>)
+  expect(screen.queryByText(mockText)).toBeInTheDocument()
+})
+
+it('renders the child with unwrapped nullish data', () => {
+  const mockText = 'Bar'
+  const mockData = undefined
+  const mockFacet = createFacet({ initialValue: mockData })
+  render(<Unwrap data={mockFacet}>{(data) => <>{`${mockText}${data}`}</>}</Unwrap>)
+  expect(screen.queryByText(`${mockText}${mockData}`)).toBeInTheDocument()
+})
+
+it('does not render the child with NO_VALUE', () => {
+  const mockText = 'Baz'
+  const mockFacet = createFacet<boolean>({ initialValue: NO_VALUE })
+  render(<Unwrap data={mockFacet}>{() => <>{mockText}</>}</Unwrap>)
+  expect(screen.queryByText(mockText)).not.toBeInTheDocument()
+})

packages/@react-facet/core/src/components/Unwrap.ts

@@ -0,0 +1,20 @@
+import { ReactElement } from 'react'
+import { useFacetUnwrap } from '../hooks'
+import { Facet, NO_VALUE, Value } from '../types'
+
+/**
+ * Renders a child with an unwrapped given facet value
+ *
+ * @param data facet value
+ * @param children render prop which receives the unwrapped facet
+ */
+export const Unwrap = <T extends Value>({
+  data,
+  children,
+}: {
+  data: Facet<T>
+  children: (data: T) => ReactElement | null
+}) => {
+  const unwrapped = useFacetUnwrap(data)
+  return unwrapped === NO_VALUE ? null : children(unwrapped)
+}

packages/@react-facet/core/src/components/index.ts

@@ -1,3 +1,5 @@
 export * from './Map'
 export * from './Mount'
+export * from './Times'
+export * from './Unwrap'
 export * from './With'