wix-style-react
Version:
wix-style-react
143 lines (142 loc) • 6.25 kB
JavaScript
"use strict";
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
exports.__esModule = true;
exports.Content = void 0;
var _ContentSt = require("./Content.st.css");
var _react = _interopRequireWildcard(require("react"));
var _Divider = _interopRequireDefault(require("../../../Divider"));
var _propTypes = _interopRequireDefault(require("prop-types"));
var _ScrollableContainer = _interopRequireWildcard(require("../../../common/ScrollableContainer"));
var _ScrollableContainerCommon = require("../../../common/PropTypes/ScrollableContainerCommon");
var _constants = require("../../constants");
var _BaseModalLayoutContext = require("../../BaseModalLayoutContext");
var _jsxFileName = "/home/builduser/work/a9c1ac8876d5057c/packages/wix-style-react/dist/cjs/BaseModalLayout/LayoutBlocks/Content/Content.js";
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 Content = _ref => {
var {
dataHook,
className,
children,
hideTopScrollDivider = false,
hideBottomScrollDivider = false,
overflowY = 'auto',
scrollProps = {}
} = _ref;
var {
contentClassName,
content = children
} = (0, _BaseModalLayoutContext.useBaseModalLayoutContext)();
var [scrollAreaY, setScrollAreaY] = (0, _react.useState)(_ScrollableContainer.AreaY.NONE);
var {
onScrollAreaChanged
} = scrollProps;
var hideContentDividers = hideTopScrollDivider && hideBottomScrollDivider;
var handleScrollAreaChanged = (0, _react.useCallback)(_ref2 => {
var {
area,
target
} = _ref2;
if (scrollAreaY !== area.y) {
if (!hideContentDividers) {
setScrollAreaY(area.y);
}
if (onScrollAreaChanged) {
onScrollAreaChanged({
area,
target
});
}
}
}, [hideContentDividers, onScrollAreaChanged, scrollAreaY]);
var isTopDividerHidden = (0, _react.useCallback)(() => hideTopScrollDivider || scrollAreaY === _ScrollableContainer.AreaY.TOP || scrollAreaY === _ScrollableContainer.AreaY.NONE, [hideTopScrollDivider, scrollAreaY]);
var isBottomDividerHidden = (0, _react.useCallback)(() => hideBottomScrollDivider || scrollAreaY === _ScrollableContainer.AreaY.BOTTOM || scrollAreaY === _ScrollableContainer.AreaY.NONE, [hideBottomScrollDivider, scrollAreaY]);
var registerToScrollAreaChanges = !hideContentDividers || !!onScrollAreaChanged;
return content && /*#__PURE__*/_react.default.createElement("div", {
"data-hook": dataHook,
"data-hidedividers": hideContentDividers,
style: {
overflowY
},
className: (0, _ContentSt.st)(_ContentSt.classes.root, {
hideTopDivider: isTopDividerHidden(),
hideBottomDivider: isBottomDividerHidden()
}, contentClassName, className),
__self: void 0,
__source: {
fileName: _jsxFileName,
lineNumber: 61,
columnNumber: 7
}
}, !hideTopScrollDivider && /*#__PURE__*/_react.default.createElement(_Divider.default, {
className: _ContentSt.classes.topDivider,
__self: void 0,
__source: {
fileName: _jsxFileName,
lineNumber: 75,
columnNumber: 35
}
}), /*#__PURE__*/_react.default.createElement(_ScrollableContainer.default, {
style: {
overflowY
},
dataHook: _constants.dataHooks.contentWrapper,
className: _ContentSt.classes.innerContent,
onScrollAreaChanged: registerToScrollAreaChanges && handleScrollAreaChanged || null,
__self: void 0,
__source: {
fileName: _jsxFileName,
lineNumber: 76,
columnNumber: 9
}
}, content), !hideBottomScrollDivider && /*#__PURE__*/_react.default.createElement(_Divider.default, {
className: _ContentSt.classes.bottomDivider,
__self: void 0,
__source: {
fileName: _jsxFileName,
lineNumber: 87,
columnNumber: 11
}
})) || null;
};
exports.Content = Content;
Content.displayName = 'BaseModalLayout.Content';
Content.propTypes = {
/** additional css classes */
className: _propTypes.default.string,
/** data hook for testing */
dataHook: _propTypes.default.string,
/** the content you want to render in the modal, children passed directly will be treated as `content` as well */
content: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.node]),
/** whether to show divider above content (default: false)
* when set to true - top divider is never shown
* when set to false - shows top divider when scroll position is greater than 0
*/
hideTopScrollDivider: _propTypes.default.bool,
/** whether to show divider below content (default: false)
* when set to true - bottom divider is never shown
* when set to false - shows bottom divider until content is scrolled to the boottom
*/
hideBottomScrollDivider: _propTypes.default.bool,
/** Props related to the scrollable content.
*
* **onScrollAreaChanged** - A Handler for scroll area changes, will be triggered only when the user scrolls to a
* different area of the scrollable content, see signature for possible areas
* ##### Signature:
* `function({area: {y: AreaY, x: AreaX}, target: HTMLElement}) => void`
*
* `AreaY`: top | middle | bottom | none
*
* `AreaX`: start | middle | end | none (not implemented yet)
*
* **onScrollAreaChanged** - A Generic Handler for scroll changes with throttling (100ms)
* ##### Signature:
* `function({target: HTMLElement}) => void`
* */
scrollProps: _propTypes.default.shape(_ScrollableContainerCommon.ScrollableContainerCommonProps),
/**
* Sets overflow-y value
* @default auto
* */
overflowY: _propTypes.default.string
};
//# sourceMappingURL=Content.js.map