93 lines
3.0 KiB
React
93 lines
3.0 KiB
React
|
import { memo, useState, useEffect } from "react";
|
||
|
|
import { DropDowns } from "../../../Components/Forms/DropDown";
|
||
|
|
import { Checkbox, Popover } from "antd";
|
||
|
|
import { Settings, X } from "lucide-react";
|
||
|
|
|
||
|
|
const DefaultSettingPopover = memo(({ field, options, onSubmit, currentDefault, popOverHeading, checkBoxHeading = 'Apply to all existing rows', showField }) => {
|
||
|
|
const [selectedValue, setSelectedValue] = useState(currentDefault);
|
||
|
|
const [applyToAll, setApplyToAll] = useState(false);
|
||
|
|
const [open, setOpen] = useState(false);
|
||
|
|
console.log(showField, "showField")
|
||
|
|
useEffect(() => {
|
||
|
|
if (open) {
|
||
|
|
setSelectedValue(currentDefault);
|
||
|
|
setApplyToAll(false);
|
||
|
|
}
|
||
|
|
}, [open, currentDefault]);
|
||
|
|
|
||
|
|
const handleSubmit = () => {
|
||
|
|
onSubmit(field, selectedValue, applyToAll);
|
||
|
|
setOpen(false);
|
||
|
|
setApplyToAll(false);
|
||
|
|
setSelectedValue("");
|
||
|
|
};
|
||
|
|
|
||
|
|
const getFieldTitle = (field) => {
|
||
|
|
switch (field) {
|
||
|
|
case "uom": return "UOM";
|
||
|
|
case "category": return "Category";
|
||
|
|
case "subCategory": return "Sub-Category";
|
||
|
|
case "tax": return "Tax";
|
||
|
|
default: return field;
|
||
|
|
}
|
||
|
|
};
|
||
|
|
|
||
|
|
const content = (
|
||
|
|
<div className="popover-container">
|
||
|
|
<div className="popover-header">
|
||
|
|
<span className="popover-title">{popOverHeading}</span>
|
||
|
|
<X size={14} className="close-icon" onClick={() => setOpen(false)} />
|
||
|
|
</div>
|
||
|
|
|
||
|
|
{showField && <div
|
||
|
|
style={{
|
||
|
|
fontSize: '14px',fontWeight: '500', color: '#333', marginBottom: '10px', padding: '5px 10px', backgroundColor: '#f0f0f0', borderRadius: '4px', textAlign: 'center'
|
||
|
|
}}
|
||
|
|
>{showField}</div>}
|
||
|
|
|
||
|
|
<div className="popover-section">
|
||
|
|
<DropDowns
|
||
|
|
label={`Select default ${getFieldTitle(field).toLowerCase()}`}
|
||
|
|
valueData={selectedValue}
|
||
|
|
onChangeFunction={setSelectedValue}
|
||
|
|
options={options}
|
||
|
|
/>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div className="popover-checkbox">
|
||
|
|
<Checkbox
|
||
|
|
checked={applyToAll}
|
||
|
|
onChange={(e) => setApplyToAll(e.target.checked)}
|
||
|
|
>
|
||
|
|
{checkBoxHeading}
|
||
|
|
</Checkbox>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div className="popover-actions">
|
||
|
|
<button
|
||
|
|
className="btn btn--primary"
|
||
|
|
onClick={handleSubmit}
|
||
|
|
disabled={!selectedValue}
|
||
|
|
>
|
||
|
|
Submit
|
||
|
|
</button>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
);
|
||
|
|
|
||
|
|
return (
|
||
|
|
<Popover
|
||
|
|
content={content}
|
||
|
|
trigger="click"
|
||
|
|
placement="bottomLeft"
|
||
|
|
open={open}
|
||
|
|
onOpenChange={setOpen}
|
||
|
|
overlayClassName="default-setting-popover"
|
||
|
|
>
|
||
|
|
<Settings size={14} className="setting-icon" />
|
||
|
|
</Popover>
|
||
|
|
);
|
||
|
|
});
|
||
|
|
|
||
|
|
export default DefaultSettingPopover;
|