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

wix-style-react

import React from 'react';

import Markdown from 'wix-storybook-utils/Markdown';

import { Layout, Cell } from 'wix-style-react/Layout';
import LiveCodeExample, { createPropsArray } from '../../utils/Components/LiveCodeExample';

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        ' + 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        ' + 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';
};

export default (function () {
  return React.createElement(
    'div',
    { style: { maxWidth: 1254 } },
    React.createElement(Markdown, {
      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      '
    }),
    React.createElement(
      Layout,
      null,
      React.createElement(
        Cell,
        { span: 6 },
        React.createElement(LiveCodeExample, {
          compact: true,
          title: 'Interactive with appendTo="parent"',
          initialCode: createClickablePopoverExample({ appendTo: 'parent' })
        })
      ),
      React.createElement(
        Cell,
        { span: 6 },
        React.createElement(LiveCodeExample, {
          compact: true,
          title: 'Non-Interactive',
          initialCode: createClickablePopoverExample({ appendTo: 'window' })
        })
      )
    ),
    React.createElement(Markdown, {
      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      '
    }),
    React.createElement(
      Layout,
      null,
      React.createElement(
        Cell,
        { span: 6 },
        React.createElement(LiveCodeExample, {
          compact: true,
          title: 'Interactive with appendTo="parent"',
          initialCode: createHoverablePopoverExamle({ appendTo: 'parent' })
        })
      ),
      React.createElement(
        Cell,
        { span: 6 },
        React.createElement(LiveCodeExample, {
          compact: true,
          title: 'Interactive with hideDelay={150}',
          initialCode: createHoverablePopoverExamle({
            hideDelay: 150
          })
        })
      ),
      React.createElement(
        Cell,
        { span: 6 },
        React.createElement(LiveCodeExample, {
          compact: true,
          title: 'Non-Interactive',
          initialCode: createHoverablePopoverExamle({ appendTo: 'window' })
        })
      )
    )
  );
});