deno.land / x / nano_jsx@v0.1.0 / ui / sheet.ts
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132import { Component } from '../component.ts'import { h, render, strToHash } from '../core.ts'import { boxShadow, zIndex } from './_config.ts'import { addStylesToHead } from './_helpers.ts'
interface SheetProps { height?: string width?: string radius?: boolean mode?: 'side' | 'bottom' | 'right' | 'left' | 'custom' title?: string subtitle?: string}
export class Sheet extends Component<SheetProps> { static show(sheet: Sheet) { document.body.appendChild(render(sheet)) }
static close() { const el = document.querySelector('[class^=sheet_container]') if (el) el.remove() }
render() { const { mode = 'custom', title, subtitle } = this.props
const cssHash = strToHash(`sheet${mode}`)
const isSide = mode === 'side' || mode === 'right' || mode === 'left' const isBottom = mode === 'bottom' const fadeIn = mode === 'side' ? 'left' : mode const borderRadius = mode === 'bottom' ? 'border-radius: 4px;' : ''
let sheetStyles = ''
if (isSide) { sheetStyles += ` min-width: 256px; max-width: calc(100vw - 56px); height: 100vh;
top: 0; ${mode === 'right' ? 'right' : 'left'}: 0;` }
if (isBottom) { sheetStyles += ` width: 100vw; bottom: 0px; left: 0;` }
const styles = ` @keyframes sheet_fadein_${fadeIn}-${cssHash} { from {${fadeIn}: -100%;} to {${fadeIn}: 0;} }
.sheet_container-${cssHash} { }
.sheet_sheet-${cssHash} { overflow: scroll; max-height: 100vh;
${sheetStyles} background: white; position: fixed;
${borderRadius}
box-sizing: border-box; ${boxShadow}
z-index: ${zIndex.sheet}
animation-name: sheet_fadein_${fadeIn}-${cssHash}; animation-duration: 0.2s;
transition: top 2s, right 2s, bottom 2s, left 2s; }
.sheet_background-${cssHash} { background: #00000070; position: fixed; top: 0px; left: 0px; width: 100vw; height: 100vh; z-index: ${zIndex.sheet}
animation-name: sheet-background-fadein; animation-duration: 0.2s; }
@keyframes sheet-background-fadein { from {opacity: 0;} to {opacity: 1;} } .sheet_title-${cssHash} { padding: 20px 16px 0px; font-size: 24px; } .sheet_subtitle-${cssHash} { padding: 8px 16px; font-size: 14px; color: #000000b0; }`
addStylesToHead(styles, cssHash)
const background = h('div', { class: `sheet_background-${cssHash}`, onClick: () => { element.remove() } }) const t = title ? h('div', { class: `sheet_title-${cssHash}` }, title) : null const s = subtitle ? h('div', { class: `sheet_subtitle-${cssHash}` }, subtitle) : null
// @ts-ignore const sh = h('div', { class: `sheet_sheet-${cssHash}` }, t, s, this.props.children)
const element = h('div', { class: `sheet_container-${cssHash}` }, background, sh) as HTMLElement
return element }}
Version Info