Skip to content

Add environment prop #365

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 4 commits into from
Feb 6, 2021
Merged

Add environment prop #365

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
efc1a3e
Add environment prop
voluntadpear Jan 11, 2021
a529a6e
Filter out new prop from attrs
voluntadpear Jan 11, 2021
eff14ec
Remove conditional node environment usage
voluntadpear Jan 12, 2021
c77c031
Handle Node and SSR correctly
voluntadpear Jan 13, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 6 additions & 0 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -120,6 +120,12 @@ Provide a custom class name for disabled tabs.

Register a callback that will receive the underlying DOM node for every mount. It will also receive null on unmount.

#### environment: `Window`

> default: `window`

If you're rendering `react-tabs` within a different `window` context than the default one; for example, an iframe.

#### forceRenderTabPanel: `boolean`

> default: `false`
Expand Down
2 changes: 2 additions & 0 deletions src/components/Tabs.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,6 +17,7 @@ export default class Tabs extends Component {
forceRenderTabPanel: false,
selectedIndex: null,
defaultIndex: null,
environment: window,
};

static propTypes = {
Expand All @@ -36,6 +37,7 @@ export default class Tabs extends Component {
selectedIndex: selectedIndexPropType,
selectedTabClassName: PropTypes.string,
selectedTabPanelClassName: PropTypes.string,
environment: PropTypes.object,
};

constructor(props) {
Expand Down
37 changes: 24 additions & 13 deletions src/components/UncontrolledTabs.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22,18 +22,21 @@ function isTabDisabled(node) {
}

let canUseActiveElement;
try {
canUseActiveElement = !!(
typeof window !== 'undefined' &&
window.document &&
window.document.activeElement
);
} catch (e) {
// Work around for IE bug when accessing document.activeElement in an iframe
// Refer to the following resources:
// http://stackoverflow.com/a/10982960/369687
// https://developer.microsoft.com/en-us/microsoft-edge/platform/issues/12733599
canUseActiveElement = false;

function determineCanUseActiveElement(environment) {
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Wrapping this into a function that runs only once (since initially canUseActiveElement is undefined) to be able to use the environment from the props instead of assuming window.

try {
canUseActiveElement = !!(
typeof environment !== 'undefined' &&
environment.document &&
environment.document.activeElement
);
} catch (e) {
// Work around for IE bug when accessing document.activeElement in an iframe
// Refer to the following resources:
// http://stackoverflow.com/a/10982960/369687
// https://developer.microsoft.com/en-us/microsoft-edge/platform/issues/12733599
canUseActiveElement = false;
}
}
export default class UncontrolledTabs extends Component {
static defaultProps = {
Expand All @@ -57,6 +60,7 @@ export default class UncontrolledTabs extends Component {
selectedIndex: PropTypes.number.isRequired,
selectedTabClassName: PropTypes.string,
selectedTabPanelClassName: PropTypes.string,
environment: PropTypes.object,
};

tabNodes = [];
Expand Down Expand Up @@ -164,6 +168,7 @@ export default class UncontrolledTabs extends Component {
selectedIndex,
selectedTabClassName,
selectedTabPanelClassName,
environment,
} = this.props;

this.tabIds = this.tabIds || [];
Expand All @@ -190,10 +195,16 @@ export default class UncontrolledTabs extends Component {
// If it is we should keep the focus on the next selected tab
let wasTabFocused = false;

if (canUseActiveElement == null) {
determineCanUseActiveElement(environment);
}

if (canUseActiveElement) {
wasTabFocused = React.Children.toArray(child.props.children)
.filter(isTab)
.some((tab, i) => document.activeElement === this.getTab(i));
.some(
(tab, i) => environment.document.activeElement === this.getTab(i),
);
}

result = cloneElement(child, {
Expand Down