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

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