Merge pull request #233 from gvorbeck/name-change

Name change
gvorbeck · Jan 29, 2024 · 7e6901c · 7e6901c
2 parents 2e2cf9e + 636f3ed
commit 7e6901c
Show file tree

Hide file tree

Showing 6 changed files with 59 additions and 17 deletions.
diff --git a/package.json b/package.json
@@ -4,7 +4,7 @@
   "bfrpgEdition": "4th",
   "bfrpgRelease": "137",
   "license": "CC BY-SA 4.0",
-  "version": "2.0.9",
+  "version": "2.1.0",
   "private": true,
   "type": "module",
   "scripts": {

diff --git a/src/components/AvatarPicker/AvatarPicker.tsx b/src/components/AvatarPicker/AvatarPicker.tsx
@@ -115,7 +115,7 @@ export default function AvatarPicker({
             fileList={fileList}
             onPreview={handlePreview}
             onChange={handleChange}
-            className="mt-4 cursor-pointer"
+            className="cursor-pointer"
           >
             {fileList.length >= 1 ? null : uploadButton}
           </Upload>

diff --git a/src/components/PageCharacterSheet/Hero/Hero.tsx b/src/components/PageCharacterSheet/Hero/Hero.tsx
@@ -15,6 +15,8 @@ import { CharacterDataContext } from "@/contexts/CharacterContext";
 import { classSplit } from "@/support/classSupport";
 import ExperiencePoints from "./ExperiencePoints/ExperiencePoints";
 import HeroAvatar from "./HeroAvatar/HeroAvatar";
+import Section from "../Section/Section";
+import StepDetails from "@/components/PageNewCharacter/StepDetails/StepDetails";
 
 interface HeroProps {
   setModalIsOpen: (modalIsOpen: boolean) => void;
@@ -32,6 +34,7 @@ const Hero: React.FC<HeroProps & React.ComponentPropsWithRef<"div">> = ({
 }) => {
   const { character, setCharacter, userIsOwner, uid, id } =
     React.useContext(CharacterDataContext);
+  const [newNameInput, setNewNameInput] = React.useState(character.name);
 
   const heroClassNames = classNames("w-full", className);
 
@@ -57,6 +60,16 @@ const Hero: React.FC<HeroProps & React.ComponentPropsWithRef<"div">> = ({
     { key: "3", label: "Class", children: classArr.join(", ") },
   ];
 
+  React.useEffect(() => {
+    setNewNameInput(character.name);
+  }, [character.name]);
+
+  React.useEffect(
+    () => setCharacter({ ...character, name: newNameInput }),
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [newNameInput],
+  );
+
   return (
     <>
       <Flex className={heroClassNames} gap={16} vertical>
@@ -70,12 +83,26 @@ const Hero: React.FC<HeroProps & React.ComponentPropsWithRef<"div">> = ({
           setCharacter={setCharacter}
         />
         {/* Name */}
-        <Typography.Title
-          level={2}
-          className="text-center m-0 leading-none font-enchant text-5xl tracking-wide w-full"
-        >
-          {character.name}
-        </Typography.Title>
+        <Section
+          component={
+            <Typography.Title
+              level={2}
+              className="text-center m-0 leading-none font-enchant text-5xl tracking-wide w-full [&:hover_span]:opacity-100 [&_span]:opacity-50 [&>*]:cursor-pointer!"
+            >
+              {character.name}
+            </Typography.Title>
+          }
+          editable
+          editableComponent={
+            <StepDetails
+              character={character}
+              setCharacter={setCharacter}
+              className="mr-4"
+            />
+          }
+          className="relative"
+          editableClassName="absolute left-full"
+        />
         <Divider />
         <Flex
           gap={16}

diff --git a/src/components/PageCharacterSheet/Section/Section.tsx b/src/components/PageCharacterSheet/Section/Section.tsx
@@ -2,12 +2,14 @@ import { Button, Flex, Tooltip, Typography } from "antd";
 import React from "react";
 import HelpTooltip from "@/components/HelpTooltip/HelpTooltip";
 import { EditOutlined } from "@ant-design/icons";
+import classNames from "classnames";
 
 interface SectionProps {
   component: React.ReactNode;
-  title: string;
+  title?: string;
   titleHelpText?: string;
   editableComponent?: React.ReactNode;
+  editableClassName?: string;
   editable?: boolean;
 }
 
@@ -18,8 +20,10 @@ const Section: React.FC<SectionProps & React.ComponentPropsWithRef<"div">> = ({
   titleHelpText,
   editable,
   editableComponent,
+  editableClassName,
 }) => {
   const [isEditing, setIsEditing] = React.useState<boolean>(false);
+  const editOutlinedÇlassNames = classNames("shadow-none", editableClassName);
 
   const handleEditClick = () => {
     const editing = !isEditing;
@@ -29,16 +33,18 @@ const Section: React.FC<SectionProps & React.ComponentPropsWithRef<"div">> = ({
   return (
     <Flex vertical className={className}>
       <Flex gap={16} align="baseline">
-        <Typography.Title level={3} className="mt-0 leading-none">
-          {title}
-        </Typography.Title>
+        {title && (
+          <Typography.Title level={3} className="mt-0 leading-none">
+            {title}
+          </Typography.Title>
+        )}
         {editable && (
           <Tooltip title={isEditing ? "Save" : "Edit"}>
             <Button
               type={isEditing ? "primary" : "link"}
               icon={<EditOutlined className="cursor" />}
               onClick={handleEditClick}
-              className="shadow-none"
+              className={editOutlinedÇlassNames}
             />
           </Tooltip>
         )}

diff --git a/src/components/PageNewCharacter/StepDetails/StepDetails.tsx b/src/components/PageNewCharacter/StepDetails/StepDetails.tsx
@@ -7,24 +7,27 @@ import { CharData } from "@/data/definitions";
 interface StepDetailsProps {
   character: CharData;
   setCharacter: (character: CharData) => void;
+  newCharacter?: boolean;
 }
 
 const StepDetails: React.FC<
   StepDetailsProps & React.ComponentPropsWithRef<"div">
-> = ({ className, character, setCharacter }) => {
+> = ({ className, character, setCharacter, newCharacter }) => {
   const handleNameChange = (event: React.ChangeEvent<HTMLInputElement>) => {
     const cleanInput = DOMPurify.sanitize(event.target.value);
     setCharacter({ ...character, name: cleanInput });
   };
 
   return (
-    <Flex vertical className={className}>
+    <Flex vertical className={className} gap={16}>
       <Input
         value={character.name}
         onChange={handleNameChange}
         placeholder="Name"
       />
-      <AvatarPicker character={character} setCharacter={setCharacter} />
+      {newCharacter && (
+        <AvatarPicker character={character} setCharacter={setCharacter} />
+      )}
     </Flex>
   );
 };

diff --git a/src/support/pageNewCharacterSupport.tsx b/src/support/pageNewCharacterSupport.tsx
@@ -89,7 +89,13 @@ export const getStepsItems = (
     title: "Name",
     fulltitle: "Name Your Character",
     description: newCharacterStepDescriptions.name,
-    content: <StepDetails character={character} setCharacter={setCharacter} />,
+    content: (
+      <StepDetails
+        character={character}
+        setCharacter={setCharacter}
+        newCharacter
+      />
+    ),
   },
 ];