From 27dbf34817c1c223e3125646bfbbf7b26a5c50dc Mon Sep 17 00:00:00 2001 From: rishichawda Date: Mon, 31 Dec 2018 11:27:26 +0530 Subject: [PATCH 1/6] fix(multiselect): update option height and icon #287 --- lib/multiselect/index.js | 3 ++- lib/multiselect/theme.module.scss | 17 ++++++----------- 2 files changed, 8 insertions(+), 12 deletions(-) diff --git a/lib/multiselect/index.js b/lib/multiselect/index.js index fa8b4a82..04bdc26c 100644 --- a/lib/multiselect/index.js +++ b/lib/multiselect/index.js @@ -3,6 +3,7 @@ import ReactDOM from 'react-dom'; import PropTypes from 'prop-types'; import cx from 'classnames'; import { themr } from 'react-css-themr'; +import { FaAngleUp } from 'react-icons/fa'; import defaultTheme from './theme.module.scss'; const { findDOMNode: findNode } = ReactDOM; @@ -290,7 +291,7 @@ class MultiSelect extends Component {
{this.renderSelected()}
-
+
{open && (
Date: Mon, 31 Dec 2018 11:42:28 +0530 Subject: [PATCH 2/6] fix(multiselect): fix chip design and update icon --- lib/multiselect/index.js | 7 ++++--- lib/multiselect/theme.module.scss | 34 ++++++++----------------------- 2 files changed, 12 insertions(+), 29 deletions(-) diff --git a/lib/multiselect/index.js b/lib/multiselect/index.js index 04bdc26c..66b2b4dc 100644 --- a/lib/multiselect/index.js +++ b/lib/multiselect/index.js @@ -3,7 +3,8 @@ import ReactDOM from 'react-dom'; import PropTypes from 'prop-types'; import cx from 'classnames'; import { themr } from 'react-css-themr'; -import { FaAngleUp } from 'react-icons/fa'; +import { FaChevronDown } from 'react-icons/fa'; +import { MdClose } from 'react-icons/md'; import defaultTheme from './theme.module.scss'; const { findDOMNode: findNode } = ReactDOM; @@ -260,7 +261,7 @@ class MultiSelect extends Component { >
{option.label} -
this.removeOption(e, option)} /> @@ -291,7 +292,7 @@ class MultiSelect extends Component {
{this.renderSelected()}
- +
{open && (
Date: Mon, 31 Dec 2018 11:49:28 +0530 Subject: [PATCH 3/6] fix(multiselect): bug fix on selecting items --- lib/multiselect/index.js | 25 ++----------------------- 1 file changed, 2 insertions(+), 23 deletions(-) diff --git a/lib/multiselect/index.js b/lib/multiselect/index.js index 66b2b4dc..f7030f79 100644 --- a/lib/multiselect/index.js +++ b/lib/multiselect/index.js @@ -19,7 +19,6 @@ class MultiSelect extends Component { */ selected: [], open: false, - input: '', }; this.listRef = null; @@ -67,12 +66,7 @@ class MultiSelect extends Component { handleKeyPress = (e) => { e.preventDefault(); const { options } = this.props; - const { input, selected, focus } = this.state; - const isValid = options - .filter(opt => opt - .label - .toLowerCase() - .indexOf(input.toLowerCase()) !== -1); + const { focus } = this.state; switch (e.key) { case 'ArrowDown': this.setState( @@ -120,22 +114,7 @@ class MultiSelect extends Component { ); break; case 'Enter': - if (focus) { - this.handleSelect(options[focus]); - break; - } - if (isValid.length) { - if ( - !selected.filter(item => item.label === isValid[0].label).length - ) { - this.setState({ - selected: [...selected, isValid[0]], - }); - } - } - this.setState({ - input: '', - }); + this.handleSelect(options[focus]); break; default: break; From 5c2a0473213e80b61c2d17726d4858efad4b01de Mon Sep 17 00:00:00 2001 From: rishichawda Date: Mon, 31 Dec 2018 12:01:41 +0530 Subject: [PATCH 4/6] refactor(multiselect): remove dead code --- lib/multiselect/index.js | 20 ++------------------ 1 file changed, 2 insertions(+), 18 deletions(-) diff --git a/lib/multiselect/index.js b/lib/multiselect/index.js index f7030f79..07c7bf4f 100644 --- a/lib/multiselect/index.js +++ b/lib/multiselect/index.js @@ -32,12 +32,6 @@ class MultiSelect extends Component { return { threshold, focusedItem }; }; - handleInput = ({ target }) => { - this.setState({ - input: target.value, - }); - }; - // Handle the click event when user selects / clicks on an option from the dropdown. handleSelect = (selectedOption) => { const { onSelect } = this.props; @@ -185,18 +179,8 @@ class MultiSelect extends Component { // Helper function to render options inside the dropdown. renderOptions = (options) => { const { theme } = this.props; - const { selected, input, focus } = this.state; - let filteredOptions; - if (input.length) { - filteredOptions = options - .filter(opt => opt - .label - .toLowerCase() - .indexOf(input.toLowerCase()) !== -1); - } else { - filteredOptions = options; - } - return filteredOptions.map((option, index) => { + const { selected, focus } = this.state; + return options.map((option, index) => { /* eslint-disable jsx-a11y/click-events-have-key-events */ /* eslint-disable jsx-a11y/no-static-element-interactions */ const itemtheme = cx( From b99e541136784bcbb14f36bf96b2f7ad5cc00fe2 Mon Sep 17 00:00:00 2001 From: rishichawda Date: Mon, 31 Dec 2018 16:07:58 +0530 Subject: [PATCH 5/6] fix(multiselect): update multiselect design --- lib/multiselect/theme.module.scss | 13 ++++++++----- 1 file changed, 8 insertions(+), 5 deletions(-) diff --git a/lib/multiselect/theme.module.scss b/lib/multiselect/theme.module.scss index 2c75877e..7609c64e 100644 --- a/lib/multiselect/theme.module.scss +++ b/lib/multiselect/theme.module.scss @@ -41,7 +41,8 @@ min-height: fit-content; min-height: -moz-fit-content; &:hover { - background: rgba(71, 233, 243, 0.2); + background: #c4dfe6; + color: #6c757d; } &>span { white-space: nowrap; @@ -51,7 +52,8 @@ } :local(.item-hover) { - background: rgba(71, 233, 243, 0.2); + background: #c4dfe6 !important; + color: #6c757d !important; } :local(.show) { @@ -79,7 +81,7 @@ :local(.close) { cursor: pointer; align-self: center; - margin-left: 2%; + padding-left: 0.25em; } :local(.selectInputWrapper) { @@ -120,7 +122,8 @@ } :local(.selected-option) { - background-color: rgba(71, 233, 243, 0.2); + background-color: #66a5ad; + color: white; } :local(.arrow) { @@ -144,7 +147,7 @@ position: absolute; bottom: -2px; left: 0px; - background-color: $primary-input-active-border !important; + background-color: #c4dfe6 !important; height: 2px; @include inputFocus(); animation-duration: 0.5s; From af9f326a7b3a95c5f912c4041cd543f71c0bc4bc Mon Sep 17 00:00:00 2001 From: rishichawda Date: Mon, 31 Dec 2018 16:13:24 +0530 Subject: [PATCH 6/6] fix(multiselect): update selected chip animation --- lib/globals/animations.module.scss | 15 +++++++++++++++ lib/multiselect/theme.module.scss | 2 ++ 2 files changed, 17 insertions(+) diff --git a/lib/globals/animations.module.scss b/lib/globals/animations.module.scss index 303383e6..27889a73 100644 --- a/lib/globals/animations.module.scss +++ b/lib/globals/animations.module.scss @@ -13,6 +13,21 @@ } } +@mixin zoomIn() { + -o-animation-name: animateZoom; + -moz-animation-name: animateZoom; + -webkit-animation-name: animateZoom; + animation-name: animateZoom; + @keyframes animateZoom { + 0% { + transform: scale(0.1); + } + 100% { + transform: scale(1); + } + } +} + @mixin sectionEntry($duration) { visibility: hidden; opacity: 0; diff --git a/lib/multiselect/theme.module.scss b/lib/multiselect/theme.module.scss index 7609c64e..0de13aa3 100644 --- a/lib/multiselect/theme.module.scss +++ b/lib/multiselect/theme.module.scss @@ -99,6 +99,8 @@ flex-grow: 1; padding: 0.2em; max-width: fit-content; + animation-duration: 0.15s; + @include zoomIn(); div { flex-direction: row !important; display: flex;