imterah/element-portable
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Underline visible sections in header

Browse source 
Signed-off-by: Tulir Asokan <tulir@maunium.net>
This commit is contained in:
Tulir Asokan 2019-10-14 20:14:40 +03:00
parent 088c9bff9e
commit e16d0bfa4d
4 changed files with 56 additions and 25 deletions
Download patch file Download diff file Expand all files Collapse all files

23
src/components/views/emojipicker/Header.js
View file

@ -19,33 +19,20 @@ import PropTypes from 'prop-types';
import * as icons from "./icons";
class Header extends React.Component {
class Header extends React.PureComponent {
static propTypes = {
categories: PropTypes.arrayOf(PropTypes.object).isRequired,
onAnchorClick: PropTypes.func.isRequired,
defaultCategory: PropTypes.string,
};
constructor(props) {
super(props);
this.state = {
selected: props.defaultCategory || props.categories[0].id,
};
this.handleClick = this.handleClick.bind(this);
}
handleClick(selected) {
this.setState({selected});
this.props.onAnchorClick(selected);
refs: PropTypes.object,
};
render() {
return (
<nav className="mx_EmojiPicker_header">
{this.props.categories.map(category => (
<button disabled={!category.enabled} key={category.id} className={`mx_EmojiPicker_anchor ${
this.state.selected === category.id ? 'mx_EmojiPicker_anchor_selected' : ''}`}
onClick={() => this.handleClick(category.id)} title={category.name}>
<button disabled={!category.enabled} key={category.id} ref={category.ref}
className={`mx_EmojiPicker_anchor ${category.visible ? 'mx_EmojiPicker_anchor_visible' : ''}`}
onClick={() => this.props.onAnchorClick(category.id)} title={category.name}>
{icons.categories[category.id]()}
</button>
))}