@wordpress/components/build-module/focal-point-picker/grid.js

UI components for WordPress.

import _extends from "@babel/runtime/helpers/esm/extends";
import { createElement } from "@wordpress/element";

/**
 * WordPress dependencies
 */
import { useState } from '@wordpress/element';
/**
 * Internal dependencies
 */

import { GridView, GridLineX, GridLineY } from './styles/focal-point-picker-style';
import { useUpdateEffect } from '../utils/hooks';
const {
  clearTimeout,
  setTimeout
} = typeof window !== 'undefined' ? window : {};
export default function FocalPointPickerGrid({
  bounds = {},
  value,
  ...props
}) {
  const animationProps = useRevealAnimation(value);
  const style = {
    width: bounds.width,
    height: bounds.height
  };
  return createElement(GridView, _extends({}, props, animationProps, {
    className: "components-focal-point-picker__grid",
    style: style
  }), createElement(GridLineX, {
    style: {
      top: '33%'
    }
  }), createElement(GridLineX, {
    style: {
      top: '66%'
    }
  }), createElement(GridLineY, {
    style: {
      left: '33%'
    }
  }), createElement(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] = useState(false);
  useUpdateEffect(() => {
    setIsActive(true);
    const timeout = setTimeout(() => {
      setIsActive(false);
    }, 600);
    return () => clearTimeout(timeout);
  }, [value]);
  return {
    isActive
  };
}
//# sourceMappingURL=grid.js.map