CoastalCommits/CoastalCommitsPastes
CoastalCommits/CoastalCommitsPastes
2
1
Fork 0
forked from CoastalCommitsArchival/github.com-MaxLeiter-drift
Code Pull requests Activity Actions

client: conditionally render formatting buttons

Browse source
This commit is contained in:
Max Leiter 2022-03-08 00:43:18 -08:00
parent dc16802ffc
commit 7f88cd9a60
No known key found for this signature in database
GPG key ID: A3512F2F2F17EBDA
1 changed files with 11 additions and 3 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

14
client/components/document/index.tsx
View file

@ -1,5 +1,5 @@
import { Button, ButtonGroup, Card, Input, Tabs, Textarea } from "@geist-ui/core" import { Button, ButtonGroup, Card, Input, Tabs, Textarea } from "@geist-ui/core"
import { ChangeEvent, FormEvent, memo, useEffect, useRef, useState } from "react" import { ChangeEvent, FormEvent, memo, useEffect, useReducer, useRef, useState } from "react"
import styles from './document.module.css' import styles from './document.module.css'
import MarkdownPreview from '../preview' import MarkdownPreview from '../preview'
import { Trash } from '@geist-ui/icons' import { Trash } from '@geist-ui/icons'
@ -16,6 +16,14 @@ type Props = {
const Document = ({ remove, editable, title, content, setTitle, setContent, initialTab = 'edit' }: Props) => { const Document = ({ remove, editable, title, content, setTitle, setContent, initialTab = 'edit' }: Props) => {
const codeEditorRef = useRef<HTMLTextAreaElement>(null) const codeEditorRef = useRef<HTMLTextAreaElement>(null)
const [tab, setTab] = useState(initialTab)
const handleTabChange = (newTab: string) => {
if (newTab === 'edit') {
codeEditorRef.current?.focus()
}
setTab(newTab as 'edit' | 'preview')
}
const removeFile = (remove?: () => void) => { const removeFile = (remove?: () => void) => {
if (remove) { if (remove) {
@ -47,8 +55,8 @@ const Document = ({ remove, editable, title, content, setTitle, setContent, init
{remove && editable && <Button type="error" ghost icon={<Trash />} auto height={'36px'} width={'36px'} onClick={() => removeFile(remove)} />} {remove && editable && <Button type="error" ghost icon={<Trash />} auto height={'36px'} width={'36px'} onClick={() => removeFile(remove)} />}
</div> </div>
<div className={styles.descriptionContainer}> <div className={styles.descriptionContainer}>
<FormattingIcons setText={setContent} textareaRef={codeEditorRef} /> {tab === 'edit' && editable && <FormattingIcons setText={setContent} textareaRef={codeEditorRef} />}
<Tabs initialValue={initialTab} hideDivider leftSpace={0}> <Tabs onChange={handleTabChange} initialValue={initialTab} hideDivider leftSpace={0}>
<Tabs.Item label={editable ? "Edit" : "Raw"} value="edit"> <Tabs.Item label={editable ? "Edit" : "Raw"} value="edit">
{/* <textarea className={styles.lineCounter} wrap='off' readOnly ref={lineNumberRef}>1.</textarea> */} {/* <textarea className={styles.lineCounter} wrap='off' readOnly ref={lineNumberRef}>1.</textarea> */}
<Textarea <Textarea