Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More →
Socket
Sign inDemoInstall
Socket
Sign inDemoInstall

@jsonforms/vanilla-renderers

Package Overview
Dependencies
Maintainers
6
Versions
132
Alerts
File Explorer

Advanced tools

License
Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

@jsonforms/vanilla-renderers - npm Package Compare versions

Comparing version 3.1.0-alpha.1 to 3.1.0-alpha.2

5

example/index.ts

@@ -26,6 +26,3 @@ /*

import { createThemeSelection } from './theme.switcher';
import {
vanillaCells,
vanillaRenderers,
} from '../src';
import { vanillaCells, vanillaRenderers } from '../src';
import { renderExample } from '../../examples-react/src/index';

@@ -32,0 +29,0 @@

4

example/theme.switcher.ts

@@ -27,3 +27,3 @@ /*

normal: 'Normal Label Top',
dark: 'Dark label Top'
dark: 'Dark label Top',
};

@@ -38,3 +38,3 @@ const changeTheme = (style: string) => {

select.id = 'example_theme';
Object.keys(knownThemes).forEach(key => {
Object.keys(knownThemes).forEach((key) => {
const style = knownThemes[key];

@@ -41,0 +41,0 @@ const option = document.createElement('option');

2

lib/cells/index.d.ts

@@ -13,3 +13,3 @@ import BooleanCell, { booleanCellTester } from './BooleanCell';

import * as Customizable from './CustomizableCells';
export { BooleanCell, booleanCellTester, DateCell, dateCellTester, DateTimeCell, dateTimeCellTester, EnumCell, enumCellTester, IntegerCell, integerCellTester, NumberCell, numberCellTester, NumberFormatCell, numberFormatCellTester, SliderCell, sliderCellTester, TextCell, textCellTester, TextAreaCell, textAreaCellTester, TimeCell, timeCellTester };
export { BooleanCell, booleanCellTester, DateCell, dateCellTester, DateTimeCell, dateTimeCellTester, EnumCell, enumCellTester, IntegerCell, integerCellTester, NumberCell, numberCellTester, NumberFormatCell, numberFormatCellTester, SliderCell, sliderCellTester, TextCell, textCellTester, TextAreaCell, textAreaCellTester, TimeCell, timeCellTester, };
export { Customizable };

4

lib/complex/array/ArrayControlRenderer.d.ts
/// <reference types="react" />
import { ArrayControlProps } from '@jsonforms/core';
import type { VanillaRendererProps } from '../../index';
export declare const ArrayControl: ({ classNames, data, label, path, schema, errors, addItem, removeItems, moveUp, moveDown, uischema, uischemas, getStyleAsClassName, renderers, rootSchema }: ArrayControlProps & VanillaRendererProps) => JSX.Element;
export declare const ArrayControlRenderer: ({ schema, uischema, data, path, rootSchema, uischemas, addItem, getStyle, getStyleAsClassName, removeItems, moveUp, moveDown, id, visible, enabled, errors }: ArrayControlProps & VanillaRendererProps) => JSX.Element;
export declare const ArrayControl: ({ classNames, data, label, path, schema, errors, addItem, removeItems, moveUp, moveDown, uischema, uischemas, getStyleAsClassName, renderers, rootSchema, translations, }: ArrayControlProps & VanillaRendererProps) => JSX.Element;
export declare const ArrayControlRenderer: ({ schema, uischema, data, path, rootSchema, uischemas, addItem, getStyle, getStyleAsClassName, removeItems, moveUp, moveDown, id, visible, enabled, errors, translations, }: ArrayControlProps & VanillaRendererProps) => JSX.Element;
declare const _default: (props: any) => JSX.Element;
export default _default;

2

lib/complex/categorization/CategorizationList.d.ts

@@ -12,2 +12,2 @@ /// <reference types="react" />

}
export declare const CategorizationList: ({ categorization, selectedCategory, depth, onSelect, subcategoriesClassName, groupClassName, t }: CategorizationProps) => JSX.Element;
export declare const CategorizationList: ({ categorization, selectedCategory, depth, onSelect, subcategoriesClassName, groupClassName, t, }: CategorizationProps) => JSX.Element;

2

lib/complex/categorization/index.d.ts

@@ -5,3 +5,3 @@ import CategorizationRenderer from './CategorizationRenderer';

import { SingleCategory } from './SingleCategory';
export { categorizationTester, CategorizationList, CategorizationProps, CategorizationRenderer, SingleCategory };
export { categorizationTester, CategorizationList, CategorizationProps, CategorizationRenderer, SingleCategory, };
export default CategorizationRenderer;

2

lib/complex/index.d.ts

@@ -5,2 +5,2 @@ import ArrayControl, { arrayControlTester } from './array';

import TableArrayControl, { tableArrayControlTester } from './TableArrayControl';
export { ArrayControl, arrayControlTester, Categorization, categorizationTester, LabelRenderer, labelRendererTester, TableArrayControl, tableArrayControlTester };
export { ArrayControl, arrayControlTester, Categorization, categorizationTester, LabelRenderer, labelRendererTester, TableArrayControl, tableArrayControlTester, };

2

lib/controls/index.d.ts
import InputControl, { inputControlTester } from './InputControl';
import RadioGroupControl, { radioGroupControlTester } from './RadioGroupControl';
import OneOfRadioGroupControl, { oneOfRadioGroupControlTester } from './OneOfRadioGroupControl';
export { InputControl, inputControlTester, RadioGroupControl, radioGroupControlTester, OneOfRadioGroupControl, oneOfRadioGroupControlTester };
export { InputControl, inputControlTester, RadioGroupControl, radioGroupControlTester, OneOfRadioGroupControl, oneOfRadioGroupControlTester, };

2

lib/controls/RadioGroup.d.ts
/// <reference types="react" />
import { ControlProps, OwnPropsOfEnum } from '@jsonforms/core';
import type { VanillaRendererProps } from '../index';
export declare const RadioGroup: ({ classNames, id, label, options, required, description, errors, data, uischema, visible, config, enabled, path, handleChange }: ControlProps & VanillaRendererProps & OwnPropsOfEnum) => JSX.Element;
export declare const RadioGroup: ({ classNames, id, label, options, required, description, errors, data, uischema, visible, config, enabled, path, handleChange, }: ControlProps & VanillaRendererProps & OwnPropsOfEnum) => JSX.Element;

455

lib/jsonforms-react-vanilla.cjs.js

@@ -94,3 +94,3 @@ 'use strict';

var i18nDefaults = {
'enum.none': 'None'
'enum.none': 'None',
};

@@ -104,11 +104,11 @@

name: styleName,
classNames: classNames
classNames: classNames,
}); };
var unregisterStyle = function (styleName) { return ({
type: UNREGISTER_STYLE,
name: styleName
name: styleName,
}); };
var registerStyles = function (styleDefs) { return ({
type: REGISTER_STYLES,
styles: styleDefs
styles: styleDefs,
}); };

@@ -127,22 +127,26 @@

};
var findStyle = function (styles) { return function (style) {
var args = [];
for (var _i = 1; _i < arguments.length; _i++) {
args[_i - 1] = arguments[_i];
}
var foundStyles = filter__default["default"](styles, function (s) { return s.name === style; });
return reduce__default["default"](foundStyles, function (res, style) {
if (typeof style.classNames === 'function') {
return res.concat(style.classNames(args));
var findStyle = function (styles) {
return function (style) {
var args = [];
for (var _i = 1; _i < arguments.length; _i++) {
args[_i - 1] = arguments[_i];
}
return res.concat(style.classNames);
}, []);
}; };
var findStyleAsClassName = function (styles) { return function (style) {
var args = [];
for (var _i = 1; _i < arguments.length; _i++) {
args[_i - 1] = arguments[_i];
}
return join__default["default"](findStyle(styles)(style, args), ' ');
}; };
var foundStyles = filter__default["default"](styles, function (s) { return s.name === style; });
return reduce__default["default"](foundStyles, function (res, style) {
if (typeof style.classNames === 'function') {
return res.concat(style.classNames(args));
}
return res.concat(style.classNames);
}, []);
};
};
var findStyleAsClassName = function (styles) {
return function (style) {
var args = [];
for (var _i = 1; _i < arguments.length; _i++) {
args[_i - 1] = arguments[_i];
}
return join__default["default"](findStyle(styles)(style, args), ' ');
};
};
var stylingReducer = function (state, action) {

@@ -154,3 +158,3 @@ if (state === void 0) { state = []; }

name: action.name,
classNames: action.classNames
classNames: action.classNames,
});

@@ -171,16 +175,20 @@ }

var getStyle = function (state) { return function (styleName) {
var args = [];
for (var _i = 1; _i < arguments.length; _i++) {
args[_i - 1] = arguments[_i];
}
return findStyle(state.jsonforms.styles)(styleName, args);
}; };
var getStyleAsClassName = function (state) { return function (styleName) {
var args = [];
for (var _i = 1; _i < arguments.length; _i++) {
args[_i - 1] = arguments[_i];
}
return findStyleAsClassName(state.jsonforms.styles)(styleName, args);
}; };
var getStyle = function (state) {
return function (styleName) {
var args = [];
for (var _i = 1; _i < arguments.length; _i++) {
args[_i - 1] = arguments[_i];
}
return findStyle(state.jsonforms.styles)(styleName, args);
};
};
var getStyleAsClassName = function (state) {
return function (styleName) {
var args = [];
for (var _i = 1; _i < arguments.length; _i++) {
args[_i - 1] = arguments[_i];
}
return findStyleAsClassName(state.jsonforms.styles)(styleName, args);
};
};

@@ -190,79 +198,79 @@ var vanillaStyles = [

name: 'control',
classNames: ['control']
classNames: ['control'],
},
{
name: 'control.trim',
classNames: ['trim']
classNames: ['trim'],
},
{
name: 'control.input',
classNames: ['input']
classNames: ['input'],
},
{
name: 'control.select',
classNames: ['select']
classNames: ['select'],
},
{
name: 'control.checkbox',
classNames: ['checkbox']
classNames: ['checkbox'],
},
{
name: 'control.radio',
classNames: ['radio']
classNames: ['radio'],
},
{
name: 'control.radio.option',
classNames: ['radio-option']
classNames: ['radio-option'],
},
{
name: 'control.radio.input',
classNames: ['radio-input']
classNames: ['radio-input'],
},
{
name: 'control.radio.label',
classNames: ['radio-label']
classNames: ['radio-label'],
},
{
name: 'control.validation.error',
classNames: ['validation_error']
classNames: ['validation_error'],
},
{
name: 'control.validation',
classNames: ['validation']
classNames: ['validation'],
},
{
name: 'categorization',
classNames: ['categorization']
classNames: ['categorization'],
},
{
name: 'categorization.master',
classNames: ['categorization-master']
classNames: ['categorization-master'],
},
{
name: 'categorization.detail',
classNames: ['categorization-detail']
classNames: ['categorization-detail'],
},
{
name: 'category.group',
classNames: ['category-group']
classNames: ['category-group'],
},
{
name: 'category.subcategories',
classNames: ['category-subcategories']
classNames: ['category-subcategories'],
},
{
name: 'array.layout',
classNames: ['array-layout']
classNames: ['array-layout'],
},
{
name: 'array.children',
classNames: ['children']
classNames: ['children'],
},
{
name: 'group.layout',
classNames: ['group-layout']
classNames: ['group-layout'],
},
{
name: 'horizontal.layout',
classNames: ['horizontal-layout']
classNames: ['horizontal-layout'],
},

@@ -274,60 +282,60 @@ {

return ["horizontal-layout-" + size];
}
},
},
{
name: 'vertical.layout',
classNames: ['vertical-layout']
classNames: ['vertical-layout'],
},
{
name: 'array.table.validation.error',
classNames: ['validation_error']
classNames: ['validation_error'],
},
{
name: 'array.table.validation',
classNames: ['validation']
classNames: ['validation'],
},
{
name: 'array.table',
classNames: ['array-table-layout', 'control']
classNames: ['array-table-layout', 'control'],
},
{
name: 'array.control.validation.error',
classNames: ['validation_error']
classNames: ['validation_error'],
},
{
name: 'array.control.validation',
classNames: ['validation']
classNames: ['validation'],
},
{
name: 'array.control.add',
classNames: ['button-add']
classNames: ['button-add'],
},
{
name: 'array.child.controls',
classNames: ['child-controls']
classNames: ['child-controls'],
},
{
name: 'array.child.controls.up',
classNames: ['button-up']
classNames: ['button-up'],
},
{
name: 'array.child.controls.down',
classNames: ['button-down']
classNames: ['button-down'],
},
{
name: 'array.child.controls.delete',
classNames: ['button-delete']
classNames: ['button-delete'],
},
{
name: 'array.control',
classNames: ['array-control-layout', 'control']
classNames: ['array-control-layout', 'control'],
},
{
name: 'input.description',
classNames: ['input-description']
}
classNames: ['input-description'],
},
];
var defaultContext = {
styles: vanillaStyles
styles: vanillaStyles,
};

@@ -343,80 +351,97 @@ var JsonFormsStyleContext = React__default["default"].createContext(defaultContext);

var addVanillaControlProps = function (mapStateToProps) { return function (state, ownProps) {
var props = mapStateToProps(state, ownProps);
var config = core.getConfig(state);
var trim = config.trim;
var controlElement = props.uischema;
var isValid = isEmpty__default["default"](props.errors);
var styles = getStyle(state)('control');
var classNames = !isEmpty__default["default"](controlElement.scope)
? styles.concat(["" + core.convertToValidClassName(controlElement.scope)])
: [''];
if (trim) {
classNames = classNames.concat(getStyle(state)('control.trim'));
}
var labelClass = getStyleAsClassName(state)('control.label');
var descriptionClassName = getStyleAsClassName(state)('input.description');
var validationClassName = getStyleAsClassName(state)('control.validation');
var validationErrorClassName = getStyleAsClassName(state)('control.validation.error');
var inputClassName = ['validate'].concat(isValid ? 'valid' : 'invalid');
return __assign(__assign({}, props), { getStyleAsClassName: getStyleAsClassName(state), getStyle: getStyle(state), classNames: {
wrapper: classNames.join(' '),
input: inputClassName.join(' '),
var addVanillaControlProps = function (mapStateToProps) {
return function (state, ownProps) {
var props = mapStateToProps(state, ownProps);
var config = core.getConfig(state);
var trim = config.trim;
var controlElement = props.uischema;
var isValid = isEmpty__default["default"](props.errors);
var styles = getStyle(state)('control');
var classNames = !isEmpty__default["default"](controlElement.scope)
? styles.concat(["" + core.convertToValidClassName(controlElement.scope)])
: [''];
if (trim) {
classNames = classNames.concat(getStyle(state)('control.trim'));
}
var labelClass = getStyleAsClassName(state)('control.label');
var descriptionClassName = getStyleAsClassName(state)('input.description');
var validationClassName = getStyleAsClassName(state)('control.validation');
var validationErrorClassName = getStyleAsClassName(state)('control.validation.error');
var inputClassName = ['validate'].concat(isValid ? 'valid' : 'invalid');
return __assign(__assign({}, props), { getStyleAsClassName: getStyleAsClassName(state), getStyle: getStyle(state), classNames: {
wrapper: classNames.join(' '),
input: inputClassName.join(' '),
label: labelClass,
description: descriptionClassName,
validation: validationClassName,
validationError: validationErrorClassName,
} });
};
};
var withVanillaControlProps = function (Component) {
return function WithVanillaControlProps(props) {
var ctx = react.useJsonForms();
var contextStyles = useStyles();
var controlElement = props.uischema;
var config = ctx.config;
var trim = config && config.trim;
var styles = React.useMemo(function () { return findStyle(contextStyles)('control'); }, [contextStyles]);
var classNames = !isEmpty__default["default"](controlElement.scope)
? styles.concat(["" + core.convertToValidClassName(controlElement.scope)])
: [''];
if (trim) {
classNames = classNames.concat(findStyle(contextStyles)('control.trim'));
}
var isValid = isEmpty__default["default"](props.errors);
var labelClass = React.useMemo(function () { return findStyleAsClassName(contextStyles)('control.label'); }, [contextStyles]);
var descriptionClassName = React.useMemo(function () { return findStyleAsClassName(contextStyles)('input.description'); }, [contextStyles]);
var validationClassName = React.useMemo(function () { return findStyleAsClassName(contextStyles)('control.validation'); }, [contextStyles]);
var validationErrorClassName = React.useMemo(function () { return findStyleAsClassName(contextStyles)('control.validation.error'); }, [contextStyles]);
var inputClassName = ['validate'].concat(isValid ? 'valid' : 'invalid');
var getStyleAsClassName = React.useMemo(function () { return findStyleAsClassName(contextStyles); }, [contextStyles]);
var getStyle = React.useMemo(function () { return findStyle(contextStyles); }, [contextStyles]);
var wrapper = classNames.join(' ');
var input = inputClassName.join(' ');
var classNamesProp = React.useMemo(function () { return ({
wrapper: wrapper,
input: input,
label: labelClass,
description: descriptionClassName,
validation: validationClassName,
validationError: validationErrorClassName
} });
validationError: validationErrorClassName,
}); }, [
wrapper,
input,
labelClass,
descriptionClassName,
validationClassName,
validationErrorClassName,
]);
return (React__default["default"].createElement(Component, __assign({}, props, { getStyleAsClassName: getStyleAsClassName, getStyle: getStyle, classNames: classNamesProp })));
};
};
var addVanillaLayoutProps = function (mapStateToProps) {
return function (state, ownProps) {
var props = mapStateToProps(state, ownProps);
return __assign(__assign({}, props), { getStyleAsClassName: getStyleAsClassName(state), getStyle: getStyle(state) });
};
};
var addVanillaCellProps = function (mapStateToCellsProps) {
return function (state, ownProps) {
var props = mapStateToCellsProps(state, ownProps);
var inputClassName = ['validate'].concat(props.isValid ? 'valid' : 'invalid');
return __assign(__assign({}, props), { className: inputClassName.join(' '), getStyleAsClassName: getStyleAsClassName(state), getStyle: getStyle(state) });
};
};
var withVanillaCellPropsForType = function (type) { return function (Component) {
return function WithVanillaCellPropsForType(props) {
var inputClassName = ['validate'].concat(props.isValid ? 'valid' : 'invalid');
var styles = useStyles();
var definedStyle = findStyleAsClassName(styles)(type);
if (definedStyle) {
inputClassName.push(definedStyle);
}
return (React__default["default"].createElement(Component, __assign({}, props, { getStyleAsClassName: findStyleAsClassName(styles), getStyle: findStyle(styles), className: inputClassName.join(' ') })));
};
}; };
var withVanillaControlProps = function (Component) { return function (props) {
var ctx = react.useJsonForms();
var contextStyles = useStyles();
var controlElement = props.uischema;
var config = ctx.config;
var trim = config && config.trim;
var styles = React.useMemo(function () { return findStyle(contextStyles)('control'); }, [contextStyles]);
var classNames = !isEmpty__default["default"](controlElement.scope)
? styles.concat(["" + core.convertToValidClassName(controlElement.scope)])
: [''];
if (trim) {
classNames = classNames.concat(findStyle(contextStyles)('control.trim'));
}
var isValid = isEmpty__default["default"](props.errors);
var labelClass = React.useMemo(function () { return findStyleAsClassName(contextStyles)('control.label'); }, [contextStyles]);
var descriptionClassName = React.useMemo(function () { return findStyleAsClassName(contextStyles)('input.description'); }, [contextStyles]);
var validationClassName = React.useMemo(function () { return findStyleAsClassName(contextStyles)('control.validation'); }, [contextStyles]);
var validationErrorClassName = React.useMemo(function () { return findStyleAsClassName(contextStyles)('control.validation.error'); }, [contextStyles]);
var inputClassName = ['validate'].concat(isValid ? 'valid' : 'invalid');
var getStyleAsClassName = React.useMemo(function () { return findStyleAsClassName(contextStyles); }, [contextStyles]);
var getStyle = React.useMemo(function () { return findStyle(contextStyles); }, [contextStyles]);
var wrapper = classNames.join(' ');
var input = inputClassName.join(' ');
var classNamesProp = React.useMemo(function () { return ({
wrapper: wrapper,
input: input,
label: labelClass,
description: descriptionClassName,
validation: validationClassName,
validationError: validationErrorClassName
}); }, [wrapper, input, labelClass, descriptionClassName, validationClassName, validationErrorClassName]);
return (React__default["default"].createElement(Component, __assign({}, props, { getStyleAsClassName: getStyleAsClassName, getStyle: getStyle, classNames: classNamesProp })));
}; };
var addVanillaLayoutProps = function (mapStateToProps) { return function (state, ownProps) {
var props = mapStateToProps(state, ownProps);
return __assign(__assign({}, props), { getStyleAsClassName: getStyleAsClassName(state), getStyle: getStyle(state) });
}; };
var addVanillaCellProps = function (mapStateToCellsProps) { return function (state, ownProps) {
var props = mapStateToCellsProps(state, ownProps);
var inputClassName = ['validate'].concat(props.isValid ? 'valid' : 'invalid');
return __assign(__assign({}, props), { className: inputClassName.join(' '), getStyleAsClassName: getStyleAsClassName(state), getStyle: getStyle(state) });
}; };
var withVanillaCellPropsForType = function (type) { return function (Component) { return function (props) {
var inputClassName = ['validate'].concat(props.isValid ? 'valid' : 'invalid');
var styles = useStyles();
var definedStyle = findStyleAsClassName(styles)(type);
if (definedStyle) {
inputClassName.push(definedStyle);
}
return (React__default["default"].createElement(Component, __assign({}, props, { getStyleAsClassName: findStyleAsClassName(styles), getStyle: findStyle(styles), className: inputClassName.join(' ') })));
}; }; };
var withVanillaCellProps = withVanillaCellPropsForType('control.input');

@@ -428,5 +453,3 @@ var withVanillaEnumCellProps = withVanillaCellPropsForType('control.select');

var data = props.data, className = props.className, id = props.id, enabled = props.enabled, uischema = props.uischema, path = props.path, handleChange = props.handleChange;
return (React__default["default"].createElement("input", { type: 'checkbox', checked: !!data, onChange: function (ev) {
return handleChange(path, ev.target.checked);
}, className: className, id: id, disabled: !enabled, autoFocus: uischema.options && uischema.options.focus }));
return (React__default["default"].createElement("input", { type: 'checkbox', checked: !!data, onChange: function (ev) { return handleChange(path, ev.target.checked); }, className: className, id: id, disabled: !enabled, autoFocus: uischema.options && uischema.options.focus }));
};

@@ -446,3 +469,3 @@ var booleanCellTester = core.rankWith(2, core.isBooleanControl);

var toISOString = function (inputDateTime) {
return (inputDateTime === '' ? '' : inputDateTime + ':00.000Z');
return inputDateTime === '' ? '' : inputDateTime + ':00.000Z';
};

@@ -457,6 +480,7 @@ return (React__default["default"].createElement("input", { type: 'datetime-local', value: (data || '').substr(0, 16), onChange: function (ev) { return handleChange(path, toISOString(ev.target.value)); }, className: className, id: id, disabled: !enabled, autoFocus: uischema.options && uischema.options.focus }));

var noneOptionLabel = React.useMemo(function () { return t('enum.none', i18nDefaults['enum.none'], { schema: schema, uischema: uischema, path: path }); }, [t, schema, uischema, path]);
return (React__default["default"].createElement("select", { className: className, id: id, disabled: !enabled, autoFocus: uischema.options && uischema.options.focus, value: data || '', onChange: function (ev) { return handleChange(path, ev.target.selectedIndex === 0 ? undefined : ev.target.value); } }, [React__default["default"].createElement("option", { value: '', key: 'jsonforms.enum.none' }, noneOptionLabel)]
.concat(options.map(function (optionValue) {
return (React__default["default"].createElement("option", { value: optionValue.value, label: optionValue.label, key: optionValue.value }));
}))));
return (React__default["default"].createElement("select", { className: className, id: id, disabled: !enabled, autoFocus: uischema.options && uischema.options.focus, value: data || '', onChange: function (ev) {
return handleChange(path, ev.target.selectedIndex === 0 ? undefined : ev.target.value);
} }, [
React__default["default"].createElement("option", { value: '', key: 'jsonforms.enum.none' }, noneOptionLabel),
].concat(options.map(function (optionValue) { return (React__default["default"].createElement("option", { value: optionValue.value, label: optionValue.label, key: optionValue.value })); }))));
};

@@ -476,5 +500,3 @@ var enumCellTester = core.rankWith(2, core.isEnumControl);

var toNumber = function (value) {
return value === '' ? undefined : Number(value);
};
var toNumber = function (value) { return (value === '' ? undefined : Number(value)); };
var NumberCell = function (props) {

@@ -513,3 +535,5 @@ var data = props.data, className = props.className, id = props.id, enabled = props.enabled, uischema = props.uischema, path = props.path, handleChange = props.handleChange;

var appliedUiSchemaOptions = merge__default["default"]({}, config, uischema.options);
return (React__default["default"].createElement("input", { type: 'text', value: data || '', onChange: function (ev) { return handleChange(path, ev.target.value === '' ? undefined : ev.target.value); }, className: className, id: id, disabled: !enabled, autoFocus: appliedUiSchemaOptions.focus, placeholder: appliedUiSchemaOptions.placeholder, maxLength: appliedUiSchemaOptions.restrict ? maxLength : undefined, size: appliedUiSchemaOptions.trim ? maxLength : undefined }));
return (React__default["default"].createElement("input", { type: 'text', value: data || '', onChange: function (ev) {
return handleChange(path, ev.target.value === '' ? undefined : ev.target.value);
}, className: className, id: id, disabled: !enabled, autoFocus: appliedUiSchemaOptions.focus, placeholder: appliedUiSchemaOptions.placeholder, maxLength: appliedUiSchemaOptions.restrict ? maxLength : undefined, size: appliedUiSchemaOptions.trim ? maxLength : undefined }));
};

@@ -522,3 +546,5 @@ var textCellTester = core.rankWith(1, core.isStringControl);

var appliedUiSchemaOptions = merge__default["default"]({}, config, uischema.options);
return (React__default["default"].createElement("textarea", { value: data || '', onChange: function (ev) { return handleChange(path, ev.target.value === '' ? undefined : ev.target.value); }, className: className, id: id, disabled: !enabled, autoFocus: appliedUiSchemaOptions.focus, placeholder: appliedUiSchemaOptions.placeholder }));
return (React__default["default"].createElement("textarea", { value: data || '', onChange: function (ev) {
return handleChange(path, ev.target.value === '' ? undefined : ev.target.value);
}, className: className, id: id, disabled: !enabled, autoFocus: appliedUiSchemaOptions.focus, placeholder: appliedUiSchemaOptions.placeholder }));
};

@@ -540,3 +566,5 @@ var textAreaCellTester = core.rankWith(2, core.isMultiLineControl);

var data = props.data, className = props.className, id = props.id, enabled = props.enabled, uischema = props.uischema, path = props.path, handleChange = props.handleChange;
return (React__default["default"].createElement("input", { type: 'time', value: data || '', onChange: function (ev) { return handleChange(path, appendSecondsIfNecessary(ev.target.value)); }, className: className, id: id, disabled: !enabled, autoFocus: uischema.options && uischema.options.focus }));
return (React__default["default"].createElement("input", { type: 'time', value: data || '', onChange: function (ev) {
return handleChange(path, appendSecondsIfNecessary(ev.target.value));
}, className: className, id: id, disabled: !enabled, autoFocus: uischema.options && uischema.options.focus }));
};

@@ -576,3 +604,3 @@ var timeCellTester = core.rankWith(2, core.isTimeControl);

rootSchema: rootSchema,
config: config
config: config,
};

@@ -616,3 +644,3 @@ var cell = maxBy__default["default"](cells, function (r) { return r.tester(uischema, schema, testerContext); });

display: 'flex',
flexDirection: 'row'
flexDirection: 'vertical' === appliedUiSchemaOptions.orientation ? 'column' : 'row',
};

@@ -642,5 +670,7 @@ }

var ArrayControl = function (_a) {
var classNames = _a.classNames, data = _a.data, label = _a.label, path = _a.path, schema = _a.schema, errors = _a.errors, addItem = _a.addItem, removeItems = _a.removeItems, moveUp = _a.moveUp, moveDown = _a.moveDown, uischema = _a.uischema, uischemas = _a.uischemas, getStyleAsClassName = _a.getStyleAsClassName, renderers = _a.renderers, rootSchema = _a.rootSchema;
var classNames = _a.classNames, data = _a.data, label = _a.label, path = _a.path, schema = _a.schema, errors = _a.errors, addItem = _a.addItem, removeItems = _a.removeItems, moveUp = _a.moveUp, moveDown = _a.moveDown, uischema = _a.uischema, uischemas = _a.uischemas, getStyleAsClassName = _a.getStyleAsClassName, renderers = _a.renderers, rootSchema = _a.rootSchema, translations = _a.translations;
var controlElement = uischema;
var childUiSchema = React.useMemo(function () { return core.findUISchema(uischemas, schema, uischema.scope, path, undefined, uischema, rootSchema); }, [uischemas, schema, uischema.scope, path, uischema, rootSchema]);
var childUiSchema = React.useMemo(function () {
return core.findUISchema(uischemas, schema, uischema.scope, path, undefined, uischema, rootSchema);
}, [uischemas, schema, uischema.scope, path, uischema, rootSchema]);
var isValid = errors.length === 0;

@@ -659,3 +689,3 @@ var validationClass = getStyleAsClassName('array.control.validation');

getStyleAsClassName('array.control'),
convertToValidClassName$1(controlElement.scope)
convertToValidClassName$1(controlElement.scope),
].join(' ');

@@ -674,21 +704,21 @@ return (React__default["default"].createElement("div", { className: controlClass },

React__default["default"].createElement("div", { className: childControlsClass },
React__default["default"].createElement("button", { className: buttonClassUp, "aria-label": "Up", onClick: function () {
React__default["default"].createElement("button", { className: buttonClassUp, "aria-label": translations.upAriaLabel, onClick: function () {
moveUp(path, index)();
} }, "Up"),
React__default["default"].createElement("button", { className: buttonClassDown, "aria-label": "Down", onClick: function () {
} }, translations.up),
React__default["default"].createElement("button", { className: buttonClassDown, "aria-label": translations.downAriaLabel, onClick: function () {
moveDown(path, index)();
} }, "Down"),
React__default["default"].createElement("button", { className: buttonClassDelete, "aria-label": "Delete", onClick: function () {
} }, translations.down),
React__default["default"].createElement("button", { className: buttonClassDelete, "aria-label": translations.removeAriaLabel, onClick: function () {
if (window.confirm('Are you sure you wish to delete this item?')) {
removeItems(path, [index])();
}
} }, "Delete"))));
})) : (React__default["default"].createElement("p", null, "No data")))));
} }, translations.removeTooltip))));
})) : (React__default["default"].createElement("p", null, translations.noDataMessage)))));
};
var ArrayControlRenderer = function (_a) {
var schema = _a.schema, uischema = _a.uischema, data = _a.data, path = _a.path, rootSchema = _a.rootSchema, uischemas = _a.uischemas, addItem = _a.addItem, getStyle = _a.getStyle, getStyleAsClassName = _a.getStyleAsClassName, removeItems = _a.removeItems, moveUp = _a.moveUp, moveDown = _a.moveDown, id = _a.id, visible = _a.visible, enabled = _a.enabled, errors = _a.errors;
var schema = _a.schema, uischema = _a.uischema, data = _a.data, path = _a.path, rootSchema = _a.rootSchema, uischemas = _a.uischemas, addItem = _a.addItem, getStyle = _a.getStyle, getStyleAsClassName = _a.getStyleAsClassName, removeItems = _a.removeItems, moveUp = _a.moveUp, moveDown = _a.moveDown, id = _a.id, visible = _a.visible, enabled = _a.enabled, errors = _a.errors, translations = _a.translations;
var controlElement = uischema;
var labelDescription = core.Helpers.createLabelDescriptionFrom(controlElement, schema);
var label = labelDescription.show ? labelDescription.text : '';
var controlClassName = "control " + (core.Helpers.convertToValidClassName(controlElement.scope));
var controlClassName = "control " + core.Helpers.convertToValidClassName(controlElement.scope);
var fieldSetClassName = getStyleAsClassName('array.layout');

@@ -701,5 +731,5 @@ var buttonClassName = getStyleAsClassName('array.button');

button: buttonClassName,
children: childrenClassName
children: childrenClassName,
};
return (React__default["default"].createElement(ArrayControl, { classNames: classNames, data: data, label: label, path: path, schema: schema, errors: errors, addItem: addItem, removeItems: removeItems, moveUp: moveUp, moveDown: moveDown, uischema: uischema, uischemas: uischemas, getStyleAsClassName: getStyleAsClassName, rootSchema: rootSchema, id: id, visible: visible, enabled: enabled, getStyle: getStyle }));
return (React__default["default"].createElement(ArrayControl, { classNames: classNames, data: data, label: label, path: path, schema: schema, errors: errors, addItem: addItem, removeItems: removeItems, moveUp: moveUp, moveDown: moveDown, uischema: uischema, uischemas: uischemas, getStyleAsClassName: getStyleAsClassName, rootSchema: rootSchema, id: id, visible: visible, enabled: enabled, getStyle: getStyle, translations: translations }));
};

@@ -725,9 +755,9 @@ var ArrayControlRenderer$1 = withVanillaControlProps(react.withJsonFormsArrayControlProps(ArrayControlRenderer));

var getCategoryClassName = function (category, selectedCategory) {
return selectedCategory === category ? 'selected' : '';
};
var getCategoryClassName = function (category, selectedCategory) { return (selectedCategory === category ? 'selected' : ''); };
var CategorizationList = function (_a) {
var categorization = _a.categorization, selectedCategory = _a.selectedCategory, depth = _a.depth, onSelect = _a.onSelect, subcategoriesClassName = _a.subcategoriesClassName, groupClassName = _a.groupClassName, t = _a.t;
var categoryLabels = React.useMemo(function () {
return categorization.elements.map(function (cat) { return core.deriveLabelForUISchemaElement(cat, t); });
return categorization.elements.map(function (cat) {
return core.deriveLabelForUISchemaElement(cat, t);
});
}, [categorization, t]);

@@ -750,5 +780,3 @@ return (React__default["default"].createElement("ul", { className: subcategoriesClassName }, categorization.elements.map(function (category, idx) {

return (
React__default["default"].createElement("div", { id: 'categorization.detail' }, (category.elements || []).map(function (child, index) {
return (React__default["default"].createElement(react.JsonFormsDispatch, { key: path + "-" + index, uischema: child, schema: schema, path: path }));
})));
React__default["default"].createElement("div", { id: 'categorization.detail' }, (category.elements || []).map(function (child, index) { return (React__default["default"].createElement(react.JsonFormsDispatch, { key: path + "-" + index, uischema: child, schema: schema, path: path })); })));
};

@@ -803,3 +831,3 @@

var createLabelDescriptionFrom = core.Helpers.createLabelDescriptionFrom, convertToValidClassName = core.Helpers.convertToValidClassName;
var convertToValidClassName = core.Helpers.convertToValidClassName;
var or = core.Test.or, isObjectArrayControl = core.Test.isObjectArrayControl, isPrimitiveArrayControl = core.Test.isPrimitiveArrayControl, rankWith = core.Test.rankWith;

@@ -812,3 +840,3 @@ var tableArrayControlTester = rankWith(3, or(isObjectArrayControl, isPrimitiveArrayControl));

_this.confirmDelete = function (path, index) {
var p = path.substring(0, path.lastIndexOf(('.')));
var p = path.substring(0, path.lastIndexOf('.'));
_this.props.removeItems(p, [index])();

@@ -820,3 +848,3 @@ };

var _this = this;
var _a = this.props, addItem = _a.addItem, uischema = _a.uischema, schema = _a.schema, rootSchema = _a.rootSchema, path = _a.path, data = _a.data, visible = _a.visible, errors = _a.errors, label = _a.label, getStyleAsClassName = _a.getStyleAsClassName, childErrors = _a.childErrors;
var _a = this.props, addItem = _a.addItem, uischema = _a.uischema, schema = _a.schema, rootSchema = _a.rootSchema, path = _a.path, data = _a.data, visible = _a.visible, errors = _a.errors, label = _a.label, getStyleAsClassName = _a.getStyleAsClassName, childErrors = _a.childErrors, translations = _a.translations;
var controlElement = uischema;

@@ -829,3 +857,3 @@ var tableClass = getStyleAsClassName('array.table.table');

getStyleAsClassName('array.table'),
convertToValidClassName(controlElement.scope)
convertToValidClassName(controlElement.scope),
].join(' ');

@@ -835,5 +863,4 @@ var createControlElement = function (key) { return ({

label: false,
scope: schema.type === 'object' ? "#/properties/" + key : '#'
scope: schema.type === 'object' ? "#/properties/" + key : '#',
}); };
var labelObject = createLabelDescriptionFrom(controlElement, schema);
var isValid = errors.length === 0;

@@ -846,5 +873,3 @@ var divClassNames = [validationClass]

React__default["default"].createElement("label", { className: labelClass }, label),
React__default["default"].createElement("button", { className: buttonClass, onClick: addItem(path, core.createDefaultValue(schema)) },
"Add to ",
labelObject.text)),
React__default["default"].createElement("button", { className: buttonClass, onClick: addItem(path, core.createDefaultValue(schema)) }, translations.addTooltip)),
React__default["default"].createElement("div", { className: divClassNames }, !isValid ? errors : ''),

@@ -854,7 +879,10 @@ React__default["default"].createElement("table", { className: tableClass },

React__default["default"].createElement("tr", null,
schema.properties ? (fpflow__default["default"](fpkeys__default["default"], fpfilter__default["default"](function (prop) { return schema.properties[prop].type !== 'array'; }), fpmap__default["default"](function (prop) { var _a; return React__default["default"].createElement("th", { key: prop }, (_a = schema.properties[prop].title) !== null && _a !== void 0 ? _a : fpstartCase__default["default"](prop)); }))(schema.properties)) : (React__default["default"].createElement("th", null, "Items")),
schema.properties ? (fpflow__default["default"](fpkeys__default["default"], fpfilter__default["default"](function (prop) { return schema.properties[prop].type !== 'array'; }), fpmap__default["default"](function (prop) {
var _a;
return (React__default["default"].createElement("th", { key: prop }, (_a = schema.properties[prop].title) !== null && _a !== void 0 ? _a : fpstartCase__default["default"](prop)));
}))(schema.properties)) : (React__default["default"].createElement("th", null, "Items")),
React__default["default"].createElement("th", null, "Valid"),
React__default["default"].createElement("th", null, "\u00A0"))),
React__default["default"].createElement("tbody", null, !data || !Array.isArray(data) || data.length === 0 ? (React__default["default"].createElement("tr", null,
React__default["default"].createElement("td", null, "No data"))) : (data.map(function (_child, index) {
React__default["default"].createElement("td", null, translations.noDataMessage))) : (data.map(function (_child, index) {
var childPath = core.Paths.compose(path, "" + index);

@@ -867,5 +895,7 @@ var errorsPerEntry = filter__default["default"](childErrors, function (error) {

var errorValidationClassName = getStyleAsClassName('array.validation.error');
var errorClassNames = errorsPerEntry ?
[validationClassName].concat(errorValidationClassName).join(' ') :
validationClassName;
var errorClassNames = errorsPerEntry
? [validationClassName]
.concat(errorValidationClassName)
.join(' ')
: validationClassName;
return (React__default["default"].createElement("tr", { key: childPath },

@@ -880,7 +910,7 @@ schema.properties ? (fpflow__default["default"](fpkeys__default["default"], fpfilter__default["default"](function (prop) { return schema.properties[prop].type !== 'array'; }), fpmap__default["default"](function (prop) {

React__default["default"].createElement("td", null,
React__default["default"].createElement("button", { "aria-label": "Delete", onClick: function () {
if (window.confirm('Are you sure you wish to delete this item?')) {
React__default["default"].createElement("button", { "aria-label": translations.removeAriaLabel, onClick: function () {
if (window.confirm(translations.deleteDialogMessage)) {
_this.confirmDelete(childPath, index);
}
} }, "Delete"))));
} }, translations.removeTooltip))));
}))))));

@@ -908,3 +938,3 @@ };

};
var GroupLayoutRendererComponent = React__default["default"].memo(function (_a) {
var GroupLayoutRendererComponent = React__default["default"].memo(function GroupLayoutRendererComponent(_a) {
var schema = _a.schema, uischema = _a.uischema, path = _a.path, enabled = _a.enabled, visible = _a.visible, label = _a.label, getStyle = _a.getStyle, getStyleAsClassName = _a.getStyleAsClassName;

@@ -918,4 +948,3 @@ var group = uischema;

return (React__default["default"].createElement("fieldset", { className: classNames, hidden: visible === undefined || visible === null ? false : !visible },
!isEmpty__default["default"](label) ?
React__default["default"].createElement("legend", { className: getStyleAsClassName('group.label') }, label) : '',
!isEmpty__default["default"](label) ? (React__default["default"].createElement("legend", { className: getStyleAsClassName('group.label') }, label)) : (''),
renderChildren(group, schema, childClassNames, path, enabled)));

@@ -935,6 +964,8 @@ });

};
var HorizontalLayoutRendererComponent = React__default["default"].memo(function (_a) {
var HorizontalLayoutRendererComponent = React__default["default"].memo(function HorizontalLayoutRendererComponent(_a) {
var schema = _a.schema, uischema = _a.uischema, getStyle = _a.getStyle, getStyleAsClassName = _a.getStyleAsClassName, enabled = _a.enabled, visible = _a.visible, path = _a.path;
var horizontalLayout = uischema;
var elementsSize = horizontalLayout.elements ? horizontalLayout.elements.length : 0;
var elementsSize = horizontalLayout.elements
? horizontalLayout.elements.length
: 0;
var layoutClassName = getStyleAsClassName('horizontal.layout');

@@ -953,6 +984,8 @@ var childClassNames = ['horizontal-layout-item']

};
var VerticalLayoutRendererComponent = React__default["default"].memo(function (_a) {
var VerticalLayoutRendererComponent = React__default["default"].memo(function VerticalLayoutRendererComponent(_a) {
var schema = _a.schema, uischema = _a.uischema, path = _a.path, visible = _a.visible, enabled = _a.enabled, getStyle = _a.getStyle, getStyleAsClassName = _a.getStyleAsClassName;
var verticalLayout = uischema;
var elementsSize = verticalLayout.elements ? verticalLayout.elements.length : 0;
var elementsSize = verticalLayout.elements
? verticalLayout.elements.length
: 0;
var layoutClassName = getStyleAsClassName('vertical.layout');

@@ -976,3 +1009,3 @@ var childClassNames = ['vertical-layout-item']

{ tester: verticalLayoutTester, renderer: VerticalLayout },
{ tester: horizontalLayoutTester, renderer: HorizontalLayout }
{ tester: horizontalLayoutTester, renderer: HorizontalLayout },
];

@@ -989,3 +1022,3 @@ var vanillaCells = [

{ tester: textCellTester, cell: TextCell$1 },
{ tester: timeCellTester, cell: TimeCell$1 }
{ tester: timeCellTester, cell: TimeCell$1 },
];

@@ -992,0 +1025,0 @@

284

lib/jsonforms-react-vanilla.esm.js

@@ -19,3 +19,3 @@ import React, { useContext, useMemo, useState } from 'react';

const i18nDefaults = {
'enum.none': 'None'
'enum.none': 'None',
};

@@ -29,11 +29,11 @@

name: styleName,
classNames
classNames,
});
const unregisterStyle = (styleName) => ({
type: UNREGISTER_STYLE,
name: styleName
name: styleName,
});
const registerStyles = (styleDefs) => ({
type: REGISTER_STYLES,
styles: styleDefs
styles: styleDefs,
});

@@ -43,3 +43,3 @@

const copy = styles.slice();
remove(copy, styleDef => styleDef.name === name);
remove(copy, (styleDef) => styleDef.name === name);
return copy;

@@ -53,3 +53,3 @@ };

const findStyle = (styles) => (style, ...args) => {
const foundStyles = filter(styles, s => s.name === style);
const foundStyles = filter(styles, (s) => s.name === style);
return reduce(foundStyles, (res, style) => {

@@ -68,3 +68,3 @@ if (typeof style.classNames === 'function') {

name: action.name,
classNames: action.classNames
classNames: action.classNames,
});

@@ -89,140 +89,140 @@ }

name: 'control',
classNames: ['control']
classNames: ['control'],
},
{
name: 'control.trim',
classNames: ['trim']
classNames: ['trim'],
},
{
name: 'control.input',
classNames: ['input']
classNames: ['input'],
},
{
name: 'control.select',
classNames: ['select']
classNames: ['select'],
},
{
name: 'control.checkbox',
classNames: ['checkbox']
classNames: ['checkbox'],
},
{
name: 'control.radio',
classNames: ['radio']
classNames: ['radio'],
},
{
name: 'control.radio.option',
classNames: ['radio-option']
classNames: ['radio-option'],
},
{
name: 'control.radio.input',
classNames: ['radio-input']
classNames: ['radio-input'],
},
{
name: 'control.radio.label',
classNames: ['radio-label']
classNames: ['radio-label'],
},
{
name: 'control.validation.error',
classNames: ['validation_error']
classNames: ['validation_error'],
},
{
name: 'control.validation',
classNames: ['validation']
classNames: ['validation'],
},
{
name: 'categorization',
classNames: ['categorization']
classNames: ['categorization'],
},
{
name: 'categorization.master',
classNames: ['categorization-master']
classNames: ['categorization-master'],
},
{
name: 'categorization.detail',
classNames: ['categorization-detail']
classNames: ['categorization-detail'],
},
{
name: 'category.group',
classNames: ['category-group']
classNames: ['category-group'],
},
{
name: 'category.subcategories',
classNames: ['category-subcategories']
classNames: ['category-subcategories'],
},
{
name: 'array.layout',
classNames: ['array-layout']
classNames: ['array-layout'],
},
{
name: 'array.children',
classNames: ['children']
classNames: ['children'],
},
{
name: 'group.layout',
classNames: ['group-layout']
classNames: ['group-layout'],
},
{
name: 'horizontal.layout',
classNames: ['horizontal-layout']
classNames: ['horizontal-layout'],
},
{
name: 'horizontal.layout.item',
classNames: ([size]) => [`horizontal-layout-${size}`]
classNames: ([size]) => [`horizontal-layout-${size}`],
},
{
name: 'vertical.layout',
classNames: ['vertical-layout']
classNames: ['vertical-layout'],
},
{
name: 'array.table.validation.error',
classNames: ['validation_error']
classNames: ['validation_error'],
},
{
name: 'array.table.validation',
classNames: ['validation']
classNames: ['validation'],
},
{
name: 'array.table',
classNames: ['array-table-layout', 'control']
classNames: ['array-table-layout', 'control'],
},
{
name: 'array.control.validation.error',
classNames: ['validation_error']
classNames: ['validation_error'],
},
{
name: 'array.control.validation',
classNames: ['validation']
classNames: ['validation'],
},
{
name: 'array.control.add',
classNames: ['button-add']
classNames: ['button-add'],
},
{
name: 'array.child.controls',
classNames: ['child-controls']
classNames: ['child-controls'],
},
{
name: 'array.child.controls.up',
classNames: ['button-up']
classNames: ['button-up'],
},
{
name: 'array.child.controls.down',
classNames: ['button-down']
classNames: ['button-down'],
},
{
name: 'array.child.controls.delete',
classNames: ['button-delete']
classNames: ['button-delete'],
},
{
name: 'array.control',
classNames: ['array-control-layout', 'control']
classNames: ['array-control-layout', 'control'],
},
{
name: 'input.description',
classNames: ['input-description']
}
classNames: ['input-description'],
},
];
const defaultContext = {
styles: vanillaStyles
styles: vanillaStyles,
};

@@ -264,7 +264,7 @@ const JsonFormsStyleContext = React.createContext(defaultContext);

validation: validationClassName,
validationError: validationErrorClassName
}
validationError: validationErrorClassName,
},
};
};
const withVanillaControlProps = (Component) => (props) => {
const withVanillaControlProps = (Component) => function WithVanillaControlProps(props) {
const ctx = useJsonForms();

@@ -298,4 +298,11 @@ const contextStyles = useStyles();

validation: validationClassName,
validationError: validationErrorClassName
}), [wrapper, input, labelClass, descriptionClassName, validationClassName, validationErrorClassName]);
validationError: validationErrorClassName,
}), [
wrapper,
input,
labelClass,
descriptionClassName,
validationClassName,
validationErrorClassName,
]);
return (React.createElement(Component, Object.assign({}, props, { getStyleAsClassName: getStyleAsClassName, getStyle: getStyle, classNames: classNamesProp })));

@@ -308,3 +315,3 @@ };

getStyleAsClassName: getStyleAsClassName(state),
getStyle: getStyle(state)
getStyle: getStyle(state),
};

@@ -319,6 +326,6 @@ };

getStyleAsClassName: getStyleAsClassName(state),
getStyle: getStyle(state)
getStyle: getStyle(state),
};
};
const withVanillaCellPropsForType = (type) => (Component) => (props) => {
const withVanillaCellPropsForType = (type) => (Component) => function WithVanillaCellPropsForType(props) {
const inputClassName = ['validate'].concat(props.isValid ? 'valid' : 'invalid');

@@ -338,3 +345,3 @@ const styles = useStyles();

const { data, className, id, enabled, uischema, path, handleChange } = props;
return (React.createElement("input", { type: 'checkbox', checked: !!data, onChange: ev => handleChange(path, ev.target.checked), className: className, id: id, disabled: !enabled, autoFocus: uischema.options && uischema.options.focus }));
return (React.createElement("input", { type: 'checkbox', checked: !!data, onChange: (ev) => handleChange(path, ev.target.checked), className: className, id: id, disabled: !enabled, autoFocus: uischema.options && uischema.options.focus }));
};

@@ -346,3 +353,3 @@ const booleanCellTester = rankWith$1(2, isBooleanControl);

const { data, className, id, enabled, uischema, path, handleChange } = props;
return (React.createElement("input", { type: 'date', value: data || '', onChange: ev => handleChange(path, ev.target.value), className: className, id: id, disabled: !enabled, autoFocus: uischema.options && uischema.options.focus }));
return (React.createElement("input", { type: 'date', value: data || '', onChange: (ev) => handleChange(path, ev.target.value), className: className, id: id, disabled: !enabled, autoFocus: uischema.options && uischema.options.focus }));
};

@@ -355,5 +362,5 @@ const dateCellTester = rankWith$1(2, isDateControl);

const toISOString = (inputDateTime) => {
return (inputDateTime === '' ? '' : inputDateTime + ':00.000Z');
return inputDateTime === '' ? '' : inputDateTime + ':00.000Z';
};
return (React.createElement("input", { type: 'datetime-local', value: (data || '').substr(0, 16), onChange: ev => handleChange(path, toISOString(ev.target.value)), className: className, id: id, disabled: !enabled, autoFocus: uischema.options && uischema.options.focus }));
return (React.createElement("input", { type: 'datetime-local', value: (data || '').substr(0, 16), onChange: (ev) => handleChange(path, toISOString(ev.target.value)), className: className, id: id, disabled: !enabled, autoFocus: uischema.options && uischema.options.focus }));
};

@@ -364,6 +371,7 @@ const dateTimeCellTester = rankWith$1(2, isDateTimeControl);

const EnumCell = (props) => {
const { data, className, id, enabled, schema, uischema, path, handleChange, options, t } = props;
const { data, className, id, enabled, schema, uischema, path, handleChange, options, t, } = props;
const noneOptionLabel = useMemo(() => t('enum.none', i18nDefaults['enum.none'], { schema, uischema, path }), [t, schema, uischema, path]);
return (React.createElement("select", { className: className, id: id, disabled: !enabled, autoFocus: uischema.options && uischema.options.focus, value: data || '', onChange: ev => handleChange(path, ev.target.selectedIndex === 0 ? undefined : ev.target.value) }, [React.createElement("option", { value: '', key: 'jsonforms.enum.none' }, noneOptionLabel)]
.concat(options.map(optionValue => (React.createElement("option", { value: optionValue.value, label: optionValue.label, key: optionValue.value }))))));
return (React.createElement("select", { className: className, id: id, disabled: !enabled, autoFocus: uischema.options && uischema.options.focus, value: data || '', onChange: (ev) => handleChange(path, ev.target.selectedIndex === 0 ? undefined : ev.target.value) }, [
React.createElement("option", { value: '', key: 'jsonforms.enum.none' }, noneOptionLabel),
].concat(options.map((optionValue) => (React.createElement("option", { value: optionValue.value, label: optionValue.label, key: optionValue.value }))))));
};

@@ -376,3 +384,3 @@ const enumCellTester = rankWith$1(2, isEnumControl);

const { data, className, id, enabled, uischema, path, handleChange } = props;
return (React.createElement("input", { type: 'number', step: '1', value: data ?? '', onChange: ev => handleChange(path, toNumber$1(ev.target.value)), className: className, id: id, disabled: !enabled, autoFocus: uischema.options && uischema.options.focus }));
return (React.createElement("input", { type: 'number', step: '1', value: data ?? '', onChange: (ev) => handleChange(path, toNumber$1(ev.target.value)), className: className, id: id, disabled: !enabled, autoFocus: uischema.options && uischema.options.focus }));
};

@@ -382,6 +390,6 @@ const integerCellTester = rankWith$1(2, isIntegerControl);

const toNumber = (value) => value === '' ? undefined : Number(value);
const toNumber = (value) => (value === '' ? undefined : Number(value));
const NumberCell = (props) => {
const { data, className, id, enabled, uischema, path, handleChange } = props;
return (React.createElement("input", { type: 'number', step: '0.1', value: data ?? '', onChange: ev => handleChange(path, toNumber(ev.target.value)), className: className, id: id, disabled: !enabled, autoFocus: uischema.options && uischema.options.focus }));
return (React.createElement("input", { type: 'number', step: '0.1', value: data ?? '', onChange: (ev) => handleChange(path, toNumber(ev.target.value)), className: className, id: id, disabled: !enabled, autoFocus: uischema.options && uischema.options.focus }));
};

@@ -407,3 +415,3 @@ const numberCellTester = rankWith$1(2, isNumberControl);

return (React.createElement("div", { style: { display: 'flex' } },
React.createElement("input", { type: 'range', max: schema.maximum, min: schema.minimum, value: data || schema.default, onChange: ev => handleChange(path, Number(ev.target.value)), className: className, id: id, disabled: !enabled, autoFocus: uischema.options && uischema.options.focus, style: { flex: '1' } }),
React.createElement("input", { type: 'range', max: schema.maximum, min: schema.minimum, value: data || schema.default, onChange: (ev) => handleChange(path, Number(ev.target.value)), className: className, id: id, disabled: !enabled, autoFocus: uischema.options && uischema.options.focus, style: { flex: '1' } }),
React.createElement("label", { style: { marginLeft: '0.5em' } }, data || schema.default)));

@@ -415,6 +423,6 @@ };

const TextCell = (props) => {
const { config, data, className, id, enabled, uischema, schema, path, handleChange } = props;
const { config, data, className, id, enabled, uischema, schema, path, handleChange, } = props;
const maxLength = schema.maxLength;
const appliedUiSchemaOptions = merge({}, config, uischema.options);
return (React.createElement("input", { type: 'text', value: data || '', onChange: ev => handleChange(path, ev.target.value === '' ? undefined : ev.target.value), className: className, id: id, disabled: !enabled, autoFocus: appliedUiSchemaOptions.focus, placeholder: appliedUiSchemaOptions.placeholder, maxLength: appliedUiSchemaOptions.restrict ? maxLength : undefined, size: appliedUiSchemaOptions.trim ? maxLength : undefined }));
return (React.createElement("input", { type: 'text', value: data || '', onChange: (ev) => handleChange(path, ev.target.value === '' ? undefined : ev.target.value), className: className, id: id, disabled: !enabled, autoFocus: appliedUiSchemaOptions.focus, placeholder: appliedUiSchemaOptions.placeholder, maxLength: appliedUiSchemaOptions.restrict ? maxLength : undefined, size: appliedUiSchemaOptions.trim ? maxLength : undefined }));
};

@@ -427,3 +435,3 @@ const textCellTester = rankWith$1(1, isStringControl);

const appliedUiSchemaOptions = merge({}, config, uischema.options);
return (React.createElement("textarea", { value: data || '', onChange: ev => handleChange(path, ev.target.value === '' ? undefined : ev.target.value), className: className, id: id, disabled: !enabled, autoFocus: appliedUiSchemaOptions.focus, placeholder: appliedUiSchemaOptions.placeholder }));
return (React.createElement("textarea", { value: data || '', onChange: (ev) => handleChange(path, ev.target.value === '' ? undefined : ev.target.value), className: className, id: id, disabled: !enabled, autoFocus: appliedUiSchemaOptions.focus, placeholder: appliedUiSchemaOptions.placeholder }));
};

@@ -445,3 +453,3 @@ const textAreaCellTester = rankWith$1(2, isMultiLineControl);

const { data, className, id, enabled, uischema, path, handleChange } = props;
return (React.createElement("input", { type: 'time', value: data || '', onChange: ev => handleChange(path, appendSecondsIfNecessary(ev.target.value)), className: className, id: id, disabled: !enabled, autoFocus: uischema.options && uischema.options.focus }));
return (React.createElement("input", { type: 'time', value: data || '', onChange: (ev) => handleChange(path, appendSecondsIfNecessary(ev.target.value)), className: className, id: id, disabled: !enabled, autoFocus: uischema.options && uischema.options.focus }));
};

@@ -452,14 +460,14 @@ const timeCellTester = rankWith$1(2, isTimeControl);

var CustomizableCells = /*#__PURE__*/Object.freeze({
__proto__: null,
BooleanCell: BooleanCell,
DateCell: DateCell,
DateTimeCell: DateTimeCell,
EnumCell: EnumCell,
IntegerCell: IntegerCell,
NumberCell: NumberCell,
NumberFormatCell: NumberFormatCell,
SliderCell: SliderCell,
TextCell: TextCell,
TextAreaCell: TextAreaCell,
TimeCell: TimeCell
__proto__: null,
BooleanCell: BooleanCell,
DateCell: DateCell,
DateTimeCell: DateTimeCell,
EnumCell: EnumCell,
IntegerCell: IntegerCell,
NumberCell: NumberCell,
NumberFormatCell: NumberFormatCell,
SliderCell: SliderCell,
TextCell: TextCell,
TextAreaCell: TextAreaCell,
TimeCell: TimeCell
});

