@visns-studio/visns-components 4.7.1 → 4.7.3

package/src/components/cms/Field.jsx

@@ -0,0 +1,802 @@
+import React, { useState, useEffect, useRef } from 'react';
+import DatePicker from 'react-datepicker';
+import _ from 'lodash';
+import ReactQuill, { Quill } from 'react-quill';
+import { Editor } from '@tinymce/tinymce-react';
+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 VisnsDropZone from './DropZone';
+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/files/upload',
+                        'POST',
+                        response,
+                        function (res) {
+                            if (res.error === '') {
+                                resolve(res.path);
+                            } else {
+                                toast.error(
+                                    res.error !== undefined ? res.error : ''
+                                );
+                            }
+                        }
+                    );
+                });
+            });
+        },
+    },
+};
+
+const Field = ({
+    baseData,
+    fetchData,
+    inputValue,
+    inputClass,
+    onChange,
+    onChangeDate,
+    onChangeFile,
+    onChangeRicheditor,
+    onChangeSelect,
+    onChangeToggle,
+    setFormData,
+    settings,
+    uploadProgress,
+}) => {
+    const editorRef = useRef(null);
+    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' ||
+                    settings.type === 'richeditor' ||
+                    settings.type === 'gallery'
+                        ? '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' ||
+                        settings.type === 'gallery'
+                    ) {
+                        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}
+                                    multi={
+                                        settings.multiple
+                                            ? settings.multiple
+                                            : false
+                                    }
+                                />
+                            );
+                            break;
+                        case 'multi-dropdown-ajax':
+                            htmlContainer = (
+                                <MultiSelect
+                                    settings={settings}
+                                    className={inputClass[settings.id]}
+                                    onChange={onChangeSelect}
+                                    inputValue={
+                                        inputValue === null ? '' : inputValue
+                                    }
+                                    options={options}
+                                    multi={
+                                        settings.multiple
+                                            ? settings.multiple
+                                            : false
+                                    }
+                                />
+                            );
+                            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' &&
+                        settings.type !== 'gallery'
+                    ) {
+                        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 = (
+                            <Editor
+                                tinymceScriptSrc="https://d16lktya8ojp5z.cloudfront.net/generic/packages/tinymce_v701/tinymce.min.js"
+                                licenseKey="gpl"
+                                onEditorChange={(value, e) => {
+                                    onChangeRicheditor(e, value, settings.id);
+                                }}
+                                onInit={(evt, editor) =>
+                                    (editorRef.current = editor)
+                                }
+                                value={inputValue || ''}
+                                init={{
+                                    branding: false,
+                                    height: 500,
+                                    menubar: false,
+                                    plugins: [
+                                        'advlist',
+                                        'autolink',
+                                        'lists',
+                                        'link',
+                                        'image',
+                                        'charmap',
+                                        'preview',
+                                        'anchor',
+                                        'searchreplace',
+                                        'visualblocks',
+                                        'code',
+                                        'fullscreen',
+                                        'insertdatetime',
+                                        'media',
+                                        'table',
+                                        'code',
+                                    ],
+                                    toolbar:
+                                        'undo redo | blocks | ' +
+                                        'bold italic forecolor | alignleft aligncenter ' +
+                                        'alignright alignjustify | bullist numlist outdent indent | ' +
+                                        'removeformat | table',
+                                    content_style:
+                                        'body { font-family:Helvetica,Arial,sans-serif; font-size:14px }',
+                                }}
+                            />
+                        );
+                        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;
+                    case 'gallery':
+                        if (
+                            baseData[settings.key] &&
+                            baseData[settings.key] > 0
+                        ) {
+                            const dropzoneUrl = `${settings.url}/${
+                                baseData[settings.key]
+                            }`;
+
+                            htmlContainer = (
+                                <VisnsDropZone
+                                    fetchData={fetchData}
+                                    files={baseData[settings.id]}
+                                    settings={{
+                                        url: dropzoneUrl,
+                                        method: settings.method,
+                                        type: 'gallery',
+                                    }}
+                                />
+                            );
+                        }
+                        break;
+                    default:
+                        htmlContainer = '';
+                        break;
+                }
+
+                return htmlContainer;
+            })()}
+        </div>
+    );
+};
+
+export default Field;