@visns-studio/visns-components 1.0.7 → 1.0.9

package/components/cms/visns-field.jsx

@@ -0,0 +1,700 @@
+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,
+		alertStateChange,
+		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);
+						}
+					},
+					function (error) {
+						alertStateChange({
+							show: true,
+							alertClass: "dialog error",
+							alertText: String(error),
+						});
+					}
+				);
+				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);
+						}
+					},
+					function (error) {
+						alertStateChange({
+							show: true,
+							alertClass: "dialog error",
+							alertText: String(error),
+						});
+					}
+				);
+				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,
+						});
+					},
+					function (error) {
+						alertStateChange({
+							show: true,
+							alertClass: "dialog error",
+							alertText: String(error),
+						});
+					}
+				);
+			}
+		}
+	}, [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;

package/components/cms/visns-form.jsx

@@ -1,6 +1,6 @@
 import React, { useState, useEffect } from "react";
-import CustomFetch from "../crm/visns-fetch";
-import Field from "../crm/visns-field";
+import CustomFetch from "./crm/visns-fetch";
+import Field from "./visns-field";
 import slugify from "react-slugify";
 import moment from "moment";
 import Reveal from "react-reveal/Reveal";

package/package.json

@@ -30,7 +30,7 @@
 		"react-dom": ">=18.2.0"
 	},
 	"name": "@visns-studio/visns-components",
-	"version": "1.0.7",
+	"version": "1.0.9",
 	"description": "Various packages to assist in the development of our Custom Applications.",
 	"main": "index.js",
 	"devDependencies": {},