@wix/design-system
Version:
@wix/design-system
164 lines • 7.72 kB
JavaScript
import React, { useState } from 'react';
import Box from '../Box';
import PopoverNext from './PopoverNext';
import DatePicker from '../DatePicker';
import { Popover } from '..';
import { APPEND_TO } from './PopoverNext.constants';
export default {
title: 'PopoverNext',
component: PopoverNext,
};
const Template = () => {
const [shownOld, setShownOld] = useState(false);
const [open, setOpen] = useState(false);
const common = {
showDelay: 500,
hideDelay: 1000,
timeout: 2000,
};
return (React.createElement(Box, { gap: 8, padding: 50, direction: "vertical", align: "center" },
React.createElement(Popover, { shown: shownOld, onClick: () => setShownOld(true), onClickOutside: () => setShownOld(false), ...common },
React.createElement(Popover.Element, null,
React.createElement("button", null, "Native button with old")),
React.createElement(Popover.Content, null,
React.createElement(Box, { padding: "10px" }, "Content"))),
React.createElement(PopoverNext, { ...common, open: open, onOpenChange: (open, _) => setOpen(open) },
React.createElement(PopoverNext.Trigger, null,
React.createElement("button", null, "Native button with new")),
React.createElement(PopoverNext.Content, null,
React.createElement(Box, { padding: "10px" }, "Content")))));
};
const ComparisonTemplate = () => {
const [open, setOpen] = useState(false);
const common = {
dynamicWidth: true,
// minWidth: 300,
// minWidth: 300,
maxWidth: 300,
};
const content = 'VEry super long content oh so long';
const random = (React.createElement("div", { style: { minWidth: '400px', height: '10px', background: 'red' } }));
return (React.createElement(Box, { gap: 15, padding: 50, direction: "vertical", align: "center" },
React.createElement(PopoverNext, { open: open, onOpenChange: setOpen, ...common },
React.createElement(PopoverNext.Trigger, null,
React.createElement("button", null, "Native button with next")),
React.createElement(PopoverNext.Content, null,
content,
random)),
React.createElement(Popover, { shown: true, ...common },
React.createElement(Popover.Element, null,
React.createElement("button", null, "Native button with old")),
React.createElement(Popover.Content, null,
content,
random))));
};
const commonDatePickerProps = {
onChange: () => { },
width: 200,
rtl: false, // popvoer should be placed on the right
popoverProps: {
appendTo: 'parent',
dynamicWidth: true,
// excludeClass: 'excludeClass',
// flip: false,
// fixed: false,
// placement: 'top',
// hideDelay: 0,
// moveArrowTo: 0,
// onMouseEnter: () => {},
// onMouseLeave: () => {},
// placement: 'top',
// showDelay: 0,
// timeout: 0,
// maxWidth: 0,
// minWidth: 0,
// width: undefined,
zIndex: 1000,
},
};
const DatePickersTemplate = () => (React.createElement(Box, { gap: 2, paddingTop: 50, paddingLeft: 50 },
React.createElement(DatePicker, { placeholderText: "old", ...commonDatePickerProps })));
const ScrollableContent = () => {
const sameProps = {
placement: 'top',
fixed: false,
flip: false,
appendTo: APPEND_TO.scrollParent,
};
return (React.createElement("div", { "data-hook": "parent-of-scrollable", style: {
marginTop: '100px',
position: 'relative',
border: '1px solid black',
} },
React.createElement("div", { "data-hook": "scrollable", style: {
overflow: 'auto',
position: 'relative',
height: '200px',
border: '1px solid green',
} },
React.createElement("div", { style: { padding: '25px 25px 150px' } },
React.createElement(Box, { width: "350px", border: "solid 1px red", padding: "60px", height: 160, gap: 8 },
React.createElement(Popover, { shown: true, showArrow: true, ...sameProps },
React.createElement(Popover.Element, null,
React.createElement("button", null, "I am an plain Button")),
React.createElement(Popover.Content, null,
React.createElement(Box, { padding: "12px 24px", width: 140 }, "Old popover Content"))),
React.createElement(PopoverNext, { ...sameProps, open: true },
React.createElement(PopoverNext.Trigger, null,
React.createElement("button", null, "Popover trigger")),
React.createElement(PopoverNext.Content, null,
React.createElement(Box, { padding: "12px 24px", width: 140 }, "New popover Content"))))))));
};
const ScrollableTemplate = () => (React.createElement(ScrollableContent, null));
const ScrollableWrapper = ({ children, height }) => {
return (React.createElement("div", { style: {
overflow: 'hidden',
position: 'relative',
border: '1px solid black',
} },
React.createElement("div", { "data-hook": "scrollable", style: {
overflow: 'auto',
height,
} },
React.createElement("div", { style: { padding: '15px 25px 25px' } },
React.createElement(Box, { width: "150px", overflow: "hidden", border: "solid 1px black", padding: "30px" }, children)))));
};
const ScrollableContainer = () => {
const HEIGHT = '50px';
const commonProps = {
placement: 'bottom',
fixed: true,
flip: true,
appendTo: 'scrollParent',
dataHook: 'popover',
};
return (React.createElement(Box, { gap: 3, direction: "vertical" },
React.createElement(ScrollableWrapper, { height: HEIGHT },
React.createElement(PopoverNext, { ...commonProps, open: true, onOpenChange: () => { }, focusManagerEnabled: false },
React.createElement(PopoverNext.Trigger, null,
React.createElement("button", null, "Popover trigger")),
React.createElement(PopoverNext.Content, null,
React.createElement(Box, { padding: "30px", backgroundColor: "pink", borderRadius: "inherit" }, "Content")))),
React.createElement(ScrollableWrapper, { height: HEIGHT },
React.createElement(Popover, { ...commonProps, shown: true, onShow: () => { } },
React.createElement(Popover.Element, null,
React.createElement("button", null, "Popover trigger")),
React.createElement(Popover.Content, null,
React.createElement(Box, { padding: "30px", backgroundColor: "pink", borderRadius: "inherit" }, "Content"))))));
};
const ScrollableScrollParentTemplate = () => React.createElement(ScrollableContainer, null);
export const Basic = {
render: () => React.createElement(Template, null),
};
Basic.args = {};
export const Comparison = {
render: () => React.createElement(ComparisonTemplate, null),
};
Comparison.args = {};
export const DatePickers = DatePickersTemplate.bind({});
DatePickers.args = {};
export const Scrollable = ScrollableTemplate.bind({});
Scrollable.args = {};
export const ScrollableScrollParent = ScrollableScrollParentTemplate.bind({});
ScrollableScrollParent.args = {};
//# sourceMappingURL=PopoverNext.story.js.map