reactstrap#InputGroupAddon JavaScript Examples
The following examples show how to use
reactstrap#InputGroupAddon.
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: InputForm.js From ReactJS-Projects with MIT License | 6 votes |
|
InputForm = ({ addTodos }) => {
const [todoString, setTodostring] = useState("")
const handleSubmit = (e) => {
e.preventDefault()
if (todoString === "") return alert("Please enter a To-do")
const todo = {
todoVal: todoString,
id: v4()
}
addTodos(todo)
setTodostring("")
}
return (
<Form onSubmit={handleSubmit}>
<FormGroup>
<InputGroup>
<Input type="text" name="todo" id="todo" placeholder="Enter To-do" value={todoString} onChange={e => setTodostring(e.target.value)} />
<InputGroupAddon addonType="prepend" >
<Button color="warning">
Add
</Button>
</InputGroupAddon>
</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: Login.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 body className="justify-content-center" style={{ width: '44%', backgroundColor: '#1A446D', }}>
<CardImg src={Logo} alt="Logo" style={{padding:'auto'}} />
</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: TodoForm.js From ReactJS-Projects with MIT License | 5 votes |
|
TodoForm = () => {
const [todoString, setTodoString] = useState("");
const { dispatch } = useContext(TodoContext);
const handleSubmit = e => {
e.preventDefault();
if (todoString === "") return alert("Please enter to-do");
const todo = {
todoString,
id: v4()
};
dispatch({
type: ADD_TODO,
payload: todo
});
setTodoString("");
}
return (
<Form onSubmit={handleSubmit}>
<FormGroup>
<InputGroup>
<Input
type="text"
name="todo"
id="todo"
placeholder="Enter your to-do item"
value={todoString}
onChange={e => setTodoString(e.target.value)}
/>
<InputGroupAddon addonType="prepend">
<Button
color="warning"
>
Add
</Button>
</InputGroupAddon>
</InputGroup>
</FormGroup>
</Form>
)
}
Example #9
| Source File: EditAccount.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');
}
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>Register</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" value={this.state.firstname} 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" value={this.state.lastname} 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} value={this.state.username} placeholder="Username" autoComplete="username" />
</InputGroup>
<InputGroup className="mb-3">
<InputGroupAddon addonType="prepend">
<InputGroupText>@</InputGroupText>
</InputGroupAddon>
<Input type="text" value={this.state.email} 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="password" value={this.state.password} onChange={this.onchagePassword} placeholder="Password" autoComplete="new-password" />
</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'}}>
<InputGroup className="mb-3">
<InputGroupAddon addonType="prepend">
<InputGroupText>
Role
</InputGroupText>
</InputGroupAddon>
<Input type="select" value={this.state.role} onChange={this.onChangeRole}>
<option>Select Role..</option>
<option value="Developer">Developer</option>
<option value="Scrum Master">Scrum Master</option>
<option value="Product Owner">Product Owner</option>
<option value="Human Resource">Human Resource</option>
<option value="MOKKI Design Team" >MOKKI Design Team</option>
</Input>
</InputGroup>
<InputGroup className="mb-3">
<InputGroupAddon addonType="prepend">
<InputGroupText>
Status
</InputGroupText>
</InputGroupAddon>
<Input type="select" value={this.state.status} onChange={this.onChangeStatus}>
<option>{this.state.status}</option>
<option value="Internship">Internship</option>
<option value="Full-Time Worker">Full-Time Worker</option>
</Input>
</InputGroup>
<InputGroup className="mb-3">
<InputGroupAddon addonType="prepend">
<InputGroupText>
Birthday
</InputGroupText>
</InputGroupAddon>
<Input type="date" value={this.state.dob} onChange={this.onChangeDob} />
</InputGroup>
<InputGroup className="mb-3">
<InputGroupAddon addonType="prepend">
<InputGroupText>
Gender
</InputGroupText>
</InputGroupAddon>
<Input type="select" value={this.state.gender} onChange={this.onChangeGender}>
<option value>{this.state.gender}</option>
<option value="Male">Male</option>
<option value="Female">Female</option>
</Input>
</InputGroup>
<Button onClick={this.onhandlePrevius} color="primary">Previus</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 #10
| Source File: Login.js From nodejs-rest-api-boilerplate with MIT License | 4 votes |
|
render() {
const { errors } = this.state;
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 in with</small>
</div>
<div className="btn-wrapper text-center">
<Button
className="btn-neutral btn-icon"
color="default"
href="http://localhost:5000/api/auth/facebook"
>
<span className="btn-inner--icon mr-1">
<img
alt="..."
src={require("../../assets/img/icons/common/facebook.svg")}
/>
</span>
<span className="btn-inner--text">Facebook</span>
</Button>
<Button
className="btn-neutral btn-icon ml-1"
color="default"
href="http://localhost:5000/api/auth/google"
>
<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">
{errors && errors.auth ? (
<Alert color="warning">{errors.auth}</Alert>
) : (
<div className="text-center text-muted mb-4">
<small>Or sign in with credentials</small>
</div>
)}
<Form role="form" noValidate onSubmit={this.onSubmit}>
<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>
<div className="custom-control custom-control-alternative custom-checkbox">
<input
className="custom-control-input"
id=" customCheckLogin"
type="checkbox"
/>
<label
className="custom-control-label"
htmlFor=" customCheckLogin"
>
<span>Remember me</span>
</label>
</div>
<div className="text-center">
<Button
className="my-4"
color="primary"
type="submit"
>
Sign in
</Button>
</div>
</Form>
</CardBody>
</Card>
<Row className="mt-3">
<Col xs="6">
<a
className="text-light"
href="#pablo"
onClick={e => e.preventDefault()}
>
<small>Forgot password?</small>
</a>
</Col>
<Col className="text-right" xs="6">
<Link to="/register">
<small>Create new account</small>
</Link>
</Col>
</Row>
</Col>
</Row>
</Container>
</section>
</main>
<SimpleFooter />
</>
);
}
Example #11
| 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 #12
| 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 #13
| 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 #14
| 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 #15
| 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 #16
| 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 #17
| 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 #18
| 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 #19
| 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 #20
| Source File: ContactUsPage.js From Website2020 with MIT License | 4 votes |
|
render() {
return (
<>
<ExamplesNavbar activePage="/contact-us" />
<div className="section text-center ">
<Container className="reduce-margin">
<Row>
<h2 className="heading-contact-us" style={{ textAlign: "center", zIndex:"10" }}>CONTACT US</h2>
</Row>
</Container>
</div>
<Container className="main">
<div className="section landing-section">
<Container className="u-border contact-us-section">
<Row>
<Col lg="6" className="contact-us-form-container">
<h2 className=" heading-small-contact-us">Share Feedback or Ask your Queries </h2>
<Form className="contact-form" onSubmit={this.postDataHandler}>
<Row>
<Col md="12">
<label className="mb-0 desc-auv">Name</label>
<InputGroup>
<InputGroupAddon addonType="prepend">
<InputGroupText>
<i className="nc-icon nc-single-02" />
</InputGroupText>
</InputGroupAddon>
<Input
placeholder="Name"
type="text"
value={this.state.name}
onChange={this.nameChangedHandler} />
</InputGroup>
</Col>
<Col md="12">
<label className="mb-0 desc-auv">Email</label>
<InputGroup>
<InputGroupAddon addonType="prepend">
<InputGroupText>
<i className="nc-icon nc-email-85" />
</InputGroupText>
</InputGroupAddon>
<Input
placeholder="Email"
type="email"
value={this.state.email}
onChange={this.emailChangedHandler} />
</InputGroup>
</Col>
</Row>
<label className="mb-0 desc-auv">Message</label>
<Input
placeholder="Tell us your thoughts and feelings..."
type="textarea"
rows="4"
value={this.state.message}
onChange={this.messageChangedHandler}
/>
<Button className="contact-us-form-button">
Send
</Button>
</Form>
</Col>
<Col lg="6" className="contact-us-form-container">
<h2 className="ml-5 small-heading">Contact details</h2>
<div className="row u-margin-top-large">
<Col md="1">
<i className="fa fa-phone contact-icon" />
</Col>
<Col md="10" className="ml-3 mt-4">
<p className="desc-auv">Phone Number : +91 9521597992 </p>
</Col>
<Col md="1">
<i className="fa fa-envelope-square contact-icon" />
</Col>
<Col md="10" className="ml-3 mt-4">
<p className="desc-auv">Email id : [email protected] </p>
</Col>
<Col md="1">
<i className="fa fa-map-marker contact-icon" />
</Col>
<Col md="10" className="ml-3 mt-4">
<p className="desc-auv">
Address : AUV Room, Hall of Residence 2, Indian
Institute of Technology, Kanpur, Uttar Pradesh, India -
208016{" "}
</p>
</Col>
</div>
</Col>
</Row>
</Container>
</div>
</Container>
</>
);
}
Example #21
| Source File: Cart.js From gedge-platform with Apache License 2.0 | 4 votes |
|
render() {
return (
<React.Fragment>
<div className="page-content">
<Container fluid>
<Breadcrumbs title="Cart" breadcrumbItems={this.state.breadcrumbItems} />
<Row>
<Col lg={12}>
<Card>
<CardBody>
<div className="table-responsive">
<Table className="table-centered mb-0 table-nowrap">
<thead className="bg-light">
<tr>
<th style={{width:"120px"}}>Product</th>
<th>Product Desc</th>
<th>Price</th>
<th>Quantity</th>
<th>Total</th>
<th className="text-center">Action</th>
</tr>
</thead>
<tbody>
{
this.state.products.map((product, key) =>
<tr key={key}>
<td>
<img src={product.img} alt="product-img"
title="product-img" className="avatar-md" />
</td>
<td>
<h5 className="font-size-14 text-truncate"><Link to={"/ecommerce-product-detail/" + product.id} className="text-dark">{product.name}</Link></h5>
<p className="mb-0">Color : <span className="font-weight-medium">{product.desc}</span></p>
</td>
<td>
$ {product.price}
</td>
<td>
<div style={{width:"120px"}} className="product-cart-touchspin">
<InputGroup>
<InputGroupAddon addonType="prepend" className="input-group-btn">
<Button color="primary" className="bootstrap-touchspin-down" onClick={() => { this.countDown(product.id, product.data_attr) }}>-</Button>
</InputGroupAddon>
<Input type="text" value={product.data_attr} readOnly/>
<InputGroupAddon addonType="append" className="input-group-btn">
<Button color="primary" className="bootstrap-touchspin-down" onClick={() => { this.countUP(product.id, product.data_attr) }}>+</Button>
</InputGroupAddon>
</InputGroup>
</div>
</td>
<td>
$ {product.total}
</td>
<td style={{width:"90px"}} className="text-center">
<Link to="#" onClick={() => this.removeCartItem(product.id)} className="action-icon text-danger"> <i className="mdi mdi-trash-can font-size-18"></i></Link>
</td>
</tr>
)
}
<tr className="bg-light text-right">
<th scope="row" colSpan="5">
Sub Total :
</th>
<td>
$ 1530
</td>
</tr>
<tr className="bg-light text-right">
<th scope="row" colSpan="5">
Discount :
</th>
<td>
- $ 30
</td>
</tr>
<tr className="bg-light text-right">
<th scope="row" colSpan="5">
Shipping Charge :
</th>
<td>
$ 25
</td>
</tr>
<tr className="bg-light text-right">
<th scope="row" colSpan="5">
Total :
</th>
<td>
$ 1525
</td>
</tr>
</tbody>
</Table>
</div>
</CardBody>
</Card>
</Col>
</Row>
</Container>
</div>
</React.Fragment>
);
}
Example #22
| Source File: index.js From hackchat-client with Do What The F*ck You Want To Public License | 4 votes |
|
export function ChatInput({ channel, onSendChat }) {
const [chatInputField, setChatInput] = useStateIfMounted();
const [msgHistory, updateMsgHistory] = useStateIfMounted([]);
const [searchIndex, setSearchIndex] = useStateIfMounted(0);
useEffect(() => {
const listener = (evt) => {
if (evt.code === 'Enter' || evt.code === 'NumpadEnter') {
if (!evt.shiftKey) {
submitInput(evt);
chatInputField.style.height = 'auto';
} else {
chatInputField.style.height = 'inherit';
chatInputField.style.height = `${chatInputField.scrollHeight}px`;
}
} else if (evt.code === 'ArrowUp' && chatInputField) {
if (chatInputField.selectionStart !== 0) return;
if (searchIndex === 0 && chatInputField.value) {
updateMsgHistory(
[chatInputField.value].concat(msgHistory.slice(0, MaxMsgHistory)),
);
}
setSearchIndex(incSearchIndex(searchIndex, msgHistory.length));
chatInputField.value = msgHistory[searchIndex] || '';
} else if (evt.code === 'ArrowDown' && chatInputField) {
if (chatInputField.selectionStart !== chatInputField.value.length)
return;
setSearchIndex(decSearchIndex(searchIndex));
chatInputField.value = msgHistory[searchIndex] || '';
}
};
document.addEventListener('keydown', listener);
return () => {
document.removeEventListener('keydown', listener);
};
}, [chatInputField, searchIndex, msgHistory]);
const submitInput = (evt) => {
if (evt) {
if (evt.preventDefault) evt.preventDefault();
if (evt.stopPropagation) evt.stopPropagation();
if (evt.nativeEvent && evt.nativeEvent.stopImmediatePropagation)
evt.nativeEvent.stopImmediatePropagation();
}
const chatText = chatInputField.value;
if (chatText) {
onSendChat(channel, chatText);
chatInputField.value = '';
if (searchIndex !== 0) {
setSearchIndex(0);
}
updateMsgHistory([chatText].concat(msgHistory.slice(0, MaxMsgHistory)));
}
};
const onUserInput = (evt) => {
const { target } = evt;
setChatInput(target);
if (target.value) {
target.style.height = 'inherit';
target.style.height = `${target.scrollHeight + 2}px`;
} else {
target.style.height = 'auto';
}
};
const inputDom = (
<Form onSubmit={submitInput}>
<InputGroup size="sm">
<FormattedMessage
id={messages.MainInput.id}
defaultMessage={messages.MainInput.defaultMessage}
>
{(placeholder) => (
<UserInput
autoFocus
rows="1"
onChange={onUserInput}
type="textarea"
placeholder={placeholder}
/>
)}
</FormattedMessage>
<InputGroupAddon className="d-flex" addonType="append">
<SendButton type="submit">
<FaPaperPlane />
</SendButton>
</InputGroupAddon>
</InputGroup>
</Form>
);
return inputDom;
}
Example #23
| Source File: Forms.js From id.co.moonlay-eworkplace-admin-web with MIT License | 4 votes |
|
render() {
return (
<div className="animated fadeIn">
<Row>
<Col xs="12" sm="6">
<Card>
<CardHeader>
<strong>Credit Card</strong>
<small> Form</small>
</CardHeader>
<CardBody>
<Row>
<Col xs="12">
<FormGroup>
<Label htmlFor="name">Name</Label>
<Input type="text" id="name" placeholder="Enter your name" required />
</FormGroup>
</Col>
</Row>
<Row>
<Col xs="12">
<FormGroup>
<Label htmlFor="ccnumber">Credit Card Number</Label>
<Input type="text" id="ccnumber" placeholder="0000 0000 0000 0000" required />
</FormGroup>
</Col>
</Row>
<Row>
<Col xs="4">
<FormGroup>
<Label htmlFor="ccmonth">Month</Label>
<Input type="select" name="ccmonth" id="ccmonth">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
<option value="11">11</option>
<option value="12">12</option>
</Input>
</FormGroup>
</Col>
<Col xs="4">
<FormGroup>
<Label htmlFor="ccyear">Year</Label>
<Input type="select" name="ccyear" id="ccyear">
<option>2017</option>
<option>2018</option>
<option>2019</option>
<option>2020</option>
<option>2021</option>
<option>2022</option>
<option>2023</option>
<option>2024</option>
<option>2025</option>
<option>2026</option>
</Input>
</FormGroup>
</Col>
<Col xs="4">
<FormGroup>
<Label htmlFor="cvv">CVV/CVC</Label>
<Input type="text" id="cvv" placeholder="123" required />
</FormGroup>
</Col>
</Row>
</CardBody>
</Card>
</Col>
<Col xs="12" sm="6">
<Card>
<CardHeader>
<strong>Company</strong>
<small> Form</small>
</CardHeader>
<CardBody>
<FormGroup>
<Label htmlFor="company">Company</Label>
<Input type="text" id="company" placeholder="Enter your company name" />
</FormGroup>
<FormGroup>
<Label htmlFor="vat">VAT</Label>
<Input type="text" id="vat" placeholder="DE1234567890" />
</FormGroup>
<FormGroup>
<Label htmlFor="street">Street</Label>
<Input type="text" id="street" placeholder="Enter street name" />
</FormGroup>
<FormGroup row className="my-0">
<Col xs="8">
<FormGroup>
<Label htmlFor="city">City</Label>
<Input type="text" id="city" placeholder="Enter your city" />
</FormGroup>
</Col>
<Col xs="4">
<FormGroup>
<Label htmlFor="postal-code">Postal Code</Label>
<Input type="text" id="postal-code" placeholder="Postal Code" />
</FormGroup>
</Col>
</FormGroup>
<FormGroup>
<Label htmlFor="country">Country</Label>
<Input type="text" id="country" placeholder="Country name" />
</FormGroup>
</CardBody>
</Card>
</Col>
</Row>
<Row>
<Col xs="12" md="6">
<Card>
<CardHeader>
<strong>Basic Form</strong> Elements
</CardHeader>
<CardBody>
<Form action="" method="post" encType="multipart/form-data" className="form-horizontal">
<FormGroup row>
<Col md="3">
<Label>Static</Label>
</Col>
<Col xs="12" md="9">
<p className="form-control-static">Username</p>
</Col>
</FormGroup>
<FormGroup row>
<Col md="3">
<Label htmlFor="text-input">Text Input</Label>
</Col>
<Col xs="12" md="9">
<Input type="text" id="text-input" name="text-input" placeholder="Text" />
<FormText color="muted">This is a help text</FormText>
</Col>
</FormGroup>
<FormGroup row>
<Col md="3">
<Label htmlFor="email-input">Email Input</Label>
</Col>
<Col xs="12" md="9">
<Input type="email" id="email-input" name="email-input" placeholder="Enter Email" autoComplete="email"/>
<FormText className="help-block">Please enter your email</FormText>
</Col>
</FormGroup>
<FormGroup row>
<Col md="3">
<Label htmlFor="password-input">Password</Label>
</Col>
<Col xs="12" md="9">
<Input type="password" id="password-input" name="password-input" placeholder="Password" autoComplete="new-password" />
<FormText className="help-block">Please enter a complex password</FormText>
</Col>
</FormGroup>
<FormGroup row>
<Col md="3">
<Label htmlFor="date-input">Date Input <Badge>NEW</Badge></Label>
</Col>
<Col xs="12" md="9">
<Input type="date" id="date-input" name="date-input" placeholder="date" />
</Col>
</FormGroup>
<FormGroup row>
<Col md="3">
<Label htmlFor="disabled-input">Disabled Input</Label>
</Col>
<Col xs="12" md="9">
<Input type="text" id="disabled-input" name="disabled-input" placeholder="Disabled" disabled />
</Col>
</FormGroup>
<FormGroup row>
<Col md="3">
<Label htmlFor="textarea-input">Textarea</Label>
</Col>
<Col xs="12" md="9">
<Input type="textarea" name="textarea-input" id="textarea-input" rows="9"
placeholder="Content..." />
</Col>
</FormGroup>
<FormGroup row>
<Col md="3">
<Label htmlFor="select">Select</Label>
</Col>
<Col xs="12" md="9">
<Input type="select" name="select" id="select">
<option value="0">Please select</option>
<option value="1">Option #1</option>
<option value="2">Option #2</option>
<option value="3">Option #3</option>
</Input>
</Col>
</FormGroup>
<FormGroup row>
<Col md="3">
<Label htmlFor="selectLg">Select Large</Label>
</Col>
<Col xs="12" md="9" size="lg">
<Input type="select" name="selectLg" id="selectLg" bsSize="lg">
<option value="0">Please select</option>
<option value="1">Option #1</option>
<option value="2">Option #2</option>
<option value="3">Option #3</option>
</Input>
</Col>
</FormGroup>
<FormGroup row>
<Col md="3">
<Label htmlFor="selectSm">Select Small</Label>
</Col>
<Col xs="12" md="9">
<Input type="select" name="selectSm" id="SelectLm" bsSize="sm">
<option value="0">Please select</option>
<option value="1">Option #1</option>
<option value="2">Option #2</option>
<option value="3">Option #3</option>
<option value="4">Option #4</option>
<option value="5">Option #5</option>
</Input>
</Col>
</FormGroup>
<FormGroup row>
<Col md="3">
<Label htmlFor="disabledSelect">Disabled Select</Label>
</Col>
<Col xs="12" md="9">
<Input type="select" name="disabledSelect" id="disabledSelect" disabled autoComplete="name">
<option value="0">Please select</option>
<option value="1">Option #1</option>
<option value="2">Option #2</option>
<option value="3">Option #3</option>
</Input>
</Col>
</FormGroup>
<FormGroup row>
<Col md="3">
<Label htmlFor="multiple-select">Multiple select</Label>
</Col>
<Col md="9">
<Input type="select" name="multiple-select" id="multiple-select" multiple>
<option value="1">Option #1</option>
<option value="2">Option #2</option>
<option value="3">Option #3</option>
<option value="4">Option #4</option>
<option value="5">Option #5</option>
<option value="6">Option #6</option>
<option value="7">Option #7</option>
<option value="8">Option #8</option>
<option value="9">Option #9</option>
<option value="10">Option #10</option>
</Input>
</Col>
</FormGroup>
<FormGroup row>
<Col md="3">
<Label>Radios</Label>
</Col>
<Col md="9">
<FormGroup check className="radio">
<Input className="form-check-input" type="radio" id="radio1" name="radios" value="option1" />
<Label check className="form-check-label" htmlFor="radio1">Option 1</Label>
</FormGroup>
<FormGroup check className="radio">
<Input className="form-check-input" type="radio" id="radio2" name="radios" value="option2" />
<Label check className="form-check-label" htmlFor="radio2">Option 2</Label>
</FormGroup>
<FormGroup check className="radio">
<Input className="form-check-input" type="radio" id="radio3" name="radios" value="option3" />
<Label check className="form-check-label" htmlFor="radio3">Option 3</Label>
</FormGroup>
</Col>
</FormGroup>
<FormGroup row>
<Col md="3">
<Label>Inline Radios</Label>
</Col>
<Col md="9">
<FormGroup check inline>
<Input className="form-check-input" type="radio" id="inline-radio1" name="inline-radios" value="option1" />
<Label className="form-check-label" check htmlFor="inline-radio1">One</Label>
</FormGroup>
<FormGroup check inline>
<Input className="form-check-input" type="radio" id="inline-radio2" name="inline-radios" value="option2" />
<Label className="form-check-label" check htmlFor="inline-radio2">Two</Label>
</FormGroup>
<FormGroup check inline>
<Input className="form-check-input" type="radio" id="inline-radio3" name="inline-radios" value="option3" />
<Label className="form-check-label" check htmlFor="inline-radio3">Three</Label>
</FormGroup>
</Col>
</FormGroup>
<FormGroup row>
<Col md="3"><Label>Checkboxes</Label></Col>
<Col md="9">
<FormGroup check className="checkbox">
<Input className="form-check-input" type="checkbox" id="checkbox1" name="checkbox1" value="option1" />
<Label check className="form-check-label" htmlFor="checkbox1">Option 1</Label>
</FormGroup>
<FormGroup check className="checkbox">
<Input className="form-check-input" type="checkbox" id="checkbox2" name="checkbox2" value="option2" />
<Label check className="form-check-label" htmlFor="checkbox2">Option 2</Label>
</FormGroup>
<FormGroup check className="checkbox">
<Input className="form-check-input" type="checkbox" id="checkbox3" name="checkbox3" value="option3" />
<Label check className="form-check-label" htmlFor="checkbox3">Option 3</Label>
</FormGroup>
</Col>
</FormGroup>
<FormGroup row>
<Col md="3">
<Label>Inline Checkboxes</Label>
</Col>
<Col md="9">
<FormGroup check inline>
<Input className="form-check-input" type="checkbox" id="inline-checkbox1" name="inline-checkbox1" value="option1" />
<Label className="form-check-label" check htmlFor="inline-checkbox1">One</Label>
</FormGroup>
<FormGroup check inline>
<Input className="form-check-input" type="checkbox" id="inline-checkbox2" name="inline-checkbox2" value="option2" />
<Label className="form-check-label" check htmlFor="inline-checkbox2">Two</Label>
</FormGroup>
<FormGroup check inline>
<Input className="form-check-input" type="checkbox" id="inline-checkbox3" name="inline-checkbox3" value="option3" />
<Label className="form-check-label" check htmlFor="inline-checkbox3">Three</Label>
</FormGroup>
</Col>
</FormGroup>
<FormGroup row>
<Col md="3">
<Label htmlFor="file-input">File input</Label>
</Col>
<Col xs="12" md="9">
<Input type="file" id="file-input" name="file-input" />
</Col>
</FormGroup>
<FormGroup row>
<Col md="3">
<Label htmlFor="file-multiple-input">Multiple File input</Label>
</Col>
<Col xs="12" md="9">
<Input type="file" id="file-multiple-input" name="file-multiple-input" multiple />
</Col>
</FormGroup>
<FormGroup row hidden>
<Col md="3">
<Label className="custom-file" htmlFor="custom-file-input">Custom file input</Label>
</Col>
<Col xs="12" md="9">
<Label className="custom-file">
<Input className="custom-file" type="file" id="custom-file-input" name="file-input" />
<span className="custom-file-control"></span>
</Label>
</Col>
</FormGroup>
</Form>
</CardBody>
<CardFooter>
<Button type="submit" size="sm" color="primary"><i className="fa fa-dot-circle-o"></i> Submit</Button>
<Button type="reset" size="sm" color="danger"><i className="fa fa-ban"></i> Reset</Button>
</CardFooter>
</Card>
<Card>
<CardHeader>
<strong>Inline</strong> Form
</CardHeader>
<CardBody>
<Form action="" method="post" inline>
<FormGroup className="pr-1">
<Label htmlFor="exampleInputName2" className="pr-1">Name</Label>
<Input type="text" id="exampleInputName2" placeholder="Jane Doe" required />
</FormGroup>
<FormGroup className="pr-1">
<Label htmlFor="exampleInputEmail2" className="pr-1">Email</Label>
<Input type="email" id="exampleInputEmail2" placeholder="[email protected]" required />
</FormGroup>
</Form>
</CardBody>
<CardFooter>
<Button type="submit" size="sm" color="primary"><i className="fa fa-dot-circle-o"></i> Submit</Button>
<Button type="reset" size="sm" color="danger"><i className="fa fa-ban"></i> Reset</Button>
</CardFooter>
</Card>
</Col>
<Col xs="12" md="6">
<Card>
<CardHeader>
<strong>Horizontal</strong> Form
</CardHeader>
<CardBody>
<Form action="" method="post" className="form-horizontal">
<FormGroup row>
<Col md="3">
<Label htmlFor="hf-email">Email</Label>
</Col>
<Col xs="12" md="9">
<Input type="email" id="hf-email" name="hf-email" placeholder="Enter Email..." autoComplete="email" />
<FormText className="help-block">Please enter your email</FormText>
</Col>
</FormGroup>
<FormGroup row>
<Col md="3">
<Label htmlFor="hf-password">Password</Label>
</Col>
<Col xs="12" md="9">
<Input type="password" id="hf-password" name="hf-password" placeholder="Enter Password..." autoComplete="current-password"/>
<FormText className="help-block">Please enter your password</FormText>
</Col>
</FormGroup>
</Form>
</CardBody>
<CardFooter>
<Button type="submit" size="sm" color="primary"><i className="fa fa-dot-circle-o"></i> Submit</Button>
<Button type="reset" size="sm" color="danger"><i className="fa fa-ban"></i> Reset</Button>
</CardFooter>
</Card>
<Card>
<CardHeader>
<strong>Normal</strong> Form
</CardHeader>
<CardBody>
<Form action="" method="post">
<FormGroup>
<Label htmlFor="nf-email">Email</Label>
<Input type="email" id="nf-email" name="nf-email" placeholder="Enter Email.." autoComplete="email"/>
<FormText className="help-block">Please enter your email</FormText>
</FormGroup>
<FormGroup>
<Label htmlFor="nf-password">Password</Label>
<Input type="password" id="nf-password" name="nf-password" placeholder="Enter Password.." autoComplete="current-password"/>
<FormText className="help-block">Please enter your password</FormText>
</FormGroup>
</Form>
</CardBody>
<CardFooter>
<Button type="submit" size="sm" color="primary"><i className="fa fa-dot-circle-o"></i> Submit</Button>
<Button type="reset" size="sm" color="danger"><i className="fa fa-ban"></i> Reset</Button>
</CardFooter>
</Card>
<Card>
<CardHeader>
Input <strong>Grid</strong>
</CardHeader>
<CardBody>
<Form action="" method="post" className="form-horizontal">
<FormGroup row>
<Col sm="3">
<Input type="text" placeholder=".col-sm-3" />
</Col>
</FormGroup>
<FormGroup row>
<Col sm="4">
<Input type="text" placeholder=".col-sm-4" />
</Col>
</FormGroup>
<FormGroup row>
<Col sm="5">
<Input type="text" placeholder=".col-sm-5" />
</Col>
</FormGroup>
<FormGroup row>
<Col sm="6">
<Input type="text" placeholder=".col-sm-6" />
</Col>
</FormGroup>
<FormGroup row>
<Col sm="7">
<Input type="text" placeholder=".col-sm-7" />
</Col>
</FormGroup>
<FormGroup row>
<Col sm="8">
<Input type="text" placeholder=".col-sm-8" />
</Col>
</FormGroup>
<FormGroup row>
<Col sm="9">
<Input type="text" placeholder=".col-sm-9" />
</Col>
</FormGroup>
<FormGroup row>
<Col sm="10">
<Input type="text" placeholder=".col-sm-10" />
</Col>
</FormGroup>
<FormGroup row>
<Col sm="11">
<Input type="text" placeholder=".col-sm-11" />
</Col>
</FormGroup>
<FormGroup row>
<Col sm="12">
<Input type="text" placeholder=".col-sm-12" />
</Col>
</FormGroup>
</Form>
</CardBody>
<CardFooter>
<Button type="submit" size="sm" color="primary"><i className="fa fa-user"></i> Login</Button>
<Button type="reset" size="sm" color="danger"><i className="fa fa-ban"></i> Reset</Button>
</CardFooter>
</Card>
<Card>
<CardHeader>
Input <strong>Sizes</strong>
</CardHeader>
<CardBody>
<Form action="" method="post" className="form-horizontal">
<FormGroup row>
<Label sm="5" size="sm" htmlFor="input-small">Small Input</Label>
<Col sm="6">
<Input bsSize="sm" type="text" id="input-small" name="input-small" className="input-sm" placeholder=".form-control-sm" />
</Col>
</FormGroup>
<FormGroup row>
<Label sm="5" htmlFor="input-normal">Normal Input</Label>
<Col sm="6">
<Input type="text" id="input-normal" name="input-normal" placeholder="Normal" />
</Col>
</FormGroup>
<FormGroup row>
<Label sm="5" size="lg" htmlFor="input-large">Large Input</Label>
<Col sm="6">
<Input bsSize="lg" type="text" id="input-large" name="input-large" className="input-lg" placeholder=".form-control-lg" />
</Col>
</FormGroup>
</Form>
</CardBody>
<CardFooter>
<Button type="submit" size="sm" color="primary"><i className="fa fa-dot-circle-o"></i> Submit</Button>
<Button type="reset" size="sm" color="danger"><i className="fa fa-ban"></i> Reset</Button>
</CardFooter>
</Card>
</Col>
</Row>
<Row>
<Col xs="12" sm="6">
<Card>
<CardHeader>
<strong>Validation feedback</strong> Form
</CardHeader>
<CardBody>
<FormGroup>
<Label htmlFor="inputIsValid">Input is valid</Label>
<Input type="text" valid id="inputIsValid" />
<FormFeedback valid>Cool! Input is valid</FormFeedback>
</FormGroup>
<FormGroup>
<Label htmlFor="inputIsInvalid">Input is invalid</Label>
<Input type="text" invalid id="inputIsInvalid" />
<FormFeedback>Houston, we have a problem...</FormFeedback>
</FormGroup>
</CardBody>
</Card>
</Col>
<Col xs="12" sm="6">
<Card>
<CardHeader>
<strong>Validation feedback</strong> Form
</CardHeader>
<CardBody>
<Form className="was-validated">
<FormGroup>
<Label htmlFor="inputSuccess2i">Non-required input</Label>
<Input type="text" className="form-control-success" id="inputSuccess2i" />
<FormFeedback valid>Non-required</FormFeedback>
</FormGroup>
<FormGroup>
<Label htmlFor="inputWarning2i">Required input</Label>
<Input type="text" className="form-control-warning" id="inputWarning2i" required />
<FormFeedback className="help-block">Please provide a valid information</FormFeedback>
<FormFeedback valid className="help-block">Input provided</FormFeedback>
</FormGroup>
</Form>
</CardBody>
</Card>
</Col>
</Row>
<Row>
<Col xs="12" md="4">
<Card>
<CardHeader>
<strong>Icon/Text</strong> Groups
</CardHeader>
<CardBody>
<Form action="" method="post" className="form-horizontal">
<FormGroup row>
<Col md="12">
<InputGroup>
<InputGroupAddon addonType="prepend">
<InputGroupText>
<i className="fa fa-user"></i>
</InputGroupText>
</InputGroupAddon>
<Input type="text" id="input1-group1" name="input1-group1" placeholder="Username" />
</InputGroup>
</Col>
</FormGroup>
<FormGroup row>
<Col md="12">
<InputGroup>
<Input type="email" id="input2-group1" name="input2-group1" placeholder="Email" />
<InputGroupAddon addonType="append">
<InputGroupText>
<i className="fa fa-envelope-o"></i>
</InputGroupText>
</InputGroupAddon>
</InputGroup>
</Col>
</FormGroup>
<FormGroup row>
<Col md="12">
<InputGroup>
<InputGroupAddon addonType="prepend">
<InputGroupText>
<i className="fa fa-euro"></i>
</InputGroupText>
</InputGroupAddon>
<Input type="text" id="input3-group1" name="input3-group1" placeholder=".." />
<InputGroupAddon addonType="append">
<InputGroupText>.00</InputGroupText>
</InputGroupAddon>
</InputGroup>
</Col>
</FormGroup>
</Form>
</CardBody>
<CardFooter>
<Button type="submit" size="sm" color="success"><i className="fa fa-dot-circle-o"></i> Submit</Button>
<Button type="reset" size="sm" color="danger"><i className="fa fa-ban"></i> Reset</Button>
</CardFooter>
</Card>
</Col>
<Col xs="12" md="4">
<Card>
<CardHeader>
<strong>Button</strong> Groups
</CardHeader>
<CardBody>
<Form action="" method="post" className="form-horizontal">
<FormGroup row>
<Col md="12">
<InputGroup>
<InputGroupAddon addonType="prepend">
<Button type="button" color="primary"><i className="fa fa-search"></i> Search</Button>
</InputGroupAddon>
<Input type="text" id="input1-group2" name="input1-group2" placeholder="Username" />
</InputGroup>
</Col>
</FormGroup>
<FormGroup row>
<Col md="12">
<InputGroup>
<Input type="email" id="input2-group2" name="input2-group2" placeholder="Email" />
<InputGroupAddon addonType="append">
<Button type="button" color="primary">Submit</Button>
</InputGroupAddon>
</InputGroup>
</Col>
</FormGroup>
<FormGroup row>
<Col md="12">
<InputGroup>
<InputGroupAddon addonType="prepend">
<Button type="button" color="primary"><i className="fa fa-facebook"></i></Button>
</InputGroupAddon>
<Input type="text" id="input3-group2" name="input3-group2" placeholder="Search" />
<InputGroupAddon addonType="append">
<Button type="button" color="primary"><i className="fa fa-twitter"></i></Button>
</InputGroupAddon>
</InputGroup>
</Col>
</FormGroup>
</Form>
</CardBody>
<CardFooter>
<Button type="submit" size="sm" color="success"><i className="fa fa-dot-circle-o"></i> Submit</Button>
<Button type="reset" size="sm" color="danger"><i className="fa fa-ban"></i> Reset</Button>
</CardFooter>
</Card>
</Col>
<Col xs="12" md="4">
<Card>
<CardHeader>
<strong>Dropdowns</strong> Groups
</CardHeader>
<CardBody>
<Form className="form-horizontal">
<FormGroup row>
<Col md="12">
<InputGroup>
<InputGroupButtonDropdown addonType="prepend"
isOpen={this.state.first}
toggle={() => { this.setState({ first: !this.state.first }); }}>
<DropdownToggle caret color="primary">
Dropdown
</DropdownToggle>
<DropdownMenu className={this.state.first ? 'show' : ''}>
<DropdownItem>Action</DropdownItem>
<DropdownItem>Another Action</DropdownItem>
<DropdownItem>Something else here</DropdownItem>
<DropdownItem divider />
<DropdownItem>Separated link</DropdownItem>
</DropdownMenu>
</InputGroupButtonDropdown>
<Input type="text" id="input1-group3" name="input1-group3" placeholder="Username" />
</InputGroup>
</Col>
</FormGroup>
<FormGroup row>
<Col md="12">
<InputGroup>
<Input type="email" id="input2-group3" name="input2-group3" placeholder="Email" />
<InputGroupButtonDropdown addonType="append"
isOpen={this.state.second}
toggle={() => { this.setState({ second: !this.state.second }); }}>
<DropdownToggle caret color="primary">
Dropdown
</DropdownToggle>
<DropdownMenu className={this.state.second ? 'show' : ''}>
<DropdownItem>Action</DropdownItem>
<DropdownItem>Another Action</DropdownItem>
<DropdownItem>Something else here</DropdownItem>
<DropdownItem divider />
<DropdownItem>Separated link</DropdownItem>
</DropdownMenu>
</InputGroupButtonDropdown>
</InputGroup>
</Col>
</FormGroup>
<FormGroup row>
<Col md="12">
<InputGroup>
<InputGroupButtonDropdown
addonType="prepend"
isOpen={this.state.third}
toggle={() => { this.setState({ third: !this.state.third }); }}>
<DropdownToggle caret color="primary">Action</DropdownToggle>
<DropdownMenu className={this.state.third ? 'show' : ''}>
<DropdownItem>Action</DropdownItem>
<DropdownItem>Another Action</DropdownItem>
<DropdownItem>Something else here</DropdownItem>
<DropdownItem divider />
<DropdownItem>Separated link</DropdownItem>
</DropdownMenu>
</InputGroupButtonDropdown>
<Input type="text" id="input3-group3" name="input3-group3" placeholder=".." />
<InputGroupButtonDropdown addonType="append"
isOpen={this.state.fourth}
toggle={() => { this.setState({ fourth: !this.state.fourth }); }}>
<DropdownToggle caret color="primary">
Dropdown
</DropdownToggle>
<DropdownMenu className={this.state.fourth ? 'show' : ''}>
<DropdownItem>Action</DropdownItem>
<DropdownItem>Another Action</DropdownItem>
<DropdownItem>Something else here</DropdownItem>
<DropdownItem divider />
<DropdownItem>Separated link</DropdownItem>
</DropdownMenu>
</InputGroupButtonDropdown>
</InputGroup>
</Col>
</FormGroup>
</Form>
</CardBody>
<CardFooter>
<Button type="submit" size="sm" color="success"><i className="fa fa-dot-circle-o"></i> Submit</Button>
<Button type="reset" size="sm" color="danger"><i className="fa fa-ban"></i> Reset</Button>
</CardFooter>
</Card>
</Col>
</Row>
<Row>
<Col xs="12" md="6">
<Card>
<CardHeader>
Use the grid for big devices!
<small><code>.col-lg-*</code> <code>.col-md-*</code> <code>.col-sm-*</code></small>
</CardHeader>
<CardBody>
<Form action="" method="post" className="form-horizontal">
<FormGroup row>
<Col md="8">
<Input type="text" placeholder=".col-md-8" />
</Col>
<Col md="4">
<Input type="text" placeholder=".col-md-4" />
</Col>
</FormGroup>
<FormGroup row>
<Col md="7">
<Input type="text" placeholder=".col-md-7" />
</Col>
<Col md="5">
<Input type="text" placeholder=".col-md-5" />
</Col>
</FormGroup>
<FormGroup row>
<Col md="6">
<Input type="text" placeholder=".col-md-6" />
</Col>
<Col md="6">
<Input type="text" placeholder=".col-md-6" />
</Col>
</FormGroup>
<FormGroup row>
<Col md="5">
<Input type="text" placeholder=".col-md-5" />
</Col>
<Col md="7">
<Input type="text" placeholder=".col-md-7" />
</Col>
</FormGroup>
<FormGroup row>
<Col md="4">
<Input type="text" placeholder=".col-md-4" />
</Col>
<Col md="8">
<Input type="text" placeholder=".col-md-8" />
</Col>
</FormGroup>
</Form>
</CardBody>
<CardFooter>
<Button type="submit" size="sm" color="primary">Action</Button>
<Button size="sm" color="danger">Action</Button>
<Button size="sm" color="warning">Action</Button>
<Button size="sm" color="info">Action</Button>
<Button size="sm" color="success">Action</Button>
</CardFooter>
</Card>
</Col>
<Col xs="12" md="6">
<Card>
<CardHeader>
Input Grid for small devices!
<small><code>.col-*</code></small>
</CardHeader>
<CardBody>
<Form action="" method="post" className="form-horizontal">
<FormGroup row>
<Col xs="4">
<Input type="text" placeholder=".col-4" />
</Col>
<Col xs="8">
<Input type="text" placeholder=".col-8" />
</Col>
</FormGroup>
<FormGroup row>
<Col xs="5">
<Input type="text" placeholder=".col-5" />
</Col>
<Col xs="7">
<Input type="text" placeholder=".col-7" />
</Col>
</FormGroup>
<FormGroup row>
<Col xs="6">
<Input type="text" placeholder=".col-6" />
</Col>
<Col xs="6">
<Input type="text" placeholder=".col-6" />
</Col>
</FormGroup>
<FormGroup row>
<Col xs="7">
<Input type="text" placeholder=".col-5" />
</Col>
<Col xs="5">
<Input type="text" placeholder=".col-5" />
</Col>
</FormGroup>
<FormGroup row>
<Col xs="8">
<Input type="text" placeholder=".col-8" />
</Col>
<Col xs="4">
<Input type="text" placeholder=".col-4" />
</Col>
</FormGroup>
</Form>
</CardBody>
<CardFooter>
<Button type="submit" size="sm" color="primary">Action</Button>
<Button size="sm" color="danger">Action</Button>
<Button size="sm" color="warning">Action</Button>
<Button size="sm" color="info">Action</Button>
<Button size="sm" color="success">Action</Button>
</CardFooter>
</Card>
</Col>
</Row>
<Row>
<Col xs="12" sm="4">
<Card>
<CardHeader>
Example Form
</CardHeader>
<CardBody>
<Form action="" method="post">
<FormGroup>
<InputGroup>
<InputGroupAddon addonType="prepend">
<InputGroupText>Username</InputGroupText>
</InputGroupAddon>
<Input type="email" id="username3" name="username3" autoComplete="name"/>
<InputGroupAddon addonType="append">
<InputGroupText><i className="fa fa-user"></i></InputGroupText>
</InputGroupAddon>
</InputGroup>
</FormGroup>
<FormGroup>
<InputGroup>
<InputGroupAddon addonType="prepend">
<InputGroupText>Email</InputGroupText>
</InputGroupAddon>
<Input type="email" id="email3" name="email3" autoComplete="username"/>
<InputGroupAddon addonType="append">
<InputGroupText><i className="fa fa-envelope"></i></InputGroupText>
</InputGroupAddon>
</InputGroup>
</FormGroup>
<FormGroup>
<InputGroup>
<InputGroupAddon addonType="prepend">
<InputGroupText>Password</InputGroupText>
</InputGroupAddon>
<Input type="password" id="password3" name="password3" autoComplete="current-password"/>
<InputGroupAddon addonType="append">
<InputGroupText><i className="fa fa-asterisk"></i></InputGroupText>
</InputGroupAddon>
</InputGroup>
</FormGroup>
<FormGroup className="form-actions">
<Button type="submit" size="sm" color="primary">Submit</Button>
</FormGroup>
</Form>
</CardBody>
</Card>
</Col>
<Col xs="12" sm="4">
<Card>
<CardHeader>
Example Form
</CardHeader>
<CardBody>
<Form action="" method="post">
<FormGroup>
<InputGroup>
<Input type="text" id="username2" name="username2" placeholder="Username" autoComplete="name"/>
<InputGroupAddon addonType="append">
<InputGroupText><i className="fa fa-user"></i></InputGroupText>
</InputGroupAddon>
</InputGroup>
</FormGroup>
<FormGroup>
<InputGroup>
<Input type="email" id="email2" name="email2" placeholder="Email" autoComplete="username"/>
<InputGroupAddon addonType="append">
<InputGroupText><i className="fa fa-envelope"></i></InputGroupText>
</InputGroupAddon>
</InputGroup>
</FormGroup>
<FormGroup>
<InputGroup>
<Input type="password" id="password2" name="password2" placeholder="Password" autoComplete="current-password"/>
<InputGroupAddon addonType="append">
<InputGroupText><i className="fa fa-asterisk"></i></InputGroupText>
</InputGroupAddon>
</InputGroup>
</FormGroup>
<FormGroup className="form-actions">
<Button type="submit" size="sm" color="secondary">Submit</Button>
</FormGroup>
</Form>
</CardBody>
</Card>
</Col>
<Col xs="12" sm="4">
<Card>
<CardHeader>
Example Form
</CardHeader>
<CardBody>
<Form action="" method="post">
<FormGroup>
<InputGroup>
<InputGroupAddon addonType="prepend">
<InputGroupText><i className="fa fa-user"></i></InputGroupText>
</InputGroupAddon>
<Input type="text" id="username1" name="username1" placeholder="Username" autoComplete="name"/>
</InputGroup>
</FormGroup>
<FormGroup>
<InputGroup>
<InputGroupAddon addonType="prepend">
<InputGroupText><i className="fa fa-envelope"></i></InputGroupText>
</InputGroupAddon>
<Input type="email" id="email1" name="email1" placeholder="Email" autoComplete="username"/>
</InputGroup>
</FormGroup>
<FormGroup>
<InputGroup>
<InputGroupAddon addonType="prepend">
<InputGroupText><i className="fa fa-asterisk"></i></InputGroupText>
</InputGroupAddon>
<Input type="password" id="password1" name="password1" placeholder="Password" autoComplete="current-password"/>
</InputGroup>
</FormGroup>
<FormGroup className="form-actions">
<Button type="submit" size="sm" color="success">Submit</Button>
</FormGroup>
</Form>
</CardBody>
</Card>
</Col>
</Row>
<Row>
<Col xs="12">
<Fade timeout={this.state.timeout} in={this.state.fadeIn}>
<Card>
<CardHeader>
<i className="fa fa-edit"></i>Form Elements
<div className="card-header-actions">
<Button color="link" className="card-header-action btn-setting"><i className="icon-settings"></i></Button>
<Button color="link" className="card-header-action btn-minimize" data-target="#collapseExample" onClick={this.toggle}><i className="icon-arrow-up"></i></Button>
<Button color="link" className="card-header-action btn-close" onClick={this.toggleFade}><i className="icon-close"></i></Button>
</div>
</CardHeader>
<Collapse isOpen={this.state.collapse} id="collapseExample">
<CardBody>
<Form className="form-horizontal">
<FormGroup>
<Label htmlFor="prependedInput">Prepended text</Label>
<div className="controls">
<InputGroup className="input-prepend">
<InputGroupAddon addonType="prepend">
<InputGroupText>@</InputGroupText>
</InputGroupAddon>
<Input id="prependedInput" size="16" type="text" />
</InputGroup>
<p className="help-block">Here's some help text</p>
</div>
</FormGroup>
<FormGroup>
<Label htmlFor="appendedInput">Appended text</Label>
<div className="controls">
<InputGroup>
<Input id="appendedInput" size="16" type="text" />
<InputGroupAddon addonType="append">
<InputGroupText>.00</InputGroupText>
</InputGroupAddon>
</InputGroup>
<span className="help-block">Here's more help text</span>
</div>
</FormGroup>
<FormGroup>
<Label htmlFor="appendedPrependedInput">Append and prepend</Label>
<div className="controls">
<InputGroup className="input-prepend">
<InputGroupAddon addonType="prepend">
<InputGroupText>$</InputGroupText>
</InputGroupAddon>
<Input id="appendedPrependedInput" size="16" type="text" />
<InputGroupAddon addonType="append">
<InputGroupText>.00</InputGroupText>
</InputGroupAddon>
</InputGroup>
</div>
</FormGroup>
<FormGroup>
<Label htmlFor="appendedInputButton">Append with button</Label>
<div className="controls">
<InputGroup>
<Input id="appendedInputButton" size="16" type="text" />
<InputGroupAddon addonType="append">
<Button color="secondary">Go!</Button>
</InputGroupAddon>
</InputGroup>
</div>
</FormGroup>
<FormGroup>
<Label htmlFor="appendedInputButtons">Two-button append</Label>
<div className="controls">
<InputGroup>
<Input id="appendedInputButtons" size="16" type="text" />
<InputGroupAddon addonType="append">
<Button color="secondary">Search</Button>
<Button color="secondary">Options</Button>
</InputGroupAddon>
</InputGroup>
</div>
</FormGroup>
<div className="form-actions">
<Button type="submit" color="primary">Save changes</Button>
<Button color="secondary">Cancel</Button>
</div>
</Form>
</CardBody>
</Collapse>
</Card>
</Fade>
</Col>
</Row>
</div>
);
}
