@vimeo/iris
Version:
Vimeo Design System
397 lines (393 loc) • 12.5 kB
JavaScript
import React__default, { useRef, useState, useEffect, useCallback, useMemo, useLayoutEffect } from 'react';
import { throttle } from '../../../utils/general/throttle.esm.js';
import '../../../tslib.es6-7f0e734f.js';
function u() {
return (u = Object.assign || function (e) {
for (var r = 1; r < arguments.length; r++) {
var t = arguments[r];
for (var n in t) Object.prototype.hasOwnProperty.call(t, n) && (e[n] = t[n]);
}
return e;
}).apply(this, arguments);
}
function c(e, r) {
if (null == e) return {};
var t,
n,
o = {},
a = Object.keys(e);
for (n = 0; n < a.length; n++) r.indexOf(t = a[n]) >= 0 || (o[t] = e[t]);
return o;
}
function i(e) {
var t = useRef(e),
n = useRef(function (e) {
t.current && t.current(e);
});
return t.current = e, n.current;
}
var s = function (e, r, t) {
return void 0 === r && (r = 0), void 0 === t && (t = 1), e > t ? t : e < r ? r : e;
},
f = function (e) {
return "touches" in e;
},
v = function (e) {
return e && e.ownerDocument.defaultView || self;
},
d = function (e, r, t) {
var n = e.getBoundingClientRect(),
o = f(r) ? function (e, r) {
for (var t = 0; t < e.length; t++) if (e[t].identifier === r) return e[t];
return e[0];
}(r.touches, t) : r;
return {
left: s((o.pageX - (n.left + v(e).pageXOffset)) / n.width),
top: s((o.pageY - (n.top + v(e).pageYOffset)) / n.height)
};
},
h = function (e) {
!f(e) && e.preventDefault();
},
m = /*#__PURE__*/React__default.memo(function (o) {
var a = o.onMove,
l = o.onKey,
s = c(o, ["onMove", "onKey"]),
m = useRef(null),
g = i(a),
p = i(l),
b = useRef(null),
_ = useRef(!1),
x = useMemo(function () {
var e = function (e) {
h(e), (f(e) ? e.touches.length > 0 : e.buttons > 0) && m.current ? g(d(m.current, e, b.current)) : t(!1);
},
r = function () {
return t(!1);
};
function t(t) {
var n = _.current,
o = v(m.current),
a = t ? o.addEventListener : o.removeEventListener;
a(n ? "touchmove" : "mousemove", e), a(n ? "touchend" : "mouseup", r);
}
return [function (e) {
var r = e.nativeEvent,
n = m.current;
if (n && (h(r), !function (e, r) {
return r && !f(e);
}(r, _.current) && n)) {
if (f(r)) {
_.current = !0;
var o = r.changedTouches || [];
o.length && (b.current = o[0].identifier);
}
n.focus(), g(d(n, r, b.current)), t(!0);
}
}, function (e) {
var r = e.which || e.keyCode;
r < 37 || r > 40 || (e.preventDefault(), p({
left: 39 === r ? .05 : 37 === r ? -.05 : 0,
top: 40 === r ? .05 : 38 === r ? -.05 : 0
}));
}, t];
}, [p, g]),
C = x[0],
E = x[1],
H = x[2];
return useEffect(function () {
return H;
}, [H]), /*#__PURE__*/React__default.createElement("div", u({}, s, {
onTouchStart: C,
onMouseDown: C,
className: "react-colorful__interactive",
ref: m,
onKeyDown: E,
tabIndex: 0,
role: "slider"
}));
}),
g = function (e) {
return e.filter(Boolean).join(" ");
},
p = function (r) {
var t = r.color,
n = r.left,
o = r.top,
a = void 0 === o ? .5 : o,
l = g(["react-colorful__pointer", r.className]);
return /*#__PURE__*/React__default.createElement("div", {
className: l,
style: {
top: 100 * a + "%",
left: 100 * n + "%"
}
}, /*#__PURE__*/React__default.createElement("div", {
className: "react-colorful__pointer-fill",
style: {
backgroundColor: t
}
}));
},
b = function (e, r, t) {
return void 0 === r && (r = 0), void 0 === t && (t = Math.pow(10, r)), Math.round(t * e) / t;
},
x = function (e) {
return L(C(e));
},
C = function (e) {
return "#" === e[0] && (e = e.substring(1)), e.length < 6 ? {
r: parseInt(e[0] + e[0], 16),
g: parseInt(e[1] + e[1], 16),
b: parseInt(e[2] + e[2], 16),
a: 4 === e.length ? b(parseInt(e[3] + e[3], 16) / 255, 2) : 1
} : {
r: parseInt(e.substring(0, 2), 16),
g: parseInt(e.substring(2, 4), 16),
b: parseInt(e.substring(4, 6), 16),
a: 8 === e.length ? b(parseInt(e.substring(6, 8), 16) / 255, 2) : 1
};
},
w = function (e) {
return K(I(e));
},
y = function (e) {
var r = e.s,
t = e.v,
n = e.a,
o = (200 - r) * t / 100;
return {
h: b(e.h),
s: b(o > 0 && o < 200 ? r * t / 100 / (o <= 100 ? o : 200 - o) * 100 : 0),
l: b(o / 2),
a: b(n, 2)
};
},
q = function (e) {
var r = y(e);
return "hsl(" + r.h + ", " + r.s + "%, " + r.l + "%)";
},
I = function (e) {
var r = e.h,
t = e.s,
n = e.v,
o = e.a;
r = r / 360 * 6, t /= 100, n /= 100;
var a = Math.floor(r),
l = n * (1 - t),
u = n * (1 - (r - a) * t),
c = n * (1 - (1 - r + a) * t),
i = a % 6;
return {
r: b(255 * [n, u, l, l, c, n][i]),
g: b(255 * [c, n, n, u, l, l][i]),
b: b(255 * [l, l, c, n, n, u][i]),
a: b(o, 2)
};
},
D = function (e) {
var r = e.toString(16);
return r.length < 2 ? "0" + r : r;
},
K = function (e) {
var r = e.r,
t = e.g,
n = e.b,
o = e.a,
a = o < 1 ? D(b(255 * o)) : "";
return "#" + D(r) + D(t) + D(n) + a;
},
L = function (e) {
var r = e.r,
t = e.g,
n = e.b,
o = e.a,
a = Math.max(r, t, n),
l = a - Math.min(r, t, n),
u = l ? a === r ? (t - n) / l : a === t ? 2 + (n - r) / l : 4 + (r - t) / l : 0;
return {
h: b(60 * (u < 0 ? u + 6 : u)),
s: b(a ? l / a * 100 : 0),
v: b(a / 255 * 100),
a: o
};
},
S = /*#__PURE__*/React__default.memo(function (r) {
var t = r.hue,
n = r.onChange,
o = g(["react-colorful__hue", r.className]);
return /*#__PURE__*/React__default.createElement("div", {
className: o
}, /*#__PURE__*/React__default.createElement(m, {
onMove: function (e) {
n({
h: 360 * e.left
});
},
onKey: function (e) {
n({
h: s(t + 360 * e.left, 0, 360)
});
},
"aria-label": "Hue",
"aria-valuenow": b(t),
"aria-valuemax": "360",
"aria-valuemin": "0"
}, /*#__PURE__*/React__default.createElement(p, {
className: "react-colorful__hue-pointer",
left: t / 360,
color: q({
h: t,
s: 100,
v: 100,
a: 1
})
})));
}),
T = /*#__PURE__*/React__default.memo(function (r) {
var t = r.hsva,
n = r.onChange,
o = {
backgroundColor: q({
h: t.h,
s: 100,
v: 100,
a: 1
})
};
return /*#__PURE__*/React__default.createElement("div", {
className: "react-colorful__saturation",
style: o
}, /*#__PURE__*/React__default.createElement(m, {
onMove: function (e) {
n({
s: 100 * e.left,
v: 100 - 100 * e.top
});
},
onKey: function (e) {
n({
s: s(t.s + 100 * e.left, 0, 100),
v: s(t.v - 100 * e.top, 0, 100)
});
},
"aria-label": "Color",
"aria-valuetext": "Saturation " + b(t.s) + "%, Brightness " + b(t.v) + "%"
}, /*#__PURE__*/React__default.createElement(p, {
className: "react-colorful__saturation-pointer",
top: 1 - t.v / 100,
left: t.s / 100,
color: q(t)
})));
}),
F = function (e, r) {
if (e === r) return !0;
for (var t in e) if (e[t] !== r[t]) return !1;
return !0;
},
X = function (e, r) {
return e.toLowerCase() === r.toLowerCase() || F(C(e), C(r));
};
function Y(e, t, l) {
var u = i(l),
c = useState(function () {
return e.toHsva(t);
}),
s = c[0],
f = c[1],
v = useRef({
color: t,
hsva: s
});
useEffect(function () {
if (!e.equal(t, v.current.color)) {
var r = e.toHsva(t);
v.current = {
hsva: r,
color: t
}, f(r);
}
}, [t, e]), useEffect(function () {
var r;
F(s, v.current.hsva) || e.equal(r = e.fromHsva(s), v.current.color) || (v.current = {
hsva: s,
color: r
}, u(r));
}, [s, e, u]);
var d = useCallback(function (e) {
f(function (r) {
return Object.assign({}, r, e);
});
}, []);
return [s, d];
}
var V = "undefined" != typeof window ? useLayoutEffect : useEffect,
$ = function () {
return ("undefined" != typeof __webpack_nonce__ ? __webpack_nonce__ : void 0);
},
J = new Map(),
Q = function (e) {
V(function () {
var r = e.current ? e.current.ownerDocument : document;
if (void 0 !== r && !J.has(r)) {
var t = r.createElement("style");
t.innerHTML = '.react-colorful{position:relative;display:flex;flex-direction:column;width:200px;height:200px;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;cursor:default}.react-colorful__saturation{position:relative;flex-grow:1;border-color:transparent;border-bottom:12px solid #000;border-radius:8px 8px 0 0;background-image:linear-gradient(0deg,#000,transparent),linear-gradient(90deg,#fff,hsla(0,0%,100%,0))}.react-colorful__alpha-gradient,.react-colorful__pointer-fill{content:"";position:absolute;left:0;top:0;right:0;bottom:0;pointer-events:none;border-radius:inherit}.react-colorful__alpha-gradient,.react-colorful__saturation{box-shadow:inset 0 0 0 1px rgba(0,0,0,.05)}.react-colorful__alpha,.react-colorful__hue{position:relative;height:24px}.react-colorful__hue{background:linear-gradient(90deg,red 0,#ff0 17%,#0f0 33%,#0ff 50%,#00f 67%,#f0f 83%,red)}.react-colorful__last-control{border-radius:0 0 8px 8px}.react-colorful__interactive{position:absolute;left:0;top:0;right:0;bottom:0;border-radius:inherit;outline:none;touch-action:none}.react-colorful__pointer{position:absolute;z-index:1;box-sizing:border-box;width:28px;height:28px;transform:translate(-50%,-50%);background-color:#fff;border:2px solid #fff;border-radius:50%;box-shadow:0 2px 4px rgba(0,0,0,.2)}.react-colorful__interactive:focus .react-colorful__pointer{transform:translate(-50%,-50%) scale(1.1)}.react-colorful__alpha,.react-colorful__alpha-pointer{background-color:#fff;background-image:url(\'data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill-opacity=".05"><path d="M8 0h8v8H8zM0 8h8v8H0z"/></svg>\')}.react-colorful__saturation-pointer{z-index:3}.react-colorful__hue-pointer{z-index:2}', J.set(r, t);
var n = $();
n && t.setAttribute("nonce", n), r.head.appendChild(t);
}
}, []);
},
U = function (t) {
var n = t.className,
o = t.colorModel,
a = t.color,
l = void 0 === a ? o.defaultColor : a,
i = t.onChange,
s = c(t, ["className", "colorModel", "color", "onChange"]),
f = useRef(null);
Q(f);
var v = Y(o, l, i),
d = v[0],
h = v[1],
m = g(["react-colorful", n]);
return /*#__PURE__*/React__default.createElement("div", u({}, s, {
ref: f,
className: m
}), /*#__PURE__*/React__default.createElement(T, {
hsva: d,
onChange: h
}), /*#__PURE__*/React__default.createElement(S, {
hue: d.h,
onChange: h,
className: "react-colorful__last-control"
}));
},
W = {
defaultColor: "000",
toHsva: x,
fromHsva: function (e) {
return w({
h: e.h,
s: e.s,
v: e.v,
a: 1
});
},
equal: X
},
Z = function (r) {
return /*#__PURE__*/React__default.createElement(U, u({}, r, {
colorModel: W
}));
};
function ColorSelectPicker(_a) {
var value = _a.value, dispatch = _a.dispatch, onChange = _a.onChange, throttleSpeed = _a.throttleSpeed;
var handleChange = throttle(function (color) {
dispatch({ type: 'SET_HEX', payload: color });
if (onChange)
onChange(color);
}, throttleSpeed);
return (React__default.createElement("div", { "aria-label": "color picker" },
React__default.createElement(Z, { color: value, onChange: handleChange })));
}
export { ColorSelectPicker };