/
githubmirror
/
carbon
Обзор
Документация
Войти
/
githubmirror
/
carbon
Код
Запросы
0
Пакеты
0
Релизы
0
Аналитика
Безопасность
main
components/FontSelect.js
66 строк
1 KB
Mike Fix
update font select
23 май 2021, 01:23
Не верифицирован
23 май 2021, 01:23
26064e6
Код
Авторство
О чём код?
import React from 'react' import ListSetting from './ListSetting' import ReferralLink from './ReferralLink' import { FONTS } from '../lib/constants' import { fileToDataURL as blobToUrl } from '../lib/util' const EXTENSIONS = ['.otf', '.ttf', '.woff'] const Font = ({ id, name, link }) => ( <React.Fragment> <span style={id === 'upload' ? { textAlign: 'center', width: '100%' } : { fontFamily: id }}> {name} </span> {link && ( <ReferralLink href={link}> <span style={id === 'upload' ? { textAlign: 'center', width: '100%' } : { fontFamily: id }}> Purchase </span> </ReferralLink> )} </React.Fragment> ) function FontSelect(props) { const inputEl = React.useRef(null) function onChange(id) { if (id === 'upload') { inputEl.current.click() } else { props.onChange(id) } } async function onFiles(e) { const { files } = e.target const name = files[0].name.split('.')[0] const url = await blobToUrl(files[0]) props.onUpload(name, url) } return ( <div> <ListSetting title="Font" items={[{ id: 'upload', name: 'Upload +' }, ...FONTS]} {...props} onChange={onChange} > {Font} </ListSetting> <input hidden ref={inputEl} type="file" multiple accept={EXTENSIONS.join(',')} onChange={onFiles} /> </div> ) } export default FontSelect