2022-07-18 03:06:39 +00:00
|
|
|
import { faPencil, faSave } from "@fortawesome/free-solid-svg-icons"
|
2022-06-11 03:08:49 +00:00
|
|
|
import { useTranslation } from "next-i18next"
|
|
|
|
import { useDefinedContext } from "../../../utils/definedContext"
|
|
|
|
import { EditingContext, EditingMode } from "../../generic/editable/base"
|
|
|
|
import { FestaIcon } from "../../generic/renderers/fontawesome"
|
|
|
|
import { Tool } from "../../generic/toolbar/tool"
|
|
|
|
|
|
|
|
|
2022-07-16 17:21:42 +00:00
|
|
|
export type ToolToggleEditingProps = {
|
2022-07-18 03:06:39 +00:00
|
|
|
save: () => void,
|
2022-07-16 17:21:42 +00:00
|
|
|
}
|
|
|
|
|
|
|
|
|
2022-06-11 03:08:49 +00:00
|
|
|
/**
|
2022-07-16 16:03:37 +00:00
|
|
|
* ToolBar {@link Tool} which switches between {@link EditingMode}s of the surrounding context.
|
2022-06-11 03:08:49 +00:00
|
|
|
*/
|
2022-07-18 03:06:39 +00:00
|
|
|
export function ToolToggleEditing({ save }: ToolToggleEditingProps) {
|
2022-06-11 03:08:49 +00:00
|
|
|
const { t } = useTranslation()
|
|
|
|
const [editing, setEditing] = useDefinedContext(EditingContext)
|
|
|
|
|
|
|
|
if (editing === EditingMode.EDIT) {
|
|
|
|
return (
|
|
|
|
<Tool
|
2022-07-18 03:06:39 +00:00
|
|
|
aria-label={t("toolToggleEditingSave")}
|
2022-07-16 17:21:42 +00:00
|
|
|
onClick={() => {
|
2022-07-18 03:06:39 +00:00
|
|
|
save()
|
2022-07-16 17:21:42 +00:00
|
|
|
setEditing(EditingMode.VIEW)
|
|
|
|
}}
|
2022-06-11 03:08:49 +00:00
|
|
|
>
|
2022-07-18 03:06:39 +00:00
|
|
|
<FestaIcon icon={faSave} />
|
2022-06-11 03:08:49 +00:00
|
|
|
</Tool>
|
|
|
|
)
|
|
|
|
}
|
|
|
|
else {
|
|
|
|
return (
|
|
|
|
<Tool
|
2022-07-18 03:06:39 +00:00
|
|
|
aria-label={t("toolToggleEditingEdit")}
|
2022-07-16 17:21:42 +00:00
|
|
|
onClick={() => {
|
|
|
|
setEditing(EditingMode.EDIT)
|
|
|
|
}}
|
2022-06-11 03:08:49 +00:00
|
|
|
>
|
|
|
|
<FestaIcon icon={faPencil} />
|
|
|
|
</Tool>
|
|
|
|
)
|
|
|
|
}
|
|
|
|
}
|