ra-input-array-sortable/dist/index.js

A sortable input for React Admin.

'use strict';

Object.defineProperty(exports, '__esModule', { value: true });

var React = require('react');
var reactSortableHoc = require('react-sortable-hoc');
var arrayMove = require('array-move');
var reactAdmin = require('react-admin');
var DragIndicatorIcon = require('@material-ui/icons/DragIndicator');
var HighlightOffIcon = require('@material-ui/icons/HighlightOff');
var Typography = require('@material-ui/core/Typography');
var AddCircleIcon = require('@material-ui/icons/AddCircle');

function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }

var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
var arrayMove__default = /*#__PURE__*/_interopDefaultLegacy(arrayMove);
var DragIndicatorIcon__default = /*#__PURE__*/_interopDefaultLegacy(DragIndicatorIcon);
var HighlightOffIcon__default = /*#__PURE__*/_interopDefaultLegacy(HighlightOffIcon);
var Typography__default = /*#__PURE__*/_interopDefaultLegacy(Typography);
var AddCircleIcon__default = /*#__PURE__*/_interopDefaultLegacy(AddCircleIcon);

/******************************************************************************
Copyright (c) Microsoft Corporation.

Permission to use, copy, modify, and/or distribute this software for any
purpose with or without fee is hereby granted.

THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
PERFORMANCE OF THIS SOFTWARE.
***************************************************************************** */

function __rest(s, e) {
    var t = {};
    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
        t[p] = s[p];
    if (s != null && typeof Object.getOwnPropertySymbols === "function")
        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
                t[p[i]] = s[p[i]];
        }
    return t;
}

const DragHandle = reactSortableHoc.SortableHandle(() => (React__default['default'].createElement(DragIndicatorIcon__default['default'], { color: "disabled", style: { cursor: "move" }, fontSize: "large" })));
const SortableItem = reactSortableHoc.SortableElement(({ onRemove, label, baseSource, fields }) => {
    const children = [].concat(fields);
    return (React__default['default'].createElement("div", { style: { padding: "20px 0", display: "flex" } },
        React__default['default'].createElement(Typography__default['default'], { variant: "caption" }, label),
        React__default['default'].createElement(DragHandle, null),
        React__default['default'].createElement("div", { style: { width: "100%" } }, children.map((field) => (React__default['default'].createElement("div", { style: { padding: 5 } }, React.cloneElement(field, Object.assign(Object.assign({}, field.props), { source: baseSource + "." + label + "." + field.props.source })))))),
        React__default['default'].createElement(HighlightOffIcon__default['default'], { color: "error", onClick: onRemove })));
});
const SortableList = reactSortableHoc.SortableContainer(({ items, onRemoveItem, baseSource, fields }) => {
    return (React__default['default'].createElement("div", null,
        React__default['default'].createElement("style", { dangerouslySetInnerHTML: { __html: `.sortableHelper{ z-index:10; }` } }),
        items &&
            items.map((value, index) => (React__default['default'].createElement(SortableItem, { key: `item-${index}`, baseSource: baseSource, fields: fields, index: index, label: index, onRemove: () => onRemoveItem(index) })))));
});
function Sortable(props) {
    const input = reactAdmin.useInput(props);
    const _a = input.field, { name, onChange, value: items } = _a, rest = __rest(_a, ["name", "onChange", "value"]);
    const { source, children: fields } = props;
    const { label } = props;
    const onSortEnd = ({ oldIndex, newIndex }) => {
        onChange(arrayMove__default['default'](items, oldIndex, newIndex));
    };
    const onRemoveItem = (index) => {
        console.log("remove");
        items.splice(index, 1);
        onChange([...items]);
    };
    const addEmpty = () => {
        const baseItems = items || [];
        if (fields.length) {
            onChange(baseItems.concat({}));
        }
        else {
            onChange(baseItems.concat(null));
        }
    };
    return (React__default['default'].createElement("div", { style: { padding: "20px 0" } },
        React__default['default'].createElement(Typography__default['default'], { variant: "h6" }, label || source),
        React__default['default'].createElement(SortableList, { useDragHandle: true, items: items, baseSource: source, fields: fields, helperClass: "sortableHelper", onSortEnd: onSortEnd, onRemoveItem: onRemoveItem }),
        React__default['default'].createElement(Typography__default['default'], { variant: "body1" },
            React__default['default'].createElement(AddCircleIcon__default['default'], { onClick: addEmpty }),
            " Add"),
        React__default['default'].createElement("hr", null)));
}

exports.default = Sortable;