akanealw/misode.github.io
1
0
Fork 0
mirror of https://github.com/misode/misode.github.io.git synced 2026-04-23 07:10:41 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

Add surface rule visualizer

Browse Source
This commit is contained in:
Misode
2022-02-13 04:02:52 +01:00
parent 0cf5af8795
commit 92ac80f465
8 changed files with 76 additions and 34 deletions
Download Patch File Download Diff File Expand all files Collapse all files

14
src/app/components/BtnInput.tsx
View File

@@ -1,16 +1,19 @@
import { useEffect, useRef } from 'preact/hooks'
import { Octicon } from '.'
import { hexId } from '../Utils'
type BtnInputProps = {
icon?: keyof typeof Octicon,
label?: string,
large?: boolean,
larger?: boolean,
doSelect?: number,
value?: string,
placeholder?: string,
dataList?: string[],
onChange?: (value: string) => unknown,
}
export function BtnInput({ icon, label, large, doSelect, value, placeholder, onChange }: BtnInputProps) {
export function BtnInput({ icon, label, large, larger, doSelect, value, placeholder, dataList, onChange }: BtnInputProps) {
const onInput = onChange === undefined ? () => {} : (e: any) => {
const value = (e.target as HTMLInputElement).value
onChange?.(value)
@@ -23,9 +26,14 @@ export function BtnInput({ icon, label, large, doSelect, value, placeholder, onC
}
}, [doSelect])
return <div class={`btn btn-input ${large ? 'large-input' : ''}`} onClick={e => e.stopPropagation()}>
const dataListId = dataList && hexId()
return <div class={`btn btn-input ${large ? 'large-input' : ''} ${larger ? 'larger-input' : ''}`} onClick={e => e.stopPropagation()}>
{icon && Octicon[icon]}
{label && <span>{label}</span>}
<input ref={ref} type="text" value={value} onChange={onInput} placeholder={placeholder} />
<input ref={ref} type="text" value={value} onChange={onInput} placeholder={placeholder} list={dataListId} />
{dataList && <datalist id={dataListId}>
{dataList.map(e => <option value={e} />)}
</datalist>}
</div>
}