Skip to content

Commit

Permalink
Merge pull request #1 from typesettin/master
Browse files Browse the repository at this point in the history 
merger master
  • Loading branch information
@fanniew506
fanniew506 authored Nov 13, 2017
2 parents 63db205 + 2d33e15 commit 59df75f
Show file tree
Hide file tree
Showing 32 changed files with 721 additions and 356 deletions.
10 changes: 7 additions & 3 deletions adminclient/_src/components/AppLayoutMap/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -250,18 +250,22 @@ function getRenderedComponent(componentObject, resources, debug) {
eprops[epropName] = eval(componentObject.__dangerouslyEvalProps[epropName]);
return eprops;
}, {}) : {};
var insertedComponents = componentObject.__dangerouslyInsertComponents ? (0, _keys2.default)(componentObject.__dangerouslyInsertComponents).reduce(function (cprops, cpropName) {
// eslint-disable-next-line
cprops[cpropName] = getRenderedComponent.call(_this, componentObject.__dangerouslyInsertComponents[cpropName], resources, debug);
return cprops;
}, {}) : {};
// if (componentObject.__dangerouslyInsertComponents){ console.log({ insertedComponents });}
var renderedCompProps = (0, _assign2.default)({
key: renderIndex
}, thisDotProps, thisprops, componentObject.props, asyncprops, windowprops, evalProps);
}, thisDotProps, thisprops, componentObject.props, asyncprops, windowprops, evalProps, insertedComponents);

