storybook-addon-javascript-toggler
Version:
Storybook addon to toggle javascript in the preview area
101 lines (81 loc) • 11.1 kB
JavaScript
;
function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.JSTogglerButton = void 0;
var React = _interopRequireWildcard(require("react"));
var _addons = _interopRequireDefault(require("@storybook/addons"));
var _components = require("@storybook/components");
var _constants = require("../constants");
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return null; var cache = new WeakMap(); _getRequireWildcardCache = function _getRequireWildcardCache() { return cache; }; return cache; }
function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
function _iterableToArrayLimit(arr, i) { if (typeof Symbol === "undefined" || !(Symbol.iterator in Object(arr))) 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 _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
var noJSIcon = 'm423.2 492.19c12.69 20.72 29.2 35.95 58.4 35.95 24.53 0 40.2-12.26 40.2-29.2 0-20.3-16.1-27.49-43.1-39.3l-14.8-6.35c-42.72-18.2-71.1-41-71.1-89.2 0-44.4 33.83-78.2 86.7-78.2 37.64 0 64.7 13.1 84.2 47.4l-46.1 29.6c-10.15-18.2-21.1-25.37-38.1-25.37-17.34 0-28.33 11-28.33 25.37 0 17.76 11 24.95 36.4 35.95l14.8 6.34c50.3 21.57 78.7 43.56 78.7 93 0 53.3-41.87 82.5-98.1 82.5-54.98 0-90.5-26.2-107.88-60.54zm-209.13 5.13c9.3 16.5 17.76 30.45 38.1 30.45 19.45 0 31.72-7.61 31.72-37.2v-201.3h59.2v202.1c0 61.3-35.94 89.2-88.4 89.2-47.4 0-74.85-24.53-88.81-54.075z';
var JSTogglerButton = function JSTogglerButton() {
var _useState = (0, React.useState)(_constants.JS_START_ENABLED),
_useState2 = _slicedToArray(_useState, 2),
hasJS = _useState2[0],
setJSAvailability = _useState2[1];
var channel = _addons["default"].getChannel();
(0, React.useEffect)(function () {
return channel.emit("".concat(_constants.ADDON_ID, "/setJS"), hasJS);
}, [channel, hasJS]);
var buttonTitle = "Click to ".concat(hasJS ? 'disable' : 'enable', " Javascript");
return /*#__PURE__*/React.createElement(_components.IconButton, {
key: "javascript-toggler",
title: buttonTitle,
active: false,
onClick: function onClick(_) {
return setJSAvailability(!hasJS);
}
}, /*#__PURE__*/React.createElement("svg", {
viewBox: "0 0 630 630",
style: {
width: '24px'
}
}, /*#__PURE__*/React.createElement("mask", {
id: "circle"
}, /*#__PURE__*/React.createElement("rect", {
width: "630",
height: "630",
fill: "black"
}), /*#__PURE__*/React.createElement("circle", {
cx: "315",
cy: "315",
r: "315",
fill: "#f7df1e"
})), /*#__PURE__*/React.createElement("g", {
mask: !hasJS ? 'url(#circle)' : undefined
}, /*#__PURE__*/React.createElement("g", {
opacity: hasJS ? '.75' : '.75'
}, /*#__PURE__*/React.createElement("rect", {
width: "630",
height: "630",
fill: "#f7df1e"
}), /*#__PURE__*/React.createElement("path", {
d: noJSIcon,
style: {
fill: 'black'
}
})), !hasJS && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("circle", {
cx: "315",
cy: "315",
r: "285",
fill: "transparent",
stroke: "rgb(192,0,0)",
strokeWidth: "60"
}), /*#__PURE__*/React.createElement("path", {
d: "M 630 0 L 0 630",
stroke: "rgb(192,0,0)",
strokeWidth: "60"
})))));
};
exports.JSTogglerButton = JSTogglerButton;
//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uL3NyYy9jb21wb25lbnRzL0pTVG9nZ2xlckJ1dHRvbi50c3giXSwibmFtZXMiOlsibm9KU0ljb24iLCJKU1RvZ2dsZXJCdXR0b24iLCJKU19TVEFSVF9FTkFCTEVEIiwiaGFzSlMiLCJzZXRKU0F2YWlsYWJpbGl0eSIsImNoYW5uZWwiLCJhZGRvbnMiLCJnZXRDaGFubmVsIiwiZW1pdCIsIkFERE9OX0lEIiwiYnV0dG9uVGl0bGUiLCJfIiwid2lkdGgiLCJ1bmRlZmluZWQiLCJmaWxsIl0sIm1hcHBpbmdzIjoiOzs7Ozs7Ozs7QUFBQTs7QUFDQTs7QUFFQTs7QUFFQTs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7QUFFQSxJQUFNQSxRQUFRLEdBQUcsK2lCQUFqQjs7QUFFTyxJQUFNQyxlQUF5QixHQUFHLFNBQTVCQSxlQUE0QixHQUFNO0FBQUEsa0JBQ1Ysb0JBQVNDLDJCQUFULENBRFU7QUFBQTtBQUFBLE1BQ3RDQyxLQURzQztBQUFBLE1BQy9CQyxpQkFEK0I7O0FBRzdDLE1BQU1DLE9BQU8sR0FBR0MsbUJBQU9DLFVBQVAsRUFBaEI7O0FBQ0EsdUJBQVU7QUFBQSxXQUFLRixPQUFPLENBQUNHLElBQVIsV0FBZ0JDLG1CQUFoQixhQUFrQ04sS0FBbEMsQ0FBTDtBQUFBLEdBQVYsRUFBeUQsQ0FBQ0UsT0FBRCxFQUFVRixLQUFWLENBQXpEO0FBRUEsTUFBTU8sV0FBVyxzQkFBZVAsS0FBSyxHQUFHLFNBQUgsR0FBYSxRQUFqQyxnQkFBakI7QUFFQSxzQkFDRSxvQkFBQyxzQkFBRDtBQUNFLElBQUEsR0FBRyxFQUFDLG9CQUROO0FBRUUsSUFBQSxLQUFLLEVBQUVPLFdBRlQ7QUFHRSxJQUFBLE1BQU0sRUFBRSxLQUhWO0FBSUUsSUFBQSxPQUFPLEVBQUUsaUJBQUNDLENBQUQ7QUFBQSxhQUFPUCxpQkFBaUIsQ0FBQyxDQUFDRCxLQUFGLENBQXhCO0FBQUE7QUFKWCxrQkFNRTtBQUFLLElBQUEsT0FBTyxFQUFDLGFBQWI7QUFBMkIsSUFBQSxLQUFLLEVBQUU7QUFBRVMsTUFBQUEsS0FBSyxFQUFFO0FBQVQ7QUFBbEMsa0JBQ0U7QUFBTSxJQUFBLEVBQUUsRUFBQztBQUFULGtCQUNFO0FBQU0sSUFBQSxLQUFLLEVBQUMsS0FBWjtBQUFrQixJQUFBLE1BQU0sRUFBQyxLQUF6QjtBQUErQixJQUFBLElBQUksRUFBQztBQUFwQyxJQURGLGVBRUU7QUFBUSxJQUFBLEVBQUUsRUFBQyxLQUFYO0FBQWlCLElBQUEsRUFBRSxFQUFDLEtBQXBCO0FBQTBCLElBQUEsQ0FBQyxFQUFDLEtBQTVCO0FBQWtDLElBQUEsSUFBSSxFQUFDO0FBQXZDLElBRkYsQ0FERixlQUtFO0FBQUcsSUFBQSxJQUFJLEVBQUUsQ0FBQ1QsS0FBRCxHQUFTLGNBQVQsR0FBMEJVO0FBQW5DLGtCQUNFO0FBQUcsSUFBQSxPQUFPLEVBQUVWLEtBQUssR0FBRyxLQUFILEdBQVc7QUFBNUIsa0JBQ0U7QUFBTSxJQUFBLEtBQUssRUFBQyxLQUFaO0FBQWtCLElBQUEsTUFBTSxFQUFDLEtBQXpCO0FBQStCLElBQUEsSUFBSSxFQUFDO0FBQXBDLElBREYsZUFFRTtBQUFNLElBQUEsQ0FBQyxFQUFFSCxRQUFUO0FBQW9CLElBQUEsS0FBSyxFQUFFO0FBQUVjLE1BQUFBLElBQUksRUFBRTtBQUFSO0FBQTNCLElBRkYsQ0FERixFQUtHLENBQUNYLEtBQUQsaUJBQVUsdURBQ1Q7QUFBUSxJQUFBLEVBQUUsRUFBQyxLQUFYO0FBQWlCLElBQUEsRUFBRSxFQUFDLEtBQXBCO0FBQTBCLElBQUEsQ0FBQyxFQUFDLEtBQTVCO0FBQWtDLElBQUEsSUFBSSxFQUFDLGFBQXZDO0FBQXFELElBQUEsTUFBTSxFQUFDLGNBQTVEO0FBQTJFLElBQUEsV0FBVyxFQUFDO0FBQXZGLElBRFMsZUFFVDtBQUFNLElBQUEsQ0FBQyxFQUFDLGlCQUFSO0FBQTBCLElBQUEsTUFBTSxFQUFDLGNBQWpDO0FBQWdELElBQUEsV0FBVyxFQUFDO0FBQTVELElBRlMsQ0FMYixDQUxGLENBTkYsQ0FERjtBQXlCRCxDQWpDTSIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCAqIGFzIFJlYWN0IGZyb20gJ3JlYWN0J1xuaW1wb3J0IGFkZG9ucyBmcm9tICdAc3Rvcnlib29rL2FkZG9ucydcbmltcG9ydCB7IHVzZVN0YXRlLCB1c2VFZmZlY3QgfSBmcm9tICdyZWFjdCdcbmltcG9ydCB7IEljb25CdXR0b24gfSBmcm9tICdAc3Rvcnlib29rL2NvbXBvbmVudHMnXG5cbmltcG9ydCB7IEFERE9OX0lELCBKU19TVEFSVF9FTkFCTEVEIH0gZnJvbSAnLi4vY29uc3RhbnRzJ1xuXG5jb25zdCBub0pTSWNvbiA9ICdtNDIzLjIgNDkyLjE5YzEyLjY5IDIwLjcyIDI5LjIgMzUuOTUgNTguNCAzNS45NSAyNC41MyAwIDQwLjItMTIuMjYgNDAuMi0yOS4yIDAtMjAuMy0xNi4xLTI3LjQ5LTQzLjEtMzkuM2wtMTQuOC02LjM1Yy00Mi43Mi0xOC4yLTcxLjEtNDEtNzEuMS04OS4yIDAtNDQuNCAzMy44My03OC4yIDg2LjctNzguMiAzNy42NCAwIDY0LjcgMTMuMSA4NC4yIDQ3LjRsLTQ2LjEgMjkuNmMtMTAuMTUtMTguMi0yMS4xLTI1LjM3LTM4LjEtMjUuMzctMTcuMzQgMC0yOC4zMyAxMS0yOC4zMyAyNS4zNyAwIDE3Ljc2IDExIDI0Ljk1IDM2LjQgMzUuOTVsMTQuOCA2LjM0YzUwLjMgMjEuNTcgNzguNyA0My41NiA3OC43IDkzIDAgNTMuMy00MS44NyA4Mi41LTk4LjEgODIuNS01NC45OCAwLTkwLjUtMjYuMi0xMDcuODgtNjAuNTR6bS0yMDkuMTMgNS4xM2M5LjMgMTYuNSAxNy43NiAzMC40NSAzOC4xIDMwLjQ1IDE5LjQ1IDAgMzEuNzItNy42MSAzMS43Mi0zNy4ydi0yMDEuM2g1OS4ydjIwMi4xYzAgNjEuMy0zNS45NCA4OS4yLTg4LjQgODkuMi00Ny40IDAtNzQuODUtMjQuNTMtODguODEtNTQuMDc1eidcblxuZXhwb3J0IGNvbnN0IEpTVG9nZ2xlckJ1dHRvbjogUmVhY3QuRkMgPSAoKSA9PiB7XG4gIGNvbnN0IFtoYXNKUywgc2V0SlNBdmFpbGFiaWxpdHldID0gdXNlU3RhdGUoSlNfU1RBUlRfRU5BQkxFRClcblxuICBjb25zdCBjaGFubmVsID0gYWRkb25zLmdldENoYW5uZWwoKVxuICB1c2VFZmZlY3QoKCk9PiBjaGFubmVsLmVtaXQoYCR7QURET05fSUR9L3NldEpTYCwgaGFzSlMpLCBbY2hhbm5lbCwgaGFzSlNdIClcblxuICBjb25zdCBidXR0b25UaXRsZSA9IGBDbGljayB0byAke2hhc0pTID8gJ2Rpc2FibGUnOidlbmFibGUnfSBKYXZhc2NyaXB0YFxuXG4gIHJldHVybiAoXG4gICAgPEljb25CdXR0b25cbiAgICAgIGtleT1cImphdmFzY3JpcHQtdG9nZ2xlclwiXG4gICAgICB0aXRsZT17YnV0dG9uVGl0bGV9XG4gICAgICBhY3RpdmU9e2ZhbHNlfVxuICAgICAgb25DbGljaz17KF8pID0+IHNldEpTQXZhaWxhYmlsaXR5KCFoYXNKUyl9XG4gICAgPlxuICAgICAgPHN2ZyB2aWV3Qm94PVwiMCAwIDYzMCA2MzBcIiBzdHlsZT17eyB3aWR0aDogJzI0cHgnIH19PlxuICAgICAgICA8bWFzayBpZD1cImNpcmNsZVwiPlxuICAgICAgICAgIDxyZWN0IHdpZHRoPVwiNjMwXCIgaGVpZ2h0PVwiNjMwXCIgZmlsbD1cImJsYWNrXCIvPlxuICAgICAgICAgIDxjaXJjbGUgY3g9XCIzMTVcIiBjeT1cIjMxNVwiIHI9XCIzMTVcIiBmaWxsPVwiI2Y3ZGYxZVwiLz5cbiAgICAgICAgPC9tYXNrPlxuICAgICAgICA8ZyBtYXNrPXshaGFzSlMgPyAndXJsKCNjaXJjbGUpJyA6IHVuZGVmaW5lZH0+XG4gICAgICAgICAgPGcgb3BhY2l0eT17aGFzSlMgPyAnLjc1JyA6ICcuNzUnfT5cbiAgICAgICAgICAgIDxyZWN0IHdpZHRoPVwiNjMwXCIgaGVpZ2h0PVwiNjMwXCIgZmlsbD1cIiNmN2RmMWVcIi8+XG4gICAgICAgICAgICA8cGF0aCBkPXtub0pTSWNvbn0gIHN0eWxlPXt7IGZpbGw6ICdibGFjaycgfX0vPlxuICAgICAgICAgIDwvZz5cbiAgICAgICAgICB7IWhhc0pTICYmIDw+XG4gICAgICAgICAgICA8Y2lyY2xlIGN4PVwiMzE1XCIgY3k9XCIzMTVcIiByPVwiMjg1XCIgZmlsbD1cInRyYW5zcGFyZW50XCIgc3Ryb2tlPVwicmdiKDE5MiwwLDApXCIgc3Ryb2tlV2lkdGg9XCI2MFwiLz5cbiAgICAgICAgICAgIDxwYXRoIGQ9XCJNIDYzMCAwIEwgMCA2MzBcIiBzdHJva2U9XCJyZ2IoMTkyLDAsMClcIiBzdHJva2VXaWR0aD1cIjYwXCIvPlxuICAgICAgICAgIDwvPn1cbiAgICAgICAgPC9nPlxuICAgICAgPC9zdmc+XG4gICAgPC9JY29uQnV0dG9uPlxuICApXG59XG4iXX0=