first commit

src/component/Admin/Group/EditGroup/ShareSection.tsx

@@ -0,0 +1,113 @@
+import { Box, FormControl, FormControlLabel, Switch, Typography } from "@mui/material";
+import { useCallback, useContext, useMemo, useState } from "react";
+import { useTranslation } from "react-i18next";
+import { GroupEnt } from "../../../../api/dashboard";
+import { GroupPermission } from "../../../../api/user";
+import Boolset from "../../../../util/boolset";
+import SettingForm, { ProChip } from "../../../Pages/Setting/SettingForm";
+import ProDialog from "../../Common/ProDialog";
+import { NoMarginHelperText, SettingSection, SettingSectionContent } from "../../Settings/Settings";
+import { AnonymousGroupID } from "../GroupRow";
+import { GroupSettingContext } from "./GroupSettingWrapper";
+
+const ShareSection = () => {
+  const { t } = useTranslation("dashboard");
+  const { values, setGroup } = useContext(GroupSettingContext);
+  const [proOpen, setProOpen] = useState(false);
+
+  const permission = useMemo(() => {
+    return new Boolset(values.permissions ?? "");
+  }, [values.permissions]);
+
+  const onAllowCreateShareLinkChange = useCallback(
+    (e: React.ChangeEvent<HTMLInputElement>) => {
+      setGroup((p: GroupEnt) => ({
+        ...p,
+        permissions: new Boolset(p.permissions).set(GroupPermission.share, e.target.checked).toString(),
+      }));
+    },
+    [setGroup],
+  );
+
+  const onShareDownloadChange = useCallback(
+    (e: React.ChangeEvent<HTMLInputElement>) => {
+      setGroup((p: GroupEnt) => ({
+        ...p,
+        permissions: new Boolset(p.permissions).set(GroupPermission.share_download, e.target.checked).toString(),
+      }));
+    },
+    [setGroup],
+  );
+
+  const onProClick = (e: React.MouseEvent<HTMLDivElement>) => {
+    e.stopPropagation();
+    setProOpen(true);
+  };
+
+  return (
+    <SettingSection>
+      <ProDialog open={proOpen} onClose={() => setProOpen(false)} />
+      <Typography variant="h6" gutterBottom>
+        {t("group.share")}
+      </Typography>
+      <SettingSectionContent>
+        {values?.id != AnonymousGroupID && (
+          <SettingForm lgWidth={5}>
+            <FormControl fullWidth>
+              <FormControlLabel
+                control={
+                  <Switch checked={permission.enabled(GroupPermission.share)} onChange={onAllowCreateShareLinkChange} />
+                }
+                label={t("group.allowCreateShareLink")}
+              />
+              <NoMarginHelperText>{t("group.allowCreateShareLinkDes")}</NoMarginHelperText>
+            </FormControl>
+          </SettingForm>
+        )}
+        <SettingForm lgWidth={5}>
+          <FormControl fullWidth onClick={onProClick}>
+            <FormControlLabel
+              control={<Switch checked={false} />}
+              label={
+                <Box sx={{ display: "flex", alignItems: "center" }}>
+                  {t("group.shareFree")}
+                  <ProChip size="small" label="Pro" />
+                </Box>
+              }
+            />
+            <NoMarginHelperText>{t("group.shareFreeDes")}</NoMarginHelperText>
+          </FormControl>
+        </SettingForm>
+        <SettingForm lgWidth={5}>
+          <FormControl fullWidth>
+            <FormControlLabel
+              control={
+                <Switch checked={permission.enabled(GroupPermission.share_download)} onChange={onShareDownloadChange} />
+              }
+              label={t("group.allowDownloadShare")}
+            />
+            <NoMarginHelperText>{t("group.allowDownloadShareDes")}</NoMarginHelperText>
+          </FormControl>
+        </SettingForm>
+        {values?.id != AnonymousGroupID && (
+          <SettingForm lgWidth={5}>
+            <FormControl fullWidth onClick={onProClick}>
+              <FormControlLabel
+                control={<Switch checked={false} />}
+                label={
+                  <Box sx={{ display: "flex", alignItems: "center" }}>
+                    {t("group.esclateAnonymity")}
+                    <ProChip size="small" label="Pro" />
+                  </Box>
+                }
+              />
+              <NoMarginHelperText>{t("group.esclateAnonymityDes")}</NoMarginHelperText>
+            </FormControl>
+          </SettingForm>
+        )}
+      </SettingSectionContent>
+    </SettingSection>
+  );
+};
+
+export default ShareSection;