mirror of
https://github.com/bubblecup-12/VogelSocialMedia.git
synced 2025-07-10 13:18:48 +00:00
change button functions
This commit is contained in:
parent
775ba536fa
commit
e09252bd76
7 changed files with 88 additions and 33 deletions
|
@ -1,4 +1,3 @@
|
|||
import { Button } from "@mui/material";
|
||||
import Box from "@mui/material/Box";
|
||||
import TextField from "@mui/material/TextField";
|
||||
import StyledEngineProvider from "@mui/styled-engine/StyledEngineProvider";
|
||||
|
@ -9,11 +8,20 @@ import IconButton from "@mui/material/IconButton";
|
|||
import EditSquareIcon from "@mui/icons-material/EditSquare";
|
||||
import ButtonPrimary from "./ButtonRotkehlchen";
|
||||
|
||||
export default function MultilineTextFields() {
|
||||
export default function BioTextField({ ownAccount }: { ownAccount: boolean }) {
|
||||
const [bio, setBio] = useState<string>("");
|
||||
const [oldBio, setOldbio] = useState<string>("");
|
||||
const [editMode, setEditable] = useState(false);
|
||||
|
||||
const toggleEditMode = () => {
|
||||
isEditable(!editMode);
|
||||
!editMode && setOldbio(bio);
|
||||
ownAccount && setEditable(!editMode);
|
||||
};
|
||||
|
||||
const cancleBio = () => {
|
||||
setBio(oldBio);
|
||||
setEditable(false);
|
||||
};
|
||||
const [editMode, isEditable] = useState(false);
|
||||
|
||||
return (
|
||||
<StyledEngineProvider injectFirst>
|
||||
|
@ -31,16 +39,35 @@ export default function MultilineTextFields() {
|
|||
multiline
|
||||
maxRows={4}
|
||||
disabled={!editMode}
|
||||
value={bio}
|
||||
onChange={(e) => setBio(e.target.value)}
|
||||
/>
|
||||
<IconButton aria-label="edit-bio">
|
||||
<EditSquareIcon
|
||||
className="edit-icon"
|
||||
onClick={toggleEditMode}
|
||||
style={{ display: editMode ? "none" : "block" }}
|
||||
/>
|
||||
</IconButton>
|
||||
{ownAccount && (
|
||||
<IconButton aria-label="edit-bio">
|
||||
<EditSquareIcon
|
||||
className="edit-icon"
|
||||
onClick={toggleEditMode}
|
||||
style={{ display: editMode ? "none" : "block" }}
|
||||
/>
|
||||
</IconButton>
|
||||
)}
|
||||
</div>
|
||||
{editMode && <ButtonPrimary style="primary" label={"Ok"} onClick={toggleEditMode} />}
|
||||
{ownAccount && editMode && (
|
||||
<div>
|
||||
<ButtonPrimary
|
||||
style="primary"
|
||||
label={"Save"}
|
||||
type="submit"
|
||||
onClick={toggleEditMode}
|
||||
/>
|
||||
<ButtonPrimary
|
||||
style="secondary"
|
||||
label={"Cancel"}
|
||||
type="reset"
|
||||
onClick={cancleBio}
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
</Box>
|
||||
</StyledEngineProvider>
|
||||
);
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue