@jsonforms/vanilla-renderers - npm Package Compare versions

Comparing version 3.0.0-rc.1 to 3.0.0

lib/complex/array/ArrayControlRenderer.d.ts

 /// <reference types="react" />
+import { ArrayControlProps } from '@jsonforms/core';
+import { 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;
 declare const _default: (props: any) => JSX.Element;
 export default _default;

lib/complex/array/index.d.ts

 import { RankedTester } from '@jsonforms/core';
-import ArrayControlRenderer from './ArrayControlRenderer';
-import { ArrayControl } from './ArrayControl';
-export { ArrayControl, ArrayControlRenderer };
+import ArrayControlRenderer, { ArrayControl } from './ArrayControlRenderer';
+export { ArrayControlRenderer, ArrayControl };
 export declare const arrayControlTester: RankedTester;
 export default ArrayControlRenderer;

lib/jsonforms-react-vanilla.cjs.js

@@ -295,2 +295,22 @@ 'use strict';
     {
+        name: 'array.control.add',
+        classNames: ['button-add']
+    },
+    {
+        name: 'array.child.controls',
+        classNames: ['child-controls']
+    },
+    {
+        name: 'array.child.controls.up',
+        classNames: ['button-up']
+    },
+    {
+        name: 'array.child.controls.down',
+        classNames: ['button-down']
+    },
+    {
+        name: 'array.child.controls.delete',
+        classNames: ['button-delete']
+    },
+    {
         name: 'array.control',
@@ -606,3 +626,3 @@ classNames: ['array-control-layout', 'control']
 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, 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;
     var controlElement = uischema;
@@ -615,4 +635,8 @@ var childUiSchema = React.useMemo(function () { return core.findUISchema(uischemas, schema, uischema.scope, path, undefined, uischema, rootSchema); }, [uischemas, schema, uischema.scope, path, uischema, rootSchema]);
         .join(' ');
-    var buttonClass = getStyleAsClassName('array.control.button');
+    var buttonClassAdd = getStyleAsClassName('array.control.add');
     var labelClass = getStyleAsClassName('array.control.label');
+    var childControlsClass = getStyleAsClassName('array.child.controls');
+    var buttonClassUp = getStyleAsClassName('array.child.controls.up');
+    var buttonClassDown = getStyleAsClassName('array.child.controls.down');
+    var buttonClassDelete = getStyleAsClassName('array.child.controls.delete');
     var controlClass = [
@@ -625,3 +649,3 @@ getStyleAsClassName('array.control'),
             React__default["default"].createElement("label", { className: labelClass }, label),
-            React__default["default"].createElement("button", { className: buttonClass, onClick: addItem(path, core.createDefaultValue(schema)) },
+            React__default["default"].createElement("button", { className: buttonClassAdd, onClick: addItem(path, core.createDefaultValue(schema)) },
                 "Add to ",
@@ -632,8 +656,20 @@ label)),
             var childPath = core.composePaths(path, "" + index);
-            return (React__default["default"].createElement(react.JsonFormsDispatch, { schema: schema, uischema: childUiSchema || uischema, path: childPath, key: childPath, renderers: renderers }));
+            return (React__default["default"].createElement("div", { key: index },
+                React__default["default"].createElement(react.JsonFormsDispatch, { schema: schema, uischema: childUiSchema || uischema, path: childPath, key: childPath, renderers: renderers }),
+                React__default["default"].createElement("div", { className: childControlsClass },
+                    React__default["default"].createElement("button", { className: buttonClassUp, "aria-label": "Up", onClick: function () {
+                            moveUp(path, index)();
+                        } }, "Up"),
+                    React__default["default"].createElement("button", { className: buttonClassDown, "aria-label": "Down", onClick: function () {
+                            moveDown(path, index)();
+                        } }, "Down"),
+                    React__default["default"].createElement("button", { className: buttonClassDelete, "aria-label": "Delete", 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")))));
 };
-
 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, 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;
     var controlElement = uischema;
@@ -652,3 +688,3 @@ var labelDescription = core.Helpers.createLabelDescriptionFrom(controlElement, schema);
     };
-    return (React__default["default"].createElement(ArrayControl, { errors: errors, getStyle: getStyle, getStyleAsClassName: getStyleAsClassName, removeItems: removeItems, classNames: classNames, data: data, label: label, path: path, addItem: addItem, uischemas: uischemas, uischema: uischema, schema: schema, rootSchema: rootSchema, id: id, visible: visible, enabled: enabled }));
+    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 }));
 };
@@ -655,0 +691,0 @@ var ArrayControlRenderer$1 = withVanillaControlProps(react.withJsonFormsArrayControlProps(ArrayControlRenderer));

lib/jsonforms-react-vanilla.esm.js

 import React, { useContext, useMemo, useState } from 'react';
-import { convertToValidClassName as convertToValidClassName$2, getConfig, rankWith as rankWith$1, isBooleanControl, isDateControl, isDateTimeControl, isEnumControl, isIntegerControl, isNumberControl, isNumberFormatControl, isRangeControl, isStringControl, isMultiLineControl, isTimeControl, isControl, isDescriptionHidden, NOT_APPLICABLE, computeLabel, and, optionIs, isOneOfEnumControl, findUISchema, createDefaultValue, composePaths, Helpers, isObjectArrayWithNesting, uiTypeIs, deriveLabelForUISchemaElement, Paths, getControlPath, Resolve, encode, Test } from '@jsonforms/core';
-import { useJsonForms, withJsonFormsCellProps, withJsonFormsEnumCellProps, withTranslateProps, withJsonFormsControlProps, Control, DispatchCell, withJsonFormsEnumProps, withJsonFormsOneOfEnumProps, JsonFormsDispatch, withJsonFormsArrayControlProps, withJsonFormsLayoutProps, RendererComponent, withJsonFormsLabelProps } from '@jsonforms/react';
+import { convertToValidClassName as convertToValidClassName$2, getConfig, rankWith as rankWith$1, isBooleanControl, isDateControl, isDateTimeControl, isEnumControl, isIntegerControl, isNumberControl, isNumberFormatControl, isRangeControl, isStringControl, isMultiLineControl, isTimeControl, isControl, isDescriptionHidden, NOT_APPLICABLE, computeLabel, and, optionIs, isOneOfEnumControl, Helpers, findUISchema, createDefaultValue, composePaths, isObjectArrayWithNesting, uiTypeIs, deriveLabelForUISchemaElement, Paths, getControlPath, Resolve, encode, Test } from '@jsonforms/core';
+import { useJsonForms, withJsonFormsCellProps, withJsonFormsEnumCellProps, withTranslateProps, withJsonFormsControlProps, Control, DispatchCell, withJsonFormsEnumProps, withJsonFormsOneOfEnumProps, withJsonFormsArrayControlProps, JsonFormsDispatch, withJsonFormsLayoutProps, RendererComponent, withJsonFormsLabelProps } from '@jsonforms/react';
 import isEmpty from 'lodash/isEmpty';
@@ -191,2 +191,22 @@ import remove from 'lodash/remove';
     {
+        name: 'array.control.add',
+        classNames: ['button-add']
+    },
+    {
+        name: 'array.child.controls',
+        classNames: ['child-controls']
+    },
+    {
+        name: 'array.child.controls.up',
+        classNames: ['button-up']
+    },
+    {
+        name: 'array.child.controls.down',
+        classNames: ['button-down']
+    },
+    {
+        name: 'array.child.controls.delete',
+        classNames: ['button-delete']
+    },
+    {
         name: 'array.control',
@@ -499,3 +519,3 @@ classNames: ['array-control-layout', 'control']
 const { convertToValidClassName: convertToValidClassName$1 } = Helpers;
-const ArrayControl = ({ classNames, data, label, path, schema, errors, addItem, uischema, uischemas, getStyleAsClassName, renderers, rootSchema }) => {
+const ArrayControl = ({ classNames, data, label, path, schema, errors, addItem, removeItems, moveUp, moveDown, uischema, uischemas, getStyleAsClassName, renderers, rootSchema }) => {
     const controlElement = uischema;
@@ -508,4 +528,8 @@ const childUiSchema = useMemo(() => findUISchema(uischemas, schema, uischema.scope, path, undefined, uischema, rootSchema), [uischemas, schema, uischema.scope, path, uischema, rootSchema]);
         .join(' ');
-    const buttonClass = getStyleAsClassName('array.control.button');
+    const buttonClassAdd = getStyleAsClassName('array.control.add');
     const labelClass = getStyleAsClassName('array.control.label');
+    const childControlsClass = getStyleAsClassName('array.child.controls');
+    const buttonClassUp = getStyleAsClassName('array.child.controls.up');
+    const buttonClassDown = getStyleAsClassName('array.child.controls.down');
+    const buttonClassDelete = getStyleAsClassName('array.child.controls.delete');
     const controlClass = [
@@ -518,3 +542,3 @@ getStyleAsClassName('array.control'),
             React.createElement("label", { className: labelClass }, label),
-            React.createElement("button", { className: buttonClass, onClick: addItem(path, createDefaultValue(schema)) },
+            React.createElement("button", { className: buttonClassAdd, onClick: addItem(path, createDefaultValue(schema)) },
                 "Add to ",
@@ -525,7 +549,19 @@ label)),
             const childPath = composePaths(path, `${index}`);
-            return (React.createElement(JsonFormsDispatch, { schema: schema, uischema: childUiSchema || uischema, path: childPath, key: childPath, renderers: renderers }));
+            return (React.createElement("div", { key: index },
+                React.createElement(JsonFormsDispatch, { schema: schema, uischema: childUiSchema || uischema, path: childPath, key: childPath, renderers: renderers }),
+                React.createElement("div", { className: childControlsClass },
+                    React.createElement("button", { className: buttonClassUp, "aria-label": `Up`, onClick: () => {
+                            moveUp(path, index)();
+                        } }, "Up"),
+                    React.createElement("button", { className: buttonClassDown, "aria-label": `Down`, onClick: () => {
+                            moveDown(path, index)();
+                        } }, "Down"),
+                    React.createElement("button", { className: buttonClassDelete, "aria-label": `Delete`, onClick: () => {
+                            if (window.confirm('Are you sure you wish to delete this item?')) {
+                                removeItems(path, [index])();
+                            }
+                        } }, "Delete"))));
         })) : (React.createElement("p", null, "No data")))));
 };
-
-const ArrayControlRenderer = ({ schema, uischema, data, path, rootSchema, uischemas, addItem, getStyle, getStyleAsClassName, removeItems, id, visible, enabled, errors }) => {
+const ArrayControlRenderer = ({ schema, uischema, data, path, rootSchema, uischemas, addItem, getStyle, getStyleAsClassName, removeItems, moveUp, moveDown, id, visible, enabled, errors }) => {
     const controlElement = uischema;
@@ -544,3 +580,3 @@ const labelDescription = Helpers.createLabelDescriptionFrom(controlElement, schema);
     };
-    return (React.createElement(ArrayControl, { errors: errors, getStyle: getStyle, getStyleAsClassName: getStyleAsClassName, removeItems: removeItems, classNames: classNames, data: data, label: label, path: path, addItem: addItem, uischemas: uischemas, uischema: uischema, schema: schema, rootSchema: rootSchema, id: id, visible: visible, enabled: enabled }));
+    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 }));
 };
@@ -547,0 +583,0 @@ var ArrayControlRenderer$1 = withVanillaControlProps(withJsonFormsArrayControlProps(ArrayControlRenderer));

package.json

 {
   "name": "@jsonforms/vanilla-renderers",
-  "version": "3.0.0-rc.1",
+  "version": "3.0.0",
   "description": "Default Renderer Set for JSON Forms",
@@ -39,4 +39,4 @@ "repository": "https://github.com/eclipsesource/jsonforms",
   "peerDependencies": {
-    "@jsonforms/core": "3.0.0-rc.1",
-    "@jsonforms/react": "3.0.0-rc.1",
+    "@jsonforms/core": "3.0.0",
+    "@jsonforms/react": "3.0.0",
     "react": "^16.12.0 || ^17.0.0 || ^18.0.0"
@@ -46,4 +46,4 @@ },
     "@istanbuljs/nyc-config-typescript": "^1.0.2",
-    "@jsonforms/core": "^3.0.0-rc.1",
-    "@jsonforms/react": "^3.0.0-rc.1",
+    "@jsonforms/core": "^3.0.0",
+    "@jsonforms/react": "^3.0.0",
     "@types/enzyme": "^3.10.3",
@@ -102,3 +102,3 @@ "@wojtekmaj/enzyme-adapter-react-17": "^0.6.3",
   },
