Skip to content

Commit 4577a28

Browse files
divyanshu-rawatdivyanshu-rawat
authored
Merge pull request #808 from Meghana-12/DropDownSec
Secondary Dropdown
2 parents fbb26fe + f58b094 commit 4577a28

File tree

9 files changed

+182
-4
lines changed

9 files changed

+182
-4
lines changed

‎src/ignitus-Routes/ignitus-UserInterfaceBookRoutes/index.tsx

+5
Original file line numberDiff line numberDiff line change
@@ -29,6 +29,7 @@ import { interfaceUserProfile } from '../../ignitus-UserInterfaceBook/Components
2929
import { InterfaceAvatar } from '../../ignitus-UserInterfaceBook/Components/Organisms/interfaceAvatar/Components';
3030
import { interfaceSideProfile } from '../../ignitus-UserInterfaceBook/Components/Organisms/interfaceSideProfile/Components/index';
3131
import { InterfaceProgress } from '../../ignitus-UserInterfaceBook/Components/Molecules/interfaceProgress/index';
32+
import { interfaceSecondaryDropDown } from '../../ignitus-UserInterfaceBook/Components/Atoms/interfaceSecondaryDropdown/Components';
3233

3334
const Container = styled.div`
3435
display: flex;
@@ -93,6 +94,10 @@ export const UserInterfaceBookRoutes: React.FunctionComponent = () => (
9394
path="/interface/defaultDropdown"
9495
component={interfaceDropDown}
9596
/>
97+
<Route
98+
path="/interface/secondaryDropdown"
99+
component={interfaceSecondaryDropDown}
100+
/>
96101
<Route
97102
path="/interface/defaultCheckbox"
98103
component={interfaceCheckBox}

‎src/ignitus-Shared/ignitus-DesignSystem/ignitus-Atoms/ignitus-secondaryDropDown/Components/index.tsx

+53
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,53 @@
1+
import React from 'react';
2+
import * as S from '../styles';
3+
import * as H from '../../typography';
4+
import { DataType } from '../types';
5+
6+
export const SecondaryDropDown = ({ data }) => {
7+
const [showOptions, setShowOptions] = React.useState(false);
8+
const [searchTerm, setSearchTerm] = React.useState('');
9+
const [searchResults, setSearchResults] = React.useState([] as any);
10+
const handleChange = event => {
11+
setSearchTerm(event.target.value);
12+
setShowOptions(true);
13+
};
14+
React.useEffect(() => {
15+
const results: [] | DataType = data.filter(person =>
16+
person.name
17+
.replace(/\s+/g, '')
18+
.toLowerCase()
19+
.includes(searchTerm.replace(/\s+/g, '').toLowerCase()),
20+
);
21+
setSearchResults(results);
22+
if (searchTerm) {
23+
setShowOptions(true);
24+
} else {
25+
setShowOptions(false);
26+
}
27+
}, [searchTerm]);
28+
29+
return (
30+
<S.ParentContainer className="ParentContainer">
31+
<S.SearchBarWrapper>
32+
<S.SearchBar
33+
type="text"
34+
placeholder="Search..."
35+
onChange={handleChange}
36+
value={searchTerm}
37+
/>
38+
</S.SearchBarWrapper>
39+
{showOptions && (
40+
<S.OptionsContainer>
41+
{searchResults.map(({ name, avatar }) => (
42+
<S.CardWrapper key={`${name}`}>
43+
<S.Avatar src={avatar} />
44+
<S.NameWrapper>
45+
<H.Heading5>{name}</H.Heading5>
46+
</S.NameWrapper>
47+
</S.CardWrapper>
48+
))}
49+
</S.OptionsContainer>
50+
)}
51+
</S.ParentContainer>
52+
);
53+
};

‎src/ignitus-Shared/ignitus-DesignSystem/ignitus-Atoms/ignitus-secondaryDropDown/styles.ts

+60
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,60 @@
1+
import styled from '@emotion/styled';
2+
import * as C from '../colors';
3+
import * as F from '../fonts';
4+
5+
export const ParentContainer = styled.div`
6+
display: inline-flex;
7+
flex-direction: column;
8+
`;
9+
10+
export const SearchBarWrapper = styled.div`
11+
width: 20rem;
12+
height: 2rem;
13+
`;
14+
15+
export const SearchBar = styled.input`
16+
outline: none;
17+
border: 0.1rem solid ${C.IgnitusBlue};
18+
border-radius: 0.5rem;
19+
width: 20rem;
20+
height: 2rem;
21+
padding-left: 0.25rem;
22+
color: ${C.IgnitusBlue};
23+
font-weight: ${F.SemiBold};
24+
&::placeholder {
25+
color: ${C.IgnitusBlue};
26+
font-weight: ${F.SemiBold};
27+
}
28+
`;
29+
30+
export const OptionsContainer = styled.div`
31+
display: flex;
32+
flex-direction: column;
33+
margin: 1rem 0.25rem;
34+
background-color: ${C.White};
35+
overflow: auto;
36+
box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.1);
37+
border-radius: 0.5rem;
38+
`;
39+
40+
export const CardWrapper = styled.div`
41+
display: flex;
42+
flex-direction: row;
43+
justify-items: baseline;
44+
padding: 0.5rem;
45+
height: 3rem;
46+
:hover {
47+
background-color: ${C.GreyLight};
48+
}
49+
flex: 1;
50+
`;
51+
52+
export const Avatar = styled.img`
53+
border-radius: 50%;
54+
width: 2.5rem;
55+
margin: 0 1rem 0 1rem;
56+
`;
57+
58+
export const NameWrapper = styled.div`
59+
margin: 0.5rem;
60+
`;

‎src/ignitus-Shared/ignitus-DesignSystem/ignitus-Atoms/ignitus-secondaryDropDown/types.ts

+4
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
export type DataType = {
2+
avatar: string;
3+
name: string;
4+
};

‎src/ignitus-Shared/index.ts

+3
Original file line numberDiff line numberDiff line change
@@ -48,6 +48,9 @@ export {
4848
DefaultSearchInput,
4949
} from './ignitus-DesignSystem/ignitus-Atoms/ignitus-defaultSearchInput/Components';
5050

51+
export {
52+
SecondaryDropDown,
53+
} from './ignitus-DesignSystem/ignitus-Atoms/ignitus-secondaryDropDown/Components';
5154
/**
5255
* ignitus-Layout
5356
*/

‎src/ignitus-UserInterfaceBook/Components/Atoms/interfaceSecondaryDropdown/Components/index.tsx

+15
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
import React from 'react';
2+
import { Interface } from '../../../../styles';
3+
import { data } from '../constants';
4+
import { Heading2, SecondaryDropDown } from '../../../../../ignitus-Shared';
5+
6+
export const interfaceSecondaryDropDown: React.FC = () => (
7+
<React.Fragment>
8+
<Interface>
9+
<Heading2>Secondary DropDown</Heading2>
10+
<hr />
11+
12+
<SecondaryDropDown data={data} />
13+
</Interface>
14+
</React.Fragment>
15+
);

‎src/ignitus-UserInterfaceBook/Components/Atoms/interfaceSecondaryDropdown/constants.ts

+34
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,34 @@
1+
import { DataType } from './types';
2+
3+
export const data: DataType[] = [
4+
{
5+
avatar:
6+
'https://storage.googleapis.com/ignitus_assets/ig-avatars/eugene.png',
7+
name: 'Harpar Hopman',
8+
},
9+
{
10+
avatar:
11+
'https://storage.googleapis.com/ignitus_assets/ig-avatars/eugene.png',
12+
name: 'Hara Hopman',
13+
},
14+
{
15+
avatar:
16+
'https://storage.googleapis.com/ignitus_assets/ig-avatars/eugene.png',
17+
name: 'Harbour Center',
18+
},
19+
{
20+
avatar:
21+
'https://storage.googleapis.com/ignitus_assets/ig-avatars/eugene.png',
22+
name: 'Harvard University',
23+
},
24+
{
25+
avatar:
26+
'https://storage.googleapis.com/ignitus_assets/ig-avatars/eugene.png',
27+
name: 'Henry Harbour',
28+
},
29+
{
30+
avatar:
31+
'https://storage.googleapis.com/ignitus_assets/ig-avatars/eugene.png',
32+
name: 'Hara Jackson',
33+
},
34+
];

‎src/ignitus-UserInterfaceBook/Components/Atoms/interfaceSecondaryDropdown/types.ts

+4
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
export type DataType = {
2+
avatar: string;
3+
name: string;
4+
};

‎src/ignitus-UserInterfaceBook/InterfaceSideNavigation/constants.ts

+4-4
Original file line numberDiff line numberDiff line change
@@ -86,10 +86,10 @@ export const allEdges: Edges[] = [
8686
title: 'Default',
8787
route: '/interface/defaultDropdown',
8888
},
89-
// {
90-
// title: 'Secondary',
91-
// route: '/interface/secondaryDropdown',
92-
// },
89+
{
90+
title: 'Secondary',
91+
route: '/interface/secondaryDropdown',
92+
},
9393
],
9494
},
9595
],

0 commit comments

Comments
 (0)