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

React components that handle the overall layout of the page.

import _extends from "@babel/runtime/helpers/extends";
import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/objectWithoutPropertiesLoose";
var _excluded = ["prefixCls", "className", "style", "children", "width", "collapsedWidth", "collapsed", "addSider", "removeSider"];
import React, { useEffect, useState, useMemo } from 'react';
import { LayoutContext } from "./Layout.js";
import { jsx as _jsx } from "react/jsx-runtime";
export function randomid() {
  return parseInt(String(Math.random() * 1e15), 10).toString(36);
}
var Sider = /*#__PURE__*/React.forwardRef((props, ref) => {
  var _ref = props,
    {
      prefixCls = 'w-layout-sider',
      className,
      style,
      children,
      width = 200,
      collapsedWidth = 80,
      collapsed = false,
      addSider,
      removeSider
    } = _ref,
    other = _objectWithoutPropertiesLoose(_ref, _excluded);
  var [sliderId] = useState("w-layout-" + randomid());
  var [rawWidth, setRawWidth] = useState(collapsed ? collapsedWidth : width);
  useEffect(() => {
    if (addSider) {
      addSider(sliderId);
    }
    return () => {
      if (removeSider) {
        removeSider(sliderId);
      }
    };
  }, []);
  useMemo(() => setRawWidth(collapsed ? collapsedWidth : width), [width, collapsedWidth, collapsed]);
  var divStyle = _extends({}, style, {
    flex: "0 0 " + rawWidth,
    maxWidth: rawWidth,
    minWidth: rawWidth,
    width: rawWidth
  });
  return /*#__PURE__*/_jsx("div", _extends({
    ref: ref,
    className: [prefixCls, className].filter(Boolean).join(' ').trim(),
    style: divStyle
  }, other, {
    children: children
  }));
});
export var LayoutSider = /*#__PURE__*/React.forwardRef((props, ref) => {
  return /*#__PURE__*/_jsx(LayoutContext.Consumer, {
    children: context => /*#__PURE__*/_jsx(Sider, _extends({
      ref: ref
    }, props, context))
  });
});