@@ -469,3 +477,3 @@

render() {
const { classNames, description, id, errors, label, uischema, schema, rootSchema, visible, enabled, required, path, cells, config } = this.props;
const { classNames, description, id, errors, label, uischema, schema, rootSchema, visible, enabled, required, path, cells, config, } = this.props;
const isValid = errors.length === 0;

@@ -479,5 +487,5 @@ const divClassNames = [classNames.validation]

rootSchema: rootSchema,
config: config
config: config,
};
const cell = maxBy(cells, r => r.tester(uischema, schema, testerContext));
const cell = maxBy(cells, (r) => r.tester(uischema, schema, testerContext));
if (cell === undefined ||

@@ -499,3 +507,3 @@ cell.tester(uischema, schema, testerContext) === NOT_APPLICABLE) {

const RadioGroup = ({ classNames, id, label, options, required, description, errors, data, uischema, visible, config, enabled, path, handleChange }) => {
const RadioGroup = ({ classNames, id, label, options, required, description, errors, data, uischema, visible, config, enabled, path, handleChange, }) => {
const contextStyles = useStyles();

@@ -518,3 +526,3 @@ const [isFocused, setFocus] = useState(false);

display: 'flex',
flexDirection: 'row'
flexDirection: 'vertical' === appliedUiSchemaOptions.orientation ? 'column' : 'row',
};

@@ -524,4 +532,4 @@ }

React.createElement("label", { htmlFor: id, className: classNames.label }, computeLabel(label, required, appliedUiSchemaOptions.hideRequiredAsterisk)),
React.createElement("div", { className: radioControl, style: groupStyle }, options.map(option => (React.createElement("div", { key: option.label, className: radioOption },
React.createElement("input", { type: 'radio', value: option.value, id: option.value, name: id, checked: data === option.value, onChange: ev => handleChange(path, ev.currentTarget.value), disabled: !enabled, className: radioInput }),
React.createElement("div", { className: radioControl, style: groupStyle }, options.map((option) => (React.createElement("div", { key: option.label, className: radioOption },
React.createElement("input", { type: 'radio', value: option.value, id: option.value, name: id, checked: data === option.value, onChange: (ev) => handleChange(path, ev.currentTarget.value), disabled: !enabled, className: radioInput }),
React.createElement("label", { htmlFor: option.value, className: radioLabel }, option.label))))),

@@ -544,3 +552,3 @@ React.createElement("div", { className: divClassNames }, !isValid ? errors : showDescription ? description : null)));

const { convertToValidClassName: convertToValidClassName$1 } = Helpers;
const ArrayControl = ({ classNames, data, label, path, schema, errors, addItem, removeItems, moveUp, moveDown, uischema, uischemas, getStyleAsClassName, renderers, rootSchema }) => {
const ArrayControl = ({ classNames, data, label, path, schema, errors, addItem, removeItems, moveUp, moveDown, uischema, uischemas, getStyleAsClassName, renderers, rootSchema, translations, }) => {
const controlElement = uischema;

@@ -561,3 +569,3 @@ const childUiSchema = useMemo(() => findUISchema(uischemas, schema, uischema.scope, path, undefined, uischema, rootSchema), [uischemas, schema, uischema.scope, path, uischema, rootSchema]);

getStyleAsClassName('array.control'),
convertToValidClassName$1(controlElement.scope)
convertToValidClassName$1(controlElement.scope),
].join(' ');

@@ -571,3 +579,3 @@ return (React.createElement("div", { className: controlClass },

React.createElement("div", { className: divClassNames }, errors),
React.createElement("div", { className: classNames.children }, data ? (range(0, data.length).map(index => {
React.createElement("div", { className: classNames.children }, data ? (range(0, data.length).map((index) => {
const childPath = composePaths(path, `${index}`);

@@ -577,20 +585,20 @@ return (React.createElement("div", { key: index },

React.createElement("div", { className: childControlsClass },
React.createElement("button", { className: buttonClassUp, "aria-label": `Up`, onClick: () => {
React.createElement("button", { className: buttonClassUp, "aria-label": translations.upAriaLabel, onClick: () => {
moveUp(path, index)();
} }, "Up"),
React.createElement("button", { className: buttonClassDown, "aria-label": `Down`, onClick: () => {
} }, translations.up),
React.createElement("button", { className: buttonClassDown, "aria-label": translations.downAriaLabel, onClick: () => {
moveDown(path, index)();
} }, "Down"),
React.createElement("button", { className: buttonClassDelete, "aria-label": `Delete`, onClick: () => {
} }, translations.down),
React.createElement("button", { className: buttonClassDelete, "aria-label": translations.removeAriaLabel, onClick: () => {
if (window.confirm('Are you sure you wish to delete this item?')) {
removeItems(path, [index])();
}
} }, "Delete"))));
})) : (React.createElement("p", null, "No data")))));
} }, translations.removeTooltip))));
})) : (React.createElement("p", null, translations.noDataMessage)))));
};
const ArrayControlRenderer = ({ schema, uischema, data, path, rootSchema, uischemas, addItem, getStyle, getStyleAsClassName, removeItems, moveUp, moveDown, id, visible, enabled, errors }) => {
const ArrayControlRenderer = ({ schema, uischema, data, path, rootSchema, uischemas, addItem, getStyle, getStyleAsClassName, removeItems, moveUp, moveDown, id, visible, enabled, errors, translations, }) => {
const controlElement = uischema;
const labelDescription = Helpers.createLabelDescriptionFrom(controlElement, schema);
const label = labelDescription.show ? labelDescription.text : '';
const controlClassName = `control ${(Helpers.convertToValidClassName(controlElement.scope))}`;
const controlClassName = `control ${Helpers.convertToValidClassName(controlElement.scope)}`;
const fieldSetClassName = getStyleAsClassName('array.layout');

@@ -603,5 +611,5 @@ const buttonClassName = getStyleAsClassName('array.button');

button: buttonClassName,
children: childrenClassName
children: childrenClassName,
};
return (React.createElement(ArrayControl, { classNames: classNames, data: data, label: label, path: path, schema: schema, errors: errors, addItem: addItem, removeItems: removeItems, moveUp: moveUp, moveDown: moveDown, uischema: uischema, uischemas: uischemas, getStyleAsClassName: getStyleAsClassName, rootSchema: rootSchema, id: id, visible: visible, enabled: enabled, getStyle: getStyle }));
return (React.createElement(ArrayControl, { classNames: classNames, data: data, label: label, path: path, schema: schema, errors: errors, addItem: addItem, removeItems: removeItems, moveUp: moveUp, moveDown: moveDown, uischema: uischema, uischemas: uischemas, getStyleAsClassName: getStyleAsClassName, rootSchema: rootSchema, id: id, visible: visible, enabled: enabled, getStyle: getStyle, translations: translations }));
};

