-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
-Made it where you can see what buttons are clicked on -Fixed Dropdown in Family Delete
- Loading branch information
1 parent
a6f1bc5
commit 270b61a
Showing
14 changed files
with
200 additions
and
160 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
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,21 @@ | ||
| .button-system-grid-container { | ||
| overflow-y: auto; | ||
| } | ||
|
|
||
| .button-system-grid-container::-webkit-scrollbar { | ||
| width: 8px; | ||
| } | ||
|
|
||
| .button-system-grid-container::-webkit-scrollbar-thumb { | ||
| background-color: rgba(0, 0, 0, 0.2); | ||
| border-radius: 4px; | ||
| } | ||
|
|
||
| .button-system-grid-container::-webkit-scrollbar-thumb:hover { | ||
| background-color: rgba(0, 0, 0, 0.3); | ||
| } | ||
|
|
||
| .button-system-grid-container::-webkit-scrollbar-track { | ||
| background-color: rgba(0, 0, 0, 0.1); | ||
| } | ||
|
|
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 |
|---|---|---|
| @@ -1,62 +1,65 @@ | ||
| import { Family, Mechanism, Reaction, Species, TagMechanism } from '../API/API_Interfaces'; | ||
| import 'bootstrap/dist/css/bootstrap.css'; | ||
| import { StyledFamilyButton, StyledMechanismsFromFamilyButton, StyledTagMechanismsFromMechanismButton, StyledSpeciesFromTagMechanismButton, StyledReactionsFromTagMechanismButton, StyledMechanismsButton } from './RenderButtonsStyling'; | ||
| import 'bootstrap/dist/css/bootstrap.css'; | ||
|
|
||
| export type ButtonData = Family | Mechanism | Reaction | Species | TagMechanism; | ||
|
|
||
| export const renderButton = (button: ButtonData, category: string, handleClick: (uuid: string, reactant_list_uuid?: string, product_list_uuid?: string) => void) => { | ||
| export const renderButton = (button: ButtonData, category: string, handleClick: (uuid: string) => void, uuid: string) => { | ||
| switch (category) { | ||
| case 'Families': | ||
| return familiesButton(button as Family, handleClick); | ||
| return familiesButton(button as Family, handleClick, uuid); | ||
| case 'Mechanisms': | ||
| return mechanismsButton(button as Mechanism, handleClick); | ||
| return mechanismsButton(button as Mechanism, handleClick, uuid); | ||
| case 'MechanismsFromFamily': | ||
| return mechanismsFromFamilyButton(button as Mechanism, handleClick); | ||
| return mechanismsFromFamilyButton(button as Mechanism, handleClick, uuid); | ||
| case 'TagMechanismsFromMechanism': | ||
| return tagMechanismsFromMechanismButton(button as TagMechanism, handleClick); | ||
| return tagMechanismsFromMechanismButton(button as TagMechanism, handleClick, uuid); | ||
| case 'SpeciesFromTagMechanism': | ||
| return speciesFromTagMechanismButton(button as Species, handleClick); | ||
| return speciesFromTagMechanismButton(button as Species, handleClick, uuid); | ||
| case 'ReactionsFromTagMechanism': | ||
| return reactionsFromTagMechanismButton(button as Reaction, handleClick); | ||
| return reactionsFromTagMechanismButton(button as Reaction, handleClick, uuid); | ||
| default: | ||
| return null; | ||
| } | ||
| }; | ||
|
|
||
| const familiesButton = ({ uuid, name}: Family, handleClick: (uuid: string) => void) => ( | ||
| <StyledFamilyButton onClick={() => handleClick(uuid)} style={{ width: '100%' }} {...{ uuid}}> | ||
|
|
||
| const familiesButton = ({ uuid, name}: Family, handleClick: (uuid: string) => void, familyUuid: string) => ( | ||
| <StyledFamilyButton active={familyUuid === uuid ? 'true' : 'false'}onClick={() => handleClick(uuid)} style={{ width: '100%' }}> | ||
| {name} | ||
| </StyledFamilyButton> | ||
| ); | ||
|
|
||
| const mechanismsButton = ({ uuid, name}: Mechanism, handleClick: (uuid: string) => void) => ( | ||
| <StyledMechanismsButton onClick={() => handleClick(uuid)} style={{ width: '100%' }} {...{ uuid}}> | ||
| const mechanismsButton = ({ uuid, name}: Mechanism, handleClick: (uuid: string) => void, mechanismUuid: string) => ( | ||
| <StyledMechanismsButton active={mechanismUuid === uuid ? 'true' : 'false'} onClick={() => handleClick(uuid)} style={{ width: '100%' }}> | ||
| {name} | ||
| </StyledMechanismsButton> | ||
| ); | ||
|
|
||
| const mechanismsFromFamilyButton = ({ uuid, name}: Mechanism, handleClick: (uuid: string) => void) => ( | ||
| <StyledMechanismsFromFamilyButton onClick={() => handleClick(uuid)} style={{ width: '100%' }} {...{ uuid}}> | ||
| const mechanismsFromFamilyButton = ({ uuid, name}: Mechanism, handleClick: (uuid: string) => void, mechanismUuid: string) => ( | ||
| <StyledMechanismsFromFamilyButton active={mechanismUuid === uuid ? 'true' : 'false'} onClick={() => handleClick(uuid)} style={{ width: '100%' }}> | ||
| {name} | ||
| </StyledMechanismsFromFamilyButton> | ||
| ); | ||
|
|
||
| const tagMechanismsFromMechanismButton = ({ uuid, tag}: TagMechanism, handleClick: (uuid: string) => void) => ( | ||
| <StyledTagMechanismsFromMechanismButton onClick={() => handleClick(uuid)} style={{ width: '100%' }} {...{ uuid}}> | ||
| const tagMechanismsFromMechanismButton = ({ uuid, tag}: TagMechanism, handleClick: (uuid: string) => void, tagMechanismUuid: string) => ( | ||
| <StyledTagMechanismsFromMechanismButton active={tagMechanismUuid === uuid ? 'true' : 'false'} onClick={() => handleClick(uuid)} style={{ width: '100%' }}> | ||
| {tag} | ||
| </StyledTagMechanismsFromMechanismButton> | ||
| ); | ||
|
|
||
| const speciesFromTagMechanismButton = ({ uuid, type}: Species, handleClick: (uuid: string) => void) => ( | ||
| <StyledSpeciesFromTagMechanismButton onClick={() => handleClick(uuid)} style={{ width: '100%' }} {...{ uuid}}> | ||
| const speciesFromTagMechanismButton = ({ uuid, type}: Species, handleClick: (uuid: string) => void, speciesUuid: string) => ( | ||
| <StyledSpeciesFromTagMechanismButton active={speciesUuid === uuid ? 'true' : 'false'} onClick={() => handleClick(uuid)} style={{ width: '100%' }}> | ||
| {type} | ||
| </StyledSpeciesFromTagMechanismButton> | ||
| ); | ||
|
|
||
| const reactionsFromTagMechanismButton = ({ uuid, type, reactant_list_uuid, product_list_uuid}: Reaction, handleClick: (uuid: string, reactant_list_uuid?: string, product_list_uuid?: string) => void) => ( | ||
| <StyledReactionsFromTagMechanismButton onClick={() => handleClick(uuid, reactant_list_uuid, product_list_uuid)} style={{ width: '100%' }} {...{ uuid, reactant_list_uuid, product_list_uuid}}> | ||
| const reactionsFromTagMechanismButton = ({ uuid, type, reactant_list_uuid, product_list_uuid}: Reaction, handleClick: (uuid: string, reactant_list_uuid?: string, product_list_uuid?: string) => void, reactionUuid: string) => ( | ||
| <StyledReactionsFromTagMechanismButton active={reactionUuid === uuid ? 'true' : 'false'} onClick={() => handleClick(uuid, reactant_list_uuid, product_list_uuid)} style={{ width: '100%' }}> | ||
| {type} | ||
| </StyledReactionsFromTagMechanismButton> | ||
| ); | ||
|
|
||
|
|
||
|
|
||
| export default renderButton; |
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
Oops, something went wrong.