storybook-addon-react-runner/dist/cjs/Panel.js

Storybook addon to provide react live preview powered by react-runner

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.Panel = void 0;

var _react = _interopRequireDefault(require("react"));

var _addons = require("@storybook/addons");

var _api = require("@storybook/api");

var _components = require("@storybook/components");

var _constants = require("./constants");

var _CodeEditor = require("./components/CodeEditor");

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }

var handleChange = function handleChange(code) {
  _addons.addons.getChannel().emit(_constants.EVENTS.SET_CODE, code);
};

var stopPropagation = function stopPropagation(event) {
  return event.stopPropagation();
};

var Panel = function Panel(props) {
  var _useParameter;

  var source = ((_useParameter = (0, _api.useParameter)(_constants.SOURCE_KEY)) === null || _useParameter === void 0 ? void 0 : _useParameter.source) || "";
  var options = (0, _api.useParameter)(_constants.PARAM_KEY);
  return /*#__PURE__*/_react["default"].createElement(_components.AddonPanel, props, !!source && /*#__PURE__*/_react["default"].createElement(_CodeEditor.CodeEditor, {
    key: source,
    theme: options === null || options === void 0 ? void 0 : options.theme,
    language: options === null || options === void 0 ? void 0 : options.language,
    readOnly: options === null || options === void 0 ? void 0 : options.readOnly,
    padding: "1rem",
    defaultValue: source,
    onChange: handleChange // prevent sidebar stories navigation
    ,
    onKeyDown: stopPropagation
  }));
};

exports.Panel = Panel;