[WIP] Initial status work

app/javascript/glitch/components/common/button/index.js

@@ -0,0 +1,146 @@
+//  <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>
+      );
+    }
+  };
+
+}