wix-style-react/dist/stories/Popover/examples/ExampleAppendTo.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 }; }

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

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        ' + (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\' }}>\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 _react2.default.createElement(
    _Layout.Layout,
    null,
    _react2.default.createElement(
      _Layout.Cell,
      { span: 6 },
      _react2.default.createElement(_Markdown2.default, { source: '#### `appendTo="' + appendToProp + '"`' }),
      _react2.default.createElement(_Markdown2.default, { source: description })
    ),
    _react2.default.createElement(
      _Layout.Cell,
      { span: 6 },
      children
    )
  );
};

exports.default = function () {
  return _react2.default.createElement(
    'div',
    { style: { maxWidth: 1254 }, 'data-hook': 'story-popover-append-to' },
    _react2.default.createElement(
      Section,
      {
        appendToProp: 'window',
        description: 'If you inspect the content, you\'ll see it is attached to a new `<div/>` under the body.'
      },
      _react2.default.createElement(_LiveCodeExample2.default, {
        compact: true,
        initialCode: createPopperWithStateExample({
          appendTo: 'window',
          placement: 'right'
        })
      })
    ),
    _react2.default.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      '
      },
      _react2.default.createElement(_LiveCodeExample2.default, {
        compact: true,
        initialCode: createPopperWithStateExample({
          shown: false,
          appendTo: 'viewport',
          placement: 'bottom'
        })
      })
    ),
    _react2.default.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).'
      },
      _react2.default.createElement(_LiveCodeExample2.default, {
        compact: true,
        initialCode: createPopperWithStateExample({
          appendTo: 'parent',
          placement: 'right'
        })
      })
    ),
    _react2.default.createElement(
      Section,
      {
        appendToProp: 'scrollParent',
        description: 'If you inspect the content, you\'ll see it is attached to a new div under the list container.'
      },
      _react2.default.createElement(_LiveCodeExample2.default, {
        compact: true,
        autoRender: false,
        initialCode: createScrolParentExample()
      })
    )
  );
};