@vtx/modals2 2.6.19

package/src/vtx-base-modal/index.tsx

@@ -0,0 +1,230 @@
+import classNames from 'classnames';
+import React, { useEffect, useRef, useState } from 'react';
+import VtxThemeProvider from '../vtx-theme-provider';
+import { delFavoriter, fetchFavoriter, saveFavoriter } from './api';
+import './style';
+
+import closeImgDark from './imgs/close-dark.png';
+import closeImg from './imgs/close.png';
+import collect from './imgs/collect.png';
+import collectLight from './imgs/collect_light.png';
+import track from './imgs/track.png';
+import trackLight from './imgs/track_light.png';
+
+export interface TabContent {
+    [content: string]: React.ReactNode;
+}
+
+export interface TabItem {
+    key: string;
+    value?: string;
+    title?: string;
+}
+
+interface VtxBaseModalProps {
+    title: string | React.ReactElement;
+    subTitle?: string | React.ReactElement;
+    visible: boolean;
+    width?: number;
+    height?: number;
+    onCancel?: () => void;
+    contents: TabContent;
+    tabs: Array<TabItem>;
+    onTabsChange?: (key: string | undefined) => void;
+    theme?: 'light' | 'dark';
+    id?: string;
+    type?: 'car' | 'staff' | 'facility';
+}
+
+// 弹框内容最大高度：document高度-上下空80-弹框头高度
+const MAX_CONTENT_HEIGHT = document.body.clientHeight - 160 - 60;
+const VtxBaseModal: React.FC<VtxBaseModalProps> = props => {
+    const contentRef = useRef<HTMLDivElement>(null);
+    const [contentStyle, setContentStyle] = useState({});
+    const [hasCollect, setHasCollect] = useState(false);
+    const {
+        id = '',
+        type = '',
+        title,
+        visible,
+        width = 1478,
+        onCancel,
+        subTitle,
+        contents,
+        tabs,
+        // headerExt,
+        onTabsChange,
+        // className,
+        theme = 'dark',
+    } = props;
+    const [tabKey, setTabKey] = useState(tabs[0].key);
+
+    useEffect(() => {
+        if (!visible) setTabKey(tabs[0].key);
+    }, [visible]);
+
+    useEffect(() => {
+        document.body.classList.add(theme);
+        document.body.classList.add('overHiddenScroll');
+
+        return () => {
+            document.body.classList.remove(theme);
+            document.body.classList.remove('overHiddenScroll');
+        };
+    }, []);
+
+    useEffect(() => {
+        const contentHeight = contentRef.current?.clientHeight || 0;
+        if (contentHeight >= MAX_CONTENT_HEIGHT) {
+            setContentStyle({
+                maxHeight: MAX_CONTENT_HEIGHT,
+                overflow: 'auto',
+            });
+        } else {
+            setContentStyle({});
+        }
+    }, [contents[tabKey]]);
+
+    useEffect(() => {
+        if (id) {
+            fetchFavoriter(id, type).then((res: { data: string[] }) => {
+                if (res?.data?.length > 0) {
+                    setHasCollect(res.data.includes(id));
+                }
+            });
+        }
+    }, [id, type]);
+    // 收藏-取消收藏
+    const toggleCollect = () => {
+        if (hasCollect) {
+            delFavoriter(id, type).then((res: { result: number }) => {
+                if (res.result === 0) {
+                    setHasCollect(false);
+                }
+            });
+        } else {
+            saveFavoriter(id, type).then((res: { result: number }) => {
+                if (res.result === 0) {
+                    setHasCollect(true);
+                }
+            });
+        }
+    };
+    // 历史轨迹
+    const clickTract = () => {
+        if (type === 'car') {
+            window.open(
+                `${location.protocol}//${location.host}/carHistory/#/index?carId=${id}&${
+                    location.href.split('?')[1]
+                }`,
+            );
+        }
+        if (type === 'staff') {
+            window.open(
+                `${location.href.split('#')[0]}#/staffHistory?staffId=${id}&${
+                    location.href.split('?')[1]
+                }`,
+            );
+        }
+    };
+
+    const chartFontColor = theme === 'dark' ? '#fff' : '#000';
+    const chartColor = [
+        '#73A0FA',
+        '#73DEB3',
+        '#29A634',
+        '#9CBF30',
+        '#F3B825',
+        '#EB532E',
+        '#DB2C6F',
+        '#9179F2',
+    ];
+
+    return !visible ? null : (
+        <VtxThemeProvider value={{ theme, chartFontColor, chartColor }}>
+            <div className={`vtx-business-modal-wrap ${theme}`}>
+                <div className="mask"></div>
+                <div
+                    className={`vtx-business-modal ${theme}`}
+                    style={{
+                        width: width,
+                        // height: height,
+                        transform: `translateX(${-width / 2}px)`,
+                    }}
+                >
+                    <div className="vtx-business-modal--head">
+                        <div className={`vtx-business-modal--head-title ${theme}`}>
+                            <div className={`vtx-business-modal--head-title-bg ${theme}`} />
+                            {title}
+                            {subTitle}
+                        </div>
+                        <div className="vtx-business-modal--head-btns">
+                            {type && (
+                                <div
+                                    className="vtx-business-modal--head-btn"
+                                    onClick={() => {
+                                        toggleCollect();
+                                    }}
+                                >
+                                    <img src={theme === 'dark' ? collect : collectLight} />
+                                    {hasCollect ? '已收藏' : '收藏'}
+                                </div>
+                            )}
+                            {(type === 'car' || type === 'staff') && (
+                                <div
+                                    className="vtx-business-modal--head-btn"
+                                    onClick={() => {
+                                        clickTract();
+                                    }}
+                                >
+                                    <img src={theme === 'dark' ? track : trackLight} />
+                                    历史轨迹
+                                </div>
+                            )}
+                            <img
+                                className="close-btn"
+                                src={theme === 'light' ? closeImg : closeImgDark}
+                                alt=""
+                                onClick={() => onCancel && onCancel()}
+                            />
+                        </div>
+                    </div>
+                    <div className={'vtx-business-modal--content'}>
+                        <div
+                            className={
+                                tabs?.length > 1
+                                    ? 'vtx-business-modal--main'
+                                    : 'vtx-business-modal--main-notab'
+                            }
+                            ref={contentRef}
+                            style={contentStyle}
+                        >
+                            {contents[tabKey]}
+                        </div>
+                        {tabs?.length > 1 && (
+                            <div className={`vtx-modal-tabs ${theme}`}>
+                                {tabs.map((ele: TabItem, index: number) => (
+                                    <div
+                                        key={index}
+                                        className={classNames(`vtx-modal-tabs--tab`, {
+                                            [`vtx-modal-tabs--tab_active ${theme}`]:
+                                                tabKey === ele.key,
+                                        })}
+                                        onClick={() => {
+                                            setTabKey(ele.key);
+                                            onTabsChange?.(ele.key);
+                                        }}
+                                    >
+                                        {ele.title}
+                                    </div>
+                                ))}
+                            </div>
+                        )}
+                    </div>
+                </div>
+            </div>
+        </VtxThemeProvider>
+    );
+};
+
+export default VtxBaseModal;