import Button from 'react-bootstrap/Button' import InputGroup from 'react-bootstrap/InputGroup' import BootstrapForm from 'react-bootstrap/Form' import Alert from 'react-bootstrap/Alert' import { Formik, Form as FormikForm, useFormikContext, useField, FieldArray } from 'formik' import React, { useEffect, useRef, useState } from 'react' import copy from 'clipboard-copy' import Thumb from '../svgs/thumb-up-fill.svg' import { Col, Nav } from 'react-bootstrap' import Markdown from '../svgs/markdown-line.svg' import styles from './form.module.css' import Text from '../components/text' import AddIcon from '../svgs/add-fill.svg' import { mdHas } from '../lib/md' export function SubmitButton ({ children, variant, value, onClick, ...props }) { const { isSubmitting, setFieldValue } = useFormikContext() return ( ) } export function CopyInput (props) { const [copied, setCopied] = useState(false) const handleClick = () => { copy(props.placeholder) setCopied(true) setTimeout(() => setCopied(false), 1500) } return ( {copied ? : 'copy'} } {...props} /> ) } export function InputSkeleton ({ label, hint }) { return ( {label && {label}}
{hint && {hint} } ) } export function MarkdownInput ({ label, topLevel, groupClassName, onChange, setHasImgLink, ...props }) { const [tab, setTab] = useState('write') const [, meta] = useField(props) useEffect(() => { !meta.value && setTab('write') }, [meta.value]) return (
{ if (onChange) onChange(formik, e) if (setHasImgLink) { setHasImgLink(mdHas(e.target.value, ['link', 'image'])) } }} />
{tab === 'preview' && {meta.value}}
) } function FormGroup ({ className, label, children }) { return ( {label && {label}} {children} ) } function InputInner ({ prepend, append, hint, showValid, onChange, overrideValue, innerRef, storageKeyPrefix, noForm, ...props }) { const [field, meta, helpers] = noForm ? [{}, {}, {}] : useField(props) const formik = noForm ? null : useFormikContext() const storageKey = storageKeyPrefix ? storageKeyPrefix + '-' + props.name : undefined useEffect(() => { if (overrideValue) { helpers.setValue(overrideValue) if (storageKey) { localStorage.setItem(storageKey, overrideValue) } } else if (storageKey) { const draft = localStorage.getItem(storageKey) if (draft) { // for some reason we have to turn off validation to get formik to // not assume this is invalid helpers.setValue(draft, false) } } }, [overrideValue]) return ( <> {prepend && ( {prepend} )} { if (e.keyCode === 13 && (e.metaKey || e.ctrlKey)) { formik?.submitForm() } }} ref={innerRef} {...field} {...props} onChange={(e) => { field.onChange(e) if (storageKey) { localStorage.setItem(storageKey, e.target.value) } if (onChange) { onChange(formik, e) } }} isInvalid={meta.touched && meta.error} isValid={showValid && meta.initialValue !== meta.value && meta.touched && !meta.error} /> {append && ( {append} )} {meta.touched && meta.error} {hint && ( {hint} )} ) } export function Input ({ label, groupClassName, ...props }) { return ( ) } export function VariableInput ({ label, groupClassName, name, hint, max, readOnlyLen, ...props }) { return ( {({ form, ...fieldArrayHelpers }) => { const options = form.values[name] return ( <> {options.map((_, i) => (
1 ? 'optional' : undefined} /> {options.length - 1 === i && options.length !== max ? fieldArrayHelpers.push('')} /> : null}
))} ) }}
{hint && ( {hint} )}
) } export function Checkbox ({ children, label, groupClassName, hiddenLabel, extra, handleChange, inline, ...props }) { // React treats radios and checkbox inputs differently other input types, select, and textarea. // Formik does this too! When you specify `type` to useField(), it will // return the correct bag of props for you const [field] = useField({ ...props, type: 'checkbox' }) return ( {hiddenLabel && {label}} { field.onChange(e) handleChange && handleChange(e.target.checked) }} />
{label}
{extra &&
{extra}
}
) } export function Form ({ initial, schema, onSubmit, children, initialError, validateImmediately, storageKeyPrefix, ...props }) { const [error, setError] = useState(initialError) return ( onSubmit && onSubmit(values, ...args).then(() => { if (!storageKeyPrefix) return Object.keys(values).forEach(v => { localStorage.removeItem(storageKeyPrefix + '-' + v) if (Array.isArray(values[v])) { values[v].forEach( (_, i) => localStorage.removeItem(`${storageKeyPrefix}-${v}[${i}]`)) } } ) }).catch(e => setError(e.message || e))} > {error && setError(undefined)} dismissible>{error}} {storageKeyPrefix ? React.Children.map(children, (child) => { // if child has a type that's a string, it's a dom element and can't get a prop if (child) { let childProps = {} if (typeof child.type !== 'string') { childProps = { storageKeyPrefix } } return React.cloneElement(child, childProps) } }) : children} ) } export function SyncForm ({ initial, schema, children, action, ...props }) { const ref = useRef(null) return ( ref.current.submit()} > {props => (
{children}
)}
) }