Skip to content
This repository was archived by the owner on Jan 21, 2019. It is now read-only.

IW-1347 | set isTouchDevice in dropdown within commponentDidMount method #85

Merged
merged 1 commit into from
Dec 3, 2018
Merged

IW-1347 | set isTouchDevice in dropdown within commponentDidMount method #85

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
9 changes: 8 additions & 1 deletion components/Dropdown.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -411,7 +411,7 @@ function (_React$Component) {
_this = _possibleConstructorReturn(this, _getPrototypeOf(Dropdown).call(this, props));
_this.state = {
isClicked: false,
isTouchDevice: typeof window !== 'undefined' && 'ontouchstart' in window
isTouchDevice: false
};
_this.onClick = _this.onClick.bind(_assertThisInitialized(_assertThisInitialized(_this)));
_this.onToggleClicked = _this.onToggleClicked.bind(_assertThisInitialized(_assertThisInitialized(_this)));
Expand All @@ -420,6 +420,13 @@ function (_React$Component) {
}

_createClass(Dropdown, [{
key: "componentDidMount",
value: function componentDidMount() {
this.setState({
isTouchDevice: typeof window !== 'undefined' && 'ontouchstart' in window
});
}
}, {
key: "onClick",
value: function onClick() {
this.handleClick(false);
Expand Down
30 changes: 15 additions & 15 deletions components/Select.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -38,21 +38,6 @@
border-top-right-radius: 0;
margin-top: 0;
z-index: 10000;
}.wds-icon {
fill: currentColor;
height: 24px;
min-width: 24px;
width: 24px;
}
.wds-icon-small {
height: 18px;
min-width: 18px;
width: 18px;
}
.wds-icon-tiny {
height: 12px;
min-width: 12px;
width: 12px;
}@keyframes fandom-spinner-rotator {
from {
transform: rotate(0);
Expand Down Expand Up @@ -92,4 +77,19 @@
position: static;
top: 0;
width: auto;
}.wds-icon {
fill: currentColor;
height: 24px;
min-width: 24px;
width: 24px;
}
.wds-icon-small {
height: 18px;
min-width: 18px;
width: 18px;
}
.wds-icon-tiny {
height: 12px;
min-width: 12px;
width: 12px;
}
2 changes: 1 addition & 1 deletion docs/build/bundle.390f2580.js → docs/build/bundle.c75b3ae7.js
View file
Open in desktop

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion docs/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1 +1 @@
<!DOCTYPE html><html><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>react-design-system</title><link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Rubik:400,700"></head><body><div id="rsg-root"></div><div id="app"></div><script src="build/bundle.390f2580.js"></script></body></html>
<!DOCTYPE html><html><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>react-design-system</title><link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Rubik:400,700"></head><body><div id="rsg-root"></div><div id="app"></div><script src="build/bundle.c75b3ae7.js"></script></body></html>
8 changes: 7 additions & 1 deletion source/components/Dropdown/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,14 +16,20 @@ class Dropdown extends React.Component {

this.state = {
isClicked: false,
isTouchDevice: typeof window !== 'undefined' && ('ontouchstart' in window),
isTouchDevice: false,
};

this.onClick = this.onClick.bind(this);
this.onToggleClicked = this.onToggleClicked.bind(this);
this.onMouseLeave = this.onMouseLeave.bind(this);
}

componentDidMount() {
this.setState({
isTouchDevice: typeof window !== 'undefined' && ('ontouchstart' in window),
Copy link

Choose a reason for hiding this comment

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

the only odd thing about having it here
is that any time you'll render Dropdown component you'll check if it is still a touch device...
@xkxd @latata is there a solution to this? or is it just how it is?

Copy link
Contributor

Choose a reason for hiding this comment

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

We'll go with this solution to unblock development since we're wrapping up dropdowns, but let's keep discussion open about patterns like this.

This code is moved to componentDidMount as we know for sure it runs immediately component is mount on the browser side - this way we overwrite the isTouchDevice value which is set to false on the SSR side immediately after rendering the component.

});
}

onClick() {
this.handleClick(false);
}
Expand Down