@uiw/react-layout/cjs/Sider.js

React components that handle the overall layout of the page.

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault")["default"];
var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard")["default"];
Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.LayoutSider = void 0;
exports.randomid = randomid;
var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
var _react = _interopRequireWildcard(require("react"));
var _Layout = require("./Layout");
var _jsxRuntime = require("react/jsx-runtime");
var _excluded = ["prefixCls", "className", "style", "children", "width", "collapsedWidth", "collapsed", "addSider", "removeSider"];
function randomid() {
  return parseInt(String(Math.random() * 1e15), 10).toString(36);
}
var Sider = /*#__PURE__*/_react["default"].forwardRef(function (props, ref) {
  var _ref = props,
    _ref$prefixCls = _ref.prefixCls,
    prefixCls = _ref$prefixCls === void 0 ? 'w-layout-sider' : _ref$prefixCls,
    className = _ref.className,
    style = _ref.style,
    children = _ref.children,
    _ref$width = _ref.width,
    width = _ref$width === void 0 ? 200 : _ref$width,
    _ref$collapsedWidth = _ref.collapsedWidth,
    collapsedWidth = _ref$collapsedWidth === void 0 ? 80 : _ref$collapsedWidth,
    _ref$collapsed = _ref.collapsed,
    collapsed = _ref$collapsed === void 0 ? false : _ref$collapsed,
    addSider = _ref.addSider,
    removeSider = _ref.removeSider,
    other = (0, _objectWithoutProperties2["default"])(_ref, _excluded);
  var _useState = (0, _react.useState)("w-layout-".concat(randomid())),
    _useState2 = (0, _slicedToArray2["default"])(_useState, 1),
    sliderId = _useState2[0];
  var _useState3 = (0, _react.useState)(collapsed ? collapsedWidth : width),
    _useState4 = (0, _slicedToArray2["default"])(_useState3, 2),
    rawWidth = _useState4[0],
    setRawWidth = _useState4[1];
  (0, _react.useEffect)(function () {
    if (addSider) {
      addSider(sliderId);
    }
    return function () {
      if (removeSider) {
        removeSider(sliderId);
      }
    };
  }, []);
  (0, _react.useMemo)(function () {
    return setRawWidth(collapsed ? collapsedWidth : width);
  }, [width, collapsedWidth, collapsed]);
  var divStyle = (0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, style), {}, {
    flex: "0 0 ".concat(rawWidth),
    maxWidth: rawWidth,
    minWidth: rawWidth,
    width: rawWidth
  });
  return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", (0, _objectSpread2["default"])((0, _objectSpread2["default"])({
    ref: ref,
    className: [prefixCls, className].filter(Boolean).join(' ').trim(),
    style: divStyle
  }, other), {}, {
    children: children
  }));
});
var LayoutSider = exports.LayoutSider = /*#__PURE__*/_react["default"].forwardRef(function (props, ref) {
  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Layout.LayoutContext.Consumer, {
    children: function children(context) {
      return /*#__PURE__*/(0, _jsxRuntime.jsx)(Sider, (0, _objectSpread2["default"])((0, _objectSpread2["default"])({
        ref: ref
      }, props), context));
    }
  });
});