-  "gitHead": "852057ca1706007bee24bcb1b53b88c7231628a0"
+  "gitHead": "20e9e0fd72bb388611d7387e1f533d66b7839041"
 }

src/complex/array/index.ts

@@ -30,7 +30,5 @@ /*
 } from '@jsonforms/core';
-import ArrayControlRenderer from './ArrayControlRenderer';
-import { ArrayControl } from './ArrayControl';
+import ArrayControlRenderer, { ArrayControl } from './ArrayControlRenderer';
+export { ArrayControlRenderer, ArrayControl };
 
-export { ArrayControl, ArrayControlRenderer };
-
 export const arrayControlTester: RankedTester = rankWith(
@@ -37,0 +35,0 @@ 4,

src/styles/styles.ts

@@ -149,5 +149,25 @@ /*
   {
+    name: 'array.control.add',
+    classNames: ['button-add']
+  },  
+  {
+    name: 'array.child.controls',
+    classNames: ['child-controls']
+  },
+  {
+    name: 'array.child.controls.up',
+    classNames: ['button-up']
+  },  
+  {
+    name: 'array.child.controls.down',
+    classNames: ['button-down']
+  },  
+  {
+    name: 'array.child.controls.delete',
+    classNames: ['button-delete']
+  },  
+  {
     name: 'array.control',
     classNames: ['array-control-layout', 'control']
-  },  
+  },    
   {
@@ -154,0 +174,0 @@ name: 'input.description',

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

No v1

Quality

Package is not semver >=1. This means it is not stable and does not support ^ ranges.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

1562578

increased by0.62%

Lines of code

12100

increased by0.86%

Number of low quality alerts

0

decreased by-100%

Worsened metrics

Number of package files

147

decreased by-1.34%

No dependency changes