Добавлено залипание кнопки при раскрытии Dropdown.

Класс открытого состояние перенесён на верх компонента.
This commit is contained in:
ErickSkrauch 2016-05-29 19:48:30 +03:00
parent 8b4ea446b0
commit c66c2ac446
2 changed files with 16 additions and 11 deletions

View File

@ -18,7 +18,7 @@ export default class Dropdown extends FormComponent {
]).isRequired, ]).isRequired,
items: PropTypes.arrayOf(PropTypes.string).isRequired, items: PropTypes.arrayOf(PropTypes.string).isRequired,
block: PropTypes.bool, block: PropTypes.bool,
color: PropTypes.oneOf(['green', 'blue', 'red', 'lightViolet', 'darkBlue', 'violet']) color: PropTypes.oneOf(['green', 'blue', 'red', 'lightViolet', 'darkBlue', 'violet', 'orange'])
}; };
state = { state = {
@ -42,14 +42,13 @@ export default class Dropdown extends FormComponent {
return ( return (
<div className={classNames(styles[color], { <div className={classNames(styles[color], {
[styles.block]: block [styles.block]: block,
[styles.opened]: isActive
})} {...this.props} onClick={this.onToggle}> })} {...this.props} onClick={this.onToggle}>
{label} {label}
<span className={styles.toggleIcon} /> <span className={styles.toggleIcon} />
<div className={classNames(styles.menu, { <div className={styles.menu}>
[styles.menuActive]: isActive
})}>
{items.map((item, key) => ( {items.map((item, key) => (
<div className={styles.menuItem} key={key} onClick={this.onSelectItem(item)}> <div className={styles.menuItem} key={key} onClick={this.onSelectItem(item)}>
{item} {item}

View File

@ -14,7 +14,8 @@ $dropdownPadding: 15px;
background-color: lighter($backgroundColor); background-color: lighter($backgroundColor);
} }
&:active { // TODO: +.open, чтобы он был ужатый в раскрытом состоянии &:active,
&.opened {
background-color: darker($backgroundColor); background-color: darker($backgroundColor);
} }
} }
@ -42,6 +43,10 @@ $dropdownPadding: 15px;
} }
} }
.opened {
}
.toggleIcon { .toggleIcon {
composes: selecter from 'components/ui/icons.scss'; composes: selecter from 'components/ui/icons.scss';
@ -55,7 +60,8 @@ $dropdownPadding: 15px;
right: $dropdownPadding - 5px; right: $dropdownPadding - 5px;
} }
.dropdown:active & { // TODO: + .open, смотри коммент выше .dropdown:active &,
.dropdown.opened & {
right: $dropdownPadding + 5px; right: $dropdownPadding + 5px;
} }
} }
@ -84,11 +90,11 @@ $dropdownPadding: 15px;
transition-property: opacity, visibility; transition-property: opacity, visibility;
opacity: 0; opacity: 0;
visibility: hidden; visibility: hidden;
}
.menuActive { .dropdown.opened & {
opacity: 1; opacity: 1;
visibility: visible; visibility: visible;
}
} }
.menuItem { .menuItem {