react-tab-set 1.2.3 → 2.0.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-tab-set",
-  "version": "1.2.3",
+  "version": "2.0.0",
   "description": "A React Tab Set component",
   "main": "./src/index.mjs",
   "type": "module",
@@ -31,6 +31,7 @@
   "devDependencies": {
     "@babel/core": "^7.22.20",
     "@babel/eslint-parser": "^7.22.15",
+    "@babel/plugin-syntax-jsx": "^7.22.5",
     "@babel/plugin-transform-typescript": "^7.22.15",
     "@babel/preset-env": "^7.22.20",
     "@babel/preset-react": "^7.22.15",
@@ -54,8 +55,8 @@
     "eslint-plugin-storybook": "^0.6.14",
     "husky": "^8.0.3",
     "prop-types": "15.7.2",
-    "react": "16.14.0",
-    "react-dom": "16.14.0",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
     "storybook": "^7.4.4",
     "typescript": "^5.2.2"
   },

package/src/.babelrc

@@ -21,6 +21,7 @@
     "@babel/react"
   ],
   "plugins": [
+    "@babel/syntax-jsx",
     "@babel/transform-typescript"
   ]
 }

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,88 @@ 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,92 +1,63 @@
-import React, { Component, Children, cloneElement } from 'react'
-import {
-  v4
-} from 'uuid'
+import React, {
+  Children,
+  cloneElement
+} from 'react'
 
 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: []
-  }
-
-  shouldComponentUpdate (props: TabGroupProps): boolean {
-    return (
-      props.children !== this.props.children ||
-      props.selectedTab !== this.props.selectedTab
-    )
-  }
-
-  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
-            }
-          )
-        }
-
-        const {
-          children
-        } = props
-
-        if (children) { // eslint-disable-line @typescript-eslint/strict-boolean-expressions
-          return cloneElement(
-            child,
-            {
-              ...props,
-              children: this.mapChildren(children, 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 (isTab(type)) {
+        return cloneElement(
+          child,
+          {
+            ...props,
+            selectedTab,
+            onTabSelect
+          }
+        )
       }
 
-      return child
-    })
-  }
-
-  getChildren (): JSX.Element[] {
-    const {
-      children,
-      selectedTab
-    } = this.props
+      const {
+        children
+      } = props
+
+      if (children) { // eslint-disable-line @typescript-eslint/strict-boolean-expressions
+        return cloneElement(
+          child,
+          {
+            ...props,
+            children: mapChildren(children, selectedTab, onTabSelect)
+          }
+        )
+      }
+    }
 
-    return this.mapChildren(children, selectedTab)
-  }
+    return child
+  })
+}
 
-  render (): JSX.Element {
-    return (
-      <ul className='tab-group'>
-        {this.getChildren()}
-      </ul>
-    )
-  }
+export default function TabGroup (props: TabGroupProps): JSX.Element {
+  const {
+    children,
+    selectedTab,
+    onTabSelect
+  } = props
+
+  return (
+    <ul className='tab-group'>
+      {mapChildren(children, selectedTab, onTabSelect)}
+    </ul>
+  )
 }

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

@@ -1,57 +1,31 @@
-import React, { Component } from 'react'
-import {
-  v4
-} from 'uuid'
+import React from 'react'
 
 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'
-
-    return (
-      <li className={className} onClick={this.handleClick}>
-        {children}
-      </li>
-    )
-  }
+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>
+  )
 }

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

@@ -1,41 +1,23 @@
-import React, { Component } from 'react'
-import {
-  v4
-} from 'uuid'
+import React from 'react'
 
 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 +26,7 @@ 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
 }