react-tab-set 1.2.4 → 2.0.1

package/README.md

@@ -47,7 +47,7 @@ Content can be declared either as children or as the return of a function assign
 
 If your component extends `PureComponent` or is presentational, you might prefer to declare content as children.
 
-Otherwise, you might prefer to assign a function to the `render` prop, so that rendering is deferred until the tab is selected.
+Otherwise, you can assign a function to the `render` prop, so that rendering is deferred until the tab is selected.
 
 ### Content as children
 
@@ -99,7 +99,7 @@ Similarly, they can be declared in any combination.
 
 ## Demonstrating _react-tab-set_
 
-[Example `Storybooks` are available on GitHub](https://github.com/sequencemedia/react-tab-set).
+[Example `Storybooks` are available](https://github.com/sequencemedia/react-tab-set).
 
 Clone the repository, then:
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-tab-set",
-  "version": "1.2.4",
+  "version": "2.0.1",
   "description": "A React Tab Set component",
   "main": "./src/index.mjs",
   "type": "module",
@@ -39,6 +39,7 @@
     "@babel/register": "^7.22.15",
     "@sequencemedia/hooks": "^1.0.454",
     "@storybook/addon-essentials": "^7.4.4",
+    "@storybook/addon-links": "^7.4.4",
     "@storybook/react": "^7.4.4",
     "@storybook/react-webpack5": "^7.4.4",
     "@types/debug": "^4.1.9",

package/src/tab-set/index.tsx

@@ -1,4 +1,9 @@
-import React, { Component, Children, cloneElement } from 'react'
+import React, {
+  Children,
+  cloneElement,
+  useState,
+  useEffect
+} from 'react'
 import {
   v4
 } from 'uuid'
@@ -10,132 +15,89 @@ import isTabGroup from './is-tab-group.mts'
 const error = debug('react-tab-set/tab-set')
 
 export interface TabSetProps {
-  onClick: (selectedTab: string) => void
-  onChange: (selectedTab: string) => void
-  selectedTab: string
   children: JSX.Element | JSX.Element[]
-}
-
-export interface TabSetState {
   selectedTab: string
+  onChange: (selectedTab: string) => void
 }
 
-export default class TabSet extends Component<TabSetProps, TabSetState> {
-  state = {
-    selectedTab: this.props.selectedTab
-  }
-
-  /*
-   *  The selected tab default does not have to be a uuid, but a uuid
-   *  reduces the likelihood that this default has the same value as
-   *  an implemented tab
-   */
-  static defaultProps = {
-    onClick () {},
-    onChange () {},
-    selectedTab: v4(),
-    children: []
-  }
-
-  static getDerivedStateFromProps ({ selectedTab }: TabSetState): TabSetState {
-    return {
-      selectedTab
+function mapChildren (
+  children: JSX.Element | JSX.Element[],
+  selectedTab: string,
+  onTabSelect: (value: React.SetStateAction<string>) => void
+): JSX.Element[] {
+  return Children.map(children, (child) => {
+    const { type } = child
+
+    if (type) { // eslint-disable-line @typescript-eslint/strict-boolean-expressions
+      const { props } = child
+
+      if (isTabGroup(type)) {
+        return cloneElement(
+          child,
+          {
+            ...props,
+            selectedTab,
+            onTabSelect
+          }
+        )
+      }
+
+      if (isTabPanel(type)) {
+        return cloneElement(
+          child,
+          {
+            ...props,
+            selectedTab
+          }
+        )
+      }
+
+      const {
+        children
+      } = props
+
+      if (children) { // eslint-disable-line @typescript-eslint/strict-boolean-expressions
+        return cloneElement(
+          child,
+          {
+            ...props,
+            children: mapChildren(children, selectedTab, onTabSelect)
+          }
+        )
+      }
     }
-  }
 
-  shouldComponentUpdate (props: TabSetProps, state: TabSetState): boolean {
-    return (
-      props.children !== this.props.children ||
-      state.selectedTab !== this.state.selectedTab
-    )
-  }
+    return child
+  })
+}
+
+export default function TabSet (props: TabSetProps): JSX.Element {
+  const {
+    children,
+    selectedTab: tab
+  } = props
+
+  const [selectedTab, setSelectedTab] = useState(tab)
+
+  useEffect(() => { setSelectedTab(tab) }, [tab])
 
-  handleTabSelect = (selectedTab: string): void => {
-    const { onClick } = this.props
+  useEffect(() => {
+    const { onChange } = props
 
     try {
-      onClick(selectedTab)
+      onChange(selectedTab)
     } catch {
-      error('Error `onClick`')
+      error('Error `onChange`')
     }
+  }, [selectedTab])
 
-    if (selectedTab !== this.state.selectedTab) {
-      this.setState({ selectedTab }, () => {
-        const { onChange } = this.props
-
-        try {
-          onChange(selectedTab)
-        } catch {
-          error('Error `onChange`')
-        }
-      })
-    }
-  }
-
-  mapChildren (children: JSX.Element | JSX.Element[], selectedTab: string): JSX.Element[] {
-    return Children.map(children, (child) => {
-      const { type } = child
-
-      if (type) { // eslint-disable-line @typescript-eslint/strict-boolean-expressions
-        const { props } = child
-
-        if (isTabGroup(type)) {
-          return cloneElement(
-            child,
-            {
-              ...props,
-              selectedTab,
-              onTabSelect: this.handleTabSelect
-            }
-          )
-        }
-
-        if (isTabPanel(type)) {
-          return cloneElement(
-            child,
-            {
-              ...props,
-              selectedTab
-            }
-          )
-        }
-
-        const {
-          children
-        } = props
-
-        if (children) { // eslint-disable-line @typescript-eslint/strict-boolean-expressions
-          return cloneElement(
-            child,
-            {
-              ...props,
-              children: this.mapChildren(children, selectedTab)
-            }
-          )
-        }
-      }
+  return (
+    <div className='selectedTab-set'>
+      {mapChildren(children, selectedTab, setSelectedTab)}
+    </div>
+  )
+}
 
-      return child
-    })
-  }
-
-  getChildren (): JSX.Element[] {
-    const {
-      children
-    } = this.props
-
-    const {
-      selectedTab
-    } = this.state
-
-    return this.mapChildren(children, selectedTab)
-  }
-
-  render (): JSX.Element {
-    return (
-      <div className='tab-set'>
-        {this.getChildren()}
-      </div>
-    )
-  }
+TabSet.defaultProps = {
+  selectedTab: v4()
 }

package/src/tab-set/is-tab-group.mts

@@ -1,5 +1,5 @@
 import TabGroup from './tab-group/index.tsx'
 
-export default function isTabGroup (component: any): component is TabGroup {
+export default function isTabGroup (component: any): boolean {
   return component === TabGroup
 }

package/src/tab-set/is-tab-panel.mts

@@ -1,5 +1,5 @@
 import TabPanel from './tab-panel/index.tsx'
 
-export default function isTabPanel (component: any): component is TabPanel {
+export default function isTabPanel (component: any): boolean {
   return component === TabPanel
 }

package/src/tab-set/tab-group/index.tsx

@@ -1,4 +1,7 @@
-import React, { Component, Children, cloneElement } from 'react'
+import React, {
+  Children,
+  cloneElement
+} from 'react'
 import {
   v4
 } from 'uuid'
@@ -6,87 +9,67 @@ import {
 import isTab from './is-tab.mts'
 
 export interface TabGroupProps {
-  onTabSelect: (selectedTab: string) => void
   children: JSX.Element | JSX.Element[]
   selectedTab: string
+  onTabSelect: (value: React.SetStateAction<string>) => void
 }
 
-export default class TabGroup extends Component<TabGroupProps> {
-  /*
-   *  The selected tab default does not have to be a uuid, but a uuid
-   *  reduces the likelihood that this default has the same value as
-   *  an implemented tab
-   */
-  static defaultProps = {
-    onTabSelect () {},
-    selectedTab: v4(),
-    children: []
-  }
+function mapChildren (
+  children: JSX.Element | JSX.Element[],
+  selectedTab: string,
+  onTabSelect: (value: React.SetStateAction<string>) => void
+): JSX.Element[] {
+  return Children.map(children, (child) => {
+    const { type } = child
 
-  shouldComponentUpdate (props: TabGroupProps): boolean {
-    return (
-      props.children !== this.props.children ||
-      props.selectedTab !== this.props.selectedTab
-    )
-  }
+    if (type) { // eslint-disable-line @typescript-eslint/strict-boolean-expressions
+      const { props } = child
 
-  handleTabClick = (tab: string): void => {
-    const { onTabSelect } = this.props
-
-    onTabSelect(tab)
-  }
-
-  mapChildren (children: JSX.Element | JSX.Element[], selectedTab: string): JSX.Element[] {
-    return Children.map(children, (child) => {
-      const { type } = child
-
-      if (type) { // eslint-disable-line @typescript-eslint/strict-boolean-expressions
-        const { props } = child
-
-        if (isTab(type)) {
-          return cloneElement(
-            child,
-            {
-              ...props,
-              selectedTab,
-              onTabClick: this.handleTabClick
-            }
-          )
-        }
+      if (isTab(type)) {
+        return cloneElement(
+          child,
+          {
+            ...props,
+            selectedTab,
+            onTabSelect
+          }
+        )
+      }
 
-        const {
-          children
-        } = props
+      const {
+        children
+      } = props
 
-        if (children) { // eslint-disable-line @typescript-eslint/strict-boolean-expressions
-          return cloneElement(
-            child,
-            {
-              ...props,
-              children: this.mapChildren(children, selectedTab)
-            }
-          )
-        }
+      if (children) { // eslint-disable-line @typescript-eslint/strict-boolean-expressions
+        return cloneElement(
+          child,
+          {
+            ...props,
+            children: mapChildren(children, selectedTab, onTabSelect)
+          }
+        )
       }
+    }
 
-      return child
-    })
-  }
+    return child
+  })
+}
 
-  getChildren (): JSX.Element[] {
-    const {
-      children,
-      selectedTab
-    } = this.props
+export default function TabGroup (props: TabGroupProps): JSX.Element {
+  const {
+    children,
+    selectedTab,
+    onTabSelect
+  } = props
 
-    return this.mapChildren(children, selectedTab)
-  }
+  return (
+    <ul className='tab-group'>
+      {mapChildren(children, selectedTab, onTabSelect)}
+    </ul>
+  )
+}
 
-  render (): JSX.Element {
-    return (
-      <ul className='tab-group'>
-        {this.getChildren()}
-      </ul>
-    )
-  }
+TabGroup.defaultProps = {
+  selectedTab: v4(),
+  onTabSelect () { }
 }

package/src/tab-set/tab-group/tab/index.tsx

@@ -1,57 +1,39 @@
-import React, { Component } from 'react'
+import React from 'react'
 import {
   v4
 } from 'uuid'
 
 export interface TabProps {
-  onTabClick: (tab: string) => void
   children: JSX.Element | JSX.Element[] | string | number | boolean
   tab: string
   selectedTab: string
+  onTabSelect: (value: React.SetStateAction<string>) => void
 }
 
-export default class Tab extends Component<TabProps> {
-  /*
-   *  The tab and selected tab defaults do not have to be a uuid, but a uuid
-   *  reduces the likelihood that this default has the same value as
-   *  an implemented tab
-   */
-  static defaultProps = {
-    onTabClick () {},
-    tab: v4(),
-    selectedTab: v4(),
-    children: []
-  }
-
-  shouldComponentUpdate (props: TabProps): boolean {
-    return (
-      props.children !== this.props.children ||
-      props.tab !== this.props.tab ||
-      props.selectedTab !== this.props.selectedTab
-    )
-  }
-
-  handleClick = (): void => {
-    const { tab, onTabClick } = this.props
-
-    onTabClick(tab)
-  }
-
-  render (): JSX.Element {
-    const {
-      tab,
-      selectedTab,
-      children
-    } = this.props
-
-    const className = (tab === selectedTab)
-      ? 'tab selected'
-      : 'tab'
+export default function Tab (props: TabProps): JSX.Element {
+  const {
+    children,
+    tab,
+    selectedTab,
+    onTabSelect
+  } = props
+
+  const className = (tab === selectedTab)
+    ? 'tab selected'
+    : 'tab'
+
+  return (
+    <li
+      className={className}
+      onClick={(): void => {
+        onTabSelect(tab)
+      }}>
+      {children}
+    </li>
+  )
+}
 
-    return (
-      <li className={className} onClick={this.handleClick}>
-        {children}
-      </li>
-    )
-  }
+Tab.defaultProps = {
+  selectedTab: v4(),
+  onTabSelect () { }
 }

package/src/tab-set/tab-panel/index.tsx

@@ -1,41 +1,26 @@
-import React, { Component } from 'react'
+import React from 'react'
 import {
   v4
 } from 'uuid'
 
 export interface TabPanelProps {
-  children: JSX.Element | JSX.Element[] | string | number | boolean | undefined | null
+  children?: JSX.Element | JSX.Element[] | string | number | boolean | undefined | null
   tab: string
   selectedTab: string
   render?: () => JSX.Element | JSX.Element[] | string | number | boolean | undefined | null
 }
 
-export default class TabPanel extends Component<TabPanelProps> {
-  /*
-   *  The tab and selected tab defaults do not have to be a uuid, but a uuid
-   *  reduces the likelihood that this default has the same value as
-   *  an implemented tab
-   */
-  static defaultProps = {
-    tab: v4(),
-    selectedTab: v4()
-  }
-
-  shouldComponentUpdate (props: TabPanelProps): boolean {
-    if (props.render instanceof Function) return true
+export default function TabPanel (props: TabPanelProps): JSX.Element | null {
+  const {
+    tab,
+    selectedTab
+  } = props
 
-    return (
-      props.children !== this.props.children ||
-      props.tab !== this.props.tab ||
-      props.selectedTab !== this.props.selectedTab
-    )
-  }
-
-  renderPanel (): JSX.Element | null {
+  if (tab === selectedTab) {
     const {
       render = () => null,
       children = render()
-    } = this.props
+    } = props
 
     if (children) { // eslint-disable-line @typescript-eslint/strict-boolean-expressions
       return (
@@ -44,20 +29,11 @@ export default class TabPanel extends Component<TabPanelProps> {
         </div>
       )
     }
-
-    return null
   }
 
-  render (): JSX.Element | null {
-    const {
-      tab,
-      selectedTab
-    } = this.props
-
-    if (tab === selectedTab) {
-      return this.renderPanel()
-    }
+  return null
+}
 
-    return null
-  }
+TabPanel.defaultProps = {
+  selectedTab: v4()
 }