Update EditPartyModal

* Directly adds shadow code from DialogHeader since this dialog behaves slightly differently. In the future, we'd like to reconcile this so that the code only appears once
* Changes rendering functions to be properties
* Add DialogHeader and DialogFooter
* Implement Textarea component instead of raw textarea
* Removed unused code

components/party/EditPartyModal/index.module.scss

@@ -1,56 +1,39 @@
-.EditTeam.DialogContent {
+.segmentedControlWrapper {
-  min-height: 80vh;
-
-  .Container.Scrollable {
-    height: 100%;
   display: flex;
-    flex-direction: column;
+  align-items: center;
-    flex-grow: 1;
+  justify-content: center;
+  padding: $unit 0;
 }
 
-  .Content {
+.content {
   display: flex;
   flex-direction: column;
   flex-grow: 1;
   gap: $unit-2x;
-  }
+  height: 100%;
+  overflow: hidden;
 
-  .Fields {
+  .fields {
     display: flex;
     flex-direction: column;
     flex-grow: 1;
     gap: $unit;
+    padding: 0 $unit-4x;
+    overflow: hidden;
+
+    &.scrollable {
+      overflow-y: auto;
+    }
+  }
 }
 
-  .ExtraNotice {
+.extraNotice {
   background: var(--extra-purple-bg);
   border-radius: $input-corner;
-    color: var(--extra-purple-text);
   font-weight: $medium;
   padding: $unit-2x;
-  }
 
-  .DescriptionField {
+  p {
-    display: flex;
+    color: var(--extra-purple-dark-text);
-    flex-direction: column;
-    justify-content: inherit;
-    gap: $unit;
-    flex-grow: 1;
-
-    .Left {
-      flex-grow: 0;
-    }
-
-    textarea.Input {
-      flex-grow: 1;
-
-      &::placeholder {
-        color: var(--text-secondary);
-      }
-    }
-
-    .Image {
-      display: none;
-    }
   }
 }

components/party/EditPartyModal/index.tsx

@@ -2,16 +2,14 @@ import React, { useEffect, useRef, useState } from 'react'
 import { useRouter } from 'next/router'
 import { useSnapshot } from 'valtio'
 import { useTranslation } from 'react-i18next'
+import classNames from 'classnames'
+import debounce from 'lodash.debounce'
 
-import {
+import { Dialog, DialogTrigger } from '~components/common/Dialog'
-  Dialog,
+import DialogHeader from '~components/common/DialogHeader'
-  DialogTrigger,
+import DialogFooter from '~components/common/DialogFooter'
-  DialogClose,
-  DialogTitle,
-} from '~components/common/Dialog'
 import DialogContent from '~components/common/DialogContent'
 import Button from '~components/common/Button'
-import CharLimitedFieldset from '~components/common/CharLimitedFieldset'
 import DurationInput from '~components/common/DurationInput'
 import InputTableField from '~components/common/InputTableField'
 import RaidCombobox from '~components/raids/RaidCombobox'
@@ -19,6 +17,7 @@ import SegmentedControl from '~components/common/SegmentedControl'
 import Segment from '~components/common/Segment'
 import SwitchTableField from '~components/common/SwitchTableField'
 import TableField from '~components/common/TableField'
+import Textarea from '~components/common/Textarea'
 
 import type { DetailsObject } from 'types'
 import type { DialogProps } from '@radix-ui/react-dialog'
@@ -26,8 +25,8 @@ import type { DialogProps } from '@radix-ui/react-dialog'
 import { appState } from '~utils/appState'
 
 import CheckIcon from '~public/icons/Check.svg'
-import CrossIcon from '~public/icons/Cross.svg'
 import styles from './index.module.scss'
+import Input from '~components/common/Input'
 
 interface Props extends DialogProps {
   party?: Party
@@ -46,8 +45,9 @@ const EditPartyModal = ({ updateCallback, ...props }: Props) => {
 
   // Refs
   const headerRef = React.createRef<HTMLDivElement>()
+  const topContainerRef = React.createRef<HTMLDivElement>()
   const footerRef = React.createRef<HTMLDivElement>()
-  const descriptionInput = useRef<HTMLTextAreaElement>(null)
+  const descriptionInput = useRef<HTMLDivElement>(null)
 
   // States: Component
   const [open, setOpen] = useState(false)
@@ -72,6 +72,12 @@ const EditPartyModal = ({ updateCallback, ...props }: Props) => {
   const [turnCount, setTurnCount] = useState<number | undefined>(undefined)
   const [clearTime, setClearTime] = useState(0)
 
+  // Classes
+  const fieldsClasses = classNames({
+    [styles.fields]: true,
+    [styles.scrollable]: currentSegment === 1,
+  })
+
   // Hooks
   useEffect(() => {
     persistFromState()
@@ -152,14 +158,9 @@ const EditPartyModal = ({ updateCallback, ...props }: Props) => {
     if (!isNaN(numericalValue)) setChainCount(numericalValue)
   }
 
-  function handleTextAreaChanged(
+  function handleTextAreaChanged(event: React.ChangeEvent<HTMLDivElement>) {
-    event: React.ChangeEvent<HTMLTextAreaElement>
-  ) {
     event.preventDefault()
-
-    const { name, value } = event.target
     let newErrors = errors
-
     setErrors(newErrors)
   }
 
@@ -172,6 +173,101 @@ const EditPartyModal = ({ updateCallback, ...props }: Props) => {
     }
   }
 
+  // Handlers
+  function handleScroll(event: React.UIEvent<HTMLDivElement, UIEvent>) {
+    const scrollTop = event.currentTarget.scrollTop
+    const scrollHeight = event.currentTarget.scrollHeight
+    const clientHeight = event.currentTarget.clientHeight
+
+    if (topContainerRef && topContainerRef.current)
+      manipulateHeaderShadow(topContainerRef.current, scrollTop)
+
+    if (footerRef && footerRef.current)
+      manipulateFooterShadow(
+        footerRef.current,
+        scrollTop,
+        scrollHeight,
+        clientHeight
+      )
+  }
+
+  function manipulateHeaderShadow(header: HTMLDivElement, scrollTop: number) {
+    const boxShadowBase = '0 2px 8px'
+    const maxValue = 50
+
+    if (scrollTop >= 0) {
+      const input = scrollTop > maxValue ? maxValue : scrollTop
+
+      const boxShadowOpacity = mapRange(input, 0, maxValue, 0.0, 0.16)
+      const borderOpacity = mapRange(input, 0, maxValue, 0.0, 0.24)
+
+      header.style.boxShadow = `${boxShadowBase} rgba(0, 0, 0, ${boxShadowOpacity})`
+      header.style.borderBottomColor = `rgba(0, 0, 0, ${borderOpacity})`
+    }
+  }
+
+  function manipulateFooterShadow(
+    footer: HTMLDivElement,
+    scrollTop: number,
+    scrollHeight: number,
+    clientHeight: number
+  ) {
+    const boxShadowBase = '0 -2px 8px'
+    const minValue = scrollHeight - 200
+    const currentScroll = scrollTop + clientHeight
+
+    if (currentScroll >= minValue) {
+      const input = currentScroll < minValue ? minValue : currentScroll
+
+      const boxShadowOpacity = mapRange(
+        input,
+        minValue,
+        scrollHeight,
+        0.16,
+        0.0
+      )
+      const borderOpacity = mapRange(input, minValue, scrollHeight, 0.24, 0.0)
+
+      footer.style.boxShadow = `${boxShadowBase} rgba(0, 0, 0, ${boxShadowOpacity})`
+      footer.style.borderTopColor = `rgba(0, 0, 0, ${borderOpacity})`
+    }
+  }
+
+  const calculateFooterShadow = debounce(() => {
+    const boxShadowBase = '0 -2px 8px'
+    const scrollable = document.querySelector(`.${styles.scrollValue}`)
+    const footer = footerRef
+
+    if (footer && footer.current) {
+      if (scrollable && scrollable.clientHeight >= scrollable.scrollHeight) {
+        footer.current.style.boxShadow = `${boxShadowBase} rgba(0, 0, 0, 0)`
+        footer.current.style.borderTopColor = `rgba(0, 0, 0, 0)`
+      } else {
+        footer.current.style.boxShadow = `${boxShadowBase} rgba(0, 0, 0, 0.16)`
+        footer.current.style.borderTopColor = `rgba(0, 0, 0, 0.24)`
+      }
+    }
+  }, 100)
+
+  useEffect(() => {
+    window.addEventListener('resize', calculateFooterShadow)
+    calculateFooterShadow()
+
+    return () => {
+      window.removeEventListener('resize', calculateFooterShadow)
+    }
+  }, [calculateFooterShadow])
+
+  function mapRange(
+    value: number,
+    low1: number,
+    high1: number,
+    low2: number,
+    high2: number
+  ) {
+    return low2 + ((high2 - low2) * (value - low1)) / (high1 - low1)
+  }
+
   // Methods: Data methods
   function persistFromState() {
     if (!party) return
@@ -189,7 +285,7 @@ const EditPartyModal = ({ updateCallback, ...props }: Props) => {
   }
 
   function updateDetails(event: React.MouseEvent) {
-    const descriptionValue = descriptionInput.current?.value
+    const descriptionValue = descriptionInput.current?.innerHTML
     const details: DetailsObject = {
       fullAuto: fullAuto,
       autoGuard: autoGuard,
@@ -210,8 +306,8 @@ const EditPartyModal = ({ updateCallback, ...props }: Props) => {
   }
 
   // Methods: Rendering methods
-  const segmentedControl = () => {
+  const segmentedControl = (
-    return (
+    <nav className={styles.segmentedControlWrapper} ref={topContainerRef}>
       <SegmentedControl blended={true}>
         <Segment
           groupName="edit_nav"
@@ -232,66 +328,56 @@ const EditPartyModal = ({ updateCallback, ...props }: Props) => {
           {t('modals.edit_team.segments.properties')}
         </Segment>
       </SegmentedControl>
+    </nav>
   )
-  }
 
-  const nameField = () => {
+  const nameField = (
-    return (
+    <Input
-      <CharLimitedFieldset
+      name="name"
-        className="Bound"
-        fieldName="name"
       placeholder="Name your team"
+      autoFocus={true}
       value={name}
-        limit={50}
+      maxLength={50}
+      bound={true}
+      showCounter={true}
       onChange={handleInputChange}
-        error={errors.name}
     />
   )
-  }
 
-  const raidField = () => {
+  const raidField = (
-    return (
     <RaidCombobox
       showAllRaidsOption={false}
       currentRaid={raid}
       onChange={receiveRaid}
     />
   )
-  }
 
   const extraNotice = () => {
     if (extra) {
       return (
-        <div className="ExtraNotice">
+        <div className={styles.extraNotice}>
-          <span className="ExtraNoticeText">
+          <p>
             {raid && raid.group.guidebooks
               ? t('modals.edit_team.extra_notice_guidebooks')
               : t('modals.edit_team.extra_notice')}
-          </span>
+          </p>
         </div>
       )
     }
   }
 
-  const descriptionField = () => {
+  const descriptionField = (
-    return (
+    <Textarea
-      <div className="DescriptionField">
+      className="editParty"
-        <textarea
+      bound={true}
-          className="Input Bound"
+      placeholder={t('modals.edit_team.placeholders.description')}
-          name="description"
+      value={description}
-          placeholder={
+      onInput={handleTextAreaChanged}
-            'Write your notes here\n\n\nWatch out for the 50% trigger!\nMake sure to click Fediel’s 3 first\nGood luck with RNG!'
-          }
-          onChange={handleTextAreaChanged}
       ref={descriptionInput}
-          defaultValue={description}
     />
-      </div>
   )
-  }
 
-  const chargeAttackField = () => {
+  const chargeAttackField = (
-    return (
     <SwitchTableField
       name="charge_attack"
       label={t('modals.edit_team.labels.charge_attack')}
@@ -299,10 +385,8 @@ const EditPartyModal = ({ updateCallback, ...props }: Props) => {
       onValueChange={handleChargeAttackChanged}
     />
   )
-  }
 
-  const fullAutoField = () => {
+  const fullAutoField = (
-    return (
     <SwitchTableField
       name="full_auto"
       label={t('modals.edit_team.labels.full_auto')}
@@ -310,10 +394,8 @@ const EditPartyModal = ({ updateCallback, ...props }: Props) => {
       onValueChange={handleFullAutoChanged}
     />
   )
-  }
 
-  const autoGuardField = () => {
+  const autoGuardField = (
-    return (
     <SwitchTableField
       name="auto_guard"
       label={t('modals.edit_team.labels.auto_guard')}
@@ -321,10 +403,8 @@ const EditPartyModal = ({ updateCallback, ...props }: Props) => {
       onValueChange={handleAutoGuardChanged}
     />
   )
-  }
 
-  const autoSummonField = () => {
+  const autoSummonField = (
-    return (
     <SwitchTableField
       name="auto_summon"
       label={t('modals.edit_team.labels.auto_summon')}
@@ -332,10 +412,8 @@ const EditPartyModal = ({ updateCallback, ...props }: Props) => {
       onValueChange={handleAutoSummonChanged}
     />
   )
-  }
 
-  const extraField = () => {
+  const extraField = (
-    return (
     <SwitchTableField
       name="extra"
       className="Extra"
@@ -346,30 +424,25 @@ const EditPartyModal = ({ updateCallback, ...props }: Props) => {
       onValueChange={handleExtraChanged}
     />
   )
-  }
 
-  const clearTimeField = () => {
+  const clearTimeField = (
-    return (
     <TableField
-        className="Numeric"
       name="clear_time"
       label={t('modals.edit_team.labels.clear_time')}
     >
       <DurationInput
         name="clear_time"
-          className="Bound"
+        bound={true}
         value={clearTime}
         onValueChange={(value: number) => handleClearTimeChanged(value)}
       />
     </TableField>
   )
-  }
 
-  const turnCountField = () => {
+  const turnCountField = (
-    return (
     <InputTableField
       name="turn_count"
-        className="Numeric"
+      className="number"
       label={t('modals.edit_team.labels.turn_count')}
       placeholder="0"
       type="number"
@@ -377,13 +450,11 @@ const EditPartyModal = ({ updateCallback, ...props }: Props) => {
       onValueChange={handleTurnCountChanged}
     />
   )
-  }
 
-  const buttonCountField = () => {
+  const buttonCountField = (
-    return (
     <InputTableField
       name="button_count"
-        className="Numeric"
+      className="number"
       label={t('modals.edit_team.labels.button_count')}
       placeholder="0"
       type="number"
@@ -391,13 +462,11 @@ const EditPartyModal = ({ updateCallback, ...props }: Props) => {
       onValueChange={handleButtonCountChanged}
     />
   )
-  }
 
-  const chainCountField = () => {
+  const chainCountField = (
-    return (
     <InputTableField
       name="chain_count"
-        className="Numeric"
+      className="number"
       label={t('modals.edit_team.labels.chain_count')}
       placeholder="0"
       type="number"
@@ -405,81 +474,68 @@ const EditPartyModal = ({ updateCallback, ...props }: Props) => {
       onValueChange={handleChainCountChanged}
     />
   )
-  }
 
-  const infoPage = () => {
+  const infoPage = (
-    return (
     <>
-        {nameField()}
+      {nameField}
-        {raidField()}
+      {raidField}
       {extraNotice()}
-        {descriptionField()}
+      {descriptionField}
     </>
   )
-  }
 
-  const propertiesPage = () => {
+  const propertiesPage = (
-    return (
     <>
-        {chargeAttackField()}
+      {chargeAttackField}
-        {fullAutoField()}
+      {fullAutoField}
-        {autoSummonField()}
+      {autoSummonField}
-        {autoGuardField()}
+      {autoGuardField}
-        {extraField()}
+      {extraField}
-        {clearTimeField()}
+      {clearTimeField}
-        {turnCountField()}
+      {turnCountField}
-        {buttonCountField()}
+      {buttonCountField}
-        {chainCountField()}
+      {chainCountField}
     </>
   )
-  }
 
   return (
     <Dialog open={open} onOpenChange={openChange}>
       <DialogTrigger asChild>{props.children}</DialogTrigger>
       <DialogContent
-        className="EditTeam"
+        className="editParty"
-        headerref={headerRef}
+        headerref={topContainerRef}
         footerref={footerRef}
         onEscapeKeyDown={onEscapeKeyDown}
         onOpenAutoFocus={onOpenAutoFocus}
       >
-        <div className="DialogHeader" ref={headerRef}>
+        <DialogHeader title={t('modals.edit_team.title')} ref={headerRef} />
-          <div className="DialogTop">
+
-            <DialogTitle className="DialogTitle">
+        <div className={styles.content}>
-              {t('modals.edit_team.title')}
+          {segmentedControl}
-            </DialogTitle>
+          <div className={fieldsClasses} onScroll={handleScroll}>
+            {currentSegment === 0 && infoPage}
+            {currentSegment === 1 && propertiesPage}
           </div>
-          <DialogClose className="DialogClose" asChild>
-            <span>
-              <CrossIcon />
-            </span>
-          </DialogClose>
         </div>
 
-        <div className="Content">
+        <DialogFooter
-          {segmentedControl()}
+          ref={footerRef}
-          <div className="Fields">
+          rightElements={[
-            {currentSegment === 0 && infoPage()}
-            {currentSegment === 1 && propertiesPage()}
-          </div>
-        </div>
-        <div className="DialogFooter" ref={footerRef}>
-          <div className="Left"></div>
-          <div className="Right Buttons Spaced">
             <Button
-              contained={true}
+              bound={true}
+              key="cancel"
               text={t('buttons.cancel')}
               onClick={openChange}
-            />
+            />,
             <Button
-              contained={true}
+              bound={true}
+              key="confirm"
               rightAccessoryIcon={<CheckIcon />}
               text={t('modals.edit_team.buttons.confirm')}
               onClick={updateDetails}
+            />,
+          ]}
         />
-          </div>
-        </div>
       </DialogContent>
     </Dialog>
   )