@wordpress/components/build-module/color-picker/color-copy-button.js

UI components for WordPress.

import { createElement } from "@wordpress/element";

/**
 * WordPress dependencies
 */
import { useCopyToClipboard } from '@wordpress/compose';
import { useState, useEffect, useRef } from '@wordpress/element';
import { copy } from '@wordpress/icons';
import { __ } from '@wordpress/i18n';
/**
 * Internal dependencies
 */

import { CopyButton } from './styles';
import { Text } from '../text';
import { Tooltip } from '../ui/tooltip';
export const ColorCopyButton = props => {
  const {
    color,
    colorType
  } = props;
  const [copiedColor, setCopiedColor] = useState(null);
  const copyTimer = useRef();
  const copyRef = useCopyToClipboard(() => {
    switch (colorType) {
      case 'hsl':
        {
          return color.toHslString();
        }

      case 'rgb':
        {
          return color.toRgbString();
        }

      default:
      case 'hex':
        {
          return color.toHex();
        }
    }
  }, () => {
    if (copyTimer.current) {
      clearTimeout(copyTimer.current);
    }

    setCopiedColor(color.toHex());
    copyTimer.current = setTimeout(() => {
      setCopiedColor(null);
      copyTimer.current = undefined;
    }, 3000);
  });
  useEffect(() => {
    // Clear copyTimer on component unmount.
    return () => {
      if (copyTimer.current) {
        clearTimeout(copyTimer.current);
      }
    };
  }, []);
  return createElement(Tooltip, {
    content: createElement(Text, {
      color: "white"
    }, copiedColor === color.toHex() ? __('Copied!') : __('Copy')),
    placement: "bottom"
  }, createElement(CopyButton, {
    isSmall: true,
    ref: copyRef,
    icon: copy,
    showTooltip: false
  }));
};
//# sourceMappingURL=color-copy-button.js.map