reactstrap#InputGroup JavaScript Examples
The following examples show how to use
reactstrap#InputGroup.
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: InputText.js From id.co.moonlay-eworkplace-admin-web with MIT License | 6 votes |
|
render() {
return (
<InputGroup className="mb-3">
<InputGroupAddon addonType="prepend">
<InputGroupText>
<i className={this.props.icon}></i>
{this.props.text}
</InputGroupText>
</InputGroupAddon>
<Input type='text' placeholder={this.props.placeholder} name={this.props.name} />
</InputGroup>
)
}
Example #2
| 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 #3
| Source File: NavSearch.jsx From react-lte with MIT License | 6 votes |
|
NavSearch = () => {
return (
<Form inline className='ml-3'>
<InputGroup size='sm'>
<Input className='form-control-navbar' type='search' placeholder='Search' aria-label='Search' />
<InputGroupAddon addonType='append'>
<button className='btn btn-navbar' type='submit'>
<FontAwesomeIcon icon={faSearch} />
<span className='d-none'>Search</span>
</button>
</InputGroupAddon>
</InputGroup>
</Form>
);
}
Example #4
| 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 #5
| Source File: import React, { Component } from 'react'.js From id.co.moonlay-eworkplace-admin-web with MIT License | 5 votes |
|
render() {
return (
<div className="app flex-row align-items-center">
<Container>
<Row className="justify-content-center">
<Col md="8">
<CardGroup>
<Card className="p-4">
<CardBody>
<Form>
<h1>Login</h1>
<p className="text-muted">Sign In to your account</p>
<InputGroup className="mb-3">
<InputGroupAddon addonType="prepend">
<InputGroupText>
<i className="icon-user"></i>
</InputGroupText>
</InputGroupAddon>
<Input type="text" required onChange={this.handleUsername} placeholder="Username" autoComplete="username" />
</InputGroup>
<font color="red">{this.state.messageErrorUsername}</font>
<InputGroup className="mb-4">
<InputGroupAddon addonType="prepend">
<InputGroupText>
<i className="icon-lock"></i>
</InputGroupText>
</InputGroupAddon>
<Input type="password" onChange={this.handlePassword} placeholder="Password" autoComplete="current-password" />
</InputGroup>
<font color="red">{this.state.messageErrorPassword}</font>
<Row>
<Col xs="6">
<Button color="primary" className="px-4" onClick={this.onHandleSubmit}>Login</Button>
</Col>
</Row>
</Form>
</CardBody>
</Card>
<Card className="text-white py-5 d-md-down-none" style={{ width: '44%', backgroundColor: '#1A446D' }}>
<CardBody className="text-center">
<div>
<img src={Logo} className="img-fluid" />
<h4 style={{marginTop: 20, fontFamily:'D-Din'}}>moonlay<b>technologies</b></h4>
</div>
</CardBody>
</Card>
</CardGroup>
</Col>
</Row>
</Container>
</div>
);
}
Example #6
| Source File: index.js From gobench with Apache License 2.0 | 5 votes |
|
render() {
return (
<div>
<h5 className="mb-4">
<strong>Input Addons</strong>
</h5>
<InputGroup>
<InputGroupAddon addonType="prepend">@</InputGroupAddon>
<Input placeholder="username" />
</InputGroup>
<br />
<InputGroup>
<InputGroupAddon addonType="prepend">
<InputGroupText>
<Input addon type="checkbox" aria-label="Checkbox for following text input" />
</InputGroupText>
</InputGroupAddon>
<Input placeholder="Check it out" />
</InputGroup>
<br />
<InputGroup>
<Input placeholder="username" />
<InputGroupAddon addonType="append">
<InputGroupText>@example.com</InputGroupText>
</InputGroupAddon>
</InputGroup>
<br />
<InputGroup>
<InputGroupAddon addonType="prepend">
<InputGroupText>$</InputGroupText>
<InputGroupText>$</InputGroupText>
</InputGroupAddon>
<Input placeholder="Dolla dolla billz yo!" />
<InputGroupAddon addonType="append">
<InputGroupText>$</InputGroupText>
<InputGroupText>$</InputGroupText>
</InputGroupAddon>
</InputGroup>
<br />
<InputGroup>
<InputGroupAddon addonType="prepend">$</InputGroupAddon>
<Input placeholder="Amount" min={0} max={100} type="number" step="1" />
<InputGroupAddon addonType="append">.00</InputGroupAddon>
</InputGroup>
</div>
)
}
Example #7
| 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 #8
| Source File: Home.js From ReactJS-Projects with MIT License | 5 votes |
|
Home = () => {
const context = useContext(UserContext)
const [query, setQuery] = useState("")
const [user, setUser] = useState(null)
const fetchDetails = async () => {
try {
const { data } = await Axios.get(`https://api.github.com/users/${query}`)
setUser(data)
console.log(data)
} catch (err) {
toast("Unable to locate the user", {
type: "error"
})
}
}
if (!context.user?.uid) {
return <Navigate to="/signin" />
}
return (
<Container>
<Row className=" mt-3">
<Col md="5">
<InputGroup>
<Input
type="text"
value={query}
placeholder="Please provide the username"
onChange={e => setQuery(e.target.value)}
/>
<InputGroupAddon addonType="append">
<Button onClick={fetchDetails} color="primary">Fetch User</Button>
</InputGroupAddon>
</InputGroup>
{user ?
<UserCard user={user} /> :
null
}
</Col>
<Col md="7">
{user ? <Details apiUrl={user.repos_url} /> : null}
</Col>
</Row>
</Container>
);
}
Example #9
| Source File: Tables.js From covidsos with MIT License | 5 votes |
|
getTable(tableConfig) {
const currTableState = this.state.currState[tableConfig.key];
const statusList = []
if (currTableState.data.length !== 0) {
currTableState.data.map(row => row.status.toString().toLowerCase()).forEach(status => {
if (status && statusList.indexOf(status) === -1) {
statusList.push(status);
}
});
}
return (
<Col>
<Card className="shadow">
<CardHeader className="border-0">
<h3 className="mb-3 d-inline-block col-sm-4">
{tableConfig.title} ({this.state.currState[tableConfig.key].filteredData.length})
</h3>
<Form inline className="navbar-search d-inline-block ml-auto col-sm-8"
onSubmit={e => e.preventDefault()}>
<FormGroup>
{
statusList.length > 1 ?
<InputGroup className="input-group-alternative mr-0 ml-auto">
<InputGroupAddon addonType="prepend">
<InputGroupText>
<i className="fas fa-filter"/>
</InputGroupText>
</InputGroupAddon>
<Input placeholder="Status" type="select"
value={this.state.currState[tableConfig.key].statusFilter}
onChange={e => this.filter(e, tableConfig)}>
<option value="">Status</option>
{
statusList.sort(
(a, b) => a.toLowerCase().localeCompare(b.toLowerCase())).map(
status => {
return (<option key={status} value={status}>{status}</option>);
})
}
</Input>
</InputGroup> : null
}
<InputGroup className="input-group-alternative mr-0 ml-auto">
<InputGroupAddon addonType="prepend">
<InputGroupText>
<i className="fas fa-search"/>
</InputGroupText>
</InputGroupAddon>
<Input placeholder="Search" type="text"
value={this.state.currState[tableConfig.key].searchString}
onChange={e => this.search(e, tableConfig)}/>
</InputGroup>
</FormGroup>
</Form>
</CardHeader>
<Table className="align-items-center table-flush" responsive>
<thead className="thead-light">
<tr>
<th scope="col">S.No.</th>
{
tableConfig.fieldHeaders.map(fh => {
return (
<th scope="col" key={tableConfig.key + '_' + fh}>{fh}</th>
);
})
}
<th scope="col">Action</th>
</tr>
</thead>
<tbody>{this.getRows(tableConfig)}</tbody>
</Table>
<CardFooter className="py-4">
{this.getNavigation(tableConfig)}
</CardFooter>
</Card>
</Col>
);
}
Example #10
| Source File: Login.jsx From nodejs-rest-api-boilerplate with MIT License | 4 votes |
|
render() {
return (
<>
<section className="section section-lg section-shaped">
<div className="shape shape-style-1 shape-default">
<span />
<span />
<span />
<span />
<span />
<span />
<span />
<span />
</div>
<Container className="py-md">
<Row className="row-grid justify-content-between align-items-center">
<Col lg="6">
<h3 className="display-3 text-white">
A beautiful Design System{" "}
<span className="text-white">completed with examples</span>
</h3>
<p className="lead text-white">
The Design System comes with four pre-built pages to help you
get started faster. You can change the text and images and
you're good to go. More importantly, looking at them will give
you a picture of what you can built with this powerful
Bootstrap 4 Design System.
</p>
<div className="btn-wrapper">
<Button color="success" to="/login-page" tag={Link}>
Login Page
</Button>
<Button
className="btn-white"
color="default"
to="/register-page"
tag={Link}
>
Register Page
</Button>
</div>
</Col>
<Col className="mb-lg-auto" lg="5">
<div className="transform-perspective-right">
<Card className="bg-secondary shadow border-0">
<CardHeader className="bg-white pb-5">
<div className="text-muted text-center mb-3">
<small>Sign in with</small>
</div>
<div className="btn-wrapper text-center">
<Button
className="btn-neutral btn-icon"
color="default"
href="#pablo"
onClick={e => e.preventDefault()}
>
<span className="btn-inner--icon mr-1">
<img
alt="..."
src={require("assets/img/icons/common/github.svg")}
/>
</span>
<span className="btn-inner--text">Github</span>
</Button>
<Button
className="btn-neutral btn-icon"
color="default"
href="#pablo"
onClick={e => e.preventDefault()}
>
<span className="btn-inner--icon mr-1">
<img
alt="..."
src={require("assets/img/icons/common/google.svg")}
/>
</span>
<span className="btn-inner--text">Google</span>
</Button>
</div>
</CardHeader>
<CardBody className="px-lg-5 py-lg-5">
<div className="text-center text-muted mb-4">
<small>Or sign in with credentials</small>
</div>
<Form role="form">
<FormGroup
className={classnames("mb-3", {
focused: this.state.emailFocused
})}
>
<InputGroup className="input-group-alternative">
<InputGroupAddon addonType="prepend">
<InputGroupText>
<i className="ni ni-email-83" />
</InputGroupText>
</InputGroupAddon>
<Input
placeholder="Email"
type="email"
onFocus={e =>
this.setState({ emailFocused: true })
}
onBlur={e =>
this.setState({ emailFocused: false })
}
/>
</InputGroup>
</FormGroup>
<FormGroup
className={classnames({
focused: this.state.passwordFocused
})}
>
<InputGroup className="input-group-alternative">
<InputGroupAddon addonType="prepend">
<InputGroupText>
<i className="ni ni-lock-circle-open" />
</InputGroupText>
</InputGroupAddon>
<Input
placeholder="Password"
type="password"
autoComplete="off"
onFocus={e =>
this.setState({ passwordFocused: true })
}
onBlur={e =>
this.setState({ passwordFocused: false })
}
/>
</InputGroup>
</FormGroup>
<div className="custom-control custom-control-alternative custom-checkbox">
<input
className="custom-control-input"
id="customCheckLogin2"
type="checkbox"
/>
<label
className="custom-control-label"
htmlFor="customCheckLogin2"
>
<span>Remember me</span>
</label>
</div>
<div className="text-center">
<Button
className="my-4"
color="primary"
type="button"
>
Sign in
</Button>
</div>
</Form>
</CardBody>
</Card>
</div>
</Col>
</Row>
</Container>
{/* SVG separator */}
<div className="separator separator-bottom separator-skew">
<svg
xmlns="http://www.w3.org/2000/svg"
preserveAspectRatio="none"
version="1.1"
viewBox="0 0 2560 100"
x="0"
y="0"
>
<polygon className="fill-white" points="2560 0 2560 100 0 100" />
</svg>
</div>
</section>
</>
);
}
Example #11
| Source File: AddAccount.js From id.co.moonlay-eworkplace-admin-web with MIT License | 4 votes |
|
render(){
var token = localStorage.getItem('token');
var RoleId = localStorage.getItem('RoleId')
if (token === null || token === undefined ||RoleId === null || RoleId === undefined) {
this.props.history.push('/login');
}
let roleList = this.state.listRole.map(function (role) {
return { value: role._id, label: role .name };
})
$(".toggle-password").click(function() {
$(this).toggleClass("fa-eye fa-eye-slash");
var input = $($(this).attr("toggle"));
if (input.attr("type") == "password") {
input.attr("type", "text");
} else {
input.attr("type", "password");
}
});
return (
<div className="app flex-row align-items-center">
<Container>
<Row className="justify-content-center">
<Col md="9" lg="7" xl="6">
<Card className="mx-4">
<CardBody className="p-4">
<Form>
<h1>Add Account</h1>
<p className="text-muted">Create an employee account</p>
<p>Step {this.state.step} of 2</p>
<div style={{display: this.state.step === 1 ? 'block' : 'none'}}>
<InputGroup className="mb-3">
<InputGroupAddon addonType="prepend">
<InputGroupText>
<i className="icon-user"></i>
</InputGroupText>
</InputGroupAddon>
<Input type="text" onChange={this.onChangeFirtsname} placeholder="First Name" autoComplete="firstname" />
</InputGroup>
<InputGroup className="mb-3">
<InputGroupAddon addonType="prepend">
<InputGroupText>
<i className="icon-user"></i>
</InputGroupText>
</InputGroupAddon>
<Input type="text" onChange={this.onChangeLastname} placeholder="Last Name" autoComplete="lastname" />
</InputGroup>
<InputGroup className="mb-3">
<InputGroupAddon addonType="prepend">
<InputGroupText>
<i className="icon-user"></i>
</InputGroupText>
</InputGroupAddon>
<Input type="text" onChange={this.onChangeUsername} placeholder="Username" autoComplete="username" />
</InputGroup>
<InputGroup className="mb-3">
<InputGroupAddon addonType="prepend">
<InputGroupText>@</InputGroupText>
</InputGroupAddon>
<Input type="text" onChange={this.onChangeEmail} placeholder="Email" autoComplete="email" />
</InputGroup>
<InputGroup className="mb-3">
<InputGroupAddon addonType="prepend">
<InputGroupText>
<i className="icon-lock"></i>
</InputGroupText>
</InputGroupAddon>
<Input type={this.state.hidden ? "password" : "text"} onChange={this.onchagePassword} name="password" placeholder="Password" autoComplete="new-password" id="password-field" />
<i className={this.state.hidden ? "fa fa-eye" : "fa fa-eye-slash"} style={{fontSize : 30}} onClick={this.toggleShow}></i>
</InputGroup>
{/* <InputGroup className="mb-4">
<InputGroupAddon addonType="prepend">
<InputGroupText>
<i className="icon-lock"></i>
</InputGroupText>
</InputGroupAddon>
<Input type="password" placeholder="Repeat password" autoComplete="new-password" />
</InputGroup> */}
<Button onClick={this.onhandleNext} color="primary">Next</Button>
</div>
<div style={{display: this.state.step === 2 ? 'block' : 'none'}}>
<Row>
<Col style={{marginRight:'-30px'}} md={3} ><InputGroupText>
Role
</InputGroupText>
</Col>
<Col> <Select
name="form-field-name"
value={this.state.selectedRole}
onChange={this.onChangeRole}
options={roleList} /> <br /></Col>
</Row>
<InputGroup className="mb-3">
<InputGroupAddon addonType="prepend">
<InputGroupText>
Birthday
</InputGroupText>
</InputGroupAddon>
<Input type="date" onChange={this.onChangeDob} />
</InputGroup>
<InputGroup className="mb-3">
<InputGroupAddon addonType="prepend">
<InputGroupText>
Gender
</InputGroupText>
</InputGroupAddon>
<Input type="select" value={this.state.value} onChange={this.onChangeGender}>
<option>Select Gender..</option>
<option value="Male">Male</option>
<option value="Female">Female</option>
</Input>
</InputGroup>
<Button onClick={this.onhandlePrevius} color="primary">Previous</Button>
<Button onClick={this.onhandleSubmit} color="success">Create Account</Button>
</div>
</Form>
</CardBody>
<CardFooter className="p-4">
<Button color='danger' block onClick={this.onhandleBack} >Back to Dashboard</Button>
</CardFooter>
</Card>
</Col>
</Row>
</Container>
</div>
);
}
Example #12
| Source File: Register.jsx From nodejs-rest-api-boilerplate with MIT License | 4 votes |
|
render() {
return (
<>
<DemoNavbar />
<main ref="main">
<section className="section section-shaped section-lg">
<div className="shape shape-style-1 bg-gradient-default">
<span />
<span />
<span />
<span />
<span />
<span />
<span />
<span />
</div>
<Container className="pt-lg-md">
<Row className="justify-content-center">
<Col lg="5">
<Card className="bg-secondary shadow border-0">
<CardHeader className="bg-white pb-5">
<div className="text-muted text-center mb-3">
<small>Sign up with</small>
</div>
<div className="text-center">
<Button
className="btn-neutral btn-icon mr-4"
color="default"
href="#pablo"
onClick={e => e.preventDefault()}
>
<span className="btn-inner--icon mr-1">
<img
alt="..."
src={require("assets/img/icons/common/github.svg")}
/>
</span>
<span className="btn-inner--text">Github</span>
</Button>
<Button
className="btn-neutral btn-icon ml-1"
color="default"
href="#pablo"
onClick={e => e.preventDefault()}
>
<span className="btn-inner--icon mr-1">
<img
alt="..."
src={require("assets/img/icons/common/google.svg")}
/>
</span>
<span className="btn-inner--text">Google</span>
</Button>
</div>
</CardHeader>
<CardBody className="px-lg-5 py-lg-5">
<div className="text-center text-muted mb-4">
<small>Or sign up with credentials</small>
</div>
<Form role="form">
<FormGroup>
<InputGroup className="input-group-alternative mb-3">
<InputGroupAddon addonType="prepend">
<InputGroupText>
<i className="ni ni-hat-3" />
</InputGroupText>
</InputGroupAddon>
<Input placeholder="Name" type="text" />
</InputGroup>
</FormGroup>
<FormGroup>
<InputGroup className="input-group-alternative mb-3">
<InputGroupAddon addonType="prepend">
<InputGroupText>
<i className="ni ni-email-83" />
</InputGroupText>
</InputGroupAddon>
<Input placeholder="Email" type="email" />
</InputGroup>
</FormGroup>
<FormGroup>
<InputGroup className="input-group-alternative">
<InputGroupAddon addonType="prepend">
<InputGroupText>
<i className="ni ni-lock-circle-open" />
</InputGroupText>
</InputGroupAddon>
<Input
placeholder="Password"
type="password"
autoComplete="off"
/>
</InputGroup>
</FormGroup>
<div className="text-muted font-italic">
<small>
password strength:{" "}
<span className="text-success font-weight-700">
strong
</span>
</small>
</div>
<Row className="my-4">
<Col xs="12">
<div className="custom-control custom-control-alternative custom-checkbox">
<input
className="custom-control-input"
id="customCheckRegister"
type="checkbox"
/>
<label
className="custom-control-label"
htmlFor="customCheckRegister"
>
<span>
I agree with the{" "}
<a
href="#pablo"
onClick={e => e.preventDefault()}
>
Privacy Policy
</a>
</span>
</label>
</div>
</Col>
</Row>
<div className="text-center">
<Button
className="mt-4"
color="primary"
type="button"
>
Create account
</Button>
</div>
</Form>
</CardBody>
</Card>
</Col>
</Row>
</Container>
</section>
</main>
<SimpleFooter />
</>
);
}
Example #13
| Source File: Tables.js From id.co.moonlay-eworkplace-admin-web with MIT License | 4 votes |
|
render() {
const { results, currentPage, resultsPerPage } = this.state;
const indexOfLastTodo = currentPage * resultsPerPage;
const indexOfFirstTodo = indexOfLastTodo - resultsPerPage;
const currentresults = results.slice(indexOfFirstTodo, indexOfLastTodo);
const renderresults = currentresults.map((results, index) => {
//return <li key={index}>{todo.username}</li>;
return (
<tr key={results.Id} data-category={results.Id}>
<td>{results.Id}</td>
<td>{results.Code}</td>
<td>{results.Name}</td>
<td>{results.Description}</td>
{/* <td>
<Button
className="btn btn-danger"
onClick={() => this.deleteAbsensi(results.Id)}>
Delete
</Button>
</td> */}
</tr>
);
});
const pageNumbers = [];
for (let i = 1; i <= Math.ceil(results.length / resultsPerPage); i++) {
pageNumbers.push(i);
}
const renderPageNumbers = pageNumbers.map(number => {
return (
<li
key={number}
id={number}
onClick={this.handleClick}
className="page-link">
{number}
</li>
);
});
if (this.state.loading === false) {
return <h2>Loading...</h2>;
}
return (
<div>
<Modal show={this.state.show} onHide={this.handleClose}>
<Modal.Header closeButton>
<Modal.Title>Add Division</Modal.Title>
</Modal.Header>
<Modal.Body>
<Form>
Code
<InputGroup className="mb-3">
<Input type="text" onChange={this.handleCode} placeholder="Code" autoComplete="Username" />
</InputGroup>
Name
<InputGroup className="mb-3">
<Input type="text" onChange={this.handleName} placeholder="Name" autoComplete="Name" />
</InputGroup>
Description
<InputGroup className="mb-3">
<Input type="text" onChange={this.handleDescription} placeholder="Description" autoComplete="Name" />
</InputGroup>
</Form>
</Modal.Body>
<Modal.Footer>
<Button className="btn btn-secondary" onClick={this.handleClose}>
Close
</Button>
<Button className="btn btn-info" onClick={this.handelsubmitform}>
Save Changes
</Button>
</Modal.Footer>
</Modal>
<div className="row">
{/* <div class="col-md-3">
<h4>Date from</h4>
<input
type="date"
class="form-control"
id="datefilterfrom"
data-date-split-input="true"
onChange={this.handleDateChange}
/>
</div> */}
{/* <div class="col-md-3">
<h4>Date to</h4>
<input
type="date"
class="form-control"
id="datefilterto"
data-date-split-input="true"
/>
</div> */}
{/* <div>
<h4>Date to</h4>
<button onClick={this.handleJS}>filter date</button>
</div> */}
</div>
<div className="animated fadeIn">
{this.state.loading && (
<Row>
<Col xs="12" lg="12">
<Card>
<CardHeader>
<Row>
<Col>
<i className="fa fa-user" /> <b> List Division</b>
<Button
style={{ marginLeft: 10 }}
color="success"
className="px-4"
onClick={this.handleAddDivision}>
Add Division
</Button>
</Col>
<Col>
<input
type="text"
id="myInput"
className="form-control form-control-md"
style={{ width: '100%' }}
placeholder="Search By Name"
onChange={this.filterList}
/>
</Col>
</Row>
</CardHeader>
<CardBody>
{/* <DateRange
format="DD/MM/YYYY"
startDate={rangePicker["startDate"]}
endDate={rangePicker["endDate"]}
linkedCalendars={true}
disableDaysBeforeToday={true}
date={now => now}
onInit={this.handleChange}
onChange={this.handleChange} /> */}
<Table id="myTable" responsive striped>
<thead>
<tr>
<th>ID</th>
<th>Code</th>
<th>Name</th>
<th>Description</th>
</tr>
</thead>
<tbody>{
renderresults
}</tbody>
</Table>
</CardBody>
</Card>
</Col>
</Row>
)}
</div>
{/* <Pagination>
<PaginationItem>
{renderPageNumbers}
</PaginationItem>
</Pagination>
*/}
<ul className="pagination">{renderPageNumbers}</ul>
</div>
);
}
Example #14
| Source File: Landing.jsx From nodejs-rest-api-boilerplate with MIT License | 4 votes |
|
render() {
return (
<>
<DemoNavbar />
<main ref="main">
<div className="position-relative">
{/* shape Hero */}
<section className="section section-lg section-shaped pb-250">
<div className="shape shape-style-1 shape-default">
<span />
<span />
<span />
<span />
<span />
<span />
<span />
<span />
<span />
</div>
<Container className="py-lg-md d-flex">
<div className="col px-0">
<Row>
<Col lg="6">
<h1 className="display-3 text-white">
A beautiful Design System{" "}
<span>completed with examples</span>
</h1>
<p className="lead text-white">
The design system comes with four pre-built pages to
help you get started faster. You can change the text and
images and you're good to go.
</p>
<div className="btn-wrapper">
<Button
className="btn-icon mb-3 mb-sm-0"
color="info"
href="https://demos.creative-tim.com/argon-design-system-react/#/documentation/alerts?ref=adsr-landing-page"
>
<span className="btn-inner--icon mr-1">
<i className="fa fa-code" />
</span>
<span className="btn-inner--text">Components</span>
</Button>
<Button
className="btn-white btn-icon mb-3 mb-sm-0 ml-1"
color="default"
href="https://www.creative-tim.com/product/argon-design-system-react?ref=adsr-landing-page"
>
<span className="btn-inner--icon mr-1">
<i className="ni ni-cloud-download-95" />
</span>
<span className="btn-inner--text">
Download React
</span>
</Button>
</div>
</Col>
</Row>
</div>
</Container>
{/* SVG separator */}
<div className="separator separator-bottom separator-skew">
<svg
xmlns="http://www.w3.org/2000/svg"
preserveAspectRatio="none"
version="1.1"
viewBox="0 0 2560 100"
x="0"
y="0"
>
<polygon
className="fill-white"
points="2560 0 2560 100 0 100"
/>
</svg>
</div>
</section>
{/* 1st Hero Variation */}
</div>
<section className="section section-lg pt-lg-0 mt--200">
<Container>
<Row className="justify-content-center">
<Col lg="12">
<Row className="row-grid">
<Col lg="4">
<Card className="card-lift--hover shadow border-0">
<CardBody className="py-5">
<div className="icon icon-shape icon-shape-primary rounded-circle mb-4">
<i className="ni ni-check-bold" />
</div>
<h6 className="text-primary text-uppercase">
Download Argon
</h6>
<p className="description mt-3">
Argon is a great free UI package based on Bootstrap
4 that includes the most important components and
features.
</p>
<div>
<Badge color="primary" pill className="mr-1">
design
</Badge>
<Badge color="primary" pill className="mr-1">
system
</Badge>
<Badge color="primary" pill className="mr-1">
creative
</Badge>
</div>
<Button
className="mt-4"
color="primary"
href="#pablo"
onClick={e => e.preventDefault()}
>
Learn more
</Button>
</CardBody>
</Card>
</Col>
<Col lg="4">
<Card className="card-lift--hover shadow border-0">
<CardBody className="py-5">
<div className="icon icon-shape icon-shape-success rounded-circle mb-4">
<i className="ni ni-istanbul" />
</div>
<h6 className="text-success text-uppercase">
Build Something
</h6>
<p className="description mt-3">
Argon is a great free UI package based on Bootstrap
4 that includes the most important components and
features.
</p>
<div>
<Badge color="success" pill className="mr-1">
business
</Badge>
<Badge color="success" pill className="mr-1">
vision
</Badge>
<Badge color="success" pill className="mr-1">
success
</Badge>
</div>
<Button
className="mt-4"
color="success"
href="#pablo"
onClick={e => e.preventDefault()}
>
Learn more
</Button>
</CardBody>
</Card>
</Col>
<Col lg="4">
<Card className="card-lift--hover shadow border-0">
<CardBody className="py-5">
<div className="icon icon-shape icon-shape-warning rounded-circle mb-4">
<i className="ni ni-planet" />
</div>
<h6 className="text-warning text-uppercase">
Prepare Launch
</h6>
<p className="description mt-3">
Argon is a great free UI package based on Bootstrap
4 that includes the most important components and
features.
</p>
<div>
<Badge color="warning" pill className="mr-1">
marketing
</Badge>
<Badge color="warning" pill className="mr-1">
product
</Badge>
<Badge color="warning" pill className="mr-1">
launch
</Badge>
</div>
<Button
className="mt-4"
color="warning"
href="#pablo"
onClick={e => e.preventDefault()}
>
Learn more
</Button>
</CardBody>
</Card>
</Col>
</Row>
</Col>
</Row>
</Container>
</section>
<section className="section section-lg">
<Container>
<Row className="row-grid align-items-center">
<Col className="order-md-2" md="6">
<img
alt="..."
className="img-fluid floating"
src={require("../../assets/img/theme/promo-1.png")}
/>
</Col>
<Col className="order-md-1" md="6">
<div className="pr-md-5">
<div className="icon icon-lg icon-shape icon-shape-success shadow rounded-circle mb-5">
<i className="ni ni-settings-gear-65" />
</div>
<h3>Awesome features</h3>
<p>
The kit comes with three pre-built pages to help you get
started faster. You can change the text and images and
you're good to go.
</p>
<ul className="list-unstyled mt-5">
<li className="py-2">
<div className="d-flex align-items-center">
<div>
<Badge
className="badge-circle mr-3"
color="success"
>
<i className="ni ni-settings-gear-65" />
</Badge>
</div>
<div>
<h6 className="mb-0">
Carefully crafted components
</h6>
</div>
</div>
</li>
<li className="py-2">
<div className="d-flex align-items-center">
<div>
<Badge
className="badge-circle mr-3"
color="success"
>
<i className="ni ni-html5" />
</Badge>
</div>
<div>
<h6 className="mb-0">Amazing page examples</h6>
</div>
</div>
</li>
<li className="py-2">
<div className="d-flex align-items-center">
<div>
<Badge
className="badge-circle mr-3"
color="success"
>
<i className="ni ni-satisfied" />
</Badge>
</div>
<div>
<h6 className="mb-0">
Super friendly support team
</h6>
</div>
</div>
</li>
</ul>
</div>
</Col>
</Row>
</Container>
</section>
<section className="section bg-secondary">
<Container>
<Row className="row-grid align-items-center">
<Col md="6">
<Card className="bg-default shadow border-0">
<CardImg
alt="..."
src={require("../../assets/img/theme/img-1-1200x1000.jpg")}
top
/>
<blockquote className="card-blockquote">
<svg
xmlns="http://www.w3.org/2000/svg"
className="svg-bg"
preserveAspectRatio="none"
viewBox="0 0 583 95"
>
<polygon
className="fill-default"
points="0,52 583,95 0,95"
/>
<polygon
className="fill-default"
opacity=".2"
points="0,42 583,95 683,0 0,95"
/>
</svg>
<h4 className="display-3 font-weight-bold text-white">
Design System
</h4>
<p className="lead text-italic text-white">
The Arctic Ocean freezes every winter and much of the
sea-ice then thaws every summer, and that process will
continue whatever happens.
</p>
</blockquote>
</Card>
</Col>
<Col md="6">
<div className="pl-md-5">
<div className="icon icon-lg icon-shape icon-shape-warning shadow rounded-circle mb-5">
<i className="ni ni-settings" />
</div>
<h3>Our customers</h3>
<p className="lead">
Don't let your uses guess by attaching tooltips and
popoves to any element. Just make sure you enable them
first via JavaScript.
</p>
<p>
The kit comes with three pre-built pages to help you get
started faster. You can change the text and images and
you're good to go.
</p>
<p>
The kit comes with three pre-built pages to help you get
started faster. You can change the text and images and
you're good to go.
</p>
<a
className="font-weight-bold text-warning mt-5"
href="#pablo"
onClick={e => e.preventDefault()}
>
A beautiful UI Kit for impactful websites
</a>
</div>
</Col>
</Row>
</Container>
</section>
<section className="section pb-0 bg-gradient-warning">
<Container>
<Row className="row-grid align-items-center">
<Col className="order-lg-2 ml-lg-auto" md="6">
<div className="position-relative pl-md-5">
<img
alt="..."
className="img-center img-fluid"
src={require("../../assets/img/ill/ill-2.svg")}
/>
</div>
</Col>
<Col className="order-lg-1" lg="6">
<div className="d-flex px-3">
<div>
<div className="icon icon-lg icon-shape bg-gradient-white shadow rounded-circle text-primary">
<i className="ni ni-building text-primary" />
</div>
</div>
<div className="pl-4">
<h4 className="display-3 text-white">Modern Interface</h4>
<p className="text-white">
The Arctic Ocean freezes every winter and much of the
sea-ice then thaws every summer, and that process will
continue whatever.
</p>
</div>
</div>
<Card className="shadow shadow-lg--hover mt-5">
<CardBody>
<div className="d-flex px-3">
<div>
<div className="icon icon-shape bg-gradient-success rounded-circle text-white">
<i className="ni ni-satisfied" />
</div>
</div>
<div className="pl-4">
<h5 className="title text-success">
Awesome Support
</h5>
<p>
The Arctic Ocean freezes every winter and much of
the sea-ice then thaws every summer, and that
process will continue whatever.
</p>
<a
className="text-success"
href="#pablo"
onClick={e => e.preventDefault()}
>
Learn more
</a>
</div>
</div>
</CardBody>
</Card>
<Card className="shadow shadow-lg--hover mt-5">
<CardBody>
<div className="d-flex px-3">
<div>
<div className="icon icon-shape bg-gradient-warning rounded-circle text-white">
<i className="ni ni-active-40" />
</div>
</div>
<div className="pl-4">
<h5 className="title text-warning">
Modular Components
</h5>
<p>
The Arctic Ocean freezes every winter and much of
the sea-ice then thaws every summer, and that
process will continue whatever.
</p>
<a
className="text-warning"
href="#pablo"
onClick={e => e.preventDefault()}
>
Learn more
</a>
</div>
</div>
</CardBody>
</Card>
</Col>
</Row>
</Container>
{/* SVG separator */}
<div className="separator separator-bottom separator-skew zindex-100">
<svg
xmlns="http://www.w3.org/2000/svg"
preserveAspectRatio="none"
version="1.1"
viewBox="0 0 2560 100"
x="0"
y="0"
>
<polygon
className="fill-white"
points="2560 0 2560 100 0 100"
/>
</svg>
</div>
</section>
<section className="section section-lg">
<Container>
<Row className="justify-content-center text-center mb-lg">
<Col lg="8">
<h2 className="display-3">The amazing Team</h2>
<p className="lead text-muted">
According to the National Oceanic and Atmospheric
Administration, Ted, Scambos, NSIDClead scentist, puts the
potentially record maximum.
</p>
</Col>
</Row>
<Row>
<Col className="mb-5 mb-lg-0" lg="3" md="6">
<div className="px-4">
<img
alt="..."
className="rounded-circle img-center img-fluid shadow shadow-lg--hover"
src={require("../../assets/img/theme/team-1-800x800.jpg")}
style={{ width: "200px" }}
/>
<div className="pt-4 text-center">
<h5 className="title">
<span className="d-block mb-1">Ryan Tompson</span>
<small className="h6 text-muted">Web Developer</small>
</h5>
<div className="mt-3">
<Button
className="btn-icon-only rounded-circle"
color="warning"
href="#pablo"
onClick={e => e.preventDefault()}
>
<i className="fa fa-twitter" />
</Button>
<Button
className="btn-icon-only rounded-circle ml-1"
color="warning"
href="#pablo"
onClick={e => e.preventDefault()}
>
<i className="fa fa-facebook" />
</Button>
<Button
className="btn-icon-only rounded-circle ml-1"
color="warning"
href="#pablo"
onClick={e => e.preventDefault()}
>
<i className="fa fa-dribbble" />
</Button>
</div>
</div>
</div>
</Col>
<Col className="mb-5 mb-lg-0" lg="3" md="6">
<div className="px-4">
<img
alt="..."
className="rounded-circle img-center img-fluid shadow shadow-lg--hover"
src={require("../../assets/img/theme/team-2-800x800.jpg")}
style={{ width: "200px" }}
/>
<div className="pt-4 text-center">
<h5 className="title">
<span className="d-block mb-1">Romina Hadid</span>
<small className="h6 text-muted">
Marketing Strategist
</small>
</h5>
<div className="mt-3">
<Button
className="btn-icon-only rounded-circle"
color="primary"
href="#pablo"
onClick={e => e.preventDefault()}
>
<i className="fa fa-twitter" />
</Button>
<Button
className="btn-icon-only rounded-circle ml-1"
color="primary"
href="#pablo"
onClick={e => e.preventDefault()}
>
<i className="fa fa-facebook" />
</Button>
<Button
className="btn-icon-only rounded-circle ml-1"
color="primary"
href="#pablo"
onClick={e => e.preventDefault()}
>
<i className="fa fa-dribbble" />
</Button>
</div>
</div>
</div>
</Col>
<Col className="mb-5 mb-lg-0" lg="3" md="6">
<div className="px-4">
<img
alt="..."
className="rounded-circle img-center img-fluid shadow shadow-lg--hover"
src={require("../../assets/img/theme/team-3-800x800.jpg")}
style={{ width: "200px" }}
/>
<div className="pt-4 text-center">
<h5 className="title">
<span className="d-block mb-1">Alexander Smith</span>
<small className="h6 text-muted">UI/UX Designer</small>
</h5>
<div className="mt-3">
<Button
className="btn-icon-only rounded-circle"
color="info"
href="#pablo"
onClick={e => e.preventDefault()}
>
<i className="fa fa-twitter" />
</Button>
<Button
className="btn-icon-only rounded-circle ml-1"
color="info"
href="#pablo"
onClick={e => e.preventDefault()}
>
<i className="fa fa-facebook" />
</Button>
<Button
className="btn-icon-only rounded-circle ml-1"
color="info"
href="#pablo"
onClick={e => e.preventDefault()}
>
<i className="fa fa-dribbble" />
</Button>
</div>
</div>
</div>
</Col>
<Col className="mb-5 mb-lg-0" lg="3" md="6">
<div className="px-4">
<img
alt="..."
className="rounded-circle img-center img-fluid shadow shadow-lg--hover"
src={require("../../assets/img/theme/team-4-800x800.jpg")}
style={{ width: "200px" }}
/>
<div className="pt-4 text-center">
<h5 className="title">
<span className="d-block mb-1">John Doe</span>
<small className="h6 text-muted">Founder and CEO</small>
</h5>
<div className="mt-3">
<Button
className="btn-icon-only rounded-circle"
color="success"
href="#pablo"
onClick={e => e.preventDefault()}
>
<i className="fa fa-twitter" />
</Button>
<Button
className="btn-icon-only rounded-circle ml-1"
color="success"
href="#pablo"
onClick={e => e.preventDefault()}
>
<i className="fa fa-facebook" />
</Button>
<Button
className="btn-icon-only rounded-circle ml-1"
color="success"
href="#pablo"
onClick={e => e.preventDefault()}
>
<i className="fa fa-dribbble" />
</Button>
</div>
</div>
</div>
</Col>
</Row>
</Container>
</section>
<section className="section section-lg pt-0">
<Container>
<Card className="bg-gradient-warning shadow-lg border-0">
<div className="p-5">
<Row className="align-items-center">
<Col lg="8">
<h3 className="text-white">
We made website building easier for you.
</h3>
<p className="lead text-white mt-3">
I will be the leader of a company that ends up being
worth billions of dollars, because I got the answers. I
understand culture.
</p>
</Col>
<Col className="ml-lg-auto" lg="3">
<Button
block
className="btn-white"
color="default"
href="https://www.creative-tim.com/product/argon-design-system-react?ref=adsr-landing-page"
size="lg"
>
Download React
</Button>
</Col>
</Row>
</div>
</Card>
</Container>
</section>
<section className="section section-lg bg-gradient-default">
<Container className="pt-lg pb-300">
<Row className="text-center justify-content-center">
<Col lg="10">
<h2 className="display-3 text-white">Build something</h2>
<p className="lead text-white">
According to the National Oceanic and Atmospheric
Administration, Ted, Scambos, NSIDClead scentist, puts the
potentially record low maximum sea ice extent tihs year down
to low ice.
</p>
</Col>
</Row>
<Row className="row-grid mt-5">
<Col lg="4">
<div className="icon icon-lg icon-shape bg-gradient-white shadow rounded-circle text-primary">
<i className="ni ni-settings text-primary" />
</div>
<h5 className="text-white mt-3">Building tools</h5>
<p className="text-white mt-3">
Some quick example text to build on the card title and make
up the bulk of the card's content.
</p>
</Col>
<Col lg="4">
<div className="icon icon-lg icon-shape bg-gradient-white shadow rounded-circle text-primary">
<i className="ni ni-ruler-pencil text-primary" />
</div>
<h5 className="text-white mt-3">Grow your market</h5>
<p className="text-white mt-3">
Some quick example text to build on the card title and make
up the bulk of the card's content.
</p>
</Col>
<Col lg="4">
<div className="icon icon-lg icon-shape bg-gradient-white shadow rounded-circle text-primary">
<i className="ni ni-atom text-primary" />
</div>
<h5 className="text-white mt-3">Launch time</h5>
<p className="text-white mt-3">
Some quick example text to build on the card title and make
up the bulk of the card's content.
</p>
</Col>
</Row>
</Container>
{/* SVG separator */}
<div className="separator separator-bottom separator-skew zindex-100">
<svg
xmlns="http://www.w3.org/2000/svg"
preserveAspectRatio="none"
version="1.1"
viewBox="0 0 2560 100"
x="0"
y="0"
>
<polygon
className="fill-white"
points="2560 0 2560 100 0 100"
/>
</svg>
</div>
</section>
<section className="section section-lg pt-lg-0 section-contact-us">
<Container>
<Row className="justify-content-center mt--300">
<Col lg="8">
<Card className="bg-gradient-secondary shadow">
<CardBody className="p-lg-5">
<h4 className="mb-1">Want to work with us?</h4>
<p className="mt-0">
Your project is very important to us.
</p>
<FormGroup
className={classnames("mt-5", {
focused: this.state.nameFocused
})}
>
<InputGroup className="input-group-alternative">
<InputGroupAddon addonType="prepend">
<InputGroupText>
<i className="ni ni-user-run" />
</InputGroupText>
</InputGroupAddon>
<Input
placeholder="Your name"
type="text"
onFocus={e => this.setState({ nameFocused: true })}
onBlur={e => this.setState({ nameFocused: false })}
/>
</InputGroup>
</FormGroup>
<FormGroup
className={classnames({
focused: this.state.emailFocused
})}
>
<InputGroup className="input-group-alternative">
<InputGroupAddon addonType="prepend">
<InputGroupText>
<i className="ni ni-email-83" />
</InputGroupText>
</InputGroupAddon>
<Input
placeholder="Email address"
type="email"
onFocus={e => this.setState({ emailFocused: true })}
onBlur={e => this.setState({ emailFocused: false })}
/>
</InputGroup>
</FormGroup>
<FormGroup className="mb-4">
<Input
className="form-control-alternative"
cols="80"
name="name"
placeholder="Type a message..."
rows="4"
type="textarea"
/>
</FormGroup>
<div>
<Button
block
className="btn-round"
color="default"
size="lg"
type="button"
>
Send Message
</Button>
</div>
</CardBody>
</Card>
</Col>
</Row>
</Container>
</section>
<Download />
</main>
<CardsFooter />
</>
);
}
Example #15
| Source File: Tables.js From id.co.moonlay-eworkplace-admin-web with MIT License | 4 votes |
|
render() {
let options = this.state.listDivison.map(function (division) {
return { value: division.Id, label: division.Name };
})
const { results, currentPage, resultsPerPage } = this.state;
const indexOfLastTodo = currentPage * resultsPerPage;
const indexOfFirstTodo = indexOfLastTodo - resultsPerPage;
const currentresults = results.slice(indexOfFirstTodo, indexOfLastTodo);
const renderresults = currentresults.map((results, index) => {
//return <li key={index}>{todo.username}</li>;
return (
<tr key={results._id} data-category={results._id}>
<td>{results._id}</td>
<td>{results.code}</td>
<td>{results.name}</td>
<td>
{/* <Button
className="btn btn-info"
onClick={() => this.detailsRole(results._id)}>
Details
</Button>
*/}
<Button
className="btn btn-info"
onClick={() => this.detailRole(results._id)}>
Details
</Button>
<Button
className="btn btn-danger"
onClick={() => this.deleteRole(results._id)}>
Delete
</Button>
</td>
</tr>
);
});
const pageNumbers = [];
for (let i = 1; i <= Math.ceil(results.length / resultsPerPage); i++) {
pageNumbers.push(i);
}
const renderPageNumbers = pageNumbers.map(number => {
return (
<li
key={number}
id={number}
onClick={this.handleClick}
className="page-link">
{number}
</li>
);
});
if (this.state.loading === false) {
return <h2>Loading...</h2>;
}
return (
<div>
{/*Modal buat detail */}
<Modal show={this.state.showDetails} onHide={this.handleClose}>
<Modal.Header closeButton>
<Modal.Title>Details Roles</Modal.Title>
</Modal.Header>
<Modal.Body>
<Form>
Division Name
<InputGroup className="mb-3">
<Input type="text" autoComplete="Username" value={this.state.divisionsName} disabled />
</InputGroup>
Job Title Name
<InputGroup className="mb-3">
<Input type="text" value={this.state.jobstitleName} disabled />
</InputGroup>
Permision
<InputGroup className="mb-3">
<Input type="text" value={this.state.rolesId === 1 || this.state.rolesId === 99 ? 'Can Approve' : 'Cannot Approve' } disabled/>
</InputGroup>
</Form>
</Modal.Body>
<Modal.Footer>
<Button className="btn btn-secondary" onClick={this.handleClose}>
Close
</Button>
</Modal.Footer>
</Modal>
<Modal show={this.state.show} onHide={this.handleClose}>
<Modal.Header closeButton>
<Modal.Title>Add Roles</Modal.Title>
</Modal.Header>
<Modal.Body>
<Form>
Code
<InputGroup className="mb-3">
<Input type="text" onChange={this.handleCode} placeholder="Code" autoComplete="Username" />
</InputGroup>
Name
<InputGroup className="mb-3">
<Input type="text" onChange={this.handleName} placeholder="Name" autoComplete="Name" />
</InputGroup>
Description
<InputGroup className="mb-3">
<Input type="text" onChange={this.handleDescription} placeholder="Description" autoComplete="Name" />
</InputGroup>
Job Title
<Select style={{width:70}}
name="form-field-name"
value={this.state.selectedivision}
onChange={this.handleDivision}
options={options} />
Permission
<Select style={{width:70}}
name="form-field-name"
value={this.state.selectedRolePermisiion}
onChange={this.handlePermisionRoleId}
options={permisionRoleIdList} />
</Form>
</Modal.Body>
<Modal.Footer>
<Button className="btn btn-secondary" onClick={this.handleClose}>
Close
</Button>
<Button className="btn btn-info" onClick={this.handelsubmitform}>
Save Changes
</Button>
</Modal.Footer>
</Modal>
<div className="row">
{/* <div class="col-md-3">
<h4>Date from</h4>
<input
type="date"
class="form-control"
id="datefilterfrom"
data-date-split-input="true"
onChange={this.handleDateChange}
/>
</div> */}
{/* <div class="col-md-3">
<h4>Date to</h4>
<input
type="date"
class="form-control"
id="datefilterto"
data-date-split-input="true"
/>
</div> */}
{/* <div>
<h4>Date to</h4>
<button onClick={this.handleJS}>filter date</button>
</div> */}
</div>
<div className="animated fadeIn">
{this.state.loading && (
<Row>
<Col xs="12" lg="12">
<Card>
<CardHeader>
<Row>
<Col>
<i className="fa fa-user" /> <b> List Role</b>
<Button
style={{ marginLeft: 10 }}
color="success"
className="px-4"
onClick={this.handleAddDivision}>
Add Role
</Button>
</Col>
<Col>
<input
type="text"
id="myInput"
className="form-control form-control-md"
style={{ width: '100%' }}
placeholder="Search By Name"
onChange={this.filterList}
/>
</Col>
</Row>
</CardHeader>
<CardBody>
{/* <DateRange
format="DD/MM/YYYY"
startDate={rangePicker["startDate"]}
endDate={rangePicker["endDate"]}
linkedCalendars={true}
disableDaysBeforeToday={true}
date={now => now}
onInit={this.handleChange}
onChange={this.handleChange} /> */}
<Table id="myTable" responsive striped>
<thead>
<tr>
<th>Id</th>
<th>Code</th>
<th>Name</th>
<th>Action</th>
</tr>
</thead>
<tbody>{
renderresults
}</tbody>
</Table>
</CardBody>
</Card>
</Col>
</Row>
)}
</div>
{/* <Pagination>
<PaginationItem>
{renderPageNumbers}
</PaginationItem>
</Pagination>
*/}
<ul className="pagination">{renderPageNumbers}</ul>
</div>
);
}
Example #16
| Source File: Inputs.jsx From nodejs-rest-api-boilerplate with MIT License | 4 votes |
|
render() {
return (
<>
<section className="section pb-0 section-components">
<Container className="mb-5">
{/* Inputs */}
<h3 className="h4 text-success font-weight-bold mb-4">Inputs</h3>
<div className="mb-3">
<small className="text-uppercase font-weight-bold">
Form controls
</small>
</div>
<Row>
<Col lg="4" sm="6">
<FormGroup>
<Input placeholder="Regular" type="text" />
</FormGroup>
<FormGroup
className={classnames({
focused: this.state.searchFocused
})}
>
<InputGroup className="mb-4">
<InputGroupAddon addonType="prepend">
<InputGroupText>
<i className="ni ni-zoom-split-in" />
</InputGroupText>
</InputGroupAddon>
<Input
placeholder="Search"
type="text"
onFocus={e => this.setState({ searchFocused: true })}
onBlur={e => this.setState({ searchFocused: false })}
/>
</InputGroup>
</FormGroup>
</Col>
<Col lg="4" sm="6">
<FormGroup>
<Input disabled placeholder="Regular" type="text" />
</FormGroup>
<FormGroup
className={classnames({
focused: this.state.birthdayFocused
})}
>
<InputGroup className="mb-4">
<Input
placeholder="Birthday"
type="text"
onFocus={e => this.setState({ birthdayFocused: true })}
onBlur={e => this.setState({ birthdayFocused: false })}
/>
<InputGroupAddon addonType="append">
<InputGroupText>
<i className="ni ni-zoom-split-in" />
</InputGroupText>
</InputGroupAddon>
</InputGroup>
</FormGroup>
</Col>
<Col lg="4" sm="6">
<FormGroup className="has-success">
<Input
className="is-valid"
placeholder="Success"
type="text"
/>
</FormGroup>
<FormGroup className="has-danger">
<Input
className="is-invalid"
placeholder="Error Input"
type="email"
/>
</FormGroup>
</Col>
</Row>
</Container>
<div className="py-5 bg-secondary">
<Container>
{/* Inputs (alternative) */}
<div className="mb-3">
<small className="text-uppercase font-weight-bold">
Form controls (alternative)
</small>
</div>
<Row>
<Col lg="4" sm="6">
<FormGroup>
<Input
className="form-control-alternative"
placeholder="Regular"
type="text"
/>
</FormGroup>
<FormGroup
className={classnames({
focused: this.state.searchAltFocused
})}
>
<InputGroup className="input-group-alternative mb-4">
<InputGroupAddon addonType="prepend">
<InputGroupText>
<i className="ni ni-zoom-split-in" />
</InputGroupText>
</InputGroupAddon>
<Input
placeholder="Search"
type="text"
onFocus={e => this.setState({ searchAltFocused: true })}
onBlur={e => this.setState({ searchAltFocused: false })}
/>
</InputGroup>
</FormGroup>
</Col>
<Col lg="4" sm="6">
<FormGroup>
<Input
className="form-control-alternative"
disabled
placeholder="Regular"
type="text"
/>
</FormGroup>
<FormGroup
className={classnames({
focused: this.state.birthdayAltFocused
})}
>
<InputGroup className="input-group-alternative mb-4">
<Input
placeholder="Birthday"
type="text"
onFocus={e =>
this.setState({ birthdayAltFocused: true })
}
onBlur={e =>
this.setState({ birthdayAltFocused: false })
}
/>
<InputGroupAddon addonType="append">
<InputGroupText>
<i className="ni ni-zoom-split-in" />
</InputGroupText>
</InputGroupAddon>
</InputGroup>
</FormGroup>
</Col>
<Col lg="4" sm="6">
<FormGroup className="has-success">
<Input
className="form-control-alternative is-valid"
placeholder="Success"
type="text"
/>
</FormGroup>
<FormGroup className="has-danger">
<Input
className="form-control-alternative is-invalid"
placeholder="Error Input"
type="email"
/>
</FormGroup>
</Col>
</Row>
</Container>
</div>
</section>
</>
);
}
Example #17
| Source File: DemoDashboard.jsx From react-lte with MIT License | 4 votes |
|
export default function DemoDashboard() {
return (
<>
<LteContentHeader title='Dashboard' />
<LteContent>
<Row>
<Col xs='12' sm='6' md='3'>
<LteInfoBox icon={faCog} text='CPU Traffic' number='10%' iconColor='info' />
</Col>
<Col xs='12' sm='6' md='3'>
<LteInfoBox icon={faThumbsUp} text='Likes' number='41,410' iconColor='danger' />
</Col>
<div className='clearfix hidden-md-up' />
<Col xs='12' sm='6' md='3'>
<LteInfoBox icon={faShoppingCart} text='Sales' number='760' iconColor='success' />
</Col>
<Col xs='12' sm='6' md='3'>
<LteInfoBox icon={faUsers} text='New Members' number='2,000' iconColor='warning' />
</Col>
</Row>
<Row>
<Col lg='3' xs='6'>
<LteSmallBox title='150' message='New Orders' href='/info' icon={faShoppingBasket} color='info' />
</Col>
<Col lg='3' xs='6'>
<LteSmallBox title='53%' message='Bounce Rate' href='/info' icon={faChartBar} color='success' />
</Col>
<Col lg='3' xs='6'>
<LteSmallBox title='44' message='User Registrations' href='/info' icon={faUserPlus} color='warning' />
</Col>
<Col lg='3' xs='6'>
<LteSmallBox title='65' message='Unique Visitors' href='/info' icon={faChartPie} color='danger' />
</Col>
</Row>
<Row>
<Col lg='8'>
<Card>
<CardHeader className='border-transparent'>
<CardTitle>Latest Orders</CardTitle>
<LteCardTools>
<Button color='' className='btn-tool' data-card-widget='collapse'>
<FontAwesomeIcon icon={faMinus} />
</Button>
<Button color='' className='btn-tool' data-card-widget='remove'>
<FontAwesomeIcon icon={faTimes} />
</Button>
</LteCardTools>
</CardHeader>
<CardBody className='p-0'>
<Table responsive>
<thead>
<tr>
<th>Order ID</th>
<th>Item</th>
<th>Status</th>
<th>Popularity</th>
</tr>
</thead>
<tbody>
<tr>
<td>OR9842</td>
<td>Call of Duty IV</td>
<td>
<Badge tag='span' color='success'>
Shipped
</Badge>
</td>
<td>
<div className='sparkbar' data-color='#00a65a' data-height='20'>
90,80,90,-70,61,-83,63
</div>
</td>
</tr>
<tr>
<td>OR1848</td>
<td>Samsung Smart TV</td>
<td>
<Badge tag='span' color='warning'>
Pending
</Badge>
</td>
<td>
<div className='sparkbar' data-color='#f39c12' data-height='20'>
90,80,-90,70,61,-83,68
</div>
</td>
</tr>
<tr>
<td>OR7429</td>
<td>iPhone 6 Plus</td>
<td>
<Badge tag='span' color='danger'>
Delivered
</Badge>
</td>
<td>
<div className='sparkbar' data-color='#f56954' data-height='20'>
90,-80,90,70,-61,83,63
</div>
</td>
</tr>
<tr>
<td>OR7429</td>
<td>Samsung Smart TV</td>
<td>
<Badge tag='span' color='info'>
Processing
</Badge>
</td>
<td>
<div className='sparkbar' data-color='#00c0ef' data-height='20'>
90,80,-90,70,-61,83,63
</div>
</td>
</tr>
<tr>
<td>OR1848</td>
<td>Samsung Smart TV</td>
<td>
<Badge tag='span' color='warning'>
Pending
</Badge>
</td>
<td>
<div className='sparkbar' data-color='#f39c12' data-height='20'>
90,80,-90,70,61,-83,68
</div>
</td>
</tr>
<tr>
<td>OR7429</td>
<td>iPhone 6 Plus</td>
<td>
<Badge tag='span' color='danger'>
Delivered
</Badge>
</td>
<td>
<div className='sparkbar' data-color='#f56954' data-height='20'>
90,-80,90,70,-61,83,63
</div>
</td>
</tr>
<tr>
<td>OR9842</td>
<td>Call of Duty IV</td>
<td>
<Badge tag='span' color='success'>
Shipped
</Badge>
</td>
<td>
<div className='sparkbar' data-color='#00a65a' data-height='20'>
90,80,90,-70,61,-83,63
</div>
</td>
</tr>
</tbody>
</Table>
</CardBody>
</Card>
<Row>
<Col lg='6'>
<LteDirectChat color='warning'>
<CardHeader>
<CardTitle>Direct Chat</CardTitle>
<LteCardTools>
<Badge color='warning' data-toggle='tooltip' title='3 New Messages'>
3
</Badge>
<Button className='btn-tool' color='' data-card-widget='collapse'>
<FontAwesomeIcon icon={faMinus} />
</Button>
<Button
color=''
className='btn-tool'
data-toggle='tooltip'
title='Contacts'
data-widget='chat-pane-toggle'
>
<FontAwesomeIcon icon={faComments} />
</Button>
<Button color='' className='btn-tool' data-card-widget='remove'>
<FontAwesomeIcon icon={faTimes} />
</Button>
</LteCardTools>
</CardHeader>
<CardBody>
<LteDirectChatMessages>
<LteDirectChatMsg
name='Alexander Pierce'
date='23 Jan 2:00 pm'
image={user1}
message="Is this template really for free? That's unbelievable!"
/>
<LteDirectChatMsg
right
name='Sarah Bullock'
date='23 Jan 2:05 pm'
image={user3}
message='You better believe it!'
/>
<LteDirectChatMsg
name='Alexander Pierce'
date='23 Jan 5:37 pm'
image={user1}
message='Working with AdminLTE on a great new app! Wanna join?'
/>
<LteDirectChatMsg
right
name='Sarah Bullock'
date='23 Jan 6:10 pm'
image={user3}
message='I would love to.'
/>
</LteDirectChatMessages>
<LteDirectChatContacts>
<LteContactsList>
<LteContactsListItem
href='/contacts'
image={user1}
name='Count Dracula'
date='2/28/2015'
message='How have you been? I was...'
/>
<LteContactsListItem
href='/contacts'
image={user7}
name='Sarah Doe'
date='2/23/2015'
message='I will be waiting for...'
/>
<LteContactsListItem
href='/contacts'
image={user3}
name='Nadia Jolie'
date='2/20/2015'
message="I'll call you back at..."
/>
<LteContactsListItem
href='/contacts'
image={user5}
name='Nora S. Vans'
date='2/10/2015'
message='Where is your new...'
/>
<LteContactsListItem
href='/contacts'
image={user6}
name='John K.'
date='1/27/2015'
message='Can I take a look at...'
/>
<LteContactsListItem
href='/contacts'
image={user8}
name='Kenneth M.'
date='1/4/2015'
message='Never mind I found...'
/>
</LteContactsList>
</LteDirectChatContacts>
</CardBody>
<CardFooter>
<Form>
<InputGroup>
<Input placeholder='Type Message ...' />
<InputGroupAddon addonType='append'>
<Button color='warning'>Send</Button>
</InputGroupAddon>
</InputGroup>
</Form>
</CardFooter>
</LteDirectChat>
</Col>
<Col lg='6'>
<Card>
<CardHeader>
<CardTitle>Latest Members</CardTitle>
<LteCardTools>
<Badge color='danger'>8 New Members</Badge>
<Button className='btn-tool' color='' data-card-widget='collapse'>
<FontAwesomeIcon icon={faMinus} />
</Button>
<Button color='' className='btn-tool' data-card-widget='remove'>
<FontAwesomeIcon icon={faTimes} />
</Button>
</LteCardTools>
</CardHeader>
<CardBody className='p-0'>
<LteUsersList>
<LteUsersListItem image={user1} href='/users' name='Alexander Pierce' date='Today' />
<LteUsersListItem image={user8} href='/users' name='Norman' date='Yesterday' />
<LteUsersListItem image={user7} href='/users' name='Jane' date='12 Jan' />
<LteUsersListItem image={user6} href='/users' name='John' date='12 Jan' />
<LteUsersListItem image={user2} href='/users' name='Alexander' date='13 Jan' />
<LteUsersListItem image={user5} href='/users' name='Sarah' date='14 Jan' />
<LteUsersListItem image={user4} href='/users' name='Nora' date='15 Jan' />
<LteUsersListItem image={user3} href='/users' name='Nadia' date='15 Jan' />
</LteUsersList>
</CardBody>
</Card>
</Col>
</Row>
</Col>
<Col lg='4'>
<LteInfoBox icon={faTag} text='Inventory' number='5,200' bgColor='warning' />
<LteInfoBox icon={faHeart} text='Mentions' number='92,050' bgColor='success' />
<LteInfoBox icon={faCloudDownloadAlt} text='Downloads' number='114,381' bgColor='danger' />
<LteInfoBox icon={faComment} text='Direct Messages' number='163,921' bgColor='info' />
<Card>
<CardHeader className='border-0'>
<CardTitle>Online Store Overview</CardTitle>
<LteCardTools>
<Button className='btn-tool' color=''>
<FontAwesomeIcon icon={faDownload} />
</Button>
<Button color='' className='btn-tool'>
<FontAwesomeIcon icon={faBars} />
</Button>
</LteCardTools>
</CardHeader>
<CardBody>
<div className='d-flex justify-content-between align-items-center border-bottom mb-3'>
<p className='text-success text-xl'>
<FontAwesomeIcon icon={faRedo} />
</p>
<p className='d-flex flex-column text-right'>
<span className='font-weight-bold'>
<FontAwesomeIcon icon={faArrowUp} className='text-success' />
12%
</span>
<span className='text-muted'>CONVERSION RATE</span>
</p>
</div>
<div className='d-flex justify-content-between align-items-center border-bottom mb-3'>
<p className='text-warning text-xl'>
<FontAwesomeIcon icon={faShoppingCart} />
</p>
<p className='d-flex flex-column text-right'>
<span className='font-weight-bold'>
<FontAwesomeIcon icon={faArrowUp} className='text-warning' /> 0.8%
</span>
<span className='text-muted'>SALES RATE</span>
</p>
</div>
<div className='d-flex justify-content-between align-items-center mb-0'>
<p className='text-danger text-xl'>
<FontAwesomeIcon icon={faUsers} />
</p>
<p className='d-flex flex-column text-right'>
<span className='font-weight-bold'>
<FontAwesomeIcon icon={faArrowUp} className='text-danger' /> 1%
</span>
<span className='text-muted'>REGISTRATION RATE</span>
</p>
</div>
</CardBody>
</Card>
</Col>
</Row>
</LteContent>
</>
);
}
Example #18
| Source File: Datepicker.jsx From nodejs-rest-api-boilerplate with MIT License | 4 votes |
|
render() {
return (
<>
<h3 className="h4 text-success font-weight-bold mt-md mb-4">
Datepicker
</h3>
<Row>
<Col md="4">
<small className="d-block text-uppercase font-weight-bold mb-3">
Single date
</small>
<FormGroup className="focused">
<InputGroup>
<InputGroupAddon addonType="prepend">
<InputGroupText>
<i className="ni ni-calendar-grid-58" />
</InputGroupText>
</InputGroupAddon>
<ReactDatetime
inputProps={{
placeholder: "Date Picker Here"
}}
timeFormat={false}
/>
</InputGroup>
</FormGroup>
</Col>
<Col className="mt-4 mt-md-0" md="8">
<small className="d-block text-uppercase font-weight-bold mb-3">
Date range
</small>
<Row>
<Col sm={6} xs={12}>
<FormGroup className="focused">
<InputGroup>
<InputGroupAddon addonType="prepend">
<InputGroupText>
<i className="ni ni-calendar-grid-58" />
</InputGroupText>
</InputGroupAddon>
<ReactDatetime
inputProps={{
placeholder: "Start Date"
}}
value={this.state.startDate}
timeFormat={false}
onChange={e =>
this.handleReactDatetimeChange("startDate", e)
}
renderDay={(props, currentDate, selectedDate) => {
let classes = props.className;
classes += this.getClassNameReactDatetimeDays(
currentDate
);
return (
<td {...props} className={classes}>
{currentDate.date()}
</td>
);
}}
/>
</InputGroup>
</FormGroup>
</Col>
<Col sm={6} xs={12}>
<FormGroup className="focused">
<InputGroup>
<InputGroupAddon addonType="prepend">
<InputGroupText>
<i className="ni ni-calendar-grid-58" />
</InputGroupText>
</InputGroupAddon>
<ReactDatetime
inputProps={{
placeholder: "End Date"
}}
className="rdtPickerOnRight"
value={this.state.endDate}
timeFormat={false}
onChange={e =>
this.handleReactDatetimeChange("endDate", e)
}
renderDay={(props, currentDate, selectedDate) => {
let classes = props.className;
classes += this.getClassNameReactDatetimeDays(
currentDate
);
return (
<td {...props} className={classes}>
{currentDate.date()}
</td>
);
}}
/>
</InputGroup>
</FormGroup>
</Col>
</Row>
</Col>
</Row>
</>
);
}
Example #19
| Source File: Introduce.js From semikolan-react with GNU General Public License v3.0 | 4 votes |
|
Register = () => {
const handleSubmit = (event) => {
event.preventDefault();
const name = document.querySelector("input[name=name]").value;
const email = document.querySelector("input[name=email]").value;
const college = document.querySelector("input[name=college]").value;
const branch = document.querySelector("input[name=branch]").value;
const year = document.querySelector("input[name=year]").value;
const linkedin = document.querySelector("input[name=linkedin]").value;
const github = document.querySelector("input[name=github]").value;
const about = document.querySelector("textarea[name=about]").value;
const other = document.querySelector("textarea[name=other]").value;
const newsletter = document.querySelector("input[name=newsletter]").value;
API.post(`introduce`, {
name,
email,
college,
branch,
year,
linkedin,
github,
about,
other,
newsletter
})
.then((res) => {
alert(
"You have sucessfully submitted your details."
);
window.location.replace('/')
})
.catch(function (error) {
console.log(error);
alert(
`We're Sorry, Your details have not been submitted yet. \n
It is happened due to -- ` + error
);
})
.then(function () {
// always executed
});
};
return (
<div className="c-app c-default-layout flex-row align-items-center">
<CContainer>
<CRow className="justify-content-center">
<CCol md="10" lg="8" xl="8">
<CCard className="mx-4">
<CCardBody className="p-4">
<CForm onSubmit={handleSubmit}>
<center>
<h1>Introduce Yourself</h1>
</center>
<p className="text-muted mb-0">Personal Info</p>
<InputGroup className="mb-2 mt-1">
<InputGroupAddon addonType="prepend">
<InputGroupText>
<i className="fa fa-user p-1" />
</InputGroupText>
</InputGroupAddon>
<Input name="name" placeholder="Name" required />
</InputGroup>
<InputGroup className="mb-2 mt-1">
<InputGroupAddon addonType="prepend">
<InputGroupText>
<i className="fa fa-envelope p-1" />
</InputGroupText>
</InputGroupAddon>
<Input name="email" type="email" placeholder="Email" required />
</InputGroup>
<InputGroup className="mb-2 mt-1">
<InputGroupAddon addonType="prepend">
<InputGroupText>
<i className="fa fa-university p-1" />
</InputGroupText>
</InputGroupAddon>
<Input name="college" placeholder="College" required />
</InputGroup>
<InputGroup className="mb-2 mt-1">
<InputGroupAddon addonType="prepend">
<InputGroupText>
<i className="fa fa-graduation-cap p-1" />
</InputGroupText>
</InputGroupAddon>
<Input name="branch" placeholder="Branch" required />
</InputGroup>
<InputGroup className="mb-2 mt-1">
<InputGroupAddon addonType="prepend">
<InputGroupText>
<i className="fa fa-calendar-week p-1" />
</InputGroupText>
</InputGroupAddon>
<Input name="year" placeholder="Year" required />
</InputGroup>
<p className="text-muted mt-4 mb-0">Social Info</p>
<InputGroup className="mb-2 mt-1">
<InputGroupAddon addonType="prepend">
<InputGroupText>
<i className="fa fa-linkedin p-1" />
</InputGroupText>
</InputGroupAddon>
<Input name="linkedin" placeholder="Linkedin Profile URL" required />
</InputGroup>
<InputGroup className="mb-2 mt-1">
<InputGroupAddon addonType="prepend">
<InputGroupText>
<i className="fa fa-github p-1" />
</InputGroupText>
</InputGroupAddon>
<Input name="github" placeholder="Github Account Username/URL" required />
</InputGroup>
<FormGroup>
<Label for="exampleText" className="text-muted mt-2">
Tell us about your technological interests (For ex. Web Dev, App Dev, Machine Learning, Graphic Design etc.):
</Label>
<Input
type="textarea"
name="about"
id="example"
placeholder="Blockchain, Graphic Design"
required />
</FormGroup>
<FormGroup>
<Label for="example" className="text-muted mt-2">
Tell us about the tools and languages you're currently using or want to learn:
</Label>
<Input
type="textarea"
name="other"
id="exampleText"
placeholder="HTML, CSS, JavaScript, React.js and c++"
/>
</FormGroup>
<FormGroup check>
<Label check>
<Input name="newsletter" type="checkbox" className="mt-1" />{" "}
Subscribe to the Semikolan weekly Newsletter
</Label>
</FormGroup>
<center>
<button
type="submit"
className=" btn btn-lg mt-3"
style={{
background: "var(--Navy)",
color: "var(--LightestSlate)",
}}
block
>
Submit
</button>
</center>
</CForm>
</CCardBody>
</CCard>
</CCol>
</CRow>
</CContainer>
</div>
);
}
Example #20
| Source File: EditProfile.js From nodejs-rest-api-boilerplate with MIT License | 4 votes |
|
render() {
const { user } = this.props.auth;
return (
<>
<DemoNavbar />
<main className="profile-page" ref="main">
<section className="section-profile-cover section-shaped my-0">
{/* Circles background */}
<div className="shape shape-style-1 shape-default alpha-4">
<span />
<span />
<span />
<span />
<span />
<span />
<span />
</div>
{/* SVG separator */}
<div className="separator separator-bottom separator-skew">
<svg
xmlns="http://www.w3.org/2000/svg"
preserveAspectRatio="none"
version="1.1"
viewBox="0 0 2560 100"
x="0"
y="0"
>
<polygon
className="fill-white"
points="2560 0 2560 100 0 100"
/>
</svg>
</div>
</section>
<section className="section">
<Container>
<Card className="card-profile shadow mt--300 bg-secondary ">
<CardHeader className="bg-white">
<Row className="justify-content-center">
<Col className="order-lg-2" lg="3">
<div className="card-profile-image">
<a href="#pablo" onClick={e => e.preventDefault()}>
<img
alt="..."
className="rounded-circle"
src={
user.profilePicture
? user.profilePicture
: require("../../assets/img/theme/team-4-800x800.jpg")
}
/>
</a>
</div>
</Col>
<Col
className="order-lg-3 text-lg-right align-self-lg-center"
lg="4"
>
<div className="card-profile-actions py-4 mt-lg-0">
<Link to="/profile">
<Button className="mr-4" color="default" size="sm">
Go back to profile
</Button>
</Link>
</div>
</Col>
<Col className="order-lg-1" lg="4"></Col>
</Row>
<div className="text-center mt-5">
<h3>
{user.name}
<span className="font-weight-light">, 27</span>
</h3>
</div>
</CardHeader>
<div className="mt-5 py-5text-center">
<Row className="justify-content-center">
<Col lg="9">
<Form role="form" noValidate onSubmit={this.onSubmit}>
<FormGroup className="mb-3">
<InputGroup className="input-group-alternative">
<InputGroupAddon addonType="prepend">
<InputGroupText>
<i className="ni ni-circle-08" />
</InputGroupText>
</InputGroupAddon>
<Input
placeholder="Name"
type="input"
onChange={this.onChange}
value={this.state.name}
id="name"
/>
</InputGroup>
</FormGroup>
<FormGroup className="mb-3">
<InputGroup className="input-group-alternative">
<InputGroupAddon addonType="prepend">
<InputGroupText>
<i className="ni ni-email-83" />
</InputGroupText>
</InputGroupAddon>
<Input
placeholder="Email"
type="email"
onChange={this.onChange}
value={this.state.email}
id="email"
/>
</InputGroup>
</FormGroup>
<FormGroup>
<InputGroup className="input-group-alternative">
<InputGroupAddon addonType="prepend">
<InputGroupText>
<i className="ni ni-lock-circle-open" />
</InputGroupText>
</InputGroupAddon>
<Input
placeholder="Password"
type="password"
autoComplete="off"
onChange={this.onChange}
value={this.state.password}
id="password"
/>
</InputGroup>
</FormGroup>
<FormGroup>
<InputGroup className="input-group-alternative">
<InputGroupAddon addonType="prepend">
<InputGroupText>
<i className="ni ni-lock-circle-open" />
</InputGroupText>
</InputGroupAddon>
<Input
placeholder="Re-enter Password"
type="password"
autoComplete="off"
onChange={this.onChange}
value={this.state.password2}
id="password2"
/>
</InputGroup>
</FormGroup>
<div className="text-center">
<Button
className="my-4"
color="primary"
type="submit"
>
Save Changes
</Button>
</div>
</Form>
</Col>
</Row>
</div>
</Card>
</Container>
</section>
</main>
<SimpleFooter />
</>
);
}
Example #21
| Source File: FormAdvanced.js From gedge-platform with Apache License 2.0 | 4 votes |
|
render() {
const { selectedGroup } = this.state;
const { selectedMulti } = this.state;
const { selectedMulti1 } = this.state;
function Offsymbol(text){
return (
<div
style={{
display: "flex",
justifyContent: "center",
alignItems: "center",
height: "100%",
fontSize: 12,
color: "#fff",
paddingRight: 2
}}
>
{" "}
{text}
</div>
);
};
function OnSymbol(text) {
return (
<div
style={{
display: "flex",
justifyContent: "center",
alignItems: "center",
height: "100%",
fontSize: 12,
color: "#fff",
paddingRight: 2
}}
>
{" "}
{text}
</div>
);
};
return (
<React.Fragment>
<div className="page-content">
<Container fluid>
<Breadcrumbs title="Form Advanced" breadcrumbItems={this.state.breadcrumbItems} />
<Row>
<Col lg="12">
<Card>
<CardBody>
<h4 className="card-title">Select2</h4>
<p className="card-title-desc">A mobile and touch friendly input spinner component for Bootstrap</p>
<form>
<Row>
<Col lg="6">
<FormGroup className="select2-container">
<Label>Single Select</Label>
<Select
value={selectedGroup}
onChange={this.handleSelectGroup}
options={optionGroup}
classNamePrefix="select2-selection"
/>
</FormGroup>
<FormGroup className="select2-container">
<Label className="control-label">Multiple Select</Label>
<Select
value={selectedMulti}
isMulti={true}
onChange={this.handleMulti}
options={optionGroup}
classNamePrefix="select2-selection"
/>
</FormGroup>
</Col>
<Col lg="6">
<FormGroup className="mb-0 select2-container">
<Label>Disable</Label>
<Select
value={selectedMulti1}
isMulti={true}
onChange={this.handleMulti1}
options={optionGroup}
classNamePrefix="select2-selection"
isDisabled={true}
/>
</FormGroup>
</Col>
</Row>
</form>
</CardBody>
</Card>
</Col>
</Row>
<Row>
<Col lg="6">
<Card>
<CardBody>
<h4 className="card-title">React Colorpicker</h4>
<p className="card-title-desc">Fancy and customizable colorpicker
plugin for Twitter Bootstrap.</p>
<Form action="#">
<FormGroup>
<Label>Simple input field</Label>
<Input
type="text"
className="colorpicker-default"
value={this.state.color}
onClick={() =>
this.setState({
simple_color: !this.state.simple_color
})
}
readOnly
/>
{this.state.simple_color ? (
<ColorPicker
saturationHeight={100}
saturationWidth={100}
value={this.state.color}
onDrag={this.onDrag.bind(this)}
/>
) : null}
</FormGroup>
<FormGroup>
<Label>With custom options - RGBA</Label>
<Input
type="text"
className="colorpicker-rgba form-control"
value={this.state.colorRGBA}
onClick={this.handleRGBA}
readOnly
/>
{
this.state.display_RGBA ? (
<SketchPicker
color="#fff"
value={this.state.colorRGBA}
width="160px"
onChangeComplete={this.onSwatchHover_RGBA}
/>
) : null
}
</FormGroup>
<FormGroup className="m-b-0">
<Label>As a component</Label>
<InputGroup className="colorpicker-default" title="Using format option">
<Input readOnly value={this.state.colorRgb} type="text" className="form-control input-lg" />
<InputGroupAddon addonType="append">
<span
className="input-group-text colorpicker-input-addon"
onClick={() => this.setState({ simple_color1: !this.state.simple_color1 })}
>
<i style={{
height: "16px",
width: "16px",
background: this.state.colorRgb
}}></i>
</span>
</InputGroupAddon>
</InputGroup>
{this.state.simple_color1 ?
<ColorPicker saturationHeight={100} saturationWidth={100} value={this.state.colorRgb} onDrag={this.onDragRgb.bind(this)} />
: null}
</FormGroup>
<FormGroup>
<Label>Horizontal mode</Label>
<Input
type="text"
onClick={() =>
this.setState({
simple_color2: !this.state.simple_color2
})
}
value={this.state.colorHor}
readOnly
/>
{this.state.simple_color2 ? (
<SketchPicker
color="#fff"
value={this.state.simple_color2}
width="160px"
onChangeComplete={this.handleHor}
/>
) : null}
</FormGroup>
<FormGroup className="mb-0">
<Label>Inline</Label>
<ColorPicker
saturationHeight={100}
saturationWidth={100}
value={this.state.colorCust}
onDrag={this.onDragCust.bind(this)}
/>
</FormGroup>
</Form>
</CardBody>
</Card>
</Col>
<Col lg="6">
<Card>
<CardBody>
<h4 className="card-title">Datepicker</h4>
<p className="card-title-desc">Examples of twitter bootstrap datepicker.</p>
<Form>
<FormGroup className="mb-4">
<Label>Default Functionality</Label>
<InputGroup>
<DatePicker
className="form-control"
selected={this.state.default_date}
onChange={this.handleDefault}
/>
</InputGroup>
</FormGroup>
<FormGroup className="mb-4">
<Label>Month View</Label>
<InputGroup>
<DatePicker
selected={this.state.monthDate}
className="form-control"
onChange={this.handleMonthChange}
showMonthDropdown
/>
</InputGroup>
</FormGroup>
<FormGroup className="mb-4">
<Label>Year View</Label>
<InputGroup>
<DatePicker
selected={this.state.yearDate}
className="form-control"
onChange={this.handleYearChange}
showYearDropdown
/>
</InputGroup>
</FormGroup>
<FormGroup className="mb-0">
<Label>Date Range</Label>
<div>
<div>
<DatePicker
selected={this.state.start_date}
selectsStart
className="form-control"
placeholderText="From"
startDate={this.state.start_date}
endDate={this.state.end_date}
onChange={this.handleStart}
/>
<DatePicker
selected={this.state.end_date}
selectsEnd
className="form-control"
startDate={this.state.start_date}
endDate={this.state.end_date}
onChange={this.handleEnd}
/>
</div>
</div>
</FormGroup>
</Form>
</CardBody>
</Card>
</Col>
</Row>
<Row>
<Col lg="6">
<Card>
<CardBody>
<h4 className="card-title">Bootstrap MaxLength</h4>
<p className="card-title-desc">This plugin integrates by default with
Twitter bootstrap using badges to display the maximum lenght of the
field where the user is inserting text. </p>
<Label>Default usage</Label>
<p className="text-muted m-b-15">
The badge will show up by default when the remaining chars
are 10 or less:
</p>
<Input
type="text"
maxLength="25"
name="defaultconfig"
onChange={this.threshholdDefault}
id="defaultconfig"
/>
{this.state.disDefault ? (
<span className="badgecount badge badge-info">
{this.state.threshholdDefault} / 25{" "}
</span>
) : null}
<div className="mt-3">
<Label>Threshold value</Label>
<p className="text-muted m-b-15">
Do you want the badge to show up when there are 20 chars
or less? Use the <code>threshold</code> option:
</p>
<Input
type="text"
maxLength={this.state.max_len}
onChange={this.threshholdchange}
name="thresholdconfig"
id="thresholdconfig"
/>
{this.state.disthresh ? (
<span className="badgecount badge badge-info">
{this.state.threshholdcount} / 25{" "}
</span>
) : null}
</div>
<div className="mt-3">
<Label>All the options</Label>
<p className="text-muted m-b-15">
Please note: if the <code>alwaysShow</code> option isenabled, the <code>threshold</code> option is ignored.
</p>
<Input
type="text"
maxLength="25"
onChange={this.optionchange}
name="alloptions"
id="alloptions"
/>
{this.state.disbadge ? (
<span className="badgecount">
<span className="badge badge-success">You Typed {this.state.optioncount} out of 25 chars available.</span>
</span>
) : null}
</div>
<div className="mt-3">
<Label>Position</Label>
<p className="text-muted m-b-15">
All you need to do is specify the <code>placement</code>{" "}
option, with one of those strings. If none is specified,
the positioning will be defauted to 'bottom'.
</p>
<Input
type="text"
maxLength="25"
onChange={this.placementchange}
name="placement"
id="placement"
/>
{this.state.placementbadge ? (
<span style={{ float: "right" }} className="badgecount badge badge-info">
{this.state.placementcount} / 25{" "}
</span>
) : null}
</div>
<div className="mt-3">
<Label>textareas</Label>
<p className="text-muted m-b-15">
Bootstrap maxlength supports textarea as well as inputs.
Even on old IE.
</p>
<Input
type="textarea"
id="textarea"
onChange={this.textareachange}
maxLength="225"
rows="3"
placeholder="This textarea has a limit of 225 chars."
/>
{this.state.textareabadge ? (
<span className="badgecount badge badge-info">
{" "}
{this.state.textcount} / 225{" "}
</span>
) : null}
</div>
</CardBody>
</Card>
</Col>
<Col lg="6">
<Card>
<CardBody>
<h4 className="card-title">Bootstrap TouchSpin</h4>
<p className="card-title-desc">A mobile and touch friendly input spinner component for Bootstrap</p>
<Form>
<FormGroup>
<Label>Using data attributes</Label>
<InputGroup>
<InputGroupAddon addonType="prepend"
onClick={() =>
this.setState({
data_attr: this.state.data_attr - 1
})
}
>
<Button type="button" color="primary">
<i className="mdi mdi-minus"></i>
</Button>
</InputGroupAddon>
<Input
type="number"
className="form-control"
value={this.state.data_attr}
placeholder="number"
readOnly
/>
<InputGroupAddon addonType="append"
onClick={() =>
this.setState({
data_attr: this.state.data_attr + 1
})
}
>
<Button type="button" color="primary">
<i className="mdi mdi-plus"></i>
</Button>
</InputGroupAddon>
</InputGroup>
</FormGroup>
<FormGroup>
<Label>Example with postfix (large)</Label>
<InputGroup>
<InputGroupAddon addonType="prepend"
onClick={() =>
this.setState({ postfix: this.state.postfix - 1 })
}
>
<Button type="button" color="primary">
<i className="mdi mdi-minus"></i>
</Button>
</InputGroupAddon>
<Input
type="number"
className="form-control"
value={this.state.postfix}
placeholder="number"
readOnly
/>
<InputGroupAddon addonType="append">
<span className="input-group-text">%</span>
<Button
type="button"
onClick={() =>
this.setState({
postfix: this.state.postfix + 1
})
}
color="primary"
>
<i className="mdi mdi-plus"></i>
</Button>
</InputGroupAddon>
</InputGroup>
</FormGroup>
<FormGroup>
<Label>Init with empty value:</Label>
<InputGroup>
<InputGroupAddon addonType="prepend"
onClick={() =>
this.setState({
empty_val: this.state.empty_val - 1
})
}
>
<Button type="button" color="primary">
<i className="mdi mdi-minus"></i>
</Button>
</InputGroupAddon>
<Input
type="number"
className="form-control"
value={this.state.empty_val}
placeholder="number"
readOnly
/>
<InputGroupAddon addonType="prepend"
onClick={() =>
this.setState({
empty_val: this.state.empty_val + 1
})
}
>
<Button type="button" color="primary">
<i className="mdi mdi-plus"></i>
</Button>
</InputGroupAddon>
</InputGroup>
</FormGroup>
<FormGroup>
<Label>
Value attribute is not set (applying settings.initval)
</Label>
<InputGroup>
<InputGroupAddon addonType="prepend"
onClick={() =>
this.setState({
not_attr: this.state.not_attr - 1
})
}
>
<Button type="button" color="primary">
<i className="mdi mdi-minus"></i>
</Button>
</InputGroupAddon>
<Input
type="number"
className="form-control"
value={this.state.not_attr}
placeholder="number"
readOnly
/>
<InputGroupAddon addonType="append"
onClick={() =>
this.setState({
not_attr: this.state.not_attr + 1
})
}
>
<Button type="button" color="primary">
<i className="mdi mdi-plus"></i>
</Button>
</InputGroupAddon>
</InputGroup>
</FormGroup>
<FormGroup className="mb-0">
<Label>
Value is set explicitly to 33 (skipping settings.initval)
</Label>
<InputGroup>
<InputGroupAddon addonType="prepend"
onClick={() =>
this.setState({
explicit_val: this.state.explicit_val - 1
})
}
>
<Button type="button" color="primary">
<i className="mdi mdi-minus"></i>
</Button>
</InputGroupAddon>
<Input
type="number"
className="form-control"
value={this.state.explicit_val}
placeholder="number"
readOnly
/>
<InputGroupAddon addonType="append"
onClick={() =>
this.setState({
explicit_val: this.state.explicit_val + 1
})
}
>
<Button type="button" color="primary">
<i className="mdi mdi-plus"></i>
</Button>
</InputGroupAddon>
</InputGroup>
</FormGroup>
</Form>{" "}
</CardBody>
</Card>
</Col>
</Row>
<Row>
<Col lg="12">
<Card>
<CardBody>
<h4 className="card-title">React Switch</h4>
<p className="card-title-desc">Here are a few types of switches. </p>
<Row>
<Col lg="6">
<h5 className="font-size-14 mb-3">Example switch</h5>
<div>
<Switch
uncheckedIcon={Offsymbol("Off")}
checkedIcon={OnSymbol("On")}
onColor="#626ed4"
onChange={() =>
this.setState({ switch1: !this.state.switch1 })
}
checked={this.state.switch1}
className="mr-1 mt-1"
/>
<Switch
uncheckedIcon={Offsymbol("No")}
checkedIcon={OnSymbol("Yes")}
onColor="#a2a2a2"
onChange={() =>
this.setState({ switch2: !this.state.switch2 })
}
checked={this.state.switch2}
className="mr-1 mt-1"
/>
<Switch
uncheckedIcon={Offsymbol("No")}
checkedIcon={OnSymbol("Yes")}
onColor="#02a499"
offColor="#ec4561"
onChange={() =>
this.setState({ switch3: !this.state.switch3 })
}
checked={this.state.switch3}
className="mr-1 mt-1"
/>
<Switch
uncheckedIcon={Offsymbol("No")}
checkedIcon={OnSymbol("Yes")}
onColor="#626ed4"
onChange={() =>
this.setState({ switch4: !this.state.switch4 })
}
checked={this.state.switch4}
className="mr-1 mt-1"
/>
<Switch
uncheckedIcon={Offsymbol("No")}
checkedIcon={OnSymbol("Yes")}
onColor="#02a499"
onChange={() =>
this.setState({ switch5: !this.state.switch5 })
}
checked={this.state.switch5}
className="mr-1 mt-1"
/>
<Switch
uncheckedIcon={Offsymbol("No")}
checkedIcon={OnSymbol("Yes")}
onColor="#38a4f8"
onChange={() =>
this.setState({ switch6: !this.state.switch6 })
}
checked={this.state.switch6}
className="mr-1 mt-1"
/>
<Switch
uncheckedIcon={Offsymbol("No")}
checkedIcon={OnSymbol("Yes")}
onColor="#f8b425"
onChange={() =>
this.setState({ switch7: !this.state.switch7 })
}
checked={this.state.switch7}
className="mr-1 mt-1"
/>
<Switch
uncheckedIcon={Offsymbol("No")}
checkedIcon={OnSymbol("Yes")}
onColor="#ec4561"
onChange={() =>
this.setState({ switch8: !this.state.switch8 })
}
checked={this.state.switch8}
className="mr-1 mt-1"
/>
<Switch
uncheckedIcon={Offsymbol("No")}
checkedIcon={OnSymbol("Yes")}
onColor="#2a3142"
onChange={() =>
this.setState({ switch9: !this.state.switch9 })
}
checked={this.state.switch9}
className="mr-1 mt-1"
/>
</div>
</Col>
<Col lg="6">
<div className="mt-4 mt-lg-0">
<h5 className="font-size-14 mb-3">Square switch</h5>
<div className="d-flex">
<label htmlFor="icon-switch">
<div className="square-switch">
<Switch
checked={!this.state.sw1}
onChange={()=>{this.setState({sw1 : !this.state.sw1})}}
uncheckedIcon={
<div
style={{
display: "flex",
justifyContent: "center",
alignItems: "center",
height: "100%",
fontSize: 15,
color: "white",
paddingRight: 2
}}
>
Off
</div>
}
checkedIcon={
<div
style={{
display: "flex",
justifyContent: "center",
alignItems: "center",
height: "100%",
fontSize: 15,
color: "white",
paddingRight: 2
}}
>
On
</div>
}
className="react-switch"
id="icon-switch"
/>
</div>
</label>
</div>
</div>
</Col>
</Row>
</CardBody>
</Card>
</Col>
</Row>
</Container>
</div>
</React.Fragment>
);
}
Example #22
| Source File: SectionButtons.js From Website2020 with MIT License | 4 votes |
|
function SectionButtons() {
React.useEffect(() => {
if (
!document
.getElementById("sliderRegular")
.classList.contains("noUi-target")
) {
Slider.create(document.getElementById("sliderRegular"), {
start: [37.5],
connect: [true, false],
step: 0.5,
range: { min: 0, max: 100 }
});
}
if (
!document.getElementById("sliderDouble").classList.contains("noUi-target")
) {
Slider.create(document.getElementById("sliderDouble"), {
start: [20, 80],
connect: [false, true, false],
step: 1,
range: { min: 0, max: 100 }
});
}
});
return (
<>
<div className="section section-buttons">
<Container>
<div className="title">
<h2>Basic Elements</h2>
</div>
<div id="buttons">
<div className="title">
<h3>
Buttons <br />
<small>Pick your style</small>
</h3>
</div>
<Row>
<Col md="8">
<Button color="info" type="button">
Default
</Button>
<Button className="btn-round ml-1" color="info" type="button">
Round
</Button>
<Button className="btn-round ml-1" color="info" type="button">
<i className="fa fa-heart mr-1" />
With Icon
</Button>
<Button
className="btn-just-icon ml-1"
color="info"
type="button"
>
<i className="fa fa-heart" />
</Button>
<Button className="btn-link ml-1" color="info" type="button">
Simple
</Button>
</Col>
</Row>
<div className="title">
<h3>
<small>Pick your size</small>
</h3>
</div>
<Row>
<Col md="8">
<Button
color="danger"
outline
size="sm"
type="button"
className="mr-1"
>
Small
</Button>
<Button color="danger" outline type="button" className="mr-1">
Regular
</Button>
<Button color="danger" outline size="lg" type="button">
Large
</Button>
</Col>
</Row>
<div className="title">
<h3>
<small>Pick your color</small>
</h3>
</div>
<Row>
<Col md="8">
<Button
className="btn-round mr-1"
color="default"
outline
type="button"
>
Default
</Button>
<Button
className="btn-round mr-1"
color="primary"
outline
type="button"
>
Primary
</Button>
<Button
className="btn-round mr-1"
color="info"
outline
type="button"
>
Info
</Button>
<Button
className="btn-round mr-1"
color="success"
outline
type="button"
>
Success
</Button>
<Button
className="btn-round mr-1"
color="warning"
outline
type="button"
>
Warning
</Button>
<Button
className="btn-round mr-1"
color="danger"
outline
type="button"
>
Danger
</Button>
<Button
className="btn-round"
outline
color="neutral"
type="button"
>
Neutral
</Button>
</Col>
</Row>
<br />
<Row>
<Col md="8">
<Button
className="btn-round mr-1"
color="default"
type="button"
>
Default
</Button>
<Button
className="btn-round mr-1"
color="primary"
type="button"
>
Primary
</Button>
<Button className="btn-round mr-1" color="info" type="button">
Info
</Button>
<Button
className="btn-round mr-1"
color="success"
type="button"
>
Success
</Button>
<Button
className="btn-round mr-1"
color="warning"
type="button"
>
Warning
</Button>
<Button className="btn-round mr-1" color="danger" type="button">
Danger
</Button>
<Button className="btn-round" color="neutral" type="button">
Neutral
</Button>
</Col>
</Row>
</div>
<div className="title">
<h3>Links</h3>
</div>
<Row>
<Col md="8">
<Button
className="mr-1"
color="link"
href="#pablo"
onClick={e => e.preventDefault()}
>
Default
</Button>
<Button
className="btn-link mr-1"
color="primary"
href="#pablo"
onClick={e => e.preventDefault()}
>
Primary
</Button>
<Button
className="btn-link mr-1"
color="success"
href="#pablo"
onClick={e => e.preventDefault()}
>
Success
</Button>
<Button
className="btn-link mr-1"
color="info"
href="#pablo"
onClick={e => e.preventDefault()}
>
Info
</Button>
<Button
className="btn-link mr-1"
color="warning"
href="#pablo"
onClick={e => e.preventDefault()}
>
Warning
</Button>
<Button
className="btn-link mr-1"
color="danger"
href="#pablo"
onClick={e => e.preventDefault()}
>
Danger
</Button>
<Button
className="btn-link"
color="neutral"
href="#pablo"
onClick={e => e.preventDefault()}
>
Neutral
</Button>
</Col>
</Row>
<div className="title">
<h3>Inputs</h3>
</div>
<Row>
<Col sm="3">
<FormGroup>
<Input placeholder="Default" type="text" />
</FormGroup>
</Col>
<Col sm="3">
<FormGroup className="has-success">
<Input
className="form-control-success"
defaultValue="Success"
id="inputSuccess1"
type="text"
/>
</FormGroup>
</Col>
<Col sm="3">
<FormGroup className="has-danger">
<Input
className="form-control-danger"
defaultValue="Error"
id="inputDanger1"
type="text"
/>
<div className="form-control-feedback">
Sorry, that username's taken. Try another?
</div>
</FormGroup>
</Col>
<Col sm="3">
<InputGroup>
<Input placeholder="Username" type="text" />
<InputGroupAddon addonType="append">
<InputGroupText>
<i aria-hidden={true} className="fa fa-group" />
</InputGroupText>
</InputGroupAddon>
</InputGroup>
</Col>
</Row>
<br />
<Row>
<Col lg="3" sm="6">
<div className="title">
<h3>Checkboxes</h3>
</div>
<FormGroup check>
<Label check>
<Input defaultValue="" type="checkbox" />
Unchecked <span className="form-check-sign" />
</Label>
</FormGroup>
<FormGroup check>
<Label check>
<Input defaultChecked defaultValue="" type="checkbox" />
Checked <span className="form-check-sign" />
</Label>
</FormGroup>
<FormGroup check disabled>
<Label check>
<Input defaultValue="" disabled type="checkbox" />
Disabled unchecked <span className="form-check-sign" />
</Label>
</FormGroup>
<FormGroup check disabled>
<Label check>
<Input
defaultChecked
defaultValue=""
disabled
type="checkbox"
/>
Disabled checked <span className="form-check-sign" />
</Label>
</FormGroup>
</Col>
<Col lg="3" sm="6">
<div className="title">
<h3>Radio Buttons</h3>
</div>
<div className="form-check-radio">
<Label check>
<Input
defaultValue="option1"
id="exampleRadios1"
name="exampleRadios"
type="radio"
/>
Radio is off <span className="form-check-sign" />
</Label>
</div>
<div className="form-check-radio">
<Label check>
<Input
defaultChecked
defaultValue="option2"
id="exampleRadios2"
name="exampleRadios"
type="radio"
/>
Radio is on <span className="form-check-sign" />
</Label>
</div>
<div className="form-check-radio disabled">
<Label check>
<Input
defaultValue="option3"
disabled
id="exampleRadios3"
name="exampleRadios"
type="radio"
/>
Disabled radio is off <span className="form-check-sign" />
</Label>
</div>
<div className="form-check-radio disabled">
<Label check>
<Input
defaultChecked
defaultValue="option4"
disabled
id="exampleRadios4"
name="exampleRadioz"
type="radio"
/>
Disabled radio is on <span className="form-check-sign" />
</Label>
</div>
</Col>
<Col lg="3" sm="6">
<div className="title">
<h3>Toggle Buttons</h3>
</div>
<div id="switches">
<label>
<Switch onColor="primary" offColor="primary" />
</label>
<br />
<label>
<Switch
defaultValue={false}
onColor="primary"
offColor="primary"
/>
</label>
</div>
</Col>
<Col lg="3" sm="6">
<div className="title">
<h3>Sliders</h3>
</div>
<div className="slider" id="sliderRegular" />
<br />
<div className="slider slider-primary" id="sliderDouble" />
</Col>
</Row>
</Container>
</div>
</>
);
}
Example #23
| 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 #24
| Source File: ChatRoom.js From react-js-chat-webapp-example with MIT License | 4 votes |
|
function ChatRoom() {
const [chats, setChats] = useState([]);
const [users, setUsers] = useState([]);
const [nickname, setNickname] = useState('');
const [roomname, setRoomname] = useState('');
const [newchat, setNewchat] = useState({ roomname: '', nickname: '', message: '', date: '', type: '' });
const history = useHistory();
const { room } = useParams();
useEffect(() => {
const fetchData = async () => {
setNickname(localStorage.getItem('nickname'));
setRoomname(room);
firebase.database().ref('chats/').orderByChild('roomname').equalTo(roomname).on('value', resp => {
setChats([]);
setChats(snapshotToArray(resp));
});
};
fetchData();
}, [room, roomname]);
useEffect(() => {
const fetchData = async () => {
setNickname(localStorage.getItem('nickname'));
setRoomname(room);
firebase.database().ref('roomusers/').orderByChild('roomname').equalTo(roomname).on('value', (resp2) => {
setUsers([]);
const roomusers = snapshotToArray(resp2);
setUsers(roomusers.filter(x => x.status === 'online'));
});
};
fetchData();
}, [room, roomname]);
const snapshotToArray = (snapshot) => {
const returnArr = [];
snapshot.forEach((childSnapshot) => {
const item = childSnapshot.val();
item.key = childSnapshot.key;
returnArr.push(item);
});
return returnArr;
}
const submitMessage = (e) => {
e.preventDefault();
const chat = newchat;
chat.roomname = roomname;
chat.nickname = nickname;
chat.date = Moment(new Date()).format('DD/MM/YYYY HH:mm:ss');
chat.type = 'message';
const newMessage = firebase.database().ref('chats/').push();
newMessage.set(chat);
setNewchat({ roomname: '', nickname: '', message: '', date: '', type: '' });
};
const onChange = (e) => {
e.persist();
setNewchat({...newchat, [e.target.name]: e.target.value});
}
const exitChat = (e) => {
const chat = { roomname: '', nickname: '', message: '', date: '', type: '' };
chat.roomname = roomname;
chat.nickname = nickname;
chat.date = Moment(new Date()).format('DD/MM/YYYY HH:mm:ss');
chat.message = `${nickname} leave the room`;
chat.type = 'exit';
const newMessage = firebase.database().ref('chats/').push();
newMessage.set(chat);
firebase.database().ref('roomusers/').orderByChild('roomname').equalTo(roomname).once('value', (resp) => {
let roomuser = [];
roomuser = snapshotToArray(resp);
const user = roomuser.find(x => x.nickname === nickname);
if (user !== undefined) {
const userRef = firebase.database().ref('roomusers/' + user.key);
userRef.update({status: 'offline'});
}
});
history.goBack();
}
return (
<div className="Container">
<Container>
<Row>
<Col xs="4">
<div>
<Card className="UsersCard">
<CardBody>
<CardSubtitle>
<Button variant="primary" type="button" onClick={() => { exitChat() }}>
Exit Chat
</Button>
</CardSubtitle>
</CardBody>
</Card>
{users.map((item, idx) => (
<Card key={idx} className="UsersCard">
<CardBody>
<CardSubtitle>{item.nickname}</CardSubtitle>
</CardBody>
</Card>
))}
</div>
</Col>
<Col xs="8">
<ScrollToBottom className="ChatContent">
{chats.map((item, idx) => (
<div key={idx} className="MessageBox">
{item.type ==='join'||item.type === 'exit'?
<div className="ChatStatus">
<span className="ChatDate">{item.date}</span>
<span className="ChatContentCenter">{item.message}</span>
</div>:
<div className="ChatMessage">
<div className={`${item.nickname === nickname? "RightBubble":"LeftBubble"}`}>
{item.nickname === nickname ?
<span className="MsgName">Me</span>:<span className="MsgName">{item.nickname}</span>
}
<span className="MsgDate"> at {item.date}</span>
<p>{item.message}</p>
</div>
</div>
}
</div>
))}
</ScrollToBottom>
<footer className="StickyFooter">
<Form className="MessageForm" onSubmit={submitMessage}>
<InputGroup>
<Input type="text" name="message" id="message" placeholder="Enter message here" value={newchat.message} onChange={onChange} />
<InputGroupAddon addonType="append">
<Button variant="primary" type="submit">Send</Button>
</InputGroupAddon>
</InputGroup>
</Form>
</footer>
</Col>
</Row>
</Container>
</div>
);
}
Example #25
| 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 #26
| 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 #27
| Source File: Header.js From gedge-platform with Apache License 2.0 | 4 votes |
|
render() {
return (
<React.Fragment>
<header id="page-topbar">
<div className="navbar-header">
<div className="d-flex">
<div className="navbar-brand-box">
<Link to="#" className="logo logo-dark">
<span className="logo-sm">
<img src={logosmdark} alt="" height="22" />
</span>
<span className="logo-lg">
<img src={logodark} alt="" height="20" />
</span>
</Link>
<Link to="#" className="logo logo-light">
<span className="logo-sm">
<img src={logosmlight} alt="" height="22" />
</span>
<span className="logo-lg">
<img src={logolight} alt="" height="20" />
</span>
</Link>
</div>
<Button size="sm" color="none" type="button" onClick={this.toggleMenu} className="px-3 font-size-24 header-item waves-effect" id="vertical-menu-btn">
<i className="ri-menu-2-line align-middle"></i>
</Button>
{/* <Form className="app-search d-none d-lg-block">
<div className="position-relative">
<Input type="text" className="form-control" placeholder={this.props.t('Search')} />
<span className="ri-search-line"></span>
</div>
</Form> */}
{/* <MegaMenu /> */}
</div>
<div className="d-flex">
<div className="dropdown d-inline-block d-lg-none ml-2">
<button type="button" onClick={() => { this.setState({ isSearch: !this.state.isSearch }); }} className="btn header-item noti-icon waves-effect" id="page-header-search-dropdown">
<i className="ri-search-line"></i>
</button>
<div className={this.state.isSearch === true ? "dropdown-menu dropdown-menu-lg dropdown-menu-right p-0 show" : "dropdown-menu dropdown-menu-lg dropdown-menu-right p-0"}
aria-labelledby="page-header-search-dropdown">
<Form className="p-3">
<FormGroup className="m-0">
<InputGroup>
<Input type="text" className="form-control" placeholder={this.props.t('Search')} />
<InputGroupAddon addonType="append">
<Button color="primary" type="submit"><i className="ri-search-line"></i></Button>
</InputGroupAddon>
</InputGroup>
</FormGroup>
</Form>
</div>
</div>
<LanguageDropdown />
{/* <Dropdown isOpen={this.state.isSocialPf} toggle={() => this.setState({ isSocialPf: !this.state.isSocialPf })} className="d-none d-lg-inline-block ml-1">
<DropdownToggle tag="button" className="btn header-item noti-icon waves-effect">
<i className="ri-apps-2-line"></i>
</DropdownToggle>
<DropdownMenu className="dropdown-menu-lg" right>
<div className="px-lg-2">
<Row className="no-gutters">
<Col>
<Link className="dropdown-icon-item" to="#">
<img src={github} alt="Github" />
<span>{this.props.t('GitHub')}</span>
</Link>
</Col>
<Col>
<Link className="dropdown-icon-item" to="#">
<img src={bitbucket} alt="bitbucket" />
<span>{this.props.t('Bitbucket')}</span>
</Link>
</Col>
<Col>
<Link className="dropdown-icon-item" to="#">
<img src={dribbble} alt="dribbble" />
<span>{this.props.t('Dribbble')}</span>
</Link>
</Col>
</Row>
<Row className="no-gutters">
<Col>
<Link className="dropdown-icon-item" to="#">
<img src={dropbox} alt="dropbox" />
<span>{this.props.t('Dropbox')}</span>
</Link>
</Col>
<Col>
<Link className="dropdown-icon-item" to="#">
<img src={mail_chimp} alt="mail_chimp" />
<span>{this.props.t('Mail Chimp')}</span>
</Link>
</Col>
<Col>
<Link className="dropdown-icon-item" to="#">
<img src={slack} alt="slack" />
<span>{this.props.t('Slack')}</span>
</Link>
</Col>
</Row>
</div>
</DropdownMenu>
</Dropdown> */}
{/* <div className="dropdown d-none d-lg-inline-block ml-1">
<Button color="none" type="button" className="header-item noti-icon waves-effect" onClick={this.toggleFullscreen}>
<i className="ri-fullscreen-line"></i>
</Button>
</div> */}
<NotificationDropdown />
<ProfileMenu />
{/* <div className="dropdown d-inline-block">
<Button color="none" onClick={this.toggleRightbar} type="button" className="header-item noti-icon right-bar-toggle waves-effect">
<i className="ri-settings-2-line"></i>
</Button>
</div> */}
</div>
</div>
</header>
</React.Fragment>
);
}
Example #28
| Source File: Tables.js From id.co.moonlay-eworkplace-admin-web with MIT License | 4 votes |
|
render() {
const { results, currentPage, resultsPerPage } = this.state;
const indexOfLastTodo = currentPage * resultsPerPage;
const indexOfFirstTodo = indexOfLastTodo - resultsPerPage;
const currentresults = results.slice(indexOfFirstTodo, indexOfLastTodo);
const renderresults = currentresults.map((results, index) => {
return (
<tr key={results._id} data-category={results._id}>
<td>{results.username}</td>
<td>{results.profile.firstname}</td>
<td>{results.profile.lastname}</td>
<td>{results.profile.gender}</td>
<td>{moment(results.profile.dob).format('DD MMMM YYYY')}</td>
<td>{results.profile.email}</td>
<td>
{/* <Button variant="info" onClick={() => this.props.editProduct(results._id)}>Edit</Button> */}
{/* <Link
to={'/account/editaccount/' + results._id}
className="btn btn-primary">
Edit
</Link>
*/}
<Button
className="btn btn-info"
onClick={() => this.handleDetails(results._id)}>
Details
</Button>
<Button
className="btn btn-danger"
onClick={() => this.deleteAccount(results._id)}>
Delete
</Button>
</td>
</tr>
);
});
const pageNumbers = [];
for (let i = 1; i <= Math.ceil(results.length / resultsPerPage); i++) {
pageNumbers.push(i);
}
const renderPageNumbers = pageNumbers.map(number => {
return (
<li
key={number}
id={number}
onClick={this.handleClick}
className="page-link">
{number}
</li>
);
});
if (this.state.loading === false) {
return <h2>Loading...</h2>;
}
return (
<div>
<Modal show={this.state.show} onHide={this.handleClose}>
<Modal.Header closeButton>
<Modal.Title>Details Account</Modal.Title>
</Modal.Header>
<Modal.Body>
<Form>
Division Name
<InputGroup className="mb-3">
<Input type="text" autoComplete="Username" value={this.state.divisionsName} disabled />
</InputGroup>
Job Title Name
<InputGroup className="mb-3">
<Input type="text" value={this.state.jobstitleName} disabled />
</InputGroup>
Role Name
<InputGroup className="mb-3">
<Input type="text" autoComplete="Username" value={this.state.RoleName} disabled />
</InputGroup>
Permision
<InputGroup className="mb-3">
<Input type="text" value={this.state.rolesId === 1 || this.state.rolesId === 99 ? 'Can Approve' : 'Cannot Approve'} disabled/>
</InputGroup>
</Form>
</Modal.Body>
<Modal.Footer>
<Button className="btn btn-secondary" onClick={this.handleClose}>
Close
</Button>
</Modal.Footer>
</Modal>
<div className="animated fadeIn">
{this.state.loading && (
<Row>
<Col xs="12" lg="12">
<Card>
<CardHeader>
<Row>
<Col>
<i className="fa fa-user" /> <b>Account</b>
<Button
style={{ marginLeft: 10 }}
color="success"
className="px-4"
onClick={() => {
window.location.href = '/#/account/addaccount';
}}>
Add Employee
</Button>
</Col>
<Col>
<input
type="text"
id="myInput"
className="form-control form-control-md"
style={{ width: '100%' }}
placeholder="Search By Username"
onChange={this.filterList}
/>
</Col>
</Row>
</CardHeader>
<CardBody>
<Table id="myTable" responsive striped>
<thead>
<tr>
<th>Username</th>
<th>FirstName</th>
<th>LastName</th>
<th>Gender</th>
<th>DOB</th>
<th>Email</th>
<th>Action</th>
</tr>
</thead>
<tbody>
{renderresults}
{/* {values.map(function(object, i){
return <tr key={i}><td>{object}</td></tr>;
})} */}
</tbody>
</Table>
</CardBody>
</Card>
</Col>
</Row>
)}
</div>
<ul className="pagination">{renderPageNumbers}</ul>
</div>
);
}
Example #29
| Source File: FormValidations.js From gedge-platform with Apache License 2.0 | 4 votes |
|
render() {
return (
<React.Fragment>
<div className="page-content">
<Container fluid={true}>
<Breadcrumbs title="Form Validation" breadcrumbItems={this.state.breadcrumbItems} />
<Row>
<Col xl="6">
<Card>
<CardBody>
<h4 className="card-title">React Validation - Normal</h4>
<p className="card-title-desc">Provide valuable, actionable feedback to your users with HTML5 form validation–available in all our supported browsers.</p>
<AvForm className="needs-validation" >
<Row>
<Col md="6">
<FormGroup>
<Label htmlFor="validationCustom01">First name</Label>
<AvField
name="firstname"
placeholder="First name"
type="text"
errorMessage="Enter First Name"
className="form-control"
validate={{ required: { value: true } }}
id="validationCustom01"
/>
</FormGroup>
</Col>
<Col md="6">
<FormGroup>
<Label htmlFor="validationCustom02">Last name</Label>
<AvField
name="lastname"
placeholder="Last name"
type="text"
errorMessage="Enter Last name"
className="form-control"
validate={{ required: { value: true } }}
id="validationCustom02"
/>
</FormGroup>
</Col>
</Row>
<Row>
<Col md="4">
<FormGroup>
<Label htmlFor="validationCustom03">City</Label>
<AvField
name="city"
placeholder="City"
type="text"
errorMessage=" Please provide a valid city."
className="form-control"
validate={{ required: { value: true } }}
id="validationCustom03"
/>
</FormGroup>
</Col>
<Col md="4">
<FormGroup>
<Label htmlFor="validationCustom04">State</Label>
<AvField
name="state"
placeholder="State"
type="text"
errorMessage="Please provide a valid state."
className="form-control"
validate={{ required: { value: true } }}
id="validationCustom04"
/>
</FormGroup>
</Col>
<Col md="4">
<FormGroup>
<Label htmlFor="validationCustom05">Zip</Label>
<AvField
name="zip"
placeholder="Zip Code"
type="text"
errorMessage=" Please provide a valid zip."
className="form-control"
validate={{ required: { value: true } }}
id="validationCustom05"
/>
</FormGroup>
</Col>
</Row>
<Row>
<Col lg="12">
<FormGroup>
<AvInput tag={CustomInput} type="checkbox" label="Agree to terms and conditions" id="invalidCheck" name="condition" errorMessage="You must agree before submitting." validate={{ required: { value: true } }} />
</FormGroup>
</Col>
</Row>
<Button color="primary" type="submit">Submit form</Button>
</AvForm>
</CardBody>
</Card>
</Col>
<Col xl="6">
<Card>
<CardBody>
<h4 className="card-title">Bootstrap Validation (Tooltips)</h4>
<p className="card-title-desc">If your form layout allows it, you can swap the <code>.-feedback</code> classes for <code>.-tooltip</code> classes to display validation feedback in a styled tooltip.</p>
<Form className="needs-validation" method="post" id="tooltipForm" onSubmit={this.handleSubmit}>
<Row>
<Col md="4">
<FormGroup className="position-relative">
<Label htmlFor="validationTooltip01">First name</Label>
<Input type="text" className="form-control" id="validationTooltip01" placeholder="First name" onChange={(event) => this.changeHandeler(event, "validate1")} />
<div className={this.state.fnm === true ? "valid-tooltip" : "invalid-tooltip"} name="validate" id="validate1">
{this.state.fnm === true ? "Looks good!" : "Please Enter Valid First Name"}
</div>
</FormGroup>
</Col>
<Col md="4">
<FormGroup className="position-relative">
<Label htmlFor="validationTooltip02">Last name</Label>
<Input type="text" className="form-control" id="validationTooltip02" placeholder="Last name" onChange={(event) => this.changeHandeler(event, "validate2")} />
<div className={this.state.lnm === true ? "valid-tooltip" : "invalid-tooltip"} name="validate" id="validate2">
{this.state.lnm === true ? "Looks good!" : "Please Enter Valid Last Name"}
</div>
</FormGroup>
</Col>
<Col md="4">
<FormGroup className="position-relative">
<Label htmlFor="validationTooltipUsername">Username</Label>
<InputGroup>
<InputGroupAddon addonType="prepend">
<span className="input-group-text" id="validationTooltipUsernamePrepend">@</span>
</InputGroupAddon>
<Input type="text" className="form-control" id="validationTooltipUsername" placeholder="Username" onChange={(event) => this.changeHandeler(event, "validate3")} />
<div className={this.state.unm === true ? "valid-tooltip" : "invalid-tooltip"} name="validate" id="validate3">
{this.state.unm === true ? "Looks good!" : "Please choose a unique and valid username."}
</div>
</InputGroup>
</FormGroup>
</Col>
</Row>
<Row>
<Col md="6">
<FormGroup className="position-relative">
<Label htmlFor="validationTooltip03">City</Label>
<Input type="text" className="form-control" id="validationTooltip03" placeholder="City" onChange={(event) => this.changeHandeler(event, "validate4")} />
<div className={this.state.city === true ? "valid-tooltip" : "invalid-tooltip"} name="validate" id="validate4">
{this.state.city === true ? "Looks good!" : "Please choose a unique and valid username.Please provide a valid city."}
</div>
</FormGroup>
</Col>
<Col md="6">
<FormGroup className="position-relative">
<Label htmlFor="validationTooltip04">State</Label>
<Input type="text" className="form-control" id="validationTooltip04" placeholder="State" onChange={(event) => this.changeHandeler(event, "validate5")} />
<div className={this.state.stateV === true ? "valid-tooltip" : "invalid-tooltip"} name="validate" id="validate5">
{this.state.stateV === true ? "Looks good!" : "Please provide a valid state."}
</div>
</FormGroup>
</Col>
</Row>
<Button color="primary" type="submit">Submit form</Button>
</Form>
</CardBody>
</Card>
</Col>
</Row>
<Row>
<Col lg={6}>
<Card>
<CardBody>
<h4 className="card-title">Validation type</h4>
<p className="card-title-desc">
Parsley is a availity reactstrap validation. It helps you
provide your users with feedback on their form submission
before sending it to your server.
</p>
<AvForm>
<AvField
name="username"
label="Required "
placeholder="Type Something"
type="text"
errorMessage="Enter Name"
validate={{ required: { value: true } }}
/>
<Label>Equal To</Label>
<AvField
name="password"
type="text"
placeholder="Password"
errorMessage="Enter password"
validate={{ required: { value: true } }}
/>
<AvField
name="password1"
type="text"
placeholder="Re-type Password"
errorMessage="Enter Re-password"
validate={{
required: { value: true },
match: { value: "password" }
}}
/>
<AvField
name="email"
label="E-Mail "
placeholder="Enter Valid Email"
type="email"
errorMessage="Invalid Email"
validate={{
required: { value: true },
email: { value: true }
}}
/>
<AvField
name="digits"
label="Digits "
placeholder="Enter Only Digits"
type="number"
errorMessage="Enter Only Digits"
validate={{
required: { value: true },
pattern: {
value: "^[0-9]+$",
errorMessage: "Only Digits"
}
}}
/>
<AvField
name="number"
label="Number "
placeholder="Enter Only number"
type="number"
errorMessage="Enter Only Number"
validate={{
required: { value: true },
pattern: {
value: "^[0-9]+$",
errorMessage: "Only Numbers"
}
}}
/>
<AvField
name="alphanumeric"
label="Alphanumeric "
placeholder="Enter Only alphanumeric value"
type="text"
errorMessage="Enter Only Alphanumeric"
validate={{
required: { value: true },
pattern: {
value: "^[0-9a-zA-Z]+$",
errorMessage: "Only Alphanumeric"
}
}}
/>
<FormGroup className="mb-0">
<div>
<Button type="submit" color="primary" className="mr-1">
Submit
</Button>{" "}
<Button type="reset" color="secondary">
Cancel
</Button>
</div>
</FormGroup>
</AvForm>
</CardBody>
</Card>
</Col>
<Col lg={6}>
<Card>
<CardBody>
<h4 className="card-title">Range validation</h4>
<p className="card-title-desc">
Parsley is a availity reactstrap validation. It helps you
provide your users with feedback on their form submission
before sending it to your server.
</p>
<AvForm>
<AvField
name="Min_Length"
label="Min Length "
placeholder="Min 6 chars"
type="number"
errorMessage="Min 6 chars."
validate={{
required: { value: true },
minLength: { value: 6, errorMessage: "Min 6 chars." }
}}
/>
<AvField
name="Max_Length"
label="Max Length "
placeholder="Max 6 chars"
type="number"
errorMessage="Max 6 chars."
validate={{
required: { value: true },
maxLength: { value: 6, errorMessage: "Max 6 chars." }
}}
/>
<AvField
name="Range_Length"
label="Range Length "
placeholder="Text between 5 - 10 chars length"
type="text"
errorMessage="range between 5 to 10"
validate={{
required: { value: true },
minLength: { value: 5 },
maxLength: { value: 10 }
}}
/>
<AvField
name="Min_Value"
label="Min Value "
placeholder="Min 6 Chars"
min={6}
type="text"
errorMessage="Min Value 6"
validate={{
required: { value: true },
min: { value: 6 }
}}
/>
<AvField
name="Max_Value"
label="Max Value "
placeholder="max 5 Chars"
max={6}
type="number"
errorMessage="Max Value 6"
validate={{
required: { value: true },
max: { value: 6 }
}}
/>
<AvField
name="Range_Value"
label="Range Value "
placeholder="This value should be between 6 and 100."
type="number"
errorMessage="range between 5 to 10"
validate={{
required: { value: true },
min: { value: 6 },
max: { value: 100 }
}}
/>
<AvField
name="Regular_Exp"
label="Regular Exp "
placeholder="Hex. Color"
type="number"
errorMessage="Hex Value"
validate={{
required: { value: true },
pattern: {
value: "^[#0-9]+$",
errorMessage: "Only Hex Value"
}
}}
/>
<FormGroup className="mb-0">
<div>
<Button type="submit" color="primary" className="mr-1">
Submit
</Button>{" "}
<Button type="reset" color="secondary">
Cancel
</Button>
</div>
</FormGroup>
</AvForm>
</CardBody>
</Card>
</Col>
</Row>
</Container>
</div>
</React.Fragment>
);
}
