victorAnumudu
57 lines
2.3 KiB
React
57 lines
2.3 KiB
React
import React, {memo, useState} from 'react'
|
|
import SiteTemplateSelector from './SiteTemplateSelector';
|
|
|
|
const GeneralTab = memo(({name='Full Name', data, isCustom, productData}) =>{
|
|
console.log("Page data == ", data)
|
|
|
|
const fieldData = {}
|
|
Object.entries(data)?.forEach(([key, value]) => { // LOOP TO POPULATE FIELDDATA PROPERTIES WITH DATA OF EACH TAB
|
|
fieldData[value.name] = ''
|
|
})
|
|
const [fields, setFields] = useState(fieldData)
|
|
const handleChange = ({target:{name, value}}) => {
|
|
setFields(prev => ({...prev, [name]:value}))
|
|
}
|
|
|
|
const handleSubmit = () => {
|
|
console.log('formInfo', fields)
|
|
}
|
|
|
|
if (isCustom === true){
|
|
return <SiteTemplateSelector name={name} data={data} isCustom={isCustom} productData={productData} />
|
|
}
|
|
|
|
|
|
return (
|
|
<div className="page-account-form">
|
|
<div className="p-0" style={{ minHeight: '500px'}}>
|
|
|
|
<form id='tab_form'>
|
|
<div className="form-row">
|
|
<>
|
|
{Object.entries(data)?.map(([key, value]) => (
|
|
<div key={key} className="form-group col-md-12">
|
|
<label htmlFor="name1">{value.name}</label>
|
|
{value.controls == 'TEXT' ?
|
|
<input name={value.name} type="text" className="form-control" id={key} value={fields[value.name]} onChange={handleChange} />
|
|
:value.controls == 'TEXTAREA' ?
|
|
<textarea name={value.name} rows={5} style={{resize: 'none'}} type="text" className="form-control" id={key} value={fields[value.name]} onChange={handleChange} />
|
|
:
|
|
null
|
|
}
|
|
</div>
|
|
))}
|
|
</>
|
|
<div className="form-group col-md-12" style={{textAlign:'right'}}>
|
|
<button onClick={handleSubmit} type="button" className="btn btn-primary">Update</button>
|
|
</div>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|
|
)
|
|
|
|
|
|
export default GeneralTab |