open.source/manifold
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

replace raw checkbox w/ Checkbox component

Browse Source 
also run prettier
This commit is contained in:
Sinclair Chen 2022-07-13 16:50:08 -07:00
parent f4b7b9efd0
commit 095af10d4f
3 changed files with 18 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
web/components/checkbox.tsx
View File

@ -5,12 +5,13 @@ export function Checkbox(props: {
checked: boolean checked: boolean
toggle: (checked: boolean) => void toggle: (checked: boolean) => void
className?: string className?: string
disabled?: boolean
}) { }) {
const { label, checked, toggle, className } = props const { label, checked, toggle, className, disabled } = props
return ( return (
<div className={clsx(className, 'space-y-5')}> <div className={clsx(className, 'space-y-5')}>
<div className="relative flex items-start"> <div className="relative flex items-center">
<div className="flex h-6 items-center"> <div className="flex h-6 items-center">
<input <input
id={label} id={label}
@ -18,6 +19,7 @@ export function Checkbox(props: {
className="h-5 w-5 rounded border-gray-300 text-indigo-600 focus:ring-indigo-500" className="h-5 w-5 rounded border-gray-300 text-indigo-600 focus:ring-indigo-500"
checked={checked} checked={checked}
onChange={(e) => toggle(!e.target.checked)} onChange={(e) => toggle(!e.target.checked)}
disabled={disabled}
/> />
</div> </div>
<div className="ml-3"> <div className="ml-3">

8
web/components/editor.tsx
View File

@ -21,7 +21,7 @@ import { FileUploadButton } from './file-upload-button'
import { linkClass } from './site-link' import { linkClass } from './site-link'
const proseClass = clsx( const proseClass = clsx(
'prose prose-sm prose-p:my-0 prose-li:my-0 prose-blockquote:not-italic max-w-none', 'prose prose-sm prose-p:my-0 prose-li:my-0 prose-blockquote:not-italic max-w-none'
) )
export function useTextEditor(props: { export function useTextEditor(props: {
@ -50,7 +50,11 @@ export function useTextEditor(props: {
}), }),
CharacterCount.configure({ limit: max }), CharacterCount.configure({ limit: max }),
Image, Image,
Link.configure({ HTMLAttributes: { class: clsx('no-underline !text-indigo-700', linkClass)}}), Link.configure({
HTMLAttributes: {
class: clsx('no-underline !text-indigo-700', linkClass),
},
}),
], ],
content: defaultValue, content: defaultValue,
}) })

11
web/pages/create.tsx
View File

@ -27,6 +27,7 @@ import { track } from 'web/lib/service/analytics'
import { GroupSelector } from 'web/components/groups/group-selector' import { GroupSelector } from 'web/components/groups/group-selector'
import { User } from 'common/user' import { User } from 'common/user'
import { TextEditor, useTextEditor } from 'web/components/editor' import { TextEditor, useTextEditor } from 'web/components/editor'
import { Checkbox } from 'web/components/checkbox'
type NewQuestionParams = { type NewQuestionParams = {
groupId?: string groupId?: string
@ -294,15 +295,13 @@ export function NewContract(props: {
</Row> </Row>
{!(min !== undefined && min < 0) && ( {!(min !== undefined && min < 0) && (
<Row className="mt-1 ml-2 mb-2 items-center"> <Checkbox
<span className="mr-2 text-sm">Log scale</span>{' '} className="my-2 text-sm"
<input label="Log scale"
type="checkbox"
checked={isLogScale} checked={isLogScale}
onChange={() => setIsLogScale(!isLogScale)} toggle={() => setIsLogScale(!isLogScale)}
disabled={isSubmitting} disabled={isSubmitting}
/> />
</Row>
)} )}
{min !== undefined && max !== undefined && min >= max && ( {min !== undefined && max !== undefined && min >= max && (