This repository has been archived by the owner on Jan 9, 2023. It is now read-only.
-
-
Notifications
You must be signed in to change notification settings - Fork 185
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge branch 'master' into checkboxes
- Loading branch information
Showing
17 changed files
with
1,031 additions
and
9 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
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,120 @@ | ||
| import React, { Component } from 'react' | ||
| import NavbarRB from 'react-bootstrap/Navbar' | ||
| import Nav from 'react-bootstrap/Nav' | ||
| import Form from 'react-bootstrap/Form' | ||
| import FormControl, { FormControlProps } from 'react-bootstrap/FormControl' | ||
| import NavDropdown from 'react-bootstrap/NavDropdown' | ||
| import { ReplaceProps, BsPrefixProps } from 'react-bootstrap/helpers' | ||
|
|
||
| import { Button } from '../../../src' | ||
| import { NavLink, Brand } from './interfaces' | ||
|
|
||
| interface Props extends React.Props<any> { | ||
| /** Determines the navbar background color */ | ||
| bg?: string | ||
| /** Determines the letters color. It should be combined with the background color (bg) */ | ||
| variant?: 'light' | 'dark' | ||
| /** Determines the links names, theirs onClick methods and paths. It has children array which contain links to be used on a dropdown. */ | ||
| navLinks: NavLink[] | ||
| /** Determines the hospital/clinic name to be shown at the navbar */ | ||
| brand: Brand | ||
| /** Defines the button variant. By default is primary */ | ||
| buttonColor?: | ||
| | 'primary' | ||
| | 'secondary' | ||
| | 'success' | ||
| | 'warning' | ||
| | 'danger' | ||
| | 'info' | ||
| | 'light' | ||
| | 'dark' | ||
| /** Handles the on click search button event */ | ||
| onSeachButtonClick: (event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void | ||
| /** Handles the on change search form event */ | ||
| onSearchTextBoxChange: ( | ||
| event: React.FormEvent<ReplaceProps<'input', BsPrefixProps<'input'> & FormControlProps>>, | ||
| ) => void | ||
| } | ||
|
|
||
| /** | ||
| * Used to redirect users to the main topics. | ||
| */ | ||
| class Navbar extends Component<Props, any> { | ||
| render() { | ||
| const buttonColor = this.props.buttonColor ? this.props.buttonColor : 'primary' | ||
| let img | ||
|
|
||
| if (this.props.brand.src) { | ||
| img = ( | ||
| <img | ||
| src={this.props.brand.src} | ||
| width="28" | ||
| height="28" | ||
| className="d-inline-block align-top" | ||
| /> | ||
| ) | ||
| } else { | ||
| img = '' | ||
| } | ||
|
|
||
| return ( | ||
| <NavbarRB | ||
| bg={this.props.bg ? this.props.bg : 'dark'} | ||
| variant={this.props.variant ? this.props.variant : 'dark'} | ||
| > | ||
| {/* <NavbarRB.Brand href={this.props.brand.href}> if this method is used, onClick: (event: React.MouseEvent<HTMLElement>) => void on the interface | ||
| <div onClick={this.props.brand.onClick.bind(this)} > | ||
| {img} | ||
| {` ${this.props.brand.label}`} | ||
| </div> | ||
| </NavbarRB.Brand> */} | ||
|
|
||
| <NavbarRB.Brand href={this.props.brand.href} onClick={this.props.brand.onClick.bind(this)}> | ||
| {img} | ||
| {` ${this.props.brand.label}`} | ||
| </NavbarRB.Brand> | ||
|
|
||
| <NavbarRB.Collapse id="responsive-navbar-nav"> | ||
| <Nav className="mr-auto"> | ||
| {this.props.navLinks.map((link, index) => { | ||
| return link.children.length == 0 ? ( | ||
| <Nav.Link onClick={link.onClick} key={index}> | ||
| {link.label} | ||
| </Nav.Link> | ||
| ) : ( | ||
| <NavDropdown title={link.label} id="collasible-nav-dropdown" key={index}> | ||
| {link.children.map((subLink, i) => { | ||
| return ( | ||
| <NavDropdown.Item | ||
| href={subLink.href ? subLink.href : ''} | ||
| key={i} | ||
| onClick={subLink.onClick} | ||
| > | ||
| {subLink.label} | ||
| </NavDropdown.Item> | ||
| ) | ||
| })} | ||
| </NavDropdown> | ||
| ) | ||
| })} | ||
| </Nav> | ||
| <Nav> | ||
| <Form inline> | ||
| <FormControl | ||
| type="text" | ||
| placeholder="Search" | ||
| className="mr-sm-2" | ||
| onChange={this.props.onSearchTextBoxChange} | ||
| /> | ||
| <Button color={buttonColor} onClick={this.props.onSeachButtonClick}> | ||
| Search | ||
| </Button> | ||
| </Form> | ||
| </Nav> | ||
| </NavbarRB.Collapse> | ||
| </NavbarRB> | ||
| ) | ||
| } | ||
| } | ||
|
|
||
| export { Navbar } |
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 @@ | ||
| export * from './Navbar' |
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,24 @@ | ||
| export interface Brand { | ||
| /** Clinic/Hospital name */ | ||
| label: string | ||
| /** Determina the href */ | ||
| href?: string | ||
| /** A path which contain the company icon/image */ | ||
| src?: string | ||
| /** A click handle which will redirect the user to the respectivel webpage/path */ | ||
| onClick: (event: React.MouseEvent<any>) => void | ||
| } | ||
|
|
||
| export interface NavLinkElement { | ||
| /** The link name */ | ||
| label: string | ||
| /** A click handle which will redirect the user to whenever it is clicked */ | ||
| onClick: (event: React.MouseEvent<any>) => void | ||
| /** Determina the href */ | ||
| href?: string | ||
| } | ||
|
|
||
| export interface NavLink extends NavLinkElement { | ||
| /** An array to hold a dropdown Links */ | ||
| children: NavLinkElement[] | ||
| } |
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,51 @@ | ||
| import React, { ReactNode, Component } from 'react' | ||
| import { FormCheck } from 'react-bootstrap' | ||
|
|
||
| interface Props { | ||
| /** Label to display next to the Radio. */ | ||
| label?: string | ReactNode | ||
| /** Necessary to link the label with the input. */ | ||
| id?: string | ||
| /** Name to group Radios together. Two Radios with the same name can't be checked at the same time. */ | ||
| name?: string | ||
| /** Value associated with the Radio. */ | ||
| value?: string | ||
| /** When inline, Radio elements are stacked horizontally instead of vertically. Default is false. */ | ||
| inline?: boolean | ||
| /** When disabled, the Radio cannot be clicked or changed by the user. Default is false. */ | ||
| disabled?: boolean | ||
| /** When checked is true, the Radio button is selected. */ | ||
| checked?: boolean | ||
| /** Determines whether the Radio should be rendered as invalid or not. Default is false. */ | ||
| isInvalid?: boolean | ||
| /** Message to display when the Radio is invalid. */ | ||
| feedback?: string | ReactNode | ||
| /** Listener will be called when the Radio is checked. */ | ||
| onChange?: (event: React.ChangeEvent<HTMLInputElement>) => void | ||
| } | ||
|
|
||
| class Radio extends Component<Props, {}> { | ||
| constructor(props: Props) { | ||
| super(props) | ||
| } | ||
|
|
||
| render() { | ||
| return ( | ||
| <FormCheck | ||
| type="radio" | ||
| label={this.props.label} | ||
| name={this.props.name} | ||
| id={this.props.id} | ||
| value={this.props.value} | ||
| checked={this.props.checked} | ||
| disabled={this.props.disabled} | ||
| inline={this.props.inline} | ||
| isInvalid={this.props.isInvalid} | ||
| feedback={this.props.feedback} | ||
| onChange={this.props.onChange} | ||
| /> | ||
| ) | ||
| } | ||
| } | ||
|
|
||
| export { Radio } |
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 @@ | ||
| export * from './Radio' |
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,46 @@ | ||
| import React from 'react' | ||
| import Form from 'react-bootstrap/Form' | ||
|
|
||
| interface Props { | ||
| /** Defines the type of the input. Defaults to 'text' if not specified. */ | ||
| type?: 'text' | 'number' | 'email' | ||
| /** Defines the size of the input. Defaults to 'lg' */ | ||
| size?: 'sm' | 'lg' | ||
| /** The value of the input */ | ||
| value?: string | '' | ||
| /** Handles the onChange event for the input */ | ||
| onChange?: (e: React.FormEvent<Form>) => void | ||
| /** The name of the input */ | ||
| name?: string | '' | ||
| /** The id value of the input */ | ||
| id?: string | '' | ||
| /** Defines whether the input should be disabled or not. Defaults to false. */ | ||
| disabled?: boolean | ||
| /** Defines whether the input should display as invalid. Defaults to false. */ | ||
| isInvalid?: boolean | ||
| /** Defines whether the input should display as valid. Defaults to false */ | ||
| isValid?: boolean | ||
| } | ||
|
|
||
| /** | ||
| * A flexible text input as a wrapper around the React Bootstrap Form Control. | ||
| */ | ||
|
|
||
| const TextInput = (props: Props) => { | ||
| return ( | ||
| <Form.Control | ||
| as="input" | ||
| type={props.type || 'text'} | ||
| name={props.name} | ||
| id={props.id} | ||
| onChange={props.onChange} | ||
| disabled={props.disabled || false} | ||
| isInvalid={props.isInvalid || false} | ||
| isValid={props.isValid || false} | ||
| defaultValue={props.value} | ||
| size={props.size} | ||
| /> | ||
| ) | ||
| } | ||
|
|
||
| export { TextInput } |
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 @@ | ||
| export * from './TextInput' |
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.