import { has , isArray , isFunc , isString } from './typeOf' ; import { on } from './event' ; import { CreateElementOptions , eventHandler , eventType , Handler , _EventListener , CreateElement , PartialAtLeastOne , } from '../types/utils' ; import { State } from '../types/store' ; import { addWatch } from '../observer/watcher' ; import { setClasses } from './attribute' ; import { SvgName } from '../types/element' ; import { resetHoverColor } from './theme' ; import { Callback } from '../types/core' ; import { objectKeys } from './objectKeys' ; function getHandler ( el , state ) { return { event ( val ) { const { themeColor } = state ; function addListener ( listener ) { if ( isArray < { name : eventType ; handler : eventHandler ; } > ( listener ) ) { listener . forEach ( ( e ) => on ( el , e . handler , e . name , state ) ) ; } else { on ( el , listener , 'click' , state ) ; } } addListener ( val ) ; if ( themeColor ) { resetHoverColor ( el , themeColor ) ; } } , children ( val , componentType ) { val . forEach ( ( child ) => el . appendChild ( createElement ( child , state , componentType ) ) ) ; } , class : ( val ) => { if ( isArray ( val ) ) { setClasses ( el , val . join ( ' ' ) ) ; } else { addWatch ( ( ) => { setClasses ( el , val ( ) ) ; } ) ; } } , style : ( val ) => { objectKeys ( val ) . forEach ( ( key ) => { const style = val [ key ] ; if ( isFunc ( style ) ) { addWatch ( ( ) => { el . style [ key ] = style ( ) ; } ) ; } else { el . style [ key ] = style as string ; } } ) ; } , text ( val ) { if ( isString ( val ) ) { el . innerText = val ; } else { addWatch ( ( ) => { el . innerText = val . call ( state ) ; } ) ; } } , hidden : ( val ) => hidden ( el , val ) , watch ( val ) { addWatch ( val ) ; } , } ; } const svgName = { monthIcon : [ 'M721.9968 979.0208l47.0528-47.104-419.94752-419.98848 419.94752-419.90144-47.05792-47.04768-419.93216 419.89632h-0.00512l-47.104 47.09888 47.04768 47.04256z' , ] , yearIcon : [ 'M176 513.7l392.73-395.44a32 32 0 0 0-45.41-45.1L108 491.3a32 32 0 0 0 0.16 45.25L523.48 949a32 32 0 1 0 45.1-45.41z' , 'M525.23 513.7L918 118.26a32 32 0 1 0-45.41-45.1L457.27 491.3a32 32 0 0 0 0.16 45.25L872.7 949a32 32 0 0 0 45.1-45.41z' , ] , } ; export function createEL ( tagName = 'div' ) { if ( has ( objectKeys ( svgName ) , tagName ) ) return createSVG ( tagName ) ; return document . createElement ( tagName ) ; } export default function createSVG ( name ) { const url = 'http://www.w3.org/2000/svg' ; const svg = document . createElementNS ( url , 'svg' ) ; svg . setAttribute ( 'viewBox' , '0 0 1024 1024' ) ; svgName [ name ] . forEach ( ( item ) => { const path = document . createElementNS ( url , 'path' ) ; path . setAttribute ( 'd' , item ) ; svg . appendChild ( path ) ; } ) ; return svg as unknown as HTMLElement ; } export function createElement ( opt , state , componentType = 'start' ) { if ( isFunc < PartialAtLeastOne < CreateElementOptions > > ( opt ) ) { return createElement ( opt ( state ) , state , componentType ) ; } const el = createEL ( opt . name ) ; const handlers = getHandler ( el , state ) ; objectKeys ( opt ) . forEach ( ( key ) => { const handler = handlers [ key ] ; if ( isFunc ( handler ) ) { handler ( opt [ key as never ] , opt . componentType ) ; } } ) ; return el ; } export function hidden ( el , vis ) { if ( ! vis ) return ; el . style . display = 'none' ; } export function appendChild ( children , parent = document . body ) { if ( isArray ( children ) ) { children . forEach ( ( child ) => parent . appendChild ( child ) ) ; } else { parent . appendChild ( children ) ; } } export function visible ( vis ) { return vis ? '' : 'none' ; }