wix-style-react/dist/stories/Popover/examples/ExampleInteractive.js

wix-style-react

'use strict';

Object.defineProperty(exports, "__esModule", {
  value: true
});

var _react = require('react');

var _react2 = _interopRequireDefault(_react);

var _Markdown = require('wix-storybook-utils/Markdown');

var _Markdown2 = _interopRequireDefault(_Markdown);

var _Layout = require('wix-style-react/Layout');

var _LiveCodeExample = require('../../utils/Components/LiveCodeExample');

var _LiveCodeExample2 = _interopRequireDefault(_LiveCodeExample);

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

var createClickablePopoverExample = function createClickablePopoverExample(props) {
  return '\nclass ClickablePopover extends React.Component {\n  constructor(props) {\n    super(props);\n\n    this.state = {\n      shown: false\n    };\n  }\n\n  toggle() {\n    this.setState(({ shown }) => ({ shown: !shown }));\n  }\n\n  close() {\n    this.setState({ shown: false });\n  }\n\n  render() {\n    const { shown } = this.state;\n\n    return (\n      <Popover\n        showArrow\n        animate\n        placement="right"\n        shown={shown}\n        onClickOutside={() => this.close()}\n        ' + (0, _LiveCodeExample.createPropsArray)(props).join('\n        ') + '\n      >\n        <Popover.Element>\n          <Button onClick={() => this.toggle()}>Click me to toggle</Button>\n        </Popover.Element>\n        <Popover.Content>\n          <div style={{ padding: \'12px 24px\', textAlign: \'center\', width: 140 }}>\n            <Text size="small" skin="standard" weight="normal">\n              Try to click me now!\n            </Text>\n          </div>\n        </Popover.Content>\n      </Popover>\n    );\n  }\n}\n';
};

var createHoverablePopoverExamle = function createHoverablePopoverExamle(props) {
  return '\nclass HoverablePopover extends React.Component {\n  constructor(props) {\n    super(props);\n\n    this.state = {\n      shown: false\n    };\n  }\n\n  open() {\n    this.setState({ shown: true });\n  }\n\n  close() {\n    this.setState({ shown: false });\n  }\n\n  render() {\n    const { shown } = this.state;\n\n    return (\n      <Popover\n        showArrow\n        animate\n        placement="right"\n        shown={shown}\n        onMouseEnter={() => this.open()}\n        onMouseLeave={() => this.close()}\n        ' + (0, _LiveCodeExample.createPropsArray)(props).join('\n        ') + '\n      >\n        <Popover.Element>\n          <Button>Hover me to open</Button>\n        </Popover.Element>\n        <Popover.Content>\n          <div style={{ padding: \'12px 24px\', textAlign: \'center\', width: 120 }}>\n            <Text size="small" skin="standard" weight="normal">\n              Now hover me!\n            </Text>\n          </div>\n        </Popover.Content>\n      </Popover>\n    );\n  }\n}\n';
};

exports.default = function () {
  return _react2.default.createElement(
    'div',
    { style: { maxWidth: 1254 } },
    _react2.default.createElement(_Markdown2.default, {
      source: '\nA Popover can be interactive when setting `appendTo="parent"` or a `hideDelay`. This means the\nevent handlers set directly on the `<Popover/>` component will be triggerd on both the\n`<Popover.Element/>` and `<Popover.Content/>`\n\n#### Using click handlers\n\nThe following example uses the `onClick` and the `onClickOutside` handlers\nto toggle the Popover. Notice that in the non-interative example, when clicking\nthe `<Popover.Content/>`, the `onClickOutside` event fires.\n      '
    }),
    _react2.default.createElement(
      _Layout.Layout,
      null,
      _react2.default.createElement(
        _Layout.Cell,
        { span: 6 },
        _react2.default.createElement(_LiveCodeExample2.default, {
          compact: true,
          title: 'Interactive with appendTo="parent"',
          initialCode: createClickablePopoverExample({ appendTo: 'parent' })
        })
      ),
      _react2.default.createElement(
        _Layout.Cell,
        { span: 6 },
        _react2.default.createElement(_LiveCodeExample2.default, {
          compact: true,
          title: 'Non-Interactive',
          initialCode: createClickablePopoverExample({ appendTo: 'window' })
        })
      )
    ),
    _react2.default.createElement(_Markdown2.default, {
      source: '\n#### Using mouse events\n\nA similar approach can be used with mouse events handlers (`onMouseEnter`,\n`onMouseLeave`). Notice that in the non-interative example, the\n`onMouseLeave` event fires when entering the `<Popover.Content/>`.\n      '
    }),
    _react2.default.createElement(
      _Layout.Layout,
      null,
      _react2.default.createElement(
        _Layout.Cell,
        { span: 6 },
        _react2.default.createElement(_LiveCodeExample2.default, {
          compact: true,
          title: 'Interactive with appendTo="parent"',
          initialCode: createHoverablePopoverExamle({ appendTo: 'parent' })
        })
      ),
      _react2.default.createElement(
        _Layout.Cell,
        { span: 6 },
        _react2.default.createElement(_LiveCodeExample2.default, {
          compact: true,
          title: 'Interactive with hideDelay={150}',
          initialCode: createHoverablePopoverExamle({
            hideDelay: 150
          })
        })
      ),
      _react2.default.createElement(
        _Layout.Cell,
        { span: 6 },
        _react2.default.createElement(_LiveCodeExample2.default, {
          compact: true,
          title: 'Non-Interactive',
          initialCode: createHoverablePopoverExamle({ appendTo: 'window' })
        })
      )
    )
  );
};