From cd6291126137bce501be0973b8ce4d195218ef33 Mon Sep 17 00:00:00 2001 From: Andrey Kovalsky Date: Wed, 29 Sep 2021 22:45:09 +0300 Subject: [PATCH 1/2] Add tabSelectedClassName property for item --- README.md | 51 +++++++++++++++++++++++++++------------------------ src/index.js | 13 +++++++++---- 2 files changed, 36 insertions(+), 28 deletions(-) diff --git a/README.md b/README.md index b31b5bb..5999285 100644 --- a/README.md +++ b/README.md @@ -71,6 +71,7 @@ function getTabs() { /* Optional parameters */ key: index, tabClassName: 'tab', + tabSelectedClassName: 'tab--selected', panelClassName: 'panel', })); } @@ -84,35 +85,37 @@ render(, document.getElementById('root')); All entities listed below should be used as props to the `Tabs` component. -| Prop | Type | Description | Default | -| ---------------- | ------------- | ---------------------------------------------------------------------------- | --------------- | -| items | Array | Tabs data | [Item](#Item)[] | -| beforeChange | Function | Fires right before a tab changes. Return `false` to prevent the tab change | undefined | -| onChange | Function | onChange callback | undefined | -| selectedTabKey | Number/String | Selected tab | undefined | -| showMore | Bool | Whether to show `Show more` or not | `true` | -| showMoreLabel | String/Node | `Show more` tab name | `...` | -| transform | Bool | Transform to accordion when the wrapper width is less than `transformWidth`. | `true` | -| transformWidth | Number | Transform width. | 800 | -| unmountOnExit | Bool | Whether to unmount inactive tabs from DOM tree or not | `true` | -| tabsWrapperClass | String | Wrapper class | undefined | -| tabClassName | String | Tab class | undefined | -| panelClassName | String | Tab panel class | undefined | -| allowRemove | Bool | Allows tabs removal. | `false` | -| removeActiveOnly | Bool | Only active tab has removal option | `false` | -| showInkBar | Bool | Add MaterialUI InkBar effect | `false` | -| uid | any | An optional external id. The component rerenders when it changes | undefined | +| Prop | Type | Description | Default | +| ---------------- | ------------- | ---------------------------------------------------------------------------- | --------------- | +| items | Array | Tabs data | [Item](#Item)[] | +| beforeChange | Function | Fires right before a tab changes. Return `false` to prevent the tab change | undefined | +| onChange | Function | onChange callback | undefined | +| selectedTabKey | Number/String | Selected tab | undefined | +| showMore | Bool | Whether to show `Show more` or not | `true` | +| showMoreLabel | String/Node | `Show more` tab name | `...` | +| transform | Bool | Transform to accordion when the wrapper width is less than `transformWidth`. | `true` | +| transformWidth | Number | Transform width. | 800 | +| unmountOnExit | Bool | Whether to unmount inactive tabs from DOM tree or not | `true` | +| tabsWrapperClass | String | Wrapper class | undefined | +| tabClassName | String | Tab class | undefined | +| tabSelectedClassName | String | Tab class for selected item | undefined | +| panelClassName | String | Tab panel class | undefined | +| allowRemove | Bool | Allows tabs removal. | `false` | +| removeActiveOnly | Bool | Only active tab has removal option | `false` | +| showInkBar | Bool | Add MaterialUI InkBar effect | `false` | +| uid | any | An optional external id. The component rerenders when it changes | undefined | #### Item | Prop | Type | Description | | -------------- | -------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------- | -| title | String | Tab title | -| getContent | Function | A function that returns data that will be rendered when tab become active | -| content | String | Use this prop insted of getContent. This is a sync version of `getContent`. The data will be always rendered in a hidden div. Sometimes it may be useful for SEO | -| key | Number | A uniq tab id | -| tabClassName | String | Tab class name | -| panelClassName | String | Panel class name | +| title | String | Tab title | +| getContent | Function | A function that returns data that will be rendered when tab become active | +| content | String | Use this prop insted of getContent. This is a sync version of `getContent`. The data will be always rendered in a hidden div. Sometimes it may be useful for SEO | +| key | Number | A uniq tab id | +| tabClassName | String | Tab class name | +| tabSelectedClassName | String | Tab class name for selected item | +| panelClassName | String | Panel class name | ### License diff --git a/src/index.js b/src/index.js index 9f764cd..6aa423c 100644 --- a/src/index.js +++ b/src/index.js @@ -168,7 +168,7 @@ export default class Tabs extends Component { return items.reduce( (result, item, index) => { - const { key = index, title, content, getContent, disabled, tabClassName, panelClassName } = item; + const { key = index, title, content, getContent, disabled, tabClassName, tabSelectedClassName, panelClassName } = item; const selected = selectedTabKey === key; const payload = { tabIndex, collapsed, selected, disabled, key }; @@ -182,6 +182,7 @@ export default class Tabs extends Component { }, allowRemove: allowRemove && (!removeActiveOnly || selected), className: tabClassName, + classNameSelected: tabSelectedClassName, }; const panelPayload = { @@ -224,7 +225,7 @@ export default class Tabs extends Component { ); }; - getTabProps = ({ title, key, selected, collapsed, tabIndex, disabled, className, onRemove, allowRemove }) => ({ + getTabProps = ({ title, key, selected, collapsed, tabIndex, disabled, className, classNameSelected, onRemove, allowRemove }) => ({ selected, allowRemove, children: title, @@ -243,6 +244,7 @@ export default class Tabs extends Component { tabIndex, disabled, className, + classNameSelected }), }); @@ -263,13 +265,14 @@ export default class Tabs extends Component { hasChildSelected: isSelectedTabHidden, }); - getClassNamesFor = (type, { selected, collapsed, tabIndex, disabled, className = '', isHidden }) => { + getClassNamesFor = (type, { selected, collapsed, tabIndex, disabled, className = '', classNameSelected = '', isHidden }) => { const { tabClass, panelClass } = this.props; switch (type) { case 'tab': + console.log(classNameSelected); return cs('RRT__tab', className, tabClass, { 'RRT__tab--first': !tabIndex, - 'RRT__tab--selected': selected, + ['RRT__tab--selected' + (classNameSelected.length ? ' ' + classNameSelected : '')]: selected, 'RRT__tab--disabled': disabled, 'RRT__tab--collapsed': collapsed, }); @@ -425,6 +428,7 @@ Tabs.propTypes = { containerClass: PropTypes.string, tabsWrapperClass: PropTypes.string, tabClass: PropTypes.string, + tabClassSelected: PropTypes.string, panelClass: PropTypes.string, // optional external id. Force rerender when it changes // eslint-disable-next-line react/forbid-prop-types @@ -447,6 +451,7 @@ Tabs.defaultProps = { containerClass: undefined, tabsWrapperClass: undefined, tabClass: undefined, + tabClassSelected: undefined, panelClass: undefined, showMoreLabel: '...', unmountOnExit: true, From 8fb13ca7a19dc9b101ca1a17af29e8a3ce2a0e91 Mon Sep 17 00:00:00 2001 From: Andrey Kovalsky Date: Thu, 30 Sep 2021 06:45:16 +0300 Subject: [PATCH 2/2] remove console --- src/index.js | 1 - 1 file changed, 1 deletion(-) diff --git a/src/index.js b/src/index.js index 6aa423c..98116de 100644 --- a/src/index.js +++ b/src/index.js @@ -269,7 +269,6 @@ export default class Tabs extends Component { const { tabClass, panelClass } = this.props; switch (type) { case 'tab': - console.log(classNameSelected); return cs('RRT__tab', className, tabClass, { 'RRT__tab--first': !tabIndex, ['RRT__tab--selected' + (classNameSelected.length ? ' ' + classNameSelected : '')]: selected,