@gechiui/components/build/focal-point-picker/grid.js

UI components for GeChiUI.

"use strict";

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

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

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

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

var _focalPointPickerStyle = require("./styles/focal-point-picker-style");

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

/**
 * GeChiUI dependencies
 */

/**
 * Internal dependencies
 */
const {
  clearTimeout,
  setTimeout
} = typeof window !== 'undefined' ? window : {};

function FocalPointPickerGrid(_ref) {
  let {
    bounds = {},
    value,
    ...props
  } = _ref;
  const animationProps = useRevealAnimation(value);
  const style = {
    width: bounds.width,
    height: bounds.height
  };
  return (0, _element.createElement)(_focalPointPickerStyle.GridView, (0, _extends2.default)({}, props, animationProps, {
    className: "components-focal-point-picker__grid",
    style: style
  }), (0, _element.createElement)(_focalPointPickerStyle.GridLineX, {
    style: {
      top: '33%'
    }
  }), (0, _element.createElement)(_focalPointPickerStyle.GridLineX, {
    style: {
      top: '66%'
    }
  }), (0, _element.createElement)(_focalPointPickerStyle.GridLineY, {
    style: {
      left: '33%'
    }
  }), (0, _element.createElement)(_focalPointPickerStyle.GridLineY, {
    style: {
      left: '66%'
    }
  }));
}
/**
 * Custom hook that renders the "flash" animation whenever the value changes.
 *
 * @param {string} value Value of (box) side.
 */


function useRevealAnimation(value) {
  const [isActive, setIsActive] = (0, _element.useState)(false);
  (0, _hooks.useUpdateEffect)(() => {
    setIsActive(true);
    const timeout = setTimeout(() => {
      setIsActive(false);
    }, 600);
    return () => clearTimeout(timeout);
  }, [value]);
  return {
    isActive
  };
}
//# sourceMappingURL=grid.js.map