Files
outline/app/scenes/Settings/Features.tsx

71 lines
2.3 KiB
TypeScript

import { observer } from "mobx-react";
import { BeakerIcon } from "outline-icons";
import * as React from "react";
import { Trans, useTranslation } from "react-i18next";
import { toast } from "sonner";
import { TeamPreference } from "@shared/types";
import Heading from "~/components/Heading";
import Scene from "~/components/Scene";
import Switch from "~/components/Switch";
import Text from "~/components/Text";
import useCurrentTeam from "~/hooks/useCurrentTeam";
import SettingRow from "./components/SettingRow";
function Features() {
const team = useCurrentTeam();
const { t } = useTranslation();
const handlePreferenceChange =
(inverted = false) =>
async (ev: React.ChangeEvent<HTMLInputElement>) => {
team.setPreference(
ev.target.name as TeamPreference,
inverted ? !ev.target.checked : ev.target.checked
);
await team.save();
toast.success(t("Settings saved"));
};
return (
<Scene title={t("Features")} icon={<BeakerIcon />}>
<Heading>{t("Features")}</Heading>
<Text as="p" type="secondary">
<Trans>
Manage optional and beta features. Changing these settings will affect
the experience for all members of the workspace.
</Trans>
</Text>
<SettingRow
name={TeamPreference.SeamlessEdit}
label={t("Separate editing")}
description={t(
`When enabled documents have a separate editing mode by default instead of being always editable. This setting can be overridden by user preferences.`
)}
>
<Switch
id={TeamPreference.SeamlessEdit}
name={TeamPreference.SeamlessEdit}
checked={!team.getPreference(TeamPreference.SeamlessEdit)}
onChange={handlePreferenceChange(true)}
/>
</SettingRow>
<SettingRow
name={TeamPreference.Commenting}
label={t("Commenting")}
description={t(
"When enabled team members can add comments to documents."
)}
>
<Switch
id={TeamPreference.Commenting}
name={TeamPreference.Commenting}
checked={team.getPreference(TeamPreference.Commenting)}
onChange={handlePreferenceChange(false)}
/>
</SettingRow>
</Scene>
);
}
export default observer(Features);