@digifi-los/reactapp
Version:
1,090 lines (1,037 loc) • 90.7 kB
JavaScript
import React from 'react';
import FormItem from '../FormItem';
import RACodeMirror from '../RACodeMirror';
import PreviewEditor from '../PreviewEditor';
import ResponsiveDatalist from '../ResponsiveDatalist';
import ResponsiveTable from '../ResponsiveTable';
import DNDTable from '../DNDTable';
import RemoteDropdown from '../RemoteDropdown';
import ResponsiveTabs from '../ResponsiveTabs';
import SingleDatePickerWrapper from '../SingleDatePickerWrapper';
import DateRangePickerWrapper from '../DateRangePickerWrapper';
import ColorPicker from '../ColorPicker';
import createNumberMask from 'text-mask-addons/dist/createNumberMask';
import capitalize from 'capitalize';
import utilities from '../../util';
import qs from 'querystring';
// import RAEditor from '../RAEditor';
// import ResponsiveButton from '../ResponsiveButton';
// import { EditorState, } from 'draft-js';
import Slider from 'rc-slider';
import { default as RCSwitch } from 'rc-switch';
import { ControlLabel, Label, Input, Button, CardFooterItem, Select, Textarea, Group, Image, } from 're-bulma';
import MaskedInput from 'react-text-mask';
import {Dropdown, Checkbox, Step} from 'semantic-ui-react';
import moment from 'moment';
import numeral from 'numeral';
import pluralize from 'pluralize';
import flatten, { unflatten, } from 'flat';
import styles from '../../styles';
import ResponsiveCropper from '../ResponsiveCropper';
import { validateForm, } from './FormHelpers';
import Script from 'react-load-script';
export function getPropertyAttribute(options) {
let { property, element, } = options;
let attribute = element.name;
let selector = element.idSelector;
// console.log({ options });
let returnVal;
if (attribute.indexOf('.') === -1) {
returnVal = property[attribute];
} else {
let attrArray = attribute.split('.');
returnVal = (property[attrArray[0]]) ? property[attrArray[0]][attrArray[1]] : undefined;
}
if (selector && !options.skipSelector) {
return returnVal[selector];
} else {
return returnVal;
}
}
function getErrorStatus(state, name) {
return (state.formDataErrors && state.formDataErrors[name]);
}
function getValidStatus(state, name) {
return (state.formDataValid && state.formDataValid[name]);
}
function getFormElementHelp(hasError, state, name) {
return (hasError) ? {
color: 'isDanger',
text: state.formDataErrors[name][0],
} : undefined;
}
function getCustomErrorLabel(hasError, state, formelement) {
return (hasError) ? (
<span className="__re-bulma_help __re-bulma_is-danger" style={formelement.customErrorProps}>{state.formDataErrors[formelement.name][0]}</span>
) : null;
}
function getCustomErrorIcon(hasError, isValid, state, formelement) {
let iconStyle = formelement.customIconStyle;
let iconVar = (hasError)
? formelement.errorIcon || 'fa fa-exclamation'
: (isValid)
? formelement.validIcon || 'fa fa-check'
: (formelement.initialIcon)
? formelement.initialIcon
: '';
return (formelement.errorIconRight || formelement.errorIconLeft)
? <i className={`__re-bulma_fa ${iconVar} __ra_custom_error_icon`} style={iconStyle}></i>
: null;
}
function getCustomLeftIcon(formElement, state) {
state = state || {};
let iconVar = (formElement.updateIconOnChange && state[formElement.name])
? formElement.options.filter(obj => obj.value === state[formElement.name])[0].icon
: (formElement.leftIcon)
? formElement.leftIcon
: null;
if (iconVar) {
return <i className={`__re-bulma_icon icon ${iconVar}`} style={{ position: 'absolute', top: '9px', left: '6px', zIndex: 1 }} aria-hidden="true"></i>;
}
}
function valueChangeHandler(formElement) {
return (event) => {
let text = event.target.value;
// console.debug({ text, formElement, });
let updatedStateProp = {};
updatedStateProp[formElement.name] = text;
if (formElement.onChangeFilter) {
const onChangeFunc = getFunctionFromProps.call(this, { propFunc: formElement.onChangeFilter });
updatedStateProp = onChangeFunc.call(this, Object.assign({}, this.state, updatedStateProp), updatedStateProp);
}
this.setState(updatedStateProp, () => {
if (formElement.validateOnChange) {
this.validateFormElement({ formElement, });
} else if (formElement.valueCheckOnChange) {
this.valueCheckFormElement({ formElement })
}
});
};
}
function getFormLabel(formElement) {
return (formElement.label)
? (formElement.layoutProps && formElement.layoutProps.horizontalform)
? (<ControlLabel {...formElement.labelProps}>{
(this && this.state && this.state[formElement.formdata_label])
? this.state[formElement.formdata_label]
: formElement.label}</ControlLabel>)
: (<Label {...formElement.labelProps}>{(this && this.state && this.state[formElement.formdata_label])
? this.state[formElement.formdata_label]
: formElement.label}</Label>)
: null;
}
function getCustomFormLabel(formElement) {
return (formElement.customLabel)
? (formElement.layoutProps && formElement.layoutProps.horizontalform)
? (<ControlLabel {...formElement.labelProps}>{(formElement.label && !Array.isArray(formElement.customLabel) && typeof formElement.customLabel === 'object')
? this.getRenderedComponent(formElement.customLabel)
: formElement.customLabel}</ControlLabel>)
: (<Label {...formElement.labelProps}>{(formElement.customLabel && !Array.isArray(formElement.customLabel) && typeof formElement.customLabel === 'object')
? this.getRenderedComponent(formElement.customLabel)
: formElement.customLabel}</Label>)
: null;
}
function getInitialValue(formElement, state) {
// console.debug({formElement, state})
let formElementValue = formElement.value;
if (!formElement.showNullValue && (state[formElement.name] === null || formElementValue === null || formElementValue === 'null')) {
return '';
} else {
let returnVal = (typeof state[formElement.name] !== 'undefined')
? state[formElement.name]
: formElementValue;
if (formElement.momentFormat) {
returnVal = moment(returnVal).format(formElement.momentFormat);
}
if (formElement.numeralFormat) {
returnVal = numeral(returnVal).format(formElement.numeralFormat);
}
return returnVal;
}
}
function getPassablePropsKeyEvents(passableProps, formElement) {
if (formElement.keyPress) {
let customKeyPress = () => { };
if (typeof formElement.keyPress === 'string' && formElement.keyPress.indexOf('func:this.props') !== -1) {
customKeyPress = this.props[formElement.keyPress.replace('func:this.props.', '')];
} else if (typeof formElement.keyPress === 'string' && formElement.keyPress.indexOf('func:window') !== -1 && typeof window[formElement.keyPress.replace('func:window.', '')] === 'function') {
customKeyPress = window[formElement.keyPress.replace('func:window.', '')].bind(this);
// console.debug({ customKeyPress });
}
passableProps.onKeyPress = (e) => {
if (formElement.validateOnKeypress) {
this.validateFormElement({ formElement, });
}
customKeyPress(e, formElement);
// console.debug('custom press');
};
} else if (formElement.submitOnEnter) {
passableProps.onKeyPress = (e) => {
if (formElement.submitOnEnter && (e.key === 'Enter' || e.which === 13)) {
this.submitForm();
}
};
}
if (formElement.onBlur) {
let customonBlur = () => { };
if (typeof formElement.onBlur === 'string' && formElement.onBlur.indexOf('func:this.props') !== -1) {
customonBlur = this.props[formElement.onBlur.replace('func:this.props.', '')];
} else if (typeof formElement.onBlur === 'string' && formElement.onBlur.indexOf('func:window') !== -1 && typeof window[formElement.onBlur.replace('func:window.', '')] === 'function') {
customonBlur = window[formElement.onBlur.replace('func:window.', '')].bind(this);
}
passableProps.onBlur = (e) => {
if (formElement.validateOnBlur) {
this.validateFormElement({ formElement, });
} else if (formElement.valueCheckOnBlur) {
this.valueCheckFormElement({ formElement, });
}
customonBlur(e, formElement);
};
}
if (formElement.onFocus) {
let customFocus = () => { };
if (typeof formElement.onFocus === 'string' && formElement.onFocus.indexOf('func:this.props') !== -1) {
customFocus = this.props[formElement.onFocus.replace('func:this.props.', '')];
} else if (typeof formElement.onFocus === 'string' && formElement.onFocus.indexOf('func:window') !== -1 && typeof window[formElement.onFocus.replace('func:window.', '')] === 'function') {
customFocus = window[formElement.onFocus.replace('func:window.', '')].bind(this);
}
passableProps.onFocus = (e) => {
customFocus(e, formElement);
};
}
if (formElement.keyUp) {
let customkeyUp = () => { };
if (typeof formElement.keyUp === 'string' && formElement.keyUp.indexOf('func:this.props') !== -1) {
customkeyUp = this.props[formElement.keyUp.replace('func:this.props.', '')];
} else if (typeof formElement.keyUp === 'string' && formElement.keyUp.indexOf('func:window') !== -1 && typeof window[formElement.keyUp.replace('func:window.', '')] === 'function') {
customkeyUp = window[formElement.keyUp.replace('func:window.', '')].bind(this);
}
passableProps.onKeyUp = (e) => {
if (formElement.validateOnKeyup) {
this.validateFormElement({ formElement, });
}
customkeyUp(e, formElement);
};
}
return passableProps;
}
function getFunctionFromProps(options) {
const { propFunc } = options;
if (typeof propFunc === 'string' && propFunc.indexOf('func:this.props.reduxRouter') !== -1) {
return this.props.reduxRouter[this.props.replace('func:this.props.reduxRouter.', '')];
} else if (typeof propFunc === 'string' && propFunc.indexOf('func:this.props') !== -1) {
return this.props[this.props.replace('func:this.props.', '')];
} else if (typeof propFunc === 'string' && propFunc.indexOf('func:window') !== -1 && typeof window[propFunc.replace('func:window.', '')] === 'function') {
return window[propFunc.replace('func:window.', '')];
} else if (typeof this.props[propFunc] === 'function') {
return propFunc;
} else {
return function () { }
}
}
export function getFormDNDTable(options) {
let { formElement, i, } = options;
// let initialValue = getInitialValue(formElement,
// (Object.keys(this.state.formDataTables).length && this.state.formDataTables[formElement.name])?this.state.formDataTables : Object.assign({}, this.state, unflatten(this.state, { overwrite: true })));
let initialValue = this.state[formElement.name];
// console.debug({ initialValue },this.state, this.state[formElement.name]);
let hasError = getErrorStatus(this.state, formElement.name);
const getTableHeaders = (row) => {
return row.map(rowkey => {
let selectOptions = (this.state.__formOptions && this.state.__formOptions[rowkey])
? this.state.__formOptions[rowkey]
: [];
// console.log({ selectOptions });
return {
label: capitalize(rowkey),
sortid: rowkey,
sortable: (typeof formElement.sortable !== 'undefined')
? formElement.sortable
: true,
formtype: (formElement.tableHeaderType && formElement.tableHeaderType[rowkey])
? formElement.tableHeaderType[rowkey]
: 'text',
defaultValue: (formElement.tableHeaderDefaultValue && formElement.tableHeaderDefaultValue[rowkey])
? formElement.tableHeaderDefaultValue[rowkey]
: (selectOptions.length)
? selectOptions[0].value
: undefined,
formoptions: selectOptions,
footerFormElementPassProps: Object.assign({
placeholder: capitalize(rowkey),
}, formElement.footerFormElementPassProps),
};
});
};
let handleRowUpdate = () => { console.debug('Error handleRowUpdate function does not exists') };
if (formElement.handleRowUpdate && formElement.handleRowUpdate.indexOf('func:window') !== -1 && typeof window[formElement.handleRowUpdate.replace('func:window.', '')] === 'function') {
handleRowUpdate = window[formElement.handleRowUpdate.replace('func:window.', '')].bind(this, formElement);
}
let useRowButtons = formElement.rowButtons;
let ignoreTableHeaders = formElement.ignoreTableHeaders || [];
let tableHeaders = (formElement.headers)
? (formElement.useStandardHeaders)
? getTableHeaders(formElement.headers.map(header => header.sortid))
: formElement.headers
: (initialValue && Array.isArray(initialValue) && initialValue.length)
? getTableHeaders(Object.keys(initialValue[0]).filter(header => ignoreTableHeaders.indexOf(header) === -1))
: [];
tableHeaders = (useRowButtons)
? tableHeaders.concat({
label: formElement.rowOptionsLabel || '',
formtype: false,
formRowButtons: true,
formRowButtonProps: formElement.formRowButtonProps,
})
: tableHeaders.concat({
label: '',
formtype: false,
});
tableHeaders = tableHeaders.map(header => {
if ((header.formtype === 'select' || header.formtype === 'dropdown') && !header.formoptions) {
header.formoptions = (header.sortid && this.state.__formOptions && this.state.__formOptions[header.sortid])
? this.state.__formOptions[header.sortid]
: [];
}
return header;
})
let passedProps = Object.assign(
{},
this.props,
{
rows: initialValue,
headers: tableHeaders,
toggleRowKeys: formElement.toggleRowKeys,
toggleRowClass: formElement.toggleRowClass,
},
formElement.passProps
);
return (<FormItem key={i} {...formElement.layoutProps} >
{getFormLabel(formElement)}
<DNDTable {...passedProps}
handleRowUpdate={handleRowUpdate.bind(this)}
value={initialValue} />
{getCustomErrorLabel(hasError, this.state, formElement)}
</FormItem>);
}
export function getFormDatatable(options) {
let { formElement, i, } = options;
let initialValue = getInitialValue(formElement,
(Object.keys(this.state.formDataTables).length && this.state.formDataTables[formElement.name]) ? this.state.formDataTables : Object.assign({}, this.state, unflatten(this.state, { overwrite: true })));
// console.debug({ initialValue },this.state, this.state[formElement.name]);
let hasError = getErrorStatus(this.state, formElement.name);
const getTableHeaders = (row) => {
return row.map(rowkey => {
let selectOptions = (this.state.__formOptions && this.state.__formOptions[rowkey])
? this.state.__formOptions[rowkey]
: [];
return {
label: capitalize(rowkey),
sortid: rowkey,
sortable: (typeof formElement.sortable !== 'undefined')
? formElement.sortable
: true,
formtype: (formElement.tableHeaderType && formElement.tableHeaderType[rowkey])
? formElement.tableHeaderType[rowkey]
: 'text',
defaultValue: (formElement.tableHeaderDefaultValue && formElement.tableHeaderDefaultValue[rowkey])
? formElement.tableHeaderDefaultValue[rowkey]
: (selectOptions.length)
? selectOptions[0].value
: undefined,
formoptions: selectOptions,
footerFormElementPassProps: Object.assign({
placeholder: capitalize(rowkey),
}, formElement.footerFormElementPassProps),
};
});
};
let useRowButtons = formElement.rowButtons;
let ignoreTableHeaders = formElement.ignoreTableHeaders || [];
let tableHeaders = (formElement.headers)
? (formElement.useStandardHeaders)
? getTableHeaders(formElement.headers.map(header => header.sortid))
: formElement.headers
: (initialValue && Array.isArray(initialValue) && initialValue.length)
? getTableHeaders(Object.keys(initialValue[0]).filter(header => ignoreTableHeaders.indexOf(header) === -1))
: [];
tableHeaders = (useRowButtons)
? tableHeaders.concat({
label: formElement.rowOptionsLabel || '',
formtype: false,
formRowButtons: true,
formRowButtonProps: formElement.formRowButtonProps,
})
: tableHeaders.concat({
label: '',
formtype: false,
});
tableHeaders = tableHeaders.map(header => {
if ((header.formtype === 'select' || header.formtype === 'dropdown') && !header.formoptions) {
header.formoptions = (header.sortid && this.state.__formOptions && this.state.__formOptions[header.sortid])
? this.state.__formOptions[header.sortid]
: [];
}
return header;
})
let passedProps = Object.assign(
{},
this.props,
{
selectEntireRow: formElement.selectEntireRow,
insertSelectedRowHeaderIndex: formElement.insertSelectedRowHeaderIndex,
selectOptionSortId: formElement.selectOptionSortId,
selectOptionSortIdLabel: formElement.selectOptionSortIdLabel,
flattenRowData: formElement.flattenRowData,
addNewRows: formElement.addNewRows,
sortable: formElement.sortable,
replaceButton: false,
uploadAddButton: true,
useInputRows: formElement.useInputRows,
rows: initialValue,
headers: tableHeaders,
limit: 5000,
hasPagination: false,
tableForm: true,
uniqueFormOptions: formElement.uniqueFormOptions,
},
formElement.passProps
);// formElement.datalist,
// console.log({ tableHeaders, useRowButtons,passedProps });
// console.debug({tableHeaders})
// let shape ={};// this is the header of of the footer which has elements for new insert
// let inlineshape ={};// if true, should look like a regular form row, else form below
// console.debug({formElement,initialValue, },'this.state',this.state);
return (<FormItem key={i} {...formElement.layoutProps} >
{getFormLabel(formElement)}
<ResponsiveTable {...passedProps}
onChange={(newvalue) => {
let selectedRowData = (formElement.selectEntireRow && (newvalue.selectedRowData || newvalue.selectedRowIndex))
? {
[`${formElement.name}__tabledata`]: {
selectedRowData: newvalue.selectedRowData,
selectedRowIndex: newvalue.selectedRowIndex,
},
}
: {};
let flattenedData = (this.props.flattenFormData)
? flatten(Object.assign({}, selectedRowData, { [formElement.name]: newvalue.rows, }))
: {};
let updatedStateProp = Object.assign({
formDataTables: Object.assign({}, this.state.formDataTables, { [formElement.name]: newvalue.rows, }),
[formElement.name]: newvalue.rows,
}, flattenedData, selectedRowData);
if (formElement.onChangeFilter) {
const onChangeFunc = getFunctionFromProps.call(this, { propFunc: formElement.onChangeFilter });
updatedStateProp = onChangeFunc.call(this, Object.assign({}, this.state, updatedStateProp), updatedStateProp);
}
// console.debug('DATATABLE', updatedStateProp);
this.setState(updatedStateProp);
}}
value={initialValue} />
{getCustomErrorLabel(hasError, this.state, formElement)}
</FormItem>);
}
export function getFormDatalist(options) {
let { formElement, i, } = options;
let initialValue = getInitialValue(formElement, Object.assign({}, this.state, unflatten(this.state)));
let hasError = getErrorStatus(this.state, formElement.name);
let passedProps = Object.assign({},
this.props,
{
wrapperProps: {
style: {
display: 'flex',
width: '100%',
flex: '5',
alignItems: 'stretch',
flexDirection: 'column',
},
},
passableProps: {
help: getFormElementHelp(hasError, this.state, formElement.name),
color: (hasError) ? 'isDanger' : undefined,
icon: (hasError) ? formElement.errorIcon || 'fa fa-exclamation' : undefined,
placeholder: formElement.placeholder,
style: {
width: '100%',
},
},
},
formElement.datalist);
// console.debug({formElement,initialValue, },'this.state',this.state);
// console.debug({ passedProps });
if (formElement.datalist.staticSearch) {
// let datalistdata = this.state[formElement.name];
let datalistdata = [];
if (this.props.__formOptions && this.props.__formOptions[formElement.name]) {
datalistdata = this.props.__formOptions[formElement.name];
} else {
datalistdata = this.props.formdata[pluralize(formElement.datalist.entity)] || [];
}
passedProps.datalistdata = datalistdata;
}
return (<FormItem key={i} {...formElement.layoutProps} >
{getFormLabel(formElement)}
<ResponsiveDatalist {...passedProps}
onChange={(newvalue) => {
let updatedStateProp = {};
updatedStateProp[formElement.name] = newvalue;
this.setState(updatedStateProp);
}}
value={initialValue} />
</FormItem>);
}
export function getFormCombobox(options) {
const { formElement, i, } = options;
const customLabel = getCustomFormLabel.bind(this);
const wrapperProps = Object.assign({
className: '__re-bulma_control',
}, formElement.wrapperProps)
this.state[formElement.name] = this.state[formElement.name] || []
let comboboxInput;
const handleAddition = () => {
if (comboboxInput.value) {
this.setState({ [formElement.name]: [comboboxInput.value, ...this.state[formElement.name]] })
comboboxInput.value = "";
}
}
const handleDelete = (idx) => {
this.state[formElement.name].splice(idx, 1)
this.setState({ [formElement.name]: this.state[formElement.name]})
}
return (<FormItem key={i} {...formElement.layoutProps} initialIcon={formElement.initialIcon}>
{formElement.customLabel ? customLabel(formElement) : getFormLabel(formElement)}
<div role="combobox" {...wrapperProps} style={Object.assign({}, wrapperProps.style, { position: 'relative' })}>
<div className="__re-bulma_control __ra_combobox_item">
<input className="__re-bulma_input" ref={(ref) => comboboxInput = ref} />
<Button color="isSuccess" onClick={handleAddition}>ADD</Button>
</div>
{this.state[formElement.name] && Array.isArray(this.state[formElement.name])
? this.state[formElement.name].map((el, idx) => {
return (
<div className="__re-bulma_control __ra_combobox_item" key={`${formElement.name}_combobox_${idx}`}>
<input className="__re-bulma_input" value={el} readOnly/>
<Button color="isDanger" onClick={() => handleDelete(idx)}>Delete</Button>
</div>
)
})
: null
}
</div>
</FormItem>);
}
export function getFormDropdown(options) {
let { formElement, i, } = options;
let initialValue = getInitialValue(formElement, Object.assign({}, this.state, unflatten(this.state)));
let hasError = getErrorStatus(this.state, formElement.name);
let hasValue = (formElement.name && this.state[formElement.name]) ? true : false;
let isValid = getValidStatus(this.state, formElement.name);
let customLabel = getCustomFormLabel.bind(this);
let wrapperProps = Object.assign({
className: '__re-bulma_control',
}, formElement.wrapperProps)
let _renderContentComponent = (content) => {
if (typeof content === 'object' && !Array.isArray(content)) {
return this.getRenderedComponent(content);
} else {
return content;
}
}
wrapperProps.className = ((hasError || isValid || formElement.initialIcon) && (formElement.errorIconRight || formElement.errorIconLeft)) ? (formElement.errorIconRight) ?
wrapperProps.className + ' __re-bulma_has-icon __re-bulma_has-icon-right'
: wrapperProps.className + ' __re-bulma_has-icon __re-bulma_has-icon-left'
: wrapperProps.className;
wrapperProps.className = (formElement.leftIcon || formElement.updateIconOnChange) ? wrapperProps.className + ' __ra-left-icon' : wrapperProps.className;
let onChange;
let passedProps = formElement.passProps;
let getPassablePropkeyevents = getPassablePropsKeyEvents.bind(this);
passedProps = getPassablePropkeyevents(passedProps, formElement);
let dropdowndata = [];
let displayField = (formElement.passProps.displayField) ? formElement.passProps.displayField : 'label';
let valueField = (formElement.passProps.valueField) ? formElement.passProps.valueField : 'value';
let imageField = (formElement.passProps.imageField) ? formElement.passProps.imageField : 'image';
if (this.props.__formOptions && formElement.formoptions_field && this.props.__formOptions[formElement.formoptions_field]) {
dropdowndata = this.props.__formOptions[formElement.formoptions_field];
dropdowndata = dropdowndata.map(option => ((option[imageField])
? { text: _renderContentComponent(option[displayField]), value: option[valueField], key: option[valueField], image: { avatar: true, src: option[imageField] }, }
: { text: _renderContentComponent(option[displayField]), value: option[valueField], key: option[valueField], icon: option.icon, selectedLabelStyle: option.selectedLabelStyle, content: (option.content) ? this.getRenderedComponent(option.content) : null }));
}
else if (this.props.__formOptions && this.props.__formOptions[formElement.name]) {
dropdowndata = this.props.__formOptions[formElement.name];
dropdowndata = dropdowndata.map(option => ((option[imageField])
? { text: _renderContentComponent(option[displayField]), value: option[valueField], key: option[valueField], image: { avatar: true, src: option[imageField] }, }
: { text: _renderContentComponent(option[displayField]), value: option[valueField], key: option[valueField], icon: option.icon, selectedLabelStyle: option.selectedLabelStyle, content: (option.content) ? this.getRenderedComponent(option.content) : null }));
} else {
dropdowndata = formElement.options || [];
dropdowndata = dropdowndata.map(option => ((option[imageField])
? { text: _renderContentComponent(option[displayField]), value: option[valueField], key: option[valueField], image: { avatar: true, src: option[imageField] }, }
: { text: _renderContentComponent(option[displayField]), value: option[valueField], key: option[valueField], icon: option.icon, selectedLabelStyle: option.selectedLabelStyle, content: (option.content) ? this.getRenderedComponent(option.content) : null }));
}
passedProps.options = dropdowndata;
if (formElement.disableOnChange) {
onChange = () => { return () => { } };
} else if (!onChange && formElement.passProps.multiple) {
onChange = (event, newvalue) => {
let updatedStateProp = {};
newvalue.options.forEach((val, idx) => {
if (newvalue.value[idx]) updatedStateProp[`${formElement.name}.${idx}`] = newvalue.value[idx];
else updatedStateProp[`${formElement.name}.${idx}`] = undefined;
});
this.setState(updatedStateProp, () => {
if (formElement.validateOnChange) {
this.validateFormElement({ formElement, });
} else if (formElement.valueCheckOnChange) {
this.valueCheckFormElement({ formElement })
}
});
}
} else if (!onChange) {
onChange = (event, newvalue) => {
let updatedStateProp = {};
updatedStateProp[formElement.name] = newvalue.value;
this.setState(updatedStateProp, () => {
if (formElement.validateOnChange) {
this.validateFormElement({ formElement, });
} else if (formElement.valueCheckOnChange) {
this.valueCheckFormElement({ formElement })
}
});
}
}
let customCallbackfunction;
if (formElement.customOnChange) {
if (formElement.customOnChange.indexOf('func:this.props') !== -1) {
customCallbackfunction = this.props[formElement.customOnChange.replace('func:this.props.', '')];
} else if (formElement.customOnChange.indexOf('func:window') !== -1 && typeof window[formElement.customOnChange.replace('func:window.', '')] === 'function') {
customCallbackfunction = window[formElement.customOnChange.replace('func:window.', '')].bind(this, formElement);
}
}
formElement.customIconStyle = Object.assign({}, { right: "24px" }, formElement.customIconStyle);
if (formElement.passProps.multiple && Array.isArray(unflatten(this.state)[formElement.name])) {
initialValue = unflatten(this.state)[formElement.name].filter(i => i !== undefined);
}
return (<FormItem key={i} {...formElement.layoutProps} initialIcon={formElement.initialIcon} isValid={isValid} hasError={hasError} hasValue={hasValue}>
{formElement.customLabel ? customLabel(formElement) : getFormLabel(formElement)}
<div {...wrapperProps} style={Object.assign({}, wrapperProps.style, { position: 'relative' })}>
<Dropdown
fluid
selection
{...passedProps}
renderLabel={(label) => ({
icon: label.icon,
content: label.text,
image: label.image,
style: label.selectedLabelStyle
})}
value={initialValue}
onChange={(event, newvalue) => {
onChange.call(this, event, newvalue);
if (customCallbackfunction) customCallbackfunction(event, newvalue);
}}
/>
{getCustomLeftIcon(formElement, this.state)}
{getCustomErrorIcon(hasError, isValid, this.state, formElement)}
{getCustomErrorLabel(hasError, this.state, formElement)}
</div>
</FormItem>);
}
export function getFormRemoteDropdown(options) {
let { formElement, i, } = options;
let initialValue = getInitialValue(formElement, Object.assign({}, this.state, unflatten(this.state)));
let hasError = getErrorStatus(this.state, formElement.name);
let hasValue = (formElement.name && this.state[formElement.name]) ? true : false;
let isValid = getValidStatus(this.state, formElement.name);
let customLabel = getCustomFormLabel.bind(this);
let wrapperProps = Object.assign({
className: '__re-bulma_control',
}, formElement.wrapperProps)
wrapperProps.className = ((hasError || isValid || formElement.initialIcon) && (formElement.errorIconRight || formElement.errorIconLeft)) ? (formElement.errorIconRight) ?
wrapperProps.className + ' __re-bulma_has-icon __re-bulma_has-icon-right'
: wrapperProps.className + ' __re-bulma_has-icon __re-bulma_has-icon-left'
: wrapperProps.className;
let onChange;
let passedProps = Object.assign({}, this.props, formElement.passProps);
let getPassablePropkeyevents = getPassablePropsKeyEvents.bind(this);
passedProps = getPassablePropkeyevents(passedProps, formElement);
let dropdowndata = [];
let updatedState = {};
if (formElement.disableOnChange) {
onChange = () => { return () => { } };
} else if (!onChange && formElement.passProps.multiple) {
onChange = (event, newvalue) => {
let updatedStateProp = {};
newvalue.options.forEach((val, idx) => {
if (newvalue.value[idx]) updatedStateProp[`${formElement.name}.${idx}`] = newvalue.value[idx];
else updatedStateProp[`${formElement.name}.${idx}`] = undefined;
});
this.setState(updatedStateProp, () => {
if (formElement.validateOnChange) {
this.validateFormElement({ formElement, });
} else if (formElement.valueCheckOnChange) {
this.valueCheckFormElement({ formElement })
}
});
}
} else if (!onChange) {
onChange = (event, newvalue) => {
let updatedStateProp = {};
updatedStateProp[formElement.name] = newvalue.value;
this.setState(updatedStateProp, () => {
if (formElement.validateOnChange) {
this.validateFormElement({ formElement, });
} else if (formElement.valueCheckOnChange) {
this.valueCheckFormElement({ formElement })
}
});
}
}
let customCallbackfunction;
if (formElement.customOnChange) {
if (formElement.customOnChange.indexOf('func:this.props') !== -1) {
customCallbackfunction = this.props[formElement.customOnChange.replace('func:this.props.', '')];
} else if (formElement.customOnChange.indexOf('func:window') !== -1 && typeof window[formElement.customOnChange.replace('func:window.', '')] === 'function') {
customCallbackfunction = window[formElement.customOnChange.replace('func:window.', '')].bind(this, formElement);
}
}
formElement.customIconStyle = Object.assign({}, { right: "24px" }, formElement.customIconStyle);
if (formElement.passProps.multiple && Array.isArray(unflatten(this.state)[formElement.name])) {
initialValue = unflatten(this.state)[formElement.name].filter(i => i !== undefined);
}
return (<FormItem key={i} {...formElement.layoutProps} initialIcon={formElement.initialIcon} isValid={isValid} hasError={hasError} hasValue={hasValue}>
{formElement.customLabel ? customLabel(formElement) : getFormLabel(formElement)}
<div {...wrapperProps}>
<RemoteDropdown
{...passedProps}
value={initialValue}
onChange={(event, newvalue) => {
onChange.call(this, event, newvalue);
if (customCallbackfunction) customCallbackfunction(event, newvalue);
}}
/>
{getCustomErrorIcon(hasError, isValid, this.state, formElement)}
{getCustomErrorLabel(hasError, this.state, formElement)}
</div>
</FormItem>);
}
export function getFormMaskedInput(options) {
let { formElement, i, /*formgroup, width,*/ onChange, } = options;
let initialValue = getInitialValue(formElement, this.state);
let getPassablePropkeyevents = getPassablePropsKeyEvents.bind(this);
let fileClassname = `__reactapp_file_${formElement.name}`;
let hasError = getErrorStatus(this.state, formElement.name);
let hasValue = (formElement.name && this.state[formElement.name]) ? true : false;
let isValid = getValidStatus(this.state, formElement.name);
let customLabel = getCustomFormLabel.bind(this);
let passableProps = Object.assign({
type: 'text',
className: '__re-bulma_input',
}, formElement.passProps);
if (typeof initialValue !== 'string') {
initialValue = JSON.stringify(initialValue, null, 2);
}
if (formElement.disableOnChange) {
onChange = () => { };
} else if (!onChange) {
onChange = (event) => {
let text = event.target.value;
let updatedStateProp = {};
if (passableProps && passableProps.multiple) {
document.querySelector(`.${fileClassname} input`).setAttribute('multiple', true);
}
updatedStateProp[formElement.name] = (passableProps.maxLength) ? text.substring(0, passableProps.maxLength) : text;
this.setState(updatedStateProp);
};
}
passableProps = getPassablePropkeyevents(passableProps, formElement);
if (passableProps && passableProps.multiple) {
let t = setImmediate(() => {
document.querySelector(`.${fileClassname} input`).setAttribute('multiple', true);
clearImmediate(t);
});
}
formElement.customErrorProps = (formElement.customErrorProps) ? Object.assign({}, { marginTop: '6px' }, formElement.customErrorProps) : { marginTop: '6px' };
let mask = [];
function maskFunction(maskProp) {
return function () {
// return [ '(', /[1-9]/, /\d/, /\d/, ')', '\u2000', /\d/, /\d/, /\d/, '-', /\d/, /\d/, /\d/, /\d/ ];
if (Array.isArray(maskProp)) {
const maskArray = maskProp.map(maskItem => {
if (maskItem.charAt(0) === '/' && maskItem.charAt(maskItem.length - 1) === '/') {
if (maskItem.charAt(1) === '[') {
return new RegExp(maskItem.slice(1, maskItem.length - 1));
} else {
return new RegExp(`\\${maskItem.slice(1, maskItem.length - 1)}`);
}
} else {
return maskItem;
}
});
return maskArray;
} else {
return maskProp;
}
}
}
if (formElement.createNumberMask && typeof passableProps.mask === 'string' && passableProps.mask.indexOf('func:window') !== -1 && typeof window[passableProps.mask.replace('func:window.', '')] === 'function') {
let numberMaskConfig = (typeof window[passableProps.mask.replace('func:window.', '')].call(this, formElement) === 'object') ? window[passableProps.mask.replace('func:window.', '')].call(this, formElement) : {};
mask = createNumberMask(numberMaskConfig);
} else if (typeof passableProps.mask === 'string' && passableProps.mask.indexOf('func:window') !== -1 && typeof window[passableProps.mask.replace('func:window.', '')] === 'function') {
mask = window[passableProps.mask.replace('func:window.', '')].bind(this, formElement);
} else if (formElement.createNumberMask) {
// console.log('passableProps.numberMask',passableProps.numberMask)
mask = createNumberMask(maskFunction(passableProps.mask));
} else if (passableProps.mask) {
mask = maskFunction(passableProps.mask);
}
// console.log({mask})
let wrapperProps = Object.assign({
className: '__re-bulma_control',
}, formElement.wrapperProps);
wrapperProps.className = ((hasError || isValid || formElement.initialIcon) && (formElement.errorIconRight || formElement.errorIconLeft)) ? (formElement.errorIconRight) ?
wrapperProps.className + ' __re-bulma_has-icon __re-bulma_has-icon-right'
: wrapperProps.className + ' __re-bulma_has-icon __re-bulma_has-icon-left'
: wrapperProps.className;
wrapperProps.className = (formElement.leftIcon) ? wrapperProps.className + ' __ra-left-icon' : wrapperProps.className;
return (<FormItem key={i} {...formElement.layoutProps} initialIcon={formElement.initialIcon} isValid={isValid} hasError={hasError} hasValue={hasValue} >
{formElement.customLabel ? customLabel(formElement) : getFormLabel(formElement)}
<span {...wrapperProps} style={Object.assign({}, wrapperProps.style, { position: 'relative' })}>
<MaskedInput
{...passableProps}
mask={mask}
className={(hasError) ? passableProps.className + ' __re-bulma_is-danger' : passableProps.className}
color={(hasError) ? 'isDanger' : undefined}
onChange={onChange}
placeholder={formElement.placeholder}
value={initialValue} />
{getCustomLeftIcon(formElement)}
{getCustomErrorIcon(hasError, isValid, this.state, formElement)}
{getCustomErrorLabel(hasError, this.state, formElement)}
</span>
</FormItem>);
}
export function getFormAddressAPIInput(options) {
let applicationSettings = this.props.getState().settings;
let { formElement, i, /*formgroup, width,*/ onChange, } = options;
let initialValue = getInitialValue(formElement, this.state);
let getPassablePropkeyevents = getPassablePropsKeyEvents.bind(this);
let hasError = getErrorStatus(this.state, formElement.name);
let isValid = getValidStatus(this.state, formElement.name);
let hasValue = (formElement.name && this.state[formElement.name]) ? true : false;
let customLabel = getCustomFormLabel.bind(this);
let submitMultipartForm;
let passableProps = Object.assign({
type: formElement.type || 'text',
}, formElement.passProps);
let wrapperProps = Object.assign({},
formElement.wrapperProps, {
className: `__re-bulma_control __re-bulma_has-icon __re-bulma_has-icon-right${(formElement.leftIcon) ? ' __ra-left-icon' : ''} ${(formElement.wrapperProps && formElement.wrapperProps.className) ? formElement.wrapperProps.className : ''}`,
})
if (initialValue && typeof initialValue === 'object') {
initialValue = initialValue.formatted_address || '';
}
if (formElement.disableOnChange) {
onChange = () => { };
} else if (!onChange) {
onChange = (value) => {
let updatedStateProp = {};
let customCallbackfunction;
updatedStateProp[formElement.name] = value.target.value;
if (formElement.onChangeFilter) {
const onChangeFunc = getFunctionFromProps.call(this, { propFunc: formElement.onChangeFilter });
updatedStateProp = onChangeFunc.call(this, Object.assign({}, this.state, updatedStateProp), updatedStateProp);
} else if (formElement.customOnChange) {
if (formElement.customOnChange.indexOf('func:this.props') !== -1) {
customCallbackfunction = this.props[formElement.customOnChange.replace('func:this.props.', '')];
} else if (formElement.customOnChange.indexOf('func:window') !== -1 && typeof window[formElement.customOnChange.replace('func:window.', '')] === 'function') {
customCallbackfunction = window[formElement.customOnChange.replace('func:window.', '')].bind(this, formElement);
}
}
this.setState(updatedStateProp);
if (typeof customCallbackfunction === 'function') customCallbackfunction();
};
}
passableProps = getPassablePropkeyevents(passableProps, formElement);
function handlePlaceSelect() {
let addressObject = formElement.autocomplete.getPlace();
let addressData = { formatted_address: addressObject.formatted_address };
let address = addressObject.address_components;
if (formElement.passProps && formElement.passProps.include_places_detail && address) {
let fieldConfig = formElement.passProps.fieldConfig || {}
for (let i = 0; i < address.length; i++) {
let addressChunk = address[i];
if (addressChunk.types && addressChunk.types[0]) {
let addressType = addressChunk.types[0];
if (fieldConfig[addressType]) {
let name_type = (fieldConfig[addressType].short) ? 'short_name' : 'long_name';
let field_name = (fieldConfig[addressType].field_name) ? fieldConfig[addressType].field_name : addressType;
addressData[field_name] = addressChunk[name_type];
}
}
}
}
let updateData;
if (formElement.passProps && formElement.passProps.include_places_detail && address) {
updateData = Object.assign({}, addressData, {
query: addressObject.formatted_address,
});
} else {
updateData = addressObject.formatted_address;
}
onChange({
target: {
value: updateData
}
});
}
function handleScriptLoad() {
let options = {
types: ['address'],
componentRestrictions: { country: "us" },
};
if (formElement.passProps && formElement.passProps.include_places_detail) {
options.fields = ["formatted_address", 'address_components'];
} else {
options.fields = ["formatted_address",];
}
/*global google*/ // PLEASE KEEP THIS LINE To disable any eslint 'google not defined' errors
formElement.autocomplete = new google.maps.places.Autocomplete(
document.querySelector(`.autocomplete_address_${formElement.name} > input`),
options,
);
formElement.autocomplete.setFields(['address_components', 'formatted_address']);
formElement.autocomplete.addListener('place_changed', handlePlaceSelect);
}
handlePlaceSelect = handlePlaceSelect.bind(this);
handleScriptLoad = handleScriptLoad.bind(this);
if (submitMultipartForm) clearTimeout(submitMultipartForm);
if (applicationSettings && applicationSettings.credentials && applicationSettings.credentials.google_places_api) {
let api_credential = applicationSettings.credentials.google_places_api;
let inputProps = (formElement.passProps && formElement.passProps.inputProps) ? formElement.passProps.inputProps : {};
let className = passableProps.className ? passableProps.className : ''
className += ` autocomplete_address_${formElement.name}`
return (<FormItem key={i} {...formElement.layoutProps} initialIcon={formElement.initialIcon} isValid={isValid} hasError={hasError} hasValue={hasValue} >
{formElement.customLabel ? customLabel(formElement) : getFormLabel(formElement)}
<div {...wrapperProps} style={Object.assign({}, wrapperProps.style, { position: 'relative' })}>
<Script
url={`https://maps.googleapis.com/maps/api/js?key=${api_credential}&libraries=places`}
onLoad={handleScriptLoad}
/>
<Input
{...passableProps}
{...inputProps}
value={initialValue}
className={className}
onChange={(e) => { this.setState({ [formElement.name]: e.target.value }) }}
help={getFormElementHelp(hasError, this.state, formElement.name)}
color={(hasError) ? 'isDanger' : undefined}
icon={(formElement.leftIcon) ? formElement.leftIcon : null}
hasIcon={true}
placeholder={formElement.placeholder} />
{getCustomErrorIcon(hasError, isValid, this.state, formElement)}
</div>
</FormItem>);
} else {
return (<FormItem key={i} {...formElement.layoutProps} initialIcon={formElement.initialIcon} isValid={isValid} hasError={hasError} hasValue={hasValue} >
{formElement.customLabel ? customLabel(formElement) : getFormLabel(formElement)}
<div {...wrapperProps} style={Object.assign({}, wrapperProps.style, { position: 'relative' })}>
<Input {...passableProps}
help={getFormElementHelp(hasError, this.state, formElement.name)}
color={(hasError) ? 'isDanger' : undefined}
icon={(formElement.leftIcon) ? formElement.leftIcon : null}
hasIcon={true}
onChange={onChange}
placeholder={formElement.placeholder}
value={initialValue} />
{getCustomErrorIcon(hasError, isValid, this.state, formElement)}
</div>
</FormItem>);
}
}
export function getFormTextInputArea(options) {
let { formElement, i, /*formgroup, width,*/ onChange, } = options;
let initialValue = getInitialValue(formElement, this.state); //formElement.value || this.state[ formElement.name ] || getPropertyAttribute({ element:formElement, property:this.state, });
let getPassablePropkeyevents = getPassablePropsKeyEvents.bind(this);
let fileClassname = `__reactapp_file_${formElement.name}`;
let hasError = getErrorStatus(this.state, formElement.name);
let isValid = getValidStatus(this.state, formElement.name);
let hasValue = (formElement.name && this.state[formElement.name]) ? true : false;
let customLabel = getCustomFormLabel.bind(this);
let submitMultipartForm;
let passableProps = Object.assign({
type: formElement.type || 'text',
}, formElement.passProps);
if (passableProps && passableProps.type === 'file') {
passableProps.className = fileClassname;
}
let wrapperProps = Object.assign({},
formElement.wrapperProps, {
className: `__re-bulma_control __re-bulma_has-icon __re-bulma_has-icon-right${(formElement.leftIcon) ? ' __ra-left-icon' : ''} ${(formElement.wrapperProps && formElement.wrapperProps.className) ? formElement.wrapperProps.className : ''}`,
})
if (typeof initialValue !== 'string') {
initialValue = JSON.stringify(initialValue, null, 2);
}
if (formElement.disableOnChange) {
onChange = () => { };
} else if (!onChange) {
onChange = (event) => {
let text = event.target.value;
let updatedStateProp = {};
let customCallbackfunction;
if (passableProps && passableProps.multiple) {
document.querySelector(`.${fileClassname} input`).setAttribute('multiple', true);
}
if (passableProps && passableProps.type === 'file') {
updatedStateProp.formDataFiles = Object.assign({}, this.state.formDataFiles, {
[formElement.name]: document.querySelector(`.${fileClassname} input`),
});
if (formElement.submitOnChange) {
submitMultipartForm = setTimeout(() => {
this.submitForm();
}, 0);
setTimeout(() => {
window.location.reload();
}, 1000);
}
} else {
updatedStateProp[formElement.name] = (passableProps.maxLength) ? text.substring(0, passableProps.maxLength) : text;
}
if (formElement.onChangeFilter) {
const onChangeFunc = getFunctionFromProps.call(this, { propFunc: formElement.onChangeFilter });
updatedStateProp = onChangeFunc.call(this, Object.assign({}, this.state, updatedStateProp), updatedStateProp);
} else if (formElement.customOnChange) {
if (formElement.customOnChange.indexOf('func:this.props') !== -1) {
customCallbackfunction = this.props[formElement.customOnChange.replace('func:this.props.', '')];
} else if (formElement.customOnChange.indexOf('func:window') !== -1 && typeof window[formElement.customOnChange.replace('func:window.', '')] === 'function') {
customCallbackfunction = window[formElement.customOnChange.replace('func:window.', '')].bind(this, formElement);
}
}
this.setState(updatedStateProp);
if (typeof customCallbackfunction === 'function') customCallbackfunction();
};
}
passableProps = getPassablePropkeyevents(passableProps, formElement);
// console.debug({ passableProps });
if (passableProps && passableProps.multiple) {
let t = setImmediate(() => {
document.querySelector(`.${fileClassname} input`).setAttribute('multiple', true);
clearImmediate(t);
});
}
if (submitMultipartForm) clearTimeout(submitMultipartForm);
return (<FormItem key={i} {...formElement.layoutProps} initialIcon={formElement.initialIcon} isValid={isValid} hasError={hasError} hasValue={hasValue} >
{formElement.customLabel ? customLabel(formElement) : getFormLabel(formElement)}
<div {...wrapperProps} style={Object.assign({}, wrapperProps.style, { position: 'relative', display: 'block' })}>
<Input {...passableProps}
help={getFormElementHelp(hasError, this.state, formElement.name)}
color={(hasError) ? 'isDanger' : undefined}
icon={(formElement.leftIcon) ? formElement.leftIcon : null}
hasIcon={true}
onChange={onChange}
placeholder={formElement.placeholder}
value={initialValue} />
{getCustomErrorIcon(hasError, isValid, this.state, formElement)}
</div>
</FormItem>);
}
export function ge