emoji-mart-lazyload/stories/index.js

76 lines
2.2 KiB
JavaScript
Raw Normal View History

2017-09-27 20:32:48 +00:00
import React from 'react';
import { storiesOf } from '@storybook/react';
import { action } from '@storybook/addon-actions';
2017-09-28 00:58:02 +00:00
import { withKnobs, text, boolean, number, select, color } from '@storybook/addon-knobs';
2017-09-27 20:32:48 +00:00
2017-09-29 18:32:57 +00:00
import { Picker, Emoji, emojiIndex } from '../dist';
2017-09-27 20:32:48 +00:00
import '../css/emoji-mart.css';
2017-09-28 00:58:02 +00:00
const SETS = ['apple', 'google', 'twitter', 'emojione', 'messenger', 'facebook']
2017-09-28 02:02:47 +00:00
const CUSTOM_EMOJIS = [
{
name: 'Octocat',
short_names: ['octocat'],
keywords: ['github'],
imageUrl: 'https://assets-cdn.github.com/images/icons/emoji/octocat.png?v7'
},
{
name: 'Squirrel',
short_names: ['shipit', 'squirrel'],
keywords: ['github'],
imageUrl: 'https://assets-cdn.github.com/images/icons/emoji/shipit.png?v7'
}
]
2017-09-28 00:58:02 +00:00
2017-09-27 20:32:48 +00:00
storiesOf('Picker', module)
.addDecorator(withKnobs)
.add('default', () => (
<Picker
onClick={action('clicked')}
onSkinChange={action('skin changed')}
2017-09-28 00:58:02 +00:00
native={boolean('Unicode', true)}
set={select('Emoji pack', SETS, SETS[0])}
2017-09-27 20:32:48 +00:00
emojiSize={number('Emoji size', 24)}
perLine={number('Per line', 9)}
title={text('Idle text', 'Your Title Here')}
emoji={text('Idle emoji', 'department_store')}
defaultSkin={number('Default skin tone', 1)}
2017-09-28 00:58:02 +00:00
color={color('Highlight color', '#ae65c5')}
showPreview={boolean('Show preview', true)}
showSkinTones={boolean('Show skin tones', true)}
2017-09-28 02:02:47 +00:00
custom={CUSTOM_EMOJIS}
2017-09-27 20:32:48 +00:00
/>
));
storiesOf('Emoji', module)
.addDecorator(withKnobs)
.add('default', () => (
<Emoji
2017-09-28 00:58:02 +00:00
native={boolean('Unicode', true)}
set={select('Emoji pack', SETS, SETS[0])}
2017-09-27 20:32:48 +00:00
emoji={text('Emoji', '+1')}
size={number('Emoji size', 64)}
skin={number('Skin tone', 1)}
html={boolean('HTML', false)}
fallback={(emoji) => {
return `:${emoji.short_names[0]}:`
}}
2017-09-27 20:32:48 +00:00
/>
));
2017-09-28 02:20:56 +00:00
storiesOf('Headless Search', module)
.addDecorator(withKnobs)
.add('default', () => {
let results = emojiIndex.search(text('Search', 'christmas'), { custom: CUSTOM_EMOJIS })
if (!results) { return null }
return <div>
{results.map((emoji) => {
return <span key={emoji.id} style={{ marginLeft: '1.4em' }}>
<Emoji native={true} emoji={emoji} size={48} />
</span>
2017-09-28 02:20:56 +00:00
})}
</div>
});