wix-style-react/dist/es/stories/Popover/examples/ExampleFixed.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 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    ' + 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';
};

export default (function () {
  return React.createElement(
    'div',
    { style: { maxWidth: 1254 } },
    React.createElement(Markdown, {
      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      '
    }),
    React.createElement(
      Layout,
      null,
      React.createElement(
        Cell,
        { span: 6 },
        React.createElement(LiveCodeExample, {
          compact: true,
          autoRender: false,
          title: 'Fixed disabled (default) and placement="top"',
          initialCode: createStaticPopoverExample({ fixed: false }, 'story-popover-fixed-disabled')
        })
      ),
      React.createElement(
        Cell,
        { span: 6 },
        React.createElement(LiveCodeExample, {
          compact: true,
          autoRender: false,
          title: 'Fixed enabled and placement="top"',
          initialCode: createStaticPopoverExample({ fixed: true }, 'story-popover-fixed-enabled')
        })
      ),
      React.createElement(
        Cell,
        { span: 6 },
        React.createElement(LiveCodeExample, {
          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')
        })
      )
    )
  );
});