blixify-ui-web 0.4.201 → 0.4.202
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -14,8 +14,11 @@ interface State {
|
|
|
14
14
|
}
|
|
15
15
|
export declare class Drawer extends Component<Props, State> {
|
|
16
16
|
state: State;
|
|
17
|
+
componentDidUpdate(_prevProps: Props, prevState: State): void;
|
|
18
|
+
componentWillUnmount(): void;
|
|
17
19
|
handleOpen: () => void;
|
|
18
20
|
handleClose: () => void;
|
|
21
|
+
handleKeyDown: (event: KeyboardEvent) => void;
|
|
19
22
|
renderDrawerWidth: () => "sm:max-w-lg" | "sm:max-w-xl" | "sm:max-w-2xl" | "sm:max-w-3xl" | "sm:max-w-4xl" | "sm:max-w-5xl" | "sm:max-w-6xl" | "sm:max-w-7xl";
|
|
20
23
|
renderDrawerHeight: () => "max-h-[50vh] h-[50vh]" | "max-h-[75vh] h-[75vh]" | "max-h-[100vh] h-[100vh]";
|
|
21
24
|
renderContainerClasses: () => "pointer-events-none fixed inset-x-0 bottom-0 flex max-h-ful" | "pointer-events-none fixed inset-y-0 right-0 flex max-w-full pl-10 sm:pl-16";
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/display/drawer/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/display/drawer/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEhD,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,UAAU,KAAK;IACb,GAAG,EAAE,YAAY,CAAC;IAClB,OAAO,EAAE,YAAY,CAAC;IACtB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,MAAM,CAAC,EAAE,QAAQ,CAAC;IAClB,QAAQ,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,KAAK,GAAG,KAAK,GAAG,KAAK,GAAG,KAAK,GAAG,KAAK,GAAG,KAAK,CAAC;IACvE,SAAS,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,KAAK,CAAC;CACjC;AAED,UAAU,KAAK;IACb,IAAI,EAAE,OAAO,CAAC;CACf;AAED,qBAAa,MAAO,SAAQ,SAAS,CAAC,KAAK,EAAE,KAAK,CAAC;IACjD,KAAK,EAAE,KAAK,CAEV;IAEF,kBAAkB,CAAC,UAAU,EAAE,KAAK,EAAE,SAAS,EAAE,KAAK;IAStD,oBAAoB;IAIpB,UAAU,aAER;IAEF,WAAW,aAET;IAEF,aAAa,UAAW,aAAa,UAInC;IAEF,iBAAiB,4IAqBf;IAEF,kBAAkB,sFAShB;IAEF,sBAAsB,qJAKpB;IAEF,kBAAkB,eAahB;IAGF,MAAM;CA6DP"}
|
|
@@ -20,9 +20,8 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
|
20
20
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
21
21
|
exports.Drawer = void 0;
|
|
22
22
|
var react_1 = require("react");
|
|
23
|
-
var react_2 = require("@headlessui/react");
|
|
24
23
|
var outline_1 = require("@heroicons/react/24/outline");
|
|
25
|
-
var
|
|
24
|
+
var react_2 = __importDefault(require("react"));
|
|
26
25
|
var Drawer = /** @class */ (function (_super) {
|
|
27
26
|
__extends(Drawer, _super);
|
|
28
27
|
function Drawer() {
|
|
@@ -36,6 +35,11 @@ var Drawer = /** @class */ (function (_super) {
|
|
|
36
35
|
_this.handleClose = function () {
|
|
37
36
|
_this.setState({ open: false });
|
|
38
37
|
};
|
|
38
|
+
_this.handleKeyDown = function (event) {
|
|
39
|
+
if (event.key === "Escape") {
|
|
40
|
+
_this.handleClose();
|
|
41
|
+
}
|
|
42
|
+
};
|
|
39
43
|
_this.renderDrawerWidth = function () {
|
|
40
44
|
switch (_this.props.maxWidth) {
|
|
41
45
|
case "lg":
|
|
@@ -79,34 +83,49 @@ var Drawer = /** @class */ (function (_super) {
|
|
|
79
83
|
var widthClasses = _this.renderDrawerWidth();
|
|
80
84
|
var heightClasses = _this.renderDrawerHeight();
|
|
81
85
|
if (_this.props.anchor === "bottom") {
|
|
82
|
-
return "".concat(baseClasses, " ").concat(heightClasses, " translate-y-0
|
|
86
|
+
return "".concat(baseClasses, " ").concat(heightClasses, " ").concat(_this.state.open ? "translate-y-0" : "translate-y-full");
|
|
83
87
|
}
|
|
84
|
-
return "".concat(baseClasses, " ").concat(widthClasses, " translate-x-0
|
|
88
|
+
return "".concat(baseClasses, " ").concat(widthClasses, " ").concat(_this.state.open ? "translate-x-0" : "translate-x-full");
|
|
85
89
|
};
|
|
86
90
|
return _this;
|
|
87
91
|
}
|
|
92
|
+
Drawer.prototype.componentDidUpdate = function (_prevProps, prevState) {
|
|
93
|
+
// INFO: Having keydown = close drawer when press escape, avoid page freeze
|
|
94
|
+
if (!prevState.open && this.state.open) {
|
|
95
|
+
window.addEventListener("keydown", this.handleKeyDown);
|
|
96
|
+
}
|
|
97
|
+
else if (prevState.open && !this.state.open) {
|
|
98
|
+
window.removeEventListener("keydown", this.handleKeyDown);
|
|
99
|
+
}
|
|
100
|
+
};
|
|
101
|
+
Drawer.prototype.componentWillUnmount = function () {
|
|
102
|
+
window.removeEventListener("keydown", this.handleKeyDown);
|
|
103
|
+
};
|
|
104
|
+
// INFO: IMPORTANT! Do not use headless ui drawer, cause page freeze when there's iFrame
|
|
88
105
|
Drawer.prototype.render = function () {
|
|
89
|
-
return (
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
106
|
+
return (react_2.default.createElement("div", null,
|
|
107
|
+
react_2.default.createElement("div", { onClick: this.handleOpen }, this.props.cta),
|
|
108
|
+
react_2.default.createElement("div", { className: "relative z-30", role: "dialog", "aria-modal": "true" },
|
|
109
|
+
react_2.default.createElement("div", { className: "fixed inset-0 bg-gray-500/75 transition-opacity duration-500 ease-in-out ".concat(this.state.open
|
|
110
|
+
? "opacity-100 pointer-events-auto"
|
|
111
|
+
: "opacity-0 pointer-events-none"), onClick: this.handleClose }),
|
|
112
|
+
react_2.default.createElement("div", { className: "fixed inset-0 overflow-hidden pointer-events-none" },
|
|
113
|
+
react_2.default.createElement("div", { className: "absolute inset-0 overflow-hidden" },
|
|
114
|
+
react_2.default.createElement("div", { className: this.renderContainerClasses() },
|
|
115
|
+
react_2.default.createElement("div", { className: this.renderPanelClasses() },
|
|
116
|
+
react_2.default.createElement("div", { className: "relative flex h-full flex-col overflow-y-auto bg-white ".concat(this.props.anchor === "bottom"
|
|
98
117
|
? "rounded-t-xl shadow-[0_-4px_8px_-2px_rgba(0,0,0,0.2)]"
|
|
99
118
|
: "shadow-xl") },
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
this.props.title && (
|
|
103
|
-
this.props.desc && (
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
119
|
+
react_2.default.createElement("div", { className: "sticky top-0 left-0 p-4 flex justify-between items-start bg-white shadow-sm z-[35]" },
|
|
120
|
+
react_2.default.createElement("div", { className: "flex-grow flex flex-col" },
|
|
121
|
+
this.props.title && (react_2.default.createElement("h2", { className: "text-lg font-medium" }, this.props.title)),
|
|
122
|
+
this.props.desc && (react_2.default.createElement("p", { className: "text-sm text-gray-500" }, this.props.desc))),
|
|
123
|
+
react_2.default.createElement("div", { className: "ml-2 flex items-center flex-shrink-0" },
|
|
124
|
+
react_2.default.createElement("button", { type: "button", onClick: this.handleClose, className: "relative rounded-md focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-white" },
|
|
125
|
+
react_2.default.createElement("span", { className: "absolute -inset-2.5" }),
|
|
126
|
+
react_2.default.createElement("span", { className: "sr-only" }, "Close panel"),
|
|
127
|
+
react_2.default.createElement(outline_1.XMarkIcon, { "aria-hidden": "true", className: "w-5 h-5" })))),
|
|
128
|
+
react_2.default.createElement("div", { className: "relative flex-1 p-4" }, this.props.content)))))))));
|
|
110
129
|
};
|
|
111
130
|
return Drawer;
|
|
112
131
|
}(react_1.Component));
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/display/drawer/index.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;AAAA,+BAAgD;AAChD,
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/display/drawer/index.tsx"],"names":[],"mappings":"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"}
|