@visns-studio/visns-components 5.11.21 → 5.11.22

package/src/components/cms/Field.jsx

@@ -1,802 +0,0 @@
-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;