@wix/design-system
Version:
@wix/design-system
609 lines (607 loc) • 16.9 kB
JavaScript
"use strict";
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
exports.__esModule = true;
exports.default = exports.ScrollableScrollParent = exports.Scrollable = exports.DatePickers = exports.Comparison = exports.Basic = void 0;
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
var _react = _interopRequireWildcard(require("react"));
var _Box = _interopRequireDefault(require("../Box"));
var _PopoverNext = _interopRequireDefault(require("./PopoverNext"));
var _DatePicker = _interopRequireDefault(require("../DatePicker"));
var _2 = require("..");
var _PopoverNext2 = require("./PopoverNext.constants");
var _jsxFileName = "/home/builduser/work/57e038ea7326c1ec/packages/wix-design-system/dist/cjs/PopoverNext/PopoverNext.story.tsx";
function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
var _default = exports.default = {
title: 'PopoverNext',
component: _PopoverNext.default
};
var Template = () => {
var [shownOld, setShownOld] = (0, _react.useState)(false);
var [open, setOpen] = (0, _react.useState)(false);
var common = {
showDelay: 500,
hideDelay: 1000,
timeout: 2000
};
return /*#__PURE__*/_react.default.createElement(_Box.default, {
gap: 8,
padding: 50,
direction: "vertical",
align: "center",
__self: void 0,
__source: {
fileName: _jsxFileName,
lineNumber: 26,
columnNumber: 5
}
}, /*#__PURE__*/_react.default.createElement(_2.Popover, (0, _extends2.default)({
shown: shownOld,
onClick: () => setShownOld(true),
onClickOutside: () => setShownOld(false)
}, common, {
__self: void 0,
__source: {
fileName: _jsxFileName,
lineNumber: 27,
columnNumber: 7
}
}), /*#__PURE__*/_react.default.createElement(_2.Popover.Element, {
__self: void 0,
__source: {
fileName: _jsxFileName,
lineNumber: 33,
columnNumber: 9
}
}, /*#__PURE__*/_react.default.createElement("button", {
__self: void 0,
__source: {
fileName: _jsxFileName,
lineNumber: 34,
columnNumber: 11
}
}, "Native button with old")), /*#__PURE__*/_react.default.createElement(_2.Popover.Content, {
__self: void 0,
__source: {
fileName: _jsxFileName,
lineNumber: 36,
columnNumber: 9
}
}, /*#__PURE__*/_react.default.createElement(_Box.default, {
padding: "10px",
__self: void 0,
__source: {
fileName: _jsxFileName,
lineNumber: 37,
columnNumber: 11
}
}, "Content"))), /*#__PURE__*/_react.default.createElement(_PopoverNext.default, (0, _extends2.default)({}, common, {
open: open,
onOpenChange: (open, _) => setOpen(open),
__self: void 0,
__source: {
fileName: _jsxFileName,
lineNumber: 40,
columnNumber: 7
}
}), /*#__PURE__*/_react.default.createElement(_PopoverNext.default.Trigger, {
__self: void 0,
__source: {
fileName: _jsxFileName,
lineNumber: 45,
columnNumber: 9
}
}, /*#__PURE__*/_react.default.createElement("button", {
__self: void 0,
__source: {
fileName: _jsxFileName,
lineNumber: 46,
columnNumber: 11
}
}, "Native button with new")), /*#__PURE__*/_react.default.createElement(_PopoverNext.default.Content, {
__self: void 0,
__source: {
fileName: _jsxFileName,
lineNumber: 48,
columnNumber: 9
}
}, /*#__PURE__*/_react.default.createElement(_Box.default, {
padding: "10px",
__self: void 0,
__source: {
fileName: _jsxFileName,
lineNumber: 49,
columnNumber: 11
}
}, "Content"))));
};
var ComparisonTemplate = () => {
var [open, setOpen] = (0, _react.useState)(false);
var common = {
dynamicWidth: true,
// minWidth: 300,
// minWidth: 300,
maxWidth: 300
};
var content = 'VEry super long content oh so long';
var random = /*#__PURE__*/_react.default.createElement("div", {
style: {
minWidth: '400px',
height: '10px',
background: 'red'
},
__self: void 0,
__source: {
fileName: _jsxFileName,
lineNumber: 69,
columnNumber: 5
}
});
return /*#__PURE__*/_react.default.createElement(_Box.default, {
gap: 15,
padding: 50,
direction: "vertical",
align: "center",
__self: void 0,
__source: {
fileName: _jsxFileName,
lineNumber: 73,
columnNumber: 5
}
}, /*#__PURE__*/_react.default.createElement(_PopoverNext.default, (0, _extends2.default)({
open: open,
onOpenChange: setOpen
}, common, {
__self: void 0,
__source: {
fileName: _jsxFileName,
lineNumber: 74,
columnNumber: 7
}
}), /*#__PURE__*/_react.default.createElement(_PopoverNext.default.Trigger, {
__self: void 0,
__source: {
fileName: _jsxFileName,
lineNumber: 75,
columnNumber: 9
}
}, /*#__PURE__*/_react.default.createElement("button", {
__self: void 0,
__source: {
fileName: _jsxFileName,
lineNumber: 76,
columnNumber: 11
}
}, "Native button with next")), /*#__PURE__*/_react.default.createElement(_PopoverNext.default.Content, {
__self: void 0,
__source: {
fileName: _jsxFileName,
lineNumber: 78,
columnNumber: 9
}
}, content, random)), /*#__PURE__*/_react.default.createElement(_2.Popover, (0, _extends2.default)({
shown: true
}, common, {
__self: void 0,
__source: {
fileName: _jsxFileName,
lineNumber: 83,
columnNumber: 7
}
}), /*#__PURE__*/_react.default.createElement(_2.Popover.Element, {
__self: void 0,
__source: {
fileName: _jsxFileName,
lineNumber: 84,
columnNumber: 9
}
}, /*#__PURE__*/_react.default.createElement("button", {
__self: void 0,
__source: {
fileName: _jsxFileName,
lineNumber: 85,
columnNumber: 11
}
}, "Native button with old")), /*#__PURE__*/_react.default.createElement(_2.Popover.Content, {
__self: void 0,
__source: {
fileName: _jsxFileName,
lineNumber: 87,
columnNumber: 9
}
}, content, random)));
};
var 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
}
};
var DatePickersTemplate = () => /*#__PURE__*/_react.default.createElement(_Box.default, {
gap: 2,
paddingTop: 50,
paddingLeft: 50,
__self: void 0,
__source: {
fileName: _jsxFileName,
lineNumber: 123,
columnNumber: 3
}
}, /*#__PURE__*/_react.default.createElement(_DatePicker.default, (0, _extends2.default)({
placeholderText: "old"
}, commonDatePickerProps, {
__self: void 0,
__source: {
fileName: _jsxFileName,
lineNumber: 124,
columnNumber: 5
}
})));
var ScrollableContent = () => {
var sameProps = {
placement: 'top',
fixed: false,
flip: false,
appendTo: _PopoverNext2.APPEND_TO.scrollParent
};
return /*#__PURE__*/_react.default.createElement("div", {
"data-hook": "parent-of-scrollable",
style: {
marginTop: '100px',
position: 'relative',
border: '1px solid black'
},
__self: void 0,
__source: {
fileName: _jsxFileName,
lineNumber: 137,
columnNumber: 5
}
}, /*#__PURE__*/_react.default.createElement("div", {
"data-hook": "scrollable",
style: {
overflow: 'auto',
position: 'relative',
height: '200px',
border: '1px solid green'
},
__self: void 0,
__source: {
fileName: _jsxFileName,
lineNumber: 145,
columnNumber: 7
}
}, /*#__PURE__*/_react.default.createElement("div", {
style: {
padding: '25px 25px 150px'
},
__self: void 0,
__source: {
fileName: _jsxFileName,
lineNumber: 154,
columnNumber: 9
}
}, /*#__PURE__*/_react.default.createElement(_Box.default, {
width: "350px",
border: "solid 1px red",
padding: "60px",
height: 160,
gap: 8,
__self: void 0,
__source: {
fileName: _jsxFileName,
lineNumber: 155,
columnNumber: 11
}
}, /*#__PURE__*/_react.default.createElement(_2.Popover, (0, _extends2.default)({
shown: true,
showArrow: true
}, sameProps, {
__self: void 0,
__source: {
fileName: _jsxFileName,
lineNumber: 162,
columnNumber: 13
}
}), /*#__PURE__*/_react.default.createElement(_2.Popover.Element, {
__self: void 0,
__source: {
fileName: _jsxFileName,
lineNumber: 163,
columnNumber: 15
}
}, /*#__PURE__*/_react.default.createElement("button", {
__self: void 0,
__source: {
fileName: _jsxFileName,
lineNumber: 164,
columnNumber: 17
}
}, "I am an plain Button")), /*#__PURE__*/_react.default.createElement(_2.Popover.Content, {
__self: void 0,
__source: {
fileName: _jsxFileName,
lineNumber: 166,
columnNumber: 15
}
}, /*#__PURE__*/_react.default.createElement(_Box.default, {
padding: "12px 24px",
width: 140,
__self: void 0,
__source: {
fileName: _jsxFileName,
lineNumber: 167,
columnNumber: 17
}
}, "Old popover Content"))), /*#__PURE__*/_react.default.createElement(_PopoverNext.default, (0, _extends2.default)({}, sameProps, {
open: true,
__self: void 0,
__source: {
fileName: _jsxFileName,
lineNumber: 173,
columnNumber: 13
}
}), /*#__PURE__*/_react.default.createElement(_PopoverNext.default.Trigger, {
__self: void 0,
__source: {
fileName: _jsxFileName,
lineNumber: 174,
columnNumber: 15
}
}, /*#__PURE__*/_react.default.createElement("button", {
__self: void 0,
__source: {
fileName: _jsxFileName,
lineNumber: 175,
columnNumber: 17
}
}, "Popover trigger")), /*#__PURE__*/_react.default.createElement(_PopoverNext.default.Content, {
__self: void 0,
__source: {
fileName: _jsxFileName,
lineNumber: 177,
columnNumber: 15
}
}, /*#__PURE__*/_react.default.createElement(_Box.default, {
padding: "12px 24px",
width: 140,
__self: void 0,
__source: {
fileName: _jsxFileName,
lineNumber: 178,
columnNumber: 17
}
}, "New popover Content")))))));
};
var ScrollableTemplate = () => /*#__PURE__*/_react.default.createElement(ScrollableContent, {
__self: void 0,
__source: {
fileName: _jsxFileName,
lineNumber: 191,
columnNumber: 3
}
});
var ScrollableWrapper = _ref => {
var {
children,
height
} = _ref;
return /*#__PURE__*/_react.default.createElement("div", {
style: {
overflow: 'hidden',
position: 'relative',
border: '1px solid black'
},
__self: void 0,
__source: {
fileName: _jsxFileName,
lineNumber: 196,
columnNumber: 5
}
}, /*#__PURE__*/_react.default.createElement("div", {
"data-hook": "scrollable",
style: {
overflow: 'auto',
height
},
__self: void 0,
__source: {
fileName: _jsxFileName,
lineNumber: 203,
columnNumber: 7
}
}, /*#__PURE__*/_react.default.createElement("div", {
style: {
padding: '15px 25px 25px'
},
__self: void 0,
__source: {
fileName: _jsxFileName,
lineNumber: 210,
columnNumber: 9
}
}, /*#__PURE__*/_react.default.createElement(_Box.default, {
width: "150px",
overflow: "hidden",
border: "solid 1px black",
padding: "30px",
__self: void 0,
__source: {
fileName: _jsxFileName,
lineNumber: 211,
columnNumber: 11
}
}, children))));
};
var ScrollableContainer = () => {
var HEIGHT = '50px';
var commonProps = {
placement: 'bottom',
fixed: true,
flip: true,
appendTo: 'scrollParent',
dataHook: 'popover'
};
return /*#__PURE__*/_react.default.createElement(_Box.default, {
gap: 3,
direction: "vertical",
__self: void 0,
__source: {
fileName: _jsxFileName,
lineNumber: 237,
columnNumber: 5
}
}, /*#__PURE__*/_react.default.createElement(ScrollableWrapper, {
height: HEIGHT,
__self: void 0,
__source: {
fileName: _jsxFileName,
lineNumber: 238,
columnNumber: 7
}
}, /*#__PURE__*/_react.default.createElement(_PopoverNext.default, (0, _extends2.default)({}, commonProps, {
open: true,
onOpenChange: () => {},
focusManagerEnabled: false,
__self: void 0,
__source: {
fileName: _jsxFileName,
lineNumber: 239,
columnNumber: 9
}
}), /*#__PURE__*/_react.default.createElement(_PopoverNext.default.Trigger, {
__self: void 0,
__source: {
fileName: _jsxFileName,
lineNumber: 245,
columnNumber: 11
}
}, /*#__PURE__*/_react.default.createElement("button", {
__self: void 0,
__source: {
fileName: _jsxFileName,
lineNumber: 246,
columnNumber: 13
}
}, "Popover trigger")), /*#__PURE__*/_react.default.createElement(_PopoverNext.default.Content, {
__self: void 0,
__source: {
fileName: _jsxFileName,
lineNumber: 248,
columnNumber: 11
}
}, /*#__PURE__*/_react.default.createElement(_Box.default, {
padding: "30px",
backgroundColor: "pink",
borderRadius: "inherit",
__self: void 0,
__source: {
fileName: _jsxFileName,
lineNumber: 249,
columnNumber: 13
}
}, "Content")))), /*#__PURE__*/_react.default.createElement(ScrollableWrapper, {
height: HEIGHT,
__self: void 0,
__source: {
fileName: _jsxFileName,
lineNumber: 256,
columnNumber: 7
}
}, /*#__PURE__*/_react.default.createElement(_2.Popover, (0, _extends2.default)({}, commonProps, {
shown: true,
onShow: () => {},
__self: void 0,
__source: {
fileName: _jsxFileName,
lineNumber: 257,
columnNumber: 9
}
}), /*#__PURE__*/_react.default.createElement(_2.Popover.Element, {
__self: void 0,
__source: {
fileName: _jsxFileName,
lineNumber: 262,
columnNumber: 11
}
}, /*#__PURE__*/_react.default.createElement("button", {
__self: void 0,
__source: {
fileName: _jsxFileName,
lineNumber: 263,
columnNumber: 13
}
}, "Popover trigger")), /*#__PURE__*/_react.default.createElement(_2.Popover.Content, {
__self: void 0,
__source: {
fileName: _jsxFileName,
lineNumber: 265,
columnNumber: 11
}
}, /*#__PURE__*/_react.default.createElement(_Box.default, {
padding: "30px",
backgroundColor: "pink",
borderRadius: "inherit",
__self: void 0,
__source: {
fileName: _jsxFileName,
lineNumber: 266,
columnNumber: 13
}
}, "Content")))));
};
var ScrollableScrollParentTemplate = () => /*#__PURE__*/_react.default.createElement(ScrollableContainer, {
__self: void 0,
__source: {
fileName: _jsxFileName,
lineNumber: 278,
columnNumber: 11
}
});
var Basic = exports.Basic = {
render: () => /*#__PURE__*/_react.default.createElement(Template, {
__self: void 0,
__source: {
fileName: _jsxFileName,
lineNumber: 281,
columnNumber: 17
}
})
};
Basic.args = {};
var Comparison = exports.Comparison = {
render: () => /*#__PURE__*/_react.default.createElement(ComparisonTemplate, {
__self: void 0,
__source: {
fileName: _jsxFileName,
lineNumber: 286,
columnNumber: 17
}
})
};
Comparison.args = {};
var DatePickers = exports.DatePickers = DatePickersTemplate.bind({});
DatePickers.args = {};
var Scrollable = exports.Scrollable = ScrollableTemplate.bind({});
Scrollable.args = {};
var ScrollableScrollParent = exports.ScrollableScrollParent = ScrollableScrollParentTemplate.bind({});
ScrollableScrollParent.args = {};
//# sourceMappingURL=PopoverNext.story.js.map