general-assistant
Version:
General Assistant components
25 lines (24 loc) • 3.03 kB
JavaScript
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { useStore } from 'zustand';
import StoreContext from '../_store/StoreContext';
import { useContext } from 'react';
import MyIconContainer from '../IconContainer';
import MyHistory from '../History';
import classNames from 'classnames';
export default function AreaLeft() {
const dataStore = useContext(StoreContext);
const { isHorizontal, getAreaLeft, GlobalCtxs, setShowAreaLeft } = useStore(dataStore, (state) => ({
isHorizontal: state.isHorizontal,
getAreaLeft: state.getAreaLeft,
GlobalCtxs: state.GlobalCtxs,
setShowAreaLeft: state.setShowAreaLeft
}));
const _areaLeft = getAreaLeft();
const { top, center, bottom } = _areaLeft === null ? {} : _areaLeft;
const { Render, history, RenderBeforeHistory, RenderAfterHistory } = center || {};
return (_jsxs("div", { className: classNames('AreaLeftWrap', 'DS-GA-h-full DS-GA-flex DS-GA-z-[11] DS-GA-bottom-0 DS-GA-left-0', isHorizontal
? 'DS-GA-w-[330px] DS-GA-flex-row-reverse DS-GA-z-[11] DS-GA-bottom-0 DS-GA-left-0 DS-GA-animate-transLR DS-GA-bg-text-shal-9'
: 'DS-GA-w-full DS-GA-absolute DS-GA-flex-col DS-GA-z-[11] DS-GA-bottom-0 DS-GA-left-0 DS-GA-bg-text-shal-3', 'md:DS-GA-w-full md:DS-GA-absolute md:DS-GA-z-[12] md:DS-GA-flex-row-reverse md:DS-GA-bg-text-shal-3 md:DS-GA-animate-none', 'lg:DS-GA-static lg:DS-GA-w-88'), children: [_jsx("div", { className: classNames(isHorizontal ? 'DS-GA-w-[10px] DS-GA-h-full' : 'DS-GA-w-full DS-GA-h-1/4', 'md:DS-GA-grow md:DS-GA-h-full', 'lg:DS-GA-hidden'), onClick: () => setShowAreaLeft(false) }), _jsxs("div", { className: classNames('AreaLeftContentWrap', isHorizontal
? 'DS-GA-w-[320px] DS-GA-h-full DS-GA-bg-area-mode DS-GA-flex DS-GA-flex-col DS-GA-justify-between DS-GA-rounded-tr-xl DS-GA-rounded-br-xl'
: 'DS-GA-w-full DS-GA-h-3/4 DS-GA-bg-area-mode DS-GA-rounded-tl-xl DS-GA-rounded-tr-xl DS-GA-rounded-br-none DS-GA-flex DS-GA-flex-col DS-GA-justify-between DS-GA-animate-transBT', 'md:DS-GA-w-[420px] md:DS-GA-h-full md:DS-GA-rounded-none md:DS-GA-animate-transLR', 'lg:DS-GA-w-full lg:DS-GA-h-full lg:DS-GA-rounded-none lg:DS-GA-animate-none'), children: [top && _jsx(MyIconContainer, { container: top, className: 'LeftTitleWrap DS-GA-w-full DS-GA-h-18' }), typeof Render === 'function' && GlobalCtxs && _jsx(Render, { ctx: GlobalCtxs }), typeof Render !== 'function' && (_jsxs("div", { className: classNames('LeftHistoryWrap DS-GA-grow DS-GA-flex DS-GA-flex-col', 'DS-GA-pt-0 DS-GA-px-3', 'md:DS-GA-pt-2 md:DS-GA-px-5'), children: [typeof RenderBeforeHistory === 'function' && GlobalCtxs && _jsx(RenderBeforeHistory, { ctx: GlobalCtxs }), history && _jsx(MyHistory, { history: history }), typeof RenderAfterHistory === 'function' && GlobalCtxs && _jsx(RenderAfterHistory, { ctx: GlobalCtxs })] })), bottom && _jsx(MyIconContainer, { container: bottom, className: 'LeftBottomWrap DS-GA-w-full DS-GA-h-18' })] })] }));
}