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

react-jsonschema-form

Package Overview
Dependencies
Maintainers
7
Versions
103
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

react-jsonschema-form - npm Package Compare versions

Comparing version 1.0.5 to 1.0.6

lib/components/AddButton.js

67

lib/components/fields/ArrayField.js

@@ -11,2 +11,6 @@ "use strict";

var _objectWithoutProperties2 = require("babel-runtime/helpers/objectWithoutProperties");
var _objectWithoutProperties3 = _interopRequireDefault(_objectWithoutProperties2);
var _defineProperty2 = require("babel-runtime/helpers/defineProperty");

@@ -16,2 +20,6 @@

var _extends3 = require("babel-runtime/helpers/extends");
var _extends4 = _interopRequireDefault(_extends3);
var _toConsumableArray2 = require("babel-runtime/helpers/toConsumableArray");

@@ -41,9 +49,9 @@

var _extends3 = require("babel-runtime/helpers/extends");
var _AddButton = require("../AddButton");
var _extends4 = _interopRequireDefault(_extends3);
var _AddButton2 = _interopRequireDefault(_AddButton);
var _objectWithoutProperties2 = require("babel-runtime/helpers/objectWithoutProperties");
var _IconButton = require("../IconButton");
var _objectWithoutProperties3 = _interopRequireDefault(_objectWithoutProperties2);
var _IconButton2 = _interopRequireDefault(_IconButton);

@@ -97,19 +105,2 @@ var _react = require("react");

function IconBtn(props) {
var _props$type = props.type,
type = _props$type === undefined ? "default" : _props$type,
icon = props.icon,
className = props.className,
otherProps = (0, _objectWithoutProperties3.default)(props, ["type", "icon", "className"]);
return _react2.default.createElement(
"button",
(0, _extends4.default)({
type: "button",
className: "btn btn-" + type + " " + className
}, otherProps),
_react2.default.createElement("i", { className: "glyphicon glyphicon-" + icon })
);
}
// Used in the two templates