@@ -613,3 +621,3 @@ var ArrayControlRenderer$1 = withVanillaControlProps(withJsonFormsArrayControlProps(ArrayControlRenderer));

const isCategorization = (category) => category.type === 'Categorization';
const categorizationTester = rankWith$1(1, and(uiTypeIs('Categorization'), uischema => {
const categorizationTester = rankWith$1(1, and(uiTypeIs('Categorization'), (uischema) => {
const hasCategory = (element) => {

@@ -620,3 +628,3 @@ if (isEmpty(element.elements)) {

return element.elements
.map(elem => isCategorization(elem) ? hasCategory(elem) : elem.type === 'Category')
.map((elem) => isCategorization(elem) ? hasCategory(elem) : elem.type === 'Category')
.reduce((prev, curr) => prev && curr, true);

@@ -627,5 +635,5 @@ };

const getCategoryClassName = (category, selectedCategory) => selectedCategory === category ? 'selected' : '';
const CategorizationList = ({ categorization, selectedCategory, depth, onSelect, subcategoriesClassName, groupClassName, t }) => {
const categoryLabels = useMemo(() => categorization.elements.map(cat => deriveLabelForUISchemaElement(cat, t)), [categorization, t]);
const getCategoryClassName = (category, selectedCategory) => (selectedCategory === category ? 'selected' : '');
const CategorizationList = ({ categorization, selectedCategory, depth, onSelect, subcategoriesClassName, groupClassName, t, }) => {
const categoryLabels = useMemo(() => categorization.elements.map((cat) => deriveLabelForUISchemaElement(cat, t)), [categorization, t]);
return (React.createElement("ul", { className: subcategoriesClassName }, categorization.elements.map((category, idx) => {

@@ -690,3 +698,3 @@ if (isCategorization(category)) {

const { createLabelDescriptionFrom, convertToValidClassName } = Helpers;
const { convertToValidClassName } = Helpers;
const { or, isObjectArrayControl, isPrimitiveArrayControl, rankWith } = Test;

@@ -698,3 +706,3 @@ const tableArrayControlTester = rankWith(3, or(isObjectArrayControl, isPrimitiveArrayControl));

this.confirmDelete = (path, index) => {
const p = path.substring(0, path.lastIndexOf(('.')));
const p = path.substring(0, path.lastIndexOf('.'));
this.props.removeItems(p, [index])();

@@ -704,3 +712,3 @@ };

render() {
const { addItem, uischema, schema, rootSchema, path, data, visible, errors, label, getStyleAsClassName, childErrors } = this.props;
const { addItem, uischema, schema, rootSchema, path, data, visible, errors, label, getStyleAsClassName, childErrors, translations, } = this.props;
const controlElement = uischema;

@@ -713,3 +721,3 @@ const tableClass = getStyleAsClassName('array.table.table');

getStyleAsClassName('array.table'),
convertToValidClassName(controlElement.scope)
convertToValidClassName(controlElement.scope),
].join(' ');

@@ -719,5 +727,4 @@ const createControlElement = (key) => ({

label: false,
scope: schema.type === 'object' ? `#/properties/${key}` : '#'
scope: schema.type === 'object' ? `#/properties/${key}` : '#',
});
const labelObject = createLabelDescriptionFrom(controlElement, schema);
const isValid = errors.length === 0;

@@ -730,5 +737,3 @@ const divClassNames = [validationClass]

React.createElement("label", { className: labelClass }, label),
React.createElement("button", { className: buttonClass, onClick: addItem(path, createDefaultValue(schema)) },
"Add to ",
labelObject.text)),
React.createElement("button", { className: buttonClass, onClick: addItem(path, createDefaultValue(schema)) }, translations.addTooltip)),
React.createElement("div", { className: divClassNames }, !isValid ? errors : ''),

@@ -738,9 +743,9 @@ React.createElement("table", { className: tableClass },

React.createElement("tr", null,
schema.properties ? (fpflow(fpkeys, fpfilter(prop => schema.properties[prop].type !== 'array'), fpmap(prop => React.createElement("th", { key: prop }, schema.properties[prop].title ?? fpstartCase(prop))))(schema.properties)) : (React.createElement("th", null, "Items")),
schema.properties ? (fpflow(fpkeys, fpfilter((prop) => schema.properties[prop].type !== 'array'), fpmap((prop) => (React.createElement("th", { key: prop }, schema.properties[prop].title ?? fpstartCase(prop)))))(schema.properties)) : (React.createElement("th", null, "Items")),
React.createElement("th", null, "Valid"),
React.createElement("th", null, "\u00A0"))),
React.createElement("tbody", null, !data || !Array.isArray(data) || data.length === 0 ? (React.createElement("tr", null,
React.createElement("td", null, "No data"))) : (data.map((_child, index) => {
React.createElement("td", null, translations.noDataMessage))) : (data.map((_child, index) => {
const childPath = Paths.compose(path, `${index}`);
const errorsPerEntry = filter(childErrors, error => {
const errorsPerEntry = filter(childErrors, (error) => {
const errorPath = getControlPath(error);

@@ -751,7 +756,9 @@ return errorPath.startsWith(childPath);

const errorValidationClassName = getStyleAsClassName('array.validation.error');
const errorClassNames = errorsPerEntry ?
[validationClassName].concat(errorValidationClassName).join(' ') :
validationClassName;
const errorClassNames = errorsPerEntry
? [validationClassName]
.concat(errorValidationClassName)
.join(' ')
: validationClassName;
return (React.createElement("tr", { key: childPath },
schema.properties ? (fpflow(fpkeys, fpfilter(prop => schema.properties[prop].type !== 'array'), fpmap(prop => {
schema.properties ? (fpflow(fpkeys, fpfilter((prop) => schema.properties[prop].type !== 'array'), fpmap((prop) => {
const childPropPath = Paths.compose(childPath, prop.toString());

@@ -762,9 +769,9 @@ return (React.createElement("td", { key: childPropPath },

React.createElement(DispatchCell, { schema: schema, uischema: createControlElement(), path: childPath }))),
React.createElement("td", null, errorsPerEntry ? (React.createElement("span", { className: errorClassNames }, join(errorsPerEntry.map(e => e.message), ' and '))) : (React.createElement("span", { className: errorClassNames }, "OK"))),
React.createElement("td", null, errorsPerEntry ? (React.createElement("span", { className: errorClassNames }, join(errorsPerEntry.map((e) => e.message), ' and '))) : (React.createElement("span", { className: errorClassNames }, "OK"))),
React.createElement("td", null,
React.createElement("button", { "aria-label": `Delete`, onClick: () => {
if (window.confirm('Are you sure you wish to delete this item?')) {
React.createElement("button", { "aria-label": translations.removeAriaLabel, onClick: () => {
if (window.confirm(translations.deleteDialogMessage)) {
this.confirmDelete(childPath, index);
}
} }, "Delete"))));
} }, translations.removeTooltip))));
}))))));

@@ -788,6 +795,6 @@ }

const GroupLayoutRenderer = (props) => {
const { data, ...otherProps } = props;
const { data: _data, ...otherProps } = props;
return React.createElement(GroupLayoutRendererComponent, Object.assign({}, otherProps));
};
const GroupLayoutRendererComponent = React.memo(({ schema, uischema, path, enabled, visible, label, getStyle, getStyleAsClassName }) => {
const GroupLayoutRendererComponent = React.memo(function GroupLayoutRendererComponent({ schema, uischema, path, enabled, visible, label, getStyle, getStyleAsClassName, }) {
const group = uischema;

@@ -800,4 +807,3 @@ const elementsSize = group.elements ? group.elements.length : 0;

return (React.createElement("fieldset", { className: classNames, hidden: visible === undefined || visible === null ? false : !visible },
!isEmpty(label) ?
React.createElement("legend", { className: getStyleAsClassName('group.label') }, label) : '',
!isEmpty(label) ? (React.createElement("legend", { className: getStyleAsClassName('group.label') }, label)) : (''),
renderChildren(group, schema, childClassNames, path, enabled)));

@@ -807,3 +813,3 @@ });

const JsonFormsLayout = ({ className, children, visible }) => {
const JsonFormsLayout = ({ className, children, visible, }) => {
return (React.createElement("div", { className: className, hidden: visible === undefined || visible === null ? false : !visible }, children));

@@ -814,8 +820,10 @@ };

const HorizontalLayoutRenderer = (props) => {
const { data, ...otherProps } = props;
const { data: _data, ...otherProps } = props;
return React.createElement(HorizontalLayoutRendererComponent, Object.assign({}, otherProps));
};
const HorizontalLayoutRendererComponent = React.memo(({ schema, uischema, getStyle, getStyleAsClassName, enabled, visible, path }) => {
const HorizontalLayoutRendererComponent = React.memo(function HorizontalLayoutRendererComponent({ schema, uischema, getStyle, getStyleAsClassName, enabled, visible, path, }) {
const horizontalLayout = uischema;
const elementsSize = horizontalLayout.elements ? horizontalLayout.elements.length : 0;
const elementsSize = horizontalLayout.elements
? horizontalLayout.elements.length
: 0;
const layoutClassName = getStyleAsClassName('horizontal.layout');

@@ -831,8 +839,10 @@ const childClassNames = ['horizontal-layout-item']

const VerticalLayoutRenderer = (props) => {
const { data, ...otherProps } = props;
const { data: _data, ...otherProps } = props;
return React.createElement(VerticalLayoutRendererComponent, Object.assign({}, otherProps));
};
const VerticalLayoutRendererComponent = React.memo(({ schema, uischema, path, visible, enabled, getStyle, getStyleAsClassName }) => {
const VerticalLayoutRendererComponent = React.memo(function VerticalLayoutRendererComponent({ schema, uischema, path, visible, enabled, getStyle, getStyleAsClassName, }) {
const verticalLayout = uischema;
const elementsSize = verticalLayout.elements ? verticalLayout.elements.length : 0;
const elementsSize = verticalLayout.elements
? verticalLayout.elements.length
: 0;
const layoutClassName = getStyleAsClassName('vertical.layout');

@@ -856,3 +866,3 @@ const childClassNames = ['vertical-layout-item']

{ tester: verticalLayoutTester, renderer: VerticalLayout },
{ tester: horizontalLayoutTester, renderer: HorizontalLayout }
{ tester: horizontalLayoutTester, renderer: HorizontalLayout },
];

@@ -869,3 +879,3 @@ const vanillaCells = [

{ tester: textCellTester, cell: TextCell$1 },
{ tester: timeCellTester, cell: TimeCell$1 }
{ tester: timeCellTester, cell: TimeCell$1 },
];

@@ -872,0 +882,0 @@

2

lib/layouts/index.d.ts
import GroupLayout, { groupTester } from './GroupLayout';
import HorizontalLayout, { horizontalLayoutTester } from './HorizontalLayout';
import VerticalLayout, { verticalLayoutTester } from './VerticalLayout';
export { GroupLayout, groupTester, HorizontalLayout, horizontalLayoutTester, VerticalLayout, verticalLayoutTester };
export { GroupLayout, groupTester, HorizontalLayout, horizontalLayoutTester, VerticalLayout, verticalLayoutTester, };

2

lib/layouts/JsonFormsLayout.d.ts
/// <reference types="react" />
import { RendererProps } from '@jsonforms/core';
import { VanillaRendererProps, WithChildren } from '../index';
export declare const JsonFormsLayout: ({ className, children, visible }: RendererProps & VanillaRendererProps & WithChildren) => JSX.Element;
export declare const JsonFormsLayout: ({ className, children, visible, }: RendererProps & VanillaRendererProps & WithChildren) => JSX.Element;

2

lib/util/index.d.ts
export * from './i18nDefaults';
import { ComponentType } from 'react';
import { JsonFormsState, OwnPropsOfCell, OwnPropsOfControl, OwnPropsOfRenderer, RendererProps, StatePropsOfCell, StatePropsOfControl } from '@jsonforms/core';
import { VanillaRendererProps } from '../index';
import { ComponentType } from 'react';
/**

@@ -6,0 +6,0 @@ * Add vanilla props to the return value of calling the given

25

package.json
{
"name": "@jsonforms/vanilla-renderers",
"version": "3.1.0-alpha.1",
"version": "3.1.0-alpha.2",
"description": "Default Renderer Set for JSON Forms",

@@ -17,3 +17,4 @@ "repository": "https://github.com/eclipsesource/jsonforms",

"clean": "rimraf lib coverage dist .nyc_output example/dist 2> /dev/null",
"lint": "tslint --project tsconfig.json --exclude src/models/jsonSchema.ts",
"lint": "eslint .",
"lint:fix": "eslint --fix .",
"report": "nyc report --reporter=html",

@@ -47,4 +48,4 @@ "test": "jest --no-cache",

"peerDependencies": {
"@jsonforms/core": "3.1.0-alpha.1",
"@jsonforms/react": "3.1.0-alpha.1",
"@jsonforms/core": "3.1.0-alpha.2",
"@jsonforms/react": "3.1.0-alpha.2",
"react": "^16.12.0 || ^17.0.0 || ^18.0.0"

@@ -54,4 +55,4 @@ },

"@istanbuljs/nyc-config-typescript": "^1.0.2",
"@jsonforms/core": "^3.1.0-alpha.1",
"@jsonforms/react": "^3.1.0-alpha.1",
"@jsonforms/core": "^3.1.0-alpha.2",
"@jsonforms/react": "^3.1.0-alpha.2",
"@rollup/plugin-commonjs": "^23.0.3",

@@ -62,5 +63,12 @@ "@rollup/plugin-json": "^5.0.2",

"@types/enzyme": "^3.10.3",
"@typescript-eslint/eslint-plugin": "^5.54.1",
"@typescript-eslint/parser": "^5.54.1",
"@wojtekmaj/enzyme-adapter-react-17": "^0.6.3",
"copy-webpack-plugin": "^5.0.5",
"enzyme": "^3.10.0",
"eslint": "^7.32.0",
"eslint-config-prettier": "^8.7.0",
"eslint-plugin-import": "^2.27.5",
"eslint-plugin-prettier": "^4.2.1",
"eslint-plugin-react": "^7.32.2",
"jest": "^26.6.3",

@@ -70,2 +78,3 @@ "jsdom": "^15.2.1",

"nyc": "^15.1.0",
"prettier": "^2.8.4",
"react-dom": "^17.0.2",

@@ -83,4 +92,2 @@ "rimraf": "^3.0.2",

"ts-node": "^10.4.0",
"tslint": "^5.20.1",
"tslint-loader": "^3.5.4",
"typedoc": "^0.19.2",

@@ -119,3 +126,3 @@ "webpack": "^4.41.2",

},
"gitHead": "386174994eabc41758450b8d551e1c859498a468"
"gitHead": "1e1ccad5f7ebfaf80412c8af3e422faebb12d0d5"
}

30

README.md
# JSON Forms - More Forms. Less Code
*Complex forms in the blink of an eye*
_Complex forms in the blink of an eye_

@@ -39,17 +39,17 @@ JSON Forms eliminates the tedious task of writing fully-featured forms by hand by leveraging the capabilities of JSON, JSON Schema and Javascript.

type: 'string',
minLength: 1
minLength: 1,
},
done: {
type: 'boolean'
type: 'boolean',
},
due_date: {
type: 'string',
format: 'date'
format: 'date',
},
recurrence: {
type: 'string',
enum: ['Never', 'Daily', 'Weekly', 'Monthly']
}
enum: ['Never', 'Daily', 'Weekly', 'Monthly'],
},
},
required: ['name', 'due_date']
required: ['name', 'due_date'],
};

@@ -62,7 +62,7 @@ const uischema = {

label: false,
scope: '#/properties/done'
scope: '#/properties/done',
},
{
type: 'Control',
scope: '#/properties/name'
scope: '#/properties/name',
},

@@ -74,11 +74,11 @@ {

type: 'Control',
scope: '#/properties/due_date'
scope: '#/properties/due_date',
},
{
type: 'Control',
scope: '#/properties/recurrence'
}
]
}
]
scope: '#/properties/recurrence',
},
],
},
],
};

@@ -85,0 +85,0 @@ const initialData = {};

6

src/actions/index.ts

@@ -32,3 +32,3 @@ /*

name: styleName,
classNames
classNames,
});

@@ -38,3 +38,3 @@

type: UNREGISTER_STYLE,
name: styleName
name: styleName,
});

@@ -46,3 +46,3 @@

type: REGISTER_STYLES,
styles: styleDefs
styles: styleDefs,
});

2

src/cells/index.ts

@@ -60,4 +60,4 @@ /*

TimeCell,
timeCellTester
timeCellTester,
};
export { Customizable };

2

src/complex/array/index.ts

@@ -28,3 +28,3 @@ /*

RankedTester,
rankWith
rankWith,
} from '@jsonforms/core';

@@ -31,0 +31,0 @@ import ArrayControlRenderer, { ArrayControl } from './ArrayControlRenderer';

2

src/complex/categorization/index.ts

@@ -35,5 +35,5 @@ /*

CategorizationRenderer,
SingleCategory
SingleCategory,
};
export default CategorizationRenderer;

6

src/complex/categorization/tester.ts

@@ -32,3 +32,3 @@ /*

rankWith,
uiTypeIs
uiTypeIs,
} from '@jsonforms/core';

@@ -42,3 +42,3 @@

1,
and(uiTypeIs('Categorization'), uischema => {
and(uiTypeIs('Categorization'), (uischema) => {
const hasCategory = (element: Categorization): boolean => {

@@ -50,3 +50,3 @@ if (isEmpty(element.elements)) {

return element.elements
.map(elem =>
.map((elem) =>
isCategorization(elem) ? hasCategory(elem) : elem.type === 'Category'

@@ -53,0 +53,0 @@ )

4

src/complex/index.ts

@@ -29,3 +29,3 @@ /*

import TableArrayControl, {
tableArrayControlTester
tableArrayControlTester,
} from './TableArrayControl';

@@ -41,3 +41,3 @@

TableArrayControl,
tableArrayControlTester
tableArrayControlTester,
};

10

src/controls/index.ts

@@ -26,4 +26,8 @@ /*

import InputControl, { inputControlTester } from './InputControl';
import RadioGroupControl, { radioGroupControlTester } from './RadioGroupControl';
import OneOfRadioGroupControl, { oneOfRadioGroupControlTester } from './OneOfRadioGroupControl';
import RadioGroupControl, {
radioGroupControlTester,
} from './RadioGroupControl';
import OneOfRadioGroupControl, {
oneOfRadioGroupControlTester,
} from './OneOfRadioGroupControl';
export {

@@ -35,3 +39,3 @@ InputControl,

OneOfRadioGroupControl,
oneOfRadioGroupControlTester
oneOfRadioGroupControlTester,
};

19

src/index.ts

@@ -46,6 +46,13 @@ /*

TimeCell,
timeCellTester
timeCellTester,
} from './cells';
import { InputControl, inputControlTester, RadioGroupControl, radioGroupControlTester, OneOfRadioGroupControl, oneOfRadioGroupControlTester, } from './controls';
import {
InputControl,
inputControlTester,
RadioGroupControl,
radioGroupControlTester,
OneOfRadioGroupControl,
oneOfRadioGroupControlTester,
} from './controls';

@@ -60,3 +67,3 @@ import {

TableArrayControl,
tableArrayControlTester
tableArrayControlTester,
} from './complex';

@@ -70,3 +77,3 @@

VerticalLayout,
verticalLayoutTester
verticalLayoutTester,
} from './layouts';

@@ -124,3 +131,3 @@ import DateTimeCell from './cells/DateTimeCell';

{ tester: verticalLayoutTester, renderer: VerticalLayout },
{ tester: horizontalLayoutTester, renderer: HorizontalLayout }
{ tester: horizontalLayoutTester, renderer: HorizontalLayout },
];

@@ -138,3 +145,3 @@

{ tester: textCellTester, cell: TextCell },
{ tester: timeCellTester, cell: TimeCell }
{ tester: timeCellTester, cell: TimeCell },
];

2

src/layouts/index.ts

@@ -35,3 +35,3 @@ /*

VerticalLayout,
verticalLayoutTester
verticalLayoutTester,
};

16

src/reducers/index.ts

@@ -29,9 +29,9 @@ /*

export const getStyle = (state: JsonFormsState) => (
styleName: string,
...args: any[]
): string[] => findStyle(state.jsonforms.styles)(styleName, args);
export const getStyleAsClassName = (state: JsonFormsState) => (
styleName: string,
...args: any[]
) => findStyleAsClassName(state.jsonforms.styles)(styleName, args);
export const getStyle =
(state: JsonFormsState) =>
(styleName: string, ...args: any[]): string[] =>
findStyle(state.jsonforms.styles)(styleName, args);
export const getStyleAsClassName =
(state: JsonFormsState) =>
(styleName: string, ...args: any[]) =>
findStyleAsClassName(state.jsonforms.styles)(styleName, args);

39

src/reducers/styling.ts

@@ -34,3 +34,3 @@ /*

const copy = styles.slice();
remove(copy, styleDef => styleDef.name === name);
remove(copy, (styleDef) => styleDef.name === name);

@@ -47,19 +47,22 @@ return copy;

export const findStyle = (styles: StyleDef[]) => (
style: string,
...args: any[]
): string[] => {
const foundStyles = filter(styles, s => s.name === style);
return reduce(foundStyles, (res: string[], style: StyleDef) => {
if (typeof style.classNames === 'function') {
return res.concat(style.classNames(args));
}
return res.concat(style.classNames);
}, []);
};
export const findStyle =
(styles: StyleDef[]) =>
(style: string, ...args: any[]): string[] => {
const foundStyles = filter(styles, (s) => s.name === style);
return reduce(
foundStyles,
(res: string[], style: StyleDef) => {
if (typeof style.classNames === 'function') {
return res.concat(style.classNames(args));
}
return res.concat(style.classNames);
},
[]
);
};
export const findStyleAsClassName = (styles: StyleDef[]) => (
style: string,
...args: any[]
): string => join(findStyle(styles)(style, args), ' ');
export const findStyleAsClassName =
(styles: StyleDef[]) =>
(style: string, ...args: any[]): string =>
join(findStyle(styles)(style, args), ' ');

@@ -72,3 +75,3 @@ // TODO

name: action.name,
classNames: action.classNames
classNames: action.classNames,
});

@@ -75,0 +78,0 @@ }

6

src/styles/styleContext.ts

@@ -34,8 +34,6 @@ /*

const defaultContext: StyleContext = {
styles: vanillaStyles
styles: vanillaStyles,
};
export const JsonFormsStyleContext = React.createContext(
defaultContext
);
export const JsonFormsStyleContext = React.createContext(defaultContext);

@@ -42,0 +40,0 @@ export const useStyleContext = (): StyleContext =>

80

src/styles/styles.ts

@@ -42,136 +42,136 @@ /*

name: 'control',
classNames: ['control']
classNames: ['control'],
},
{
name: 'control.trim',
classNames: ['trim']
classNames: ['trim'],
},
{
name: 'control.input',
classNames: ['input']
classNames: ['input'],
},
{
name: 'control.select',
classNames: ['select']
classNames: ['select'],
},
{
name: 'control.checkbox',
classNames: ['checkbox']
classNames: ['checkbox'],
},
{
name: 'control.radio',
classNames: ['radio']
classNames: ['radio'],
},
{
name: 'control.radio.option',
classNames: ['radio-option']
classNames: ['radio-option'],
},
{
name: 'control.radio.input',
classNames: ['radio-input']
classNames: ['radio-input'],
},
{
name: 'control.radio.label',
classNames: ['radio-label']
classNames: ['radio-label'],
},
{
name: 'control.validation.error',
classNames: ['validation_error']
classNames: ['validation_error'],
},
{
name: 'control.validation',
classNames: ['validation']
classNames: ['validation'],
},
{
name: 'categorization',
classNames: ['categorization']
classNames: ['categorization'],
},
{
name: 'categorization.master',
classNames: ['categorization-master']
classNames: ['categorization-master'],
},
{
name: 'categorization.detail',
classNames: ['categorization-detail']
classNames: ['categorization-detail'],
},
{
name: 'category.group',
classNames: ['category-group']
classNames: ['category-group'],
},
{
name: 'category.subcategories',
classNames: ['category-subcategories']
classNames: ['category-subcategories'],
},
{
name: 'array.layout',
classNames: ['array-layout']
classNames: ['array-layout'],
},
{
name: 'array.children',
classNames: ['children']
classNames: ['children'],
},
{
name: 'group.layout',
classNames: ['group-layout']
classNames: ['group-layout'],
},
{
name: 'horizontal.layout',
classNames: ['horizontal-layout']
classNames: ['horizontal-layout'],
},
{
name: 'horizontal.layout.item',
classNames: ([size]: number[]) => [`horizontal-layout-${size}`]
classNames: ([size]: number[]) => [`horizontal-layout-${size}`],
},
{
name: 'vertical.layout',
classNames: ['vertical-layout']
classNames: ['vertical-layout'],
},
{
name: 'array.table.validation.error',
classNames: ['validation_error']
classNames: ['validation_error'],
},
{
name: 'array.table.validation',
classNames: ['validation']
classNames: ['validation'],
},
{
name: 'array.table',
classNames: ['array-table-layout', 'control']
classNames: ['array-table-layout', 'control'],
},
{
name: 'array.control.validation.error',
classNames: ['validation_error']
classNames: ['validation_error'],
},
{
name: 'array.control.validation',
classNames: ['validation']
classNames: ['validation'],
},
{
name: 'array.control.add',
classNames: ['button-add']
},
classNames: ['button-add'],
},
{
name: 'array.child.controls',
classNames: ['child-controls']
classNames: ['child-controls'],
},
{
name: 'array.child.controls.up',
classNames: ['button-up']
},
classNames: ['button-up'],
},
{
name: 'array.child.controls.down',
classNames: ['button-down']
},
classNames: ['button-down'],
},
{
name: 'array.child.controls.delete',
classNames: ['button-delete']
},
classNames: ['button-delete'],
},
{
name: 'array.control',
classNames: ['array-control-layout', 'control']
},
classNames: ['array-control-layout', 'control'],
},
{
name: 'input.description',
classNames: ['input-description']
}
classNames: ['input-description'],
},
];

4

src/util/i18nDefaults.ts
export const i18nDefaults = {
'enum.none': 'None'
}
'enum.none': 'None',
};

36

Styles.md
# Style handling in the Vanilla Renderer Set
## List of all Style Ids and hardcoded classNames
### ArrayRenderer
#### Hardcoded ClassNames
- control
#### Ids
- array.layout &rightarrow; id for the whole control
- array.button &rightarrow; id for the add button
- array.children &rightarrow; id for the area of the children
### CategorizationRenderer
#### Ids
- categorization &rightarrow; id for the whole control

@@ -17,7 +26,13 @@ - categorization.master &rightarrow; id for the master part

- category.group &rightarrow; id for a categorization in the master list
### LabelRenderer
#### Ids
- label-control &rightarrow; id for the label
### TableArrayRenderer
#### Ids
- array.table &rightarrow; id for the whole control

@@ -30,25 +45,45 @@ - array.table.table &rightarrow; id for the table

- array.validation.error &rightarrow; id for the validation column if activated
### GroupRenderer
#### Hardcoded ClassNames
- group-layout-item &rightarrow; class for a child
#### Ids
- group.layout &rightarrow; id for the group
- group.label &rightarrow; id for the group label
- group.layout.item &rightarrow; id for each wrapper of the children of the group
### HorizontalLayoutRenderer
#### Hardcoded ClassNames
- horizontal-layout-item &rightarrow; class for a child
#### Ids
- horizontal.layout &rightarrow; id for the horizontal layout
- horizontal.layout.item &rightarrow; id for each wrapper of the children of the horizontal layout
### VerticalLayoutRenderer
#### Hardcoded ClassNames
- vertical-layout-item &rightarrow; class for a child
#### Ids
- vertical.layout &rightarrow; id for the vertical layout
- vertical.layout.item &rightarrow; id for each wrapper of the children of the vertical layout
### Controls
#### Hardcoded ClassNames
- validate valid/invalid &rightarrow; id for the input of control indicating whether it is valid or not
#### Ids
- control &rightarrow; id for the whole control

@@ -61,2 +96,3 @@ - control.label &rightarrow; id for the label of control

## Example of styling id contributions
By default, the `vanillaStyles` defined in [src/styles/styles.ts](./src/styles/styles.ts) are applied.

@@ -63,0 +99,0 @@ These can be overwritten via the `JsonFormsStyleContext`.

example/example.css

Sorry, the diff of this file is not supported yet

example/index.bundled.html

Sorry, the diff of this file is not supported yet

example/index.html

Sorry, the diff of this file is not supported yet

lib/jsonforms-react-vanilla.cjs.js.map

Sorry, the diff of this file is not supported yet

lib/jsonforms-react-vanilla.esm.js.map

Sorry, the diff of this file is not supported yet

src/cells/BooleanCell.tsx

Sorry, the diff of this file is not supported yet

src/cells/DateCell.tsx

Sorry, the diff of this file is not supported yet

src/cells/DateTimeCell.tsx

Sorry, the diff of this file is not supported yet

src/cells/EnumCell.tsx

Sorry, the diff of this file is not supported yet

src/cells/IntegerCell.tsx

Sorry, the diff of this file is not supported yet

src/cells/NumberCell.tsx

Sorry, the diff of this file is not supported yet

src/cells/NumberFormatCell.tsx

Sorry, the diff of this file is not supported yet

src/cells/SliderCell.tsx

Sorry, the diff of this file is not supported yet

src/cells/TextAreaCell.tsx

Sorry, the diff of this file is not supported yet

src/cells/TextCell.tsx

Sorry, the diff of this file is not supported yet

src/cells/TimeCell.tsx

Sorry, the diff of this file is not supported yet

src/complex/array/ArrayControlRenderer.tsx

Sorry, the diff of this file is not supported yet

src/complex/categorization/CategorizationList.tsx

Sorry, the diff of this file is not supported yet

src/complex/categorization/CategorizationRenderer.tsx

Sorry, the diff of this file is not supported yet

src/complex/categorization/SingleCategory.tsx

Sorry, the diff of this file is not supported yet

src/complex/LabelRenderer.tsx

Sorry, the diff of this file is not supported yet

src/complex/TableArrayControl.tsx

Sorry, the diff of this file is not supported yet

src/controls/InputControl.tsx

Sorry, the diff of this file is not supported yet

src/controls/OneOfRadioGroupControl.tsx

Sorry, the diff of this file is not supported yet

src/controls/RadioGroup.tsx

Sorry, the diff of this file is not supported yet

src/controls/RadioGroupControl.tsx

Sorry, the diff of this file is not supported yet

src/layouts/GroupLayout.tsx

Sorry, the diff of this file is not supported yet

src/layouts/HorizontalLayout.tsx

Sorry, the diff of this file is not supported yet

src/layouts/JsonFormsLayout.tsx

Sorry, the diff of this file is not supported yet

src/layouts/VerticalLayout.tsx

Sorry, the diff of this file is not supported yet

src/util/index.tsx

Sorry, the diff of this file is not supported yet

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

About

Packages

npm

Go

Maven

PyPI

Rubygems

Stay in touch

Get open source security insights delivered straight into your inbox.

  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc