diff options
Diffstat (limited to 'src/components/Form')
-rw-r--r-- | src/components/Form/Form.scss | 24 | ||||
-rw-r--r-- | src/components/Form/Transport/TransportForm.tsx | 64 |
2 files changed, 56 insertions, 32 deletions
diff --git a/src/components/Form/Form.scss b/src/components/Form/Form.scss index 06d15ea..7642f75 100644 --- a/src/components/Form/Form.scss +++ b/src/components/Form/Form.scss @@ -160,14 +160,34 @@ input { } .TransportForm { - padding: 2rem; + padding: 1rem; + font-size: $fontSize1 + 0.25; +} + +.TransportForm label { + display: flex; + flex-direction: row; + justify-content: space-between; + min-width: 90%; +} + +.TransportForm .inputs { + height: 80%; display: flex; flex-direction: column; - justify-content: center /*space-between*/; + justify-content: space-around; align-items: center; } +.TransportForm .menu { + position: absolute; + + right: 1rem; + bottom: 1rem; + //border: 1px solid gray; +} + /*.ClientInfoDisplay { font-size: $fontSize1; }*/ diff --git a/src/components/Form/Transport/TransportForm.tsx b/src/components/Form/Transport/TransportForm.tsx index 0611cc1..60dfee3 100644 --- a/src/components/Form/Transport/TransportForm.tsx +++ b/src/components/Form/Transport/TransportForm.tsx @@ -6,11 +6,12 @@ * Copyright (c) 2021 Vidhu Kant Sharma */ -import React, { useState } from "react"; +import React, { useState, Dispatch, SetStateAction } from "react"; import { Transport } from "./../../../interfaces" interface Props { - setVisibility: any // this component's visibility + setVisibility: Dispatch<SetStateAction<boolean>> // this component's visibility + setTransporter: Dispatch<SetStateAction<Transport>> } const TransportForm: React.FC<Props> = (props) => { @@ -23,7 +24,6 @@ const TransportForm: React.FC<Props> = (props) => { const hideSelf = () => props.setVisibility(false); - const closeOnBGClicked = (event: any) => event.target.className === "floatingMenuBG" && hideSelf(); @@ -37,7 +37,7 @@ const TransportForm: React.FC<Props> = (props) => { GSTIN: transporterGSTIN, Builty: builtyNumber } - console.log(newTransport); + props.setTransporter(newTransport); hideSelf(); } @@ -45,37 +45,41 @@ const TransportForm: React.FC<Props> = (props) => { return ( <div className={"floatingMenuBG"} onClick={closeOnBGClicked}> <form className={"smallFloatingMenu TransportForm"} onSubmit={handleSubmit}> - <label> - Transporter Name: <input className={"wideInputBox"} type="text" value={transporterName} onChange={ - (event) => (setTransporterName(event.target.value)) - }/> - </label> + <div className={"inputs"}> + <label> + Transporter Name: <input className={"wideInputBox"} type="text" value={transporterName} onChange={ + (event) => (setTransporterName(event.target.value)) + }/> + </label> - <label> - Vehicle Number: <input className={"wideInputBox"} type="text" value={vehicleNum} onChange={ - (event) => (setVehicleNum(event.target.value)) - } required /> - </label> + <label> + Vehicle Number: <input className={"wideInputBox"} type="text" value={vehicleNum} onChange={ + (event) => (setVehicleNum(event.target.value)) + } required /> + </label> - <label> - Transport Method: <input className={"wideInputBox"} type="text" value={transportMethod} onChange={ - (event) => (setTransportMethod(event.target.value)) - } required /> - </label> + <label> + Transport Method: <input className={"wideInputBox"} type="text" value={transportMethod} onChange={ + (event) => (setTransportMethod(event.target.value)) + } required /> + </label> - <label> - Transporter GSTIN: <input className={"wideInputBox"} type="text" value={transporterGSTIN} onChange={ - (event) => (setTransporterGSTIN(event.target.value)) - }/> - </label> + <label> + Transporter GSTIN: <input className={"wideInputBox"} type="text" value={transporterGSTIN} onChange={ + (event) => (setTransporterGSTIN(event.target.value)) + }/> + </label> - <label> - Builty Number: <input className={"wideInputBox"} type="text" value={builtyNumber} onChange={ - (event) => (setBuiltyNumber(event.target.value)) - }/> - </label> + <label> + Builty Number: <input className={"wideInputBox"} type="text" value={builtyNumber} onChange={ + (event) => (setBuiltyNumber(event.target.value)) + }/> + </label> + </div> - <input type="submit" value="ok"/> + <div className={"menu"}> + <input type="submit" value="ok"/> + </div> </form> </div> ); |