design-system-starter/dist/cjs/clicker.js

Design system starter

/* design-system-starter v0.0.17 © 2019 Ryan Fitzer */
'use strict';

function _interopDefault (ex) { return (ex && (typeof ex === 'object') && 'default' in ex) ? ex['default'] : ex; }

var button = require('./button.js');
var React = require('react');
var React__default = _interopDefault(React);
require('prop-types');

function _slicedToArray(arr, i) {
  return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _nonIterableRest();
}

function _arrayWithHoles(arr) {
  if (Array.isArray(arr)) return arr;
}

function _iterableToArrayLimit(arr, i) {
  if (!(Symbol.iterator in Object(arr) || Object.prototype.toString.call(arr) === "[object Arguments]")) {
    return;
  }

  var _arr = [];
  var _n = true;
  var _d = false;
  var _e = undefined;

  try {
    for (var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done); _n = true) {
      _arr.push(_s.value);

      if (i && _arr.length === i) break;
    }
  } catch (err) {
    _d = true;
    _e = err;
  } finally {
    try {
      if (!_n && _i["return"] != null) _i["return"]();
    } finally {
      if (_d) throw _e;
    }
  }

  return _arr;
}

function _nonIterableRest() {
  throw new TypeError("Invalid attempt to destructure non-iterable instance");
}

/**
 * Button that displays the total clicks it's recieved
 */

var Clicker = function Clicker() {
  var _useState = React.useState(0),
      _useState2 = _slicedToArray(_useState, 2),
      count = _useState2[0],
      setCount = _useState2[1];

  function updateCount() {
    setCount(count + 1);
  }

  React.useEffect(function () {
    document.title = "You clicked ".concat(count, " times");
  });
  return React__default.createElement("div", null, React__default.createElement("p", {
    className: "msg"
  }, "You clicked ", count, " ", count === 1 ? 'time' : 'times'), React__default.createElement(button, {
    text: "Click Me!",
    onClick: updateCount
  }));
};

module.exports = Clicker;