@vtx/modals2 2.6.20 → 2.6.21

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

@@ -1,230 +0,0 @@
-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;