@wordpress/components/build/box-control/icon.js

UI components for WordPress.

"use strict";

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

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

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

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

var _boxControlIconStyles = require("./styles/box-control-icon-styles");

/**
 * Internal dependencies
 */
const BASE_ICON_SIZE = 24;

function BoxControlIcon(_ref) {
  let {
    size = 24,
    side = 'all',
    sides,
    ...props
  } = _ref;

  const isSideDisabled = value => (sides === null || sides === void 0 ? void 0 : sides.length) && !sides.includes(value);

  const hasSide = value => {
    if (isSideDisabled(value)) {
      return false;
    }

    return side === 'all' || side === value;
  };

  const top = hasSide('top') || hasSide('vertical');
  const right = hasSide('right') || hasSide('horizontal');
  const bottom = hasSide('bottom') || hasSide('vertical');
  const left = hasSide('left') || hasSide('horizontal'); // Simulates SVG Icon scaling.

  const scale = size / BASE_ICON_SIZE;
  return (0, _element.createElement)(_boxControlIconStyles.Root, (0, _extends2.default)({
    style: {
      transform: `scale(${scale})`
    }
  }, props), (0, _element.createElement)(_boxControlIconStyles.Viewbox, null, (0, _element.createElement)(_boxControlIconStyles.TopStroke, {
    isFocused: top
  }), (0, _element.createElement)(_boxControlIconStyles.RightStroke, {
    isFocused: right
  }), (0, _element.createElement)(_boxControlIconStyles.BottomStroke, {
    isFocused: bottom
  }), (0, _element.createElement)(_boxControlIconStyles.LeftStroke, {
    isFocused: left
  })));
}
//# sourceMappingURL=icon.js.map