147 lines
3.8 KiB
JavaScript
147 lines
3.8 KiB
JavaScript
// <CommonButton>
|
|
// ========
|
|
|
|
// For code documentation, please see:
|
|
// https://glitch-soc.github.io/docs/javascript/glitch/common/button
|
|
|
|
// For more information, please contact:
|
|
// @kibi@glitch.social
|
|
|
|
// * * * * * * * //
|
|
|
|
// Imports
|
|
// -------
|
|
|
|
// Package imports.
|
|
import classNames from 'classnames';
|
|
import React from 'react';
|
|
import PropTypes from 'prop-types';
|
|
|
|
// Our imports.
|
|
import CommonLink from 'glitch/components/common/link';
|
|
import CommonIcon from 'glitch/components/common/icon';
|
|
|
|
// Stylesheet imports.
|
|
import './style';
|
|
|
|
// * * * * * * * //
|
|
|
|
// The component
|
|
// -------------
|
|
|
|
export default class CommonButton extends React.PureComponent {
|
|
|
|
static propTypes = {
|
|
active: PropTypes.bool,
|
|
animate: PropTypes.bool,
|
|
children: PropTypes.node,
|
|
className: PropTypes.string,
|
|
disabled: PropTypes.bool,
|
|
href: PropTypes.string,
|
|
icon: PropTypes.string,
|
|
onClick: PropTypes.func,
|
|
showTitle: PropTypes.bool,
|
|
title: PropTypes.string,
|
|
}
|
|
state = {
|
|
loaded: false,
|
|
}
|
|
|
|
// The `loaded` state property activates our animations. We wait
|
|
// until an activation change in order to prevent unsightly
|
|
// animations when the component first mounts.
|
|
componentWillReceiveProps (nextProps) {
|
|
const { active } = this.props;
|
|
|
|
// The double "not"s here cast both arguments to booleans.
|
|
if (!nextProps.active !== !active) this.setState({ loaded: true });
|
|
}
|
|
|
|
handleClick = (e) => {
|
|
const { onClick } = this.props;
|
|
if (!onClick) return;
|
|
onClick(e);
|
|
e.preventDefault();
|
|
}
|
|
|
|
// Rendering the component.
|
|
render () {
|
|
const { handleClick } = this;
|
|
const {
|
|
active,
|
|
animate,
|
|
children,
|
|
className,
|
|
disabled,
|
|
href,
|
|
icon,
|
|
onClick,
|
|
showTitle,
|
|
title,
|
|
...others
|
|
} = this.props;
|
|
const { loaded } = this.state;
|
|
const computedClass = classNames('glitch', 'glitch__common__button', className, {
|
|
_active: active && !href, // Links can't be active
|
|
_animated: animate && loaded,
|
|
_disabled: disabled,
|
|
_link: href,
|
|
_star: icon === 'star',
|
|
'_with-text': children || title && showTitle,
|
|
});
|
|
let conditionalProps = {};
|
|
|
|
// If href is provided, we render a link.
|
|
if (href) {
|
|
if (!disabled && href) conditionalProps.href = href;
|
|
if (title && !showTitle) {
|
|
if (!children) conditionalProps.title = title;
|
|
else conditionalProps['aria-label'] = title;
|
|
}
|
|
if (onClick) {
|
|
if (!disabled) conditionalProps.onClick = handleClick;
|
|
else conditionalProps['aria-disabled'] = true;
|
|
conditionalProps.role = 'button';
|
|
conditionalProps.tabIndex = 0;
|
|
}
|
|
return (
|
|
<CommonLink
|
|
className={computedClass}
|
|
{...conditionalProps}
|
|
{...others}
|
|
>
|
|
{children}
|
|
{title && showTitle ? <span className='button\title'>{title}</span> : null}
|
|
<CommonIcon name={icon} className='button\icon' />
|
|
</CommonLink>
|
|
);
|
|
|
|
// Otherwise, we render a button.
|
|
} else {
|
|
if (active !== void 0) conditionalProps['aria-pressed'] = active;
|
|
if (title && !showTitle) {
|
|
if (!children) conditionalProps.title = title;
|
|
else conditionalProps['aria-label'] = title;
|
|
}
|
|
if (onClick && !disabled) {
|
|
conditionalProps.onClick = handleClick;
|
|
}
|
|
return (
|
|
<button
|
|
className={computedClass}
|
|
{...conditionalProps}
|
|
disabled={disabled}
|
|
{...others}
|
|
tabIndex='0'
|
|
type='button'
|
|
>
|
|
{children}
|
|
{title && showTitle ? <span className='button\title'>{title}</span> : null}
|
|
<CommonIcon name={icon} className='button\icon' />
|
|
</button>
|
|
);
|
|
}
|
|
};
|
|
|
|
}
|