Replace sprockets/browserify with Webpack (#2617)
* Replace browserify with webpack * Add react-intl-translations-manager * Do not minify in development, add offline-plugin for ServiceWorker background cache updates * Adjust tests and dependencies * Fix production deployments * Fix tests * More optimizations * Improve travis cache for npm stuff * Re-run travis * Add back support for custom.scss as before * Remove offline-plugin and babili * Fix issue with Immutable.List().unshift(...values) not working as expected * Make travis load schema instead of running all migrations in sequence * Fix missing React import in WarningContainer. Optimize rendering performance by using ImmutablePureComponent instead of React.PureComponent. ImmutablePureComponent uses Immutable.is() to compare props. Replace dynamic callback bindings in <UI /> * Add react definitions to places that use JSX * Add Procfile.dev for running rails, webpack and streaming API at the same time
This commit is contained in:
parent
26bc591572
commit
f5bf5ebb82
343 changed files with 5299 additions and 2081 deletions
79
app/javascript/mastodon/components/dropdown_menu.js
Normal file
79
app/javascript/mastodon/components/dropdown_menu.js
Normal file
|
@ -0,0 +1,79 @@
|
|||
import React from 'react';
|
||||
import Dropdown, { DropdownTrigger, DropdownContent } from 'react-simple-dropdown';
|
||||
import PropTypes from 'prop-types';
|
||||
|
||||
class DropdownMenu extends React.PureComponent {
|
||||
|
||||
constructor (props, context) {
|
||||
super(props, context);
|
||||
this.state = {
|
||||
direction: 'left'
|
||||
};
|
||||
this.setRef = this.setRef.bind(this);
|
||||
this.renderItem = this.renderItem.bind(this);
|
||||
}
|
||||
|
||||
setRef (c) {
|
||||
this.dropdown = c;
|
||||
}
|
||||
|
||||
handleClick (i, e) {
|
||||
const { action } = this.props.items[i];
|
||||
|
||||
if (typeof action === 'function') {
|
||||
e.preventDefault();
|
||||
action();
|
||||
this.dropdown.hide();
|
||||
}
|
||||
}
|
||||
|
||||
renderItem (item, i) {
|
||||
if (item === null) {
|
||||
return <li key={ 'sep' + i } className='dropdown__sep' />;
|
||||
}
|
||||
|
||||
const { text, action, href = '#' } = item;
|
||||
|
||||
return (
|
||||
<li className='dropdown__content-list-item' key={ text + i }>
|
||||
<a href={href} target='_blank' rel='noopener' onClick={this.handleClick.bind(this, i)} className='dropdown__content-list-link'>
|
||||
{text}
|
||||
</a>
|
||||
</li>
|
||||
);
|
||||
}
|
||||
|
||||
render () {
|
||||
const { icon, items, size, direction, ariaLabel } = this.props;
|
||||
const directionClass = (direction === "left") ? "dropdown__left" : "dropdown__right";
|
||||
|
||||
return (
|
||||
<Dropdown ref={this.setRef}>
|
||||
<DropdownTrigger className='icon-button' style={{ fontSize: `${size}px`, width: `${size}px`, lineHeight: `${size}px` }} aria-label={ariaLabel}>
|
||||
<i className={ `fa fa-fw fa-${icon} dropdown__icon` } aria-hidden={true} />
|
||||
</DropdownTrigger>
|
||||
|
||||
<DropdownContent className={directionClass}>
|
||||
<ul className='dropdown__content-list'>
|
||||
{items.map(this.renderItem)}
|
||||
</ul>
|
||||
</DropdownContent>
|
||||
</Dropdown>
|
||||
);
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
DropdownMenu.propTypes = {
|
||||
icon: PropTypes.string.isRequired,
|
||||
items: PropTypes.array.isRequired,
|
||||
size: PropTypes.number.isRequired,
|
||||
direction: PropTypes.string,
|
||||
ariaLabel: PropTypes.string
|
||||
};
|
||||
|
||||
DropdownMenu.defaultProps = {
|
||||
ariaLabel: "Menu"
|
||||
};
|
||||
|
||||
export default DropdownMenu;
|
Loading…
Add table
Add a link
Reference in a new issue