add prop-types as a dependency and

validate props

Author: dev-javascript

package-lock.json

@@ -101,5 +101,7 @@
       "jest-extended"
     ]
   },
-  "dependencies": {}
+  "dependencies": {
+    "prop-types": "^15.7.2"
+  }
 }

package.json

@@ -1,24 +1,27 @@
 import React, {memo} from 'react';
 import {ApiContext, ForceUpdateContext} from '../utils/context.js';
 import panelPropsManager from './panelPropsManager.js';
-const Panel = memo(
-  function Panel(props) {
-    React.useContext(ForceUpdateContext);
-    const {id, selectedTabID} = props,
-      api = React.useContext(ApiContext),
-      isSelected = id === selectedTabID,
-      panelProps = panelPropsManager({isSelected, api, id}),
-      PanelComponent = api.getTab(id).panelComponent;
-    return (
-      <div {...panelProps}>
-        <PanelComponent id={id} isSelected={isSelected} api={api.userProxy}></PanelComponent>
-      </div>
-    );
-  },
-  (oldProps, newProps) => {
-    const {id, selectedTabID: oldActiveId} = oldProps,
-      {selectedTabID: newActiveId} = newProps;
-    return oldActiveId === newActiveId || (id !== oldActiveId && id !== newActiveId);
-  },
-);
+import PropTypes from 'prop-types';
+const PanelComponent = function PanelComponent(props) {
+  React.useContext(ForceUpdateContext);
+  const {id, selectedTabID} = props,
+    api = React.useContext(ApiContext),
+    isSelected = id === selectedTabID,
+    panelProps = panelPropsManager({isSelected, api, id}),
+    PanelComponent = api.getTab(id).panelComponent;
+  return (
+    <div {...panelProps}>
+      <PanelComponent id={id} isSelected={isSelected} api={api.userProxy}></PanelComponent>
+    </div>
+  );
+};
+PanelComponent.propTypes = {
+  id: PropTypes.string,
+  selectedTabID: PropTypes.string,
+};
+const Panel = memo(PanelComponent, (oldProps, newProps) => {
+  const {id, selectedTabID: oldActiveId} = oldProps,
+    {selectedTabID: newActiveId} = newProps;
+  return oldActiveId === newActiveId || (id !== oldActiveId && id !== newActiveId);
+});
 export default Panel;

src/panel/panel.js

@@ -1,10 +1,16 @@
 import React from 'react';
-const DefaulTabInner = function (props) {
+import PropTypes from 'prop-types';
+const DefaulTabInner = function DefaulTabInner(props) {
   return (
     <button {...props.tabProps}>
       {props.children}
       {Object.prototype.hasOwnProperty.call(props, 'iconProps') && <span {...props.iconProps}></span>}
     </button>
   );
 };
+DefaulTabInner.propTypes = {
+  tabProps: PropTypes.object,
+  children: PropTypes.node,
+  iconProps: PropTypes.object,
+};
 export default DefaulTabInner;

src/tab/defaulTabInner.js

@@ -1,32 +1,35 @@
 import React, {memo} from 'react';
 import {ApiContext, ForceUpdateContext} from '../utils/context.js';
 import TabPropsManager from './tabPropsManager.js';
-const Tab = memo(
-  function Tab(props) {
-    React.useContext(ForceUpdateContext);
-    const {id, selectedTabID} = props,
-      api = React.useContext(ApiContext),
-      TabInnerComponent = api.getOption('tabComponent'),
-      tabObj = api.getTab(id),
-      propsManager = new TabPropsManager({api, id, isSelected: selectedTabID === id}),
-      clkHandler = function (e) {
-        api.eventHandlerFactory({e, id});
-      };
-    return (
-      <li
-        {...propsManager.getTabProps()}
-        onClick={(e) => {
-          clkHandler(e);
-        }}>
-        <TabInnerComponent {...propsManager.getTabInnerProps()}>{tabObj.title}</TabInnerComponent>
-        {tabObj.closable ? <span {...propsManager.getCloseIconProps()}>&times;</span> : null}
-      </li>
-    );
-  },
-  (oldProps, newProps) => {
-    const {id, selectedTabID: oldActiveId} = oldProps,
-      {selectedTabID: newActiveId} = newProps;
-    return oldActiveId === newActiveId || (id !== oldActiveId && id !== newActiveId);
-  },
-);
+import PropTypes from 'prop-types';
+const TabComponent = function TabComponent(props) {
+  React.useContext(ForceUpdateContext);
+  const {id, selectedTabID} = props,
+    api = React.useContext(ApiContext),
+    TabInnerComponent = api.getOption('tabComponent'),
+    tabObj = api.getTab(id),
+    propsManager = new TabPropsManager({api, id, isSelected: selectedTabID === id}),
+    clkHandler = function (e) {
+      api.eventHandlerFactory({e, id});
+    };
+  return (
+    <li
+      {...propsManager.getTabProps()}
+      onClick={(e) => {
+        clkHandler(e);
+      }}>
+      <TabInnerComponent {...propsManager.getTabInnerProps()}>{tabObj.title}</TabInnerComponent>
+      {tabObj.closable ? <span {...propsManager.getCloseIconProps()}>&times;</span> : null}
+    </li>
+  );
+};
+TabComponent.propTypes = {
+  id: PropTypes.string,
+  selectedTabID: PropTypes.string,
+};
+const Tab = memo(TabComponent, (oldProps, newProps) => {
+  const {id, selectedTabID: oldActiveId} = oldProps,
+    {selectedTabID: newActiveId} = newProps;
+  return oldActiveId === newActiveId || (id !== oldActiveId && id !== newActiveId);
+});
 export default Tab;