1
/*
2
 *  This file is part of CoCalc: Copyright © 2023 Sagemath, Inc.
3
 *  License: MS-RSL – see LICENSE.md for details
4
 */
5

6
import { theme, ThemeConfig } from "antd";
7
import { debounce } from "lodash";
8
import { ReactNode, useEffect, useMemo, useState } from "react";
9
import { useIntl } from "react-intl";
10

11
import { useTypedRedux } from "@cocalc/frontend/app-framework";
12
import { IntlMessage, isIntlMessage } from "@cocalc/frontend/i18n";
13
import { ACTIVITY_BAR_LABELS } from "@cocalc/frontend/project/page/activity-bar-consts";
14
import { COLORS } from "@cocalc/util/theme";
15
import { NARROW_THRESHOLD_PX, PageStyle } from "./top-nav-consts";
16
import useAppContext, { AppContext, AppState, calcStyle } from "./use-context";
17

18
export { AppContext, useAppContext };
19

20
export function useAppContextProvider(): AppState {
21
  const intl = useIntl();
22
  const other_settings = useTypedRedux("account", "other_settings");
23
  const showActBarLabels = other_settings.get(ACTIVITY_BAR_LABELS) ?? true;
24

25
  const [pageWidthPx, setPageWidthPx] = useState<number>(window.innerWidth);
26

27
  const [narrow, setNarrow] = useState<boolean>(isNarrow());
28

29
  function update() {
30
    setNarrow(isNarrow());
31
    if (window.innerWidth != pageWidthPx) {
32
      setPageWidthPx(window.innerWidth);
33
    }
34
  }
35

36
  useEffect(() => {
37
    const handleResize = debounce(update, 50, {
38
      leading: false,
39
      trailing: true,
40
    });
41

42
    window.addEventListener("resize", handleResize);
43
    return () => window.removeEventListener("resize", handleResize);
44
  }, []);
45

46
  // avoid updating the style on every resize event
47
  const pageStyle: PageStyle = useMemo(() => {
48
    return calcStyle(narrow);
49
  }, [narrow]);
50

51
  function formatIntl(
52
    msg: IntlMessage | ReactNode | string,
53
  ): ReactNode | string {
54
    if (isIntlMessage(msg)) {
55
      return intl.formatMessage(msg);
56
    } else {
57
      return msg;
58
    }
59
  }
60

61
  return {
62
    formatIntl,
63
    pageWidthPx,
64
    pageStyle,
65
    showActBarLabels,
66
  };
67
}
68

69
export function useAntdStyleProvider() {
70
  const other_settings = useTypedRedux("account", "other_settings");
71
  const rounded = other_settings?.get("antd_rounded", true);
72
  const animate = other_settings?.get("antd_animate", true);
73
  const branded = other_settings?.get("antd_brandcolors", false);
74
  const compact = other_settings?.get("antd_compact", false);
75

76
  const borderStyle = rounded
77
    ? undefined
78
    : { borderRadius: 0, borderRadiusLG: 0, borderRadiusSM: 0 };
79

80
  const animationStyle = animate ? undefined : { motion: false };
81

82
  const brandedColors = branded
83
    ? { colorPrimary: COLORS.COCALC_BLUE }
84
    : undefined;
85

86
  const algorithm = compact ? { algorithm: theme.compactAlgorithm } : undefined;
87

88
  const antdTheme: ThemeConfig = {
89
    ...algorithm,
90
    token: {
91
      ...brandedColors,
92
      ...borderStyle,
93
      ...animationStyle,
94
    },
95
    components: {
96
      Button: {
97
        ...brandedColors,
98
      },
99
    },
100
  };
101

102
  return {
103
    antdTheme,
104
  };
105
}
106

107
function isNarrow(): boolean {
108
  return window.innerWidth != null && window.innerWidth <= NARROW_THRESHOLD_PX;
109
}
110

111