@helpscout/hsds-react/components/ActionSelect/ActionSelect.hsappstories.js

React component library for Help Scout's Design System

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");

exports.__esModule = true;
exports.Example = void 0;

var _extends4 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));

var _inheritsLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/inheritsLoose"));

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

var _addonActions = require("@storybook/addon-actions");

var _ = _interopRequireDefault(require("."));

var _FormGroup = _interopRequireDefault(require("../FormGroup"));

var _Checkbox = _interopRequireDefault(require("../Checkbox"));

var _Input = _interopRequireDefault(require("../Input"));

var _jsxRuntime = require("react/jsx-runtime");

var Example = /*#__PURE__*/function (_React$Component) {
  (0, _inheritsLoose2.default)(Example, _React$Component);

  function Example() {
    var _this;

    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
      args[_key] = arguments[_key];
    }

    _this = _React$Component.call.apply(_React$Component, [this].concat(args)) || this;
    _this.state = {
      value: null,
      values: {
        'open-beacon': {
          text: 'Click for support'
        },
        'search-docs': {
          text: 'Do a search',
          query: '',
          isEnabled: false
        }
      }
    };

    _this.onSelect = function (value) {
      _this.setState({
        value: value
      });
    };

    _this.onChange = function (id, key) {
      return function (value) {
        var _extends2, _extends3;

        _this.setState({
          values: (0, _extends4.default)({}, _this.state.values, (_extends3 = {}, _extends3[id] = (0, _extends4.default)({}, _this.state.values[id], (_extends2 = {}, _extends2[key] = value, _extends2)), _extends3))
        });
      };
    };

    _this.shouldRefocusOnClose = function () {
      return _this.state.value === 'None';
    };

    _this.shouldScrollIntoView = function (item) {
      return item !== 'None';
    };

    return _this;
  }

  var _proto = Example.prototype;

  _proto.renderContent = function renderContent() {
    var _this2 = this;

    switch (this.state.value) {
      case 'open-beacon':
        return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
          role: "region",
          "aria-label": "Open Beacon",
          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_FormGroup.default, {
            children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Input.default, {
              label: "Button text",
              value: this.state.values['open-beacon'].text,
              onChange: this.onChange('open-beacon', 'text')
            })
          })
        });

      case 'search-docs':
        return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_FormGroup.default, {
            children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Input.default, {
              label: "Button text",
              value: this.state.values['search-docs'].text,
              onChange: this.onChange('search-docs', 'text')
            })
          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_FormGroup.default, {
            children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Input.default, {
              label: "Search query",
              helpText: "Beacon will open to the search results of this query",
              onChange: this.onChange('search-docs', 'query'),
              value: this.state.values['search-docs'].query
            })
          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_FormGroup.default, {
            children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Checkbox.default, {
              label: "Enabled",
              onChange: function onChange(event, value) {
                _this2.onChange('search-docs', 'isEnabled')(value);
              },
              checked: this.state.values['search-docs'].isEnabled
            })
          })]
        });

      default:
        return null;
    }
  };

  _proto.render = function render() {
    var items = [{
      value: 'None'
    }, {
      value: 'open-beacon',
      label: 'Open Beacon'
    }, {
      value: 'search-docs',
      label: 'Search Docs'
    }];
    return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
      style: {
        padding: '0px',
        maxWidth: 400,
        margin: '100px auto'
      },
      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_.default, {
        animationDuration: this.props.animationDuration,
        label: "Action Select",
        items: items,
        onAnimationEnd: function onAnimationEnd() {// console.log('onAnimationEnd')
        },
        onAnimationUpdate: function onAnimationUpdate() {// console.log('onAnimationUpdate')
        },
        onResize: (0, _addonActions.action)('onResize'),
        onSelect: this.onSelect,
        shouldScrollIntoView: this.shouldScrollIntoView,
        shouldRefocusOnClose: this.shouldRefocusOnClose,
        withTooltip: true,
        tooltipProps: {
          title: 'Beacon selection is required to add an action.',
          visible: true
        },
        children: this.renderContent()
      })
    });
  };

  return Example;
}(_react.default.Component);

exports.Example = Example;