From 0bf997c0bd2d9256ca31dfb2f83f8688752a7aa9 Mon Sep 17 00:00:00 2001 From: Rishi Kumar Chawda Date: Tue, 1 Jan 2019 18:28:53 +0530 Subject: [PATCH] fix(multiselect): update multiselect design and fix minor bugs (#296) * fix(multiselect): update option height and icon #287 * fix(multiselect): fix chip design and update icon * fix(multiselect): bug fix on selecting items * refactor(multiselect): remove dead code * fix(multiselect): update multiselect design * fix(multiselect): update selected chip animation --- lib/globals/animations.module.scss | 15 +++++++ lib/multiselect/index.js | 51 ++++-------------------- lib/multiselect/theme.module.scss | 64 +++++++++++------------------- 3 files changed, 46 insertions(+), 84 deletions(-) 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/index.js b/lib/multiselect/index.js index fa8b4a82..07c7bf4f 100644 --- a/lib/multiselect/index.js +++ b/lib/multiselect/index.js @@ -3,6 +3,8 @@ import ReactDOM from 'react-dom'; import PropTypes from 'prop-types'; import cx from 'classnames'; import { themr } from 'react-css-themr'; +import { FaChevronDown } from 'react-icons/fa'; +import { MdClose } from 'react-icons/md'; import defaultTheme from './theme.module.scss'; const { findDOMNode: findNode } = ReactDOM; @@ -17,7 +19,6 @@ class MultiSelect extends Component { */ selected: [], open: false, - input: '', }; this.listRef = null; @@ -31,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; @@ -65,12 +60,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( @@ -118,22 +108,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; @@ -204,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( @@ -259,7 +224,7 @@ class MultiSelect extends Component { >
{option.label} -
this.removeOption(e, option)} /> @@ -290,7 +255,7 @@ class MultiSelect extends Component {
{this.renderSelected()}
-
+
{open && (
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) { @@ -77,27 +79,9 @@ } :local(.close) { - height: 20px; - width: 20px; - display: flex; - align-self: center; - justify-content: center; - align-items: center; cursor: pointer; - &:before, - &:after { - position: absolute; - content: ""; - z-index: 2; - border-left: 2px solid #aaa; - height: 10px; - } - &:before { - transform: rotate(45deg); - } - &:after { - transform: rotate(-45deg); - } + align-self: center; + padding-left: 0.25em; } :local(.selectInputWrapper) { @@ -111,18 +95,20 @@ } :local(.selected) { - min-width: fit-content; - padding: 2px; box-sizing: border-box; + flex-grow: 1; + padding: 0.2em; + max-width: fit-content; + animation-duration: 0.15s; + @include zoomIn(); div { flex-direction: row !important; display: flex; justify-items: space-between; - padding: 0 5% 0 10%; + padding: 0.38em; background: #eee; border-radius: 5px; min-width: fit-content; - padding: 2px; position: relative; box-sizing: border-box; div { @@ -138,27 +124,23 @@ } :local(.selected-option) { - background-color: rgba(71, 233, 243, 0.2); + background-color: #66a5ad; + color: white; } :local(.arrow) { - align-self: flex-start; - border: none; - border-right: 2px solid #1a237e; - border-bottom: 2px solid #1a237e; - height: 5px; - width: 5px; - margin-right: -5px; + align-self: center; transition: 0.3s ease; - margin-top: 5%; + cursor: pointer; + will-change: transform; } -:local(.down) { - transform: rotate(45deg); +:local(.up) { + transform: rotate(-180deg); } -:local(.up) { - transform: rotate(-135deg); +:local(.down) { + transform: rotate(0deg); } :local(.border-animation) { @@ -167,7 +149,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;