gather-content-ui
Version:
GatherContent UI Library
131 lines (130 loc) • 8.31 kB
JavaScript
;
function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.Resizable = Resizable;
var _react = _interopRequireWildcard(require("react"));
var _helpers = require("../helpers");
var _useLocalStorage3 = require("../hooks/useLocalStorage");
function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { "default": e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n["default"] = e, t && t.set(e, n), n; }
function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t["return"] && (u = t["return"](), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
function Resizable(props) {
var _props$initialWidth;
var children = props.children,
id = props.id,
onResizeComplete = props.onResizeComplete,
_props$rememberPositi = props.rememberPosition,
rememberPosition = _props$rememberPositi === void 0 ? false : _props$rememberPositi,
_props$useGutterOffse = props.useGutterOffset,
useGutterOffset = _props$useGutterOffse === void 0 ? false : _props$useGutterOffse;
var initialWidth = (0, _helpers.toPixels)((_props$initialWidth = props.initialWidth) !== null && _props$initialWidth !== void 0 ? _props$initialWidth : "50%");
var gutterSize = useGutterOffset ? 16 : 0;
var doDragRef = (0, _react.useRef)(function () {});
var stopDragRef = (0, _react.useRef)(function () {});
var resizeRef = (0, _react.useRef)(null);
var resizeWrapperRef = (0, _react.useRef)(null);
var handleRef = (0, _react.useRef)(null);
var _React$useState = _react["default"].useState({
startX: 0,
startWidth: 0
}),
_React$useState2 = _slicedToArray(_React$useState, 2),
state = _React$useState2[0],
setState = _React$useState2[1];
var _useLocalStorage = (0, _useLocalStorage3.useLocalStorage)("RESIZE_POSITION_".concat(id !== null && id !== void 0 ? id : ""), initialWidth),
_useLocalStorage2 = _slicedToArray(_useLocalStorage, 2),
lastPosition = _useLocalStorage2[0],
setLastPosition = _useLocalStorage2[1];
var getContainerWidth = function getContainerWidth() {
var _props$containerWidth;
return (0, _helpers.toPixels)((_props$containerWidth = props.containerWidth) !== null && _props$containerWidth !== void 0 ? _props$containerWidth : document.body.offsetWidth);
};
var getMinWidth = function getMinWidth() {
var _props$minResizableWi;
return (0, _helpers.toPixels)((_props$minResizableWi = props.minResizableWidth) !== null && _props$minResizableWi !== void 0 ? _props$minResizableWi : 0, getContainerWidth());
};
var getMaxWidth = function getMaxWidth() {
var _props$maxResizableWi;
return (0, _helpers.toPixels)((_props$maxResizableWi = props.maxResizableWidth) !== null && _props$maxResizableWi !== void 0 ? _props$maxResizableWi : "100%", getContainerWidth());
};
var getWrapperWidth = function getWrapperWidth() {
var _resizeWrapperRef$cur, _resizeWrapperRef$cur2;
return (0, _helpers.toPixels)((_resizeWrapperRef$cur = (_resizeWrapperRef$cur2 = resizeWrapperRef.current) === null || _resizeWrapperRef$cur2 === void 0 ? void 0 : _resizeWrapperRef$cur2.style.width) !== null && _resizeWrapperRef$cur !== void 0 ? _resizeWrapperRef$cur : 0);
};
var doResize = function doResize(value) {
if (resizeWrapperRef.current === null) return;
var newWidth = (0, _helpers.keepValueWithinRange)(value, getMinWidth(), getMaxWidth()) - gutterSize;
resizeWrapperRef.current.style.width = "".concat(newWidth, "px");
setLastPosition(newWidth);
};
var doDrag = function doDrag(evt) {
var newWidth = state.startWidth + evt.clientX - state.startX;
doResize(newWidth);
};
var stopDrag = function stopDrag() {
if (onResizeComplete) {
onResizeComplete(getWrapperWidth() + gutterSize);
}
document.removeEventListener("mousemove", doDragRef.current, false);
document.removeEventListener("mouseup", stopDragRef.current, false);
};
var initDrag = (0, _react.useCallback)(function (evt) {
var clientX = evt.clientX;
setState({
startX: clientX,
startWidth: getWrapperWidth()
});
doDragRef.current = doDrag;
stopDragRef.current = stopDrag;
document.addEventListener("mousemove", doDrag, false);
document.addEventListener("mouseup", stopDrag, false);
}, [setState]);
var setGutterHandlePosition = function setGutterHandlePosition(evt) {
var handle = handleRef.current;
if (handle === null) return;
var rect = evt.currentTarget.getBoundingClientRect();
var gutter = handle.parentElement;
var handleOffset = handle.offsetHeight / 2;
var yPosition = (0, _helpers.keepValueWithinRange)(evt.clientY - rect.top, handleOffset, gutter.offsetHeight - handleOffset);
handle.style.top = "".concat(yPosition - handleOffset, "px");
};
(0, _react.useEffect)(function () {
doResize(rememberPosition ? lastPosition : initialWidth);
// remember to remove global listeners on unmounting
return function () {
return stopDrag();
};
}, []);
(0, _react.useEffect)(function () {
var handeWindowResize = function handeWindowResize() {
return doResize(getWrapperWidth() + gutterSize);
};
window.addEventListener("resize", handeWindowResize);
return function () {
window.removeEventListener("resize", handeWindowResize);
};
}, []);
return /*#__PURE__*/_react["default"].createElement("div", {
ref: resizeRef,
className: "gui-resizable"
}, /*#__PURE__*/_react["default"].createElement("div", {
ref: resizeWrapperRef,
className: "gui-resizable__wrapper"
}, children, /*#__PURE__*/_react["default"].createElement("span", {
role: "none",
className: "gui-resizable__gutter",
onMouseDown: initDrag,
onMouseMove: setGutterHandlePosition
}, /*#__PURE__*/_react["default"].createElement("span", {
ref: handleRef,
className: "gui-resizable__gutter-handle"
}))));
}
//# sourceMappingURL=index.js.map