@guestbell/react-page-plugins/build/image/Controls/ImageDefaultControls.js

Plugins we use in GuestBell for working with amazing react-page package

function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : i + ""; }
function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
import * as React from 'react';
import ImageOrSrc from '../../common/components/imageOrSrc/ImageOrSrc';
import Select from '@mui/material/Select';
import MenuItem from '@mui/material/MenuItem';
import { ImageConstraintMode } from '../types/state';
import InputLabel from '@mui/material/InputLabel';
import FormControl from '@mui/material/FormControl';
import TextField from '@mui/material/TextField';
import FormControlLabel from '@mui/material/FormControlLabel';
import Switch from '@mui/material/Switch';
var allModes = Object.keys(ImageConstraintMode).filter(function (k) {
  return typeof ImageConstraintMode[k] === 'number';
}).map(function (item) {
  return ImageConstraintMode[item];
});
var modeNames = _defineProperty(_defineProperty(_defineProperty(_defineProperty({}, ImageConstraintMode.FullWidth, 'Full width'), ImageConstraintMode.SmallHeight, 'Small height'), ImageConstraintMode.MediumHeight, 'Medium height'), ImageConstraintMode.BigHeight, 'Big height');
var ImageDefaultControls = function ImageDefaultControls(props) {
  var onChange = props.onChange,
    readOnly = props.readOnly,
    focused = props.focused,
    _props$data = props.data,
    _props$data$constrain = _props$data.constraintMode,
    constraintMode = _props$data$constrain === void 0 ? ImageConstraintMode.FullWidth : _props$data$constrain,
    _props$data$href = _props$data.href,
    href = _props$data$href === void 0 ? '' : _props$data$href,
    _props$data$hasMargin = _props$data.hasMargin,
    hasMargin = _props$data$hasMargin === void 0 ? true : _props$data$hasMargin;
  var onConstraintModeChange = React.useCallback(function (e) {
    return onChange({
      constraintMode: Number(e.target.value)
    });
  }, [onChange]);
  var onHrefChange = React.useCallback(function (e) {
    return onChange({
      href: e.target.value
    });
  }, [onChange]);
  var handleChangeHasPadding = React.useCallback(function (e) {
    return onChange({
      hasMargin: e.target.checked
    });
  }, [onChange]);
  return /*#__PURE__*/React.createElement("div", {
    className: "imageControls ory-prevent-blur"
  }, !readOnly && focused && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(ImageOrSrc, {
    onChange: onChange,
    state: props.data,
    UploadImageField: props.UploadImageField
  }), /*#__PURE__*/React.createElement(FormControl, null, /*#__PURE__*/React.createElement(InputLabel, null, "Size mode"), /*#__PURE__*/React.createElement(Select, {
    className: "mb-1",
    value: constraintMode === null || constraintMode === void 0 ? void 0 : constraintMode.toString(),
    onChange: onConstraintModeChange
  }, allModes.map(function (item, key) {
    return /*#__PURE__*/React.createElement(MenuItem, {
      key: key,
      value: item
    }, modeNames[item]);
  })), /*#__PURE__*/React.createElement(TextField, {
    className: "mb-1",
    label: "Link url",
    onChange: onHrefChange,
    value: href
  }), /*#__PURE__*/React.createElement(FormControlLabel, {
    control: /*#__PURE__*/React.createElement(Switch, {
      onChange: handleChangeHasPadding,
      checked: hasMargin
    }),
    label: "Use margin"
  }))));
};
export default ImageDefaultControls;
//# sourceMappingURL=ImageDefaultControls.js.map