@wordpress/block-library/build/avatar/edit.js

Block library for the WordPress editor.

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = Edit;

var _element = require("@wordpress/element");

var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));

var _classnames = _interopRequireDefault(require("classnames"));

var _blockEditor = require("@wordpress/block-editor");

var _components = require("@wordpress/components");

var _i18n = require("@wordpress/i18n");

var _url = require("@wordpress/url");

var _hooks = require("./hooks");

var _userControl = _interopRequireDefault(require("./user-control"));

/**
 * External dependencies
 */

/**
 * WordPress dependencies
 */

/**
 * Internal dependencies
 */
const AvatarInspectorControls = _ref => {
  let {
    setAttributes,
    avatar,
    attributes,
    selectUser
  } = _ref;
  return (0, _element.createElement)(_blockEditor.InspectorControls, null, (0, _element.createElement)(_components.PanelBody, {
    title: (0, _i18n.__)('Settings')
  }, (0, _element.createElement)(_components.RangeControl, {
    label: (0, _i18n.__)('Image size'),
    onChange: newSize => setAttributes({
      size: newSize
    }),
    min: avatar.minSize,
    max: avatar.maxSize,
    initialPosition: attributes === null || attributes === void 0 ? void 0 : attributes.size,
    value: attributes === null || attributes === void 0 ? void 0 : attributes.size
  }), (0, _element.createElement)(_components.ToggleControl, {
    label: (0, _i18n.__)('Link to user profile'),
    onChange: () => setAttributes({
      isLink: !attributes.isLink
    }),
    checked: attributes.isLink
  }), attributes.isLink && (0, _element.createElement)(_components.ToggleControl, {
    label: (0, _i18n.__)('Open in new tab'),
    onChange: value => setAttributes({
      linkTarget: value ? '_blank' : '_self'
    }),
    checked: attributes.linkTarget === '_blank'
  }), selectUser && (0, _element.createElement)(_userControl.default, {
    value: attributes === null || attributes === void 0 ? void 0 : attributes.userId,
    onChange: value => {
      setAttributes({
        userId: value
      });
    }
  })));
};

const ResizableAvatar = _ref2 => {
  let {
    setAttributes,
    attributes,
    avatar,
    blockProps,
    isSelected
  } = _ref2;
  const borderProps = (0, _blockEditor.__experimentalUseBorderProps)(attributes);
  const doubledSizedSrc = (0, _url.addQueryArgs)((0, _url.removeQueryArgs)(avatar === null || avatar === void 0 ? void 0 : avatar.src, ['s']), {
    s: (attributes === null || attributes === void 0 ? void 0 : attributes.size) * 2
  });
  return (0, _element.createElement)("div", blockProps, (0, _element.createElement)(_components.ResizableBox, {
    size: {
      width: attributes.size,
      height: attributes.size
    },
    showHandle: isSelected,
    onResizeStop: (event, direction, elt, delta) => {
      setAttributes({
        size: parseInt(attributes.size + (delta.height || delta.width), 10)
      });
    },
    lockAspectRatio: true,
    enable: {
      top: false,
      right: !(0, _i18n.isRTL)(),
      bottom: true,
      left: (0, _i18n.isRTL)()
    },
    minWidth: avatar.minSize,
    maxWidth: avatar.maxSize
  }, (0, _element.createElement)("img", (0, _extends2.default)({
    src: doubledSizedSrc,
    alt: avatar.alt
  }, borderProps, {
    className: (0, _classnames.default)('avatar', 'avatar-' + attributes.size, 'photo', 'wp-block-avatar__image', borderProps.className),
    style: { ...borderProps.style // Border radius, width and style.

    }
  }))));
};

const CommentEdit = _ref3 => {
  let {
    attributes,
    context,
    setAttributes,
    isSelected
  } = _ref3;
  const {
    commentId
  } = context;
  const blockProps = (0, _blockEditor.useBlockProps)();
  const avatar = (0, _hooks.useCommentAvatar)({
    commentId
  });
  return (0, _element.createElement)(_element.Fragment, null, (0, _element.createElement)(AvatarInspectorControls, {
    avatar: avatar,
    setAttributes: setAttributes,
    attributes: attributes,
    selectUser: false
  }), attributes.isLink ? (0, _element.createElement)("a", {
    href: "#avatar-pseudo-link",
    className: "wp-block-avatar__link",
    onClick: event => event.preventDefault()
  }, (0, _element.createElement)(ResizableAvatar, {
    attributes: attributes,
    avatar: avatar,
    blockProps: blockProps,
    isSelected: isSelected,
    setAttributes: setAttributes
  })) : (0, _element.createElement)(ResizableAvatar, {
    attributes: attributes,
    avatar: avatar,
    blockProps: blockProps,
    isSelected: isSelected,
    setAttributes: setAttributes
  }));
};

const UserEdit = _ref4 => {
  let {
    attributes,
    context,
    setAttributes,
    isSelected
  } = _ref4;
  const {
    postId,
    postType
  } = context;
  const avatar = (0, _hooks.useUserAvatar)({
    userId: attributes === null || attributes === void 0 ? void 0 : attributes.userId,
    postId,
    postType
  });
  const blockProps = (0, _blockEditor.useBlockProps)();
  return (0, _element.createElement)(_element.Fragment, null, (0, _element.createElement)(AvatarInspectorControls, {
    selectUser: true,
    attributes: attributes,
    avatar: avatar,
    setAttributes: setAttributes
  }), (0, _element.createElement)("div", null, attributes.isLink ? (0, _element.createElement)("a", {
    href: "#avatar-pseudo-link",
    className: "wp-block-avatar__link",
    onClick: event => event.preventDefault()
  }, (0, _element.createElement)(ResizableAvatar, {
    attributes: attributes,
    avatar: avatar,
    blockProps: blockProps,
    isSelected: isSelected,
    setAttributes: setAttributes
  })) : (0, _element.createElement)(ResizableAvatar, {
    attributes: attributes,
    avatar: avatar,
    blockProps: blockProps,
    isSelected: isSelected,
    setAttributes: setAttributes
  })));
};

function Edit(props) {
  var _props$context, _props$context2;

  // Don't show the Comment Edit controls if we have a comment ID set, or if we're in the Site Editor (where it is `null`).
  if (props !== null && props !== void 0 && (_props$context = props.context) !== null && _props$context !== void 0 && _props$context.commentId || (props === null || props === void 0 ? void 0 : (_props$context2 = props.context) === null || _props$context2 === void 0 ? void 0 : _props$context2.commentId) === null) {
    return (0, _element.createElement)(CommentEdit, props);
  }

  return (0, _element.createElement)(UserEdit, props);
}
//# sourceMappingURL=edit.js.map