//Allowing for window functions
if (componentObject.hasWindowFunc || componentObject.hasPropFunc) {
(0, _keys2.default)(renderedCompProps).forEach(function (key) {
// if (typeof renderedCompProps[key] ==='string' && renderedCompProps[key].indexOf('func:window') !== -1 && typeof window[ renderedCompProps[key].replace('func:window.', '') ] ==='function'){
// renderedCompProps[key]= window[ renderedCompProps[key].replace('func:window.', '') ].bind(this);
// }


if (typeof renderedCompProps[key] === 'string' && renderedCompProps[key].indexOf('func:') !== -1) {
renderedCompProps[key] = getFunction({ propFunc: renderedCompProps[key] });
}
Expand Down
2 changes: 2 additions & 0 deletions adminclient/_src/components/FormItem/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -49,6 +49,8 @@ var FormItem = function (_Component) {
value: function render() {
var className = this.props.hasValue ? '__form_element_has_value' : '';
className = this.props.hasError ? (className ? className + ' ' : '') + '__form_element_has_error' : className;
className = this.props.isValid ? (className ? className + ' ' : '') + '__form_element_is_valid' : className;
className = this.props.initialIcon ? (className ? className + ' ' : '') + '__form_element_initial_icon' : className;
if (this.props.innerFormItem) {
return this.props.horizontalform ? _react2.default.createElement(
_reBulma.FormHorizontal,
Expand Down
43 changes: 26 additions & 17 deletions adminclient/_src/components/ResponsiveDatalist/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -32,6 +32,10 @@ var _inherits2 = require('babel-runtime/helpers/inherits');

var _inherits3 = _interopRequireDefault(_inherits2);

var _keys = require('babel-runtime/core-js/object/keys');

var _keys2 = _interopRequireDefault(_keys);

var _react = require('react');

var _react2 = _interopRequireDefault(_react);
Expand Down Expand Up @@ -63,7 +67,9 @@ function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj;
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

var propTypes = {
returnProperty: _react.PropTypes.any, //false or string property value
disabled: _react.PropTypes.bool,
returnFormOptionsValue: _react.PropTypes.bool,
selector: _react.PropTypes.string,
displayfield: _react.PropTypes.string,
dbname: _react.PropTypes.string,
Expand All @@ -85,6 +91,8 @@ var propTypes = {

var defaultProps = {
disabled: false,
returnProperty: false,
returnFormOptionsValue: false,
data: false,
selectedData: false,
createable: false,
Expand All @@ -101,6 +109,12 @@ var defaultProps = {
}
};

function getDatumValue(datum) {
var returnProperty = this.props.returnFormOptionsValue || (0, _keys2.default)(datum).length === 2 && typeof datum.label !== 'undefined' && typeof datum.value !== 'undefined' ? 'value' : this.props.returnProperty;

return returnProperty ? datum[returnProperty] : datum;
}

var ResponsiveDatalist = function (_Component) {
(0, _inherits3.default)(ResponsiveDatalist, _Component);

Expand All @@ -119,6 +133,7 @@ var ResponsiveDatalist = function (_Component) {
_this.inputProps = (0, _assign2.default)({}, _this.props.passableProps);
_this.searchFunction = (0, _debounce2.default)(_this.updateDataList, 200);
_this.filterStaticData = _this.filterStaticData.bind(_this);
_this.getDatum = getDatumValue.bind(_this);
return _this;
}

Expand All @@ -134,7 +149,9 @@ var ResponsiveDatalist = function (_Component) {
value: function filterStaticData(options) {
var _this2 = this;

return this.props.datalistdata.filter(function (item) {
return this.props.returnFormOptionsValue ? this.props.datalistdata.filter(function (item) {
return item.label.indexOf(options.search) > -1;
}) : this.props.datalistdata.filter(function (item) {
return item[_this2.props.field].indexOf(options.search) > -1;
});
}
Expand All @@ -161,19 +178,13 @@ var ResponsiveDatalist = function (_Component) {
}, stateProps.settings.userprofile.options.headers);
_util2.default.fetchComponent(fetchURL, { headers: headers })().then(function (response) {
if (response.data && response.result && response.status) {
// console.log('USE DATA FROM RESPONSE', response.data)
// console.log('this.props.entity',this.props.entity)
// console.log('this.props.field',this.props.field)
response = response.data;
// console.log('pluralize(this.props.entity)',pluralize(this.props.entity))
// console.log('response[pluralize(this.props.entity)]',response[pluralize(this.props.entity)])
}
// console.debug('this.state.value',this.state.value);

var updatedState = {};
updatedState.selectedData = response[(0, _pluralize2.default)(_this3.props.entity)];
updatedState.isSearching = false;
// console.debug({updatedState,response});
_this3.setState(updatedState);
}, function (e) {
_this3.props.errorNotification(e);
Expand All @@ -195,7 +206,8 @@ var ResponsiveDatalist = function (_Component) {
}, {
key: 'onChangeHandler',
value: function onChangeHandler(event) {
this.searchFunction({ search: event.target.value });
var search = event && event.target && event.target.value ? event.target.value : '';
this.searchFunction({ search: search });
}
}, {
key: 'getDatalistDisplay',
Expand All @@ -205,7 +217,7 @@ var ResponsiveDatalist = function (_Component) {
datum = options.datum;
// console.debug('getDatalistDisplay', { options });

var displayText = datum[displayField] || datum.title || datum.name || datum.username || datum.email || datum[selector] || datum;
var displayText = datum[displayField] || datum.title || datum.name || datum.username || datum.email || datum[selector] || '';
return _react2.default.createElement(
'span',
{ style: {
Expand Down Expand Up @@ -243,8 +255,7 @@ var ResponsiveDatalist = function (_Component) {
if (this.props.multi) {
var newValue = (0, _assign2.default)([], [].concat(this.state.value));
newValue.splice(index, 1);
var oldValue = this.state.value;
console.debug({ oldValue: oldValue, newValue: newValue });
// let oldValue = this.state.value;
this.setState({
// value: [],
value: newValue,
Expand All @@ -260,7 +271,6 @@ var ResponsiveDatalist = function (_Component) {
value: datum,
selectedData: false
});
// console.debug({ datum });
this.props.onChange(datum);
}
}
Expand Down Expand Up @@ -332,20 +342,18 @@ var ResponsiveDatalist = function (_Component) {
onClick: function onClick() {
// console.debug('clicked onclick',this.props);
if (_this5.props.multi) {
var newValue = _this5.state.value && Array.isArray(_this5.state.value) && _this5.state.value.length ? _this5.state.value.concat([datum]) : [datum];
// console.debug({newValue})
var newValue = _this5.state.value && Array.isArray(_this5.state.value) && _this5.state.value.length ? _this5.state.value.concat([_this5.getDatum(datum)]) : [_this5.getDatum(datum)];
_this5.setState({
value: newValue,
selectedData: false
});
_this5.props.onChange(newValue);
} else {
// console.debug({datum})
_this5.setState({
value: datum,
value: _this5.getDatum(datum),
selectedData: false
});
_this5.props.onChange(datum);
_this5.props.onChange(_this5.getDatum(datum));
}
} }),
_this5.getDatalistDisplay({
Expand All @@ -364,6 +372,7 @@ var ResponsiveDatalist = function (_Component) {
_react2.default.createElement(rb.Input, (0, _extends3.default)({}, this.inputProps, {
state: this.state.isSearching || undefined,
onChange: this.onChangeHandler.bind(this),
onBlur: this.onChangeHandler.bind(this),
ref: function ref(input) {
_this5.textInput = input;
}
Expand Down
96 changes: 69 additions & 27 deletions adminclient/_src/components/ResponsiveForm/FormElements.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -155,6 +155,10 @@ 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',
Expand All @@ -173,8 +177,10 @@ function getCustomErrorLabel(hasError, state, formelement) {
) : null;
}

function getCustomErrorIcon(hasError, state, formelement) {
return hasError && (formelement.errorIconRight || formelement.errorIconLeft) ? _react2.default.createElement('i', { className: '__re-bulma_fa fa fa-warning' }) : null;
function getCustomErrorIcon(hasError, isValid, state, formelement, iconStyle) {
var iconVar = hasError ? formelement.errorIcon || 'fa fa-warning' : isValid ? formelement.validIcon || 'fa fa-check' : formelement.initialIcon ? formelement.initialIcon : '';

return formelement.errorIconRight || formelement.errorIconLeft ? _react2.default.createElement('i', { className: '__re-bulma_fa ' + iconVar, style: iconStyle }) : null;
}

function valueChangeHandler(formElement) {
Expand Down Expand Up @@ -268,6 +274,17 @@ function getPassablePropsKeyEvents(passableProps, formElement) {
customonBlur(e, formElement);
};
}
if (formElement.onFocus) {
var customFocus = function 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 = function (e) {
customFocus(e, formElement);
};
}
if (formElement.keyUp) {
var customkeyUp = function customkeyUp() {};
if (typeof formElement.keyUp === 'string' && formElement.keyUp.indexOf('func:this.props') !== -1) {
Expand Down Expand Up @@ -458,6 +475,7 @@ function getFormMaskedInput(options) {
var getPassablePropkeyevents = getPassablePropsKeyEvents.bind(this);
var fileClassname = '__reactapp_file_' + formElement.name;
var hasError = getErrorStatus(this.state, formElement.name);
var isValid = getValidStatus(this.state, formElement.name);
var hasValue = formElement.name && this.state[formElement.name] ? true : false;
var passableProps = (0, _assign2.default)({
type: 'text',
Expand Down Expand Up @@ -528,11 +546,11 @@ function getFormMaskedInput(options) {
className: '__re-bulma_control'
}, formElement.wrapperProps);

wrapperProps.className = hasError && (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 = (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;

return _react2.default.createElement(
_FormItem2.default,
(0, _extends3.default)({ key: i }, formElement.layoutProps, { hasError: hasError, hasValue: hasValue }),
(0, _extends3.default)({ key: i }, formElement.layoutProps, { initialIcon: formElement.initialIcon, isValid: isValid, hasError: hasError, hasValue: hasValue }),
getFormLabel(formElement),
_react2.default.createElement(
'span',
Expand All @@ -544,7 +562,7 @@ function getFormMaskedInput(options) {
onChange: onChange,
placeholder: formElement.placeholder,
value: initialValue })),
getCustomErrorIcon(hasError, this.state, formElement),
getCustomErrorIcon(hasError, isValid, this.state, formElement),
getCustomErrorLabel(hasError, this.state, formElement)
)
);
Expand All @@ -561,6 +579,7 @@ function getFormTextInputArea(options) {
var getPassablePropkeyevents = getPassablePropsKeyEvents.bind(this);
var fileClassname = '__reactapp_file_' + formElement.name;
var hasError = getErrorStatus(this.state, formElement.name);
var isValid = getValidStatus(this.state, formElement.name);
var hasValue = formElement.name && this.state[formElement.name] ? true : false;
var passableProps = (0, _assign2.default)({
type: formElement.type || 'text'
Expand Down Expand Up @@ -604,12 +623,12 @@ function getFormTextInputArea(options) {
}
return _react2.default.createElement(
_FormItem2.default,
(0, _extends3.default)({ key: i }, formElement.layoutProps, { hasError: hasError, hasValue: hasValue }),
(0, _extends3.default)({ key: i }, formElement.layoutProps, { initialIcon: formElement.initialIcon, isValid: isValid, hasError: hasError, hasValue: hasValue }),
getFormLabel(formElement),
_react2.default.createElement(_reBulma.Input, (0, _extends3.default)({}, passableProps, {
help: getFormElementHelp(hasError, this.state, formElement.name),
color: hasError ? 'isDanger' : undefined,
icon: hasError ? formElement.errorIcon || 'fa fa-warning' : undefined,
icon: hasError ? formElement.errorIcon || 'fa fa-warning' : isValid ? formElement.validIcon || 'fa fa-check' : formElement.initialIcon ? formElement.initialIcon : undefined,
hasIconRight: formElement.errorIconRight,
onChange: onChange,
placeholder: formElement.placeholder,
Expand All @@ -624,6 +643,7 @@ function getFormTextArea(options) {

var initialValue = getInitialValue(formElement, this.state); //formElement.value || this.state[ formElement.name ] || getPropertyAttribute({ element:formElement, property:this.state, });
var hasError = getErrorStatus(this.state, formElement.name);
var isValid = getValidStatus(this.state, formElement.name);
var hasValue = formElement.name && this.state[formElement.name] ? true : false;
var passableProps = (0, _assign2.default)({}, formElement.passProps);
var getPassablePropkeyevents = getPassablePropsKeyEvents.bind(this);
Expand All @@ -642,14 +662,14 @@ function getFormTextArea(options) {

return _react2.default.createElement(
_FormItem2.default,
(0, _extends3.default)({ key: i }, formElement.layoutProps, { hasError: hasError, hasValue: hasValue }),
(0, _extends3.default)({ key: i }, formElement.layoutProps, { initialIcon: formElement.initialIcon, isValid: isValid, hasError: hasError, hasValue: hasValue }),
getFormLabel(formElement),
_react2.default.createElement(_reBulma.Textarea, (0, _extends3.default)({}, passableProps, {
onChange: function onChange(event) {
return _onChange()(event);
},
help: getFormElementHelp(hasError, this.state, formElement.name),
icon: hasError ? formElement.errorIcon || 'fa fa-warning' : undefined,
icon: hasError ? formElement.errorIcon || 'fa fa-warning' : isValid ? formElement.validIcon || 'fa fa-check' : formElement.initialIcon ? formElement.initialIcon : undefined,
color: hasError ? 'isDanger' : undefined,
hasIconRight: formElement.errorIconRight,
placeholder: formElement.placeholder || formElement.label,
Expand All @@ -664,8 +684,24 @@ function getFormSelect(options) {

var initialValue = getInitialValue(formElement, this.state); //formElement.value || this.state[ formElement.name ] || getPropertyAttribute({ element:formElement, property:this.state, });
var hasError = getErrorStatus(this.state, formElement.name);
var isValid = getValidStatus(this.state, formElement.name);
var hasValue = formElement.name && this.state[formElement.name] ? true : false;
var selectOptions = this.state.__formOptions && this.state.__formOptions[formElement.name] ? this.state.__formOptions[formElement.name] : formElement.options || [];
var iconStyle = {
display: 'inline-block',
fontSize: '1rem',
height: '24px',
lineHeight: '24px',
textAlign: 'center',
verticalAlign: 'top',
width: '24px',
color: '#aeb1b5',
pointerEvents: 'none',
position: 'absolute',
top: '4px',
zIndex: '4',
right: '24px'
};

if (typeof initialValue !== 'string') {
initialValue = (0, _stringify2.default)(initialValue, null, 2);
Expand All @@ -688,26 +724,32 @@ function getFormSelect(options) {

return _react2.default.createElement(
_FormItem2.default,
(0, _extends3.default)({ key: i }, formElement.layoutProps, { hasError: hasError, hasValue: hasValue }),
(0, _extends3.default)({ key: i }, formElement.layoutProps, { initialIcon: formElement.initialIcon, isValid: isValid, hasError: hasError, hasValue: hasValue }),
getFormLabel(formElement),
_react2.default.createElement(
_reBulma.Select,
(0, _extends3.default)({}, formElement.passProps, {
help: getFormElementHelp(hasError, this.state, formElement.name),
color: hasError ? 'isDanger' : undefined,
onChange: function onChange(event) {
_onChange2()(event);
if (customCallbackfunction) customCallbackfunction(event);
},
placeholder: formElement.placeholder || formElement.label,
value: this.state[formElement.name] || initialValue }),
selectOptions.map(function (opt, k) {
return _react2.default.createElement(
'option',
{ key: k, disabled: opt.disabled, value: opt.value },
opt.label || opt.value
);
})
'div',
{ className: '__re-bulma_control', style: { position: 'relative' } },
_react2.default.createElement(
_reBulma.Select,
(0, _extends3.default)({}, formElement.passProps, {
style: (0, _assign2.default)({}, { flex: 'inherit' }, formElement.passProps && formElement.passProps.style ? formElement.passProps.style : {}),
help: getFormElementHelp(hasError, this.state, formElement.name),
color: hasError ? 'isDanger' : undefined,
onChange: function onChange(event) {
_onChange2()(event);
if (customCallbackfunction) customCallbackfunction(event);
},
placeholder: formElement.placeholder || formElement.label,
value: this.state[formElement.name] || initialValue }),
selectOptions.map(function (opt, k) {
return _react2.default.createElement(
'option',
{ key: k, disabled: opt.disabled, value: opt.value },
opt.label || opt.value
);
})
),
!formElement.errorIconLeft ? getCustomErrorIcon(hasError, isValid, this.state, formElement, iconStyle) : null
)
);
}
Expand Down
Loading

0 comments on commit 59df75f

Please sign in to comment.