roleypoly/v3
1
0
Fork 0
mirror of https://github.com/roleypoly/roleypoly.git synced 2025-06-17 09:59:10 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

chore: update prettier tab width for consistency

Browse source
This commit is contained in:
41666 2021-03-13 22:49:01 -05:00
parent a931f8c69c
commit 9b71a24e2d
247 changed files with 7224 additions and 7375 deletions
Download patch file Download diff file Expand all files Collapse all files

12
packages/design-system/molecules/role-search/RoleSearch.stories.tsx
View file

@ -3,12 +3,12 @@ import { roleCategory } from '../../fixtures/storyData';
import { RoleSearch } from './RoleSearch';
export default {
title: 'Molecules/Role Search',
component: RoleSearch,
args: {
roles: roleCategory,
searchTerm: '',
},
title: 'Molecules/Role Search',
component: RoleSearch,
args: {
roles: roleCategory,
searchTerm: '',
},
};
export const Search = (args) => <RoleSearch {...args} />;

76
packages/design-system/molecules/role-search/RoleSearch.tsx
View file

@ -8,50 +8,50 @@ import { GoSearch } from 'react-icons/go';
import styled from 'styled-components';
type Props = {
roles: RoleType[];
placeholder?: string;
onSelect: (role: RoleType) => void;
onSearchUpdate: (newTerm: string) => void;
searchTerm: string;
roles: RoleType[];
placeholder?: string;
onSelect: (role: RoleType) => void;
onSearchUpdate: (newTerm: string) => void;
searchTerm: string;
};
export const RoleSearch = (props: Props) => {
const fuse = new Fuse(props.roles, { includeScore: true, keys: ['name'] });
const results =
props.searchTerm !== ''
? fuse.search(props.searchTerm)
: props.roles.map((role) => ({
item: role,
}));
const fuse = new Fuse(props.roles, { includeScore: true, keys: ['name'] });
const results =
props.searchTerm !== ''
? fuse.search(props.searchTerm)
: props.roles.map((role) => ({
item: role,
}));
const handleClick = (role: RoleType) => () => {
props.onSelect(role);
};
const handleClick = (role: RoleType) => () => {
props.onSelect(role);
};
return (
<div>
<TextInputWithIcon
icon={<GoSearch />}
placeholder={props.placeholder || 'Search or drag a role...'}
value={props.searchTerm}
onChange={(x) => props.onSearchUpdate(x.target.value)}
/>
<Space />
{results.map((resultRole, idx) => (
<RoleInliner key={idx}>
<Role
selected={false}
role={resultRole.item}
onClick={handleClick(resultRole.item)}
key={`${idx}role`}
/>
</RoleInliner>
))}
</div>
);
return (
<div>
<TextInputWithIcon
icon={<GoSearch />}
placeholder={props.placeholder || 'Search or drag a role...'}
value={props.searchTerm}
onChange={(x) => props.onSearchUpdate(x.target.value)}
/>
<Space />
{results.map((resultRole, idx) => (
<RoleInliner key={idx}>
<Role
selected={false}
role={resultRole.item}
onClick={handleClick(resultRole.item)}
key={`${idx}role`}
/>
</RoleInliner>
))}
</div>
);
};
const RoleInliner = styled.div`
display: flex;
margin: 5px 0;
display: flex;
margin: 5px 0;
`;