@pmwcs/button/next/index.js

PMWCS button component

function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }

import { h } from 'preact';
import { memo } from 'preact/compat';
import { withRipple } from '@pmwcs/ripple';
import { Icon } from '@pmwcs/icon';
import { useClassNames, createComponent, createMemoComponent } from '@pmwcs/base';
/**
 * The Button component.
 */

export const Button = withRipple({
  surface: false
})(createComponent(function Button(props, ref) {
  const {
    dense,
    raised,
    unelevated,
    outlined,
    secondary,
    standard,
    danger,
    activated,
    icon,
    label,
    trailingIcon,
    children,
    theme,
    ...rest
  } = props;

  if (!props.disabled) {
    if (secondary) {
      props.theme = raised || unelevated ? ['secondaryBg', 'onSecondary'] : 'secondary';
    } else if (standard) {
      props.theme = raised || unelevated ? ['standardBg', 'onStandard'] : 'standard';
    }
  }

  const className = useClassNames(props, ['mdc-button', {
    'mdc-button--dense': dense,
    'mdc-button--raised': raised,
    'mdc-button--unelevated': unelevated,
    'mdc-button--outlined': outlined,
    'mdc-button--activated': activated
  }]);

  if (danger) {
    const existingStyle = rest.style || {};
    const dangerStyle = {
      '--mdc-theme-primary': 'var(--mdc-theme-error)',
      '--mdc-theme-on-primary': 'var(--mdc-theme-on-error)'
    };
    rest.style = { ...dangerStyle,
      ...existingStyle
    };
  }

  return h("button", _extends({}, rest, {
    ref: ref,
    className: className
  }), h(ButtonRipple, null), !!icon && h(ButtonIcon, {
    icon: icon
  }), h("span", {
    className: "mdc-button__label"
  }, label, children), !!trailingIcon && h(ButtonIcon, {
    icon: trailingIcon
  }));
}));
/*********************************************************************
 * Bits
 *********************************************************************/

const ButtonRipple = memo(function ButtonRipple() {
  return h("div", {
    className: "mdc-button__ripple"
  });
});
/** An icon that goes inside of buttons. This is an instance of the Icon component. */

const ButtonIcon = createMemoComponent(function ButtonIcon(props, ref) {
  const className = useClassNames(props, ['mdc-button__icon']);
  return h(Icon, _extends({}, props, {
    className: className,
    ref: ref
  }));
});