@gechiui/components/build/color-picker/color-display.js

UI components for GeChiUI.

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.ColorDisplay = void 0;

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

var _compose = require("@gechiui/compose");

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

var _text = require("../text");

var _flex = require("../flex");

var _tooltip = require("../ui/tooltip");

var _space = require("../ui/utils/space");

/**
 * External dependencies
 */

/**
 * GeChiUI dependencies
 */

/**
 * Internal dependencies
 */
const ValueDisplay = _ref => {
  let {
    values
  } = _ref;
  return (0, _element.createElement)(_element.Fragment, null, values.map(_ref2 => {
    let [value, abbreviation] = _ref2;
    return (0, _element.createElement)(_flex.FlexItem, {
      key: abbreviation,
      isBlock: true,
      display: "flex"
    }, (0, _element.createElement)(_text.Text, {
      color: "blue"
    }, abbreviation), (0, _element.createElement)(_text.Text, null, value));
  }));
};

const HslDisplay = _ref3 => {
  let {
    color,
    enableAlpha
  } = _ref3;
  const {
    h,
    s,
    l,
    a
  } = color.toHsl();
  const values = [[Math.floor(h), 'H'], [Math.round(s * 100), 'S'], [Math.round(l * 100), 'L']];

  if (enableAlpha) {
    values.push([Math.round(a * 100), 'A']);
  }

  return (0, _element.createElement)(ValueDisplay, {
    values: values
  });
};

const RgbDisplay = _ref4 => {
  let {
    color,
    enableAlpha
  } = _ref4;
  const {
    r,
    g,
    b,
    a
  } = color.toRgb();
  const values = [[r, 'R'], [g, 'G'], [b, 'B']];

  if (enableAlpha) {
    values.push([Math.round(a * 100), 'A']);
  }

  return (0, _element.createElement)(ValueDisplay, {
    values: values
  });
};

const HexDisplay = _ref5 => {
  let {
    color
  } = _ref5;
  const colorWithoutHash = color.toHex().slice(1).toUpperCase();
  return (0, _element.createElement)(_flex.FlexItem, null, (0, _element.createElement)(_text.Text, {
    color: "blue"
  }, "#"), (0, _element.createElement)(_text.Text, null, colorWithoutHash));
};

const getComponent = colorType => {
  switch (colorType) {
    case 'hsl':
      return HslDisplay;

    case 'rgb':
      return RgbDisplay;

    default:
    case 'hex':
      return HexDisplay;
  }
};

const ColorDisplay = _ref6 => {
  let {
    color,
    colorType,
    enableAlpha
  } = _ref6;
  const [copiedColor, setCopiedColor] = (0, _element.useState)(null);
  const copyTimer = (0, _element.useRef)();
  const props = {
    color,
    enableAlpha
  };
  const Component = getComponent(colorType);
  const copyRef = (0, _compose.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);
  });
  (0, _element.useEffect)(() => {
    // clear copyTimer on component unmount.
    return () => {
      if (copyTimer.current) {
        clearTimeout(copyTimer.current);
      }
    };
  }, []);
  return (0, _element.createElement)(_tooltip.Tooltip, {
    content: (0, _element.createElement)(_text.Text, {
      color: "white"
    }, copiedColor === color.toHex() ? (0, _i18n.__)('已复制！') : (0, _i18n.__)('复制'))
  }, (0, _element.createElement)(_flex.Flex, {
    justify: "flex-start",
    gap: (0, _space.space)(1),
    ref: copyRef,
    style: {
      height: 30
    }
  }, (0, _element.createElement)(Component, props)));
};

exports.ColorDisplay = ColorDisplay;
//# sourceMappingURL=color-display.js.map