I'm using InputGroup component from reactstrap inside a modal. In Desktop view it looks fine but Mobile view Like this:
Code:
<Row>
<Col xs='2'>
<span>Price(s)</span>
</Col>
<Col xs='10'>
<PriceInput
cats={this.state.cats}
/>
</Col>
</Row>
price input and description fields are add as another component , so i can add more than one price to it
PriceInput Code
<Row>
<Col xs='3'>
<InputGroup
className={'form-group'}>
<InputGroupAddon addonType="prepend">{props.symbol}
</InputGroupAddon>
<Input
type="text"
placeholder='0.00'/>
</InputGroup>
</Col>
<Col xs='7'>
<Input
type="text"
placeholder='description'/>
</Col>
<Col xs='2'>
<Button >
<i color={'red'}
className='zmdi zmdi-delete'>
</i>
</Button>
</Col>
</Row>
How can i set Price and Price symbol wrap together?
change your xs props to xl it will work
Related
I have to clear the Account field if I change the Partner field. How can I do this with the onSubmit event using Redux-form?
Example code:
<form onSubmit={handleSubmit}>
<BoxBlock>
<Row>
<Col md={3}>
<Field
name={FORM_FILTER_NAMES.PARTNER}
label="Partner"
placeholder="Choose a partner"
/>
</Col>
<Col md={3}>
<Field
component={MultiSelect}
name={FORM_FILTER_NAMES.ACCOUNT}
label="Account"
options={sortedAccounts}
placeholderOption="Choose account"
loaded={accountsLoaded}
isSearchable
/>
</Col>
</Row>
<div className="d-flex justify-content-between">
<Button
className="pull-right"
bsStyle="primary"
type="submit"
disabled={submitting || pristine}
>
Filter
</Button>
</div>
</BoxBlock>
</form>
I'm trying to create a feature that allows user to download pdf. I developed it using html2pdf.js + react. I manage to create the pdf content in tag but the content such as table, paragraph, etc. exceed the size of a4 paper, how can I fix this ?
here's my code:
{/*Create Invoice Preview */}
<Preview id={'invoice-template'} >
<h1>UD-SUPERJAYA </h1>
<p className="fontBold">Invoice #0178832</p>
<hr />
<Row>
<Col lg={6}>
<p className="fontBold">Invoiced to</p>
<p>Mdsada</p>
<p>Jalan Kalimantan No 29, Samarinda Kota, Kalimantan </p>
<p>Indonesia</p>
</Col>
<Col lg={6} className="text-end">
<p className="fontBold">Pay to</p>
<p>PT dsada</p> <br />
<p>NPWP: 94321310</p>
<p>No PKP: P330/W1PJ.131/9403129/KR0233129/99310</p>
<p>Tgl Pengukuhan: 17 Desember 2013</p>
<br/>
<p>Alamat:</p>
<p>Jalan Kalimantan No 29, US Kota, Jawa</p>
<p>Telp: 08322 3232 3212 </p>
</Col>
</Row>
<br />
<Row>
<Col lg={6}>
<p className="fontBold">Invoiced Date</p>
<p>16/10/2020</p>
</Col>
<Col lg={6} className="text-end">
<p className="fontBold">Payment Method</p>
<p>OVO</p>
</Col>
</Row>
</Preview>
<Row>
<Col lg={12} className="text-end fontMedium">
<Button onClick={()=>print('Invoice', 'invoice-template')} className="invoicebutton">Submit</Button>
</Col>
</Row>
I wanna download in PDF all my code inside my div in PDF . I tried a few possibilities but i always have a problem to do it .
This is what i need to download :
<div id="qrCodePdf" ref={ref}>
<Row className="backgroundTicket">
<Col>
<Row className="rowCode">
<Col>
<p className="titleName">
{localStorage.getItem("propsRestaurant")}
</p>
</Col>
<Col>
<div id="qrCodeDiv2" />
</Col>
<Col>
<img
src="/image/tipourboirePhrase.png"
className="tipPicture"
/>
</Col>
</Row>
</Col>
<Col>
<Row className="rowCode2">
<Col className="col2">
{" "}
<img src="/image/logoCode.png" className="tipPicture" />
</Col>
<Col className="col2">
<p>Juste pour un merci</p>
</Col>
</Row>
</Col>
</Row>
</div>
For the moment i used js pdf and HTML2Canvas but i always have error like ×
TypeError: Cannot read properties of null (reading 'toDataURL')
also my button
<button
className="buttonQrCode"
onClick={() => {
const canvas = document.querySelector("qrCodePdf canvas");
const image = canvas.toDataURL();
const element = document.createElement("a");
element.setAttribute("href", image);
element.setAttribute("download", "canvas.pdf");
document.body.appendChild(element);
element.click();
}}>
Télécharger le QR Code Ticket
</button>
import { exportComponentAsPDF } from "react-component-export-image";
<div id="qrCodePdf" ref={ref}>
<Row className="backgroundTicket">
<Col>
<Row className="rowCode">
<Col>
<p className="titleName">
{localStorage.getItem("propsRestaurant")}
</p>
</Col>
<Col>
<div id="qrCodeDiv2" />
</Col>
<Col>
<img
src="/image/tipourboirePhrase.png"
className="tipPicture"
/>
</Col>
</Row>
</Col>
<Col>
<Row className="rowCode2">
<Col className="col2">
{" "}
<img src="/image/logoCode.png" className="tipPicture" />
</Col>
<Col className="col2">
<p>Juste pour un merci</p>
</Col>
</Row>
</Col>
</Row>
</div>
<button
className="buttonQrCode"
onClick={() => {()=>exportComponentAsPDF(ref, { fileName: "FileName" })}>
Télécharger le QR Code Ticket
</button>
I am trying to use redux-form to build a credit card info form. However, when the user put in their card details on it, this pop up appear:
it said
Automatic credit card filling is disabled because this form does not use a secure connection
So my question is how to make a form secure using redux-form?
This is the code where I input the Payment redux-form
import React from 'react'
import { connect } from 'react-redux'
import PaymentView from './Payment.js'
import { reduxForm } from 'redux-form'
class Payment extends React.Component{
render() {
const { cardDetail } = this.props
return(<PaymentView onCheckOut={()=>console.log(cardDetail)} />)
}
}
Payment = reduxForm({
form: 'payment'
})(Payment)
const mapStateToProps = state => ({
cardDetail : state.form.payment ? state.form.payment.values : null
})
export default connect(mapStateToProps)(Payment)
This is the code for my Payment View
import React from 'react'
import { Panel, Button, Row, Col } from 'react-bootstrap'
import { TextInput } from '.Form'
export default ({onCheckOut})=> <div>
<Row>
<Col sm={12} md={8} lg={6} mdOffset={2} lgOffset={3}>
<Panel className="scb" header="bank transfer">
123-456-789
</Panel>
</Col>
</Row>
<Row>
<Col sm={12} md={8} mdOffset={2} lg={6} lgOffset={3}>
<Panel className="credit-card" header="credit card" >
<Row>
<Col sm={12} md={8} lg={6}>
<TextInput
name="creditCard"
label="credit card number"
type="text"
validateState="success"
controlId="credit-card"
value="12345678910111213"
placeholder="xxxx xxxx xxxx xxxx"
onChange={()=>{}}
helptext="16card number"
>
card number
</TextInput>
</Col>
</Row>
<Row>
<Col sm={12} md={8} lg={6}>
<TextInput
name="name"
label="name"
type="text"
validateState="success"
controlId="name-card"
value="steve jobs"
placeholder="steve jobs"
onChange={()=>{}}
helptext="name on card"
>
Name on Card
</TextInput>
</Col>
</Row>
<Row>
<Col sm={8} md={8} lg={8}>
<h5>Expiry Date</h5>
</Col>
</Row>
<Row>
<Col sm={4} md={2} lg={2}>
<TextInput
name="month"
label="month"
type="text"
validateState="success"
controlId="month"
value="12"
placeholder="01"
onChange={()=>{}}
helptext="month"
>
month
</TextInput>
</Col>
<Col sm={4} md={2} lg={2}>
<TextInput
name="year"
label="year"
type="text"
validateState="success"
controlId="year"
value="18"
placeholder="18"
onChange={()=>{}}
helptext="year"
>
Year
</TextInput>
</Col>
</Row>
<Row>
<Col sm={12} md={4} lg={4}>
<TextInput
name="cvv"
label="cvv"
type="text"
validateState="cvv"
controlId="cvv"
value="123"
placeholder="123"
onChange={()=>{}}
helptext="cvv"
>
Cvv
</TextInput>
</Col>
</Row>
<Row>
<Col sm={12} md={4} lg={4}>
<Button bsStyle="primary" bsSize="large" block onClick={onCheckOut}>
Pay Now
</Button>
</Col>
</Row>
</Panel>
</Col>
</Row>
</div>
This is my TextInput
export const TextInput = (
{
type,
name,
placeholder,
helpTextArray,
status,
label,
value
}
) =>
<FormGroup
name="formBasicText"
validationState={status || null}
>
<ControlLabel>{label}</ControlLabel>
<Field
className="form-control"
id="formBasicText"
name={name}
component="input"
type={type}
placeholder={placeholder}
/>
<FormControl.Feedback />
{
value !== null?
helpTextArray.map( (helpText, key) =>
<HelpBlock key={key}>{helpText}</HelpBlock>
): null
}
</FormGroup>
This is most likely happening because the web page where that form is found is not served over HTTPS. Chrome automatically disables credit card information autofilling in those cases to stop your credit card information from falling into malicious hands through for example
Network traffic snooping (your credit card details being transmitted over a public Wi-Fi or other network in plaintext)
Man-in-the-Middle injection (somebody intercepting the non-encrypted HTTP traffic and injecting malicious code that captures credit card details)
Even if your page is served over HTTPS already, this issue might pop up if your page has content like images or external scripts that are served over a regular HTTP connection.
You have this message maybe because you don't use a 'HTTPS' connexion and your navigator detect that and disabled auto-filling ?
I have a login model with the following login function:
login() {
console.log("Hello. It's Me")
axios.post('https://crossorigin.me/http://requestb.in/w21igbw2', {
firstName: 'Fred',
lastName: 'Flintstone'
})
.then(function (response) {
console.log(response);
//this.setState({ showModal: false });
})
.catch(function (error) {
console.log(error);
});
}
this is working fine, so how I do change this to send the actual data from the login form instead of just the hardcoded info in the function. The input in the login model this is what the full form looks like:
<form>
<FormGroup >
<Row>
<Col md={12}>
<input className="col-md-10 col-md-offset-1 top-space fat-input" placeholder="Email"/>
<input className="col-md-10 col-md-offset-1 top-space fat-input" placeholder="Password"/>
</Col>
</Row>
<Row className='top-space'>
<Col md={5} mdOffset={1}>
<Checkbox className="checkbox-login"> Remember Me </Checkbox>
</Col>
<Col md={6} className='forgot-password'>
Forgot Password
</Col>
</Row>
<Row className='top-space'>
<Col md={10} mdOffset={1}>
<Button onClick={this.login} bsStyle="btn btn-black btn-block">Login</Button>
</Col>
</Row>
</FormGroup>
</form>
You can keep track of inputs in you state and when you fire API read the values from the state.
constructor(){
super()
this.state = {
email : null,
password : null,
}
onChangeEmail(){
this.setState({email: e.target.value});
}
onChangePassword(){
this.setState({password: e.target.value});
}
login(){
//api call with state values for id and pass
}
render(){
<form>
<FormGroup >
<Row>
<Col md={12}>
<input className="col-md-10 col-md-offset-1 top-space fat-input" placeholder="Email" onChange={this.onChangeEmail}/>
<input className="col-md-10 col-md-offset-1 top-space fat-input" placeholder="Password" onChange={this.onChangePassword}/>
</Col>
</Row>
<Row className='top-space'>
<Col md={5} mdOffset={1}>
<Checkbox className="checkbox-login"> Remember Me </Checkbox>
</Col>
<Col md={6} className='forgot-password'>
Forgot Password
</Col>
</Row>
<Row className='top-space'>
<Col md={10} mdOffset={1}>
<Button onClick={this.login} bsStyle="btn btn-black btn-block">Login</Button>
</Col>
</Row>
</FormGroup>
</form>
}
}
P.S: I would strongly suggest using redux with react and using redux-form to handle you forms. It has been the best way I have found till now to handle forms in react-redux app. You can check it out here.