wix-style-react/dist/stories/Popover/examples/ExampleFlip.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 createStaticPopoverExample = function createStaticPopoverExample(props) {
  return '\n<div\n  style={{\n    display: \'flex\',\n    justifyContent: \'center\',\n    alignItems: \'center\',\n    overflow: \'auto\',\n    height: 80\n  }}\n>\n  <Popover\n    shown\n    showArrow\n    placement="right"\n    appendTo="scrollParent"\n    ' + (0, _LiveCodeExample.createPropsArray)(props).join('\n        ') + '\n  >\n    <Popover.Element>\n      <Button>I am a plain Button</Button>\n    </Popover.Element>\n    <Popover.Content>\n      <div style={{ padding: \'12px 24px\', textAlign: \'center\', width: 180 }}>\n        <Text size="small" skin="standard" weight="normal">\n          I am a very long popover\'s content\n        </Text>\n      </div>\n    </Popover.Content>\n  </Popover>\n</div>\n';
};

exports.default = function () {
  return _react2.default.createElement(
    'div',
    { style: { maxWidth: 1254 }, 'data-hook': 'story-popover-flip-behaviour' },
    _react2.default.createElement(_Markdown2.default, {
      source: '\nThe `<Popover/>` uses the `flip` behaviour by default. This behaviour used to flip the\n`<Popover/>`\'s placement when it starts to overlap the target element (`<Popover.Element/>`).\n      '
    }),
    _react2.default.createElement(
      _Layout.Layout,
      null,
      _react2.default.createElement(
        _Layout.Cell,
        { span: 6 },
        _react2.default.createElement(_LiveCodeExample2.default, {
          compact: true,
          title: 'Flip enabled and placement="right"',
          initialCode: createStaticPopoverExample({ flip: true })
        })
      ),
      _react2.default.createElement(
        _Layout.Cell,
        { span: 6 },
        _react2.default.createElement(_LiveCodeExample2.default, {
          compact: true,
          title: 'Flip disabled and placement="right"',
          initialCode: createStaticPopoverExample({ flip: false })
        })
      )
    )
  );
};