Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Dynamic ControlType.Enum values on Framer X
import * as React from 'react'
import { fonts } from './fonts'
const fontNames = fontArray => {
let fontList = []
fontArray.forEach((elem, index) => fontList.push(elem.family))
return fontList
}
const filterFontsByCategory = (category: string) => {
let fontListByCategory = fonts.filter(elem => elem.category === category)
return fontNames(fontListByCategory)
}
const serifList = filterFontsByCategory('serif')
const sansSerifList = filterFontsByCategory('sans-serif')
export class GoogleFontPlus extends React.Component<Props> {
static defaultProps = {...}
static propertyControls: PropertyControls = {
text: { type: ControlType.String, title: 'Text' },
fontCategory: {
type: ControlType.SegmentedEnum,
title: 'Category',
options: ['all', 'serif', 'sans-serif', 'display', 'handwriting', 'monospace'],
optionTitles: ['All', '𝐅', '𝗙', '𝔽', 'ℱ', '𝙵']
},
fonts: {
type: ControlType.Enum,
title: 'Fonts',
options: fontNames(fonts), // Calling this filter function to bring a subset of the font.ts collection
hidden(props) {
return props.fontCategory === 'all' ? false : true
}
},
serifFonts: {
type: ControlType.Enum,
title: '↳ Serif',
options: serifList, // Calling this filter function to bring a subset of the font.ts collection
hidden(props) {
return props.fontCategory === 'serif' ? false : true
}
},
sansSerifFonts: {
type: ControlType.Enum,
title: '↳ Sans',
options: sansSerifList, // Calling this filter function to bring a subset of the font.ts collection
hidden(props) {
return props.fontCategory === 'sans-serif' ? false : true
}
},
...
}
render() {
}
return (
<></>
)
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment