Function Workspace

packages/datasheet/src/pc/components/workspace/workspace.tsx:97–383

()

};

export const Workspace: React.FC<React.PropsWithChildren<unknown>> = () => {
  const dispatch = useDispatch();
  const localSize = getStorage(StorageName.SplitPos);
  const defaultSidePanelSize = localSize && localSize !== 280 ? localSize : 335;
  const editNodeId = useAppSelector((state: IReduxState) => state.catalogTree.editNodeId);
  const favoriteEditNodeId = useAppSelector((state: IReduxState) => state.catalogTree.favoriteEditNodeId);
  const userSpaceId = useAppSelector((state: IReduxState) => state.user.info!.spaceId);
  const { getTreeDataReq } = useCatalogTreeRequest();
  const { run: getTreeData } = useRequest(getTreeDataReq, { manual: true });
  const { screenIsAtMost } = useResponsive();
  const menuRef = useRef<HTMLDivElement | null>(null);
  const [templeVisible, setTempleVisible] = useState(false);
  const isMobile = screenIsAtMost(ScreenSize.md);
  const query = useQuery();
  const router = useRouter();
  const theme = useTheme();
  const spaceInfo = useAppSelector((state) => state.space.curSpaceInfo);
  const social = spaceInfo?.social;
  const nodeId = useAppSelector((state) => state.pageParams.nodeId);

  // Directory tree toggle source status, directory tree click status, sidebar switch.
  const [toggleType, setToggleType] = useState<SideBarType>(SideBarType.None);
  const [clickType, setClickType] = useState<SideBarClickType>(SideBarClickType.None);
  const [panelVisible, setPanelVisible] = useState(false);
  const [newTdbId, setNewTdbId] = useState('');
  const sideBarVisible = useAppSelector((state) => state.space.sideBarVisible);
  const showUpgradeSpaceModal = useRef(false);

  usePaymentReminder();

  useEffect(() => {
    if (showUpgradeSpaceModal.current) return;
    if (!query.get('choosePlan') || isMobile) return;
    if (!social || social?.appType === 1 || social?.appType === 2) {
      return;
    }
    showUpgradeSpaceModal.current = true;
    expandUpgradeSpace();
  });

  useEffect(() => {
    if (getEnvVariables().IS_APITABLE) return;
    if (document.querySelector('#VIKA_USAGE_WARN_MODAL')) return;
    if (!SubscribeUsageTipType || !triggerUsageAlert || !subscribeUsageCheck || !spaceInfo) return;
    if (subscribeUsageCheck.shouldAlertToUser('maxSeats', spaceInfo?.seats, true)) {
      triggerUsageAlert('maxSeats', { usage: spaceInfo?.seats, alwaysAlert: true }, SubscribeUsageTipType.Alert);
    }
  }, [nodeId, spaceInfo]);

  useMount(() => {
    if (!query.get('stripePaySuccess') || isMobile) return;
    showOrderModal({
      modalTitle: t(Strings.upgrade_success_model, { orderType: t(Strings.upgrade) }),
      modalSubTitle: () => (
        <>
          <div className={styles.desc1} style={{ marginTop: 24, fontSize: 16 }}>
            {
              <TComponent