@visns-studio/visns-components 1.0.1-2.1 → 1.0.2

package/components/cms/visns-field.jsx

@@ -1,673 +0,0 @@
-import React, { useState, useEffect, useRef } from "react";
-import CustomFetch from "../crm/visns-fetch";
-import Select from "../crm/visns-select";
-import MultiSelect from "../crm/visns-multi-select";
-import VisnsAutocomplete from "../crm/visns-autocomplete";
-import DatePicker from "react-datepicker";
-import _ from "lodash";
-import ReactQuill from "react-quill";
-import Toggle from "react-toggle";
-import { NumericFormat, PatternFormat } from "react-number-format";
-import { motion } from "framer-motion";
-import "react-toggle/style.css";
-import "react-quill/dist/quill.snow.css";
-import "react-datepicker/dist/react-datepicker.css";
-
-function Field(props) {
-	const inputFile = useRef(null);
-	const [options, setOptions] = useState([]);
-	const [dataOptions, setDataOptions] = useState([]);
-	const [formItemStyle, setFormItemStyle] = useState({});
-	const [formItemClass, setFormItemClass] = useState("formItem");
-	const {
-		settings,
-		inputValue,
-		inputClass,
-		onChange,
-		onChangeFile,
-		onChangeRicheditor,
-		onChangeSelect,
-		setFormData,
-		uploadProgress,
-	} = props;
-
-	useEffect(() => {
-		switch (settings.type) {
-			case "hidden":
-				setFormItemStyle({
-					display: "none",
-				});
-				break;
-			case "dropdown-ajax":
-				let filter = {};
-
-				if (
-					settings.hasOwnProperty("where") &&
-					settings.where.length > 0
-				) {
-					filter = {
-						where: settings.where,
-					};
-				}
-
-				CustomFetch(settings.url, "POST", filter, function (result) {
-					setOptions(result.data);
-
-					let dataArray = [];
-
-					result.data.forEach((a) => {
-						let _tempObject = a;
-
-						if (!_.isEmpty(_tempObject)) {
-							let modifiedObject = {};
-
-							Object.keys(_tempObject).forEach(function (c) {
-								if (c !== "id" && c !== "label") {
-									modifiedObject["data-" + c] =
-										_tempObject[c];
-								}
-							});
-
-							dataArray.push(modifiedObject);
-						}
-					});
-
-					if (dataArray.length > 0) {
-						setDataOptions(dataArray);
-					}
-				});
-				break;
-			case "multi-dropdown-ajax":
-				let multiFilter = {};
-
-				if (
-					settings.hasOwnProperty("where") &&
-					settings.where.length > 0
-				) {
-					multiFilter = {
-						where: settings.where,
-					};
-				}
-
-				CustomFetch(
-					settings.url,
-					"POST",
-					multiFilter,
-					function (result) {
-						setOptions(result.data);
-
-						let dataArray = [];
-
-						result.data.forEach((a) => {
-							let _tempObject = a;
-
-							if (!_.isEmpty(_tempObject)) {
-								let modifiedObject = {};
-
-								Object.keys(_tempObject).forEach(function (c) {
-									if (c !== "id" && c !== "label") {
-										modifiedObject["data-" + c] =
-											_tempObject[c];
-									}
-								});
-
-								dataArray.push(modifiedObject);
-							}
-						});
-
-						if (dataArray.length > 0) {
-							setDataOptions(dataArray);
-						}
-					}
-				);
-				break;
-			default:
-				break;
-		}
-
-		if (settings.size === "full") {
-			setFormItemClass("formItem fwItem");
-		}
-	}, [settings]);
-
-	useEffect(() => {
-		let filter = {};
-
-		if (settings.hasOwnProperty("child")) {
-			if (inputValue > 0) {
-				filter = {
-					where: [
-						{
-							id: settings.id,
-							value: inputValue,
-						},
-					],
-				};
-
-				CustomFetch(
-					settings.child.url,
-					"POST",
-					filter,
-					function (result) {
-						childDropdownCallback({
-							id: settings.child.id,
-							data: result.data,
-						});
-					}
-				);
-			}
-		}
-	}, [inputValue, settings]);
-
-	useEffect(() => {
-		if (settings.hasOwnProperty("options")) {
-			if (settings.options.length > 0) {
-				let dataArray = [];
-
-				settings.options.forEach((a) => {
-					let _tempObject = a;
-
-					if (!_.isEmpty(_tempObject)) {
-						let modifiedObject = {};
-
-						Object.keys(_tempObject).forEach(function (c) {
-							if (c !== "id" && c !== "label") {
-								modifiedObject["data-" + c] = _tempObject[c];
-							}
-						});
-
-						dataArray.push(modifiedObject);
-					}
-				});
-
-				if (dataArray.length > 0) {
-					setDataOptions(dataArray);
-				}
-			}
-		}
-	}, [settings.options, settings]);
-
-	return (
-		<div className={formItemClass} style={formItemStyle}>
-			<label
-				className={
-					settings.type === "image"
-						? "fi__flabel"
-						: settings.type === "richeditor"
-						? "fi__flabel"
-						: "fi__label"
-				}
-			>
-				{(() => {
-					if (
-						settings.type === "address" ||
-						settings.type === "date" ||
-						settings.type === "datetime" ||
-						settings.type === "checkbox" ||
-						settings.type === "multi-dropdown" ||
-						settings.type === "multi-dropdown-ajax"
-					) {
-						return (
-							<span className="fi__span prefocus">
-								{settings.label}{" "}
-								{settings.required === true ? "*" : ""}
-							</span>
-						);
-					}
-				})()}
-
-				{(() => {
-					if (
-						settings.type === "image" ||
-						settings.type === "richeditor"
-					) {
-						return (
-							<>
-								{settings.label}{" "}
-								{settings.required === true ? "*" : ""}
-							</>
-						);
-					}
-				})()}
-
-				{(() => {
-					let htmlContainer;
-					switch (settings.type) {
-						case "text":
-							htmlContainer = (
-								<input
-									type="text"
-									name={settings.id}
-									readOnly={
-										settings.hasOwnProperty("readOnly")
-											? settings.readOnly
-											: false
-									}
-									className={inputClass[settings.id]}
-									placeholder=" "
-									onChange={onChange}
-									value={
-										inputValue && inputValue !== "null"
-											? inputValue
-											: ""
-									}
-								/>
-							);
-							break;
-						case "json":
-							htmlContainer = (
-								<input
-									type="text"
-									name={settings.id}
-									data-jsonkey={settings.key}
-									className={inputClass[settings.id]}
-									placeholder=" "
-									onChange={onChange}
-									value={
-										inputValue && inputValue !== "null"
-											? inputValue
-											: ""
-									}
-								/>
-							);
-							break;
-						case "password":
-							htmlContainer = (
-								<input
-									type="password"
-									name={settings.id}
-									className={inputClass[settings.id]}
-									placeholder=" "
-									onChange={onChange}
-									value={
-										inputValue && inputValue !== "null"
-											? inputValue
-											: ""
-									}
-								/>
-							);
-							break;
-						case "phone":
-							htmlContainer = (
-								<PatternFormat
-									name={settings.id}
-									className={inputClass[settings.id]}
-									onValueChange={(values) => {
-										onChangeNumberFormat(
-											values,
-											settings.id
-										);
-									}}
-									format="## #### ####"
-									allowEmptyFormatting
-									mask="_"
-									value={
-										inputValue && inputValue !== "null"
-											? inputValue
-											: ""
-									}
-								/>
-							);
-							break;
-						case "mobile":
-							htmlContainer = (
-								<PatternFormat
-									className={inputClass[settings.id]}
-									onValueChange={(values) => {
-										onChangeNumberFormat(
-											values,
-											settings.id
-										);
-									}}
-									format="#### ### ###"
-									allowEmptyFormatting
-									mask="_"
-									value={
-										inputValue && inputValue !== "null"
-											? inputValue
-											: ""
-									}
-								/>
-							);
-							break;
-						case "currency":
-							htmlContainer = (
-								<NumericFormat
-									name={settings.id}
-									className={inputClass[settings.id]}
-									onValueChange={(values) => {
-										onChangeNumberFormat(
-											values,
-											settings.id
-										);
-									}}
-									thousandSeparator={true}
-									prefix={"$"}
-									value={
-										inputValue && inputValue !== "null"
-											? inputValue
-											: ""
-									}
-								/>
-							);
-							break;
-						case "textarea":
-							htmlContainer = (
-								<textarea
-									name={settings.id}
-									className={inputClass[settings.id]}
-									onChange={onChange}
-									value={
-										inputValue && inputValue !== "null"
-											? inputValue
-											: ""
-									}
-									style={{ height: "200px" }}
-								></textarea>
-							);
-							break;
-						case "address":
-							htmlContainer = (
-								<VisnsAutocomplete
-									onSelect={(place) =>
-										autocompleteCallback(place)
-									}
-									field={settings.id}
-									setFormData={setFormData}
-									api="pk.eyJ1IjoidmlzbnMtc3R1ZGlvIiwiYSI6ImNrbGlraW5vZDBhMDYycHBsdmk5b3ljbGQifQ.ZGUBk0PWac5GahUeVHdTpg"
-									inputValue={inputValue}
-								/>
-							);
-							break;
-						case "dropdown":
-							htmlContainer = (
-								<Select
-									settings={settings}
-									className={inputClass[settings.id]}
-									onChange={onChange}
-									inputValue={
-										inputValue === null ? "" : inputValue
-									}
-									options={settings.options}
-									dataOptions={dataOptions}
-								/>
-							);
-							break;
-						case "dropdown-ajax":
-							htmlContainer = (
-								<Select
-									settings={settings}
-									className={inputClass[settings.id]}
-									onChange={onChange}
-									inputValue={
-										inputValue === null ? "" : inputValue
-									}
-									options={options}
-									dataOptions={dataOptions}
-								/>
-							);
-							break;
-						case "multi-dropdown":
-							htmlContainer = (
-								<MultiSelect
-									settings={settings}
-									className={inputClass[settings.id]}
-									onChange={onChangeSelect}
-									inputValue={
-										inputValue === null ? "" : inputValue
-									}
-									options={settings.options}
-									dataOptions={dataOptions}
-								/>
-							);
-							break;
-						case "multi-dropdown-ajax":
-							htmlContainer = (
-								<MultiSelect
-									settings={settings}
-									className={inputClass[settings.id]}
-									onChange={onChangeSelect}
-									inputValue={
-										inputValue === null ? "" : inputValue
-									}
-									options={options}
-									dataOptions={dataOptions}
-								/>
-							);
-							break;
-						case "file":
-							htmlContainer = (
-								<input
-									type="file"
-									name={settings.id}
-									className={inputClass[settings.id]}
-									onChange={onChangeFile}
-								/>
-							);
-							break;
-
-						case "line-break":
-							htmlContainer = (
-								<div className="formbreak">
-									<span>
-										{settings.label}{" "}
-										{settings.required === true ? "*" : ""}
-									</span>
-								</div>
-							);
-							break;
-						case "checkbox":
-							htmlContainer = (
-								<input
-									type="checkbox"
-									name={settings.id}
-									className={inputClass[settings.id]}
-									placeholder=" "
-									onChange={onChange}
-									value={inputValue || ""}
-								/>
-							);
-							break;
-						default:
-							htmlContainer = "";
-							break;
-					}
-
-					return htmlContainer;
-				})()}
-
-				{(() => {
-					if (
-						settings.type !== "address" &&
-						settings.type !== "date" &&
-						settings.type !== "datetime" &&
-						settings.type !== "line-break" &&
-						settings.type !== "checkbox" &&
-						settings.type !== "multi-dropdown" &&
-						settings.type !== "multi-dropdown-ajax" &&
-						settings.type !== "toggle" &&
-						settings.type !== "richeditor" &&
-						settings.type !== "image"
-					) {
-						return (
-							<span className="fi__span">
-								{settings.label}{" "}
-								{settings.required === true ? "*" : ""}
-							</span>
-						);
-					}
-				})()}
-			</label>
-
-			{(() => {
-				let htmlContainer;
-				switch (settings.type) {
-					case "date":
-						htmlContainer = (
-							<DatePicker
-								dateFormat={
-									settings.format
-										? settings.format
-										: "dd-MM-yyyy"
-								}
-								className={inputClass[settings.id]}
-								selected={inputValue || ""}
-								showMonthDropdown
-								showYearDropdown
-								dropdownMode="select"
-								onChange={(date) =>
-									onChangeDate(date, settings.id)
-								}
-							/>
-						);
-						break;
-					case "datetime":
-						htmlContainer = (
-							<DatePicker
-								dateFormat={
-									settings.format
-										? settings.format
-										: "dd-MM-yyyy hh:mm aa"
-								}
-								showTimeSelect
-								className={inputClass[settings.id]}
-								selected={inputValue || null}
-								showMonthDropdown
-								showYearDropdown
-								dropdownMode="select"
-								onChange={(date) =>
-									onChangeDate(date, settings.id)
-								}
-								shouldCloseOnSelect={true}
-							/>
-						);
-						break;
-					case "time":
-						htmlContainer = (
-							<DatePicker
-								dateFormat={
-									settings.format
-										? settings.format
-										: "hh:mm aa"
-								}
-								showTimeSelect
-								showTimeSelectOnly
-								timeIntervals={15}
-								timeCaption="Time"
-								className={inputClass[settings.id]}
-								selected={inputValue || ""}
-								onChange={(date) =>
-									onChangeDate(date, settings.id)
-								}
-								shouldCloseOnSelect={true}
-							/>
-						);
-						break;
-					case "toggle":
-						htmlContainer = (
-							<div>
-								<Toggle
-									name={settings.id}
-									data-show={
-										settings.show
-											? JSON.stringify(settings.show)
-											: ""
-									}
-									checked={
-										inputValue !== undefined
-											? inputValue === ""
-												? false
-												: inputValue === "on"
-												? false
-												: inputValue
-											: false
-									}
-									onChange={onChangeToggle}
-								/>
-								<span className="fi__toggletxt">
-									{settings.label}{" "}
-									{settings.required === true ? "*" : ""}
-								</span>
-							</div>
-						);
-						break;
-					case "richeditor":
-						htmlContainer = (
-							<ReactQuill
-								theme="snow"
-								name={settings.id}
-								onChange={(value) => {
-									onChangeRicheditor(value, settings.id);
-								}}
-								value={inputValue || ""}
-							/>
-						);
-						break;
-					case "image":
-						htmlContainer = (
-							<>
-								<motion.div
-									className="progress__bar"
-									initial={{ width: "0%" }}
-									animate={{
-										width:
-											uploadProgress[settings.id] + "%",
-									}}
-									transition={{
-										duration: 3,
-										ease: [0.165, 0.84, 0.44, 1.0],
-									}}
-								/>
-								<input
-									type="file"
-									name={settings.id}
-									className={inputClass[settings.id]}
-									onChange={onChangeFile}
-									ref={inputFile}
-									style={{ display: "none" }}
-								/>
-								<div
-									onClick={() => {
-										inputFile.current.click();
-									}}
-								>
-									{inputValue && inputValue !== "" ? (
-										<>
-											{inputValue.file_url &&
-											inputValue.file_url !== "" ? (
-												<img
-													src={inputValue.file_url}
-													width="200"
-												/>
-											) : (
-												<img
-													src={URL.createObjectURL(
-														inputValue
-													)}
-													width="200"
-												/>
-											)}
-										</>
-									) : (
-										<div className="imageupload">
-											<span>
-												Click here to upload an image
-											</span>
-										</div>
-									)}
-								</div>
-							</>
-						);
-						break;
-					default:
-						htmlContainer = "";
-						break;
-				}
-
-				return htmlContainer;
-			})()}
-		</div>
-	);
-}
-
-export default Field;