@visns-studio/visns-components 1.0.0

package/components/visns-field.jsx

@@ -0,0 +1,662 @@
+import React, { useState, useEffect } from "react";
+import DatePicker from "react-datepicker";
+import _ from "lodash";
+import ReactQuill from "react-quill";
+import Toggle from "react-toggle";
+import NumberFormat from "react-number-format";
+
+import CustomFetch from "./visns-fetch";
+import Select from "./visns-select";
+import VisnsAsyncSelect from "./visns-async-select";
+import MultiSelect from "./visns-multi-select";
+import VisnsAutocomplete from "./visns-autocomplete";
+
+import "react-toggle/style.css";
+import "react-quill/dist/quill.snow.css";
+import "react-datepicker/dist/react-datepicker.css";
+
+function Field(props) {
+	const [options, setOptions] = useState([]);
+	const [dataOptions, setDataOptions] = useState([]);
+	const [formItemStyle, setFormItemStyle] = useState({});
+	const [formItemClass, setFormItemClass] = useState("formItem");
+	const {
+		settings,
+		inputValue,
+		inputClass,
+		childDropdownCallback,
+		onChange,
+		onChangeDate,
+		onChangeSelect,
+		onChangeRicheditor,
+		onChangeToggle,
+		onChangeNumberFormat,
+		autocompleteCallback,
+		setFormData,
+	} = 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.hasOwnProperty('hide')) {
+		//     if (settings.hide === true) {
+		//         setFormItemStyle({
+		//             display: 'none',
+		//         });
+		//     } else {
+		//         setFormItemStyle({
+		//             display: 'block',
+		//         });
+		//     }
+		// }
+
+		if (settings.size === "full") {
+			setFormItemClass("formItem fwItem");
+		}
+	}, [settings]);
+
+	useEffect(() => {
+		let filter = {};
+
+		if (settings.hasOwnProperty("child") && inputValue) {
+			let _inputValue = inputValue.hasOwnProperty("value")
+				? inputValue.value
+				: inputValue;
+
+			if (_inputValue > 0) {
+				if (Array.isArray(settings.child)) {
+					settings.child.forEach((a) => {
+						filter = {
+							where: [
+								{
+									id: settings.id,
+									value: _inputValue,
+								},
+							],
+						};
+
+						CustomFetch(a.url, "POST", filter, function (result) {
+							childDropdownCallback({
+								id: a.id,
+								data: result.data,
+							});
+						});
+					});
+				} else {
+					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="fi__label">
+				{(() => {
+					if (
+						settings.type === "address" ||
+						settings.type === "date" ||
+						settings.type === "datetime" ||
+						settings.type === "checkbox" ||
+						settings.type === "multi-dropdown" ||
+						settings.type === "multi-dropdown-ajax" ||
+						settings.type === "async-dropdown-ajax" ||
+						settings.type === "richeditor"
+					) {
+						return (
+							<span className="fi__span prefocus">
+								{settings.label}{" "}
+								{settings.required === true ? "*" : ""}
+							</span>
+						);
+					}
+				})()}
+
+				{(() => {
+					let htmlContainer;
+					switch (settings.type) {
+						case "text":
+							htmlContainer = (
+								<input
+									type="text"
+									data-name={settings.id}
+									className={inputClass[settings.id]}
+									placeholder=" "
+									onChange={onChange}
+									value={
+										inputValue && inputValue !== "null"
+											? inputValue
+											: ""
+									}
+								/>
+							);
+							break;
+						case "json":
+							htmlContainer = (
+								<input
+									type="text"
+									data-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"
+									data-name={settings.id}
+									className={inputClass[settings.id]}
+									placeholder=" "
+									onChange={onChange}
+									value={
+										inputValue && inputValue !== "null"
+											? inputValue
+											: ""
+									}
+								/>
+							);
+							break;
+						case "phone":
+							htmlContainer = (
+								<NumberFormat
+									data-name={settings.id}
+									className={inputClass[settings.id]}
+									onValueChange={(values) => {
+										onChangeNumberFormat(
+											values,
+											settings.id
+										);
+									}}
+									format="## #### ####"
+									value={
+										inputValue && inputValue !== "null"
+											? inputValue
+											: ""
+									}
+								/>
+							);
+							break;
+						case "mobile":
+							htmlContainer = (
+								<NumberFormat
+									className={inputClass[settings.id]}
+									onValueChange={(values) => {
+										onChangeNumberFormat(
+											values,
+											settings.id
+										);
+									}}
+									format="#### ### ###"
+									value={
+										inputValue && inputValue !== "null"
+											? inputValue
+											: ""
+									}
+								/>
+							);
+							break;
+						case "currency":
+							htmlContainer = (
+								<NumberFormat
+									data-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
+									data-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}
+									country="AU"
+								/>
+							);
+							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]}
+									multi={
+										settings.hasOwnProperty("multi")
+											? settings.multi
+											: false
+									}
+									onChange={onChangeSelect}
+									inputValue={
+										inputValue === null ? "" : inputValue
+									}
+									options={settings.options}
+									dataOptions={dataOptions}
+								/>
+							);
+							break;
+						case "multi-dropdown-ajax":
+							htmlContainer = (
+								<MultiSelect
+									settings={settings}
+									className={inputClass[settings.id]}
+									multi={
+										settings.hasOwnProperty("multi")
+											? settings.multi
+											: false
+									}
+									onChange={onChangeSelect}
+									inputValue={
+										inputValue === null ? "" : inputValue
+									}
+									options={options}
+									dataOptions={dataOptions}
+								/>
+							);
+							break;
+						case "async-dropdown-ajax":
+							htmlContainer = (
+								<VisnsAsyncSelect
+									settings={settings}
+									className={inputClass[settings.id]}
+									multi={
+										settings.hasOwnProperty("multi")
+											? settings.multi
+											: false
+									}
+									onChange={onChangeSelect}
+									inputValue={
+										inputValue === null ? "" : inputValue
+									}
+									options={options}
+									dataOptions={dataOptions}
+								/>
+							);
+							break;
+						case "file":
+							htmlContainer = (
+								<input
+									type="file"
+									data-name={settings.id}
+									className={inputClass[settings.id]}
+									onChange={onChange}
+								/>
+							);
+							break;
+						case "line-break":
+							htmlContainer = (
+								<div className="formbreak">
+									<span>
+										{settings.label}{" "}
+										{settings.required === true ? "*" : ""}
+									</span>
+								</div>
+							);
+							break;
+						case "checkbox":
+							htmlContainer = (
+								<input
+									type="checkbox"
+									data-name={settings.id}
+									className={inputClass[settings.id]}
+									placeholder=" "
+									onChange={onChange}
+									value={inputValue || ""}
+								/>
+							);
+							break;
+						case "richeditor":
+							htmlContainer = (
+								<ReactQuill
+									theme="snow"
+									data-name={settings.id}
+									onChange={(value, event) => {
+										onChangeRicheditor(
+											event,
+											value,
+											settings.id
+										);
+									}}
+									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 !== "async-dropdown-ajax" &&
+						settings.type !== "toggle" &&
+						settings.type !== "richeditor"
+					) {
+						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
+								scrollableYearDropdown
+								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
+								scrollableYearDropdown
+								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-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;
+					default:
+						htmlContainer = "";
+						break;
+				}
+
+				return htmlContainer;
+			})()}
+		</div>
+	);
+}
+
+export default Field;