wix-style-react/dist/stories/Popover/examples/ExampleFixed.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, dataHook) {
  return '\nconst ScrollableContent = ({ children }) => (\n  <div\n    style={{\n      overflow: \'hidden\',\n      position: \'relative\',\n      border: \'1px solid black\',\n    }}\n  >\n    <div\n      data-hook="' + dataHook + '"\n      style={{\n        overflow: \'auto\',\n        height: 120,\n        display: \'flex\',\n        justifyContent: \'center\',\n      }}\n    >\n      <div style={{ padding: \'70px 25px 100px\' }}>\n        {children}\n      </div>\n    </div>\n  </div>\n);\n\nconst StaticPopover = () => (\n  <Popover\n    shown\n    showArrow\n    placement="top"\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\' }}>\n        <Text size="small" skin="standard" weight="normal">\n          Content\n        </Text>\n      </div>\n    </Popover.Content>\n  </Popover>\n);\n\nrender(\n  <ScrollableContent>\n    <StaticPopover />\n  </ScrollableContent>\n);\n';
};

exports.default = function () {
  return _react2.default.createElement(
    'div',
    { style: { maxWidth: 1254 } },
    _react2.default.createElement(_Markdown2.default, {
      source: '\nYou can set the `fixed` behaviour for the `<Popover/>` component (which is **disabled** by\ndefault).\n\nThis behaviour used to keep the `<Popover/>` in it\'s original placement. By default this behaviour\nis disabled, and the `<Popover/>` will change it\'s position when it\'ll being positioned outside\nthe boundary (the boundry is the value of the `appendTo` prop).\n      '
    }),
    _react2.default.createElement(
      _Layout.Layout,
      null,
      _react2.default.createElement(
        _Layout.Cell,
        { span: 6 },
        _react2.default.createElement(_LiveCodeExample2.default, {
          compact: true,
          autoRender: false,
          title: 'Fixed disabled (default) and placement="top"',
          initialCode: createStaticPopoverExample({ fixed: false }, 'story-popover-fixed-disabled')
        })
      ),
      _react2.default.createElement(
        _Layout.Cell,
        { span: 6 },
        _react2.default.createElement(_LiveCodeExample2.default, {
          compact: true,
          autoRender: false,
          title: 'Fixed enabled and placement="top"',
          initialCode: createStaticPopoverExample({ fixed: true }, 'story-popover-fixed-enabled')
        })
      ),
      _react2.default.createElement(
        _Layout.Cell,
        { span: 6 },
        _react2.default.createElement(_LiveCodeExample2.default, {
          compact: true,
          autoRender: false,
          title: 'Fixed disabled and placement="top" and flip={false}',
          initialCode: createStaticPopoverExample({
            fixed: false,
            flip: false
          }, 'story-popover-fixed-disabled-flip-disabled')
        })
      )
    )
  );
};