reactstrap#FormGroup JavaScript Examples
The following examples show how to use
reactstrap#FormGroup.
You can vote up the ones you like or vote down the ones you don't like,
and go to the original project or source file by following the links above each example. You may check out the related API usage on the sidebar.
Example #1
| Source File: EditPlacement.js From GB-GCGC with MIT License | 6 votes |
|
render(){
const {redirect} = this.state;
if(redirect){
return <Redirect to={"/PlacementEditBoard"}/>
}
return (
<div className="container">
<Form onSubmit={this.handleSubmit}>
<FormGroup>
<Label htmlfor="company">Name Of The Company</Label>
<Input type="text" id="company" name="company" value={this.state.company} onChange={this.onChangeCompany} />
</FormGroup>
<FormGroup>
<Label htmlFor="date"> From </Label>
<Input type="date" id="date" name="date" value={this.state.date} onChange={this.onChangeDate} />
</FormGroup>
<FormGroup>
<Label htmlFor="CTC"> CTC </Label>
<Input type="text" id="ctc" name="ctc" value={this.state.CTC} onChange={this.onChangeCTC}/>
</FormGroup>
<Button type="submit" value="submit" color="primary">
Submit
</Button>
</Form>
</div>
)
}
Example #2
| Source File: InputField.js From HexactaLabs-NetCore_React-Initial with Apache License 2.0 | 6 votes |
|
InputField = props => {
const {
input,
label,
placeholder,
type,
meta: { error, touched, pristine }
} = props;
return (
<FormGroup>
<Label htmlFor={input.name}>{label}</Label>
<Input
valid={touched && !error && !pristine}
invalid={touched && !!error}
{...input}
id={input.name}
placeholder={placeholder}
type={type}
/>
<FormFeedback>{error}</FormFeedback>
</FormGroup>
);
}
Example #3
| Source File: Component.js From agenda with MIT License | 6 votes |
|
render() {
const {
fields,
submitContactData
} = this.props;
return (
<Container fluid>
<Form>
{map(fields, field => (
<FormGroup>
<Label>
{field.label}
<br/>
<Input
key={field.control}
name={field.control}
{...field}
/>
</Label>
</FormGroup>
))}
<Button
onClick={() => submitContactData()}
>
Submit
</Button>
</Form>
</Container>
);
}
Example #4
| Source File: TodoForm.js From ReactJS-Projects with MIT License | 6 votes |
|
TodoForm = ({ addTodo }) => {
const [title, setTitle] = useState('')
const handleSubmit = e => {
e.preventDefault();
if (title === '') {
return alert('Empty Todo')
}
const todo = {
title,
id: v4()
}
addTodo(todo)
setTitle("")
}
return (
<Form onSubmit={handleSubmit}>
<FormGroup>
<InputGroup>
<Input
type="text"
name="todo"
id="todo"
placeholder='Enter Todo...'
value={title}
onChange={e => setTitle(e.target.value)}
/>
<Button color="secondary" onClick={handleSubmit}>Add</Button>
</InputGroup>
</FormGroup>
</Form>
)
}
Example #5
| Source File: LanguageCheckBox.js From Simplify-Testing-with-React-Testing-Library with MIT License | 6 votes |
|
LanguageCheckBox = () => {
const languages = ['JavaScript', 'Ruby', 'Java', 'C#']
return (
<Form className="p-2">
<FormGroup>
<legend>Select Preferred Languages</legend>
{languages.map(lang => (
<CheckBox key={lang} lang={lang} />
))}
</FormGroup>
</Form>
)
}
Example #6
| Source File: ErrorPage.js From light-blue-react-template with MIT License | 6 votes |
|
render() {
return (
<div className={s.errorPage}>
<Container>
<div className={`${s.errorContainer} mx-auto`}>
<h1 className={s.errorCode}>404</h1>
<p className={s.errorInfo}>
Opps, it seems that this page does not exist here.
</p>
<p className={[s.errorHelp, 'mb-3'].join(' ')}>
If you are sure it should, please search for it:
</p>
<Form method="get">
<FormGroup>
<Input className="input-no-border" type="text" placeholder="Search Pages" />
</FormGroup>
<Link to="app/extra/search">
<Button className={s.errorBtn} type="submit" color="inverse">
Search <i className="fa fa-search text-secondary ml-xs" />
</Button>
</Link>
</Form>
</div>
<footer className={s.pageFooter}>
2020 © Light Blue Template - React Admin Dashboard Template.
</footer>
</Container>
</div>
);
}
Example #7
| Source File: index.js From mern-course-bootcamp with MIT License | 6 votes |
|
export default function Login({ history }) {
const [email, setEmail] = useState("")
const [password, setPassword] = useState("")
const handleSubmit = async evt => {
evt.preventDefault();
console.log('result of the submit', email, password)
const response = await api.post('/login', { email, password })
const userId = response.data._id || false;
if (userId) {
localStorage.setItem('user', userId)
history.push('/dashboard')
} else {
const { message } = response.data
console.log(message)
}
}
return (
<Container>
<h2>Login:</h2>
<p>Please <strong>Login</strong> into your account</p>
<Form onSubmit={handleSubmit}>
<FormGroup className="mb-2 mr-sm-2 mb-sm-0">
<Input type="email" name="email" id="email" placeholder="Your email" onChange={evt => setEmail(evt.target.value)} />
</FormGroup>
<FormGroup className="mb-2 mr-sm-2 mb-sm-0">
<Input type="password" name="password" id="password" placeholder="Your password" onChange={evt => setPassword(evt.target.value)} />
</FormGroup>
<Button>Submit</Button>
</Form>
</Container>
);
}
Example #8
| Source File: QueryList.jsx From watchmo with MIT License | 6 votes |
|
QueryList = props => {
const queryItems = [];
for (let i = 0; i < props.queries.length; i += 1) {
queryItems.push(
<QueryItem
key={i}
id={`${props.name}-${i}`}
name={`${props.name}-queryItem`}
queryItem={`${props.queries[i]}`}
queryChange={props.queryChange}
deleteQuery={props.deleteQuery}
/>
);
}
return (
<div>
<FormGroup>
{queryItems}
{/* <GraphqlCodeBlock className="GraphqlCodeBlock" queryBody={`${queryStrings}`} /> */}
</FormGroup>
</div>
);
}
Example #9
| Source File: AutoCompleteAddressFormGroup.js From covidsos with MIT License | 6 votes |
|
render() {
const {iconClass, placeholder, ...props} = this.props;
const {isSelected} = this.state;
return (
<FormGroup className={classnames({'has-danger': !isSelected})}>
<CardText className="text-gray text-custom-small mb-0">
{placeholder}
</CardText>
<InputGroup className="input-group-alternative mb-3"
style={{border: isSelected ? '0' : '1px solid red'}}>
<InputGroupAddon addonType="prepend">
<InputGroupText>
<i className={iconClass + (isSelected ? '' : ' text-red')}/>
</InputGroupText>
</InputGroupAddon>
<AutoCompleteAddress {...props}
onSelect={({geoaddress, latitude, longitude, place_id}) => {
this.setState({isSelected: true},
() => this.props.onSelect(
{geoaddress, latitude, longitude, place_id}))
}}/>
</InputGroup>
<div className="address-select-warning" hidden={isSelected}>
Please search and select from Google dropdown only
</div>
</FormGroup>
)
}
Example #10
| Source File: PlacementEditBoard.js From GB-GCGC with MIT License | 5 votes |
|
render() {
const {redirect} = this.state;
if(redirect){
return <Redirect to={"/home"}/>
}
return (
<div className="container">
<Card>
<Card.Body>
<div className="inline">
<Card.Title>
<h5 align="center">
Notice Board-Placements
<Tooltip title="Add">
<Link onClick={this.toggleModal}>
<FontAwesomeIcon icon={faPlus} size="xs" className="p-1 fa-lg" style={{backgroundColor:'#2A324B',color:'white',fontSize:'20',borderRadius:'10'}}/>
</Link>
</Tooltip>
</h5>
</Card.Title>
</div>
<div>
<Table size="sm" responsive striped>
<thead className="p-3" style={{backgroundColor:'#2A324B',color:'white',fontSize:'24px'}}>
<tr>
<th>S.No</th>
<th>Name of the Company</th>
<th>Date</th>
<th>CTC</th>
<th colspan="2">Operations</th>
</tr>
</thead>
<tbody>
{this.userList()}
</tbody>
</Table>
</div>
</Card.Body>
</Card>
<Modal isOpen={this.state.isModalOpen} toggle={this.toggleModal}>
<ModalHeader toggle={this.toggleModal}>
Add Placement Event
</ModalHeader>
<ModalBody>
<Form onSubmit={this.handleSubmit}>
<FormGroup>
<Label htmlfor="company">Name Of The Company</Label>
<Input type="text" id="company" name="company" value={this.state.company} onChange={this.onChangeCompany} />
</FormGroup>
<FormGroup>
<Label htmlFor="date"> From </Label>
<Input type="date" id="date" name="date" value={this.state.date} onChange={this.onChangeDate} />
</FormGroup>
<FormGroup>
<Label htmlFor="CTC"> CTC </Label>
<Input type="text" id="ctc" name="ctc" value={this.state.CTC} onChange={this.onChangeCTC}/>
</FormGroup>
<Button type="submit" value="submit" color="primary">
Submit
</Button>
</Form>
</ModalBody>
</Modal>
</div>
);
}
Example #11
| Source File: Login.js From HexactaLabs-NetCore_React-Initial with Apache License 2.0 | 5 votes |
|
CreateForm = ({ handleSubmit, submitting, onSubmit, errorMessage }) => (
<React.Fragment>
<form className="form-signin" onSubmit={handleSubmit}>
<FormGroup>
<Field
name="username"
placeholder="Nombre de usuario"
component={RenderField}
type="text"
/>
</FormGroup>
<FormGroup>
<Field
name="password"
placeholder="Contraseña"
component={RenderField}
type="password"
/>
</FormGroup>
<button
disabled={submitting}
className="btn btn-lg btn-primary btn-block btn-login text-uppercase font-weight-bold mb-2"
type="submit"
onClick={handleSubmit(values =>
onSubmit({ ...values, button: "login" })
)}
>
Sign in
</button>
<button
disabled={submitting}
type="submit"
className="btn btn-lg btn-secondary btn-block btn-login text-uppercase font-weight-bold mb-2"
onClick={handleSubmit(values =>
onSubmit({ ...values, button: "signup" })
)}
>
Sign up
</button>
</form>
{errorMessage && <div className="text-danger">{errorMessage}</div>}
</React.Fragment>
)
Example #12
| Source File: Component.js From agenda with MIT License | 5 votes |
|
render() {
const {
fields,
submitAssignmentData,
assignment
} = this.props;
return (
<Container>
<Form>
{map(fields, field => (
<FormGroup>
<Label>
{field.label}
<br/>
<Input
key={field.control}
name={field.control}
{...field}
>
{!field.value && (<option>[Seleccione]</option>)}
{map(field.options, opt => (
<option value={opt.id}>
{opt.name ? `${opt.name} - ${opt.address}` : `${opt.firstName} ${opt.lastName}`}
</option>
))}
</Input>
</Label>
</FormGroup>
))}
<Button
onClick={() => submitAssignmentData()}
disabled={!assignment.contact || !assignment.department}
>
Guardar
</Button>
</Form>
</Container>
);
}
Example #13
| Source File: TodoForm.js From ReactJS-Projects with MIT License | 5 votes |
|
TodoForm = () => {
const [todoString, setTodoString] = useState("");
const { dispatch } = useContext(TodoContext);
const handleSubmit = e => {
e.preventDefault();
if (todoString === "") return alert("Please enter to-do");
const todo = {
todoString,
id: v4()
};
dispatch({
type: ADD_TODO,
payload: todo
});
setTodoString("");
}
return (
<Form onSubmit={handleSubmit}>
<FormGroup>
<InputGroup>
<Input
type="text"
name="todo"
id="todo"
placeholder="Enter your to-do item"
value={todoString}
onChange={e => setTodoString(e.target.value)}
/>
<InputGroupAddon addonType="prepend">
<Button
color="warning"
>
Add
</Button>
</InputGroupAddon>
</InputGroup>
</FormGroup>
</Form>
)
}
Example #14
| Source File: AddRoom.js From react-js-chat-webapp-example with MIT License | 5 votes |
|
function AddRoom() {
const history = useHistory();
const [room, setRoom] = useState({ roomname: '' });
const [showLoading, setShowLoading] = useState(false);
const ref = firebase.database().ref('rooms/');
const save = (e) => {
e.preventDefault();
setShowLoading(true);
ref.orderByChild('roomname').equalTo(room.roomname).once('value', snapshot => {
if (snapshot.exists()) {
return (
<div>
<Alert color="primary">
Room name already exist!
</Alert>
</div>
);
} else {
const newRoom = firebase.database().ref('rooms/').push();
newRoom.set(room);
history.goBack();
setShowLoading(false);
}
});
};
const onChange = (e) => {
e.persist();
setRoom({...room, [e.target.name]: e.target.value});
}
return (
<div>
{showLoading &&
<Spinner color="primary" />
}
<Jumbotron>
<h2>Please enter new Room</h2>
<Form onSubmit={save}>
<FormGroup>
<Label>Room Name</Label>
<Input type="text" name="roomname" id="roomname" placeholder="Enter Room Name" value={room.roomname} onChange={onChange} />
</FormGroup>
<Button variant="primary" type="submit">
Add
</Button>
</Form>
</Jumbotron>
</div>
);
}
Example #15
| Source File: AuthLockScreen.js From gedge-platform with Apache License 2.0 | 5 votes |
|
render() {
return (
<React.Fragment>
<div className="home-btn d-none d-sm-block">
<Link to="/"><i className="mdi mdi-home-variant h2 text-white"></i></Link>
</div>
<div>
<Container fluid className="p-0">
<Row className="no-gutters">
<Col lg={4}>
<div className="authentication-page-content p-4 d-flex align-items-center min-vh-100">
<div className="w-100">
<Row className="justify-content-center">
<Col lg={9}>
<div>
<div className="text-center">
<div>
<Link to="/" className="logo"><img src={logodark} height="20" alt="logo" /></Link>
</div>
<h4 className="font-size-18 mt-4">Lock screen</h4>
<p className="text-muted">Enter your password to unlock the screen!</p>
</div>
<div className="p-2 mt-5">
<AvForm className="form-horizontal">
<div className="user-thumb text-center mb-5">
<img src={avatar2} className="rounded-circle img-thumbnail avatar-md" alt="thumbnail" />
<h5 className="font-size-15 mt-3">Jacob Lopez</h5>
</div>
<FormGroup className="auth-form-group-custom mb-4">
<i className="ri-lock-2-line auti-custom-input-icon"></i>
<Label for="userpassword">Password</Label>
<AvField name="password" validate={{ required: true }} type="password" className="form-control" id="userpassword" placeholder="Enter password" />
</FormGroup>
<div className="mt-4 text-center">
<Button color="primary" className="w-md waves-effect waves-light" type="submit">Unlock</Button>
</div>
</AvForm>
</div>
<div className="mt-5 text-center">
<p>Not you ? return <Link to="auth-login" className="font-weight-medium text-primary"> Log in </Link> </p>
<p>© 2021 Gedge Platform</p>
</div>
</div>
</Col>
</Row>
</div>
</div>
</Col>
<Col lg={8}>
<div className="authentication-bg">
<div className="bg-overlay"></div>
</div>
</Col>
</Row>
</Container>
</div>
</React.Fragment>
);
}
Example #16
| Source File: index.js From mern-course-bootcamp with MIT License | 5 votes |
|
export default function Register({ history }) {
const [email, setEmail] = useState("")
const [password, setPassword] = useState("")
const [firstName, setFirstName] = useState("")
const [lastName, setLastName] = useState("")
const handleSubmit = async evt => {
evt.preventDefault();
console.log('result of the submit', email, password, firstName, lastName)
const response = await api.post('/user/register', { email, password, firstName, lastName })
const userId = response.data._id || false;
if (userId) {
localStorage.setItem('user', userId)
history.push('/dashboard')
} else {
const { message } = response.data
console.log(message)
}
}
return (
<Container>
<h2>Register:</h2>
<p>Please <strong>Register</strong> for a new account</p>
<Form onSubmit={handleSubmit}>
<FormGroup className="mb-2 mr-sm-2 mb-sm-0">
<Input type="text" name="firstName" id="firstName" placeholder="Your first name" onChange={evt => setFirstName(evt.target.value)} />
</FormGroup>
<FormGroup className="mb-2 mr-sm-2 mb-sm-0">
<Input type="text" name="lastName" id="lastName" placeholder="Your last name" onChange={evt => setLastName(evt.target.value)} />
</FormGroup>
<FormGroup className="mb-2 mr-sm-2 mb-sm-0">
<Input type="email" name="email" id="email" placeholder="Your email" onChange={evt => setEmail(evt.target.value)} />
</FormGroup>
<FormGroup className="mb-2 mr-sm-2 mb-sm-0">
<Input type="password" name="password" id="password" placeholder="Your password" onChange={evt => setPassword(evt.target.value)} />
</FormGroup>
<Button>Submit</Button>
</Form>
</Container>
);
}
Example #17
| Source File: FormGroupTemplate.js From covidsos with MIT License | 5 votes |
|
render() {
const {iconClass, placeholder, type, optionsArray, optionGroupsArray, optionGroupsLabels, ...attributes} = this.props;
return (
<FormGroup>
<CardText className="text-gray text-custom-small mb-0">
{placeholder}
</CardText>
<InputGroup className="input-group-alternative mb-3">
<InputGroupAddon addonType="prepend">
<InputGroupText>
<i className={iconClass}/>
</InputGroupText>
</InputGroupAddon>
{
type === 'select' && optionsArray ?
<Input {...attributes} placeholder={placeholder} type={type}>
<option value="">{placeholder}</option>
{optionsArray.map(option => {
return (
<option key={option.value} value={option.value}>{option.label}</option>);
})}
</Input>
:
type === 'select' && optionGroupsArray ?
<Input {...attributes} placeholder={placeholder} type={type}>
<option value="">{placeholder}</option>
{optionGroupsArray.map(optionGroup => {
return (
<optgroup label={optionGroup.label} key={optionGroup.label}>
{optionGroup.optionList.map(option => {
return (
<option key={option.value}
value={option.value}>{option.label}</option>);
})}
</optgroup>
)
})}
</Input>
:
<Input {...attributes} placeholder={placeholder} type={type}/>
}
</InputGroup>
</FormGroup>
);
}
Example #18
| Source File: ProfilePage.js From Website2020 with MIT License | 4 votes |
|
function ProfilePage() {
const [activeTab, setActiveTab] = React.useState("1");
const toggle = tab => {
if (activeTab !== tab) {
setActiveTab(tab);
}
};
document.documentElement.classList.remove("nav-open");
React.useEffect(() => {
document.body.classList.add("landing-page");
return function cleanup() {
document.body.classList.remove("landing-page");
};
});
return (
<>
<ExamplesNavbar />
<ProfilePageHeader />
<div className="section profile-content">
<Container>
<div className="owner">
<div className="avatar">
<img
alt="..."
className="img-circle img-no-padding img-responsive"
src={require("assets/img/faces/joe-gardner-2.jpg")}
/>
</div>
<div className="name">
<h4 className="title">
Jane Faker <br />
</h4>
<h6 className="description">Music Producer</h6>
</div>
</div>
<Row>
<Col className="ml-auto mr-auto text-center" md="6">
<p>
An artist of considerable range, Jane Faker — the name taken by
Melbourne-raised, Brooklyn-based Nick Murphy — writes, performs
and records all of his own music, giving it a warm, intimate
feel with a solid groove structure.
</p>
<br />
<Button className="btn-round" color="default" outline>
<i className="fa fa-cog" /> Settings
</Button>
</Col>
</Row>
<br />
<div className="nav-tabs-navigation">
<div className="nav-tabs-wrapper">
<Nav role="tablist" tabs>
<NavItem>
<NavLink
className={activeTab === "1" ? "active" : ""}
onClick={() => {
toggle("1");
}}
>
Follows
</NavLink>
</NavItem>
<NavItem>
<NavLink
className={activeTab === "2" ? "active" : ""}
onClick={() => {
toggle("2");
}}
>
Following
</NavLink>
</NavItem>
</Nav>
</div>
</div>
{/* Tab panes */}
<TabContent className="following" activeTab={activeTab}>
<TabPane tabId="1" id="follows">
<Row>
<Col className="ml-auto mr-auto" md="6">
<ul className="list-unstyled follows">
<li>
<Row>
<Col className="ml-auto mr-auto" lg="2" md="4" xs="4">
<img
alt="..."
className="img-circle img-no-padding img-responsive"
src={require("assets/img/faces/clem-onojeghuo-2.jpg")}
/>
</Col>
<Col className="ml-auto mr-auto" lg="7" md="4" xs="4">
<h6>
Flume <br />
<small>Musical Producer</small>
</h6>
</Col>
<Col className="ml-auto mr-auto" lg="3" md="4" xs="4">
<FormGroup check>
<Label check>
<Input
defaultChecked
defaultValue=""
type="checkbox"
/>
<span className="form-check-sign" />
</Label>
</FormGroup>
</Col>
</Row>
</li>
<hr />
<li>
<Row>
<Col className="mx-auto" lg="2" md="4" xs="4">
<img
alt="..."
className="img-circle img-no-padding img-responsive"
src={require("assets/img/faces/ayo-ogunseinde-2.jpg")}
/>
</Col>
<Col lg="7" md="4" xs="4">
<h6>
Banks <br />
<small>Singer</small>
</h6>
</Col>
<Col lg="3" md="4" xs="4">
<FormGroup check>
<Label check>
<Input defaultValue="" type="checkbox" />
<span className="form-check-sign" />
</Label>
</FormGroup>
</Col>
</Row>
</li>
</ul>
</Col>
</Row>
</TabPane>
<TabPane className="text-center" tabId="2" id="following">
<h3 className="text-muted">Not following anyone yet :(</h3>
<Button className="btn-round" color="warning">
Find artists
</Button>
</TabPane>
</TabContent>
</Container>
</div>
<DemoFooter />
</>
);
}
Example #19
| Source File: EditComponents.js From schematic-capture-fe with MIT License | 4 votes |
|
EditComponents = ({ buttonLabel, component }) => {
// console.log(component);
const [modal, setModal] = useState(false);
const toggle = () => setModal(!modal);
const dispatch = useDispatch();
const [editInfo, setEditInfo] = useState({
id: "",
descriptions: "",
manufacturer: "",
partNumber: "",
stockCode: "",
image: "",
resources: "",
cutsheet: "",
storesPartNumber: "",
});
const { updateComponent } = dispatchers;
useEffect(() => {
setEditInfo({
id: component.id,
descriptions: component.descriptions,
manufacturer: component.manufacturer,
partNumber: component.partNumber,
stockCode: component.stockCode,
image: component.image,
resources: component.resources,
cutsheet: component.cutsheet,
storesPartNumber: component.storesPartNumber,
});
}, []);
const { register } = useForm();
const onSubmit = (e) => {
e.preventDefault();
console.log(editInfo, "DATA!!!");
dispatch(updateComponent(editInfo.id, editInfo));
toggle();
};
const handleChange = (e) => {
setEditInfo({ ...editInfo, [e.target.name]: e.target.value });
};
const handleImageChange = (url) => {
setEditInfo({ ...editInfo, image: url });
};
const Update = () => {
return (
<>
<MH1></MH1>
<MBody>
{editInfo.descriptions === null || editInfo.manufacturer === null ? (
<Container>
{/* <FieldError>All Fields Required.</FieldError> */}
</Container>
) : (
<></>
)}
<Form onSubmit={onSubmit}>
<FormGroup>
<Label for="descriptions">Description</Label>
<Input
type="text"
value={editInfo.descriptions}
id="descriptions"
placeholder="Type Description"
name="descriptions"
onChange={handleChange}
autoComplete="off"
ref={register({})}
/>
</FormGroup>
<FormGroup>
<Label for="manufacturer">Manufacturer</Label>
<Input
type="text"
value={editInfo.manufacturer}
id="manufacturer"
placeholder="Type Manufacturer"
name="manufacturer"
onChange={handleChange}
autoComplete="off"
ref={register}
/>
</FormGroup>
<FormGroup>
<Label for="partNumber">Part Number</Label>
<Input
type="text"
value={editInfo.partNumber}
id="partNumber"
placeholder="Type Part Number"
name="partNumber"
onChange={handleChange}
autoComplete="off"
ref={register}
/>
</FormGroup>
<FormGroup>
<Label for="stockCode">Stock Code</Label>
<Input
type="text"
value={editInfo.stockCode}
id="stockCode"
placeholder="Type Stock Code"
name="stockCode"
onChange={handleChange}
autoComplete="off"
ref={register}
/>
</FormGroup>
<FormGroup>
<Label for="image">Image</Label>
{/* display the last part of the image URL which is the name of the image */}
<p>
Currently:{" "}
{editInfo.image &&
editInfo.image.split("/").slice(-1)[0].split("?")[0]}
</p>
<DropboxChooser
inPopup={true}
handleSelected={handleImageChange}
/>
</FormGroup>
<FormGroup>
<Label for="resources">Resource</Label>
<Input
type="text"
value={editInfo.resources}
id="resources"
placeholder="Type Resource"
name="resources"
onChange={handleChange}
autoComplete="off"
ref={register}
/>
</FormGroup>
<FormGroup>
<Label for="cutsheet">Cutsheet</Label>
<Input
type="text"
value={editInfo.cutsheet}
id="cutsheet"
placeholder="Type Cutsheet"
name="cutsheet"
onChange={handleChange}
autoComplete="off"
ref={register}
/>
</FormGroup>
<FormGroup>
<Label for="storespart#">Stores Part #</Label>
<Input
type="text"
value={editInfo.storesPartNumber}
id="storespart#"
placeholder="Type Stores Part #"
name="storesPartNumber"
onChange={handleChange}
autoComplete="off"
ref={register}
/>
</FormGroup>
<button
type="submit"
style={{ border: "1px solid gray", borderRadius: "5px" }}
>
Update Component
</button>
</Form>
</MBody>{" "}
</>
);
};
return (
<ModalCont>
<NewProjBtn onClick={toggle}>{buttonLabel}</NewProjBtn>
<Mod isOpen={modal} toggle={toggle}>
<h2 style={{ textAlign: "center", padding: "2rem 0" }}>
Edit Component
</h2>
<MBody>{Update(editInfo)}</MBody>
</Mod>
</ModalCont>
);
}
Example #20
| Source File: TrainingBoardEdit.js From GB-GCGC with MIT License | 4 votes |
|
render() {
const {redirect} = this.state;
if(redirect){
return <Redirect to={"/home"}/>
}
return (
<div className="container">
<Card>
<Card.Body>
<div className="row">
<Col>
<Card.Title>
<h5 align="center">
Notice Board-Training
<Tooltip title="Add">
<Link onClick={this.toggleModal}>
<FontAwesomeIcon icon={faPlus} size="xs" className="p-1 fa-lg" style={{backgroundColor:'#2A324B',color:'white',fontSize:'20',borderRadius:'10'}}/>
</Link>
</Tooltip>
</h5>
</Card.Title>
</Col>
</div>
<div>
<Table size="sm" responsive striped>
<thead className="p-3" style={{backgroundColor:'#2A324B',color:'white',fontSize:'24px'}}>
<tr>
<th>From</th>
<th>To</th>
<th>Name of the Programme</th>
<th>Status</th>
<th>Operations</th>
</tr>
</thead>
<tbody className="p-1">
{this.userList()}
</tbody>
</Table>
</div>
</Card.Body>
</Card>
<Modal isOpen={this.state.isModalOpen} toggle={this.toggleModal}>
<ModalHeader toggle={this.toggleModal}>
Add Training Event
</ModalHeader>
<ModalBody>
<Form onSubmit={this.handleSubmit}>
<FormGroup>
<Label htmlfor="username">Year Of Passing</Label>
<Input
type="text"
id="YOP"
value ={this.state.YOP}
name="YOP"
onChange={this.onChangeYOP}
/>
</FormGroup>
<FormGroup>
<Label htmlfor="program">Name Of The Program</Label>
<Input type="text" id="program" value={this.state.program} name="program" onChange={this.onChangeProgram} />
</FormGroup>
<FormGroup>
<Label htmlFor="from-date"> From </Label>
<Input type="date" id="from-date" name="from-date" value={this.state.from_date} onChange={this.onChangeFromDate}/>
</FormGroup>
<FormGroup>
<Label htmlFor="to-date"> To </Label>
<Input type="date" id="to-date" name="to-date" value={this.state.to_date} onChange={this.onChangeToDate}/>
</FormGroup>
<Button type="submit" value="submit" color="primary">
Submit
</Button>
</Form>
</ModalBody>
</Modal>
{/* <Modal isOpen={this.state.isModalOpen1} toggle={this.toggleModal1}>
<ModalHeader toggle={this.toggleModal1}>
Edit Training Event
</ModalHeader>
<ModalBody>
<Form onSubmit={this.handleSubmit}>
<FormGroup>
<Label htmlfor="username">Year Of Passing</Label>
<Input
type="text" id="YOP" value ={item.YOP} name="YOP" onChange={this.onChangeYOP}
/>
{console.log("item.name_of_the_program"), console.log(index+1)}
</FormGroup>
<FormGroup>
<Label htmlfor="program">Name Of The Program</Label>
<Input key={index} type="text" id="program" value={item.name_of_the_program} name="program" onChange={this.onChangeProgram} />
</FormGroup>
<FormGroup>
<Label htmlFor="from-date"> From </Label>
<Input type="date" id="from-date" name="from-date" value={this.state.from_date} onChange={this.onChangeFromDate}/>
</FormGroup>
<FormGroup>
<Label htmlFor="to-date"> To </Label>
<Input type="date" id="to-date" name="to-date" value={this.state.to_date} onChange={this.onChangeToDate}/>
</FormGroup>
<Button type="submit" value="submit" color="primary">
Submit
</Button>
</Form>
</ModalBody>
</Modal>*/}
</div>
);
}
Example #21
| Source File: createJob.page.js From hiring-system with GNU General Public License v3.0 | 4 votes |
|
CreateJob = () => {
const { handleSubmit, watch, errors, control, getValues } = useForm({
mode: "all",
reValidateMode: "onChange",
});
const [selectedPostDate, setSelectedPostDate] = useState();
const watchDate = watch("jobPostDate");
const onSubmit = (data) => {
// code to submit form
console.log(data);
};
useEffect(() => {
if (!getValues("jobPostDate")) {
return;
}
const selectedDate = new Date(getValues("jobPostDate"));
setSelectedPostDate(selectedDate.toDateString());
}, [watchDate]);
return (
<>
<div className="create-job-container" style={styles.pageContainer}>
<div>
<Card style={styles.cardContainer}>
<CardBody>
<CardTitle style={styles.section}>
<h3> Create New Job</h3>
</CardTitle>
<Form
style={styles.formContainer}
onSubmit={handleSubmit(onSubmit)}
>
<FormGroup>
<Controller
as={Input}
type="text"
name="jobTitle"
control={control}
rules={{ required: true }}
placeholder="Enter Job Title"
/>
{errors.jobTitle && (
<span className="error-text">This field is required</span>
)}
</FormGroup>
<FormGroup>
<Controller
as={Input}
type="text"
name="jobDesc"
control={control}
rules={{ required: true }}
placeholder="Enter Job Description"
/>
{errors.jobDesc && (
<span className="error-text">This field is required</span>
)}
</FormGroup>
<FormGroup>
<Controller
name="skills"
as={Select}
options={skills}
control={control}
rules={{ required: true }}
isMulti
placeholder="Select Skills"
/>
{errors.skills && (
<span className="error-text">This field is required</span>
)}
</FormGroup>
<FormGroup>
<Controller
as={Input}
type="text"
name="companyName"
control={control}
rules={{ required: true }}
placeholder="Enter Company Name"
/>
{errors.companyName && (
<span className="error-text">This field is required</span>
)}
</FormGroup>
<FormGroup style={styles.relativeEle}>
<Input
type="text"
name="jobPostDateInput"
placeholder="Select Job Post Date"
value={selectedPostDate}
/>
{errors.jobPostDate && (
<span className="error-text">This field is required</span>
)}
<Controller
name="jobPostDate"
as={DatePicker}
control={control}
rules={{ required: true }}
maxDate={new Date()}
clearIcon={null}
className="app-date-custom-style"
/>
</FormGroup>
<FormGroup>
<Controller
as={Input}
type="text"
name="workLocation"
control={control}
rules={{ required: true }}
placeholder="Enter Work Location"
/>
{errors.workLocation && (
<span className="error-text">This field is required</span>
)}
</FormGroup>
<FormGroup>
<Controller
name="benefits"
as={Select}
options={benefits}
control={control}
rules={{ required: true }}
placeholder="Select Benefits"
isMulti
/>
{errors.benefits && (
<span className="error-text">This field is required</span>
)}
</FormGroup>
<FormGroup>
<Controller
name="workVisa"
as={Select}
options={visaSelection}
control={control}
rules={{ required: true }}
placeholder="Will Sponsor Work Visa"
/>
{errors.workVisa && (
<span className="error-text">This field is required</span>
)}
</FormGroup>
<div style={styles.section}>
<Button type="submit" variant="primary">
Create New Job
</Button>
</div>
</Form>
</CardBody>
</Card>
</div>
</div>
</>
);
}
Example #22
| Source File: AddContact.js From ReactJS-Projects with MIT License | 4 votes |
|
AddContact = () => {
const { state, dispatch } = useContext(ContactContext)
const { contactToUpdate, contactToUpdateKey } = state
const history = useHistory()
const [name, setName] = useState("")
const [email, setEmail] = useState("")
const [phoneNumber, setPhoneNumber] = useState("")
const [address, setAddress] = useState("")
const [isUploading, setIsUploading] = useState(false)
const [downloadUrl, setDownloadUrl] = useState(null)
const [star, setStar] = useState(false)
const [isUpdate, setIsUpdate] = useState(false)
useEffect(() => {
if (contactToUpdate) {
setName(contactToUpdate.name)
setEmail(contactToUpdate.email)
setPhoneNumber(contactToUpdate.phoneNumber)
setAddress(contactToUpdate.address)
setStar(contactToUpdate.star)
setDownloadUrl(contactToUpdate.picture)
setIsUpdate(true)
}
}, [contactToUpdate])
const imagePicker = async e => {
try {
const file = e.target.files[0]
var metadata = {
contentType: file.type
}
let resizedImage = await readAndCompressImage(file, imageConfig)
const storageRef = await firebase.storage().ref()
var upload = storageRef.child('iamges/' + file.name).put(resizedImage, metadata)
upload.on(
firebase.storage.TaskEvent.STATE_CHANGED,
snapshot => {
setIsUploading(true)
var progress = (snapshot.bytesTransferred / snapshot.totalBytes) * 100
switch (snapshot.state) {
case firebase.storage.TaskState.PAUSED:
setIsUploading(false)
console.log('Uploading Paused.')
break;
case firebase.storage.TaskState.RUNNING:
console.log('Uploading In Progress.')
break;
case firebase.storage.TaskState.FAILED:
setIsUploading(false)
console.log('Uploading Failed.')
break;
case firebase.storage.TaskState.SUCCESS:
console.log('Uploading Successful.')
break;
}
if (progress == 100) {
setIsUploading(false);
toast("Uploaded!", { type: "success" })
}
},
error => {
toast('Something went wrong.', { type: 'error' })
}, () => {
upload.snapshot.ref.getDownloadURL().then(downloadUrl => {
setDownloadUrl(downloadUrl)
}).catch(err => console.log(err))
}
)
} catch (err) {
console.log(err)
toast('Something went wrong', { type: "error" })
}
}
const addContact = async () => {
try {
firebase.database().ref('contacts/' + v4()).set({
name,
email,
phoneNumber,
address,
picture: downloadUrl,
star
})
} catch (err) {
console.log(err)
}
}
const updateContact = async () => {
try {
firebase.database().ref('contacts/' + contactToUpdateKey).set(
{
name,
email,
phoneNumber,
address,
picture: downloadUrl,
star
}
)
} catch (err) {
console.log(err)
toast('Failed to update', { type: 'error' })
}
}
const handleSubmit = e => {
e.preventDefault()
isUpdate ? updateContact() : addContact()
toast('Success', { type: 'success' })
dispatch({
type: CONTACT_TO_UPDATE,
payload: null,
key: null
})
history.push("/")
}
return (
<Container fluid className="mt-5">
<Row>
<Col md="6" className="offset-md-3 p-2">
<Form onSubmit={handleSubmit}>
<div className="text-center">
{isUploading ? (
<Spinner type="grow" color="primary" />
) : (
<div>
<label htmlFor="imagepicker" className="">
<img src={downloadUrl} alt="" className="profile" />
</label>
<input
type="file"
name="image"
id="imagepicker"
accept="image/*"
multiple={false}
onChange={e => imagePicker(e)}
className="hidden"
/>
</div>
)}
</div>
<FormGroup>
<Input
type="text"
name="name"
id="name"
placeholder="Name"
value={name}
onChange={e => setName(e.target.value)}
/>
</FormGroup>
<FormGroup>
<Input
type="email"
name="email"
id="email"
value={email}
onChange={e => setEmail(e.target.value)}
placeholder="Email"
/>
</FormGroup>
<FormGroup>
<Input
type="number"
name="number"
id="phonenumber"
value={phoneNumber}
onChange={e => setPhoneNumber(e.target.value)}
placeholder="phone number"
/>
</FormGroup>
<FormGroup>
<Input
type="textarea"
name="area"
id="area"
value={address}
onChange={e => setAddress(e.target.value)}
placeholder="address"
/>
</FormGroup>
<FormGroup check>
<Label check>
<Input
type="checkbox"
onChange={() => {
setStar(!star)
}}
checked={star}
/>{" "}
<span className="text-right">Mark as Star</span>
</Label>
</FormGroup>
<Button
type="submit"
color="primary"
block
className="text-uppercase"
>
{isUpdate ? "Update Contact" : "Add Contact"}
</Button>
</Form>
</Col>
</Row>
</Container>
)
}
Example #23
| Source File: blog.component.js From blogApp with MIT License | 4 votes |
|
render() {
return (
<div className='pt-2 px-3'>
<div className='row mr-auto ml-0 mb-4 mt-0'>
<Button
color='primary'
size='lg'
onClick={() => {
window.location.href = "/";
}}
style={{
width: "60px",
height: "60px",
borderRadius: "50%",
}}>
<FontAwesomeIcon icon={faArrowLeft} />
</Button>
</div>
{!this.state.loaded ? (
<ReactLoading
type={"spin"}
color={"orange"}
height={"100vh"}
width={"40%"}
className='loading'
/>
) : (
<Card id='blog' className='p-2 col-12 singleBlog'>
<CardImg
src={this.state.image}
alt='Card image cap'
className='img-thumbnail'
/>
<CardBody>
<CardTitle className='text-primary'>
<h5>
{this.state.title}
<span className='float-right text-secondary'>
{"-"}
<em>@{this.state.author.username}</em>
</span>
</h5>
</CardTitle>
{this.state.date !== "" && (
<CardSubtitle className='text-dark'>
<FontAwesomeIcon
icon={faCalendar}
className='mr-2'
/>
{new Intl.DateTimeFormat("en-US", {
month: "long",
day: "numeric",
year: "numeric",
hour: "numeric",
minute: "numeric",
}).format(Date.parse(this.state.date))}
<span className='float-right'>
<FontAwesomeIcon
className='text-danger'
icon={faHeart}
/>{" "}
{this.state.likes.length}
</span>
</CardSubtitle>
)}
<CardText>
<br />
{this.state.body}
</CardText>
</CardBody>
<CardFooter>
{this.props.user !== null &&
this.props.user._id ===
this.state.author.id && (
<div
style={{ display: "flex" }}
className='p-1'>
<Button
className='btn btn-danger mr-1'
style={{ width: "48%" }}
onClick={this.deleteBlog}>
Delete
</Button>{" "}
<Button
className='btn btn-warning ml-1'
style={{ width: "48%" }}
onClick={this.toggleModal}>
Edit
</Button>
</div>
)}
</CardFooter>
</Card>
)}
<Modal
isOpen={this.state.isModalOpen}
fade={false}
toggle={this.toggleModal}>
<ModalHeader toggle={this.toggleModal}>
Add a blog
</ModalHeader>
<Form onSubmit={this.onSubmit}>
<ModalBody>
<FormGroup>
<Label htmlFor='title'>title</Label>
<Input
type='text'
id='title'
onChange={this.ontitleChange}
value={this.state.title}
name='title'
/>
</FormGroup>
<FormGroup>
<Label htmlFor='imageURL'>imageURL</Label>
<Input
type='text'
id='imageURL'
onChange={this.onimgChange}
value={this.state.image}
name='imageURL'
/>
</FormGroup>
<FormGroup>
<Label htmlFor='body'>body</Label>
<Input
type='textarea'
id='body'
onChange={this.onbodyChange}
value={this.state.body}
name='body'
/>
</FormGroup>
</ModalBody>
<ModalFooter>
<Button
type='submit'
value='submit'
color='primary'>
UPDATE BLOG
</Button>
</ModalFooter>
</Form>
</Modal>
</div>
);
}
Example #24
| Source File: add.js From hivemind with Apache License 2.0 | 4 votes |
|
PopperCard = ({ el, poppers }) => {
const { user } = useUser()
const [spinnerDisplay, setSpinnerDisplay] = useState('d-none')
const [title, setTitle] = useState('')
const inputRef = useRef(null)
useEffect(() => {
if (inputRef.current) {
inputRef.current.focus()
}
}, [])
const handleChange = (event) => {
setTitle(event.target.value)
}
const handleSubmit = async (event) => {
event.preventDefault()
setSpinnerDisplay('d-block')
const rootId = el.cy().nodes().id()
const key = rootId.split('/')[1]
const { ok, data: result, status } = await fetcher(
`/api/nodes?parentId=${el.id()}`,
user.token,
'POST',
JSON.stringify({ title })
)
const options = {
place: 'tr',
autoDismiss: 7,
}
if (ok) {
mutate([`/api/timeline/events?key=${key}`, user.token], null, true)
mutate([`/api/mindmaps/${key}?timestamp=`, user.token], null, true)
options.message = 'Added node!'
options.type = 'success'
} else {
options.message = `Failed to add node! - ${JSON.stringify(
result || status
)}`
options.type = 'danger'
}
if (window.notify) {
window.notify(options)
}
setSpinnerDisplay('d-none')
removePopper(el.id(), `popper-${el.id()}`, poppers)
}
return (
<Card className="border-dark">
<CardBody>
<CardTitle
tag="h5"
className="mw-100 mb-4"
style={{ minWidth: '50vw' }}
>
Add Child Node{' '}
<small className="text-muted">(of {el.data('title')})</small>
<CloseButton
divKey={`popper-${el.id()}`}
popperKey={el.id()}
poppers={poppers}
/>
</CardTitle>
<CardText tag="div" className="mw-100">
<Form onSubmit={handleSubmit} inline>
<FormGroup className="mb-2 mr-sm-2 mb-sm-0">
<Input
type="text"
name="title"
id="title"
placeholder="Type a title and hit ⏎"
value={title}
onChange={handleChange}
required
maxLength="50"
autoComplete="off"
innerRef={inputRef}
/>
</FormGroup>
<FormGroup className={spinnerDisplay}>
<Spinner />
</FormGroup>
</Form>
</CardText>
</CardBody>
</Card>
)
}
Example #25
| Source File: newAuctionAssembler.js From ErgoAuctionHouse with MIT License | 4 votes |
|
render() {
return (
<Modal
size="lg"
isOpen={this.props.isOpen}
toggle={this.props.close}
>
<ModalHeader toggle={this.props.close}>
<span className="fsize-1 text-muted">New Auction</span>
</ModalHeader>
<ModalBody>
<Container>
<Row>
<SyncLoader
css={override}
size={8}
color={'#0086d3'}
loading={this.state.modalLoading}
/>
</Row>
<Form>
{isYoroi() && <Row>
<Col>
<FormGroup>
<Label for="bid">Token to Auction</Label>
<Select
className="basic-single"
classNamePrefix="select"
isDisabled={false}
isLoading={this.state.tokenLoading}
defaultValue={this.state.selectedToken}
value={this.state.selectedToken}
isClearable={false}
isRtl={false}
isSearchable={true}
name="color"
options={this.state.tokens}
onChange={(changed) => this.setState({selectedToken: changed})}
/>
</FormGroup>
<FormText>
You own these tokens in your Yoroi wallet, select the one you'd like to auction.
</FormText>
</Col>
{this.state.selectedToken !== null && this.state.selectedToken.amount > 1 && <Col>
<FormGroup>
<Label for="auctionStep">
Select Amount
</Label>
<InputGroup>
<Input
type="number"
value={this.state.tokenAmount}
onChange={(e) => {
this.setState({
tokenAmount: e.target.value,
});
}}
/>
</InputGroup>
<FormText>
You have {this.state.selectedToken.amount} of this token, specify how many
of those you want to auction.
</FormText>
</FormGroup>
</Col>}
</Row>}
<Row>
<Col md="6">
<FormGroup>
<Label for="bid">Minimum Bid</Label>
<InputGroup>
<Input
type="text"
invalid={
currencyToLong(
this.state.initialBid,
this.state.currency.decimal
) < this.state.currency.minSupported
}
value={
this.state.initialBid
}
onChange={(e) => {
if (
isFloat(
e.target.value
)
) {
this.setState({
initialBid:
e.target
.value,
});
}
}}
id="bid"
/>
<InputGroupAddon addonType="append">
<select onChange={(curr) => this.changeCurrency(curr.target.value)}>
{Object.keys(supportedCurrencies).map(res => {
return <option>{res}</option>
})}
</select>
</InputGroupAddon>
<FormFeedback invalid>
Must be at
least {longToCurrency(this.state.currency.minSupported, this.state.currency.decimal)} {this.state.currency.name}
</FormFeedback>
</InputGroup>
<FormText>
<b>Specify the currency</b> and the minimum bid amount; the first bid will be at least this amount. Note that you need a little bit
of this currency in your wallet to start the auction!
</FormText>
</FormGroup>
</Col>
<Col md="6">
<FormGroup>
<Label for="duration">
Auction End Time
</Label>
<InputGroup>
<DateTimePicker value={this.state.endTime} onChange={(tm => {
this.setState({endTime: tm})
})}/></InputGroup>
<FormText>
Your auction will end at this time.
</FormText>
</FormGroup>
</Col>
</Row>
<div className="divider"/>
<Row>
<Col md="6">
<FormGroup>
<Label for="auctionStep">
Minimum Step
</Label>
<InputGroup>
<Input
type="text"
invalid={
currencyToLong(this.state.auctionStep, this.state.currency.decimal) < this.state.currency.minSupported
}
value={
this.state.auctionStep
}
onChange={(e) => {
if (
isFloat(
e.target.value
)
) {
this.setState({
auctionStep:
e.target
.value,
});
}
}}
id="auctionStep"
/>
<InputGroupAddon addonType="append">
<InputGroupText>
{this.state.currency.name}
</InputGroupText>
</InputGroupAddon>
<FormFeedback invalid>
Must be at
least {longToCurrency(this.state.currency.minSupported, this.state.currency.decimal)} {this.state.currency.name}
</FormFeedback>
</InputGroup>
<FormText>
The bidder must increase the bid
by at least this value.
</FormText>
</FormGroup>
</Col>
<Col md="6">
<FormGroup>
<Label>
Instant Buy Amount
</Label>
<InputGroup>
<InputGroupAddon addonType="prepend">
<InputGroupText>
<Label check>
<Input
checked={
this.state
.enableInstantBuy
}
onChange={(e) =>
this.setState(
{
enableInstantBuy:
e
.target
.checked,
}
)
}
className="mr-2"
addon
type="checkbox"
/>
Enable instant buy
</Label>
</InputGroupText>
</InputGroupAddon>
<Input
type="text"
invalid={
this.state.enableInstantBuy && currencyToLong(this.state.instantAmount, this.state.currency.decimal) <= currencyToLong(this.state.initialBid, this.state.currency.decimal)
}
disabled={!this.state.enableInstantBuy}
value={
this.state.instantAmount
}
onChange={(e) => {
if (
isFloat(
e.target.value
)
) {
this.setState({
instantAmount:
e.target
.value,
});
}
}}
id="auctionStep"
/>
<InputGroupAddon addonType="append">
<InputGroupText>
{this.state.currency.name}
</InputGroupText>
</InputGroupAddon>
<FormFeedback invalid>
Instant buy amount must be bigger than the Minimum bid!
</FormFeedback>
</InputGroup>
<FormText>
If you enable this, anyone can instantly win your auction by bidding by at
least this
amount.
</FormText>
</FormGroup>
</Col>
</Row>
<div className="divider"/>
<FormGroup>
<Label for="description">Description</Label>
<Input
invalid={
this.state.description !== undefined &&
this.state.description.length > 250
}
value={this.state.description}
onChange={(event) =>
this.setState({
description: event.target.value,
})
}
type="textarea"
name="text"
id="description"
/>
<FormFeedback invalid>
At most 250 characters!
</FormFeedback>
<FormText>
You can explain about the token you are
auctioning here.
</FormText>
</FormGroup>
<FormText>
<b data-tip='ok'>* Auto Extend feature is by default enabled for all auctions.</b>
</FormText>
</Form>
</Container>
</ModalBody>
<ModalFooter>
<Button
className="ml mr-2 btn-transition"
color="secondary"
onClick={this.props.close}
>
Cancel
</Button>
<Button
className="mr-2 btn-transition"
color="secondary"
disabled={!this.canStartAuction() || this.state.tokenLoading}
onClick={() => this.startAuction()}
>
Create Auction
</Button>
</ModalFooter>
</Modal>
);
}
Example #26
| Source File: Header.js From light-blue-react-template with MIT License | 4 votes |
|
render() {
return (
<Navbar className={`d-print-none `}>
<div className={s.burger}>
<NavLink
onClick={this.toggleSidebar}
className={`d-md-none ${s.navItem} text-white`}
href="#"
>
<BurgerIcon className={s.headerIcon} />
</NavLink>
</div>
<div className={`d-print-none ${s.root}`}>
<UncontrolledAlert
className={`${s.alert} mr-3 d-lg-down-none animate__animated animate__bounceIn animate__delay-1s`}
>
Check out Light Blue{" "}
<button
className="btn-link"
onClick={() => this.setState({ settingsOpen: true })}
>
<SettingsIcon className={s.settingsIcon} />
</button>{" "}
on the right!
</UncontrolledAlert>
<Collapse
className={`${s.searchCollapse} ml-lg-0 mr-md-3`}
isOpen={this.state.searchOpen}
>
<InputGroup
className={`${s.navbarForm} ${
this.state.searchFocused ? s.navbarFormFocused : ""
}`}
>
<InputGroupAddon addonType="prepend" className={s.inputAddon}>
<InputGroupText>
<i className="fa fa-search" />
</InputGroupText>
</InputGroupAddon>
<Input
id="search-input-2"
placeholder="Search..."
className="input-transparent"
onFocus={() => this.setState({ searchFocused: true })}
onBlur={() => this.setState({ searchFocused: false })}
/>
</InputGroup>
</Collapse>
<Form className="d-md-down-none mr-3 ml-3" inline>
<FormGroup>
<InputGroup className={`input-group-no-border ${s.searchForm}`}>
<InputGroupAddon addonType="prepend">
<InputGroupText className={s.inputGroupText}>
<SearchIcon className={s.headerIcon} />
</InputGroupText>
</InputGroupAddon>
<Input
id="search-input"
className="input-transparent"
placeholder="Search Dashboard"
/>
</InputGroup>
</FormGroup>
</Form>
<Nav className="ml-md-0">
<Dropdown
nav
isOpen={this.state.notificationsOpen}
toggle={this.toggleNotifications}
id="basic-nav-dropdown"
className={`${s.notificationsMenu}`}
>
<DropdownToggle nav caret style={{ color: "#C1C3CF", padding: 0 }}>
<span
className={`${s.avatar} rounded-circle thumb-sm float-left`}
>
<img src={avatar} alt="..." />
</span>
<span className={`small d-sm-down-none ${s.accountCheck}`}>Philip smith</span>
<Badge className={`d-sm-down-none ${s.badge}`} color="danger">
9
</Badge>
</DropdownToggle>
<DropdownMenu
right
className={`${s.notificationsWrapper} py-0 animate__animated animate__faster animate__fadeInUp`}
>
<Notifications />
</DropdownMenu>
</Dropdown>
<NavItem className="d-lg-none">
<NavLink
onClick={this.toggleSearchOpen}
className={s.navItem}
href="#"
>
<SearchIcon addId='header-search' className={s.headerIcon} />
</NavLink>
</NavItem>
<Dropdown
className="d-none d-sm-block"
nav
isOpen={this.state.messagesOpen}
toggle={this.toggleMessagesDropdown}
>
<DropdownToggle nav className={`d-sm-down-none ${s.navItem} text-white`}>
<MessageIcon className={s.headerIcon} />
</DropdownToggle>
<DropdownMenu className={`${s.dropdownMenu} ${s.messages}`}>
<DropdownItem>
<img className={s.image} src={sender1} alt="" />
<div className={s.details}>
<div>Jane Hew</div>
<div className={s.text}>Hey, John! How is it going? ...</div>
</div>
</DropdownItem>
<DropdownItem>
<img className={s.image} src={sender2} alt="" />
<div className={s.details}>
<div>Alies Rumiancaŭ</div>
<div className={s.text}>
I will definitely buy this template
</div>
</div>
</DropdownItem>
<DropdownItem>
<img className={s.image} src={sender3} alt="" />
<div className={s.details}>
<div>Michał Rumiancaŭ</div>
<div className={s.text}>
Is it really Lore ipsum? Lore ...
</div>
</div>
</DropdownItem>
<DropdownItem>
{/* eslint-disable-next-line */}
<a href="#" className="text-white">
See all messages <ArrowIcon className={s.headerIcon} maskName="messagesArrow" />
</a>
</DropdownItem>
</DropdownMenu>
</Dropdown>
<NavItem className={`${s.divider} d-none d-sm-block`} />
<Dropdown
className="d-none d-sm-block"
nav
isOpen={this.state.settingsOpen}
toggle={this.toggleSettingsDropdown}
>
<DropdownToggle nav className={`${s.navItem} text-white`}>
<SettingsIcon addId='header-settings' className={s.headerIcon} />
</DropdownToggle>
<DropdownMenu className={`${s.dropdownMenu} ${s.settings}`}>
<h6>Sidebar on the</h6>
<ButtonGroup size="sm">
<Button
color="primary"
onClick={() => this.moveSidebar("left")}
className={
this.props.sidebarPosition === "left" ? "active" : ""
}
>
Left
</Button>
<Button
color="primary"
onClick={() => this.moveSidebar("right")}
className={
this.props.sidebarPosition === "right" ? "active" : ""
}
>
Right
</Button>
</ButtonGroup>
<h6 className="mt-2">Sidebar</h6>
<ButtonGroup size="sm">
<Button
color="primary"
onClick={() => this.toggleVisibilitySidebar("show")}
className={
this.props.sidebarVisibility === "show" ? "active" : ""
}
>
Show
</Button>
<Button
color="primary"
onClick={() => this.toggleVisibilitySidebar("hide")}
className={
this.props.sidebarVisibility === "hide" ? "active" : ""
}
>
Hide
</Button>
</ButtonGroup>
</DropdownMenu>
</Dropdown>
<Dropdown
className="d-none d-sm-block"
nav
isOpen={this.state.supportOpen}
toggle={this.toggleSupportDropdown}
>
<DropdownToggle nav className={`${s.navItem} text-white`}>
<BellIcon className={s.headerIcon} />
<div className={s.count}></div>
</DropdownToggle>
<DropdownMenu right className={`${s.dropdownMenu} ${s.support}`}>
<DropdownItem>
<Badge color="danger">
<i className="fa fa-bell-o" />
</Badge>
<div className={s.details}>Check out this awesome ticket</div>
</DropdownItem>
<DropdownItem>
<Badge color="warning">
<i className="fa fa-question-circle" />
</Badge>
<div className={s.details}>What is the best way to get ...</div>
</DropdownItem>
<DropdownItem>
<Badge color="success">
<i className="fa fa-info-circle" />
</Badge>
<div className={s.details}>
This is just a simple notification
</div>
</DropdownItem>
<DropdownItem>
<Badge color="info">
<i className="fa fa-plus" />
</Badge>
<div className={s.details}>12 new orders has arrived today</div>
</DropdownItem>
<DropdownItem>
<Badge color="danger">
<i className="fa fa-tag" />
</Badge>
<div className={s.details}>
One more thing that just happened
</div>
</DropdownItem>
<DropdownItem>
{/* eslint-disable-next-line */}
<a href="#" className="text-white">
See all tickets <ArrowIcon className={s.headerIcon} maskName="bellArrow" />
</a>
</DropdownItem>
</DropdownMenu>
</Dropdown>
<NavItem>
<NavLink
onClick={this.doLogout}
className={`${s.navItem} text-white`}
href="#"
>
<PowerIcon className={s.headerIcon} />
</NavLink>
</NavItem>
</Nav>
</div>
</Navbar>
);
}
Example #27
| Source File: Header.js From sofia-react-template with MIT License | 4 votes |
|
Header = (props) => {
const [menuOpen, setMenuOpen] = useState(false);
const [notificationsOpen, setNotificationsOpen] = useState(false);
const toggleNotifications = () => {
setNotificationsOpen(!notificationsOpen);
}
const toggleMenu = () => {
setMenuOpen(!menuOpen);
}
const toggleSidebar = () => {
if (props.sidebarOpened) {
props.dispatch(closeSidebar());
} else {
const paths = props.location.pathname.split('/');
paths.pop();
props.dispatch(openSidebar());
}
}
const doLogout = () => {
props.dispatch(logoutUser());
}
return (
<Navbar className={`${s.root} d-print-none`}>
<div>
<NavLink
onClick={() => toggleSidebar()}
className={`d-md-none mr-3 ${s.navItem}`}
href="#"
>
<MenuIcon className={s.menuIcon} />
</NavLink>
</div>
<Form className="d-none d-sm-block" inline>
<FormGroup>
<InputGroup className='input-group-no-border'>
<Input id="search-input" placeholder="Search Dashboard" className='focus'/>
<InputGroupAddon addonType="prepend">
<span>
<SearchBarIcon/>
</span>
</InputGroupAddon>
</InputGroup>
</FormGroup>
</Form>
<Nav className="ml-auto">
<NavItem className="d-sm-none mr-4">
<NavLink
className=""
href="#"
>
<SearchIcon />
</NavLink>
</NavItem>
<Dropdown nav isOpen={menuOpen} toggle={() => toggleMenu()} className="tutorial-dropdown mr-2 mr-sm-3">
<DropdownToggle nav>
<div className={s.navbarBlock}>
<i className={'eva eva-bell-outline'}/>
<div className={s.count}></div>
</div>
</DropdownToggle>
<DropdownMenu right className="navbar-dropdown notifications-dropdown" style={{ width: "340px" }}>
<DropdownItem><img src={basketIcon} alt="Basket Icon"/><span>12 new orders have arrived today</span></DropdownItem>
<DropdownItem>
<div>
<div className="d-flex flex-row mb-1">
<img src={mariaImage} alt="Maria" className={s.mariaImage} />
<div className="d-flex flex-column">
<p className="body-3">Maria</p>
<p className="label muted">15 min ago</p>
</div>
</div>
<img src={notificationImage} alt="Notification Icon" className={s.notificationImage}/>
<p className="body-2 muted">It is just a simple image that can define th..</p>
</div>
</DropdownItem>
<DropdownItem><img src={calendarIcon} alt="Calendar Icon"/><span>1 event has been canceled and ...</span></DropdownItem>
<DropdownItem><img src={envelopeIcon} alt="Envelope Icon"/><span>you have 2 new messages</span></DropdownItem>
</DropdownMenu>
</Dropdown>
<Dropdown isOpen={notificationsOpen} toggle={() => toggleNotifications()} nav id="basic-nav-dropdown" className="ml-3">
<DropdownToggle nav caret className="navbar-dropdown-toggle">
<span className={`${s.avatar} rounded-circle float-left mr-2`}>
<img src={userImg} alt="User"/>
</span>
<span className="small d-none d-sm-block ml-1 mr-2 body-1">Christina Carey</span>
</DropdownToggle>
<DropdownMenu className="navbar-dropdown profile-dropdown" style={{ width: "194px" }}>
<DropdownItem className={s.dropdownProfileItem}><ProfileIcon/><span>Profile</span></DropdownItem>
<DropdownItem className={s.dropdownProfileItem}><TasksIcon/><span>Tasks</span></DropdownItem>
<DropdownItem className={s.dropdownProfileItem}><MessagesIcon/><span>Messages</span></DropdownItem>
<NavItem>
<NavLink onClick={() => doLogout()} href="#">
<button className="btn btn-primary rounded-pill mx-auto logout-btn" type="submit"><img src={logoutIcon} alt="Logout"/><span className="ml-1">Logout</span></button>
</NavLink>
</NavItem>
</DropdownMenu>
</Dropdown>
</Nav>
</Navbar>
)
}
Example #28
| Source File: Rightbar.js From gedge-platform with Apache License 2.0 | 4 votes |
|
render() {
return (
<React.Fragment>
<div className="right-bar">
<SimpleBar style={{ height: "900px" }}>
<div data-simplebar className="h-100">
<div className="rightbar-title px-3 py-4">
<Link to="#" onClick={this.hideRightbar} className="right-bar-toggle float-right">
<i className="mdi mdi-close noti-icon"></i>
</Link>
<h5 className="m-0">Settings</h5>
</div>
<hr className="my-0" />
<div className="p-4">
<div className="radio-toolbar">
<span className="mb-2 d-block">Layouts</span>
<Input
type="radio"
id="radioVertical"
name="radioFruit"
value="vertical"
checked={this.state.layoutType === "vertical"}
onChange={this.changeLayout}
/>
<Label htmlFor="radioVertical">Vertical</Label>
{" "}
<Input
type="radio"
id="radioHorizontal"
name="radioFruit"
value="horizontal"
checked={this.state.layoutType === "horizontal"}
onChange={this.changeLayout}
/>
<Label htmlFor="radioHorizontal">Horizontal</Label>
</div>
<hr className="mt-1" />
<div className="radio-toolbar">
<span className="mb-2 d-block" id="radio-title">
Layout Width
</span>
<Input
type="radio"
id="radioFluid"
name="radioWidth"
value="fluid"
checked={this.state.layoutWidth !== "boxed"}
onChange={this.changeLayoutWidth}
/>
<Label htmlFor="radioFluid">Fluid</Label>
{" "}
<Input
type="radio"
id="radioBoxed"
name="radioWidth"
value="boxed"
checked={this.state.layoutWidth === "boxed"}
onChange={this.changeLayoutWidth}
/>
<Label htmlFor="radioBoxed">Boxed</Label>
</div>
<hr className="mt-1" />
<div className="radio-toolbar">
<span className="mb-2 d-block" id="radio-title">
Topbar Theme
</span>
<Input
type="radio"
id="radioThemeLight"
name="radioTheme"
value="light"
checked={this.state.topbarTheme === "light"}
onChange={this.changeTopbarTheme}
/>
<Label htmlFor="radioThemeLight">Light</Label>
{" "}
<Input
type="radio"
id="radioThemeDark"
name="radioTheme"
value="dark"
checked={this.state.topbarTheme === "dark"}
onChange={this.changeTopbarTheme}
/>
<Label htmlFor="radioThemeDark">Dark</Label>
{" "}
</div>
{this.state.layoutType === "vertical" ? (
<React.Fragment>
<hr className="mt-1" />
<div className="radio-toolbar">
<span className="mb-2 d-block" id="radio-title">
Left Sidebar Type
</span>
<Input
type="radio"
id="sidebarDefault"
name="sidebarType"
value="default"
checked={this.state.sidebarType === "default"}
onChange={this.changeLeftSidebarType}
/>
<Label htmlFor="sidebarDefault">Default</Label>
{" "}
<Input
type="radio"
id="sidebarCompact"
name="sidebarType"
value="compact"
checked={this.state.sidebarType === "compact"}
onChange={this.changeLeftSidebarType}
/>
<Label htmlFor="sidebarCompact">Compact</Label>
{" "}
<Input
type="radio"
id="sidebarIcon"
name="sidebarType"
value="icon"
checked={this.state.sidebarType === "icon"}
onChange={this.changeLeftSidebarType}
/>
<Label htmlFor="sidebarIcon">Icon</Label>
</div>
<hr className="mt-1" />
<div className="radio-toolbar">
<span className="mb-2 d-block" id="radio-title">
Left Sidebar Type
</span>
<Input
type="radio"
id="leftsidebarThemelight"
name="leftsidebarTheme"
value="light"
checked={this.state.sidebarTheme === "light"}
onChange={this.changeLeftSidebarTheme}
/>
<Label htmlFor="leftsidebarThemelight">Light</Label>
{" "}
<Input
type="radio"
id="leftsidebarThemedark"
name="leftsidebarTheme"
value="dark"
checked={this.state.sidebarTheme === "dark"}
onChange={this.changeLeftSidebarTheme}
/>
<Label htmlFor="leftsidebarThemedark">Dark</Label>
{" "}
<Input
type="radio"
id="leftsidebarThemecolored"
name="leftsidebarTheme"
value="colored"
checked={this.state.sidebarTheme === "colored"}
onChange={this.changeLeftSidebarTheme}
/>
<Label htmlFor="leftsidebarThemecolored">Colored</Label>
</div>
<hr className="mt-1" />
</React.Fragment>
) : null}
<FormGroup>
<span className="mb-2 d-block" id="radio-title">
Preloader
</span>
<div className="custom-control custom-switch">
<Input
type="checkbox"
className="custom-control-input checkbox"
id="checkbox_1"
checked={this.props.isPreloader}
onChange={this.changeThemePreloader}
/>
<Label
className="custom-control-label"
htmlFor="checkbox_1"
>
Preloader
</Label>
</div>
</FormGroup>
<h6 className="text-center">Choose Layouts</h6>
<div className="mb-2">
<Link to="//skote-v-light.react.themesbrand.com" target="_blank">
<img
src={layout1}
className="img-fluid img-thumbnail"
alt=""
/>
</Link>
</div>
<div className="mb-2">
<Link to="//skote-v-dark.react.themesbrand.com" target="_blank">
<img
src={layout2}
className="img-fluid img-thumbnail"
alt=""
/>
</Link>
</div>
<div className="mb-2">
<Link to="//skote-v-rtl.react.themesbrand.com" target="_blank">
<img
src={layout3}
className="img-fluid img-thumbnail"
alt=""
/>
</Link>
</div>
<Link to="#" className="btn btn-primary btn-block mt-3" target="_blank">
<i className="mdi mdi-cart mr-1"></i> Purchase Now
</Link>
</div>
</div>
</SimpleBar>
</div>
<div className="rightbar-overlay"></div>
</React.Fragment>
);
}
Example #29
| Source File: index.js From gobench with Apache License 2.0 | 4 votes |
|
render() {
return (
<div>
<h5 className="mb-4">
<strong>Default Form</strong>
</h5>
<div className="mb-5">
<Form>
<FormGroup>
<Label for="exampleEmail">Email</Label>
<Input type="email" name="email" id="exampleEmail" placeholder="with a placeholder" />
</FormGroup>
<FormGroup>
<Label for="examplePassword">Password</Label>
<Input
type="password"
name="password"
id="examplePassword"
placeholder="password placeholder"
/>
</FormGroup>
<FormGroup>
<Label for="exampleSelect">Select</Label>
<Input type="select" name="select" id="exampleSelect">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</Input>
</FormGroup>
<FormGroup>
<Label for="exampleSelectMulti">Select Multiple</Label>
<Input type="select" name="selectMulti" id="exampleSelectMulti" multiple>
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</Input>
</FormGroup>
<FormGroup>
<Label for="exampleText">Text Area</Label>
<Input type="textarea" name="text" id="exampleText" />
</FormGroup>
<FormGroup>
<Label for="exampleFile">File</Label>
<Input type="file" name="file" id="exampleFile" />
<FormText color="muted">
This is some placeholder block-level help text for the above input. Its a bit
lighter and easily wraps to a new line.
</FormText>
</FormGroup>
<FormGroup tag="fieldset">
<FormGroup check>
<Label check className="kit__utils__control kit__utils__control__radio">
<Input type="radio" name="radio2" checked />
<span className="kit__utils__control__indicator" />
Option one is this and that—be sure to include why its great
</Label>
</FormGroup>
<FormGroup check>
<Label check className="kit__utils__control kit__utils__control__radio">
<Input type="radio" name="radio2" />
<span className="kit__utils__control__indicator" />
Option two can be something else and selecting it will deselect option one
</Label>
</FormGroup>
<FormGroup check disabled>
<Label check className="kit__utils__control kit__utils__control__radio">
<Input type="radio" name="radio2" disabled />
<span className="kit__utils__control__indicator" />
Option three is disabled
</Label>
</FormGroup>
</FormGroup>
<FormGroup check>
<Label check className="kit__utils__control kit__utils__control__checkbox">
<Input type="checkbox" id="checkbox2" />
<span className="kit__utils__control__indicator" />
Check me out
</Label>
</FormGroup>
<div className="border-top mt-4 pt-4">
<Button color="primary" className="px-5">
Submit
</Button>
</div>
</Form>
</div>
<h5 className="mb-4">
<strong>Horizontal Form</strong>
</h5>
<div className="mb-5">
<Form>
<FormGroup row>
<Label for="exampleEmail" sm={2}>
Email
</Label>
<Col sm={10}>
<Input
type="email"
name="email"
id="exampleEmail"
placeholder="with a placeholder"
/>
</Col>
</FormGroup>
<FormGroup row>
<Label for="examplePassword" sm={2}>
Password
</Label>
<Col sm={10}>
<Input
type="password"
name="password"
id="examplePassword"
placeholder="password placeholder"
/>
</Col>
</FormGroup>
<FormGroup row>
<Label for="exampleSelect" sm={2}>
Select
</Label>
<Col sm={10}>
<Input type="select" name="select" id="exampleSelect" />
</Col>
</FormGroup>
<FormGroup row>
<Label for="exampleSelectMulti" sm={2}>
Select Multiple
</Label>
<Col sm={10}>
<Input type="select" name="selectMulti" id="exampleSelectMulti" multiple />
</Col>
</FormGroup>
<FormGroup row>
<Label for="exampleText" sm={2}>
Text Area
</Label>
<Col sm={10}>
<Input type="textarea" name="text" id="exampleText" />
</Col>
</FormGroup>
<FormGroup row>
<Label for="exampleFile" sm={2}>
File
</Label>
<Col sm={10}>
<Input type="file" name="file" id="exampleFile" />
<FormText color="muted">
This is some placeholder block-level help text for the above input. Its a bit
lighter and easily wraps to a new line.
</FormText>
</Col>
</FormGroup>
<FormGroup row>
<div className="col-sm-2">
<legend className="col-form-label">Radio Buttons</legend>
</div>
<Col sm={10}>
<FormGroup check>
<Label check className="kit__utils__control kit__utils__control__radio">
<Input type="radio" name="radio2" checked />
<span className="kit__utils__control__indicator" />
Option one is this and that—be sure to include why its great
</Label>
</FormGroup>
<FormGroup check>
<Label check className="kit__utils__control kit__utils__control__radio">
<Input type="radio" name="radio2" />
<span className="kit__utils__control__indicator" />
Option two can be something else and selecting it will deselect option one
</Label>
</FormGroup>
<FormGroup check disabled>
<Label check className="kit__utils__control kit__utils__control__radio">
<Input type="radio" name="radio2" disabled />
<span className="kit__utils__control__indicator" />
Option three is disabled
</Label>
</FormGroup>
</Col>
</FormGroup>
<FormGroup row>
<Label for="checkbox2" sm={2}>
Checkbox
</Label>
<Col sm={{ size: 10 }}>
<FormGroup check>
<Label check className="kit__utils__control kit__utils__control__checkbox">
<Input type="checkbox" id="checkbox2" />
<span className="kit__utils__control__indicator" />
Check me out
</Label>
</FormGroup>
</Col>
</FormGroup>
<div className="border-top mt-4 pt-4">
<FormGroup check row>
<Col sm={{ size: 10, offset: 2 }}>
<Button color="primary" className="px-5">
Submit
</Button>
</Col>
</FormGroup>
</div>
</Form>
</div>
</div>
)
}
