Use classNames instead of inline `style`
Theres no benefit to using inline styles
This commit is contained in:
parent
3481283af8
commit
d55d3658f0
|
@ -18,18 +18,19 @@ import React from 'react';
|
||||||
import { Draggable } from 'react-beautiful-dnd';
|
import { Draggable } from 'react-beautiful-dnd';
|
||||||
import RoomTile from 'matrix-react-sdk/lib/components/views/rooms/RoomTile';
|
import RoomTile from 'matrix-react-sdk/lib/components/views/rooms/RoomTile';
|
||||||
|
|
||||||
|
import classNames from 'classnames';
|
||||||
|
|
||||||
export default class DNDRoomTile extends React.Component {
|
export default class DNDRoomTile extends React.Component {
|
||||||
constructor() {
|
constructor() {
|
||||||
super();
|
super();
|
||||||
this.getStyle = this.getStyle.bind(this);
|
this.getClassName = this.getClassName.bind(this);
|
||||||
}
|
}
|
||||||
|
|
||||||
getStyle(isDragging) {
|
getClassName(isDragging) {
|
||||||
const result = {
|
return classNames({
|
||||||
transform: isDragging ? "scale(1.05, 1.05)" : "none",
|
"mx_DNDRoomTile": true,
|
||||||
transition: "transform 0.2s",
|
"mx_DNDRoomTile_dragging": isDragging,
|
||||||
};
|
});
|
||||||
return result;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
render() {
|
render() {
|
||||||
|
@ -49,7 +50,7 @@ export default class DNDRoomTile extends React.Component {
|
||||||
{...provided.draggableProps}
|
{...provided.draggableProps}
|
||||||
{...provided.dragHandleProps}
|
{...provided.dragHandleProps}
|
||||||
>
|
>
|
||||||
<div style={this.getStyle(snapshot.isDragging)}>
|
<div className={this.getClassName(snapshot.isDragging)}>
|
||||||
<RoomTile {...props} />
|
<RoomTile {...props} />
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
@ -157,6 +157,15 @@ limitations under the License.
|
||||||
background-color: $roomtile-selected-bg-color;
|
background-color: $roomtile-selected-bg-color;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.mx_DNDRoomTile {
|
||||||
|
transform: none;
|
||||||
|
transition: transform 0.2s;
|
||||||
|
}
|
||||||
|
|
||||||
|
.mx_DNDRoomTile_dragging {
|
||||||
|
transform: scale(1.05, 1.05);
|
||||||
|
}
|
||||||
|
|
||||||
.mx_RoomTile:focus {
|
.mx_RoomTile:focus {
|
||||||
filter: none ! important;
|
filter: none ! important;
|
||||||
background-color: $roomtile-focused-bg-color;
|
background-color: $roomtile-focused-bg-color;
|
||||||
|
|
Loading…
Reference in New Issue