@atlaskit/editor-common
Version:
A package that contains common classes and components for editor and renderer
75 lines (71 loc) • 2.8 kB
JavaScript
;
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
var _typeof = require("@babel/runtime/helpers/typeof");
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = useContainerWidth;
var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
var _react = _interopRequireWildcard(require("react"));
var _react2 = require("@emotion/react");
var _widthDetector = require("@atlaskit/width-detector");
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); }
/**
* @jsxRuntime classic
* @jsx jsx
*/
// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
/**
*
* Problem:
* While using WidthObserver, there's no initial width.
* That may cause problems, but not limited to, something like a lag between
* renders for conditionally rendered components.
*
* solution:
* useContainerWidth() hook
* it pre-measures the width of a parent container on initial mount
* and gives you back the containerWidth.
*
*
* Example hook usage:
*
* const { containerWidth, ContainerWidthMonitor } = useContainerWidth();
*
* return (
* <>
* <ContainerWidthMonitor />
* {containerWidth < 600 ? <MobileComponent /> : <DesktopComponent />}
* </>
* );
*
*/
var widthObserverWrapper = (0, _react2.css)({
position: 'relative'
});
function useContainerWidth() {
var _useState = (0, _react.useState)(0),
_useState2 = (0, _slicedToArray2.default)(_useState, 2),
containerWidth = _useState2[0],
setContainerWidth = _useState2[1];
var ref = (0, _react.useRef)(null);
(0, _react.useEffect)(function () {
var current = ref.current;
if (ref && current) {
setContainerWidth(current.getBoundingClientRect().width);
}
}, [ref]);
var ContainerWidthMonitor = /*#__PURE__*/(0, _react.memo)(function () {
return (0, _react2.jsx)("div", {
css: widthObserverWrapper,
ref: ref,
tabIndex: -1
}, (0, _react2.jsx)(_widthDetector.WidthObserver, {
setWidth: setContainerWidth
}));
});
return {
containerWidth: containerWidth,
ContainerWidthMonitor: ContainerWidthMonitor
};
}