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
This commit is contained in:
parent
d194b54836
commit
7db02886fa
2 changed files with 306 additions and 267 deletions
|
|
@ -1,56 +1,39 @@
|
|||
.EditTeam.DialogContent {
|
||||
min-height: 80vh;
|
||||
|
||||
.Container.Scrollable {
|
||||
height: 100%;
|
||||
.segmentedControlWrapper {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
flex-grow: 1;
|
||||
align-items: center;
|
||||
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 {
|
||||
display: flex;
|
||||
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;
|
||||
}
|
||||
p {
|
||||
color: var(--extra-purple-dark-text);
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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 {
|
||||
Dialog,
|
||||
DialogTrigger,
|
||||
DialogClose,
|
||||
DialogTitle,
|
||||
} from '~components/common/Dialog'
|
||||
import { Dialog, DialogTrigger } from '~components/common/Dialog'
|
||||
import DialogHeader from '~components/common/DialogHeader'
|
||||
import DialogFooter from '~components/common/DialogFooter'
|
||||
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(
|
||||
event: React.ChangeEvent<HTMLTextAreaElement>
|
||||
) {
|
||||
function handleTextAreaChanged(event: React.ChangeEvent<HTMLDivElement>) {
|
||||
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 = () => {
|
||||
return (
|
||||
const segmentedControl = (
|
||||
<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 = () => {
|
||||
return (
|
||||
<CharLimitedFieldset
|
||||
className="Bound"
|
||||
fieldName="name"
|
||||
const nameField = (
|
||||
<Input
|
||||
name="name"
|
||||
placeholder="Name your team"
|
||||
autoFocus={true}
|
||||
value={name}
|
||||
limit={50}
|
||||
maxLength={50}
|
||||
bound={true}
|
||||
showCounter={true}
|
||||
onChange={handleInputChange}
|
||||
error={errors.name}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
const raidField = () => {
|
||||
return (
|
||||
const raidField = (
|
||||
<RaidCombobox
|
||||
showAllRaidsOption={false}
|
||||
currentRaid={raid}
|
||||
onChange={receiveRaid}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
const extraNotice = () => {
|
||||
if (extra) {
|
||||
return (
|
||||
<div className="ExtraNotice">
|
||||
<span className="ExtraNoticeText">
|
||||
<div className={styles.extraNotice}>
|
||||
<p>
|
||||
{raid && raid.group.guidebooks
|
||||
? t('modals.edit_team.extra_notice_guidebooks')
|
||||
: t('modals.edit_team.extra_notice')}
|
||||
</span>
|
||||
</p>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
}
|
||||
|
||||
const descriptionField = () => {
|
||||
return (
|
||||
<div className="DescriptionField">
|
||||
<textarea
|
||||
className="Input Bound"
|
||||
name="description"
|
||||
placeholder={
|
||||
'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}
|
||||
const descriptionField = (
|
||||
<Textarea
|
||||
className="editParty"
|
||||
bound={true}
|
||||
placeholder={t('modals.edit_team.placeholders.description')}
|
||||
value={description}
|
||||
onInput={handleTextAreaChanged}
|
||||
ref={descriptionInput}
|
||||
defaultValue={description}
|
||||
/>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
const chargeAttackField = () => {
|
||||
return (
|
||||
const chargeAttackField = (
|
||||
<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 = () => {
|
||||
return (
|
||||
const fullAutoField = (
|
||||
<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 = () => {
|
||||
return (
|
||||
const autoGuardField = (
|
||||
<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 = () => {
|
||||
return (
|
||||
const autoSummonField = (
|
||||
<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 = () => {
|
||||
return (
|
||||
const extraField = (
|
||||
<SwitchTableField
|
||||
name="extra"
|
||||
className="Extra"
|
||||
|
|
@ -346,30 +424,25 @@ const EditPartyModal = ({ updateCallback, ...props }: Props) => {
|
|||
onValueChange={handleExtraChanged}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
const clearTimeField = () => {
|
||||
return (
|
||||
const clearTimeField = (
|
||||
<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 = () => {
|
||||
return (
|
||||
const turnCountField = (
|
||||
<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 = () => {
|
||||
return (
|
||||
const buttonCountField = (
|
||||
<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 = () => {
|
||||
return (
|
||||
const chainCountField = (
|
||||
<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 = () => {
|
||||
return (
|
||||
const infoPage = (
|
||||
<>
|
||||
{nameField()}
|
||||
{raidField()}
|
||||
{nameField}
|
||||
{raidField}
|
||||
{extraNotice()}
|
||||
{descriptionField()}
|
||||
{descriptionField}
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
const propertiesPage = () => {
|
||||
return (
|
||||
const propertiesPage = (
|
||||
<>
|
||||
{chargeAttackField()}
|
||||
{fullAutoField()}
|
||||
{autoSummonField()}
|
||||
{autoGuardField()}
|
||||
{extraField()}
|
||||
{clearTimeField()}
|
||||
{turnCountField()}
|
||||
{buttonCountField()}
|
||||
{chainCountField()}
|
||||
{chargeAttackField}
|
||||
{fullAutoField}
|
||||
{autoSummonField}
|
||||
{autoGuardField}
|
||||
{extraField}
|
||||
{clearTimeField}
|
||||
{turnCountField}
|
||||
{buttonCountField}
|
||||
{chainCountField}
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
return (
|
||||
<Dialog open={open} onOpenChange={openChange}>
|
||||
<DialogTrigger asChild>{props.children}</DialogTrigger>
|
||||
<DialogContent
|
||||
className="EditTeam"
|
||||
headerref={headerRef}
|
||||
className="editParty"
|
||||
headerref={topContainerRef}
|
||||
footerref={footerRef}
|
||||
onEscapeKeyDown={onEscapeKeyDown}
|
||||
onOpenAutoFocus={onOpenAutoFocus}
|
||||
>
|
||||
<div className="DialogHeader" ref={headerRef}>
|
||||
<div className="DialogTop">
|
||||
<DialogTitle className="DialogTitle">
|
||||
{t('modals.edit_team.title')}
|
||||
</DialogTitle>
|
||||
<DialogHeader title={t('modals.edit_team.title')} ref={headerRef} />
|
||||
|
||||
<div className={styles.content}>
|
||||
{segmentedControl}
|
||||
<div className={fieldsClasses} onScroll={handleScroll}>
|
||||
{currentSegment === 0 && infoPage}
|
||||
{currentSegment === 1 && propertiesPage}
|
||||
</div>
|
||||
<DialogClose className="DialogClose" asChild>
|
||||
<span>
|
||||
<CrossIcon />
|
||||
</span>
|
||||
</DialogClose>
|
||||
</div>
|
||||
|
||||
<div className="Content">
|
||||
{segmentedControl()}
|
||||
<div className="Fields">
|
||||
{currentSegment === 0 && infoPage()}
|
||||
{currentSegment === 1 && propertiesPage()}
|
||||
</div>
|
||||
</div>
|
||||
<div className="DialogFooter" ref={footerRef}>
|
||||
<div className="Left"></div>
|
||||
<div className="Right Buttons Spaced">
|
||||
<DialogFooter
|
||||
ref={footerRef}
|
||||
rightElements={[
|
||||
<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>
|
||||
)
|
||||
|
|
|
|||
Loading…
Reference in a new issue