@tomino/dynamic-form-semantic-ui
Version:
Semantic UI form renderer based on dynamic form generation
153 lines • 6.36 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", { value: true });
const tslib_1 = require("tslib");
const react_1 = tslib_1.__importDefault(require("react"));
const classnames_1 = tslib_1.__importDefault(require("classnames"));
const context_1 = require("./context");
const emotion_1 = require("emotion");
const helpers_1 = require("./helpers");
const error_boundary_1 = require("./vanilla/error_boundary");
const common_1 = require("./common");
const mobx_react_1 = require("mobx-react");
const error_view_1 = require("./semantic/error_view");
exports.breakingLabel = emotion_1.css `
display: block;
font-weight: bold;
margin-top: 3px;
margin-bottom: 3px;
`;
exports.nonBreakingLabel = emotion_1.css `
display: inline-block;
font-weight: bold;
padding-right: 6px;
margin-top: 3px;
margin-bottom: 3px;
`;
const defaultMouseEvents = ['onClick', 'onMouseOver', 'onMouseOut', 'onMouseDown', 'onMouseUp'];
const defaultFormEvents = ['onChange', 'onInput'];
const defaultKeyEvents = ['onKeyDown', 'onKeyUp'];
const defaultEvents = [...defaultMouseEvents, ...defaultFormEvents, ...defaultKeyEvents];
const omitKeys = [
'styleName',
'catalogue',
'children',
'extra',
'formElement',
'handlers',
'owner',
'className',
'readOnly',
'controlProps',
'control',
'ownAddCell',
'EmptyCell',
'Component',
'showError',
'staticContext',
'routerProps',
'dataProps',
'hideLabel'
];
function omit(obj, keys) {
var target = {};
for (var i of Object.keys(obj)) {
if (keys.indexOf(i) >= 0)
continue;
target[i] = obj[i];
}
return Object.keys(target).length > 0 ? target : null;
}
const eventCache = [];
function getCachedEvent(formElement, event, props, context, extra = null, events = null) {
let current = eventCache.find(c => c.props === props);
if (!current) {
current = { props };
eventCache.push(current);
}
if (!current[event]) {
current[event] = (e, ui) => {
if (extra && extra[event]) {
extra[event](e, ui);
}
if (events && events[event]) {
events[event](e, ui);
}
if (formElement.props[event]) {
helpers_1.handle(props.handlers, formElement.props[event], props.owner, props, context, {
e,
ui
});
}
};
}
else {
console.log('Using cached ...');
}
return current[event];
}
function paintProps(props, context, className, allowedProperties, componentProps) {
let result = {
id: props.formElement.uid,
'data-control': props.formElement.control
};
if (props.formElement.props) {
for (let prop of Object.keys(props.formElement.props)) {
if (defaultEvents.indexOf(prop) >= 0) {
result[prop] = getCachedEvent(props.formElement, prop, props, context, props.extra, componentProps);
}
else if (allowedProperties && allowedProperties.indexOf(prop) >= 0) {
result[prop] = helpers_1.getValue(props, context, prop, undefined);
result[prop] = helpers_1.isNullOrEmpty(result[prop]) ? undefined : result[prop];
}
}
}
const controlCss = helpers_1.getValue(props, context, 'css');
if (props.className || controlCss || className || (props.extra && props.extra.className)) {
result.className = classnames_1.default(result[className], className, props.className, props.extra ? props.extra.className : undefined, controlCss ? emotion_1.css([controlCss]) : undefined);
}
if (props.extra) {
for (let prop of Object.keys(props.extra)) {
if (!result[prop]) {
result[prop] = props.extra[prop];
}
}
}
if (componentProps) {
for (let prop of Object.keys(componentProps)) {
result[prop] = componentProps[prop];
}
}
return result;
}
exports.paintProps = paintProps;
function renderEmptyCell(props, className) {
return (props.formElement.elements.length === 0 &&
props.EmptyCell && react_1.default.createElement(props.EmptyCell, Object.assign({}, props, { className: className })));
}
exports.renderEmptyCell = renderEmptyCell;
exports.DynamicComponent = mobx_react_1.observer(props => {
const context = react_1.default.useContext(context_1.Context);
react_1.default.useEffect(() => () => {
eventCache.splice(eventCache.findIndex(c => c.props == props), 1);
});
let formElement = props.formElement;
let currentProps = paintProps(props, context, props.styleName, props.controlProps, omit(props, omitKeys));
if (props.preserveProps) {
currentProps = { ...currentProps, ...props };
}
currentProps.key = formElement.uid;
const label = helpers_1.getValue(props, context, 'label');
if (label) {
const { onMouseOver, onMouseOut, className, ...rest } = currentProps;
return (react_1.default.createElement(error_boundary_1.ErrorBoundary, null,
react_1.default.createElement("div", { onMouseOver: onMouseOver, onMouseOut: onMouseOut, className: className, "data-control": currentProps['data-control'] + 'Wrapper' },
!props.hideLabel && (label || formElement.props.formAlign) && (react_1.default.createElement("label", { className: formElement.props.inline ? exports.nonBreakingLabel : exports.breakingLabel, htmlFor: formElement.uid }, label || '\xa0')),
react_1.default.createElement(props.control || 'div', rest, props.children)),
props.showError && (react_1.default.createElement(error_view_1.ErrorView, { inline: !!formElement.props.inline, owner: props.owner, source: helpers_1.valueSource(formElement) }))));
}
return (react_1.default.createElement(error_boundary_1.ErrorBoundary, null,
react_1.default.createElement(props.control || 'div', currentProps, props.children || common_1.createComponents(props)),
props.showError && (react_1.default.createElement(error_view_1.ErrorView, { inline: !!formElement.props.inline, owner: props.owner, source: helpers_1.valueSource(formElement) }))));
});
exports.DynamicComponent.displayName = 'DynamicControl';
//# sourceMappingURL=wrapper.js.map