@bigfishtv/cockpit/src/components/IconsHelper.js

import React, { Component } from 'react'
import * as iconRegistry from '../iconRegistry'
import { titleCase } from '../utils/stringUtils'
import Icon from './Icon'
import InfoTooltip from './InfoTooltip'
import Button from './button/Button'

/**
 * Internal component used for displaying all icons in iconRegistry with a search filter
 */
export default class IconsHelper extends Component {
	constructor(props) {
		super(props)
		this.state = {
			iconSearch: '',
			show: false,
		}
	}

	render() {
		if (!this.state.show) {
			return <Button text="Show Icons" onClick={() => this.setState({ show: true })} />
		}

		const iconCategories = iconRegistry.getCategories()
		const categories = Object.keys(iconCategories)
		const iconSearch = (this.state.iconSearch || '').toLowerCase()
		const uncategorizedKeys = iconRegistry.getUncategorizedKeys()
		const uncategorizedIcons = iconSearch
			? uncategorizedKeys.filter(key => key.indexOf(iconSearch) >= 0)
			: uncategorizedKeys

		return (
			<div>
				<div className="form-input">
					<label>Filter Icons</label>
					<input value={iconSearch} onChange={event => this.setState({ iconSearch: event.target.value })} />
				</div>
				{categories.map((category, i) => {
					const categoryIcons = iconSearch
						? iconCategories[category].filter(key => key.indexOf(iconSearch) >= 0)
						: iconCategories[category]
					return categoryIcons.length ? (
						<div key={i}>
							<h5>{titleCase(category)}</h5>
							{categoryIcons.map((key, n) => (
								<InfoTooltip key={n} text={key}>
									<Icon name={key} onClick={() => window.prompt('Copy to clipboard', key)} />
								</InfoTooltip>
							))}
							<hr />
						</div>
					) : null
				})}
				{uncategorizedIcons.length ? (
					<div>
						<h5>Uncategorized / Legacy</h5>
						{uncategorizedIcons.map((key, n) => (
							<InfoTooltip key={n} text={key}>
								<Icon name={key} onClick={() => window.prompt('Copy to clipboard', key)} />
							</InfoTooltip>
						))}
					</div>
				) : null}
			</div>
		)
	}
}