IntenseWebs/grafana
3
0
Fork 0
mirror of https://github.com/grafana/grafana.git synced 2025-02-25 18:55:37 -06:00
Code Issues Packages Projects Releases Wiki Activity

Storybook: Sort icons by name (#23115)

Browse Source 
* Storybook: Sort icons by name

* Storybook: Add icon search
This commit is contained in:
Alex Khomenko 2020-03-27 11:09:23 +02:00 committed by GitHub
parent be157b8457
commit 7e2fedb0cc
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 31 additions and 31 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

62
packages/grafana-ui/src/components/Icon/Icon.story.tsx
View File

@ -1,6 +1,7 @@
import React from 'react';
import React, { ChangeEvent, useState } from 'react';
import { css } from 'emotion';
import { Forms } from '../index';
import { Icon } from './Icon';
import { getAvailableIcons, IconType } from './types';
import { withCenteredStory } from '../../utils/storybook/withCenteredStory';
@ -32,8 +33,6 @@ const IconWrapper: React.FC<{ name: IconType }> = ({ name }) => {
<div
className={css`
width: 150px;
height: 60px;
display: table-cell;
padding: 12px;
border: 1px solid ${borderColor};
text-align: center;
@ -63,41 +62,42 @@ const IconWrapper: React.FC<{ name: IconType }> = ({ name }) => {
);
};
export const simple = () => {
const icons = getAvailableIcons();
const iconsPerRow = 10;
const rows: IconType[][] = [[]];
let rowIdx = 0;
const icons = getAvailableIcons().sort((a, b) => a.localeCompare(b));
icons.forEach((i: IconType, idx: number) => {
if (idx % iconsPerRow === 0) {
rows.push([]);
rowIdx++;
}
rows[rowIdx].push(i);
});
export const simple = () => {
const [filter, setFilter] = useState('');
const searchIcon = (event: ChangeEvent<HTMLInputElement>) => {
setFilter(event.target.value);
};
return (
<div
className={css`
display: table;
table-layout: fixed;
border-collapse: collapse;
display: flex;
flex-direction: column;
width: 100%;
`}
>
{rows.map(r => {
return (
<div
className={css`
display: table-row;
`}
>
{r.map((i, index) => {
return <IconWrapper name={i} />;
})}
</div>
);
})}
<Forms.Field
className={css`
width: 300px;
`}
>
<Forms.Input onChange={searchIcon} placeholder="Search icons by name" />
</Forms.Field>
<div
className={css`
display: flex;
flex-wrap: wrap;
`}
>
{icons
.filter(val => val.includes(filter))
.map(i => {
return <IconWrapper name={i} key={i} />;
})}
</div>
</div>
);
};