From ef8de74e0b22ac3145a59f9426e1e54ab49c57b5 Mon Sep 17 00:00:00 2001
From: Paul Kaplan <pkaplan@media.mit.edu>
Date: Tue, 16 May 2017 11:25:54 -0400
Subject: [PATCH] Remove selected state from libraries, adding on first click
---
src/components/library-item/library-item.css | 10 ++--------
src/components/library-item/library-item.jsx | 9 ++-------
src/components/library/library.jsx | 15 ++-------------
3 files changed, 6 insertions(+), 28 deletions(-)
diff --git a/src/components/library-item/library-item.css b/src/components/library-item/library-item.css
index e25c478d2..c702492f8 100644
--- a/src/components/library-item/library-item.css
+++ b/src/components/library-item/library-item.css
@@ -27,12 +27,6 @@
transform: scale(1.02, 1.02);
}
-.library-item.is-selected {
- border-width: 2px;
- border-color: #1dacf4;
- transition: 0.25s ease-out;
-}
-
.library-item-image-container {
height: 100px;
}
@@ -47,12 +41,12 @@
margin: 0.25rem 0;
text-align: center;
- /*
+ /*
For truncating overflowing text gracefully
Min-width is for a bug: https://css-tricks.com/flexbox-truncated-text
*/
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
- min-width: 0;
+ min-width: 0;
}
diff --git a/src/components/library-item/library-item.jsx b/src/components/library-item/library-item.jsx
index 31e722b0e..6abe41b97 100644
--- a/src/components/library-item/library-item.jsx
+++ b/src/components/library-item/library-item.jsx
@@ -1,4 +1,3 @@
-const classNames = require('classnames');
const bindAll = require('lodash.bindall');
const PropTypes = require('prop-types');
const React = require('react');
@@ -18,10 +17,7 @@ class LibraryItem extends React.Component {
render () {
return (
<Box
- className={classNames({
- [styles.libraryItem]: true,
- [styles.isSelected]: this.props.selected
- })}
+ className={styles.libraryItem}
onClick={this.handleClick}
>
<Box className={styles.libraryItemImageContainer}>
@@ -40,8 +36,7 @@ LibraryItem.propTypes = {
iconURL: PropTypes.string.isRequired,
id: PropTypes.number.isRequired,
name: PropTypes.string.isRequired,
- onSelect: PropTypes.func.isRequired,
- selected: PropTypes.bool.isRequired
+ onSelect: PropTypes.func.isRequired
};
module.exports = LibraryItem;
diff --git a/src/components/library/library.jsx b/src/components/library/library.jsx
index 16327c10c..3be748703 100644
--- a/src/components/library/library.jsx
+++ b/src/components/library/library.jsx
@@ -11,19 +11,10 @@ class LibraryComponent extends React.Component {
constructor (props) {
super(props);
bindAll(this, ['handleSelect']);
- this.state = {selectedItem: null};
}
handleSelect (id) {
- if (this.state.selectedItem === id) {
- // Double select: select as the library's value.
- this.props.onRequestClose();
- this.props.onItemSelected(this.props.data[id]);
- } else {
- if (this.props.onItemChosen) {
- this.props.onItemChosen(this.props.data[id]);
- }
- }
- this.setState({selectedItem: id});
+ this.props.onRequestClose();
+ this.props.onItemSelected(this.props.data[id]);
}
render () {
if (!this.props.visible) return null;
@@ -45,7 +36,6 @@ class LibraryComponent extends React.Component {
id={itemId}
key={`item_${itemId}`}
name={dataItem.name}
- selected={this.state.selectedItem === itemId}
onSelect={this.handleSelect}
/>
);
@@ -67,7 +57,6 @@ LibraryComponent.propTypes = {
})
/* eslint-enable react/no-unused-prop-types, lines-around-comment */
),
- onItemChosen: PropTypes.func,
onItemSelected: PropTypes.func,
onRequestClose: PropTypes.func,
title: PropTypes.string.isRequired,
--
GitLab