@retailmenot/anchor
Version:
A React UI Library by RetailMeNot
136 lines • 6.73 kB
JavaScript
// REACT
import * as React from 'react';
// STORYBOOK
import { storiesOf } from '@storybook/react';
import { boolean, select as selectKnob } from '@storybook/addon-knobs';
// VENDOR
import styled, { ThemeProvider } from '@xstyled/styled-components';
// COMPONENTS
import { AutoComplete } from './AutoComplete.component';
import { Search } from '../Icon';
import { Item } from '../List';
import { Typography } from '../Typography';
import { RootTheme } from '../theme';
// README
import * as README from './README.md';
// THEME
const StyledStory = styled('div') `
box-sizing: border-box;
min-width: 90vw;
`;
const { useState } = React;
const tempDataStringSource = (newTerm) => {
const newTermString = `${newTerm}`;
return newTerm && newTermString.length
? [
`${newTermString + newTermString}`,
`${newTermString + newTermString + newTermString}`,
`${newTermString +
newTermString +
newTermString +
newTermString}`,
]
: [];
};
const StateBasedAutoCompleteStory = () => {
const [tempData, setTempData] = useState(tempDataStringSource(''));
return (React.createElement(ThemeProvider, { theme: RootTheme },
React.createElement(StyledStory, null,
React.createElement("div", null,
React.createElement("div", null,
React.createElement(Typography, { as: "h1" }, "AutoComplete 1 with autoFocus"),
React.createElement("br", null),
React.createElement(AutoComplete, { autoFocus: true, browserAutoComplete: false, dataSource: tempData, debug: boolean('debug', false), highlightFirst: true, onFilter: (newTerm) => {
setTempData(tempDataStringSource(newTerm));
}, placeholder: "Search here...", prefix: React.createElement(Search, { color: "borders.base" }), size: selectKnob('size', ['sm', 'md', 'lg'], 'lg') }))))));
};
const CustomResult = ({ index, currentIndex, label, value }) => {
const isLink = index === 2;
return isLink ? (React.createElement(Item, Object.assign({ key: index, active: index === currentIndex, onSelect: () => {
window.open('http://www.google.com', '_blank');
} }, value),
"Link: ",
label)) : (React.createElement(Item, Object.assign({ active: index === currentIndex }, value), label));
};
const StateBasedAutoCompleteStoryCustomResult = () => {
const [tempData, setTempData] = useState(tempDataStringSource(''));
return (React.createElement(ThemeProvider, { theme: RootTheme },
React.createElement(StyledStory, null,
React.createElement("div", null,
React.createElement("div", null,
React.createElement(Typography, { as: "h1" }, "AutoComplete 1"),
React.createElement("br", null),
React.createElement(AutoComplete, { debug: boolean('debug', false), placeholder: "Search here...", onFilter: (newTerm) => {
setTempData(tempDataStringSource(newTerm));
}, prefix: React.createElement(Search, { color: "borders.base" }), dataSource: tempData, resultTemplate: CustomResult }))))));
};
const BasicFilter = () => {
const dataSource = [
{ label: 'Google', id: 1, url: 'http://www.google.com' },
{ label: 'Kotaku', id: 2, url: 'http://www.kotaku.com' },
{ label: 'io9', id: 3, url: 'http://www.io9.com' },
];
const [filteredData, setFilteredData] = React.useState(dataSource);
const filter = (val) => {
setFilteredData(dataSource.filter(data => {
return data.label.toLowerCase().includes(val.toLowerCase());
}));
};
const select = (val) => {
const result = dataSource.find((item) => {
return val === item.label;
});
if (result) {
window.open(result.url);
}
};
return (React.createElement(ThemeProvider, { theme: RootTheme },
React.createElement(StyledStory, null,
React.createElement(AutoComplete, { dataSource: filteredData.length ? filteredData : dataSource, onFilter: filter, onSelect: select, placeholder: "Search here...", prefix: React.createElement(Search, { color: "borders.base" }) }))));
};
storiesOf('Components/AutoComplete', module)
.addParameters({
readme: {
sidebar: README,
},
})
.add('String Array Results', () => React.createElement(StateBasedAutoCompleteStory, null))
.add('Custom Results Template', () => (React.createElement(StateBasedAutoCompleteStoryCustomResult, null)))
.add('Object Array Results', () => (React.createElement(ThemeProvider, { theme: RootTheme },
React.createElement(StyledStory, null,
React.createElement("div", null,
React.createElement("div", null,
React.createElement(Typography, { as: "h1" }, "AutoComplete 1"),
React.createElement("br", null),
React.createElement(AutoComplete, { debug: boolean('debug', false), allowClear: true, placeholder: "Search here...", prefix: React.createElement(Search, { color: "borders.base" }), dataSource: [
{
label: 'Title of a section 1',
id: 1,
someBoolean: false,
listItemType: 'title',
},
{ label: 'Item 1', id: 2, someBoolean: true },
{ label: 'Item 3', id: 3, someBoolean: true },
{ label: 'Item 4', id: 4, someBoolean: true },
{ label: 'Item 5', id: 5, someBoolean: true },
{
label: 'Title of a section 2',
id: 6,
someBoolean: true,
listItemType: 'title',
},
{ label: 'Item 7', id: 7, someBoolean: true },
{ label: 'Item 8', id: 8, someBoolean: true },
{
label: 'Title of a section 3',
id: 9,
someBoolean: true,
listItemType: 'title',
},
{
listItemType: 'divider',
},
{ label: 'Item 11', id: 11, someBoolean: true },
] })))))))
.add('Simple Filtering', () => React.createElement(BasicFilter, null));
//# sourceMappingURL=AutoComplete.stories.js.map