@arudovwen/react-form-builder

Version:
A complete form builder for react.
54 lines (51 loc) • 2.02 kB
JavaScript
"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.BoxDragPreview = void 0;
var _react = _interopRequireWildcard(require("react"));
function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
const boxStyles = {
  border: '1px dashed gray',
  padding: '0.5rem 1rem',
  cursor: 'move'
};
const styles = {
  display: 'inline-block',
  transform: 'rotate(-7deg)',
  WebkitTransform: 'rotate(-7deg)'
};
const Box = ({
  title,
  color
}) => {
  const backgroundColor = color ? '#059862' : 'white';
  return /*#__PURE__*/_react.default.createElement("div", {
    style: {
      ...boxStyles,
      backgroundColor
    }
  }, title);
};
const BoxDragPreview = ({
  item
}) => {
  const [tickTock, setTickTock] = (0, _react.useState)(false);
  const text = item.data.content ? item.data.content : item.data.label ? item.data.label : item.data.text;
  const isLongText = text.length > 20;
  const previewText = isLongText ? `${text.slice(0, 20)}...` : text;

  // useEffect(function subscribeToIntervalTick() {
  //     const interval = setInterval(() => {
  //         setTickTock(!tickTock);
  //     }, 500);
  //     return () => clearInterval(interval);
  // }, [tickTock]);

  return /*#__PURE__*/_react.default.createElement("div", {
    style: styles,
    role: "BoxPreview"
  }, /*#__PURE__*/_react.default.createElement(Box, {
    title: previewText,
    color: tickTock
  }));
};
exports.BoxDragPreview = BoxDragPreview;