Пользовательский виджет Netlify CMS не работает с картой? - PullRequest
Новая
       38

Пользовательский виджет Netlify CMS не работает с картой?

0 голосов
/ 21 ноября 2019

Я пытался создать пользовательский виджет для Netlify CMS, чтобы можно было вставлять пары ключ-значение. Однако некоторые вещи идут не так, я думаю, что они могут быть связаны, поэтому я задаю один вопрос о них.

Это мой первый пользовательский виджет, и я в основном основываюсь на этомОфициальное руководство: https://www.netlifycms.org/docs/custom-widgets/

Я использую Map в качестве значения, но когда я добавляю новый элемент на карту, а затем вызываю обратный вызов onChange(value), кажется, ничего не происходит. Однако, если я изменю его на onChange(new Map(value)), он обновится. Похоже, что для обратного вызова onChange требуется новый объект?

Во-вторых, значение, похоже, на самом деле не сохраняется. Когда я заполняю другие виджеты и обновляю страницу, она просит восстановить предыдущие значения. Однако он не восстанавливает карту, а прекрасно восстанавливает другие значения.

И, наконец, я получаю необъяснимое исключение: объект, как секунда после того, как я что-то изменил на карте. Я предполагаю, что Netlify CMS пытается сохранить карту (отменить ее на секунду, чтобы она не сохраняла каждую набранную букву), но терпит неудачу и выдает это исключение. Это объясняет предыдущую проблему (не сохраняющую).

Мой полный код для пользовательского виджета в настоящее время: 

var IngredientsControl = createClass({
    getDefaultProps: function () {
        return {
            value: new Map()
        };
    },

    addElement: function (e) {
        var value = this.props.value;
        value.set("id", "Description");

        //is.props.onChange(value);
        this.props.onChange(new Map(value));
    },

    handleIdChange: function (oldId, newId) {
        console.log(oldId, newId);
        var value = this.props.value;
        var description = value.get(oldId);
        value.delete(oldId);
        value.set(newId, description);

        //this.props.onChange(value);
        this.props.onChange(new Map(value));
    },

    handleDescriptionChange: function (id, description) {
        console.log(id, description);
        var value = this.props.value;
        value.set(id.toLowerCase(), description);

        //this.props.onChange(value);
        this.props.onChange(new Map(value));
    },

    render: function () {
        var value = this.props.value;

        var handleIdChange = this.handleIdChange;
        var handleDescriptionChange = this.handleDescriptionChange;

        var items = [];
        for (var [id, description] of value) {
            var li = h('li', {},
                h('input', { type: 'text', value: id, onChange: function (e) { handleIdChange(id, e.target.value); } }),
                h('input', { type: 'text', value: description, onChange: function (e) { handleDescriptionChange(id, e.target.value); } })
            );
            items.push(li);
        }

        return h('div', { className: this.props.classNameWrapper },
            h('input', {
                type: 'button',
                value: "Add element",
                onClick: this.addElement
            }),
            h('ul', {}, items)
        )
    }
});

var IngredientsPreview = createClass({
    render: function () {
        var value = this.props.value;
        var items = [];
        for (var [id, description] of value) {
            var li = h('li', {},
                h('span', {}, id),
                h('span', {}, ": "),
                h('span', {}, description)
            );
            items.push(li);
        }

        return h('ul', {}, items);
    }
});

CMS.registerWidget('ingredients', IngredientsControl, IngredientsPreview);

Что я делаю не так?

Спасибо!

...