@xgovformbuilder/govuk-react-jsx/govuk/components/button/index.js

> This package is no longer maintained and will not receive updates bringing it beyond govuk-frontend 4.0.1. If you are using this in your project the simplest way forward is to copy and paste the components from here into your project allowing you to kee

import _extends from "@babel/runtime/helpers/extends";
import _asyncToGenerator from "@babel/runtime/helpers/asyncToGenerator";
import _defineProperty from "@babel/runtime/helpers/defineProperty";
import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
var _excluded = ["element", "href", "to", "isStartButton", "disabled", "className", "preventDoubleClick", "name", "type", "children"];
import _regeneratorRuntime from "@babel/runtime/regenerator";

function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }

function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }

import React, { useEffect } from 'react';
import { Link } from '../../../utils/Link';
var Button = /*#__PURE__*/React.forwardRef(function (props, ref) {
  var element = props.element,
      href = props.href,
      to = props.to,
      isStartButton = props.isStartButton,
      disabled = props.disabled,
      className = props.className,
      preventDoubleClick = props.preventDoubleClick,
      name = props.name,
      type = props.type,
      children = props.children,
      attributes = _objectWithoutProperties(props, _excluded);

  var buttonRef = ref || /*#__PURE__*/React.createRef();
  var el = '';

  var buttonAttributes = _objectSpread(_objectSpread({
    name: name,
    type: type
  }, attributes), {}, {
    'data-module': 'govuk-button'
  });

  var button;
  useEffect(function () {
    _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee() {
      var _yield$import, ButtonJS;

      return _regeneratorRuntime.wrap(function _callee$(_context) {
        while (1) {
          switch (_context.prev = _context.next) {
            case 0:
              if (!(typeof document !== 'undefined')) {
                _context.next = 6;
                break;
              }

              _context.next = 3;
              return import(
              /* webpackChunkName: "govuk-frontend-button" */

              /* webpackMode: "lazy" */

              /* webpackPrefetch: true */
              'govuk-frontend/govuk/components/button/button');

            case 3:
              _yield$import = _context.sent;
              ButtonJS = _yield$import["default"];

              if (buttonRef.current) {
                new ButtonJS(buttonRef.current).init();
              }

            case 6:
            case "end":
              return _context.stop();
          }
        }
      }, _callee);
    }))();
  }, [buttonRef]);

  if (element) {
    el = element;
  } else if (href || to) {
    el = 'a';
  } else {
    el = 'button';
  }

  var iconHtml;

  if (isStartButton) {
    iconHtml = /*#__PURE__*/React.createElement("svg", {
      className: "govuk-button__start-icon",
      xmlns: "http://www.w3.org/2000/svg",
      width: "17.5",
      height: "19",
      viewBox: "0 0 33 40",
      "aria-hidden": "true",
      focusable: "false"
    }, /*#__PURE__*/React.createElement("path", {
      fill: "currentColor",
      d: "M0 0h13l20 20-20 20H0l20-20z"
    }));
  }

  var commonAttributes = {
    className: "govuk-button ".concat(className || '').concat(disabled ? ' govuk-button--disabled' : '', " ").concat(isStartButton ? 'govuk-button--start' : ''),
    ref: buttonRef
  };

  if (preventDoubleClick) {
    buttonAttributes['data-prevent-double-click'] = preventDoubleClick;
  }

  if (disabled) {
    buttonAttributes = _objectSpread(_objectSpread({}, buttonAttributes), {}, {
      'aria-disabled': true,
      disabled: 'disabled'
    });
  }

  if (el === 'a') {
    var linkAttributes = _objectSpread(_objectSpread(_objectSpread({}, commonAttributes), {}, {
      role: 'button',
      draggable: 'false'
    }, attributes), {}, {
      'data-module': 'govuk-button',
      href: href,
      to: to
    });

    button = /*#__PURE__*/React.createElement(Link, linkAttributes, children, iconHtml);
  } else if (el === 'button') {
    button =
    /*#__PURE__*/
    // Disabling linting of button type, because the button _does_ have an explicit type
    // It is defined in the defaultProps of the component, which gets added
    // to the buttonAttributes. eslint fails to detect this, and so we need to
    // disable the linting rule
    //
    // eslint-disable-next-line react/button-has-type
    React.createElement("button", _extends({}, buttonAttributes, commonAttributes), children, iconHtml);
  } else if (el === 'input') {
    if (!type) {
      buttonAttributes.type = 'submit';
    }

    button = /*#__PURE__*/React.createElement("input", _extends({
      value: children
    }, buttonAttributes, commonAttributes));
  }

  return button;
});
Button.displayName = 'Button';
export { Button };