TypeScript h.span方法代碼示例

function nutrientItem(rdi: ExtendedRdi) {
    let className = 'incomplete'
    if (rdi.pct >= 90) {
        className = 'complete'
    }
    if (rdi.max && rdi.Nutr_Val > rdi.max) {
        className = 'exceeding'
    }
    if (!rdi.max && rdi.pct >= 110) {
        className = 'possibly-exceeding'
    }

    return h.li({className}, [
        h.h2({}, [
            h.a({
                title: rdi.display_name ? rdi.NutrDesc : '',
                href: '/top-foods/index.html?nutrient-id=' + rdi.Nutr_No
            }, [rdi.display_name || rdi.NutrDesc])
        ]),
        h.span({className: 'progress-start', title: 'Percentage and amount of the nutrient covered by 100 grams of this food'}, [
            `${rdi.pct.toFixed(2)}${nbsp}%, ${rdi.Nutr_Val}${nbsp}${rdi.Units} (`,
            h.abbr({title: 'Tolerable Upper Intake Level'}, ['UL']),
            `: ${rdi.max ? `${rdi.max}\u2009${rdi.Units}` : `unkown`})`
        ]),
        h.span({className: 'progress-end', title: 'Reference Daily Intake'}, [
            rdi.value + nbsp + rdi.Units
        ]),
        h.progress({max: 100, value: rdi.pct})
    ])
}

export function foodGroupCircle(foodGroup: Partial<db.fd_group>) {
    return h.span({
        title: foodGroup.FdGrp_Desc,
        className: 'food-group-circle',
        style: {
            backgroundColor: foodGroup.color
        }
    })
}

 .map(f => h.li({}, [
     h.span({
         tabIndex: 0,
         style: {cursor: 'pointer'},
         onclick: () => showFoodDetails(f.ndb_no),
         onkeydown: evt => {
             if (evt.key === 'Enter') {
                 showFoodDetails(f.ndb_no)
             }
         }
     }, [f.long_desc])
 ]))

.then(([rdis, foodDetails]) => {
    title(foodDetails.Long_Desc)

    const extendedRdis = rdis
        .map(rdi => {
            const nutr = foodDetails.nutrients.find(nutr => nutr.NutrDesc === rdi.NutrDesc)
            return !nutr ? undefined : {
                ...rdi,
                ...nutr,
                pct: pct(nutr.Nutr_Val, rdi.value)
            }
        })
        .filter(pct => pct !== undefined) as ExtendedRdi[]

    const overallPct = pct(
        extendedRdis.map(rdi => Math.min(rdi.pct, 100)).reduce(add, 0),
        100 * extendedRdis.length
    )

    const $sortByNameBtn = h.a({
        title: 'Sort nutrients alphabetically',
        onclick: () => renderNutrientsSortedByName()
    }, [icon('sort-alpha-down')])

    const $sortByPctBtn = h.a({
        title: 'Sort nutrients by RDI coverage',
        onclick: () => renderNutrientsSortedByPct()
    }, [icon('sort-amount-down')])

    const $nutrientList = h.ul({})

    if ((localStorage.getItem('nutrients_order') || 'alpha') === 'alpha') {
        renderNutrientsSortedByName()
    } else {
        renderNutrientsSortedByPct()
    }

    const $foodDetails = h.div({className: 'food-details'}, [
        h.h1({}, [
            foodGroupCircle(foodDetails),
            foodDetails.Long_Desc,
            h.output({}, [
                h.span({title: 'Overall percentage of nutrients covered by 100 grams of this food'}, [overallPct.toFixed(2) + nbsp + '%']),
                ', ',
                100 + nbsp + 'g'
            ]),
            h.a({
                href: 'https://www.google.com/search?tbm=isch&q=' + encodeURIComponent(foodDetails.Long_Desc),
                title: 'See in Google Images'
            }, [icon('images')]),
            h.a({
                onclick: () => $findFoodsModal.open(),
                title: 'Find details of a different food'
            }, [icon('search')]),
            $sortByNameBtn,
            $sortByPctBtn,
            clear()
        ]),
        $nutrientList
    ])

    document.body.appendChild($foodDetails)

    function renderNutrientsSortedByName() {
        localStorage.setItem('nutrients_order', 'alpha')
        $sortByPctBtn.classList.remove('disabled')
        $sortByNameBtn.classList.add('disabled')
        $nutrientList.innerHTML = ''
        extendedRdis
            .sort((a, b) => {
                const nameA = a.display_name || a.NutrDesc
                const nameB = b.display_name || b.NutrDesc
                return nameA > nameB ? 1 : -1
            })
            .forEach(rdi => $nutrientList.appendChild(nutrientItem(rdi)))
    }

    function renderNutrientsSortedByPct() {
        localStorage.setItem('nutrients_order', 'pct')
        $sortByPctBtn.classList.add('disabled')
        $sortByNameBtn.classList.remove('disabled')
        $nutrientList.innerHTML = ''
        extendedRdis
            .sort((a, b) => a.pct > b.pct ? -1 : 1)
            .forEach(rdi => $nutrientList.appendChild(nutrientItem(rdi)))
    }
})