Added Json field

admin/public/styles/keystone/field-types.less

@@ -5,7 +5,7 @@
 
 
 
-// Code
+// Code, JSON
 // ------------------------------
 
 .CodeMirror-container {

fields/types/json/JsonColumn.js

@@ -0,0 +1 @@
+module.exports = require('../text/TextColumn');

fields/types/json/JsonField.js

@@ -0,0 +1,58 @@
+import Field from '../Field';
+import React from 'react';
+import { FormInput } from '../../../admin/client/App/elemental';
+
+
+// See CodeMirror docs for API:
+// http://codemirror.net/doc/manual.html
+
+module.exports = Field.create({
+ displayName: 'JsonField',
+ statics: {
+ type: 'Json',
+ },
+ onJsonChanged (event) {
+ let jsonObj = JSON.parse(event.target.value);
+ this.props.valueChanged(jsonObj);
+ },
+ getJsonValue () {
+ if (this.props.value != null) {
+ return JSON.stringify(this.props.value, null, '\t');
+ }
+ return this.props.value;
+ },
+ renderValue () {
+ const { height } = this.props;
+
+ const styles = {
+ height: height,
+ whiteSpace: 'pre-wrap',
+ overflowY: 'auto',
+ };
+
+ return (
+ <FormInput multiline noedit style={styles}>{this.getJsonValue()}</FormInput>
+ );
+ },
+ renderField () {
+ const { height, path, style } = this.props;
+
+ const styles = {
+ height: height,
+ ...style,
+ };
+
+ return (
+ <FormInput
+ autoComplete="off"
+ multiline
+ name={this.getInputName(path)}
+ onChange={this.onJsonChanged}
+ ref="focusTarget"
+ style={styles}
+ value={this.getJsonValue()}
+ />
+ );
+ },
+
+});

fields/types/json/JsonFilter.js

@@ -0,0 +1 @@
+module.exports = require('../text/TextFilter');

fields/types/json/JsonType.js

@@ -0,0 +1,56 @@
+var assign = require('object-assign');
+var FieldType = require('../Type');
+var TextType = require('../text/TextType');
+var util = require('util');
+
+
+/**
+ * HTML FieldType Constructor
+ * @extends Field
+ * @api public
+ */
+function json (list, path, options) {
+ this._nativeType = Object;
+ this._defaultSize = 'full';
+ this.height = options.height || 180;
+ this._properties = ['editor', 'height'];
+ this.codemirror = options.codemirror || {};
+ this.editor = assign({ mode: json }, this.codemirror);
+ json.super_.call(this, list, path, options);
+}
+
+json.properName = 'Json';
+util.inherits(json, FieldType);
+
+/* Inherit from TextType prototype */
+json.prototype.addFilterToQuery = TextType.prototype.addFilterToQuery;
+
+
+json.prototype.validateInput = function (data, required, item) {
+ var value = this.getValueFromData(data);
+
+ if (value === undefined && item && (item.get(this.path) || item.get(this.path) === 0)) {
+ return true;
+ }
+
+ if (value == null && required) {
+ return false;
+ } else if (value == null && !required) {
+ return true;
+ } else {
+ try {
+ value = this.getValueFromData(data, true);
+
+ if (typeof value !== 'object') {
+ return false;
+ } else {
+ return true;
+ }
+ } catch (ex) {
+ return false;
+ }
+ }
+};
+
+/* Export Field Type */
+module.exports = json;

fields/types/json/Readme.md

@@ -0,0 +1,25 @@
+# Json Field
+Stores a `Json string` in the model.
+
+## Example
+
+```js
+{ type: Types.Json, height: 180}
+```
+
+## Options
+
+`height` `Number`
+The height of the field (in pixels). Default: 180
+
+
+## Methods
+
+### Inherits from [`Text`](../text)
+
+* `addFilterToQuery`
+* `validateInput`
+* `validateRequiredInput`
+
+## Filtering
+Uses the same logic and filter UI as the [`Text`](../text) field type.

fields/types/json/test/explorer.js

@@ -0,0 +1,11 @@
+module.exports = {
+ Field: require('../JsonField'),
+ Filter: require('../JsonFilter'),
+ readme: require('fs').readFileSync('./fields/types/code/Readme.md', 'utf8'),
+ section: 'Text',
+ spec: {
+ label: 'Json',
+ path: 'json',
+ value: '{ name: \'hello world\'}',
+ },
+};

fields/types/json/test/type.js

@@ -0,0 +1,66 @@
+const demand = require('must');
+const JsonType = require('../JsonType');
+
+exports.initList = function (List) {
+ List.add({
+ json: { type: JsonType },
+ nested: {
+ json: { type: JsonType },
+ },
+ });
+};
+
+exports.createData = function (List) { // eslint-disable-line no-unused-vars
+
+};
+
+exports.testFilters = function (List) { // eslint-disable-line no-unused-vars
+
+};
+
+
+exports.testFieldType = function (List) {
+ describe('updateItem', function () {
+ it('should update top level fields', function (done) {
+ var testItem = new List.model();
+
+ List.fields.json.updateItem(testItem, {
+ json: '{foo:bar}',
+ },
+ function () {
+ demand(testItem.json).be('{foo:bar}');
+ done();
+ });
+ });
+
+
+ it('should update nested fields', function (done) {
+ var testItem = new List.model();
+ List.fields['nested.json'].updateItem(testItem, {
+ nested: {
+ json: '{foo:bar}',
+ },
+ },
+ function () {
+ demand(testItem.nested.json).be('{foo:bar}');
+ done();
+ });
+ });
+
+
+ it('should update nested fields with flat paths', function (done) {
+ var testItem = new List.model();
+ List.fields['nested.json'].updateItem(testItem, {
+ 'nested.json': '{foo:bar}',
+ },
+ function () {
+ demand(testItem.nested.json).be('{foo:bar}');
+ done();
+ });
+ });
+
+
+ });
+
+
+};

lib/fieldTypes.js

@@ -13,6 +13,7 @@ var fields = {
  get File () { return require('../fields/types/file/FileType'); },
  get GeoPoint () { return require('../fields/types/geopoint/GeoPointType'); },
  get Html () { return require('../fields/types/html/HtmlType'); },
+ get Json () { return require('../fields/types/json/JsonType'); },
  get Key () { return require('../fields/types/key/KeyType'); },
  get LocalFile () { return require('../fields/types/localfile/LocalFileType'); },
  get LocalFiles () { return require('../fields/types/localfiles/LocalFilesType'); },