-
Notifications
You must be signed in to change notification settings - Fork 43
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
1 parent
5baad42
commit 88fb798
Showing
11 changed files
with
610 additions
and
4 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,112 @@ | ||
| import { SxProps, TextField, InputAdornment, useTheme } from '@mui/material'; | ||
| import React, { Dispatch, SetStateAction, useState } from 'react'; | ||
| import SearchIcon from '@mui/icons-material/Search'; | ||
| import CloseIcon from '@mui/icons-material/Close'; | ||
|
|
||
| /** | ||
| * @interface | ||
| * @description Props for the KeywordSearch field. | ||
| * @prop {Function} onChange (Optional) Function to run when value of field changes. | ||
| * @prop {[string, Dispatch<SetStateAction<string>>]} optionalExternalState (Optional) An external state getter and setter for field value. Component also contains internal state if that suffices. | ||
| */ | ||
| interface IKeywordSearchProps { | ||
| onChange?: Function; | ||
| optionalExternalState?: [string, Dispatch<SetStateAction<string>>]; | ||
| } | ||
|
|
||
| /** | ||
| * @description Input field that is a search icon when minimized but can be expanded upon click. | ||
| * @param props Properties passed to the component. | ||
| */ | ||
| const KeywordSearch = (props: IKeywordSearchProps) => { | ||
| const { onChange, optionalExternalState } = props; | ||
| const [isOpen, setIsOpen] = useState<boolean>(false); | ||
| const [fieldContents, setFieldContents] = optionalExternalState | ||
| ? optionalExternalState | ||
| : useState<string>(''); | ||
| const theme = useTheme(); | ||
|
|
||
| // Style shared when both open and closed | ||
| const commonStyle: SxProps = { | ||
| fontSize: theme.typography.fontWeightBold, | ||
| fontFamily: theme.typography.fontFamily, | ||
| padding: '5px', | ||
| marginBottom: '1px', | ||
| boxSizing: 'content-box', | ||
| borderRadius: '5px', | ||
| }; | ||
|
|
||
| // Style when open | ||
| const openStyle: SxProps = { | ||
| ...commonStyle, | ||
| width: '240px', | ||
| transition: 'width 0.3s ease-in, border 1s', | ||
| border: `1.5px solid ${theme.palette.grey[400]}`, | ||
| '&:focus-within': { | ||
| border: '1.5px solid black', | ||
| }, | ||
| }; | ||
|
|
||
| // Style when closed | ||
| const closedStyle: SxProps = { | ||
| ...commonStyle, | ||
| width: '32px', | ||
| transition: 'width 0.3s ease-in, border 1s', | ||
| border: '1.5px solid transparent', | ||
| '&:hover': { | ||
| cursor: 'default', | ||
| }, | ||
| }; | ||
| return ( | ||
| <TextField | ||
| id="keyword-search" | ||
| variant="standard" | ||
| sx={isOpen ? openStyle : closedStyle} | ||
| size="small" | ||
| style={{ fontSize: '5em' }} | ||
| placeholder="Search..." | ||
| value={fieldContents} | ||
| onChange={(e) => { | ||
| setFieldContents(e.target.value); | ||
| if (onChange) onChange(e.target.value); | ||
| }} | ||
| InputProps={{ | ||
| disableUnderline: true, | ||
| sx: { cursor: 'default' }, | ||
| endAdornment: ( | ||
| <InputAdornment position={'end'}> | ||
| {fieldContents ? ( | ||
| <CloseIcon | ||
| onClick={() => { | ||
| // Clear text and filter | ||
| setFieldContents(''); | ||
| if (onChange) onChange(''); | ||
| document.getElementById('keyword-search').focus(); | ||
| }} | ||
| sx={{ | ||
| '&:hover': { | ||
| cursor: 'pointer', | ||
| }, | ||
| }} | ||
| /> | ||
| ) : ( | ||
| <SearchIcon | ||
| onClick={() => { | ||
| setIsOpen(!isOpen); | ||
| document.getElementById('keyword-search').focus(); | ||
| }} | ||
| sx={{ | ||
| '&:hover': { | ||
| cursor: 'pointer', | ||
| }, | ||
| }} | ||
| /> | ||
| )} | ||
| </InputAdornment> | ||
| ), | ||
| }} | ||
| /> | ||
| ); | ||
| }; | ||
|
|
||
| export default KeywordSearch; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,27 @@ | ||
| import { UUID } from 'crypto'; | ||
|
|
||
| /** | ||
| * @interface | ||
| * @description Defines the user object returned from the API. | ||
| */ | ||
| export interface IUser { | ||
| createdOn: string; | ||
| updatedOn: string; | ||
| updatedByName: string; | ||
| updatedByEmail: string; | ||
| id: UUID; | ||
| keycloakid: UUID; | ||
| username: string; | ||
| position: string; | ||
| displayName: string; | ||
| firstName: string; | ||
| middleName: string; | ||
| lastName: string; | ||
| email: string; | ||
| isDisabled: true; | ||
| emailVerified: true; | ||
| note: string; | ||
| lastLogin: string; | ||
| agency: string; | ||
| roles: string; // TODO: Are Agency and Roles going to be singular or multiple? | ||
| } |
Oops, something went wrong.