{"version":3,"file":"EditableRow.mjs","sources":["../../../../../../../../../../web/src/ui/b2c/screens/Passkey/EditableRow.tsx"],"sourcesContent":["import { useLingui } from '@lingui/react/macro';\nimport classNames from 'classnames';\nimport React, { useEffect, useRef } from 'react';\n\nimport Button from '../../../components/atoms/Button';\nimport Typography from '../../../components/atoms/Typography';\nimport Input from '../../../components/molecules/Input';\nimport styles from './EditableRow.module.css';\n\nexport type EditableRowState =\n  | { type: 'viewing' } //\n  | { type: 'editing'; id: string; newName: string }\n  | { type: 'deleting'; id: string };\n\nconst commonButtonProps = {\n  block: false,\n  variant: 'ghost',\n} as const;\n\ntype Props = {\n  id: string;\n  name: string;\n  className?: string;\n  state: EditableRowState;\n  updateState: (newState: EditableRowState) => void;\n  handleEdit: (id: string, newName: string) => void;\n};\n\nexport const EditableRow = ({ id, name, className, state, updateState, handleEdit }: Props) => {\n  const { t } = useLingui();\n\n  const isEditing = isEditingRow(id, state);\n  const othersEditing = state.type !== 'viewing' && state.id !== id;\n\n  const inputRef = useRef<HTMLInputElement>(null);\n  useEffect(() => {\n    if (isEditing) {\n      inputRef.current?.focus();\n    }\n  }, [isEditing]);\n\n  return (\n    <form\n      className={classNames(styles.row, className)}\n      onSubmit={(evt) => {\n        evt.preventDefault();\n        if (isEditing) {\n          handleEdit(id, state.newName);\n        }\n      }}\n      data-testid={testId(id)}\n    >\n      <div className={styles.input}>\n        {isEditing ? (\n          <Input\n            id={`passkey-name-${id}`}\n            ref={inputRef}\n            label={t({ id: 'passkey.editing.label', message: 'Passkey name' })}\n            hideLabel\n            value={isEditing ? state.newName : name}\n            onChange={(e) => {\n              if (isEditing) {\n                updateState({ ...state, newName: e.target.value });\n              }\n            }}\n          />\n        ) : (\n          <Typography color=\"muted\">{name}</Typography>\n        )}\n      </div>\n\n      {(() => {\n        if (state.type === 'deleting') return null;\n\n        if (isEditing) {\n          return (\n            <div className={styles.actions}>\n              <Button key=\"submit\" type=\"submit\" {...commonButtonProps}>\n                {t({ id: 'button.save', message: 'Save' })}\n              </Button>\n              <Button onClick={() => updateState({ type: 'viewing' })} {...commonButtonProps}>\n                {t({ id: 'button.cancel', message: 'Cancel' })}\n              </Button>\n            </div>\n          );\n        }\n\n        if (state.type === 'viewing' || othersEditing) {\n          return (\n            <div className={styles.actions}>\n              <Button\n                // key required to workaround a React/Preact issue when button type is updated on re-render\n                key=\"edit\"\n                onClick={() => updateState({ type: 'editing', id, newName: name })}\n                disabled={othersEditing}\n                {...commonButtonProps}\n              >\n                {t({ id: 'button.edit', message: 'Edit' })}\n              </Button>\n              <Button\n                onClick={() => updateState({ type: 'deleting', id })}\n                disabled={othersEditing}\n                {...commonButtonProps}\n              >\n                {t({ id: 'button.delete', message: 'Delete' })}\n              </Button>\n            </div>\n          );\n        }\n      })()}\n    </form>\n  );\n};\n\nexport function isEditingRow(\n  id: string,\n  state: EditableRowState,\n): state is Extract<EditableRowState, { type: 'editing' }> {\n  return state.type === 'editing' && state.id === id;\n}\n\nexport function testId(id: string) {\n  return `editable-row-${id}`;\n}\n"],"names":["commonButtonProps","block","variant","EditableRow","id","name","className","state","updateState","handleEdit","useLingui","isEditing","isEditingRow","othersEditing","type","inputRef","useRef","useEffect","current","focus","React","form","classNames","styles","row","onSubmit","evt","preventDefault","newName","data-testid","testId","div","input","Input","ref","label","hideLabel","value","onChange","e","target","Typography","color","actions","Button","key","onClick","disabled"],"mappings":"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"}