@wix/design-system/dist/esm/DragAndDrop/docs/SortableGridBase/SingleAreaGrid/SingleAreaGrid.js

@wix/design-system

import _defineProperty from "@babel/runtime/helpers/defineProperty";
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/SortableGridBase/SingleAreaGrid/SingleAreaGrid.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 classNames from 'classnames';
import { dndStyles as defaultDndStyles, SortableGridBase } from '../../../..';
import { classes } from './SingleAreaGrid.st.css';
var generateId = function generateId() {
  return Math.floor(Math.random() * 100000);
};
var SingleAreaGrid = /*#__PURE__*/function (_React$Component) {
  function SingleAreaGrid() {
    var _this;
    _classCallCheck(this, SingleAreaGrid);
    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
      args[_key] = arguments[_key];
    }
    _this = _callSuper(this, SingleAreaGrid, [].concat(args));
    _this.state = {
      items: [{
        id: generateId(),
        text: 'Item 1'
      }, {
        id: generateId(),
        text: 'Item 2'
      }, {
        id: generateId(),
        text: 'Item 3'
      }, {
        id: generateId(),
        text: 'Item 4'
      }, {
        id: generateId(),
        text: 'Item 5'
      }, {
        id: generateId(),
        text: 'Item 6'
      }, {
        id: generateId(),
        text: 'Item 7'
      }, {
        id: generateId(),
        text: 'Item 8'
      }, {
        id: generateId(),
        text: 'Item 9'
      }]
    };
    _this.handleDrop = function () {};
    _this.renderItem = function (_ref) {
      var isPlaceholder = _ref.isPlaceholder,
        isPreview = _ref.isPreview,
        id = _ref.id,
        connectHandle = _ref.connectHandle,
        item = _ref.item,
        withStrip = _ref.withStrip,
        isInitialPositionToDrop = _ref.isInitialPositionToDrop;
      var stripPositionClass = classNames(_defineProperty(_defineProperty({}, defaultDndStyles.withGridItemStrip, withStrip), defaultDndStyles.withGridItemStripRight, withStrip === 'right'));
      var _classes = classNames(classNames(defaultDndStyles.item, classes.item, stripPositionClass), _defineProperty(_defineProperty(_defineProperty({}, classNames(defaultDndStyles.gridItemPreview), isPreview), classNames(defaultDndStyles.gridItemPlaceholder), isPlaceholder), classNames(defaultDndStyles.isInitialPositionToDrop), isInitialPositionToDrop));
      return /*#__PURE__*/React.createElement("div", {
        className: _classes,
        "data-hook": "item-".concat(id),
        __self: _this,
        __source: {
          fileName: _jsxFileName,
          lineNumber: 64,
          columnNumber: 7
        }
      }, item.text, _this.props.withHandle ? _this.renderHandle({
        connectHandle: connectHandle,
        id: id,
        isPlaceholder: isPlaceholder
      }) : null);
    };
    return _this;
  }
  _inherits(SingleAreaGrid, _React$Component);
  return _createClass(SingleAreaGrid, [{
    key: "renderHandle",
    value: function renderHandle(_ref2) {
      var connectHandle = _ref2.connectHandle,
        id = _ref2.id,
        isPlaceholder = _ref2.isPlaceholder;
      return connectHandle(/*#__PURE__*/React.createElement("div", {
        className: classes.handle,
        style: {
          opacity: isPlaceholder ? 0 : 1
        },
        "data-hook": "card-".concat(id, "-handle"),
        __self: this,
        __source: {
          fileName: _jsxFileName,
          lineNumber: 29,
          columnNumber: 7
        }
      }, "Drag Handle"));
    }
  }, {
    key: "render",
    value: function render() {
      return /*#__PURE__*/React.createElement("div", {
        className: classes.root,
        __self: this,
        __source: {
          fileName: _jsxFileName,
          lineNumber: 79,
          columnNumber: 7
        }
      }, /*#__PURE__*/React.createElement("h3", {
        className: classes.title,
        __self: this,
        __source: {
          fileName: _jsxFileName,
          lineNumber: 80,
          columnNumber: 9
        }
      }, "Draggable Area"), /*#__PURE__*/React.createElement(SortableGridBase, {
        withHandle: this.props.withHandle,
        className: classes.sortableGridBase,
        containerId: "single-area-1",
        dataHook: "grid-single-area",
        items: this.state.items,
        renderItem: this.renderItem,
        onDrop: this.handleDrop,
        startFixedElement: this.props.startFixedElement,
        __self: this,
        __source: {
          fileName: _jsxFileName,
          lineNumber: 81,
          columnNumber: 9
        }
      }));
    }
  }]);
}(React.Component);
export { SingleAreaGrid as default };