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

wix-style-react

function _objectWithoutProperties(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; }

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 createPopperWithStateExample = function createPopperWithStateExample(_ref) {
  var _ref$shown = _ref.shown,
      shown = _ref$shown === undefined ? true : _ref$shown,
      props = _objectWithoutProperties(_ref, ['shown']);

  return '\nclass PopoverWithState extends React.Component {\n  constructor(props) {\n    super(props);\n\n    this.state = {\n      shown: ' + shown + '\n    };\n  }\n\n  toggle() {\n    this.setState(({ shown }) => ({ shown: !shown }));\n  }\n\n  render() {\n    const { shown } = this.state;\n\n    return (\n      <Popover\n        showArrow\n        shown={shown}\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\' }}>\n            <Text size="small" skin="standard" weight="normal">\n              I am the content!\n            </Text>\n          </div>\n        </Popover.Content>\n      </Popover>\n    );\n  }\n}\n';
};

var createScrolParentExample = function createScrolParentExample() {
  return '\nconst ScrollableContent = ({ children }) => (\n  <div\n    style={{\n      overflow: \'hidden\',\n      position: \'relative\',\n      border: \'1px solid black\',\n    }}\n  >\n    <div\n      style={{\n        overflow: \'auto\',\n        height: 120,\n      }}\n    >\n      <div style={{ padding: \'25px 25px 150px\' }}>\n        {children}\n      </div>\n    </div>\n  </div>\n);\n\n' + createPopperWithStateExample({
    appendTo: 'scrollParent',
    placement: 'right'
  }) + '\n\nrender(\n  <ScrollableContent>\n    <PopoverWithState />\n  </ScrollableContent>\n);\n';
};

var Section = function Section(_ref2) {
  var appendToProp = _ref2.appendToProp,
      description = _ref2.description,
      children = _ref2.children;
  return React.createElement(
    Layout,
    null,
    React.createElement(
      Cell,
      { span: 6 },
      React.createElement(Markdown, { source: '#### `appendTo="' + appendToProp + '"`' }),
      React.createElement(Markdown, { source: description })
    ),
    React.createElement(
      Cell,
      { span: 6 },
      children
    )
  );
};

export default (function () {
  return React.createElement(
    'div',
    { style: { maxWidth: 1254 }, 'data-hook': 'story-popover-append-to' },
    React.createElement(
      Section,
      {
        appendToProp: 'window',
        description: 'If you inspect the content, you\'ll see it is attached to a new `<div/>` under the body.'
      },
      React.createElement(LiveCodeExample, {
        compact: true,
        initialCode: createPopperWithStateExample({
          appendTo: 'window',
          placement: 'right'
        })
      })
    ),
    React.createElement(
      Section,
      {
        appendToProp: 'viewport',
        description: '\nThis is similar to `window` as it also appends the content to a new `<div/>` under the body, but also set its boundry to the viewport.\n\n_The Popover in the example is not shown by default._ Try to scroll out of the Popover\'s viewport to see the effect.\n      '
      },
      React.createElement(LiveCodeExample, {
        compact: true,
        initialCode: createPopperWithStateExample({
          shown: false,
          appendTo: 'viewport',
          placement: 'bottom'
        })
      })
    ),
    React.createElement(
      Section,
      {
        appendToProp: 'parent',
        description: 'If you inspect the content, you\'ll see it is attached to a new div next to the target element (the Button).'
      },
      React.createElement(LiveCodeExample, {
        compact: true,
        initialCode: createPopperWithStateExample({
          appendTo: 'parent',
          placement: 'right'
        })
      })
    ),
    React.createElement(
      Section,
      {
        appendToProp: 'scrollParent',
        description: 'If you inspect the content, you\'ll see it is attached to a new div under the list container.'
      },
      React.createElement(LiveCodeExample, {
        compact: true,
        autoRender: false,
        initialCode: createScrolParentExample()
      })
    )
  );
});