lole-ui
Version:
React UI Component which like a love letter
144 lines (143 loc) • 8 kB
JavaScript
var __assign = (this && this.__assign) || function () {
__assign = Object.assign || function(t) {
for (var s, i = 1, n = arguments.length; i < n; i++) {
s = arguments[i];
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
t[p] = s[p];
}
return t;
};
return __assign.apply(this, arguments);
};
var __rest = (this && this.__rest) || function (s, e) {
var t = {};
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
t[p] = s[p];
if (s != null && typeof Object.getOwnPropertySymbols === "function")
for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
t[p[i]] = s[p[i]];
}
return t;
};
import React, { createContext, useContext, useEffect, useRef, useState } from "react";
import classNames from "classnames";
import omit from 'rc-util/lib/omit';
import { LayoutContext } from "./layout";
import Icon from "../Icon/icon";
import isNumeric from "../utils/isNumeric";
var dimensionMaxMap = {
xs: '479.98px',
sm: '575.98px',
md: '767.98px',
lg: '991.98px',
xl: '1199.98px',
xxl: '1599.98px',
};
export var SiderContext = createContext({});
var generateId = (function () {
var i = 0;
return function (prefix) {
if (prefix === void 0) { prefix = ''; }
i += 1;
return "".concat(prefix).concat(i);
};
})();
var Sider = React.forwardRef(function (_a, ref) {
var customizePrefixCls = _a.prefixCls, className = _a.className, trigger = _a.trigger, children = _a.children, _b = _a.defaultCollapsed, defaultCollapsed = _b === void 0 ? false : _b, _c = _a.theme, theme = _c === void 0 ? 'dark' : _c, _d = _a.style, style = _d === void 0 ? {} : _d, _e = _a.collapsible, collapsible = _e === void 0 ? false : _e, _f = _a.reverseArrow, reverseArrow = _f === void 0 ? false : _f, _g = _a.width, width = _g === void 0 ? 200 : _g, _h = _a.collapsedWidth, collapsedWidth = _h === void 0 ? 80 : _h, zeroWidthTriggerStyle = _a.zeroWidthTriggerStyle, breakpoint = _a.breakpoint, onCollapse = _a.onCollapse, onBreakpoint = _a.onBreakpoint, props = __rest(_a, ["prefixCls", "className", "trigger", "children", "defaultCollapsed", "theme", "style", "collapsible", "reverseArrow", "width", "collapsedWidth", "zeroWidthTriggerStyle", "breakpoint", "onCollapse", "onBreakpoint"]);
var siderHook = useContext(LayoutContext).siderHook;
var _j = useState('collapsed' in props ? props.collapsed : defaultCollapsed), collapsed = _j[0], setCollapsed = _j[1];
var _k = useState(false), below = _k[0], setBelow = _k[1];
useEffect(function () {
if ('collapsed' in props) {
setCollapsed(props.collapsed);
}
}, [props.collapsed]);
var handleSetCollapsed = function (value, type) {
if (!('collapsed' in props)) {
setCollapsed(value);
}
onCollapse === null || onCollapse === void 0 ? void 0 : onCollapse(value, type);
};
// ========================= Responsive =========================
var responsiveHandlerRef = useRef();
responsiveHandlerRef.current = function (mql) {
setBelow(mql.matches);
onBreakpoint === null || onBreakpoint === void 0 ? void 0 : onBreakpoint(mql.matches);
if (collapsed !== mql.matches) {
handleSetCollapsed(mql.matches, 'responsive');
}
};
useEffect(function () {
function responsiveHandler(mql) {
return responsiveHandlerRef.current(mql);
}
var mql;
if (typeof window !== 'undefined') {
var matchMedia_1 = window.matchMedia;
if (matchMedia_1 && breakpoint && breakpoint in dimensionMaxMap) {
mql = matchMedia_1("(max-width: ".concat(dimensionMaxMap[breakpoint], ")"));
try {
mql.addEventListener('change', responsiveHandler);
}
catch (error) {
mql.addListener(responsiveHandler);
}
responsiveHandler(mql);
}
}
return function () {
try {
mql === null || mql === void 0 ? void 0 : mql.removeEventListener('change', responsiveHandler);
}
catch (error) {
mql === null || mql === void 0 ? void 0 : mql.removeListener(responsiveHandler);
}
};
}, [breakpoint]); // in order to accept dynamic 'breakpoint' property, we need to add 'breakpoint' into dependency array.
useEffect(function () {
var uniqueId = generateId('xiOn-sider-');
siderHook.addSider(uniqueId);
return function () { return siderHook.removeSider(uniqueId); };
}, []);
var toggle = function () {
handleSetCollapsed(!collapsed, 'clickTrigger');
};
//const { getPrefixCls } = useContext(ConfigContext);
var renderSider = function () {
//const prefixCls = getPrefixCls('layout-sider', customizePrefixCls);
var _a;
var prefixCls = customizePrefixCls ? customizePrefixCls : 'xiOn-layout-sider';
var divProps = omit(props, ['collapsed']);
var rawWidth = collapsed ? collapsedWidth : width;
// use "px" as fallback unit for width
var siderWidth = isNumeric(rawWidth) ? "".concat(rawWidth, "px") : String(rawWidth);
// special trigger when collapsedWidth == 0
var zeroWidthTrigger = parseFloat(String(collapsedWidth || 0)) === 0 ? (React.createElement("span", { onClick: toggle, className: classNames("".concat(prefixCls, "-zero-width-trigger"), "".concat(prefixCls, "-zero-width-trigger-").concat(reverseArrow ? 'right' : 'left')), style: zeroWidthTriggerStyle }, trigger || React.createElement(Icon, { icon: 'search', theme: 'primary' }))) : null;
var iconObj = {
expanded: reverseArrow ? React.createElement(Icon, { icon: 'arrow-right', theme: 'primary' }) : React.createElement(Icon, { icon: 'arrow-left', theme: 'primary' }),
collapsed: reverseArrow ? React.createElement(Icon, { icon: 'arrow-left', theme: 'primary' }) : React.createElement(Icon, { icon: 'arrow-right', theme: 'primary' }),
};
var status = collapsed ? 'collapsed' : 'expanded';
var defaultTrigger = iconObj[status];
var triggerDom = trigger !== null
? zeroWidthTrigger || (React.createElement("div", { className: "".concat(prefixCls, "-trigger"), onClick: toggle, style: { width: siderWidth } }, trigger || defaultTrigger))
: null;
var divStyle = __assign(__assign({}, style), { flex: "0 0 ".concat(siderWidth), maxWidth: siderWidth, minWidth: siderWidth, width: siderWidth });
var siderCls = classNames(prefixCls, "".concat(prefixCls, "-").concat(theme), (_a = {},
_a["".concat(prefixCls, "-collapsed")] = !!collapsed,
_a["".concat(prefixCls, "-has-trigger")] = collapsible && trigger !== null && !zeroWidthTrigger,
_a["".concat(prefixCls, "-below")] = below,
_a["".concat(prefixCls, "-zero-width")] = parseFloat(siderWidth) === 0,
_a), className);
return (React.createElement("aside", __assign({ className: siderCls }, divProps, { style: divStyle, ref: ref }),
React.createElement("div", { className: "".concat(prefixCls, "-children") }, children),
collapsible || (below && zeroWidthTrigger) ? triggerDom : null));
};
var contextValue = React.useMemo(function () { return ({
siderCollapsed: collapsed,
}); }, [collapsed]);
return React.createElement(SiderContext.Provider, { value: contextValue }, renderSider());
});
Sider.displayName = 'Sider';
export default Sider;