@@ -142,3 +133,3 @@ function DefaultArrayItem(props) {

} },
(props.hasMoveUp || props.hasMoveDown) && _react2.default.createElement(IconBtn, {
(props.hasMoveUp || props.hasMoveDown) && _react2.default.createElement(_IconButton2.default, {
icon: "arrow-up",

@@ -151,3 +142,3 @@ className: "array-item-move-up",

}),
(props.hasMoveUp || props.hasMoveDown) && _react2.default.createElement(IconBtn, {
(props.hasMoveUp || props.hasMoveDown) && _react2.default.createElement(_IconButton2.default, {
icon: "arrow-down",

@@ -160,3 +151,3 @@ className: "array-item-move-down",

}),
props.hasRemove && _react2.default.createElement(IconBtn, {
props.hasRemove && _react2.default.createElement(_IconButton2.default, {
type: "danger",

@@ -200,3 +191,4 @@ icon: "remove",

),
props.canAdd && _react2.default.createElement(AddButton, {
props.canAdd && _react2.default.createElement(_AddButton2.default, {
className: "array-item-add",
onClick: props.onAddClick,

@@ -234,3 +226,4 @@ disabled: props.disabled || props.readonly

),
props.canAdd && _react2.default.createElement(AddButton, {
props.canAdd && _react2.default.createElement(_AddButton2.default, {
className: "array-item-add",
onClick: props.onAddClick,

@@ -761,24 +754,2 @@ disabled: props.disabled || props.readonly

function AddButton(_ref4) {
var onClick = _ref4.onClick,
disabled = _ref4.disabled;
return _react2.default.createElement(
"div",
{ className: "row" },
_react2.default.createElement(
"p",
{ className: "col-xs-3 col-xs-offset-9 array-item-add text-right" },
_react2.default.createElement(IconBtn, {
type: "info",
icon: "plus",
className: "btn-add col-xs-12",
tabIndex: "0",
onClick: onClick,
disabled: disabled
})
)
);
}
if (process.env.NODE_ENV !== "production") {

@@ -785,0 +756,0 @@ ArrayField.propTypes = {

@@ -40,2 +40,4 @@ "use strict";

onChange = props.onChange,
onFocus = props.onFocus,
onBlur = props.onBlur,
rawErrors = props.rawErrors;

@@ -61,2 +63,4 @@ var title = schema.title;

onChange: onChange,
onFocus: onFocus,
onBlur: onBlur,
label: title === undefined ? name : title,

@@ -80,2 +84,4 @@ value: formData,

onChange: _propTypes2.default.func.isRequired,
onFocus: _propTypes2.default.func,
onBlur: _propTypes2.default.func,
formData: _propTypes2.default.bool,

@@ -82,0 +88,0 @@ required: _propTypes2.default.bool,

@@ -11,6 +11,2 @@ "use strict";

var _keys = require("babel-runtime/core-js/object/keys");
var _keys2 = _interopRequireDefault(_keys);
var _defineProperty2 = require("babel-runtime/helpers/defineProperty");

@@ -20,5 +16,5 @@

var _extends4 = require("babel-runtime/helpers/extends");
var _extends5 = require("babel-runtime/helpers/extends");
var _extends5 = _interopRequireDefault(_extends4);
var _extends6 = _interopRequireDefault(_extends5);

@@ -45,2 +41,10 @@ var _getPrototypeOf = require("babel-runtime/core-js/object/get-prototype-of");

var _keys = require("babel-runtime/core-js/object/keys");
var _keys2 = _interopRequireDefault(_keys);
var _AddButton = require("../AddButton");
var _AddButton2 = _interopRequireDefault(_AddButton);
var _react = require("react");

@@ -59,2 +63,25 @@

function DefaultObjectFieldTemplate(props) {
var canExpand = function canExpand() {
var formData = props.formData,
schema = props.schema,
uiSchema = props.uiSchema;
if (!schema.additionalProperties) {
return false;
}
var _getUiOptions = (0, _utils.getUiOptions)(uiSchema),
expandable = _getUiOptions.expandable;
if (expandable === false) {
return expandable;
}
// if ui:options.expandable was not explicitly set to false, we can add
// another property if we have not exceeded maxProperties yet
if (schema.maxProperties !== undefined) {
return (0, _keys2.default)(formData).length < schema.maxProperties;
}
return true;
};
var TitleField = props.TitleField,

@@ -79,2 +106,7 @@ DescriptionField = props.DescriptionField;

return prop.content;
}),
canExpand() && _react2.default.createElement(_AddButton2.default, {
className: "object-property-expand",
onClick: props.onAddClick(props.schema),
disabled: props.disabled || props.readonly
})

@@ -98,7 +130,32 @@ );

return _ret = (_temp = (_this = (0, _possibleConstructorReturn3.default)(this, (_ref = ObjectField.__proto__ || (0, _getPrototypeOf2.default)(ObjectField)).call.apply(_ref, [this].concat(args))), _this), _this.onPropertyChange = function (name) {
return _ret = (_temp = (_this = (0, _possibleConstructorReturn3.default)(this, (_ref = ObjectField.__proto__ || (0, _getPrototypeOf2.default)(ObjectField)).call.apply(_ref, [this].concat(args))), _this), _this.state = {
additionalProperties: {}
}, _this.onPropertyChange = function (name) {
return function (value, errorSchema) {
var newFormData = (0, _extends5.default)({}, _this.props.formData, (0, _defineProperty3.default)({}, name, value));
_this.props.onChange(newFormData, errorSchema && _this.props.errorSchema && (0, _extends5.default)({}, _this.props.errorSchema, (0, _defineProperty3.default)({}, name, errorSchema)));
var newFormData = (0, _extends6.default)({}, _this.props.formData, (0, _defineProperty3.default)({}, name, value));
_this.props.onChange(newFormData, errorSchema && _this.props.errorSchema && (0, _extends6.default)({}, _this.props.errorSchema, (0, _defineProperty3.default)({}, name, errorSchema)));
};
}, _this.getAvailableKey = function (preferredKey, formData) {
var index = 0;
var newKey = preferredKey;
while (_this.props.formData.hasOwnProperty(newKey)) {
newKey = preferredKey + "-" + ++index;
}
return newKey;
}, _this.onKeyChange = function (oldValue) {
return function (value, errorSchema) {
value = _this.getAvailableKey(value, _this.props.formData);
var newFormData = (0, _extends6.default)({}, _this.props.formData);
var property = newFormData[oldValue];
delete newFormData[oldValue];
newFormData[value] = property;
_this.props.onChange(newFormData, errorSchema && _this.props.errorSchema && (0, _extends6.default)({}, _this.props.errorSchema, (0, _defineProperty3.default)({}, value, errorSchema)));
};
}, _this.handleAddClick = function (schema) {
return function () {
var type = schema.additionalProperties.type;
var newFormData = (0, _extends6.default)({}, _this.props.formData);
newFormData[_this.getAvailableKey("newKey", newFormData)] = _this.getDefaultValue(type);
_this.props.onChange(newFormData);
};
}, _temp), (0, _possibleConstructorReturn3.default)(_this, _ret);

@@ -114,2 +171,23 @@ }

}, {
key: "getDefaultValue",
value: function getDefaultValue(type) {
switch (type) {
case "string":
return "New Value";
case "array":
return [];
case "boolean":
return false;
case "null":
return null;
case "number":
return 0;
case "object":
return {};
default:
// We don't have a datatype for some reason (perhaps additionalProperties was true)
return "New Value";
}
}
}, {
key: "render",

@@ -192,2 +270,3 @@ value: function render() {

formData: formData[name],
onKeyChange: _this2.onKeyChange(name),
onChange: _this2.onPropertyChange(name),

@@ -213,3 +292,3 @@ onBlur: onBlur,

};
return _react2.default.createElement(Template, templateProps);
return _react2.default.createElement(Template, (0, _extends6.default)({}, templateProps, { onAddClick: this.handleAddClick }));
}

@@ -216,0 +295,0 @@ }]);

@@ -39,2 +39,4 @@ "use strict";

var _utils = require("../../utils");
var _react = require("react");

@@ -48,4 +50,2 @@

var _utils = require("../../utils");
var _UnsupportedField = require("./UnsupportedField");

@@ -107,2 +107,18 @@

function LabelInput(props) {
var id = props.id,
label = props.label,
onChange = props.onChange;
return _react2.default.createElement("input", {
className: "form-control",
type: "text",
id: id,
onBlur: function onBlur(event) {
return onChange(event.target.value);
},
defaultValue: label
});
}
function Help(props) {

@@ -164,3 +180,4 @@ var help = props.help;

required = props.required,
displayLabel = props.displayLabel;
displayLabel = props.displayLabel,
onKeyChange = props.onKeyChange;

@@ -170,2 +187,4 @@ if (hidden) {

}
var additional = props.schema.hasOwnProperty(_utils.ADDITIONAL_PROPERTY_FLAG);
var keyLabel = label + " Key";

@@ -175,2 +194,13 @@ return _react2.default.createElement(

{ className: classNames },
additional && _react2.default.createElement(
"div",
{ className: "form-group" },
_react2.default.createElement(Label, { label: keyLabel, required: required, id: id + "-key" }),
_react2.default.createElement(LabelInput, {
label: label,
required: required,
id: id + "-key",
onChange: onKeyChange
})
),
displayLabel && _react2.default.createElement(Label, { label: label, required: required, id: id }),

@@ -218,2 +248,3 @@ displayLabel && description ? description : null,

name = props.name,
onKeyChange = props.onKeyChange,
required = props.required,

@@ -301,2 +332,3 @@ _props$registry = props.registry,

hidden: hidden,
onKeyChange: onKeyChange,
required: required,

@@ -303,0 +335,0 @@ disabled: disabled,

@@ -24,7 +24,11 @@ "use strict";

var legend = required ? title + REQUIRED_FIELD_SYMBOL : title;
return _react2.default.createElement(
"legend",
{ id: id },
legend
title,
required && _react2.default.createElement(
"span",
{ className: "required" },
REQUIRED_FIELD_SYMBOL
)
);

@@ -31,0 +35,0 @@ }

@@ -121,3 +121,3 @@ "use strict";

(0, _utils.setState)(_this, { errors: [], errorSchema: {} }, function () {
_this.setState({ errors: [], errorSchema: {} }, function () {
if (_this.props.onSubmit) {

@@ -133,2 +133,3 @@ _this.props.onSubmit((0, _extends3.default)({}, _this.state, { status: "submitted" }));

}
_this.formElement = null;
return _this;

@@ -242,4 +243,13 @@ }

}, {
key: "submit",
value: function submit() {
if (this.formElement) {
this.formElement.dispatchEvent(new Event("submit", { cancelable: true }));
}
}
}, {
key: "render",
value: function render() {
var _this2 = this;
var _props3 = this.props,

@@ -258,3 +268,4 @@ children = _props3.children,

acceptcharset = _props3.acceptcharset,
noHtml5Validate = _props3.noHtml5Validate;
noHtml5Validate = _props3.noHtml5Validate,
disabled = _props3.disabled;
var _state2 = this.state,

@@ -283,3 +294,6 @@ schema = _state2.schema,

noValidate: noHtml5Validate,
onSubmit: this.onSubmit },
onSubmit: this.onSubmit,
ref: function ref(form) {
_this2.formElement = form;
} },
this.renderErrors(),

@@ -297,3 +311,4 @@ _react2.default.createElement(_SchemaField, {

registry: registry,
safeRenderCompletion: safeRenderCompletion
safeRenderCompletion: safeRenderCompletion,
disabled: disabled
}),

@@ -319,2 +334,3 @@ children ? children : _react2.default.createElement(

liveValidate: false,
disabled: false,
safeRenderCompletion: false,

@@ -321,0 +337,0 @@ noHtml5Validate: false,

@@ -6,2 +6,3 @@ "use strict";

});
exports.ADDITIONAL_PROPERTY_FLAG = undefined;

@@ -73,2 +74,4 @@ var _setImmediate2 = require("babel-runtime/core-js/set-immediate");

exports.optionsList = optionsList;
exports.stubExistingAdditionalProperties = stubExistingAdditionalProperties;
exports.resolveSchema = resolveSchema;
exports.retrieveSchema = retrieveSchema;

@@ -99,2 +102,4 @@ exports.deepEquals = deepEquals;

var ADDITIONAL_PROPERTY_FLAG = exports.ADDITIONAL_PROPERTY_FLAG = "__additional_property";
var widgetMap = {

@@ -527,15 +532,51 @@ boolean: {

function retrieveSchema(schema) {
// In the case where we have to implicitly create a schema, it is useful to know what type to use
// based on the data we are defining
var guessType = function guessType(value) {
if (Array.isArray(value)) {
return "array";
} else if (typeof value === "string") {
return "string";
} else if (value == null) {
return "null";
} else if (typeof value === "boolean") {
return "boolean";
} else if (!isNaN(value)) {
return "number";
} else if ((typeof value === "undefined" ? "undefined" : (0, _typeof3.default)(value)) === "object") {
return "object";
}
// Default to string if we can't figure it out
return "string";
};
// This function will create new "properties" items for each key in our formData
function stubExistingAdditionalProperties(schema) {
var definitions = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
var formData = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};
// Clone the schema so we don't ruin the consumer's original
schema = (0, _extends4.default)({}, schema, {
properties: (0, _extends4.default)({}, schema.properties)
});
(0, _keys2.default)(formData).forEach(function (key) {
if (schema.properties.hasOwnProperty(key)) {
// No need to stub, our schema already has the property
return;
}
var additionalProperties = schema.additionalProperties.hasOwnProperty("type") ? (0, _extends4.default)({}, schema.additionalProperties) : { type: guessType(formData[key]) };
// The type of our new key should match the additionalProperties value;
schema.properties[key] = additionalProperties;
// Set our additional property flag so we know it was dynamically added
schema.properties[key][ADDITIONAL_PROPERTY_FLAG] = true;
});
return schema;
}
function resolveSchema(schema) {
var definitions = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
var formData = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};
if (schema.hasOwnProperty("$ref")) {
// Retrieve the referenced schema definition.
var $refSchema = findSchemaDefinition(schema.$ref, definitions);
// Drop the $ref property of the source schema.
var $ref = schema.$ref,
localSchema = (0, _objectWithoutProperties3.default)(schema, ["$ref"]);
// Update referenced schema definition with local schema properties.
return retrieveSchema((0, _extends4.default)({}, $refSchema, localSchema), definitions, formData);
return resolveReference(schema, definitions, formData);
} else if (schema.hasOwnProperty("dependencies")) {

@@ -550,2 +591,25 @@ var resolvedSchema = resolveDependencies(schema, definitions, formData);

function resolveReference(schema, definitions, formData) {
// Retrieve the referenced schema definition.
var $refSchema = findSchemaDefinition(schema.$ref, definitions);
// Drop the $ref property of the source schema.
var $ref = schema.$ref,
localSchema = (0, _objectWithoutProperties3.default)(schema, ["$ref"]);
// Update referenced schema definition with local schema properties.
return retrieveSchema((0, _extends4.default)({}, $refSchema, localSchema), definitions, formData);
}
function retrieveSchema(schema) {
var definitions = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
var formData = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};
var resolvedSchema = resolveSchema(schema, definitions, formData);
var hasAdditionalProperties = resolvedSchema.hasOwnProperty("additionalProperties") && resolvedSchema.additionalProperties !== false;
if (hasAdditionalProperties) {
return stubExistingAdditionalProperties(resolvedSchema, definitions, formData);
}
return resolvedSchema;
}
function resolveDependencies(schema, definitions, formData) {

@@ -587,9 +651,16 @@ // Drop the dependencies from the source schema.

schema = mergeSchemas(schema, dependentSchema);
return oneOf === undefined ? schema : withExactlyOneSubschema(schema, definitions, formData, dependencyKey, oneOf);
// Since it does not contain oneOf, we return the original schema.
if (oneOf === undefined) {
return schema;
} else if (!Array.isArray(oneOf)) {
throw new Error("invalid: it is some " + (typeof oneOf === "undefined" ? "undefined" : (0, _typeof3.default)(oneOf)) + " instead of an array");
}
// Resolve $refs inside oneOf.
var resolvedOneOf = oneOf.map(function (subschema) {
return subschema.hasOwnProperty("$ref") ? resolveReference(subschema, definitions, formData) : subschema;
});
return withExactlyOneSubschema(schema, definitions, formData, dependencyKey, resolvedOneOf);
}
function withExactlyOneSubschema(schema, definitions, formData, dependencyKey, oneOf) {
if (!Array.isArray(oneOf)) {
throw new Error("invalid oneOf: it is some " + (typeof oneOf === "undefined" ? "undefined" : (0, _typeof3.default)(oneOf)) + " instead of an array");
}
var validSubschemas = oneOf.filter(function (subschema) {

@@ -722,3 +793,3 @@ if (!subschema.properties) {

};
if ("$ref" in schema) {
if ("$ref" in schema || "dependencies" in schema) {
var _schema = retrieveSchema(schema, definitions, formData);

@@ -725,0 +796,0 @@ return toIdSchema(_schema, id, definitions, formData, idPrefix);

{
"name": "react-jsonschema-form",
"version": "1.0.5",
"version": "1.0.6",
"description": "A simple React component capable of building HTML forms out of a JSON schema.",

@@ -8,4 +8,4 @@ "scripts": {

"build:lib": "rimraf lib && cross-env NODE_ENV=production babel -d lib/ src/",
"build:dist": "rimraf dist && cross-env NODE_ENV=production webpack --config webpack.config.dist.js --optimize-minimize",
"build:playground": "rimraf build && cross-env NODE_ENV=production webpack --config webpack.config.prod.js --optimize-minimize && cp playground/index.prod.html build/index.html",
"build:dist": "rimraf dist && cross-env NODE_ENV=production webpack --config webpack.config.dist.js",
"build:playground": "rimraf build && cross-env NODE_ENV=production webpack --config webpack.config.prod.js && cp playground/index.prod.html build/index.html",
"cs-check": "prettier -l $npm_package_prettierOptions '{playground,src,test}/**/*.js'",

@@ -15,2 +15,3 @@ "cs-format": "prettier --jsx-bracket-same-line --trailing-comma es5 --use-tabs false --semi --tab-width 2 '{playground,src,test}/**/*.js' --write",

"lint": "eslint src test playground",
"prepare": "npm run dist",
"precommit": "lint-staged",

@@ -55,5 +56,5 @@ "publish-to-gh-pages": "npm run build:playground && gh-pages --dist build/",

"babel-cli": "^6.18.0",
"babel-core": "^6.18.2",
"babel-core": "^6.26.3",
"babel-eslint": "^7.2.3",
"babel-loader": "^6.2.7",
"babel-loader": "^7.1.5",
"babel-plugin-react-transform": "^2.0.2",

@@ -79,3 +80,2 @@ "babel-plugin-transform-class-properties": "^6.18.0",

"express": "^4.14.0",
"extract-text-webpack-plugin": "^1.0.1",
"gh-pages": "^0.11.0",

@@ -87,4 +87,5 @@ "html": "^1.0.0",

"lint-staged": "^3.3.1",
"mini-css-extract-plugin": "^0.4.3",
"mocha": "^5.2.0",
"prettier": "^1.12.0",
"prettier": "^1.15.1",
"react": "^15.5.0",

@@ -101,4 +102,5 @@ "react-addons-test-utils": "^15.3.2",

"toctoc": "^0.2.3",
"webpack": "^1.13.3",
"webpack-dev-middleware": "^1.8.4",
"webpack": "^4.20.2",
"webpack-cli": "^3.1.2",
"webpack-dev-middleware": "^3.4.0",
"webpack-hot-middleware": "^2.13.2"

@@ -105,0 +107,0 @@ },

Sorry, the diff of this file is too big to display

Sorry, the diff of this file is not supported yet

Sorry, the diff of this file is too big to display

SocketSocket SOC 2 Logo

Product

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

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc