@bottom-sheet/state-machine
Version:
The bottom-sheet brains, built on xstate
386 lines (374 loc) • 17.4 kB
JavaScript
var $dYZEH$xstate = require("xstate");
var $dYZEH$lodashclamp = require("lodash.clamp");
var $dYZEH$lodashisequal = require("lodash.isequal");
var $dYZEH$memoizeone = require("memoize-one");
function $parcel$export(e, n, v, s) {
Object.defineProperty(e, n, {get: v, set: s, enumerable: true, configurable: true});
}
function $parcel$interopDefault(a) {
return a && a.__esModule ? a.default : a;
}
$parcel$export(module.exports, "BottomSheetMachine", () => $882b6d93070905b3$export$95217c4514cf8358);
$parcel$export(module.exports, "assignInitialHeight", () => $9ba0f9a5c47c04f2$export$3afe067617e15d02);
$parcel$export(module.exports, "assignSnapPoints", () => $9ba0f9a5c47c04f2$export$cacdb68fa17fdba3);
$parcel$export(module.exports, "computeMaxContent", () => $9ba0f9a5c47c04f2$export$877b7af162b19c0e);
$parcel$export(module.exports, "computeMinContent", () => $9ba0f9a5c47c04f2$export$1c86a35cf5be3ba7);
$parcel$export(module.exports, "computeSnapPointBounds", () => $9ba0f9a5c47c04f2$export$dfb53e910abd6743);
$parcel$export(module.exports, "computeSnapPoints", () => $9ba0f9a5c47c04f2$export$10be95fdcde3f4db);
$parcel$export(module.exports, "defaultInitialHeight", () => $9ba0f9a5c47c04f2$export$6919a97f44494e8b);
$parcel$export(module.exports, "defaultSnapPoints", () => $9ba0f9a5c47c04f2$export$d6c33a3846fb80ba);
const $9ba0f9a5c47c04f2$export$84df5d010de0cb0d = (description)=>({});
const $9ba0f9a5c47c04f2$export$cacdb68fa17fdba3 = (getSnapPoints)=>(0, $dYZEH$xstate.assign)({
snapPoints: ({ maxHeight: maxHeight , headerHeight: headerHeight , contentHeight: contentHeight , footerHeight: footerHeight , minContent: minContent , maxContent: maxContent , })=>$9ba0f9a5c47c04f2$export$10be95fdcde3f4db(getSnapPoints({
maxHeight: maxHeight,
headerHeight: headerHeight,
contentHeight: contentHeight,
footerHeight: footerHeight,
minContent: minContent,
maxContent: maxContent
}), maxHeight)
});
const $9ba0f9a5c47c04f2$export$3afe067617e15d02 = (getInitialHeight)=>(0, $dYZEH$xstate.assign)({
initialHeight: ({ maxHeight: maxHeight , headerHeight: headerHeight , contentHeight: contentHeight , footerHeight: footerHeight , minContent: minContent , maxContent: maxContent , snapPoints: snapPoints , lastHeight: lastHeight , })=>{
const [initialHeight] = $9ba0f9a5c47c04f2$export$dfb53e910abd6743(getInitialHeight({
maxHeight: maxHeight,
headerHeight: headerHeight,
contentHeight: contentHeight,
footerHeight: footerHeight,
minContent: minContent,
maxContent: maxContent,
snapPoints: snapPoints,
lastHeight: lastHeight
}), snapPoints);
return initialHeight;
}
});
function $9ba0f9a5c47c04f2$export$10be95fdcde3f4db(input, maxHeight) {
const snapPoints = [].concat(input);
const output = new Set();
for (const snapPoint of snapPoints){
if (!Number.isFinite(snapPoint)) continue;
const clamped = (0, ($parcel$interopDefault($dYZEH$lodashclamp)))(Math.round(snapPoint), 0, maxHeight);
if (clamped > 0) output.add(clamped);
}
return [
...output
].sort($9ba0f9a5c47c04f2$var$sortByNumbers);
}
function $9ba0f9a5c47c04f2$var$sortByNumbers(a, b) {
return a - b;
}
function $9ba0f9a5c47c04f2$var$_computeSnapPointBounds(unsafeHeight, snapPoints) {
const height = Math.round(unsafeHeight);
if (!Number.isFinite(height) || height <= 0) return [
0,
0,
0
];
const [minSnap] = snapPoints;
const nearest = snapPoints.reduce((prev, curr)=>Math.abs(curr - height) < Math.abs(prev - height) ? curr : prev, minSnap);
const nearestIndex = snapPoints.indexOf(nearest);
const lower = snapPoints[Math.max(nearestIndex - 1, 0)];
const upper = snapPoints[Math.min(nearestIndex + 1, snapPoints.length - 1)];
return [
nearest,
lower,
upper
];
}
const $9ba0f9a5c47c04f2$export$dfb53e910abd6743 = (0, ($parcel$interopDefault($dYZEH$memoizeone)))($9ba0f9a5c47c04f2$var$_computeSnapPointBounds, (0, ($parcel$interopDefault($dYZEH$lodashisequal))));
function $9ba0f9a5c47c04f2$export$1c86a35cf5be3ba7({ maxHeight: maxHeight , headerHeight: headerHeight , footerHeight: footerHeight }, minHeight = 50) {
return Math.min(maxHeight, Math.max(headerHeight + footerHeight, minHeight));
}
function $9ba0f9a5c47c04f2$export$877b7af162b19c0e({ maxHeight: maxHeight , headerHeight: headerHeight , contentHeight: contentHeight , footerHeight: footerHeight }, minHeight) {
return Math.min(maxHeight, Math.max(headerHeight + contentHeight + footerHeight, $9ba0f9a5c47c04f2$export$1c86a35cf5be3ba7({
maxHeight: maxHeight,
headerHeight: headerHeight,
footerHeight: footerHeight
}, minHeight)));
}
const $9ba0f9a5c47c04f2$export$d6c33a3846fb80ba = ({ maxContent: maxContent })=>{
return maxContent;
};
const $9ba0f9a5c47c04f2$export$6919a97f44494e8b = ({ lastHeight: lastHeight , maxContent: maxContent , })=>{
return lastHeight ?? maxContent;
};
const $882b6d93070905b3$export$95217c4514cf8358 = /** @xstate-layout N4IgpgJg5mDOIC5QGUAWYwBcB0BjANgPayQDEA8gAoCiAcoqAA7ECWmLhAdgyAB6IBGAJwB2bABZxQgEwCRABnnShkgKyqANCACeg+aoBs2AeJGmF06fIP6Avra1oMOAsTIBJWu4Aq7gIIAMgEAmgD6VHQ8zLBsHNxIfIICAMzYZoryIqri0qq50lq6CAICAByq2EJCAjbWyWUC8qX2juhY2ISMYJzYLJyxAIb4+NqkAErUfgAiwVGs7Fw8-AiqyRXJ4gbJBiJlKiIbhYiWm9irWSK51aUC0i0gTu2d3R1d-ZxQ2ADuA7Ef45MZnMYgt4qBlqUhPJsJDktI4ZDbiJSqUjghqhUDAJsupdslkkJSsl7o8cM8euS+p8fn8oKQ-ABVbzkABi5AAwgzkMDYosEhCoTChHCEdVpMjUTpECJqsYrIp8dJNkS7g4Hm0yW9Xt0qdgBgBXTCEABmhFw+pi-wm01mCWivLBiWKsiM0iJN2xyVKIhsyTRMoEcoyiuVcJJGu1FLeuoG-QAtgN2P8IrRqFMeaClohxKs0iIDuITHsZAY0WVxNDMqJbpYhKpLgZw85I5GY-HE1TSFMxn4AOIZuJZ4p5aGrVQpNaNAySNEGGQwsxzgyIpr4ptPLWUj569tJunIWh+SgDvng7NbPMFouQktlr2Yr1VKRNTb19eal4AJzge67Pf7drzIO-KIFs4iVMulzyGUBiwViZZQWcKImNB9a3Js74tt+sC-hMyDuAAWtQJ6OssOapPmV6Fje0illKxR1kIZy7G64jJEoHGNmqpJYT+nYHkeJFDlC4GmASWRNGYCh0UUwg1DCUi0ViAYlKomHktgECfgMUBQJ23Z9r2aZCSBCBgRB3pWDBcECGWOzSNgNjjgSTlKsS3ERhpWk6Xp-wCcegEgsBZ5mUqFlQdZsG2fRNRhQYlgpFCqzbNi6lathLAAF6dnhhHGYFDpDoWFH5hs15VLRaJWDK2DWG6hjJGYypqR5zYaRl2V+YeAVMEBp5OhWJVUcWlX0bI4q1ZsGTjsK04ta0bXpXAWX6f+JkhdijRnJO+LjtYM70cKgblKVSmPmurUbi8sCcAMjCMPx3U0OmBWZqZIkSAcoiqJJpjWGWQjTjCcKFvIIOKJcaXXbd92rX261Oli4GA5Z0GlHB8ExT9FQpPIUjjqUkh1FDPSuJadLsgE5DIPlvVBf1yzCGIkgyHIijKGomj0ZIqTo1WKOA8i7kLVdpNEOTFA0PQr3BYjtHYMoYNEviMiWf6c5yjmDU4pc4gk6QlPU8RMsM4gXpDWV1EVTJ0o2JUqjCmY5SK4D76kDT3ihAAsn4AAaoQABLUO4vYB94CPLMiFRWKIaNiuUVWXJUSg5HCNSxYYbse4HgLUGMOch2HEfSrsjmqKU8LsSqpVluUlQbCoyGZBJeuXZg7vUJ77LkLQ3h0J7QeF+HJukbbFTjoY4qNW5QhooSEFSUTqzenkWed6EbLkH3+eD6Hw904Vpn5oGWK0Zs2wE-iZaqmqnCEBAcA8DxZOQMXCCmGikilDC2RYhi1W5GFuqRaLw+iDGGEUA+b0QoEm-pRS2I0bYIBOKOfEBh6z6E2HIEmrZtw0j3G-LIDktibXkFUNY9YCj0RlKkN0twyi7HUFOHBW5PgGiNKac05M36NEasYSebFyilEyJKIoUdjA1EyNBfMKcWHRm3LGFgCYCEjyHCkMojkTDl3KIWZQ8J-QqAkVrKw4gUSCLkTqD4hC3SOXqHtchuIqFiNuHKZy5QNj5kJjg7CKioGy0jvFSokJy4Bi2FkAG44JCCx+qYH66CcHeV0lSN+OY4GlULFbW8MUFDQi9HOJKEk5zNDbrxGInUoBvwJBbDJiCyx4yYtOG4f1aJeiUDgm6d0HpWNUaZXhYhtg5hUHWMG7EuayShK6MwhgK6pOyDgsmySekhVMczG4QsvS5GXAdMR2R7a-29IScUqoRYfkdPaaBTo1hMXgTUmiSCbBiBRI1dBSonnInfG-fR9FGrQnRoSZceMzBwh9PYewQA */ (0, $dYZEH$xstate.createMachine)({
context: {
height: 0,
initialHeight: 0,
snapPoints: [],
lastHeight: null,
maxContent: 0,
minContent: 0,
headerHeight: null,
contentHeight: null,
footerHeight: null,
maxHeight: 0
},
tsTypes: {},
schema: {
context: {},
events: {}
},
preserveActionOrder: true,
id: "bs",
initial: "closed",
states: {
closed: {
on: {
OPEN: {
actions: [
"setMinContent",
"setMaxContent",
"setSnapPoints",
"setInitialHeight",
],
target: "open"
}
}
},
open: {
initial: "opening",
states: {
opening: {
initial: "waiting",
states: {
waiting: {
exit: "setHeight",
on: {
TRANSITION_OPEN: {
target: "transition"
},
AUTOFOCUS: {
target: "autofocusing"
}
}
},
autofocusing: {
exit: "setLastHeight",
on: {
TRANSITION_OPEN: {
target: "transition"
}
}
},
transition: {
exit: "setLastHeight",
on: {
OPENED: {
target: "#bs.open.resting"
},
DRAG: {
...(0, $9ba0f9a5c47c04f2$export$84df5d010de0cb0d)("redirect"),
target: "#bs.open.dragging"
},
SNAP: {
...(0, $9ba0f9a5c47c04f2$export$84df5d010de0cb0d)("redirect"),
target: "#bs.open.snapping"
}
}
}
}
},
resting: {
on: {
DRAG: {
target: "dragging"
},
RESIZE: {
target: "resizing"
},
SNAP: {
target: "snapping"
}
}
},
dragging: {
initial: "gesture",
states: {
gesture: {
on: {
TRANSITION_DRAG: {
target: "transition"
}
}
},
transition: {
entry: "setHeight",
exit: "setLastHeight",
on: {
DRAGGED: {
target: "#bs.open.resting"
}
}
}
},
on: {
SNAP: {
...(0, $9ba0f9a5c47c04f2$export$84df5d010de0cb0d)("redirect"),
target: "snapping"
}
}
},
resizing: {
entry: "setHeight",
exit: "setLastHeight",
on: {
RESIZED: {
target: "resting"
},
SNAP: {
...(0, $9ba0f9a5c47c04f2$export$84df5d010de0cb0d)("redirect"),
target: "snapping"
},
DRAG: {
...(0, $9ba0f9a5c47c04f2$export$84df5d010de0cb0d)("redirect"),
target: "dragging"
}
}
},
snapping: {
entry: "setHeight",
exit: "setLastHeight",
on: {
SNAPPED: {
target: "resting"
},
DRAG: {
...(0, $9ba0f9a5c47c04f2$export$84df5d010de0cb0d)("redirect"),
target: "dragging"
}
}
},
closing: {
entry: "setHeight",
exit: "setLastHeight",
on: {
CLOSED: {
target: "#bs.closed"
},
OPEN: {
...(0, $9ba0f9a5c47c04f2$export$84df5d010de0cb0d)("redirect"),
target: "opening"
}
}
}
},
on: {
CLOSE: {
target: ".closing"
}
}
}
},
on: {
SET_MAX_HEIGHT: {
actions: [
"setMaxHeight",
"setMinContent",
"setMaxContent",
"setSnapPoints",
"setInitialHeight",
"setHeight",
]
},
SET_HEADER_HEIGHT: {
actions: [
"setHeaderHeight",
"setMinContent",
"setMaxContent",
"setSnapPoints",
"setInitialHeight",
"setHeight",
]
},
SET_CONTENT_HEIGHT: {
actions: [
"setContentHeight",
"setMaxContent",
"setSnapPoints",
"setInitialHeight",
"setHeight",
]
},
SET_FOOTER_HEIGHT: {
actions: [
"setFooterHeight",
"setMinContent",
"setMaxContent",
"setSnapPoints",
"setInitialHeight",
"setHeight",
]
}
}
}, {
actions: {
setMaxHeight: (0, $dYZEH$xstate.assign)({
maxHeight: (context, event)=>{
if (event.type !== "SET_MAX_HEIGHT") return;
return event.payload.maxHeight;
}
}),
setHeaderHeight: (0, $dYZEH$xstate.assign)({
headerHeight: (context, event)=>{
if (event.type !== "SET_HEADER_HEIGHT") return;
return event.payload.headerHeight;
}
}),
setContentHeight: (0, $dYZEH$xstate.assign)({
contentHeight: (context, event)=>{
if (event.type !== "SET_CONTENT_HEIGHT") return;
return event.payload.contentHeight;
}
}),
setFooterHeight: (0, $dYZEH$xstate.assign)({
footerHeight: (context, event)=>{
if (event.type !== "SET_FOOTER_HEIGHT") return;
return event.payload.footerHeight;
}
}),
setMinContent: (0, $dYZEH$xstate.assign)({
minContent: ({ maxHeight: maxHeight , headerHeight: headerHeight , footerHeight: footerHeight })=>(0, $9ba0f9a5c47c04f2$export$1c86a35cf5be3ba7)({
maxHeight: maxHeight,
headerHeight: headerHeight,
footerHeight: footerHeight
})
}),
setMaxContent: (0, $dYZEH$xstate.assign)({
maxContent: ({ maxHeight: maxHeight , headerHeight: headerHeight , contentHeight: contentHeight , footerHeight: footerHeight , })=>(0, $9ba0f9a5c47c04f2$export$877b7af162b19c0e)({
maxHeight: maxHeight,
headerHeight: headerHeight,
contentHeight: contentHeight,
footerHeight: footerHeight
})
}),
setSnapPoints: (0, $9ba0f9a5c47c04f2$export$cacdb68fa17fdba3)((0, $9ba0f9a5c47c04f2$export$d6c33a3846fb80ba)),
setInitialHeight: (0, $9ba0f9a5c47c04f2$export$3afe067617e15d02)((0, $9ba0f9a5c47c04f2$export$6919a97f44494e8b)),
setHeight: (0, $dYZEH$xstate.assign)({
height: (context, event)=>{
const { snapPoints: snapPoints } = context;
switch(event.type){
case "CLOSE":
return 0;
case "TRANSITION_DRAG":
case "RESIZE":
case "SNAP":
return snapPoints.length < 1 ? 0 : (0, $9ba0f9a5c47c04f2$export$dfb53e910abd6743)(event.payload.height, snapPoints)[0];
case "SET_MAX_HEIGHT":
case "SET_HEADER_HEIGHT":
case "SET_CONTENT_HEIGHT":
case "SET_FOOTER_HEIGHT":
return context.height < 1 ? 0 : (0, $9ba0f9a5c47c04f2$export$dfb53e910abd6743)(context.height, snapPoints)[0];
default:
return context.initialHeight;
}
}
}),
setLastHeight: (0, $dYZEH$xstate.assign)({
lastHeight: (context)=>context.height || context.lastHeight
})
}
});
//# sourceMappingURL=index.js.map