Support string / number only lists

[KaneFreeman]

Can we have a List widget that's just an array of strings, because right now for the List component, it has to be an array of objects like this

but for the tags on my blog I just want an array of strings

Originally posted by @robigan in #4 (comment)

[robigan]

I tried to make my own widget based off of the List widget but my dev environment kept crashing and I can hardly understand the code as it's just so vertical and not commented

[robigan]

Most likely my node version but I'll figure that out later

[robigan]

Actually @KaneFreeman what node version do you use?

[KaneFreeman]

Actually @KaneFreeman what node version do you use?

16

[robigan]

Hmm

[robigan]

Turns out it has got to do with some strange error in port number https://stackoverflow.com/questions/70854917/webpackdevserver-crashing-with-error-rsv1-must-be-clear

[robigan]

Getting somewhere

[robigan]

Getting somewhere

@KaneFreeman How would you propose implementing the removal of an item from an array

[CamilleScholtz]

I did this on netlifyCMS using the following extension:

// See: https://github.com/netlify/netlify-cms/issues/4646 -->
var ArrayControl = createClass({
	handleChange: function (e) {
		const separator = this.props.field.get("separator", ", ");
		this.props.onChange(e.target.value.split(separator));
	},

	render: function () {
		const separator = this.props.field.get("separator", ", ");
		var value = this.props.value;

		return h("input", {
			id: this.props.forID,
			className: this.props.classNameWrapper,
			type: "text",
			value: value ? value.join(separator) : "",
			onChange: this.handleChange,
		});
	},
});

var ArrayPreview = createClass({
	render: function () {
		return h(
			"ul",
			{},
			this.props.value.map(function (val, index) {
				return h("li", { key: index }, val);
			})
	);
	},
});

var schema = {
	properties: {
		separator: { type: "string" },
	},
};

CMS.registerWidget("array", ArrayControl, ArrayPreview, schema);

[KaneFreeman]

@KaneFreeman How would you propose implementing the removal of an item from an array

Make a copy of the array, then use splice.

const newValue = [...oldValue];
newValue.splice(index, 1);

[robigan]

I did this on netlifyCMS using the following extension:

// See: https://github.com/netlify/netlify-cms/issues/4646 -->
var ArrayControl = createClass({
	handleChange: function (e) {
		const separator = this.props.field.get("separator", ", ");
		this.props.onChange(e.target.value.split(separator));
	},

	render: function () {
		const separator = this.props.field.get("separator", ", ");
		var value = this.props.value;

		return h("input", {
			id: this.props.forID,
			className: this.props.classNameWrapper,
			type: "text",
			value: value ? value.join(separator) : "",
			onChange: this.handleChange,
		});
	},
});

var ArrayPreview = createClass({
	render: function () {
		return h(
			"ul",
			{},
			this.props.value.map(function (val, index) {
				return h("li", { key: index }, val);
			})
	);
	},
});

var schema = {
	properties: {
		separator: { type: "string" },
	},
};

CMS.registerWidget("array", ArrayControl, ArrayPreview, schema);

This is just a string separated by commas, neat implementation but am trying to integrate into the existing code base and use a UI similar to the one I have presented above, ideally without creating new components

[robigan]

@KaneFreeman How would you propose implementing the removal of an item from an array

Make a copy of the array, then use splice.

const newValue = [...oldValue];
newValue.splice(index, 1);

I mean UI wise