| 1 |
import { __ } from "@wordpress/i18n"; |
| 2 |
import React, { useEffect, useState } from "react"; |
| 3 |
import { withLabel, validFieldProps } from "quickbuilder"; |
| 4 |
|
| 5 |
const SettingsUploader = (props) => { |
| 6 |
const validProps = validFieldProps(props, [ |
| 7 |
"is_pro", |
| 8 |
"visible", |
| 9 |
"trigger", |
| 10 |
"disable", |
| 11 |
"parentIndex", |
| 12 |
"context", |
| 13 |
"copyOnClick", |
| 14 |
]); |
| 15 |
|
| 16 |
const [uploadedFile, setUploadedFile] = useState(null); |
| 17 |
|
| 18 |
const handleChange = (e) => { |
| 19 |
if (!e.target.files.length) { |
| 20 |
return; |
| 21 |
} |
| 22 |
|
| 23 |
const file = e.target.files[0]; |
| 24 |
|
| 25 |
if(file?.size == 0){ |
| 26 |
props.context.alerts.toast('error', __('File can\'t be empty.', 'betterdocs')); |
| 27 |
return; |
| 28 |
} |
| 29 |
else if(file?.type != 'application/json' && file?.type != 'text/json'){ |
| 30 |
props.context.alerts.toast('error', __('Invalid file type.', 'betterdocs')); |
| 31 |
return; |
| 32 |
} |
| 33 |
|
| 34 |
setUploadedFile(file); |
| 35 |
|
| 36 |
let reader = new FileReader(); |
| 37 |
const self = this; |
| 38 |
reader.onload = (event) => { |
| 39 |
const json = event?.target?.result; |
| 40 |
props.onChange({ |
| 41 |
target: { |
| 42 |
type: 'jsonuploader', |
| 43 |
name: props.name, |
| 44 |
value: json, |
| 45 |
} |
| 46 |
}); |
| 47 |
}; |
| 48 |
reader.readAsText(file); |
| 49 |
}; |
| 50 |
|
| 51 |
const removeFile = () => { |
| 52 |
setUploadedFile(null); |
| 53 |
props.onChange({ |
| 54 |
target: { |
| 55 |
type: 'jsonuploader', |
| 56 |
name: props.name, |
| 57 |
value: null, |
| 58 |
} |
| 59 |
}); |
| 60 |
} |
| 61 |
|
| 62 |
useEffect(() => { |
| 63 |
if(!props?.value){ |
| 64 |
setUploadedFile(null); |
| 65 |
} |
| 66 |
}, [props?.value]) |
| 67 |
|
| 68 |
return ( |
| 69 |
<div className="wprf-control-field wprf-importer-upload-field"> |
| 70 |
<span className="wprf-json-uploader"> |
| 71 |
{!uploadedFile && ( |
| 72 |
<label className="wprf-importer-upload-button"> |
| 73 |
<span className="icon"> |
| 74 |
<i className="btd-icon btd-upload"></i> |
| 75 |
</span> |
| 76 |
<span>{__("Click to upload", "betterdocs")}</span> |
| 77 |
<input |
| 78 |
type="file" |
| 79 |
accept="application/JSON" |
| 80 |
onChange={(e) => { |
| 81 |
handleChange(e); |
| 82 |
}} |
| 83 |
/> |
| 84 |
</label> |
| 85 |
)} |
| 86 |
{uploadedFile && uploadedFile?.name && ( |
| 87 |
<span className="wpfr-json-file-name-wrapper"> |
| 88 |
<span className="wpfr-json-file-name"> |
| 89 |
{uploadedFile?.name.length > 20 |
| 90 |
? `${uploadedFile?.name.substr( |
| 91 |
0, |
| 92 |
9 |
| 93 |
)}...${uploadedFile?.name.substr( |
| 94 |
uploadedFile?.name.length - 7 |
| 95 |
)}` |
| 96 |
: uploadedFile?.name} |
| 97 |
</span> |
| 98 |
<span |
| 99 |
className="wprf-json-file-delete-button" |
| 100 |
onClick={removeFile} |
| 101 |
> |
| 102 |
<svg |
| 103 |
xmlns="http://www.w3.org/2000/svg" |
| 104 |
width="24" |
| 105 |
height="24" |
| 106 |
viewBox="0 0 24 24" |
| 107 |
fill="none" |
| 108 |
> |
| 109 |
<mask |
| 110 |
id="mask0_2475_21238" |
| 111 |
mask-type="alpha" |
| 112 |
maskUnits="userSpaceOnUse" |
| 113 |
x="0" |
| 114 |
y="0" |
| 115 |
width="24" |
| 116 |
height="24" |
| 117 |
> |
| 118 |
<rect |
| 119 |
width="24" |
| 120 |
height="24" |
| 121 |
fill="#D9D9D9" |
| 122 |
/> |
| 123 |
</mask> |
| 124 |
<g mask="url(#mask0_2475_21238)"> |
| 125 |
<path |
| 126 |
d="M6.4 19L5 17.6L10.6 12L5 6.4L6.4 5L12 10.6L17.6 5L19 6.4L13.4 12L19 17.6L17.6 19L12 13.4L6.4 19Z" |
| 127 |
fill="#475467" |
| 128 |
/> |
| 129 |
</g> |
| 130 |
</svg> |
| 131 |
</span> |
| 132 |
</span> |
| 133 |
)} |
| 134 |
</span> |
| 135 |
</div> |
| 136 |
); |
| 137 |
}; |
| 138 |
|
| 139 |
export default withLabel(React.memo(SettingsUploader)); |
| 140 |
|
