@uiw/react-color
Version:
Color Picker component for React.
1,575 lines (1,485 loc) • 105 kB
JavaScript
(function webpackUniversalModuleDefinition(root, factory) {
if(typeof exports === 'object' && typeof module === 'object')
module.exports = factory(require("react"));
else if(typeof define === 'function' && define.amd)
define(["react"], factory);
else if(typeof exports === 'object')
exports["@uiw/react-color"] = factory(require("react"));
else
root["@uiw/react-color"] = factory(root["React"]);
})(self, (__WEBPACK_EXTERNAL_MODULE__442__) => {
return /******/ (() => { // webpackBootstrap
/******/ "use strict";
/******/ var __webpack_modules__ = ({
/***/ 85:
/***/ ((module, __unused_webpack_exports, __webpack_require__) => {
if (true) {
module.exports = __webpack_require__(335);
} else {}
/***/ }),
/***/ 335:
/***/ ((__unused_webpack_module, exports, __webpack_require__) => {
var __webpack_unused_export__;
/**
* @license React
* react-jsx-runtime.production.min.js
*
* Copyright (c) Facebook, Inc. and its affiliates.
*
* This source code is licensed under the MIT license found in the
* LICENSE file in the root directory of this source tree.
*/
var f=__webpack_require__(442),k=Symbol.for("react.element"),l=Symbol.for("react.fragment"),m=Object.prototype.hasOwnProperty,n=f.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED.ReactCurrentOwner,p={key:!0,ref:!0,__self:!0,__source:!0};
function q(c,a,g){var b,d={},e=null,h=null;void 0!==g&&(e=""+g);void 0!==a.key&&(e=""+a.key);void 0!==a.ref&&(h=a.ref);for(b in a)m.call(a,b)&&!p.hasOwnProperty(b)&&(d[b]=a[b]);if(c&&c.defaultProps)for(b in a=c.defaultProps,a)void 0===d[b]&&(d[b]=a[b]);return{$$typeof:k,type:c,key:e,ref:h,props:d,_owner:n.current}}__webpack_unused_export__=l;exports.jsx=q;exports.jsxs=q;
/***/ }),
/***/ 442:
/***/ ((module) => {
module.exports = __WEBPACK_EXTERNAL_MODULE__442__;
/***/ })
/******/ });
/************************************************************************/
/******/ // The module cache
/******/ var __webpack_module_cache__ = {};
/******/
/******/ // The require function
/******/ function __webpack_require__(moduleId) {
/******/ // Check if module is in cache
/******/ var cachedModule = __webpack_module_cache__[moduleId];
/******/ if (cachedModule !== undefined) {
/******/ return cachedModule.exports;
/******/ }
/******/ // Create a new module (and put it into the cache)
/******/ var module = __webpack_module_cache__[moduleId] = {
/******/ // no module.id needed
/******/ // no module.loaded needed
/******/ exports: {}
/******/ };
/******/
/******/ // Execute the module function
/******/ __webpack_modules__[moduleId](module, module.exports, __webpack_require__);
/******/
/******/ // Return the exports of the module
/******/ return module.exports;
/******/ }
/******/
/************************************************************************/
/******/ /* webpack/runtime/compat get default export */
/******/ (() => {
/******/ // getDefaultExport function for compatibility with non-harmony modules
/******/ __webpack_require__.n = (module) => {
/******/ var getter = module && module.__esModule ?
/******/ () => (module['default']) :
/******/ () => (module);
/******/ __webpack_require__.d(getter, { a: getter });
/******/ return getter;
/******/ };
/******/ })();
/******/
/******/ /* webpack/runtime/define property getters */
/******/ (() => {
/******/ // define getter functions for harmony exports
/******/ __webpack_require__.d = (exports, definition) => {
/******/ for(var key in definition) {
/******/ if(__webpack_require__.o(definition, key) && !__webpack_require__.o(exports, key)) {
/******/ Object.defineProperty(exports, key, { enumerable: true, get: definition[key] });
/******/ }
/******/ }
/******/ };
/******/ })();
/******/
/******/ /* webpack/runtime/hasOwnProperty shorthand */
/******/ (() => {
/******/ __webpack_require__.o = (obj, prop) => (Object.prototype.hasOwnProperty.call(obj, prop))
/******/ })();
/******/
/******/ /* webpack/runtime/make namespace object */
/******/ (() => {
/******/ // define __esModule on exports
/******/ __webpack_require__.r = (exports) => {
/******/ if(typeof Symbol !== 'undefined' && Symbol.toStringTag) {
/******/ Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
/******/ }
/******/ Object.defineProperty(exports, '__esModule', { value: true });
/******/ };
/******/ })();
/******/
/************************************************************************/
var __webpack_exports__ = {};
// ESM COMPAT FLAG
__webpack_require__.r(__webpack_exports__);
// EXPORTS
__webpack_require__.d(__webpack_exports__, {
Alpha: () => (/* reexport */ color_alpha_esm),
BACKGROUND_IMG: () => (/* reexport */ BACKGROUND_IMG),
Block: () => (/* reexport */ color_block_esm),
Chrome: () => (/* reexport */ color_chrome_esm),
Circle: () => (/* reexport */ color_circle_esm),
Colorful: () => (/* reexport */ color_colorful_esm),
Compact: () => (/* reexport */ color_compact_esm),
EditableInput: () => (/* reexport */ color_editable_input_esm),
EditableInputHSLA: () => (/* reexport */ color_editable_input_hsla_esm),
EditableInputRGBA: () => (/* reexport */ color_editable_input_rgba_esm),
Github: () => (/* reexport */ color_github_esm),
Hue: () => (/* reexport */ color_hue_esm),
Material: () => (/* reexport */ color_material_esm),
Pointer: () => (/* reexport */ Pointer),
Saturation: () => (/* reexport */ color_saturation_esm),
ShadeSlider: () => (/* reexport */ color_shade_slider_esm),
Sketch: () => (/* reexport */ color_sketch_esm),
Slider: () => (/* reexport */ color_slider_esm),
Swatch: () => (/* reexport */ color_swatch_esm),
Wheel: () => (/* reexport */ color_wheel_esm),
baseNamed: () => (/* reexport */ baseNamed),
color: () => (/* reexport */ esm_color),
colorKeywords: () => (/* reexport */ colorKeywords),
colorKeywordsBase: () => (/* reexport */ colorKeywordsBase),
colorNameToHex: () => (/* reexport */ colorNameToHex),
equalColorObjects: () => (/* reexport */ equalColorObjects),
equalColorString: () => (/* reexport */ equalColorString),
equalHex: () => (/* reexport */ equalHex),
getContrastingColor: () => (/* reexport */ getContrastingColor),
hexToHsva: () => (/* reexport */ hexToHsva),
hexToRgba: () => (/* reexport */ hexToRgba),
hexToXY: () => (/* reexport */ hexToXY),
hslStringToHsla: () => (/* reexport */ hslStringToHsla),
hslStringToHsva: () => (/* reexport */ hslStringToHsva),
hslaStringToHsva: () => (/* reexport */ hslaStringToHsva),
hslaToHsl: () => (/* reexport */ hslaToHsl),
hslaToHsva: () => (/* reexport */ hslaToHsva),
hsvStringToHsva: () => (/* reexport */ hsvStringToHsva),
hsvaStringToHsva: () => (/* reexport */ hsvaStringToHsva),
hsvaToHex: () => (/* reexport */ hsvaToHex),
hsvaToHexa: () => (/* reexport */ hsvaToHexa),
hsvaToHslString: () => (/* reexport */ hsvaToHslString),
hsvaToHsla: () => (/* reexport */ hsvaToHsla),
hsvaToHslaString: () => (/* reexport */ hsvaToHslaString),
hsvaToHsv: () => (/* reexport */ hsvaToHsv),
hsvaToHsvString: () => (/* reexport */ hsvaToHsvString),
hsvaToHsvaString: () => (/* reexport */ hsvaToHsvaString),
hsvaToRgbString: () => (/* reexport */ hsvaToRgbString),
hsvaToRgba: () => (/* reexport */ hsvaToRgba),
hsvaToRgbaString: () => (/* reexport */ hsvaToRgbaString),
parseHue: () => (/* reexport */ parseHue),
rgbStringToHsva: () => (/* reexport */ rgbStringToHsva),
rgbToXY: () => (/* reexport */ rgbToXY),
rgbaStringToHsva: () => (/* reexport */ rgbaStringToHsva),
rgbaToHex: () => (/* reexport */ rgbaToHex),
rgbaToHexa: () => (/* reexport */ rgbaToHexa),
rgbaToHsva: () => (/* reexport */ rgbaToHsva),
rgbaToRgb: () => (/* reexport */ rgbaToRgb),
validHex: () => (/* reexport */ validHex),
xyToHex: () => (/* reexport */ xyToHex),
xyToRgb: () => (/* reexport */ xyToRgb)
});
;// ../../node_modules/@babel/runtime/helpers/esm/extends.js
function _extends() {
return _extends = Object.assign ? Object.assign.bind() : function (n) {
for (var e = 1; e < arguments.length; e++) {
var t = arguments[e];
for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]);
}
return n;
}, _extends.apply(null, arguments);
}
;// ../color-convert/esm/index.js
var RGB_MAX = 255;
var HUE_MAX = 360;
var SV_MAX = 100;
/**
* ```js
* rgbaToHsva({ r: 255, g: 255, b: 255, a: 1 }) //=> { h: 0, s: 0, v: 100, a: 1 }
* ```
*/
var rgbaToHsva = _ref => {
var {
r,
g,
b,
a
} = _ref;
var max = Math.max(r, g, b);
var delta = max - Math.min(r, g, b);
// prettier-ignore
var hh = delta ? max === r ? (g - b) / delta : max === g ? 2 + (b - r) / delta : 4 + (r - g) / delta : 0;
return {
h: 60 * (hh < 0 ? hh + 6 : hh),
s: max ? delta / max * SV_MAX : 0,
v: max / RGB_MAX * SV_MAX,
a
};
};
var hsvaToHslString = hsva => {
var {
h,
s,
l
} = hsvaToHsla(hsva);
// return `hsl(${h}, ${s}%, ${l}%)`;
return "hsl(" + h + ", " + Math.round(s) + "%, " + Math.round(l) + "%)";
};
var hsvaToHsvString = _ref2 => {
var {
h,
s,
v
} = _ref2;
return "hsv(" + h + ", " + s + "%, " + v + "%)";
};
var hsvaToHsvaString = _ref3 => {
var {
h,
s,
v,
a
} = _ref3;
return "hsva(" + h + ", " + s + "%, " + v + "%, " + a + ")";
};
var hsvaToHslaString = hsva => {
var {
h,
s,
l,
a
} = hsvaToHsla(hsva);
return "hsla(" + h + ", " + s + "%, " + l + "%, " + a + ")";
};
var hslStringToHsla = str => {
var [h, s, l, a] = (str.match(/\d+/g) || []).map(Number);
return {
h,
s,
l,
a
};
};
var hslaStringToHsva = hslString => {
var matcher = /hsla?\(?\s*(-?\d*\.?\d+)(deg|rad|grad|turn)?[,\s]+(-?\d*\.?\d+)%?[,\s]+(-?\d*\.?\d+)%?,?\s*[/\s]*(-?\d*\.?\d+)?(%)?\s*\)?/i;
var match = matcher.exec(hslString);
if (!match) return {
h: 0,
s: 0,
v: 0,
a: 1
};
return hslaToHsva({
h: parseHue(match[1], match[2]),
s: Number(match[3]),
l: Number(match[4]),
a: match[5] === undefined ? 1 : Number(match[5]) / (match[6] ? 100 : 1)
});
};
var hslStringToHsva = hslaStringToHsva;
var hslaToHsva = _ref4 => {
var {
h,
s,
l,
a
} = _ref4;
s *= (l < 50 ? l : SV_MAX - l) / SV_MAX;
return {
h: h,
s: s > 0 ? 2 * s / (l + s) * SV_MAX : 0,
v: l + s,
a
};
};
var hsvaToHsla = _ref5 => {
var {
h,
s,
v,
a
} = _ref5;
var hh = (200 - s) * v / SV_MAX;
return {
h,
s: hh > 0 && hh < 200 ? s * v / SV_MAX / (hh <= SV_MAX ? hh : 200 - hh) * SV_MAX : 0,
l: hh / 2,
a
};
};
var hsvaStringToHsva = hsvString => {
var matcher = /hsva?\(?\s*(-?\d*\.?\d+)(deg|rad|grad|turn)?[,\s]+(-?\d*\.?\d+)%?[,\s]+(-?\d*\.?\d+)%?,?\s*[/\s]*(-?\d*\.?\d+)?(%)?\s*\)?/i;
var match = matcher.exec(hsvString);
if (!match) return {
h: 0,
s: 0,
v: 0,
a: 1
};
return {
h: parseHue(match[1], match[2]),
s: Number(match[3]),
v: Number(match[4]),
a: match[5] === undefined ? 1 : Number(match[5]) / (match[6] ? SV_MAX : 1)
};
};
/**
* Valid CSS <angle> units.
* https://developer.mozilla.org/en-US/docs/Web/CSS/angle
*/
var angleUnits = {
grad: HUE_MAX / 400,
turn: HUE_MAX,
rad: HUE_MAX / (Math.PI * 2)
};
var parseHue = function parseHue(value, unit) {
if (unit === void 0) {
unit = 'deg';
}
return Number(value) * (angleUnits[unit] || 1);
};
var hsvStringToHsva = hsvaStringToHsva;
var rgbaStringToHsva = rgbaString => {
var matcher = /rgba?\(?\s*(-?\d*\.?\d+)(%)?[,\s]+(-?\d*\.?\d+)(%)?[,\s]+(-?\d*\.?\d+)(%)?,?\s*[/\s]*(-?\d*\.?\d+)?(%)?\s*\)?/i;
var match = matcher.exec(rgbaString);
if (!match) return {
h: 0,
s: 0,
v: 0,
a: 1
};
return rgbaToHsva({
r: Number(match[1]) / (match[2] ? SV_MAX / RGB_MAX : 1),
g: Number(match[3]) / (match[4] ? SV_MAX / RGB_MAX : 1),
b: Number(match[5]) / (match[6] ? SV_MAX / RGB_MAX : 1),
a: match[7] === undefined ? 1 : Number(match[7]) / (match[8] ? SV_MAX : 1)
});
};
var rgbStringToHsva = rgbaStringToHsva;
/** Converts an RGBA color plus alpha transparency to hex */
var rgbaToHex = _ref6 => {
var {
r,
g,
b
} = _ref6;
var bin = r << 16 | g << 8 | b;
return "#" + (h => new Array(7 - h.length).join('0') + h)(bin.toString(16));
};
var rgbaToHexa = _ref7 => {
var {
r,
g,
b,
a
} = _ref7;
var alpha = typeof a === 'number' && (a * 255 | 1 << 8).toString(16).slice(1);
return "" + rgbaToHex({
r,
g,
b,
a
}) + (alpha ? alpha : '');
};
var hexToHsva = hex => rgbaToHsva(hexToRgba(hex));
var hexToRgba = hex => {
var htemp = hex.replace('#', '');
if (/^#?/.test(hex) && htemp.length === 3) {
hex = "#" + htemp.charAt(0) + htemp.charAt(0) + htemp.charAt(1) + htemp.charAt(1) + htemp.charAt(2) + htemp.charAt(2);
}
var reg = new RegExp("[A-Za-z0-9]{2}", 'g');
var [r, g, b = 0, a] = hex.match(reg).map(v => parseInt(v, 16));
return {
r,
g,
b,
a: (a != null ? a : 255) / RGB_MAX
};
};
/**
* Converts HSVA to RGBA. Based on formula from https://en.wikipedia.org/wiki/HSL_and_HSV
* @param color HSVA color as an array [0-360, 0-1, 0-1, 0-1]
*/
var hsvaToRgba = _ref8 => {
var {
h,
s,
v,
a
} = _ref8;
var _h = h / 60,
_s = s / SV_MAX,
_v = v / SV_MAX,
hi = Math.floor(_h) % 6;
var f = _h - Math.floor(_h),
_p = RGB_MAX * _v * (1 - _s),
_q = RGB_MAX * _v * (1 - _s * f),
_t = RGB_MAX * _v * (1 - _s * (1 - f));
_v *= RGB_MAX;
var rgba = {};
switch (hi) {
case 0:
rgba.r = _v;
rgba.g = _t;
rgba.b = _p;
break;
case 1:
rgba.r = _q;
rgba.g = _v;
rgba.b = _p;
break;
case 2:
rgba.r = _p;
rgba.g = _v;
rgba.b = _t;
break;
case 3:
rgba.r = _p;
rgba.g = _q;
rgba.b = _v;
break;
case 4:
rgba.r = _t;
rgba.g = _p;
rgba.b = _v;
break;
case 5:
rgba.r = _v;
rgba.g = _p;
rgba.b = _q;
break;
}
rgba.r = Math.round(rgba.r);
rgba.g = Math.round(rgba.g);
rgba.b = Math.round(rgba.b);
return _extends({}, rgba, {
a
});
};
var hsvaToRgbString = hsva => {
var {
r,
g,
b
} = hsvaToRgba(hsva);
return "rgb(" + r + ", " + g + ", " + b + ")";
};
var hsvaToRgbaString = hsva => {
var {
r,
g,
b,
a
} = hsvaToRgba(hsva);
return "rgba(" + r + ", " + g + ", " + b + ", " + a + ")";
};
var rgbaToRgb = _ref9 => {
var {
r,
g,
b
} = _ref9;
return {
r,
g,
b
};
};
var hslaToHsl = _ref10 => {
var {
h,
s,
l
} = _ref10;
return {
h,
s,
l
};
};
var hsvaToHex = hsva => rgbaToHex(hsvaToRgba(hsva));
var hsvaToHexa = hsva => rgbaToHexa(hsvaToRgba(hsva));
var hsvaToHsv = _ref11 => {
var {
h,
s,
v
} = _ref11;
return {
h,
s,
v
};
};
var hexToXY = hex => rgbToXY(rgbaToRgb(hexToRgba(hex)));
var xyToHex = xy => rgbaToHex(_extends({}, xyToRgb(xy), {
a: 255
}));
/**
* Converts XY to RGB. Based on formula from https://developers.meethue.com/develop/application-design-guidance/color-conversion-formulas-rgb-to-xy-and-back/
* @param color XY color and brightness as an array [0-1, 0-1, 0-1]
*/
var xyToRgb = _ref12 => {
var {
x,
y,
bri = 255
} = _ref12;
var red = x * 3.2406255 + y * -1.537208 + bri * -0.4986286;
var green = x * -0.9689307 + y * 1.8757561 + bri * 0.0415175;
var blue = x * 0.0557101 + y * -0.2040211 + bri * 1.0569959;
var translate = function translate(color) {
return color <= 0.0031308 ? 12.92 * color : 1.055 * Math.pow(color, 1 / 2.4) - 0.055;
};
return {
r: Math.round(255 * translate(red)),
g: Math.round(255 * translate(green)),
b: Math.round(255 * translate(blue))
};
};
/**
* Converts RGB to XY. Based on formula from https://developers.meethue.com/develop/application-design-guidance/color-conversion-formulas-rgb-to-xy-and-back/
* @param color RGB color as an array [0-255, 0-255, 0-255]
*/
var rgbToXY = _ref13 => {
var {
r,
g,
b
} = _ref13;
var translateColor = function translateColor(color) {
return color <= 0.04045 ? color / 12.92 : Math.pow((color + 0.055) / 1.055, 2.4);
};
var red = translateColor(r / 255);
var green = translateColor(g / 255);
var blue = translateColor(b / 255);
var xyz = {};
xyz.x = red * 0.4124 + green * 0.3576 + blue * 0.1805;
xyz.y = red * 0.2126 + green * 0.7152 + blue * 0.0722;
xyz.bri = red * 0.0193 + green * 0.1192 + blue * 0.9505;
return xyz;
};
var esm_color = str => {
var rgb;
var hsl;
var hsv;
var rgba;
var hsla;
var hsva;
var xy;
var hex;
var hexa;
if (typeof str === 'string' && validHex(str)) {
hsva = hexToHsva(str);
hex = str;
} else if (typeof str !== 'string') {
hsva = str;
}
if (hsva) {
hsv = hsvaToHsv(hsva);
hsla = hsvaToHsla(hsva);
rgba = hsvaToRgba(hsva);
hexa = rgbaToHexa(rgba);
hex = hsvaToHex(hsva);
hsl = hslaToHsl(hsla);
rgb = rgbaToRgb(rgba);
xy = rgbToXY(rgb);
}
return {
rgb,
hsl,
hsv,
rgba,
hsla,
hsva,
hex,
hexa,
xy
};
};
var getContrastingColor = str => {
if (!str) {
return '#ffffff';
}
var col = esm_color(str);
var yiq = (col.rgb.r * 299 + col.rgb.g * 587 + col.rgb.b * 114) / 1000;
return yiq >= 128 ? '#000000' : '#ffffff';
};
var equalColorObjects = (first, second) => {
if (first === second) return true;
for (var prop in first) {
// The following allows for a type-safe calling of this function (first & second have to be HSL, HSV, or RGB)
// with type-unsafe iterating over object keys. TS does not allow this without an index (`[key: string]: number`)
// on an object to define how iteration is normally done. To ensure extra keys are not allowed on our types,
// we must cast our object to unknown (as RGB demands `r` be a key, while `Record<string, x>` does not care if
// there is or not), and then as a type TS can iterate over.
if (first[prop] !== second[prop]) return false;
}
return true;
};
var equalColorString = (first, second) => {
return first.replace(/\s/g, '') === second.replace(/\s/g, '');
};
var equalHex = (first, second) => {
if (first.toLowerCase() === second.toLowerCase()) return true;
// To compare colors like `#FFF` and `ffffff` we convert them into RGB objects
return equalColorObjects(hexToRgba(first), hexToRgba(second));
};
var validHex = hex => /^#?([A-Fa-f0-9]{3,4}){1,2}$/.test(hex);
;// ../../node_modules/@babel/runtime/helpers/esm/objectWithoutPropertiesLoose.js
function _objectWithoutPropertiesLoose(r, e) {
if (null == r) return {};
var t = {};
for (var n in r) if ({}.hasOwnProperty.call(r, n)) {
if (-1 !== e.indexOf(n)) continue;
t[n] = r[n];
}
return t;
}
// EXTERNAL MODULE: external {"root":"React","commonjs2":"react","commonjs":"react","amd":"react"}
var external_root_React_commonjs2_react_commonjs_react_amd_react_ = __webpack_require__(442);
var external_root_React_commonjs2_react_commonjs_react_amd_react_default = /*#__PURE__*/__webpack_require__.n(external_root_React_commonjs2_react_commonjs_react_amd_react_);
;// ../drag-event-interactive/esm/utils.js
// Saves incoming handler to the ref in order to avoid "useCallback hell"
function useEventCallback(handler) {
var callbackRef = (0,external_root_React_commonjs2_react_commonjs_react_amd_react_.useRef)(handler);
(0,external_root_React_commonjs2_react_commonjs_react_amd_react_.useEffect)(() => {
callbackRef.current = handler;
});
return (0,external_root_React_commonjs2_react_commonjs_react_amd_react_.useCallback)((value, event) => callbackRef.current && callbackRef.current(value, event), []);
}
// Check if an event was triggered by touch
var isTouch = event => 'touches' in event;
// Browsers introduced an intervention, making touch events passive by default.
// This workaround removes `preventDefault` call from the touch handlers.
// https://github.com/facebook/react/issues/19651
var preventDefaultMove = event => {
!isTouch(event) && event.preventDefault && event.preventDefault();
};
// Clamps a value between an upper and lower bound.
// We use ternary operators because it makes the minified code
// 2 times shorter then `Math.min(Math.max(a,b),c)`
var clamp = function clamp(number, min, max) {
if (min === void 0) {
min = 0;
}
if (max === void 0) {
max = 1;
}
return number > max ? max : number < min ? min : number;
};
// Returns a relative position of the pointer inside the node's bounding box
var getRelativePosition = (node, event) => {
var rect = node.getBoundingClientRect();
// Get user's pointer position from `touches` array if it's a `TouchEvent`
var pointer = isTouch(event) ? event.touches[0] : event;
return {
left: clamp((pointer.pageX - (rect.left + window.pageXOffset)) / rect.width),
top: clamp((pointer.pageY - (rect.top + window.pageYOffset)) / rect.height),
width: rect.width,
height: rect.height,
x: pointer.pageX - (rect.left + window.pageXOffset),
y: pointer.pageY - (rect.top + window.pageYOffset)
};
};
// EXTERNAL MODULE: ../../node_modules/react/jsx-runtime.js
var jsx_runtime = __webpack_require__(85);
;// ../drag-event-interactive/esm/index.js
var _excluded = ["prefixCls", "className", "onMove", "onDown"];
var Interactive = /*#__PURE__*/external_root_React_commonjs2_react_commonjs_react_amd_react_default().forwardRef((props, ref) => {
var {
prefixCls = 'w-color-interactive',
className,
onMove,
onDown
} = props,
reset = _objectWithoutPropertiesLoose(props, _excluded);
var container = (0,external_root_React_commonjs2_react_commonjs_react_amd_react_.useRef)(null);
var hasTouched = (0,external_root_React_commonjs2_react_commonjs_react_amd_react_.useRef)(false);
var [isDragging, setDragging] = (0,external_root_React_commonjs2_react_commonjs_react_amd_react_.useState)(false);
var onMoveCallback = useEventCallback(onMove);
var onKeyCallback = useEventCallback(onDown);
// Prevent mobile browsers from handling mouse events (conflicting with touch ones).
// If we detected a touch interaction before, we prefer reacting to touch events only.
var isValid = event => {
if (hasTouched.current && !isTouch(event)) return false;
hasTouched.current = isTouch(event);
return true;
};
var handleMove = (0,external_root_React_commonjs2_react_commonjs_react_amd_react_.useCallback)(event => {
preventDefaultMove(event);
if (!container.current) return;
var isDown = isTouch(event) ? event.touches.length > 0 : event.buttons > 0;
if (!isDown) {
setDragging(false);
return;
}
onMoveCallback == null || onMoveCallback(getRelativePosition(container.current, event), event);
}, [onMoveCallback]);
var handleMoveEnd = (0,external_root_React_commonjs2_react_commonjs_react_amd_react_.useCallback)(() => setDragging(false), []);
var toggleDocumentEvents = (0,external_root_React_commonjs2_react_commonjs_react_amd_react_.useCallback)(state => {
if (state) {
window.addEventListener(hasTouched.current ? 'touchmove' : 'mousemove', handleMove);
window.addEventListener(hasTouched.current ? 'touchend' : 'mouseup', handleMoveEnd);
} else {
window.removeEventListener('mousemove', handleMove);
window.removeEventListener('mouseup', handleMoveEnd);
window.removeEventListener('touchmove', handleMove);
window.removeEventListener('touchend', handleMoveEnd);
}
}, [handleMove, handleMoveEnd]);
(0,external_root_React_commonjs2_react_commonjs_react_amd_react_.useEffect)(() => {
toggleDocumentEvents(isDragging);
return () => {
toggleDocumentEvents(false);
};
}, [isDragging, handleMove, handleMoveEnd, toggleDocumentEvents]);
var handleMoveStart = (0,external_root_React_commonjs2_react_commonjs_react_amd_react_.useCallback)(event => {
preventDefaultMove(event.nativeEvent);
if (!isValid(event.nativeEvent)) return;
if (!container.current) return;
onKeyCallback == null || onKeyCallback(getRelativePosition(container.current, event.nativeEvent), event.nativeEvent);
setDragging(true);
}, [onKeyCallback]);
return /*#__PURE__*/(0,jsx_runtime.jsx)("div", _extends({}, reset, {
className: [prefixCls, className || ''].filter(Boolean).join(' '),
style: _extends({}, reset.style, {
touchAction: 'none'
}),
ref: container,
tabIndex: 0,
onMouseDown: handleMoveStart,
onTouchStart: handleMoveStart
}));
});
Interactive.displayName = 'Interactive';
/* harmony default export */ const esm = (Interactive);
;// ../color-alpha/esm/Pointer.js
var Pointer_excluded = ["className", "prefixCls", "left", "top", "style", "fillProps"];
var Pointer = _ref => {
var {
className,
prefixCls,
left,
top,
style,
fillProps
} = _ref,
reset = _objectWithoutPropertiesLoose(_ref, Pointer_excluded);
var styleWrapper = _extends({}, style, {
position: 'absolute',
left,
top
});
var stylePointer = _extends({
width: 18,
height: 18,
boxShadow: 'var(--alpha-pointer-box-shadow)',
borderRadius: '50%',
backgroundColor: 'var(--alpha-pointer-background-color)'
}, fillProps == null ? void 0 : fillProps.style, {
transform: left ? 'translate(-9px, -1px)' : 'translate(-1px, -9px)'
});
return /*#__PURE__*/(0,jsx_runtime.jsx)("div", _extends({
className: prefixCls + "-pointer " + (className || ''),
style: styleWrapper
}, reset, {
children: /*#__PURE__*/(0,jsx_runtime.jsx)("div", _extends({
className: prefixCls + "-fill"
}, fillProps, {
style: stylePointer
}))
}));
};
;// ../color-alpha/esm/index.js
var esm_excluded = ["prefixCls", "className", "hsva", "background", "bgProps", "innerProps", "pointerProps", "radius", "width", "height", "direction", "style", "onChange", "pointer"];
var BACKGROUND_IMG = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAMUlEQVQ4T2NkYGAQYcAP3uCTZhw1gGGYhAGBZIA/nYDCgBDAm9BGDWAAJyRCgLaBCAAgXwixzAS0pgAAAABJRU5ErkJggg==';
var Alpha = /*#__PURE__*/external_root_React_commonjs2_react_commonjs_react_amd_react_default().forwardRef((props, ref) => {
var {
prefixCls = 'w-color-alpha',
className,
hsva,
background,
bgProps = {},
innerProps = {},
pointerProps = {},
radius = 0,
width,
height = 16,
direction = 'horizontal',
style,
onChange,
pointer
} = props,
other = _objectWithoutPropertiesLoose(props, esm_excluded);
var handleChange = offset => {
onChange && onChange(_extends({}, hsva, {
a: direction === 'horizontal' ? offset.left : offset.top
}), offset);
};
var colorTo = hsvaToHslaString(Object.assign({}, hsva, {
a: 1
}));
var innerBackground = "linear-gradient(to " + (direction === 'horizontal' ? 'right' : 'bottom') + ", rgba(244, 67, 54, 0) 0%, " + colorTo + " 100%)";
var comProps = {};
if (direction === 'horizontal') {
comProps.left = hsva.a * 100 + "%";
} else {
comProps.top = hsva.a * 100 + "%";
}
var styleWrapper = _extends({
'--alpha-background-color': '#fff',
'--alpha-pointer-background-color': 'rgb(248, 248, 248)',
'--alpha-pointer-box-shadow': 'rgb(0 0 0 / 37%) 0px 1px 4px 0px',
borderRadius: radius,
background: "url(" + BACKGROUND_IMG + ") left center",
backgroundColor: 'var(--alpha-background-color)'
}, {
width,
height
}, style, {
position: 'relative'
});
var pointerElement = pointer && typeof pointer === 'function' ? pointer(_extends({
prefixCls
}, pointerProps, comProps)) : /*#__PURE__*/(0,jsx_runtime.jsx)(Pointer, _extends({}, pointerProps, {
prefixCls: prefixCls
}, comProps));
return /*#__PURE__*/(0,jsx_runtime.jsxs)("div", _extends({}, other, {
className: [prefixCls, prefixCls + "-" + direction, className || ''].filter(Boolean).join(' '),
style: styleWrapper,
ref: ref,
children: [/*#__PURE__*/(0,jsx_runtime.jsx)("div", _extends({}, bgProps, {
style: _extends({
inset: 0,
position: 'absolute',
background: background || innerBackground,
borderRadius: radius
}, bgProps.style)
})), /*#__PURE__*/(0,jsx_runtime.jsx)(esm, _extends({}, innerProps, {
style: _extends({}, innerProps.style, {
inset: 0,
zIndex: 1,
position: 'absolute'
}),
onMove: handleChange,
onDown: handleChange,
children: pointerElement
}))]
}));
});
Alpha.displayName = 'Alpha';
/* harmony default export */ const color_alpha_esm = (Alpha);
;// ../color-editable-input/esm/index.js
var color_editable_input_esm_excluded = ["prefixCls", "placement", "label", "value", "className", "style", "labelStyle", "inputStyle", "onChange", "onBlur", "renderInput"];
var esm_validHex = hex => /^#?([A-Fa-f0-9]{3,4}){1,2}$/.test(hex);
var getNumberValue = value => Number(String(value).replace(/%/g, ''));
var EditableInput = /*#__PURE__*/external_root_React_commonjs2_react_commonjs_react_amd_react_default().forwardRef((props, ref) => {
var {
prefixCls = 'w-color-editable-input',
placement = 'bottom',
label,
value: initValue,
className,
style,
labelStyle,
inputStyle,
onChange,
onBlur,
renderInput
} = props,
other = _objectWithoutPropertiesLoose(props, color_editable_input_esm_excluded);
var [value, setValue] = (0,external_root_React_commonjs2_react_commonjs_react_amd_react_.useState)(initValue);
var isFocus = (0,external_root_React_commonjs2_react_commonjs_react_amd_react_.useRef)(false);
(0,external_root_React_commonjs2_react_commonjs_react_amd_react_.useEffect)(() => {
if (props.value !== value) {
if (!isFocus.current) {
setValue(props.value);
}
}
}, [props.value]);
function handleChange(evn, valInit) {
var value = (valInit || evn.target.value).trim().replace(/^#/, '');
if (esm_validHex(value)) {
onChange && onChange(evn, value);
}
var val = getNumberValue(value);
if (!isNaN(val)) {
onChange && onChange(evn, val);
}
setValue(value);
}
function handleBlur(evn) {
isFocus.current = false;
setValue(props.value);
onBlur && onBlur(evn);
}
var placementStyle = {};
if (placement === 'bottom') {
placementStyle['flexDirection'] = 'column';
}
if (placement === 'top') {
placementStyle['flexDirection'] = 'column-reverse';
}
if (placement === 'left') {
placementStyle['flexDirection'] = 'row-reverse';
}
var wrapperStyle = _extends({
'--editable-input-label-color': 'rgb(153, 153, 153)',
'--editable-input-box-shadow': 'rgb(204 204 204) 0px 0px 0px 1px inset',
'--editable-input-color': '#666',
position: 'relative',
alignItems: 'center',
display: 'flex',
fontSize: 11
}, placementStyle, style);
var editableStyle = _extends({
width: '100%',
paddingTop: 2,
paddingBottom: 2,
paddingLeft: 3,
paddingRight: 3,
fontSize: 11,
background: 'transparent',
boxSizing: 'border-box',
border: 'none',
color: 'var(--editable-input-color)',
boxShadow: 'var(--editable-input-box-shadow)'
}, inputStyle);
var inputProps = _extends({
value,
onChange: handleChange,
onBlur: handleBlur,
autoComplete: 'off',
onFocus: () => isFocus.current = true
}, other, {
style: editableStyle
});
return /*#__PURE__*/(0,jsx_runtime.jsxs)("div", {
className: [prefixCls, className || ''].filter(Boolean).join(' '),
style: wrapperStyle,
children: [renderInput ? renderInput(inputProps, ref) : /*#__PURE__*/(0,jsx_runtime.jsx)("input", _extends({
ref: ref
}, inputProps)), label && /*#__PURE__*/(0,jsx_runtime.jsx)("span", {
style: _extends({
color: 'var(--editable-input-label-color)',
textTransform: 'capitalize'
}, labelStyle),
children: label
})]
});
});
EditableInput.displayName = 'EditableInput';
/* harmony default export */ const color_editable_input_esm = (EditableInput);
;// ../color-swatch/esm/index.js
var color_swatch_esm_excluded = ["prefixCls", "className", "color", "colors", "style", "rectProps", "onChange", "addonAfter", "addonBefore", "rectRender"];
var Swatch = /*#__PURE__*/external_root_React_commonjs2_react_commonjs_react_amd_react_default().forwardRef((props, ref) => {
var {
prefixCls = 'w-color-swatch',
className,
color,
colors = [],
style,
rectProps = {},
onChange,
addonAfter,
addonBefore,
rectRender
} = props,
other = _objectWithoutPropertiesLoose(props, color_swatch_esm_excluded);
var rectStyle = _extends({
'--swatch-background-color': 'rgb(144, 19, 254)',
background: 'var(--swatch-background-color)',
height: 15,
width: 15,
marginRight: 5,
marginBottom: 5,
cursor: 'pointer',
position: 'relative',
outline: 'none',
borderRadius: 2
}, rectProps.style);
var handleClick = (hex, evn) => {
onChange && onChange(hexToHsva(hex), esm_color(hexToHsva(hex)), evn);
};
return /*#__PURE__*/(0,jsx_runtime.jsxs)("div", _extends({
ref: ref
}, other, {
className: [prefixCls, className || ''].filter(Boolean).join(' '),
style: _extends({
display: 'flex',
flexWrap: 'wrap',
position: 'relative'
}, style),
children: [addonBefore && /*#__PURE__*/external_root_React_commonjs2_react_commonjs_react_amd_react_default().isValidElement(addonBefore) && addonBefore, colors && Array.isArray(colors) && colors.map((item, idx) => {
var title = '';
var background = '';
if (typeof item === 'string') {
title = item;
background = item;
}
if (typeof item === 'object' && item.color) {
title = item.title || item.color;
background = item.color;
}
var checked = color && color.toLocaleLowerCase() === background.toLocaleLowerCase();
var render = rectRender && rectRender({
title,
color: background,
checked: !!checked,
style: _extends({}, rectStyle, {
background
}),
onClick: evn => handleClick(background, evn)
});
if (render) {
return /*#__PURE__*/(0,jsx_runtime.jsx)(external_root_React_commonjs2_react_commonjs_react_amd_react_.Fragment, {
children: render
}, idx);
}
var child = rectProps.children && /*#__PURE__*/external_root_React_commonjs2_react_commonjs_react_amd_react_default().isValidElement(rectProps.children) ? /*#__PURE__*/external_root_React_commonjs2_react_commonjs_react_amd_react_default().cloneElement(rectProps.children, {
color: background,
checked
}) : null;
return /*#__PURE__*/(0,jsx_runtime.jsx)("div", _extends({
tabIndex: 0,
title: title,
onClick: evn => handleClick(background, evn)
}, rectProps, {
children: child,
style: _extends({}, rectStyle, {
background
})
}), idx);
}), addonAfter && /*#__PURE__*/external_root_React_commonjs2_react_commonjs_react_amd_react_default().isValidElement(addonAfter) && addonAfter]
}));
});
Swatch.displayName = 'Swatch';
/* harmony default export */ const color_swatch_esm = (Swatch);
;// ../color-block/esm/index.js
var color_block_esm_excluded = ["prefixCls", "className", "style", "color", "colors", "onChange"];
var CORLER_HEX = ['#D9E3F0', '#F47373', '#697689', '#37D67A', '#2CCCE4', '#555555', '#dce775', '#ff8a65', '#ba68c8'];
var Block = /*#__PURE__*/external_root_React_commonjs2_react_commonjs_react_amd_react_default().forwardRef((props, ref) => {
var {
prefixCls = 'w-color-block',
className,
style,
color,
colors = CORLER_HEX,
onChange
} = props,
other = _objectWithoutPropertiesLoose(props, color_block_esm_excluded);
var hsva = typeof color === 'string' && validHex(color) ? hexToHsva(color) : color;
var hex = color ? hsvaToHex(hsva) : '';
var handleChange = hsv => {
onChange && onChange(esm_color(hsv));
};
var handleHex = (value, evn) => {
if (typeof value === 'string' && validHex(value) && /(3|6)/.test(String(value.replace(/^#/, '').length))) {
onChange && onChange(esm_color(hexToHsva(value)));
}
};
var stylePointer = _extends({
'--block-background-color': 'rgb(255, 255, 255)',
'--block-box-shadow': 'rgb(0 0 0 / 10%) 0 1px',
width: 170,
borderRadius: 6,
background: 'var(--block-background-color)',
boxShadow: 'var(--block-box-shadow)',
position: 'relative'
}, style);
return /*#__PURE__*/(0,jsx_runtime.jsxs)("div", _extends({
ref: ref,
className: [prefixCls, className].filter(Boolean).join(' '),
style: stylePointer
}, other, {
children: [/*#__PURE__*/(0,jsx_runtime.jsx)("div", {
style: {
width: 0,
height: 0,
borderStyle: 'solid',
borderWidth: '0 10px 10px',
borderColor: "transparent transparent " + hex,
position: 'absolute',
top: -10,
left: '50%',
marginLeft: -10
}
}), /*#__PURE__*/(0,jsx_runtime.jsx)("div", {
title: hex,
style: {
backgroundColor: "" + hex,
color: getContrastingColor(hex),
height: 110,
fontSize: 18,
borderRadius: '6px 6px 0 0',
display: 'flex',
alignItems: 'center',
justifyContent: 'center'
},
children: hex.toLocaleUpperCase()
}), /*#__PURE__*/(0,jsx_runtime.jsx)(color_swatch_esm, {
colors: colors,
color: hex,
style: {
paddingLeft: 10,
paddingTop: 10
},
rectProps: {
style: {
marginRight: 10,
marginBottom: 10,
borderRadius: 4,
height: 22,
width: 22
}
},
onChange: handleChange
}), /*#__PURE__*/(0,jsx_runtime.jsx)(color_editable_input_esm, {
value: hex.toLocaleUpperCase(),
onChange: (evn, val) => handleHex(val, evn),
onBlur: evn => {
var value = evn.target.value;
evn.target.value = value.slice(0, 6);
handleHex(value.slice(0, 6), evn);
},
inputStyle: {
height: 22,
outline: 0,
borderRadius: 3,
padding: '0 7px'
},
style: {
padding: 10,
paddingTop: 0,
borderRadius: '0 0 6px 6px'
}
})]
}));
});
Block.displayName = 'Block';
/* harmony default export */ const color_block_esm = (Block);
;// ../../node_modules/@babel/runtime/helpers/esm/objectDestructuringEmpty.js
function _objectDestructuringEmpty(t) {
if (null == t) throw new TypeError("Cannot destructure " + t);
}
;// ../color-github/esm/Point.js
var defalutStyle = {
marginRight: 0,
marginBottom: 0,
borderRadius: 0,
boxSizing: 'border-box',
height: 25,
width: 25
};
function Point(_ref) {
var {
style,
title,
checked,
color,
onClick,
rectProps
} = _ref;
var btn = (0,external_root_React_commonjs2_react_commonjs_react_amd_react_.useRef)(null);
var handleMouseEnter = (0,external_root_React_commonjs2_react_commonjs_react_amd_react_.useCallback)(() => {
btn.current.style['zIndex'] = '2';
btn.current.style['outline'] = '#fff solid 2px';
btn.current.style['boxShadow'] = 'rgb(0 0 0 / 25%) 0 0 5px 2px';
}, []);
var handleMouseLeave = (0,external_root_React_commonjs2_react_commonjs_react_amd_react_.useCallback)(() => {
if (!checked) {
btn.current.style['zIndex'] = '0';
btn.current.style['outline'] = 'initial';
btn.current.style['boxShadow'] = 'initial';
}
}, [checked]);
var rectStyle = checked ? {
zIndex: 1,
outline: '#fff solid 2px',
boxShadow: 'rgb(0 0 0 / 25%) 0 0 5px 2px'
} : {
zIndex: 0
};
return /*#__PURE__*/(0,jsx_runtime.jsx)("div", _extends({
ref: btn,
title: title
}, rectProps, {
onClick: onClick,
onMouseEnter: handleMouseEnter,
onMouseLeave: handleMouseLeave,
style: _extends({}, style, {
marginRight: 0,
marginBottom: 0,
borderRadius: 0,
boxSizing: 'border-box',
height: 25,
width: 25
}, defalutStyle, rectStyle, rectProps == null ? void 0 : rectProps.style)
}));
}
;// ../color-github/esm/index.js
var color_github_esm_excluded = ["prefixCls", "placement", "className", "style", "color", "colors", "rectProps", "onChange", "rectRender"];
var esm_CORLER_HEX = ['#B80000', '#DB3E00', '#FCCB00', '#008B02', '#006B76', '#1273DE', '#004DCF', '#5300EB', '#EB9694', '#FAD0C3', '#FEF3BD', '#C1E1C5', '#BEDADC', '#C4DEF6', '#BED3F3', '#D4C4FB'];
var GithubPlacement = /*#__PURE__*/function (GithubPlacement) {
GithubPlacement["Left"] = "L";
GithubPlacement["LeftTop"] = "LT";
GithubPlacement["LeftBottom"] = "LB";
GithubPlacement["Right"] = "R";
GithubPlacement["RightTop"] = "RT";
GithubPlacement["RightBottom"] = "RB";
GithubPlacement["Top"] = "T";
GithubPlacement["TopRight"] = "TR";
GithubPlacement["TopLeft"] = "TL";
GithubPlacement["Bottom"] = "B";
GithubPlacement["BottomLeft"] = "BL";
GithubPlacement["BottomRight"] = "BR";
return GithubPlacement;
}({});
var Github = /*#__PURE__*/external_root_React_commonjs2_react_commonjs_react_amd_react_default().forwardRef((props, ref) => {
var {
prefixCls = 'w-color-github',
placement = GithubPlacement.TopRight,
className,
style,
color,
colors = esm_CORLER_HEX,
rectProps = {},
onChange,
rectRender
} = props,
other = _objectWithoutPropertiesLoose(props, color_github_esm_excluded);
var hsva = typeof color === 'string' && validHex(color) ? hexToHsva(color) : color;
var hex = color ? hsvaToHex(hsva) : '';
var handleChange = hsv => onChange && onChange(esm_color(hsv));
var styleWrapper = _extends({
'--github-border': '1px solid rgba(0, 0, 0, 0.2)',
'--github-background-color': '#fff',
'--github-box-shadow': 'rgb(0 0 0 / 15%) 0px 3px 12px',
'--github-arrow-border-color': 'rgba(0, 0, 0, 0.15)',
width: 200,
borderRadius: 4,
background: 'var(--github-background-color)',
boxShadow: 'var(--github-box-shadow)',
border: 'var(--github-border)',
position: 'relative',
padding: 5
}, style);
var rStyle = {
borderStyle: 'solid',
position: 'absolute'
};
var arrBrStyl = _extends({}, rStyle);
var arrStyl = _extends({}, rStyle);
if (/^T/.test(placement)) {
arrBrStyl.borderWidth = '0 8px 8px';
arrBrStyl.borderColor = 'transparent transparent var(--github-arrow-border-color)';
arrStyl.borderWidth = '0 7px 7px';
arrStyl.borderColor = 'transparent transparent var(--github-background-color)';
}
if (placement === GithubPlacement.TopRight) {
arrBrStyl.top = -8;
arrStyl.top = -7;
}
if (placement === GithubPlacement.Top) {
arrBrStyl.top = -8;
arrStyl.top = -7;
}
if (placement === GithubPlacement.TopLeft) {
arrBrStyl.top = -8;
arrStyl.top = -7;
}
if (/^B/.test(placement)) {
arrBrStyl.borderWidth = '8px 8px 0';
arrBrStyl.borderColor = 'var(--github-arrow-border-color) transparent transparent';
arrStyl.borderWidth = '7px 7px 0';
arrStyl.borderColor = 'var(--github-background-color) transparent transparent';
if (placement === GithubPlacement.BottomRight) {
arrBrStyl.top = '100%';
arrStyl.top = '100%';
}
if (placement === GithubPlacement.Bottom) {
arrBrStyl.top = '100%';
arrStyl.top = '100%';
}
if (placement === GithubPlacement.BottomLeft) {
arrBrStyl.top = '100%';
arrStyl.top = '100%';
}
}
if (/^(B|T)/.test(placement)) {
if (placement === GithubPlacement.Top || placement === GithubPlacement.Bottom) {
arrBrStyl.left = '50%';
arrBrStyl.marginLeft = -8;
arrStyl.left = '50%';
arrStyl.marginLeft = -7;
}
if (placement === GithubPlacement.TopRight || placement === GithubPlacement.BottomRight) {
arrBrStyl.right = 10;
arrStyl.right = 11;
}
if (placement === GithubPlacement.TopLeft || placement === GithubPlacement.BottomLeft) {
arrBrStyl.left = 7;
arrStyl.left = 8;
}
}
if (/^L/.test(placement)) {
arrBrStyl.borderWidth = '8px 8px 8px 0';
arrBrStyl.borderColor = 'transparent var(--github-arrow-border-color) transparent transparent';
arrStyl.borderWidth = '7px 7px 7px 0';
arrStyl.borderColor = 'transparent var(--github-background-color) transparent transparent';
arrBrStyl.left = -8;
arrStyl.left = -7;
}
if (/^R/.test(placement)) {
arrBrStyl.borderWidth = '8px 0 8px 8px';
arrBrStyl.borderColor = 'transparent transparent transparent var(--github-arrow-border-color)';
arrStyl.borderWidth = '7px 0 7px 7px';
arrStyl.borderColor = 'transparent transparent transparent var(--github-background-color)';
arrBrStyl.right = -8;
arrStyl.right = -7;
}
if (/^(L|R)/.test(placement)) {
if (placement === GithubPlacement.RightTop || placement === GithubPlacement.LeftTop) {
arrBrStyl.top = 5;
arrStyl.top = 6;
}
if (placement === GithubPlacement.Left || placement === GithubPlacement.Right) {
arrBrStyl.top = '50%';
arrStyl.top = '50%';
arrBrStyl.marginTop = -8;
arrStyl.marginTop = -7;
}
if (placement === GithubPlacement.LeftBottom || placement === GithubPlacement.RightBottom) {
arrBrStyl.top = '100%';
arrStyl.top = '100%';
arrBrStyl.marginTop = -21;
arrStyl.marginTop = -20;
}
}
var render = _ref => {
var props = _extends({}, (_objectDestructuringEmpty(_ref), _ref));
var handle = rectRender && rectRender(_extends({}, props));
if (handle) return handle;
return /*#__PURE__*/(0,jsx_runtime.jsx)(Point, _extends({}, props, {
rectProps: rectProps
}));
};
return /*#__PURE__*/(0,jsx_runtime.jsx)(color_swatch_esm, _extends({
ref: ref,
className: [prefixCls, className].filter(Boolean).join(' '),
colors: colors,
color: hex,
rectRender: render
}, other, {
onChange: handleChange,
style: styleWrapper,
rectProps: {
style: {
marginRight: 0,
marginBottom: 0,
borderRadius: 0,
height: 25,
width: 25
}
},
addonBefore: /*#__PURE__*/(0,jsx_runtime.jsxs)(external_root_React_commonjs2_react_commonjs_react_amd_react_.Fragment, {
children: [/*#__PURE__*/(0,jsx_runtime.jsx)("div", {
style: arrBrStyl
}), /*#__PURE__*/(0,jsx_runtime.jsx)("div", {
style: arrStyl
})]
})
}));
});
Github.displayName = 'Github';
/* harmony default export */ const color_github_esm = (Github);
;// ../color-saturation/esm/Pointer.js
var Pointer_Pointer = _ref => {
var {
className,
color,
left,
top,
prefixCls
} = _ref;
var style = {
position: 'absolute',
top,
left
};
var stylePointer = {
'--saturation-pointer-box-shadow': 'rgb(255 255 255) 0px 0px 0px 1.5px, rgb(0 0 0 / 30%) 0px 0px 1px 1px inset, rgb(0 0 0 / 40%) 0px 0px 1px 2px',
width: 6,
height: 6,
transform: 'translate(-3px, -3px)',
boxShadow: 'var(--saturation-pointer-box-shadow)',
borderRadius: '50%',
backgroundColor: color
};
return (0,external_root_React_commonjs2_react_commonjs_react_amd_react_.useMemo)(() => /*#__PURE__*/(0,jsx_runtime.jsx)("div", {
className: prefixCls + "-pointer " + (className || ''),
style: style,
children: /*#__PURE__*/(0,jsx_runtime.jsx)("div", {
className: prefixCls + "-fill",
style: stylePointer
})
}), [top, left, color, className, prefixCls]);
};
;// ../color-saturation/esm/index.js
var color_saturation_esm_excluded = ["prefixCls", "radius", "pointer", "className", "hue", "style", "hsva", "onChange"];
var Saturation = /*#__PURE__*/external_root_React_commonjs2_react_commonjs_react_amd_react_default().forwardRef((props, ref) => {
var _hsva$h;
var {
prefixCls = 'w-color-saturation',
radius = 0,
pointer,
className,
hue = 0,
style,
hsva,
onChange
} = props,
other = _objectWithoutPropertiesLoose(props, color_saturation_esm_excluded);
var containerStyle = _extends({
width: 200,
height: 200,
borderRadius: radius
}, style, {
position: 'relative'
});
var [interaction, setInteraction] = (0,external_root_React_commonjs2_react_commonjs_react_amd_react_.useState)({
left: 0,
top: 0,
x: 0,
y: 0,
width: 0,
height: 0
});
var handleChange = (interaction, event) => {
setInteraction(interaction);
onChange && hsva && onChange({
h: hsva.h,
s: interaction.left * 100,
v: (1 - interaction.top) * 100,
a: hsva.a
// source: 'hsv',
});
};
var pointerElement = (0,external_root_React_commonjs2_react_commonjs_react_amd_react_.useMemo)(() => {
if (!hsva) return null;
var ponitX = clamp(interaction.x, 0, interaction.width) + "px";
var ponitY = clamp(interaction.y, 0, interaction.height) + "px";
if (interaction.width === 0 || interaction.height === 0) {
ponitX = hsva.s + "%";
ponitY = 100 - hsva.v + "%";
}
var comProps = {
top: ponitY,
left: ponitX,
color: hsvaToHslaString(hsva)
};
if (pointer && typeof pointer === 'function') {
return pointer(_extends({
prefixCls
}, comProps));
}
return /*#__PURE__*/(0,jsx_runtime.jsx)(Pointer_Pointer, _extends({
prefixCls: prefixCls
}, comProps));
}, [hsva, interaction, pointer, prefixCls]);
return /*#__PURE__*/(0,jsx_runtime.jsx)(esm, _extends({
className: [prefixCls, className || ''].filter(Boolean).join(' ')
}, ot