@wix/design-system/dist/esm/DragAndDrop/docs/Introduction/IntroductionExample.js

@wix/design-system

import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
import _createClass from "@babel/runtime/helpers/createClass";
import _possibleConstructorReturn from "@babel/runtime/helpers/possibleConstructorReturn";
import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";
import _inherits from "@babel/runtime/helpers/inherits";
var _jsxFileName = "/home/builduser/work/57e038ea7326c1ec/packages/wix-design-system/dist/esm/DragAndDrop/docs/Introduction/IntroductionExample.jsx";
function _callSuper(t, o, e) { return o = _getPrototypeOf(o), _possibleConstructorReturn(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], _getPrototypeOf(t).constructor) : o.apply(t, e)); }
function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }
import React from 'react';
import { st, classes } from './IntroductionExample.st.css';
import { SortableListBase } from '../../..';

/**
 * An example for a simple drag and drop list component.
 */
var IntroductionExample = /*#__PURE__*/function (_React$Component) {
  function IntroductionExample() {
    var _this;
    _classCallCheck(this, IntroductionExample);
    _this = _callSuper(this, IntroductionExample);
    _this.handleDrop = function (_ref) {
      var removedIndex = _ref.removedIndex,
        addedIndex = _ref.addedIndex;
      var nextItems = _toConsumableArray(_this.state.items);
      nextItems.splice.apply(nextItems, [addedIndex, 0].concat(_toConsumableArray(nextItems.splice(removedIndex, 1))));
      _this.setState({
        items: nextItems
      });
    };
    _this.renderItem = function (_ref2) {
      var isPlaceholder = _ref2.isPlaceholder,
        isPreview = _ref2.isPreview,
        id = _ref2.id,
        previewStyles = _ref2.previewStyles,
        item = _ref2.item;
      return /*#__PURE__*/React.createElement("div", {
        className: st(classes.root, {
          placeholder: isPlaceholder,
          preview: isPreview
        }),
        style: previewStyles,
        "data-hook": "item-".concat(id),
        __self: _this,
        __source: {
          fileName: _jsxFileName,
          lineNumber: 59,
          columnNumber: 7
        }
      }, item.text);
    };
    _this.state = {
      items: [{
        id: 'a',
        text: 'Item 1'
      }, {
        id: 'b',
        text: 'Item 2'
      }, {
        id: 'c',
        text: 'Item 3'
      }, {
        id: 'd',
        text: 'Item 4'
      }, {
        id: 'e',
        text: 'Item 5'
      }, {
        id: 'f',
        text: 'Item 6'
      }, {
        id: 'g',
        text: 'Item 7'
      }, {
        id: 'h',
        text: 'Item 8'
      }]
    };
    return _this;
  }
  _inherits(IntroductionExample, _React$Component);
  return _createClass(IntroductionExample, [{
    key: "render",
    value: function render() {
      return /*#__PURE__*/React.createElement(SortableListBase, {
        containerId: "single-area-1",
        dataHook: "list-single-area",
        items: this.state.items,
        renderItem: this.renderItem,
        onDrop: this.handleDrop,
        __self: this,
        __source: {
          fileName: _jsxFileName,
          lineNumber: 74,
          columnNumber: 7
        }
      });
    }
  }]);
}(React.Component);
export { IntroductionExample as default };