@visns-studio/visns-components 1.8.4 → 2.0.0

package/components/cms/Field.jsx

@@ -0,0 +1,747 @@
+import React, { useState, useEffect, useRef } from "react";
+import DatePicker from "react-datepicker";
+import _ from "lodash";
+import ReactQuill, { Quill } from "react-quill";
+import ImageUploader from "quill-image-uploader";
+import Toggle from "react-toggle";
+import { NumericFormat, PatternFormat } from "react-number-format";
+import { motion } from "framer-motion";
+import { toast } from "react-toastify";
+
+import "react-toggle/style.css";
+import "react-quill/dist/quill.snow.css";
+import "react-datepicker/dist/react-datepicker.css";
+import "quill-image-uploader/dist/quill.imageUploader.min.css";
+
+import CustomFetch from "../crm/Fetch";
+import Select from "../crm/Select";
+import MultiSelect from "../crm/MultiSelect";
+import VisnsAutocomplete from "../crm/Autocomplete";
+import moment from "moment";
+
+Quill.register("modules/imageUploader", ImageUploader);
+
+const modules = {
+    toolbar: {
+        container: [
+            [{ header: [1, 2, false] }],
+            ["bold", "italic", "underline", "strike", "blockquote"],
+            [{ list: "ordered" }, { list: "bullet" }],
+            ["link", "image"],
+            ["clean"],
+        ],
+    },
+    imageUploader: {
+        upload: async (file) => {
+            return new Promise((resolve, reject) => {
+                Vapor.store(file, {
+                    progress: (progress) => {
+                        console.info(progress * 100);
+                    },
+                }).then((response) => {
+                    CustomFetch(
+                        "/ajax/file/upload",
+                        "POST",
+                        response,
+                        function (res) {
+                            if (res.error === "") {
+                                resolve(res.path);
+                            } else {
+                                toast.error(
+                                    res.error !== undefined ? res.error : ""
+                                );
+                            }
+                        }
+                    );
+                });
+            });
+        },
+    },
+};
+
+const Field = ({
+    settings,
+    inputValue,
+    inputClass,
+    onChange,
+    onChangeDate,
+    onChangeFile,
+    onChangeRicheditor,
+    onChangeSelect,
+    onChangeToggle,
+    setFormData,
+    uploadProgress,
+}) => {
+    const inputFile = useRef(null);
+    const [options, setOptions] = useState([]);
+    const [dataOptions, setDataOptions] = useState([]);
+    const [formItemStyle, setFormItemStyle] = useState({});
+    const [formItemClass, setFormItemClass] = useState("formItem");
+
+    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
+                                        ? moment(inputValue).toDate()
+                                        : ""
+                                }
+                                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
+                                        ? moment(inputValue).toDate()
+                                        : ""
+                                }
+                                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
+                                        ? moment(inputValue).toDate()
+                                        : ""
+                                }
+                                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
+                                                : Boolean(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 || ""}
+                                    modules={modules}
+                                    formats={[
+                                        "header",
+                                        "bold",
+                                        "italic",
+                                        "underline",
+                                        "strike",
+                                        "blockquote",
+                                        "list",
+                                        "bullet",
+                                        "link",
+                                        "image",
+                                    ]}
+                                />
+                            </>
+                        );
+                        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;