reactstrap#Label JavaScript Examples
The following examples show how to use
reactstrap#Label.
You can vote up the ones you like or vote down the ones you don't like,
and go to the original project or source file by following the links above each example. You may check out the related API usage on the sidebar.
Example #1
| Source File: EditPlacement.js From GB-GCGC with MIT License | 6 votes |
|
render(){
const {redirect} = this.state;
if(redirect){
return <Redirect to={"/PlacementEditBoard"}/>
}
return (
<div className="container">
<Form onSubmit={this.handleSubmit}>
<FormGroup>
<Label htmlfor="company">Name Of The Company</Label>
<Input type="text" id="company" name="company" value={this.state.company} onChange={this.onChangeCompany} />
</FormGroup>
<FormGroup>
<Label htmlFor="date"> From </Label>
<Input type="date" id="date" name="date" value={this.state.date} onChange={this.onChangeDate} />
</FormGroup>
<FormGroup>
<Label htmlFor="CTC"> CTC </Label>
<Input type="text" id="ctc" name="ctc" value={this.state.CTC} onChange={this.onChangeCTC}/>
</FormGroup>
<Button type="submit" value="submit" color="primary">
Submit
</Button>
</Form>
</div>
)
}
Example #2
| Source File: InputField.js From HexactaLabs-NetCore_React-Initial with Apache License 2.0 | 6 votes |
|
InputField = props => {
const {
input,
label,
placeholder,
type,
meta: { error, touched, pristine }
} = props;
return (
<FormGroup>
<Label htmlFor={input.name}>{label}</Label>
<Input
valid={touched && !error && !pristine}
invalid={touched && !!error}
{...input}
id={input.name}
placeholder={placeholder}
type={type}
/>
<FormFeedback>{error}</FormFeedback>
</FormGroup>
);
}
Example #3
| Source File: Component.js From agenda with MIT License | 6 votes |
|
render() {
const {
fields,
submitContactData
} = this.props;
return (
<Container fluid>
<Form>
{map(fields, field => (
<FormGroup>
<Label>
{field.label}
<br/>
<Input
key={field.control}
name={field.control}
{...field}
/>
</Label>
</FormGroup>
))}
<Button
onClick={() => submitContactData()}
>
Submit
</Button>
</Form>
</Container>
);
}
Example #4
| Source File: LanguageCheckBox.js From Simplify-Testing-with-React-Testing-Library with MIT License | 6 votes |
|
CheckBox = props => {
const [isChecked, setIsChecked] = React.useState(false)
return (
<FormGroup key={props.lang} check inline>
<Label check>
<Input type="checkbox" onChange={e => setIsChecked(e.target.checked)} />
<span className={isChecked ? 'text-success font-weight-bold' : null}>
{props.lang}
</span>
</Label>
</FormGroup>
)
}
Example #5
| Source File: PlacementEditBoard.js From GB-GCGC with MIT License | 5 votes |
|
render() {
const {redirect} = this.state;
if(redirect){
return <Redirect to={"/home"}/>
}
return (
<div className="container">
<Card>
<Card.Body>
<div className="inline">
<Card.Title>
<h5 align="center">
Notice Board-Placements
<Tooltip title="Add">
<Link onClick={this.toggleModal}>
<FontAwesomeIcon icon={faPlus} size="xs" className="p-1 fa-lg" style={{backgroundColor:'#2A324B',color:'white',fontSize:'20',borderRadius:'10'}}/>
</Link>
</Tooltip>
</h5>
</Card.Title>
</div>
<div>
<Table size="sm" responsive striped>
<thead className="p-3" style={{backgroundColor:'#2A324B',color:'white',fontSize:'24px'}}>
<tr>
<th>S.No</th>
<th>Name of the Company</th>
<th>Date</th>
<th>CTC</th>
<th colspan="2">Operations</th>
</tr>
</thead>
<tbody>
{this.userList()}
</tbody>
</Table>
</div>
</Card.Body>
</Card>
<Modal isOpen={this.state.isModalOpen} toggle={this.toggleModal}>
<ModalHeader toggle={this.toggleModal}>
Add Placement Event
</ModalHeader>
<ModalBody>
<Form onSubmit={this.handleSubmit}>
<FormGroup>
<Label htmlfor="company">Name Of The Company</Label>
<Input type="text" id="company" name="company" value={this.state.company} onChange={this.onChangeCompany} />
</FormGroup>
<FormGroup>
<Label htmlFor="date"> From </Label>
<Input type="date" id="date" name="date" value={this.state.date} onChange={this.onChangeDate} />
</FormGroup>
<FormGroup>
<Label htmlFor="CTC"> CTC </Label>
<Input type="text" id="ctc" name="ctc" value={this.state.CTC} onChange={this.onChangeCTC}/>
</FormGroup>
<Button type="submit" value="submit" color="primary">
Submit
</Button>
</Form>
</ModalBody>
</Modal>
</div>
);
}
Example #6
| Source File: Component.js From agenda with MIT License | 5 votes |
|
render() {
const {
fields,
submitAssignmentData,
assignment
} = this.props;
return (
<Container>
<Form>
{map(fields, field => (
<FormGroup>
<Label>
{field.label}
<br/>
<Input
key={field.control}
name={field.control}
{...field}
>
{!field.value && (<option>[Seleccione]</option>)}
{map(field.options, opt => (
<option value={opt.id}>
{opt.name ? `${opt.name} - ${opt.address}` : `${opt.firstName} ${opt.lastName}`}
</option>
))}
</Input>
</Label>
</FormGroup>
))}
<Button
onClick={() => submitAssignmentData()}
disabled={!assignment.contact || !assignment.department}
>
Guardar
</Button>
</Form>
</Container>
);
}
Example #7
| Source File: AddRoom.js From react-js-chat-webapp-example with MIT License | 5 votes |
|
function AddRoom() {
const history = useHistory();
const [room, setRoom] = useState({ roomname: '' });
const [showLoading, setShowLoading] = useState(false);
const ref = firebase.database().ref('rooms/');
const save = (e) => {
e.preventDefault();
setShowLoading(true);
ref.orderByChild('roomname').equalTo(room.roomname).once('value', snapshot => {
if (snapshot.exists()) {
return (
<div>
<Alert color="primary">
Room name already exist!
</Alert>
</div>
);
} else {
const newRoom = firebase.database().ref('rooms/').push();
newRoom.set(room);
history.goBack();
setShowLoading(false);
}
});
};
const onChange = (e) => {
e.persist();
setRoom({...room, [e.target.name]: e.target.value});
}
return (
<div>
{showLoading &&
<Spinner color="primary" />
}
<Jumbotron>
<h2>Please enter new Room</h2>
<Form onSubmit={save}>
<FormGroup>
<Label>Room Name</Label>
<Input type="text" name="roomname" id="roomname" placeholder="Enter Room Name" value={room.roomname} onChange={onChange} />
</FormGroup>
<Button variant="primary" type="submit">
Add
</Button>
</Form>
</Jumbotron>
</div>
);
}
Example #8
| Source File: AuthLockScreen.js From gedge-platform with Apache License 2.0 | 5 votes |
|
render() {
return (
<React.Fragment>
<div className="home-btn d-none d-sm-block">
<Link to="/"><i className="mdi mdi-home-variant h2 text-white"></i></Link>
</div>
<div>
<Container fluid className="p-0">
<Row className="no-gutters">
<Col lg={4}>
<div className="authentication-page-content p-4 d-flex align-items-center min-vh-100">
<div className="w-100">
<Row className="justify-content-center">
<Col lg={9}>
<div>
<div className="text-center">
<div>
<Link to="/" className="logo"><img src={logodark} height="20" alt="logo" /></Link>
</div>
<h4 className="font-size-18 mt-4">Lock screen</h4>
<p className="text-muted">Enter your password to unlock the screen!</p>
</div>
<div className="p-2 mt-5">
<AvForm className="form-horizontal">
<div className="user-thumb text-center mb-5">
<img src={avatar2} className="rounded-circle img-thumbnail avatar-md" alt="thumbnail" />
<h5 className="font-size-15 mt-3">Jacob Lopez</h5>
</div>
<FormGroup className="auth-form-group-custom mb-4">
<i className="ri-lock-2-line auti-custom-input-icon"></i>
<Label for="userpassword">Password</Label>
<AvField name="password" validate={{ required: true }} type="password" className="form-control" id="userpassword" placeholder="Enter password" />
</FormGroup>
<div className="mt-4 text-center">
<Button color="primary" className="w-md waves-effect waves-light" type="submit">Unlock</Button>
</div>
</AvForm>
</div>
<div className="mt-5 text-center">
<p>Not you ? return <Link to="auth-login" className="font-weight-medium text-primary"> Log in </Link> </p>
<p>© 2021 Gedge Platform</p>
</div>
</div>
</Col>
</Row>
</div>
</div>
</Col>
<Col lg={8}>
<div className="authentication-bg">
<div className="bg-overlay"></div>
</div>
</Col>
</Row>
</Container>
</div>
</React.Fragment>
);
}
Example #9
| Source File: Editor.jsx From doc2pen with Creative Commons Zero v1.0 Universal | 5 votes |
|
function Editor() {
const [pageCount, setPageCount] = useState(1);
const [currentPageNo, setCurrentPageNo] = useState(1);
useEffect(() => {
if (currentPageNo > pageCount) setCurrentPageNo(prev => prev - 1);
}, [pageCount, currentPageNo]);
useEffect(() => {
window.scrollTo(0, 0);
}, []);
return (
<>
<MetaComponent
title={metaData.editor.title}
description={metaData.editor.description}
keywords={metaData.editor.keywords}
/>
<div className={styles.dscCommunity}>
<EditContextProvider>
<Settings />
<div className={styles.pageBtnsWrapper}>
<Button
outline
color="primary"
disabled={currentPageNo === 1}
onClick={() => setCurrentPageNo(prev => prev - 1)}
>
Previous Page
</Button>
<Label>
Current Page No.
<Input
type="number"
max={pageCount}
min="1"
step="1"
value={currentPageNo}
onInput={e => setCurrentPageNo(parseInt(e.target.value))}
/>
</Label>
<Button
outline
color="primary"
disabled={currentPageNo === pageCount}
onClick={() => setCurrentPageNo(prev => prev + 1)}
>
Next Page
</Button>
</div>
{[...Array(pageCount)].map((e, i) => (
<Output key={i + 1} pageNo={i + 1} show={i + 1 === currentPageNo} />
))}
</EditContextProvider>
</div>
<div className={styles.btnWrapper}>
<ScrollToTop />
</div>
<div className={styles.pageBtnsWrapper}>
<Button
outline
color="primary"
onClick={() => setPageCount(prev => prev + 1)}
>
Add Page at the End
</Button>
<Button
outline
color="primary"
disabled={pageCount === 1}
onClick={() => setPageCount(prev => prev - 1)}
>
Remove Last Page
</Button>
</div>
</>
);
}
Example #10
| Source File: ProfilePage.js From Website2020 with MIT License | 4 votes |
|
function ProfilePage() {
const [activeTab, setActiveTab] = React.useState("1");
const toggle = tab => {
if (activeTab !== tab) {
setActiveTab(tab);
}
};
document.documentElement.classList.remove("nav-open");
React.useEffect(() => {
document.body.classList.add("landing-page");
return function cleanup() {
document.body.classList.remove("landing-page");
};
});
return (
<>
<ExamplesNavbar />
<ProfilePageHeader />
<div className="section profile-content">
<Container>
<div className="owner">
<div className="avatar">
<img
alt="..."
className="img-circle img-no-padding img-responsive"
src={require("assets/img/faces/joe-gardner-2.jpg")}
/>
</div>
<div className="name">
<h4 className="title">
Jane Faker <br />
</h4>
<h6 className="description">Music Producer</h6>
</div>
</div>
<Row>
<Col className="ml-auto mr-auto text-center" md="6">
<p>
An artist of considerable range, Jane Faker — the name taken by
Melbourne-raised, Brooklyn-based Nick Murphy — writes, performs
and records all of his own music, giving it a warm, intimate
feel with a solid groove structure.
</p>
<br />
<Button className="btn-round" color="default" outline>
<i className="fa fa-cog" /> Settings
</Button>
</Col>
</Row>
<br />
<div className="nav-tabs-navigation">
<div className="nav-tabs-wrapper">
<Nav role="tablist" tabs>
<NavItem>
<NavLink
className={activeTab === "1" ? "active" : ""}
onClick={() => {
toggle("1");
}}
>
Follows
</NavLink>
</NavItem>
<NavItem>
<NavLink
className={activeTab === "2" ? "active" : ""}
onClick={() => {
toggle("2");
}}
>
Following
</NavLink>
</NavItem>
</Nav>
</div>
</div>
{/* Tab panes */}
<TabContent className="following" activeTab={activeTab}>
<TabPane tabId="1" id="follows">
<Row>
<Col className="ml-auto mr-auto" md="6">
<ul className="list-unstyled follows">
<li>
<Row>
<Col className="ml-auto mr-auto" lg="2" md="4" xs="4">
<img
alt="..."
className="img-circle img-no-padding img-responsive"
src={require("assets/img/faces/clem-onojeghuo-2.jpg")}
/>
</Col>
<Col className="ml-auto mr-auto" lg="7" md="4" xs="4">
<h6>
Flume <br />
<small>Musical Producer</small>
</h6>
</Col>
<Col className="ml-auto mr-auto" lg="3" md="4" xs="4">
<FormGroup check>
<Label check>
<Input
defaultChecked
defaultValue=""
type="checkbox"
/>
<span className="form-check-sign" />
</Label>
</FormGroup>
</Col>
</Row>
</li>
<hr />
<li>
<Row>
<Col className="mx-auto" lg="2" md="4" xs="4">
<img
alt="..."
className="img-circle img-no-padding img-responsive"
src={require("assets/img/faces/ayo-ogunseinde-2.jpg")}
/>
</Col>
<Col lg="7" md="4" xs="4">
<h6>
Banks <br />
<small>Singer</small>
</h6>
</Col>
<Col lg="3" md="4" xs="4">
<FormGroup check>
<Label check>
<Input defaultValue="" type="checkbox" />
<span className="form-check-sign" />
</Label>
</FormGroup>
</Col>
</Row>
</li>
</ul>
</Col>
</Row>
</TabPane>
<TabPane className="text-center" tabId="2" id="following">
<h3 className="text-muted">Not following anyone yet :(</h3>
<Button className="btn-round" color="warning">
Find artists
</Button>
</TabPane>
</TabContent>
</Container>
</div>
<DemoFooter />
</>
);
}
Example #11
| Source File: EditComponents.js From schematic-capture-fe with MIT License | 4 votes |
|
EditComponents = ({ buttonLabel, component }) => {
// console.log(component);
const [modal, setModal] = useState(false);
const toggle = () => setModal(!modal);
const dispatch = useDispatch();
const [editInfo, setEditInfo] = useState({
id: "",
descriptions: "",
manufacturer: "",
partNumber: "",
stockCode: "",
image: "",
resources: "",
cutsheet: "",
storesPartNumber: "",
});
const { updateComponent } = dispatchers;
useEffect(() => {
setEditInfo({
id: component.id,
descriptions: component.descriptions,
manufacturer: component.manufacturer,
partNumber: component.partNumber,
stockCode: component.stockCode,
image: component.image,
resources: component.resources,
cutsheet: component.cutsheet,
storesPartNumber: component.storesPartNumber,
});
}, []);
const { register } = useForm();
const onSubmit = (e) => {
e.preventDefault();
console.log(editInfo, "DATA!!!");
dispatch(updateComponent(editInfo.id, editInfo));
toggle();
};
const handleChange = (e) => {
setEditInfo({ ...editInfo, [e.target.name]: e.target.value });
};
const handleImageChange = (url) => {
setEditInfo({ ...editInfo, image: url });
};
const Update = () => {
return (
<>
<MH1></MH1>
<MBody>
{editInfo.descriptions === null || editInfo.manufacturer === null ? (
<Container>
{/* <FieldError>All Fields Required.</FieldError> */}
</Container>
) : (
<></>
)}
<Form onSubmit={onSubmit}>
<FormGroup>
<Label for="descriptions">Description</Label>
<Input
type="text"
value={editInfo.descriptions}
id="descriptions"
placeholder="Type Description"
name="descriptions"
onChange={handleChange}
autoComplete="off"
ref={register({})}
/>
</FormGroup>
<FormGroup>
<Label for="manufacturer">Manufacturer</Label>
<Input
type="text"
value={editInfo.manufacturer}
id="manufacturer"
placeholder="Type Manufacturer"
name="manufacturer"
onChange={handleChange}
autoComplete="off"
ref={register}
/>
</FormGroup>
<FormGroup>
<Label for="partNumber">Part Number</Label>
<Input
type="text"
value={editInfo.partNumber}
id="partNumber"
placeholder="Type Part Number"
name="partNumber"
onChange={handleChange}
autoComplete="off"
ref={register}
/>
</FormGroup>
<FormGroup>
<Label for="stockCode">Stock Code</Label>
<Input
type="text"
value={editInfo.stockCode}
id="stockCode"
placeholder="Type Stock Code"
name="stockCode"
onChange={handleChange}
autoComplete="off"
ref={register}
/>
</FormGroup>
<FormGroup>
<Label for="image">Image</Label>
{/* display the last part of the image URL which is the name of the image */}
<p>
Currently:{" "}
{editInfo.image &&
editInfo.image.split("/").slice(-1)[0].split("?")[0]}
</p>
<DropboxChooser
inPopup={true}
handleSelected={handleImageChange}
/>
</FormGroup>
<FormGroup>
<Label for="resources">Resource</Label>
<Input
type="text"
value={editInfo.resources}
id="resources"
placeholder="Type Resource"
name="resources"
onChange={handleChange}
autoComplete="off"
ref={register}
/>
</FormGroup>
<FormGroup>
<Label for="cutsheet">Cutsheet</Label>
<Input
type="text"
value={editInfo.cutsheet}
id="cutsheet"
placeholder="Type Cutsheet"
name="cutsheet"
onChange={handleChange}
autoComplete="off"
ref={register}
/>
</FormGroup>
<FormGroup>
<Label for="storespart#">Stores Part #</Label>
<Input
type="text"
value={editInfo.storesPartNumber}
id="storespart#"
placeholder="Type Stores Part #"
name="storesPartNumber"
onChange={handleChange}
autoComplete="off"
ref={register}
/>
</FormGroup>
<button
type="submit"
style={{ border: "1px solid gray", borderRadius: "5px" }}
>
Update Component
</button>
</Form>
</MBody>{" "}
</>
);
};
return (
<ModalCont>
<NewProjBtn onClick={toggle}>{buttonLabel}</NewProjBtn>
<Mod isOpen={modal} toggle={toggle}>
<h2 style={{ textAlign: "center", padding: "2rem 0" }}>
Edit Component
</h2>
<MBody>{Update(editInfo)}</MBody>
</Mod>
</ModalCont>
);
}
Example #12
| Source File: TrainingBoardEdit.js From GB-GCGC with MIT License | 4 votes |
|
render() {
const {redirect} = this.state;
if(redirect){
return <Redirect to={"/home"}/>
}
return (
<div className="container">
<Card>
<Card.Body>
<div className="row">
<Col>
<Card.Title>
<h5 align="center">
Notice Board-Training
<Tooltip title="Add">
<Link onClick={this.toggleModal}>
<FontAwesomeIcon icon={faPlus} size="xs" className="p-1 fa-lg" style={{backgroundColor:'#2A324B',color:'white',fontSize:'20',borderRadius:'10'}}/>
</Link>
</Tooltip>
</h5>
</Card.Title>
</Col>
</div>
<div>
<Table size="sm" responsive striped>
<thead className="p-3" style={{backgroundColor:'#2A324B',color:'white',fontSize:'24px'}}>
<tr>
<th>From</th>
<th>To</th>
<th>Name of the Programme</th>
<th>Status</th>
<th>Operations</th>
</tr>
</thead>
<tbody className="p-1">
{this.userList()}
</tbody>
</Table>
</div>
</Card.Body>
</Card>
<Modal isOpen={this.state.isModalOpen} toggle={this.toggleModal}>
<ModalHeader toggle={this.toggleModal}>
Add Training Event
</ModalHeader>
<ModalBody>
<Form onSubmit={this.handleSubmit}>
<FormGroup>
<Label htmlfor="username">Year Of Passing</Label>
<Input
type="text"
id="YOP"
value ={this.state.YOP}
name="YOP"
onChange={this.onChangeYOP}
/>
</FormGroup>
<FormGroup>
<Label htmlfor="program">Name Of The Program</Label>
<Input type="text" id="program" value={this.state.program} name="program" onChange={this.onChangeProgram} />
</FormGroup>
<FormGroup>
<Label htmlFor="from-date"> From </Label>
<Input type="date" id="from-date" name="from-date" value={this.state.from_date} onChange={this.onChangeFromDate}/>
</FormGroup>
<FormGroup>
<Label htmlFor="to-date"> To </Label>
<Input type="date" id="to-date" name="to-date" value={this.state.to_date} onChange={this.onChangeToDate}/>
</FormGroup>
<Button type="submit" value="submit" color="primary">
Submit
</Button>
</Form>
</ModalBody>
</Modal>
{/* <Modal isOpen={this.state.isModalOpen1} toggle={this.toggleModal1}>
<ModalHeader toggle={this.toggleModal1}>
Edit Training Event
</ModalHeader>
<ModalBody>
<Form onSubmit={this.handleSubmit}>
<FormGroup>
<Label htmlfor="username">Year Of Passing</Label>
<Input
type="text" id="YOP" value ={item.YOP} name="YOP" onChange={this.onChangeYOP}
/>
{console.log("item.name_of_the_program"), console.log(index+1)}
</FormGroup>
<FormGroup>
<Label htmlfor="program">Name Of The Program</Label>
<Input key={index} type="text" id="program" value={item.name_of_the_program} name="program" onChange={this.onChangeProgram} />
</FormGroup>
<FormGroup>
<Label htmlFor="from-date"> From </Label>
<Input type="date" id="from-date" name="from-date" value={this.state.from_date} onChange={this.onChangeFromDate}/>
</FormGroup>
<FormGroup>
<Label htmlFor="to-date"> To </Label>
<Input type="date" id="to-date" name="to-date" value={this.state.to_date} onChange={this.onChangeToDate}/>
</FormGroup>
<Button type="submit" value="submit" color="primary">
Submit
</Button>
</Form>
</ModalBody>
</Modal>*/}
</div>
);
}
Example #13
| Source File: ListModal.js From Frontend with Apache License 2.0 | 4 votes |
|
ListModal = ({ creds, acc, handle, user }) => {
const { buttonLabel, className } = { creds, acc, handle, user }
const [modal, setModal] = useState(false)
const [nestedModal1, setNestedModal1] = useState(false)
const [nestedModal2, setNestedModal2] = useState(false)
const [nestedModal3, setNestedModal3] = useState(false)
const [closeAll, setCloseAll] = useState(false)
const [friends, setFriends] = useState({})
const [friendReq, setFriendReq] = useState({})
const [sentReq, setSentReq] = useState({})
const [friendsOptions, setFriendsOptions] = useState(true)
const toggle = (e) => {
e.preventDefault()
setFriendsOptions(!friendsOptions)
setModal(!modal)
if (friendsOptions) {
// console.log("true");
$('.popout-right>.popout-menu-right').removeClass('hideOptions')
$('.popout-right>.popout-menu-right').addClass('showOptions')
$('.window-button>.icon-popout-right').removeClass(
'glyphicon-menu-hamburger'
)
$('.window-button>.icon-popout-right').addClass(
'animated rotateIn glyphicon-remove'
)
$('.dropdown-link-right').addClass('animated bounceIn')
} else {
// console.log("false");
$('.popout-right>.popout-menu-right').removeClass('showOptions')
$('.popout-right>.popout-menu-right').addClass('hideOptions')
$('.window-button>.icon-popout-right').removeClass(
'animated rotateIn glyphicon-remove'
)
$('.dropdown-link-right').removeClass('animated bounceIn')
$('.window-button>.icon-popout-right').addClass(
'animated bounceIn glyphicon-menu-hamburger'
)
}
}
const toggleNested1 = (e) => {
e.preventDefault()
setNestedModal1(!nestedModal1)
if (nestedModal1) {
// console.log("pppppp");
}
setCloseAll(false)
}
const toggleNested2 = (e) => {
e.preventDefault()
setNestedModal2(!nestedModal2)
setCloseAll(false)
}
const toggleNested3 = (e) => {
e.preventDefault()
setNestedModal3(!nestedModal3)
setCloseAll(false)
}
const toggleAll = (e) => {
e.preventDefault()
setNestedModal1(!nestedModal1)
setNestedModal2(!nestedModal2)
setNestedModal3(!nestedModal3)
setCloseAll(true)
}
const [formUsername, setFormUsername] = useState('')
const [friendStatus, setFriendStatus] = useState({})
async function submitForm(e) {
e.preventDefault()
// console.log(formUsername);
const res = await fetch(
`https://api.codedigger.tech/auth/user/send-request`,
{
method: 'POST',
headers: {
'Content-Type': 'application/json',
Authorization: `Bearer ${acc}`,
},
body: JSON.stringify({
to_user: formUsername,
}),
}
)
res.json().then((res) => setFriendStatus(res))
window.location.reload()
}
useEffect(() => {
getFriends(acc).then((res) => setFriends(res))
// console.log(friends);
async function showList() {
// const res= await fetch(`https://api.codedigger.tech/auth/user/friends`,{
// method:"GET",
// headers:{
// "Content-Type":"application/json",
// "Authorization":`Bearer ${acc}`
// }
// });
// res
// .json()
// .then(res => setFriends(res));
// setFriends(getFriends(acc));
const res1 = await fetch(
`https://api.codedigger.tech/auth/user/show-request`,
{
method: 'GET',
headers: {
'Content-Type': 'application/json',
Authorization: `Bearer ${acc}`,
},
}
)
res1.json().then((res1) => setFriendReq(res1))
const res2 = await fetch(
`https://api.codedigger.tech/auth/user/show-send-request`,
{
method: 'GET',
headers: {
'Content-Type': 'application/json',
Authorization: `Bearer ${acc}`,
},
}
)
res2.json().then((res2) => setSentReq(res2))
}
showList()
}, [])
return (
<>
<div
style={{ marginTop: '-15px' }}
class="dropdown popout-right pull-left"
>
<div onClick={toggle}>
<button
style={{ width: '135px', padding: '5px' }}
class="window-button btn-primary dropdown-toggle friendsButton"
type="button"
role="button"
id="dropdownMenu1"
data-toggle="dropdown"
aria-expanded="true"
>
<svg
style={{ width: '28px', marginRight: '9px' }}
xmlns="http://www.w3.org/2000/svg"
xmlnsXlink="http://www.w3.org/1999/xlink"
viewBox="0 0 32 32"
>
<defs>
<linearGradient
id="Live-Events_svg__a"
x1="-55.5"
y1="1295.5"
x2="-55.5"
y2="1301.5"
gradientTransform="translate(64.5 -1283.5)"
gradientUnits="userSpaceOnUse"
>
<stop offset=".001" stop-opacity="0"></stop>
<stop offset=".83"></stop>
</linearGradient>
<linearGradient
id="Live-Events_svg__b"
y1="-41.5"
y2="-35.5"
gradientTransform="matrix(1 0 0 -1 78.5 -23.5)"
xlinkHref="#Live-Events_svg__a"
></linearGradient>
<linearGradient
id="Live-Events_svg__d"
y1="32"
x2="32"
gradientUnits="userSpaceOnUse"
>
<stop offset=".1" stop-color="#be95ff"></stop>
<stop offset=".9" stop-color="#4589ff"></stop>
</linearGradient>
<mask
id="Live-Events_svg__c"
x="0"
y="0"
width="32"
height="32"
maskUnits="userSpaceOnUse"
>
<path
d="M24 4a3 3 0 11-3 3 3 3 0 013-3m0-2a5 5 0 105 5 5 5 0 00-5-5zM8 4a3 3 0 11-3 3 3 3 0 013-3m0-2a5 5 0 105 5 5 5 0 00-5-5zM12 14H6a5.006 5.006 0 00-5 5v4h2v-4a3 3 0 013-3h6zM26 14h-6v2h6a3 3 0 013 3v4h2v-4a5.006 5.006 0 00-5-5z"
fill="#fff"
></path>
<path
transform="rotate(-90 9 15)"
fill="url(#Live-Events_svg__a)"
d="M7 12h4v6H7z"
></path>
<path
transform="rotate(-90 23 15)"
fill="url(#Live-Events_svg__b)"
d="M21 12h4v6h-4z"
></path>
</mask>
</defs>
<g data-name="Layer 2">
<g data-name="Dark theme icons">
<g mask="url(#Live-Events_svg__c)">
<path
fill="url(#Live-Events_svg__d)"
d="M0 0h32v32H0z"
></path>
</g>
<path
d="M23 30h-2v-2a3 3 0 00-3-3h-4a3 3 0 00-3 3v2H9v-2a5.006 5.006 0 015-5h4a5.006 5.006 0 015 5zM16 13a3 3 0 11-3 3 3 3 0 013-3m0-2a5 5 0 105 5 5 5 0 00-5-5z"
fill="#f4f4f4"
></path>
</g>
</g>
</svg>
<span style={{ fontSize: '16px' }}>My Friends</span>
</button>
</div>
<ul
class="dropdown-menu popout-menu-right hideOptions"
role="menu"
aria-labelledby="dropdownMenu1"
>
<li
onClick={toggleNested1}
role="presentation"
class="dropdown-link-right arrow-box-left"
>
<a onClick={toggleNested1} role="menuitem" tabindex="-1" href="#">
Friends
</a>
</li>
<li
onClick={toggleNested3}
role="presentation"
class="dropdown-link-right arrow-box-left"
>
<a role="menuitem" tabindex="-1" href="#">
Sent Friend Requests
</a>
</li>
<li
onClick={toggleNested2}
role="presentation"
class="dropdown-link-right arrow-box-left"
>
<a role="menuitem" tabindex="-1" href="#">
Friend Requests
</a>
</li>
</ul>
</div>
<Modal
isOpen={nestedModal1}
toggle={toggleNested1}
onClosed={closeAll ? toggle : undefined}
>
<ModalHeader>List of Friends</ModalHeader>
<ModalBody>
{friends != undefined ? (
<FriendList friends={friends} i="1" acc={acc} />
) : (
<Loading />
)}
</ModalBody>
<Form onSubmit={submitForm} style={{ marginBottom: '70px' }}>
<Label for="formUsername">Add Friend</Label>
<div style={{ display: 'flex' }}>
<Input
style={{ marginLeft: '11px', width: '73%' }}
type="text"
id="formUsername"
onChange={(e) => setFormUsername(e.target.value)}
placeholder="Enter Username"
/>
<Button
style={{
position: 'relative',
top: '-4px',
left: '0px',
borderRadius: '13px',
}}
onClick={submitForm}
type="submit"
>
Submit
</Button>
</div>
</Form>
<ModalFooter>
<Button color="primary" onClick={toggleNested1}>
Close{' '}
</Button>{' '}
</ModalFooter>
</Modal>
<Modal
isOpen={nestedModal2}
toggle={toggleNested2}
onClosed={closeAll ? toggle : undefined}
>
<ModalHeader>List of Friend Requests</ModalHeader>
<ModalBody>
{friendReq != undefined ? (
<FriendList friends={friendReq} i="2" acc={acc} />
) : (
<Loading />
)}
</ModalBody>
<ModalFooter>
<Button color="primary" onClick={toggleNested2}>
Close{' '}
</Button>{' '}
</ModalFooter>
</Modal>
<Modal
isOpen={nestedModal3}
toggle={toggleNested3}
onClosed={closeAll ? toggle : undefined}
>
<ModalHeader>List of Sent Friend Requests</ModalHeader>
<ModalBody>
{sentReq != undefined ? (
<FriendList friends={sentReq} i="3" acc={acc} />
) : (
<Loading />
)}
</ModalBody>
<br />
<br />
<ModalFooter>
<Button color="primary" onClick={toggleNested3}>
Close{' '}
</Button>{' '}
</ModalFooter>
</Modal>
{/* <Modal isOpen={modal} toggle={toggle}>
<ModalHeader toggle={toggle}>Choose a list</ModalHeader>
<ModalBody>
<br />
<br />
<Button color="success"
onClick={toggleNested2}
style={{
right: '50px',
bottom: '10px',
}}
>Friend Requests List</Button>
<Button color="success"
onClick={toggleNested1}
style={{
right: '310px',
bottom: '10px'
}}
>Friends List</Button>
<Button color="success"
onClick={toggleNested3}
style={{
right: '130px',
bottom: '-60px'
}}
>Show Sent Requests List</Button>
</ModalBody>
<br />
<br />
<br />
<br />
<br />
</Modal> */}
</>
)
}
Example #14
| Source File: AddContact.js From ReactJS-Projects with MIT License | 4 votes |
|
AddContact = () => {
const { state, dispatch } = useContext(ContactContext)
const { contactToUpdate, contactToUpdateKey } = state
const history = useHistory()
const [name, setName] = useState("")
const [email, setEmail] = useState("")
const [phoneNumber, setPhoneNumber] = useState("")
const [address, setAddress] = useState("")
const [isUploading, setIsUploading] = useState(false)
const [downloadUrl, setDownloadUrl] = useState(null)
const [star, setStar] = useState(false)
const [isUpdate, setIsUpdate] = useState(false)
useEffect(() => {
if (contactToUpdate) {
setName(contactToUpdate.name)
setEmail(contactToUpdate.email)
setPhoneNumber(contactToUpdate.phoneNumber)
setAddress(contactToUpdate.address)
setStar(contactToUpdate.star)
setDownloadUrl(contactToUpdate.picture)
setIsUpdate(true)
}
}, [contactToUpdate])
const imagePicker = async e => {
try {
const file = e.target.files[0]
var metadata = {
contentType: file.type
}
let resizedImage = await readAndCompressImage(file, imageConfig)
const storageRef = await firebase.storage().ref()
var upload = storageRef.child('iamges/' + file.name).put(resizedImage, metadata)
upload.on(
firebase.storage.TaskEvent.STATE_CHANGED,
snapshot => {
setIsUploading(true)
var progress = (snapshot.bytesTransferred / snapshot.totalBytes) * 100
switch (snapshot.state) {
case firebase.storage.TaskState.PAUSED:
setIsUploading(false)
console.log('Uploading Paused.')
break;
case firebase.storage.TaskState.RUNNING:
console.log('Uploading In Progress.')
break;
case firebase.storage.TaskState.FAILED:
setIsUploading(false)
console.log('Uploading Failed.')
break;
case firebase.storage.TaskState.SUCCESS:
console.log('Uploading Successful.')
break;
}
if (progress == 100) {
setIsUploading(false);
toast("Uploaded!", { type: "success" })
}
},
error => {
toast('Something went wrong.', { type: 'error' })
}, () => {
upload.snapshot.ref.getDownloadURL().then(downloadUrl => {
setDownloadUrl(downloadUrl)
}).catch(err => console.log(err))
}
)
} catch (err) {
console.log(err)
toast('Something went wrong', { type: "error" })
}
}
const addContact = async () => {
try {
firebase.database().ref('contacts/' + v4()).set({
name,
email,
phoneNumber,
address,
picture: downloadUrl,
star
})
} catch (err) {
console.log(err)
}
}
const updateContact = async () => {
try {
firebase.database().ref('contacts/' + contactToUpdateKey).set(
{
name,
email,
phoneNumber,
address,
picture: downloadUrl,
star
}
)
} catch (err) {
console.log(err)
toast('Failed to update', { type: 'error' })
}
}
const handleSubmit = e => {
e.preventDefault()
isUpdate ? updateContact() : addContact()
toast('Success', { type: 'success' })
dispatch({
type: CONTACT_TO_UPDATE,
payload: null,
key: null
})
history.push("/")
}
return (
<Container fluid className="mt-5">
<Row>
<Col md="6" className="offset-md-3 p-2">
<Form onSubmit={handleSubmit}>
<div className="text-center">
{isUploading ? (
<Spinner type="grow" color="primary" />
) : (
<div>
<label htmlFor="imagepicker" className="">
<img src={downloadUrl} alt="" className="profile" />
</label>
<input
type="file"
name="image"
id="imagepicker"
accept="image/*"
multiple={false}
onChange={e => imagePicker(e)}
className="hidden"
/>
</div>
)}
</div>
<FormGroup>
<Input
type="text"
name="name"
id="name"
placeholder="Name"
value={name}
onChange={e => setName(e.target.value)}
/>
</FormGroup>
<FormGroup>
<Input
type="email"
name="email"
id="email"
value={email}
onChange={e => setEmail(e.target.value)}
placeholder="Email"
/>
</FormGroup>
<FormGroup>
<Input
type="number"
name="number"
id="phonenumber"
value={phoneNumber}
onChange={e => setPhoneNumber(e.target.value)}
placeholder="phone number"
/>
</FormGroup>
<FormGroup>
<Input
type="textarea"
name="area"
id="area"
value={address}
onChange={e => setAddress(e.target.value)}
placeholder="address"
/>
</FormGroup>
<FormGroup check>
<Label check>
<Input
type="checkbox"
onChange={() => {
setStar(!star)
}}
checked={star}
/>{" "}
<span className="text-right">Mark as Star</span>
</Label>
</FormGroup>
<Button
type="submit"
color="primary"
block
className="text-uppercase"
>
{isUpdate ? "Update Contact" : "Add Contact"}
</Button>
</Form>
</Col>
</Row>
</Container>
)
}
Example #15
| Source File: blog.component.js From blogApp with MIT License | 4 votes |
|
render() {
return (
<div className='pt-2 px-3'>
<div className='row mr-auto ml-0 mb-4 mt-0'>
<Button
color='primary'
size='lg'
onClick={() => {
window.location.href = "/";
}}
style={{
width: "60px",
height: "60px",
borderRadius: "50%",
}}>
<FontAwesomeIcon icon={faArrowLeft} />
</Button>
</div>
{!this.state.loaded ? (
<ReactLoading
type={"spin"}
color={"orange"}
height={"100vh"}
width={"40%"}
className='loading'
/>
) : (
<Card id='blog' className='p-2 col-12 singleBlog'>
<CardImg
src={this.state.image}
alt='Card image cap'
className='img-thumbnail'
/>
<CardBody>
<CardTitle className='text-primary'>
<h5>
{this.state.title}
<span className='float-right text-secondary'>
{"-"}
<em>@{this.state.author.username}</em>
</span>
</h5>
</CardTitle>
{this.state.date !== "" && (
<CardSubtitle className='text-dark'>
<FontAwesomeIcon
icon={faCalendar}
className='mr-2'
/>
{new Intl.DateTimeFormat("en-US", {
month: "long",
day: "numeric",
year: "numeric",
hour: "numeric",
minute: "numeric",
}).format(Date.parse(this.state.date))}
<span className='float-right'>
<FontAwesomeIcon
className='text-danger'
icon={faHeart}
/>{" "}
{this.state.likes.length}
</span>
</CardSubtitle>
)}
<CardText>
<br />
{this.state.body}
</CardText>
</CardBody>
<CardFooter>
{this.props.user !== null &&
this.props.user._id ===
this.state.author.id && (
<div
style={{ display: "flex" }}
className='p-1'>
<Button
className='btn btn-danger mr-1'
style={{ width: "48%" }}
onClick={this.deleteBlog}>
Delete
</Button>{" "}
<Button
className='btn btn-warning ml-1'
style={{ width: "48%" }}
onClick={this.toggleModal}>
Edit
</Button>
</div>
)}
</CardFooter>
</Card>
)}
<Modal
isOpen={this.state.isModalOpen}
fade={false}
toggle={this.toggleModal}>
<ModalHeader toggle={this.toggleModal}>
Add a blog
</ModalHeader>
<Form onSubmit={this.onSubmit}>
<ModalBody>
<FormGroup>
<Label htmlFor='title'>title</Label>
<Input
type='text'
id='title'
onChange={this.ontitleChange}
value={this.state.title}
name='title'
/>
</FormGroup>
<FormGroup>
<Label htmlFor='imageURL'>imageURL</Label>
<Input
type='text'
id='imageURL'
onChange={this.onimgChange}
value={this.state.image}
name='imageURL'
/>
</FormGroup>
<FormGroup>
<Label htmlFor='body'>body</Label>
<Input
type='textarea'
id='body'
onChange={this.onbodyChange}
value={this.state.body}
name='body'
/>
</FormGroup>
</ModalBody>
<ModalFooter>
<Button
type='submit'
value='submit'
color='primary'>
UPDATE BLOG
</Button>
</ModalFooter>
</Form>
</Modal>
</div>
);
}
Example #16
| Source File: edit.js From hivemind with Apache License 2.0 | 4 votes |
|
PopperCard = ({ el, poppers }) => {
const data = el.data()
const [coll] = data.id.split('/')
const { user } = useUser()
const [title, setTitle] = useState(data.title)
const [summary, setSummary] = useState(data.summary || '')
const [content, setContent] = useState(data.content || '')
const [audio, setAudio] = useState(data.audio || '')
const [spinnerDisplay, setSpinnerDisplay] = useState('d-none')
const inputRef = useRef(null)
useEffect(() => {
if (inputRef.current) {
inputRef.current.focus()
}
}, [])
const handleSubmit = async (event) => {
event.preventDefault()
setSpinnerDisplay('d-block')
const rootId = el.cy().nodes().id()
const key = rootId.split('/')[1]
const { ok, data: result, status } = await fetcher(
`/api/${coll}`,
user.token,
'PATCH',
JSON.stringify({
title,
summary,
content,
audio,
_id: data.id,
_rev: data._rev,
})
)
const options = {
place: 'tr',
autoDismiss: 7,
}
if (ok) {
mutate([`/api/timeline/events?key=${key}`, user.token], null, true)
mutate([`/api/mindmaps/${key}?timestamp=`, user.token], null, true)
options.message = 'Updated node!'
options.type = 'success'
} else {
options.message = `Failed to update node! - ${JSON.stringify(
result || status
)}`
options.type = 'danger'
}
if (window.notify) {
window.notify(options)
}
setSpinnerDisplay('d-none')
removePopper(el.id(), `popper-${el.id()}`, poppers)
}
const getChangeHandler = (setter) => (event) => setter(event.target.value)
return (
<Card className="border-dark">
<CardBody>
<CardTitle
tag="h5"
className="mw-100 mb-4"
style={{ minWidth: '50vw' }}
>
Edit {data.title}
<CloseButton
divKey={`popper-${el.id()}`}
popperKey={el.id()}
poppers={poppers}
/>
</CardTitle>
<CardText tag="div">
<Form onSubmit={handleSubmit}>
<FormGroup>
<Label for="title">Title</Label>
<Input
type="text"
name="title"
id="title"
value={title}
required
maxLength="50"
autoComplete="off"
onChange={getChangeHandler(setTitle)}
innerRef={inputRef}
/>
</FormGroup>
<FormGroup>
<Label for="summary">Summary</Label>
<Input
type="text"
name="summary"
id="summary"
value={summary}
maxLength="100"
autoComplete="off"
onChange={getChangeHandler(setSummary)}
/>
</FormGroup>
<FormGroup>
<Label for="summary">Content</Label>
<Input
type="textarea"
name="content"
id="content"
value={content}
onChange={getChangeHandler(setContent)}
/>
</FormGroup>
<FormGroup>
<Label for="audio">Audio (URL)</Label>
<Input
type="url"
name="audio"
id="audio"
value={audio}
maxLength="2048"
autoComplete="off"
onChange={getChangeHandler(setAudio)}
/>
</FormGroup>
<Row form>
<Col xs={'auto'}>
<FormGroup>
<Button color="primary">
<Save /> Save
</Button>
</FormGroup>
</Col>
<Col xs={'auto'}>
<FormGroup>
<Spinner className={spinnerDisplay} />
</FormGroup>
</Col>
</Row>
</Form>
</CardText>
</CardBody>
</Card>
)
}
Example #17
| 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 #18
| Source File: Dashboard.js From light-blue-react-template with MIT License | 4 votes |
|
render() {
return (
<div className={s.root}>
<h1 className="page-title">
Dashboard
<small>
<small>The Lucky One</small>
</small>
</h1>
<Row>
<Col lg={7}>
<Widget className="bg-transparent">
<Map />
</Widget>
</Col>
<Col lg={1} />
<Col lg={4}>
<Widget
className="bg-transparent"
title={
<h5>
{" "}
Map
<span className="fw-semi-bold"> Statistics</span>
</h5>
}
settings
refresh
close
>
<p>
Status: <strong>Live</strong>
</p>
<p>
<span className="circle bg-default text-white">
<i className="fa fa-map-marker" />
</span>{" "}
146 Countries, 2759 Cities
</p>
<div className="row progress-stats">
<div className="col-md-9 col-12">
<h6 className="name fw-semi-bold">Foreign Visits</h6>
<p className="description deemphasize mb-xs text-white">
Some Cool Text
</p>
<Progress
color="primary"
value="60"
className="bg-subtle-blue progress-xs"
/>
</div>
<div className="col-md-3 col-12 text-center">
<span className="status rounded rounded-lg bg-default text-light">
<small>
<AnimateNumber value={75} />%
</small>
</span>
</div>
</div>
<div className="row progress-stats">
<div className="col-md-9 col-12">
<h6 className="name fw-semi-bold">Local Visits</h6>
<p className="description deemphasize mb-xs text-white">
P. to C. Conversion
</p>
<Progress
color="danger"
value="39"
className="bg-subtle-blue progress-xs"
/>
</div>
<div className="col-md-3 col-12 text-center">
<span className="status rounded rounded-lg bg-default text-light">
<small>
<AnimateNumber value={84} />%
</small>
</span>
</div>
</div>
<div className="row progress-stats">
<div className="col-md-9 col-12">
<h6 className="name fw-semi-bold">Sound Frequencies</h6>
<p className="description deemphasize mb-xs text-white">
Average Bitrate
</p>
<Progress
color="success"
value="80"
className="bg-subtle-blue progress-xs"
/>
</div>
<div className="col-md-3 col-12 text-center">
<span className="status rounded rounded-lg bg-default text-light">
<small>
<AnimateNumber value={92} />%
</small>
</span>
</div>
</div>
<h6 className="fw-semi-bold mt">Map Distributions</h6>
<p>
Tracking: <strong>Active</strong>
</p>
<p>
<span className="circle bg-default text-white">
<i className="fa fa-cog" />
</span>
391 elements installed, 84 sets
</p>
<div className="input-group mt">
<input
type="text"
className="form-control bg-custom-dark border-0"
placeholder="Search Map"
/>
<span className="input-group-btn">
<button
type="submit"
className={`btn btn-subtle-blue ${s.searchBtn}`}
>
<i className="fa fa-search text-light" />
</button>
</span>
</div>
</Widget>
</Col>
</Row>
<Row>
<Col lg={6} xl={4} xs={12}>
<Widget title={<h6> USERBASE GROWTH </h6>} close settings>
<div className="stats-row">
<div className="stat-item">
<h6 className="name">Overall Growth</h6>
<p className="value">76.38%</p>
</div>
<div className="stat-item">
<h6 className="name">Montly</h6>
<p className="value">10.38%</p>
</div>
<div className="stat-item">
<h6 className="name">24h</h6>
<p className="value">3.38%</p>
</div>
</div>
<Progress
color="success"
value="60"
className="bg-subtle-blue progress-xs"
/>
<p>
<small>
<span className="circle bg-default text-white mr-2">
<i className="fa fa-chevron-up" />
</span>
</small>
<span className="fw-semi-bold"> 17% higher</span>
than last month
</p>
</Widget>
</Col>
<Col lg={6} xl={4} xs={12}>
<Widget title={<h6> TRAFFIC VALUES </h6>} close settings>
<div className="stats-row">
<div className="stat-item">
<h6 className="name">Overall Values</h6>
<p className="value">17 567 318</p>
</div>
<div className="stat-item">
<h6 className="name">Montly</h6>
<p className="value">55 120</p>
</div>
<div className="stat-item">
<h6 className="name">24h</h6>
<p className="value">9 695</p>
</div>
</div>
<Progress
color="danger"
value="60"
className="bg-subtle-blue progress-xs"
/>
<p>
<small>
<span className="circle bg-default text-white mr-2">
<i className="fa fa-chevron-down" />
</span>
</small>
<span className="fw-semi-bold"> 8% lower</span>
than last month
</p>
</Widget>
</Col>
<Col lg={6} xl={4} xs={12}>
<Widget title={<h6> RANDOM VALUES </h6>} close settings>
<div className="stats-row">
<div className="stat-item">
<h6 className="name fs-sm">Overcome T.</h6>
<p className="value">104.85%</p>
</div>
<div className="stat-item">
<h6 className="name fs-sm">Takeoff Angle</h6>
<p className="value">14.29°</p>
</div>
<div className="stat-item">
<h6 className="name fs-sm">World Pop.</h6>
<p className="value">7,211M</p>
</div>
</div>
<Progress
color="bg-primary"
value="60"
className="bg-subtle-blue progress-xs"
/>
<p>
<small>
<span className="circle bg-default text-white mr-2">
<i className="fa fa-plus" />
</span>
</small>
<span className="fw-semi-bold"> 8 734 higher</span>
than last month
</p>
</Widget>
</Col>
</Row>
<Row>
<Col lg={4} xs={12}>
<Widget
title={
<h6>
<span className="badge badge-success mr-2">New</span> Messages
</h6>
}
refresh
close
>
<div className="widget-body undo_padding">
<div className="list-group list-group-lg">
<button className="list-group-item text-left">
<span className="thumb-sm float-left mr">
<img
className="rounded-circle"
src={peopleA2}
alt="..."
/>
<i className="status status-bottom bg-success" />
</span>
<div>
<h6 className="m-0">Chris Gray</h6>
<p className="help-block text-ellipsis m-0">
Hey! What's up? So many times since we
</p>
</div>
</button>
<button className="list-group-item text-left">
<span className="thumb-sm float-left mr">
<img
className="rounded-circle"
src={peopleA4}
alt="..."
/>
<i className="status status-bottom bg-success" />
</span>
<div>
<h6 className="m-0">Jamey Brownlow</h6>
<p className="help-block text-ellipsis m-0">
Good news coming tonight. Seems they agreed to proceed
</p>
</div>
</button>
<button className="list-group-item text-left">
<span className="thumb-sm float-left mr">
<img
className="rounded-circle"
src={peopleA1}
alt="..."
/>
<i className="status status-bottom bg-primary" />
</span>
<div>
<h6 className="m-0">Livia Walsh</h6>
<p className="help-block text-ellipsis m-0">
Check my latest email plz!
</p>
</div>
</button>
<button className="list-group-item text-left">
<span className="thumb-sm float-left mr">
<img
className="rounded-circle"
src={peopleA5}
alt="..."
/>
<i className="status status-bottom bg-danger" />
</span>
<div>
<h6 className="m-0">Jaron Fitzroy</h6>
<p className="help-block text-ellipsis m-0">
What about summer break?
</p>
</div>
</button>
</div>
</div>
<footer className="bg-widget-transparent mt">
<input
type="search"
className="form-control form-control-sm bg-custom-dark border-0"
placeholder="Search"
/>
</footer>
</Widget>
</Col>
<Col lg={4} xs={12}>
<Widget
title={
<h6>
{" "}
Market <span className="fw-semi-bold">Stats</span>
</h6>
}
close
>
<div className="widget-body">
<h3>$720 Earned</h3>
<p className="fs-mini text-muted mb mt-sm">
Target <span className="fw-semi-bold">$820</span> day earnings
is <span className="fw-semi-bold">96%</span> reached.
</p>
</div>
<div className={`widget-table-overflow ${s.table}`}>
<Table striped size="sm">
<thead className="no-bd">
<tr>
<th>
<div className="checkbox abc-checkbox">
<Input
className="mt-0"
id="checkbox210"
type="checkbox"
onClick={() => this.checkTable(0)}
checked={this.state.checkedArr[0]}
readOnly
/>{" "}
<Label for="checkbox210" />
</div>
</th>
<th> </th>
<th> </th>
</tr>
</thead>
<tbody>
<tr>
<td>
<div className="checkbox abc-checkbox">
<Input
className="mt-0"
id="checkbox212"
type="checkbox"
onClick={() => this.checkTable(1)}
checked={this.state.checkedArr[1]}
readOnly
/>{" "}
<Label for="checkbox212" />
</div>
</td>
<td>HP Core i7</td>
<td className="text-align-right fw-semi-bold">$346.1</td>
</tr>
<tr>
<td>
<div className="checkbox abc-checkbox">
<Input
className="mt-0"
id="checkbox214"
onClick={() => this.checkTable(2)}
type="checkbox"
checked={this.state.checkedArr[2]}
readOnly
/>{" "}
<Label for="checkbox214" />
</div>
</td>
<td>Air Pro</td>
<td className="text-align-right fw-semi-bold">$533.1</td>
</tr>
</tbody>
</Table>
</div>
<div
className="widget-body mt-xlg chart-overflow-bottom"
style={{ height: "100px" }}
>
<Rickshaw height={100} />
</div>
</Widget>
</Col>
<Col lg={4} xs={12}>
<Widget
title={<h6>Calendar</h6>}
settings
close
bodyClass={"pt-2 px-0 py-0"}
>
<Calendar />
<div className="list-group fs-mini">
<button className="list-group-item text-ellipsis">
<span className="badge badge-pill badge-primary float-right">
6:45
</span>
Weed out the flower bed
</button>
<button className="list-group-item text-ellipsis">
<span className="badge badge-pill badge-success float-right">
9:41
</span>
Stop world water pollution
</button>
</div>
</Widget>
</Col>
</Row>
</div>
);
}
Example #19
| Source File: Tables.js From sofia-react-template with MIT License | 4 votes |
|
Tables = function () {
const [dropdownOpen, setDropdownOpen] = useState(false);
const [firstTable] = useState(mock.firstTable);
const [secondTable] = useState(mock.secondTable);
const [transactions, setTransactions] = useState(mock.transactionsWidget);
const [tasks, setTasks] = useState(mock.tasksWidget);
const [firstTableCurrentPage, setFirstTableCurrentPage] = useState(0);
const [secondTableCurrentPage, setSecondTableCurrentPage] = useState(0);
const [tableDropdownOpen, setTableMenuOpen] = useState(false);
const pageSize = 4;
const firstTablePagesCount = Math.ceil(firstTable.length / pageSize);
const secondTablePagesCount = Math.ceil(secondTable.length / pageSize);
const setFirstTablePage = (e, index) => {
e.preventDefault();
setFirstTableCurrentPage(index);
}
const setSecondTablePage = (e, index) => {
e.preventDefault();
setSecondTableCurrentPage(index);
}
const toggle = () => {
setDropdownOpen(!dropdownOpen);
}
const transactionMenuOpen = (id) => {
setTransactions(
transactions.map( transaction => {
if (transaction.id === id) {
transaction.dropdownOpen = !transaction.dropdownOpen;
}
return transaction;
})
)
}
const tableMenuOpen = () => {
setTableMenuOpen(!tableDropdownOpen);
}
const toggleTask = (id) => {
setTasks(
tasks.map( task => {
if (task.id === id) {
task.completed = !task.completed;
}
return task;
})
)
}
return (
<div>
<Row>
<Col>
<Row className="mb-4">
<Col>
<Widget>
<div className={s.tableTitle}>
<div className="headline-2">States Colors</div>
<div className="d-flex">
<a href="/#"><img src={searchIcon} alt="Search"/></a>
<a href="/#"><img className="d-none d-sm-block" src={cloudIcon} alt="Cloud" /></a>
<a href="/#"><img src={printerIcon} alt="Printer" /></a>
<a href="/#"><img className="d-none d-sm-block" src={optionsIcon} alt="Options" /></a>
<a href="/#"><img src={funnelIcon} alt="Funnel" /></a>
</div>
</div>
<div className="widget-table-overflow">
<Table className={`table-striped table-borderless table-hover ${s.statesTable}`} responsive>
<thead>
<tr>
<th className={s.checkboxCol}>
<div className="checkbox checkbox-primary">
<input
className="styled"
id="checkbox100"
type="checkbox"
/>
<label for="checkbox100"/>
</div>
</th>
<th className="w-25">NAME</th>
<th className="w-25">COMPANY</th>
<th className="w-25">CITY</th>
<th className="w-25">STATE</th>
</tr>
</thead>
<tbody>
{firstTable
.slice(
firstTableCurrentPage * pageSize,
(firstTableCurrentPage + 1) * pageSize
)
.map(item => (
<tr key={uuidv4()}>
<td>
<div className="checkbox checkbox-primary">
<input
id={item.id}
className="styled"
type="checkbox"
/>
<Label for={item.id} />
</div>
</td>
<td className="d-flex align-items-center"><img className={s.image} src={item.img} alt="User"/><span className="ml-3">{item.name}</span></td>
<td>{item.company}</td>
<td>{item.city}</td>
<td>{item.state}</td>
</tr>
))}
</tbody>
</Table>
<Pagination className="pagination-borderless" aria-label="Page navigation example">
<PaginationItem disabled={firstTableCurrentPage <= 0}>
<PaginationLink
onClick={e => setFirstTablePage(e, firstTableCurrentPage - 1)}
previous
href="#top"
/>
</PaginationItem>
{[...Array(firstTablePagesCount)].map((page, i) =>
<PaginationItem active={i === firstTableCurrentPage} key={i}>
<PaginationLink onClick={e => setFirstTablePage(e, i)} href="#top">
{i + 1}
</PaginationLink>
</PaginationItem>
)}
<PaginationItem disabled={firstTableCurrentPage >= firstTablePagesCount - 1}>
<PaginationLink
onClick={e => setFirstTablePage(e, firstTableCurrentPage + 1)}
next
href="#top"
/>
</PaginationItem>
</Pagination>
</div>
</Widget>
</Col>
</Row>
<Row className="mb-4">
<Col>
<Widget>
<div className={s.tableTitle}>
<div className="headline-2">Material UI table</div>
<Dropdown
className="d-none d-sm-block"
nav
isOpen={tableDropdownOpen}
toggle={() => tableMenuOpen()}
>
<DropdownToggle nav>
<img className="d-none d-sm-block" src={moreIcon} alt="More..."/>
</DropdownToggle>
<DropdownMenu >
<DropdownItem>
<div>Copy</div>
</DropdownItem>
<DropdownItem>
<div>Edit</div>
</DropdownItem>
<DropdownItem>
<div>Delete</div>
</DropdownItem>
</DropdownMenu>
</Dropdown>
</div>
<div className="widget-table-overflow">
<Table className="table-striped table-borderless table-hover" responsive>
<thead>
<tr>
<th>
<div className="checkbox checkbox-primary">
<input
id="checkbox200"
className="styled"
type="checkbox"
/>
<label for="checkbox200"/>
</div>
</th>
<th className={s.nameCol}>NAME</th>
<th>EMAIL</th>
<th>PRODUCT</th>
<th>PRICE</th>
<th>DATE</th>
<th>CITY</th>
<th>STATUS</th>
</tr>
</thead>
<tbody>
{secondTable
.slice(
secondTableCurrentPage * pageSize,
(secondTableCurrentPage + 1) * pageSize
)
.map(item => (
<tr key={uuidv4()}>
<td>
<div className="checkbox checkbox-primary">
<input
id={item.id}
className="styled"
type="checkbox"
/>
<label for={item.id} />
</div>
</td>
<td>{item.name}</td>
<td>{item.email}</td>
<td>{item.product}</td>
<td>{item.price}</td>
<td>{item.date}</td>
<td>{item.city}</td>
<td><Badge color={item.color}>{item.status}</Badge></td>
</tr>
))}
</tbody>
</Table>
<Pagination className="pagination-with-border">
<PaginationItem disabled={secondTableCurrentPage <= 0}>
<PaginationLink
onClick={e => setSecondTablePage(e, secondTableCurrentPage - 1)}
previous
href="#top"
/>
</PaginationItem>
{[...Array(secondTablePagesCount)].map((page, i) =>
<PaginationItem active={i === secondTableCurrentPage} key={i}>
<PaginationLink onClick={e => setSecondTablePage(e, i)} href="#top">
{i + 1}
</PaginationLink>
</PaginationItem>
)}
<PaginationItem disabled={secondTableCurrentPage >= secondTablePagesCount - 1}>
<PaginationLink
onClick={e => setSecondTablePage(e, secondTableCurrentPage + 1)}
next
href="#top"
/>
</PaginationItem>
</Pagination>
</div>
</Widget>
</Col>
</Row>
<Row>
<Col xs={12} xl={8} className="pr-grid-col">
<Widget>
<div className={s.tableTitle}>
<div className="headline-2">Recent transaction</div>
<div>
<ButtonDropdown
isOpen={dropdownOpen}
toggle={toggle}
className=""
>
<DropdownToggle caret>
Weekly
</DropdownToggle>
<DropdownMenu>
<DropdownItem>Daily</DropdownItem>
<DropdownItem>Weekly</DropdownItem>
<DropdownItem>Monthly</DropdownItem>
</DropdownMenu>
</ButtonDropdown>
{/*<img src="" alt="Filter option"/>*/}
</div>
</div>
<div className={s.widgetContentBlock}>
{transactions.map(item => (
<div key={uuidv4()} className={s.content}>
<div><img src={item.icon} alt="Item" /><span className="body-2 ml-3">{item.category}</span></div>
<div className="body-3 muted d-none d-md-block">{item.date}</div>
<div className="body-2">{item.price}</div>
<div className="body-3 muted d-none d-lg-block">{item.description}</div>
<Dropdown
className="d-none d-sm-block"
nav
isOpen={item.dropdownOpen}
toggle={() => transactionMenuOpen(item.id)}
>
<DropdownToggle nav>
<img className="d-none d-sm-block" src={moreIcon} alt="More ..."/>
</DropdownToggle>
<DropdownMenu >
<DropdownItem>
<div>Copy</div>
</DropdownItem>
<DropdownItem>
<div>Edit</div>
</DropdownItem>
<DropdownItem>
<div>Delete</div>
</DropdownItem>
</DropdownMenu>
</Dropdown>
</div>
))}
</div>
</Widget>
</Col>
<Col xs={12} xl={4} className="pl-grid-col mt-4 mt-xl-0">
<Widget>
<div className={s.tableTitle}>
<div className="headline-2">Tasks</div>
</div>
<div className={s.widgetContentBlock}>
<TaskContainer tasks={tasks} toggleTask={toggleTask} />
</div>
</Widget>
</Col>
</Row>
</Col>
</Row>
</div>
)
}
Example #20
| Source File: Rightbar.js From gedge-platform with Apache License 2.0 | 4 votes |
|
render() {
return (
<React.Fragment>
<div className="right-bar">
<SimpleBar style={{ height: "900px" }}>
<div data-simplebar className="h-100">
<div className="rightbar-title px-3 py-4">
<Link to="#" onClick={this.hideRightbar} className="right-bar-toggle float-right">
<i className="mdi mdi-close noti-icon"></i>
</Link>
<h5 className="m-0">Settings</h5>
</div>
<hr className="my-0" />
<div className="p-4">
<div className="radio-toolbar">
<span className="mb-2 d-block">Layouts</span>
<Input
type="radio"
id="radioVertical"
name="radioFruit"
value="vertical"
checked={this.state.layoutType === "vertical"}
onChange={this.changeLayout}
/>
<Label htmlFor="radioVertical">Vertical</Label>
{" "}
<Input
type="radio"
id="radioHorizontal"
name="radioFruit"
value="horizontal"
checked={this.state.layoutType === "horizontal"}
onChange={this.changeLayout}
/>
<Label htmlFor="radioHorizontal">Horizontal</Label>
</div>
<hr className="mt-1" />
<div className="radio-toolbar">
<span className="mb-2 d-block" id="radio-title">
Layout Width
</span>
<Input
type="radio"
id="radioFluid"
name="radioWidth"
value="fluid"
checked={this.state.layoutWidth !== "boxed"}
onChange={this.changeLayoutWidth}
/>
<Label htmlFor="radioFluid">Fluid</Label>
{" "}
<Input
type="radio"
id="radioBoxed"
name="radioWidth"
value="boxed"
checked={this.state.layoutWidth === "boxed"}
onChange={this.changeLayoutWidth}
/>
<Label htmlFor="radioBoxed">Boxed</Label>
</div>
<hr className="mt-1" />
<div className="radio-toolbar">
<span className="mb-2 d-block" id="radio-title">
Topbar Theme
</span>
<Input
type="radio"
id="radioThemeLight"
name="radioTheme"
value="light"
checked={this.state.topbarTheme === "light"}
onChange={this.changeTopbarTheme}
/>
<Label htmlFor="radioThemeLight">Light</Label>
{" "}
<Input
type="radio"
id="radioThemeDark"
name="radioTheme"
value="dark"
checked={this.state.topbarTheme === "dark"}
onChange={this.changeTopbarTheme}
/>
<Label htmlFor="radioThemeDark">Dark</Label>
{" "}
</div>
{this.state.layoutType === "vertical" ? (
<React.Fragment>
<hr className="mt-1" />
<div className="radio-toolbar">
<span className="mb-2 d-block" id="radio-title">
Left Sidebar Type
</span>
<Input
type="radio"
id="sidebarDefault"
name="sidebarType"
value="default"
checked={this.state.sidebarType === "default"}
onChange={this.changeLeftSidebarType}
/>
<Label htmlFor="sidebarDefault">Default</Label>
{" "}
<Input
type="radio"
id="sidebarCompact"
name="sidebarType"
value="compact"
checked={this.state.sidebarType === "compact"}
onChange={this.changeLeftSidebarType}
/>
<Label htmlFor="sidebarCompact">Compact</Label>
{" "}
<Input
type="radio"
id="sidebarIcon"
name="sidebarType"
value="icon"
checked={this.state.sidebarType === "icon"}
onChange={this.changeLeftSidebarType}
/>
<Label htmlFor="sidebarIcon">Icon</Label>
</div>
<hr className="mt-1" />
<div className="radio-toolbar">
<span className="mb-2 d-block" id="radio-title">
Left Sidebar Type
</span>
<Input
type="radio"
id="leftsidebarThemelight"
name="leftsidebarTheme"
value="light"
checked={this.state.sidebarTheme === "light"}
onChange={this.changeLeftSidebarTheme}
/>
<Label htmlFor="leftsidebarThemelight">Light</Label>
{" "}
<Input
type="radio"
id="leftsidebarThemedark"
name="leftsidebarTheme"
value="dark"
checked={this.state.sidebarTheme === "dark"}
onChange={this.changeLeftSidebarTheme}
/>
<Label htmlFor="leftsidebarThemedark">Dark</Label>
{" "}
<Input
type="radio"
id="leftsidebarThemecolored"
name="leftsidebarTheme"
value="colored"
checked={this.state.sidebarTheme === "colored"}
onChange={this.changeLeftSidebarTheme}
/>
<Label htmlFor="leftsidebarThemecolored">Colored</Label>
</div>
<hr className="mt-1" />
</React.Fragment>
) : null}
<FormGroup>
<span className="mb-2 d-block" id="radio-title">
Preloader
</span>
<div className="custom-control custom-switch">
<Input
type="checkbox"
className="custom-control-input checkbox"
id="checkbox_1"
checked={this.props.isPreloader}
onChange={this.changeThemePreloader}
/>
<Label
className="custom-control-label"
htmlFor="checkbox_1"
>
Preloader
</Label>
</div>
</FormGroup>
<h6 className="text-center">Choose Layouts</h6>
<div className="mb-2">
<Link to="//skote-v-light.react.themesbrand.com" target="_blank">
<img
src={layout1}
className="img-fluid img-thumbnail"
alt=""
/>
</Link>
</div>
<div className="mb-2">
<Link to="//skote-v-dark.react.themesbrand.com" target="_blank">
<img
src={layout2}
className="img-fluid img-thumbnail"
alt=""
/>
</Link>
</div>
<div className="mb-2">
<Link to="//skote-v-rtl.react.themesbrand.com" target="_blank">
<img
src={layout3}
className="img-fluid img-thumbnail"
alt=""
/>
</Link>
</div>
<Link to="#" className="btn btn-primary btn-block mt-3" target="_blank">
<i className="mdi mdi-cart mr-1"></i> Purchase Now
</Link>
</div>
</div>
</SimpleBar>
</div>
<div className="rightbar-overlay"></div>
</React.Fragment>
);
}
Example #21
| Source File: index.js From gobench with Apache License 2.0 | 4 votes |
|
render() {
return (
<div>
<h5 className="mb-4">
<strong>Default Form</strong>
</h5>
<div className="mb-5">
<Form>
<FormGroup>
<Label for="exampleEmail">Email</Label>
<Input type="email" name="email" id="exampleEmail" placeholder="with a placeholder" />
</FormGroup>
<FormGroup>
<Label for="examplePassword">Password</Label>
<Input
type="password"
name="password"
id="examplePassword"
placeholder="password placeholder"
/>
</FormGroup>
<FormGroup>
<Label for="exampleSelect">Select</Label>
<Input type="select" name="select" id="exampleSelect">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</Input>
</FormGroup>
<FormGroup>
<Label for="exampleSelectMulti">Select Multiple</Label>
<Input type="select" name="selectMulti" id="exampleSelectMulti" multiple>
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</Input>
</FormGroup>
<FormGroup>
<Label for="exampleText">Text Area</Label>
<Input type="textarea" name="text" id="exampleText" />
</FormGroup>
<FormGroup>
<Label for="exampleFile">File</Label>
<Input type="file" name="file" id="exampleFile" />
<FormText color="muted">
This is some placeholder block-level help text for the above input. Its a bit
lighter and easily wraps to a new line.
</FormText>
</FormGroup>
<FormGroup tag="fieldset">
<FormGroup check>
<Label check className="kit__utils__control kit__utils__control__radio">
<Input type="radio" name="radio2" checked />
<span className="kit__utils__control__indicator" />
Option one is this and that—be sure to include why its great
</Label>
</FormGroup>
<FormGroup check>
<Label check className="kit__utils__control kit__utils__control__radio">
<Input type="radio" name="radio2" />
<span className="kit__utils__control__indicator" />
Option two can be something else and selecting it will deselect option one
</Label>
</FormGroup>
<FormGroup check disabled>
<Label check className="kit__utils__control kit__utils__control__radio">
<Input type="radio" name="radio2" disabled />
<span className="kit__utils__control__indicator" />
Option three is disabled
</Label>
</FormGroup>
</FormGroup>
<FormGroup check>
<Label check className="kit__utils__control kit__utils__control__checkbox">
<Input type="checkbox" id="checkbox2" />
<span className="kit__utils__control__indicator" />
Check me out
</Label>
</FormGroup>
<div className="border-top mt-4 pt-4">
<Button color="primary" className="px-5">
Submit
</Button>
</div>
</Form>
</div>
<h5 className="mb-4">
<strong>Horizontal Form</strong>
</h5>
<div className="mb-5">
<Form>
<FormGroup row>
<Label for="exampleEmail" sm={2}>
Email
</Label>
<Col sm={10}>
<Input
type="email"
name="email"
id="exampleEmail"
placeholder="with a placeholder"
/>
</Col>
</FormGroup>
<FormGroup row>
<Label for="examplePassword" sm={2}>
Password
</Label>
<Col sm={10}>
<Input
type="password"
name="password"
id="examplePassword"
placeholder="password placeholder"
/>
</Col>
</FormGroup>
<FormGroup row>
<Label for="exampleSelect" sm={2}>
Select
</Label>
<Col sm={10}>
<Input type="select" name="select" id="exampleSelect" />
</Col>
</FormGroup>
<FormGroup row>
<Label for="exampleSelectMulti" sm={2}>
Select Multiple
</Label>
<Col sm={10}>
<Input type="select" name="selectMulti" id="exampleSelectMulti" multiple />
</Col>
</FormGroup>
<FormGroup row>
<Label for="exampleText" sm={2}>
Text Area
</Label>
<Col sm={10}>
<Input type="textarea" name="text" id="exampleText" />
</Col>
</FormGroup>
<FormGroup row>
<Label for="exampleFile" sm={2}>
File
</Label>
<Col sm={10}>
<Input type="file" name="file" id="exampleFile" />
<FormText color="muted">
This is some placeholder block-level help text for the above input. Its a bit
lighter and easily wraps to a new line.
</FormText>
</Col>
</FormGroup>
<FormGroup row>
<div className="col-sm-2">
<legend className="col-form-label">Radio Buttons</legend>
</div>
<Col sm={10}>
<FormGroup check>
<Label check className="kit__utils__control kit__utils__control__radio">
<Input type="radio" name="radio2" checked />
<span className="kit__utils__control__indicator" />
Option one is this and that—be sure to include why its great
</Label>
</FormGroup>
<FormGroup check>
<Label check className="kit__utils__control kit__utils__control__radio">
<Input type="radio" name="radio2" />
<span className="kit__utils__control__indicator" />
Option two can be something else and selecting it will deselect option one
</Label>
</FormGroup>
<FormGroup check disabled>
<Label check className="kit__utils__control kit__utils__control__radio">
<Input type="radio" name="radio2" disabled />
<span className="kit__utils__control__indicator" />
Option three is disabled
</Label>
</FormGroup>
</Col>
</FormGroup>
<FormGroup row>
<Label for="checkbox2" sm={2}>
Checkbox
</Label>
<Col sm={{ size: 10 }}>
<FormGroup check>
<Label check className="kit__utils__control kit__utils__control__checkbox">
<Input type="checkbox" id="checkbox2" />
<span className="kit__utils__control__indicator" />
Check me out
</Label>
</FormGroup>
</Col>
</FormGroup>
<div className="border-top mt-4 pt-4">
<FormGroup check row>
<Col sm={{ size: 10, offset: 2 }}>
<Button color="primary" className="px-5">
Submit
</Button>
</Col>
</FormGroup>
</div>
</Form>
</div>
</div>
)
}
Example #22
| Source File: index.js From mern-course-bootcamp with MIT License | 4 votes |
|
export default function EventsPage() {
const [title, setTitle] = useState('')
const [description, setDescription] = useState('')
const [price, setPrice] = useState('')
const [thumbnail, setThumbnail] = useState(null)
const [sport, setSport] = useState('')
const [date, setDate] = useState('')
const [errorMessage, setErrorMessage] = useState(false)
const preview = useMemo(() => {
return thumbnail ? URL.createObjectURL(thumbnail) : null;
}, [thumbnail])
console.log(title, description, price, sport)
const submitHandler = async (evt) => {
evt.preventDefault()
const user_id = localStorage.getItem('user');
const eventData = new FormData();
eventData.append("thumbnail", thumbnail)
eventData.append("sport", sport)
eventData.append("title", title)
eventData.append("price", price)
eventData.append("description", description)
eventData.append("date", date)
try {
if (title !== "" &&
description !== "" &&
price !== "" &&
sport !== "" &&
date !== "" &&
thumbnail !== null
) {
console.log("Event has been sent")
await api.post("/event", eventData, { headers: { user_id } })
console.log(eventData)
console.log("Event has been saved")
} else {
setErrorMessage(true)
setTimeout(() => {
setErrorMessage(false)
}, 2000)
console.log("Missing required data")
}
} catch (error) {
Promise.reject(error);
console.log(error);
}
}
return (
<Container>
<h2>Create your Event</h2>
<Form onSubmit={submitHandler}>
<FormGroup>
<Label>Upload Image: </Label>
<Label id='thumbnail' style={{ backgroundImage: `url(${preview})` }} className={thumbnail ? 'has-thumbnail' : ''}>
<Input type="file" onChange={evt => setThumbnail(evt.target.files[0])} />
<img src={cameraIcon} style={{ maxWidth: "50px" }} alt="upload icon image" />
</Label>
</FormGroup>
<FormGroup>
<Label>Sport: </Label>
<Input id="sport" type="text" value={sport} placeholder={'Sport name'} onChange={(evt) => setSport(evt.target.value)} />
</FormGroup>
<FormGroup>
<Label>Title: </Label>
<Input id="title" type="text" value={title} placeholder={'Event Title'} onChange={(evt) => setTitle(evt.target.value)} />
</FormGroup>
<FormGroup>
<Label>Event description: </Label>
<Input id="description" type="text" value={description} placeholder={'Event Description'} onChange={(evt) => setDescription(evt.target.value)} />
</FormGroup>
<FormGroup>
<Label>Event price: </Label>
<Input id="price" type="text" value={price} placeholder={'Event Price £0.00'} onChange={(evt) => setPrice(evt.target.value)} />
</FormGroup>
<FormGroup>
<Label>Event date: </Label>
<Input id="date" type="date" value={date} placeholder={'Event Price £0.00'} onChange={(evt) => setDate(evt.target.value)} />
</FormGroup>
<Button type="submit">
Create Event
</Button>
</Form>
{errorMessage ? (
<Alert className="event-validation" color="danger"> Missing required information</Alert>
) : ""}
</Container>
)
}
