1313 lines
43 KiB
JavaScript
1313 lines
43 KiB
JavaScript
|
(window.webpackJsonp = window.webpackJsonp || []).push([
|
||
|
|
[33],
|
||
|
|
{
|
||
|
|
'+ByK': function (e, t, n) {
|
||
|
|
e.exports = {
|
||
|
|
itemWrap: 'itemWrap-3qF9ynvx',
|
||
|
|
item: 'item-112BZuXZ',
|
||
|
|
icon: 'icon-2y6cSg4c',
|
||
|
|
selected: 'selected-3tUrY97Z',
|
||
|
|
label: 'label-1uw3rZaL',
|
||
|
|
};
|
||
|
|
},
|
||
|
|
'1Kfe': function (e, t, n) {
|
||
|
|
e.exports = {
|
||
|
|
container: 'container-3jqXx6VY',
|
||
|
|
sectionTitle: 'sectionTitle-14f4vHhw',
|
||
|
|
separator: 'separator-37206dUD',
|
||
|
|
customButton: 'customButton-1OVL2GM7',
|
||
|
|
};
|
||
|
|
},
|
||
|
|
'4bOu': function (e, t, n) {
|
||
|
|
e.exports = {
|
||
|
|
colorPickerWrap: 'colorPickerWrap-3CKoS76B',
|
||
|
|
focused: 'focused-1eNVgMcK',
|
||
|
|
readonly: 'readonly-3WKrZDDZ',
|
||
|
|
disabled: 'disabled-3JLIZoXG',
|
||
|
|
'size-small': 'size-small-171myYWP',
|
||
|
|
'size-medium': 'size-medium-vQ4tJKsY',
|
||
|
|
'size-large': 'size-large-36sdciXs',
|
||
|
|
'font-size-small': 'font-size-small-2MhPDpOT',
|
||
|
|
'font-size-medium': 'font-size-medium-2FxxjPlX',
|
||
|
|
'font-size-large': 'font-size-large-272pPq9L',
|
||
|
|
'border-none': 'border-none-IfU-lwor',
|
||
|
|
shadow: 'shadow-2guXPu-j',
|
||
|
|
'border-thin': 'border-thin-1PBFvGUv',
|
||
|
|
'border-thick': 'border-thick-sfRUs3z9',
|
||
|
|
'intent-default': 'intent-default-24Iojkmz',
|
||
|
|
'intent-success': 'intent-success-2MeIS_Pu',
|
||
|
|
'intent-warning': 'intent-warning-28gYd2KQ',
|
||
|
|
'intent-danger': 'intent-danger-1bAU5SPR',
|
||
|
|
'intent-primary': 'intent-primary-dbxJRTNV',
|
||
|
|
'corner-top-left': 'corner-top-left-1YL_woIU',
|
||
|
|
'corner-top-right': 'corner-top-right-2ch4nt0D',
|
||
|
|
'corner-bottom-right': 'corner-bottom-right-yxUtJRuR',
|
||
|
|
'corner-bottom-left': 'corner-bottom-left-RaqUovla',
|
||
|
|
colorPicker: 'colorPicker-3Y3x2ZTE',
|
||
|
|
swatch: 'swatch-1HdO4thS',
|
||
|
|
placeholderContainer: 'placeholderContainer-162UtvCf',
|
||
|
|
placeholder: 'placeholder-1EJtBXNo',
|
||
|
|
white: 'white-1wi9uYIx',
|
||
|
|
opacitySwatch: 'opacitySwatch-JY_FJG0h',
|
||
|
|
colorLine: 'colorLine-2ayGuwQX',
|
||
|
|
thicknessContainer: 'thicknessContainer-b-mOHnpg',
|
||
|
|
thicknessTitle: 'thicknessTitle-3PQDSIFb',
|
||
|
|
};
|
||
|
|
},
|
||
|
|
'7MId': function (e, t, n) {
|
||
|
|
'use strict';
|
||
|
|
var o = n('q1tI'),
|
||
|
|
r = n.n(o),
|
||
|
|
a = n('TSYQ'),
|
||
|
|
i = n.n(a),
|
||
|
|
c = n('mrSG'),
|
||
|
|
s = n('Eyy1'),
|
||
|
|
l = n('/3z9'),
|
||
|
|
u = n('9dlw'),
|
||
|
|
p = n('Oi2w'),
|
||
|
|
d = (n('YFKU'), n('eJTA')),
|
||
|
|
h = n('HGP3'),
|
||
|
|
m = h.colorsPalette['color-white'],
|
||
|
|
v = [
|
||
|
|
'ripe-red',
|
||
|
|
'tan-orange',
|
||
|
|
'banana-yellow',
|
||
|
|
'iguana-green',
|
||
|
|
'minty-green',
|
||
|
|
'sky-blue',
|
||
|
|
'tv-blue',
|
||
|
|
'deep-blue',
|
||
|
|
'grapes-purple',
|
||
|
|
'berry-pink',
|
||
|
|
],
|
||
|
|
f = [200, 300, 400, 500, 600, 700, 800, 900].map(function (e) {
|
||
|
|
return 'color-cold-gray-' + e;
|
||
|
|
});
|
||
|
|
f.unshift('color-white'),
|
||
|
|
f.push('color-black'),
|
||
|
|
v.forEach(function (e) {
|
||
|
|
f.push('color-' + e + '-500');
|
||
|
|
});
|
||
|
|
var _ = f.map(function (e) {
|
||
|
|
return h.colorsPalette[e];
|
||
|
|
}),
|
||
|
|
g = [];
|
||
|
|
[100, 200, 300, 400, 700, 900].forEach(function (e) {
|
||
|
|
v.forEach(function (t) {
|
||
|
|
g.push('color-' + t + '-' + e);
|
||
|
|
});
|
||
|
|
});
|
||
|
|
var b = g.map(function (e) {
|
||
|
|
return h.colorsPalette[e];
|
||
|
|
}),
|
||
|
|
C = n('DXuF'),
|
||
|
|
y = (function (e) {
|
||
|
|
function t() {
|
||
|
|
var t = (null !== e && e.apply(this, arguments)) || this;
|
||
|
|
return (
|
||
|
|
(t._onClick = function () {
|
||
|
|
var e = t.props,
|
||
|
|
n = e.color;
|
||
|
|
(0, e.onSelect)(n);
|
||
|
|
}),
|
||
|
|
t
|
||
|
|
);
|
||
|
|
}
|
||
|
|
return (
|
||
|
|
Object(c.__extends)(t, e),
|
||
|
|
(t.prototype.render = function () {
|
||
|
|
var e = this.props,
|
||
|
|
t = e.color,
|
||
|
|
n = e.selected;
|
||
|
|
return o.createElement('div', {
|
||
|
|
style: t ? { color: t } : void 0,
|
||
|
|
className: a(
|
||
|
|
C.swatch,
|
||
|
|
n && C.selected,
|
||
|
|
!t && C.empty,
|
||
|
|
String(t).toLowerCase() === m && C.white,
|
||
|
|
),
|
||
|
|
onClick: this._onClick,
|
||
|
|
});
|
||
|
|
}),
|
||
|
|
t
|
||
|
|
);
|
||
|
|
})(o.PureComponent),
|
||
|
|
w = (function (e) {
|
||
|
|
function t() {
|
||
|
|
var t = (null !== e && e.apply(this, arguments)) || this;
|
||
|
|
return (
|
||
|
|
(t._onSelect = function (e) {
|
||
|
|
var n = t.props.onSelect;
|
||
|
|
n && n(e);
|
||
|
|
}),
|
||
|
|
t
|
||
|
|
);
|
||
|
|
}
|
||
|
|
return (
|
||
|
|
Object(c.__extends)(t, e),
|
||
|
|
(t.prototype.render = function () {
|
||
|
|
var e = this,
|
||
|
|
t = this.props,
|
||
|
|
n = t.colors,
|
||
|
|
r = t.color,
|
||
|
|
a = t.children;
|
||
|
|
if (!n) return null;
|
||
|
|
var i = r ? Object(d.parseRgb)(String(r)) : void 0;
|
||
|
|
return o.createElement(
|
||
|
|
'div',
|
||
|
|
{ className: C.swatches },
|
||
|
|
n.map(function (t, n) {
|
||
|
|
return o.createElement(y, {
|
||
|
|
key: String(t) + n,
|
||
|
|
color: t,
|
||
|
|
selected:
|
||
|
|
i &&
|
||
|
|
Object(d.areEqualRgb)(i, Object(d.parseRgb)(String(t))),
|
||
|
|
onSelect: e._onSelect,
|
||
|
|
});
|
||
|
|
}),
|
||
|
|
a,
|
||
|
|
);
|
||
|
|
}),
|
||
|
|
t
|
||
|
|
);
|
||
|
|
})(o.PureComponent),
|
||
|
|
E = n('U1eG'),
|
||
|
|
S = n('mwqF');
|
||
|
|
function N(e) {
|
||
|
|
var t = 'Invalid RGB color: ' + e;
|
||
|
|
if (null === e) throw new Error(t);
|
||
|
|
var n = e.match(/^#?([a-f0-9]{2})([a-f0-9]{2})([a-f0-9]{2})$/i);
|
||
|
|
if (null === n) throw new Error(t);
|
||
|
|
var o = n[1],
|
||
|
|
r = n[2],
|
||
|
|
a = n[3];
|
||
|
|
if (!o || !r || !a) throw new Error(t);
|
||
|
|
var i,
|
||
|
|
c,
|
||
|
|
s = parseInt(o, 16) / 255,
|
||
|
|
l = parseInt(r, 16) / 255,
|
||
|
|
u = parseInt(a, 16) / 255,
|
||
|
|
p = Math.max(s, l, u),
|
||
|
|
d = Math.min(s, l, u),
|
||
|
|
h = p,
|
||
|
|
m = p - d;
|
||
|
|
if (((c = 0 === p ? 0 : m / p), p === d)) i = 0;
|
||
|
|
else {
|
||
|
|
switch (p) {
|
||
|
|
case s:
|
||
|
|
i = (l - u) / m + (l < u ? 6 : 0);
|
||
|
|
break;
|
||
|
|
case l:
|
||
|
|
i = (u - s) / m + 2;
|
||
|
|
break;
|
||
|
|
case u:
|
||
|
|
i = (s - l) / m + 4;
|
||
|
|
break;
|
||
|
|
default:
|
||
|
|
i = 0;
|
||
|
|
}
|
||
|
|
i /= 6;
|
||
|
|
}
|
||
|
|
return { h: i, s: c, v: h };
|
||
|
|
}
|
||
|
|
var O = n('PoSe'),
|
||
|
|
k = n.n(O),
|
||
|
|
P = n('lY1a'),
|
||
|
|
j = (function (e) {
|
||
|
|
function t() {
|
||
|
|
var t = (null !== e && e.apply(this, arguments)) || this;
|
||
|
|
return (
|
||
|
|
(t._container = null),
|
||
|
|
(t._refContainer = function (e) {
|
||
|
|
t._container = e;
|
||
|
|
}),
|
||
|
|
(t._handlePosition = function (e) {
|
||
|
|
var n = t.props,
|
||
|
|
o = n.hsv.h,
|
||
|
|
r = n.onChange;
|
||
|
|
if (r) {
|
||
|
|
var a = Object(s.ensureNotNull)(
|
||
|
|
t._container,
|
||
|
|
).getBoundingClientRect(),
|
||
|
|
i = e.clientX - a.left,
|
||
|
|
c = e.clientY - a.top,
|
||
|
|
l = i / a.width;
|
||
|
|
l < 0 ? (l = 0) : l > 1 && (l = 1);
|
||
|
|
var u = 1 - c / a.height;
|
||
|
|
u < 0 ? (u = 0) : u > 1 && (u = 1), r({ h: o, s: l, v: u });
|
||
|
|
}
|
||
|
|
}),
|
||
|
|
(t._mouseDown = function (e) {
|
||
|
|
window.addEventListener('mouseup', t._mouseUp),
|
||
|
|
window.addEventListener('mousemove', t._mouseMove);
|
||
|
|
}),
|
||
|
|
(t._mouseUp = function (e) {
|
||
|
|
window.removeEventListener('mousemove', t._mouseMove),
|
||
|
|
window.removeEventListener('mouseup', t._mouseUp),
|
||
|
|
t._handlePosition(e);
|
||
|
|
}),
|
||
|
|
(t._mouseMove = k()(t._handlePosition, 100)),
|
||
|
|
(t._handleTouch = function (e) {
|
||
|
|
t._handlePosition(e.nativeEvent.touches[0]);
|
||
|
|
}),
|
||
|
|
t
|
||
|
|
);
|
||
|
|
}
|
||
|
|
return (
|
||
|
|
Object(c.__extends)(t, e),
|
||
|
|
(t.prototype.render = function () {
|
||
|
|
var e = this.props,
|
||
|
|
t = e.className,
|
||
|
|
n = e.hsv,
|
||
|
|
r = n.h,
|
||
|
|
a = n.s,
|
||
|
|
c = n.v,
|
||
|
|
s = 'hsl(' + 360 * r + ', 100%, 50%)';
|
||
|
|
return o.createElement(
|
||
|
|
'div',
|
||
|
|
{
|
||
|
|
className: i()(P.saturation, t),
|
||
|
|
style: { backgroundColor: s },
|
||
|
|
ref: this._refContainer,
|
||
|
|
onMouseDown: this._mouseDown,
|
||
|
|
onTouchStart: this._handleTouch,
|
||
|
|
onTouchMove: this._handleTouch,
|
||
|
|
},
|
||
|
|
o.createElement('div', {
|
||
|
|
className: P.pointer,
|
||
|
|
style: { left: 100 * a + '%', top: 100 * (1 - c) + '%' },
|
||
|
|
}),
|
||
|
|
);
|
||
|
|
}),
|
||
|
|
t
|
||
|
|
);
|
||
|
|
})(o.PureComponent),
|
||
|
|
I = n('jpE+'),
|
||
|
|
T = (function (e) {
|
||
|
|
function t() {
|
||
|
|
var t = (null !== e && e.apply(this, arguments)) || this;
|
||
|
|
return (
|
||
|
|
(t._container = null),
|
||
|
|
(t._refContainer = function (e) {
|
||
|
|
t._container = e;
|
||
|
|
}),
|
||
|
|
(t._handlePosition = function (e) {
|
||
|
|
var n = t.props,
|
||
|
|
o = n.hsv,
|
||
|
|
r = o.s,
|
||
|
|
a = o.v,
|
||
|
|
i = n.onChange;
|
||
|
|
if (i) {
|
||
|
|
var c = Object(s.ensureNotNull)(
|
||
|
|
t._container,
|
||
|
|
).getBoundingClientRect(),
|
||
|
|
l = e.clientY - c.top;
|
||
|
|
l >= c.top && (l = c.top - 1);
|
||
|
|
var u = l / c.height;
|
||
|
|
u < 0 ? (u = 0) : u > 1 && (u = 1), i({ h: u, s: r, v: a });
|
||
|
|
}
|
||
|
|
}),
|
||
|
|
(t._mouseDown = function (e) {
|
||
|
|
window.addEventListener('mouseup', t._mouseUp),
|
||
|
|
window.addEventListener('mousemove', t._mouseMove);
|
||
|
|
}),
|
||
|
|
(t._mouseUp = function (e) {
|
||
|
|
window.removeEventListener('mousemove', t._mouseMove),
|
||
|
|
window.removeEventListener('mouseup', t._mouseUp),
|
||
|
|
t._handlePosition(e);
|
||
|
|
}),
|
||
|
|
(t._mouseMove = k()(t._handlePosition, 100)),
|
||
|
|
(t._handleTouch = function (e) {
|
||
|
|
t._handlePosition(e.nativeEvent.touches[0]);
|
||
|
|
}),
|
||
|
|
t
|
||
|
|
);
|
||
|
|
}
|
||
|
|
return (
|
||
|
|
Object(c.__extends)(t, e),
|
||
|
|
(t.prototype.render = function () {
|
||
|
|
var e = this.props,
|
||
|
|
t = e.className,
|
||
|
|
n = e.hsv.h;
|
||
|
|
return o.createElement(
|
||
|
|
'div',
|
||
|
|
{ className: i()(I.hue, t) },
|
||
|
|
o.createElement(
|
||
|
|
'div',
|
||
|
|
{
|
||
|
|
className: I.pointerContainer,
|
||
|
|
ref: this._refContainer,
|
||
|
|
onMouseDown: this._mouseDown,
|
||
|
|
onTouchStart: this._handleTouch,
|
||
|
|
onTouchMove: this._handleTouch,
|
||
|
|
},
|
||
|
|
o.createElement('div', {
|
||
|
|
className: I.pointer,
|
||
|
|
style: { top: 100 * n + '%' },
|
||
|
|
}),
|
||
|
|
),
|
||
|
|
);
|
||
|
|
}),
|
||
|
|
t
|
||
|
|
);
|
||
|
|
})(o.PureComponent),
|
||
|
|
x = n('uJfL'),
|
||
|
|
L = window.t('Add', { context: 'Color Picker' }),
|
||
|
|
D = (function (e) {
|
||
|
|
function t(t) {
|
||
|
|
var n = e.call(this, t) || this;
|
||
|
|
(n._handleHSV = function (e) {
|
||
|
|
var t =
|
||
|
|
(function (e) {
|
||
|
|
var t,
|
||
|
|
n,
|
||
|
|
o,
|
||
|
|
r = e.h,
|
||
|
|
a = e.s,
|
||
|
|
i = e.v,
|
||
|
|
c = Math.floor(6 * r),
|
||
|
|
s = 6 * r - c,
|
||
|
|
l = i * (1 - a),
|
||
|
|
u = i * (1 - s * a),
|
||
|
|
p = i * (1 - (1 - s) * a);
|
||
|
|
switch (c % 6) {
|
||
|
|
case 0:
|
||
|
|
(t = i), (n = p), (o = l);
|
||
|
|
break;
|
||
|
|
case 1:
|
||
|
|
(t = u), (n = i), (o = l);
|
||
|
|
break;
|
||
|
|
case 2:
|
||
|
|
(t = l), (n = i), (o = p);
|
||
|
|
break;
|
||
|
|
case 3:
|
||
|
|
(t = l), (n = u), (o = i);
|
||
|
|
break;
|
||
|
|
case 4:
|
||
|
|
(t = p), (n = l), (o = i);
|
||
|
|
break;
|
||
|
|
case 5:
|
||
|
|
(t = i), (n = l), (o = u);
|
||
|
|
break;
|
||
|
|
default:
|
||
|
|
(t = 0), (n = 0), (o = 0);
|
||
|
|
}
|
||
|
|
return (
|
||
|
|
'#' +
|
||
|
|
[255 * t, 255 * n, 255 * o]
|
||
|
|
.map(function (e) {
|
||
|
|
return ('0' + Math.round(e).toString(16)).replace(
|
||
|
|
/.+?([a-f0-9]{2})$/i,
|
||
|
|
'$1',
|
||
|
|
);
|
||
|
|
})
|
||
|
|
.join('')
|
||
|
|
);
|
||
|
|
})(e) || '#000000';
|
||
|
|
n.setState({ color: t, inputColor: t.replace(/^#/, ''), hsv: e }),
|
||
|
|
n.props.onSelect(t);
|
||
|
|
}),
|
||
|
|
(n._handleInput = function (e) {
|
||
|
|
var t = e.currentTarget.value;
|
||
|
|
try {
|
||
|
|
var o = N(t),
|
||
|
|
r = '#' + t;
|
||
|
|
n.setState({ color: r, inputColor: t, hsv: o }),
|
||
|
|
n.props.onSelect(r);
|
||
|
|
} catch (a) {
|
||
|
|
n.setState({ inputColor: t });
|
||
|
|
}
|
||
|
|
}),
|
||
|
|
(n._handleAddColor = function () {
|
||
|
|
return n.props.onAdd(n.state.color);
|
||
|
|
});
|
||
|
|
var o = t.color || '#000000';
|
||
|
|
return (
|
||
|
|
(n.state = {
|
||
|
|
color: o,
|
||
|
|
inputColor: o.replace(/^#/, ''),
|
||
|
|
hsv: N(o),
|
||
|
|
}),
|
||
|
|
n
|
||
|
|
);
|
||
|
|
}
|
||
|
|
return (
|
||
|
|
Object(c.__extends)(t, e),
|
||
|
|
(t.prototype.render = function () {
|
||
|
|
var e = this.state,
|
||
|
|
t = e.color,
|
||
|
|
n = e.hsv,
|
||
|
|
r = e.inputColor;
|
||
|
|
return o.createElement(
|
||
|
|
'div',
|
||
|
|
{ className: x.container },
|
||
|
|
o.createElement(
|
||
|
|
'div',
|
||
|
|
{ className: x.form },
|
||
|
|
o.createElement('div', {
|
||
|
|
className: x.swatch,
|
||
|
|
style: { backgroundColor: t },
|
||
|
|
}),
|
||
|
|
o.createElement(
|
||
|
|
'div',
|
||
|
|
{ className: x.inputWrap },
|
||
|
|
o.createElement('span', { className: x.inputHash }, '#'),
|
||
|
|
o.createElement('input', {
|
||
|
|
type: 'text',
|
||
|
|
className: x.input,
|
||
|
|
value: r,
|
||
|
|
onChange: this._handleInput,
|
||
|
|
}),
|
||
|
|
),
|
||
|
|
o.createElement(
|
||
|
|
'div',
|
||
|
|
{ className: x.buttonWrap },
|
||
|
|
o.createElement(
|
||
|
|
S.Button,
|
||
|
|
{ size: 's', onClick: this._handleAddColor },
|
||
|
|
L,
|
||
|
|
),
|
||
|
|
),
|
||
|
|
),
|
||
|
|
o.createElement(
|
||
|
|
'div',
|
||
|
|
{ className: x.hueSaturationWrap },
|
||
|
|
o.createElement(j, {
|
||
|
|
className: x.saturation,
|
||
|
|
hsv: n,
|
||
|
|
onChange: this._handleHSV,
|
||
|
|
}),
|
||
|
|
o.createElement(T, {
|
||
|
|
className: x.hue,
|
||
|
|
hsv: n,
|
||
|
|
onChange: this._handleHSV,
|
||
|
|
}),
|
||
|
|
),
|
||
|
|
);
|
||
|
|
}),
|
||
|
|
t
|
||
|
|
);
|
||
|
|
})(o.PureComponent),
|
||
|
|
M = n('1Kfe'),
|
||
|
|
z = window.t('Add Custom Color', { context: 'Color Picker' }),
|
||
|
|
U = window.t('Opacity', { context: 'Color Picker' }),
|
||
|
|
W = (function (e) {
|
||
|
|
function t(t) {
|
||
|
|
var n = e.call(this, t) || this;
|
||
|
|
return (
|
||
|
|
(n._handleAddColor = function (e) {
|
||
|
|
n.setState({ isCustom: !1 }), n._onToggleCustom(!1);
|
||
|
|
var t = n.props.onAddColor;
|
||
|
|
t && t(e);
|
||
|
|
}),
|
||
|
|
(n._handleSelectColor = function (e) {
|
||
|
|
var t = n.props.onColorChange;
|
||
|
|
t && t(e);
|
||
|
|
}),
|
||
|
|
(n._handleCustomClick = function () {
|
||
|
|
n.setState({ isCustom: !0 }), n._onToggleCustom(!0);
|
||
|
|
}),
|
||
|
|
(n._handleOpacity = function (e) {
|
||
|
|
var t = n.props.onOpacityChange;
|
||
|
|
t && t(e);
|
||
|
|
}),
|
||
|
|
(n.state = { isCustom: !1 }),
|
||
|
|
n
|
||
|
|
);
|
||
|
|
}
|
||
|
|
return (
|
||
|
|
Object(c.__extends)(t, e),
|
||
|
|
(t.prototype.componentDidUpdate = function (e, t) {
|
||
|
|
e.selectOpacity !== this.props.selectOpacity &&
|
||
|
|
this.props.menu &&
|
||
|
|
this.props.menu.update();
|
||
|
|
}),
|
||
|
|
(t.prototype.render = function () {
|
||
|
|
var e = this.props,
|
||
|
|
t = e.color,
|
||
|
|
n = e.opacity,
|
||
|
|
r = e.selectCustom,
|
||
|
|
a = e.selectOpacity,
|
||
|
|
c = e.customColors,
|
||
|
|
s = 'number' == typeof n ? n : 1;
|
||
|
|
return this.state.isCustom
|
||
|
|
? o.createElement(D, {
|
||
|
|
color: t,
|
||
|
|
onSelect: this._handleSelectColor,
|
||
|
|
onAdd: this._handleAddColor,
|
||
|
|
})
|
||
|
|
: o.createElement(
|
||
|
|
'div',
|
||
|
|
{ className: M.container },
|
||
|
|
o.createElement(w, {
|
||
|
|
colors: _,
|
||
|
|
color: t,
|
||
|
|
onSelect: this._handleSelectColor,
|
||
|
|
}),
|
||
|
|
o.createElement(w, {
|
||
|
|
colors: b,
|
||
|
|
color: t,
|
||
|
|
onSelect: this._handleSelectColor,
|
||
|
|
}),
|
||
|
|
o.createElement('div', { className: M.separator }),
|
||
|
|
o.createElement(
|
||
|
|
w,
|
||
|
|
{
|
||
|
|
colors: c,
|
||
|
|
color: t,
|
||
|
|
onSelect: this._handleSelectColor,
|
||
|
|
},
|
||
|
|
r &&
|
||
|
|
o.createElement('div', {
|
||
|
|
className: i()(
|
||
|
|
M.customButton,
|
||
|
|
'apply-common-tooltip',
|
||
|
|
),
|
||
|
|
onClick: this._handleCustomClick,
|
||
|
|
title: z,
|
||
|
|
}),
|
||
|
|
),
|
||
|
|
a &&
|
||
|
|
o.createElement(
|
||
|
|
o.Fragment,
|
||
|
|
null,
|
||
|
|
o.createElement(
|
||
|
|
'div',
|
||
|
|
{ className: M.sectionTitle },
|
||
|
|
U,
|
||
|
|
),
|
||
|
|
o.createElement(E.a, {
|
||
|
|
color: t,
|
||
|
|
opacity: s,
|
||
|
|
onChange: this._handleOpacity,
|
||
|
|
}),
|
||
|
|
),
|
||
|
|
);
|
||
|
|
}),
|
||
|
|
(t.prototype._onToggleCustom = function (e) {
|
||
|
|
var t = this.props.onToggleCustom;
|
||
|
|
t && t(e);
|
||
|
|
}),
|
||
|
|
t
|
||
|
|
);
|
||
|
|
})(o.PureComponent),
|
||
|
|
A = n('PN6A');
|
||
|
|
function Y(e) {
|
||
|
|
var t = e.button,
|
||
|
|
n = e.children,
|
||
|
|
a = e.className,
|
||
|
|
i = e.onPopupClose,
|
||
|
|
d = Object(c.__rest)(e, [
|
||
|
|
'button',
|
||
|
|
'children',
|
||
|
|
'className',
|
||
|
|
'onPopupClose',
|
||
|
|
]),
|
||
|
|
h = Object(o.useState)(!1),
|
||
|
|
m = h[0],
|
||
|
|
v = h[1],
|
||
|
|
f = Object(o.useState)(!1),
|
||
|
|
_ = f[0],
|
||
|
|
g = f[1],
|
||
|
|
b = Object(p.a)(),
|
||
|
|
C = b[0],
|
||
|
|
y = b[1],
|
||
|
|
w = Object(o.useRef)(null);
|
||
|
|
return r.a.createElement(
|
||
|
|
'div',
|
||
|
|
{ className: a },
|
||
|
|
r.a.createElement(
|
||
|
|
'div',
|
||
|
|
{
|
||
|
|
tabIndex: e.disabled ? void 0 : -1,
|
||
|
|
ref: w,
|
||
|
|
onClick: E,
|
||
|
|
onFocus: y.onFocus,
|
||
|
|
onBlur: y.onBlur,
|
||
|
|
onKeyDown: S,
|
||
|
|
},
|
||
|
|
'function' == typeof t ? t(_, C) : t,
|
||
|
|
),
|
||
|
|
r.a.createElement(
|
||
|
|
u.a,
|
||
|
|
{
|
||
|
|
isOpened: _,
|
||
|
|
onClose: N,
|
||
|
|
position: function () {
|
||
|
|
var e = Object(s.ensureNotNull)(
|
||
|
|
w.current,
|
||
|
|
).getBoundingClientRect();
|
||
|
|
return { x: e.left, y: e.top + e.height };
|
||
|
|
},
|
||
|
|
doNotCloseOn: w.current,
|
||
|
|
onKeyDown: S,
|
||
|
|
},
|
||
|
|
r.a.createElement(A.a.Consumer, null, function (e) {
|
||
|
|
return r.a.createElement(
|
||
|
|
W,
|
||
|
|
Object(c.__assign)({}, d, { onToggleCustom: v, menu: e }),
|
||
|
|
);
|
||
|
|
}),
|
||
|
|
!m && n,
|
||
|
|
),
|
||
|
|
);
|
||
|
|
function E() {
|
||
|
|
e.disabled ||
|
||
|
|
(g(function (e) {
|
||
|
|
return !e;
|
||
|
|
}),
|
||
|
|
v(!1));
|
||
|
|
}
|
||
|
|
function S(e) {
|
||
|
|
switch (Object(l.hashFromEvent)(e)) {
|
||
|
|
case 27:
|
||
|
|
_ && (e.preventDefault(), N());
|
||
|
|
}
|
||
|
|
}
|
||
|
|
function N() {
|
||
|
|
E(), Object(s.ensureNotNull)(w.current).focus(), i && i();
|
||
|
|
}
|
||
|
|
}
|
||
|
|
var G = n('Vdly'),
|
||
|
|
R = n('FQhm');
|
||
|
|
function X() {
|
||
|
|
var e,
|
||
|
|
t,
|
||
|
|
n = Object(o.useState)(Object(G.getJSON)('pickerCustomColors', [])),
|
||
|
|
r = n[0],
|
||
|
|
a = n[1];
|
||
|
|
(e = 'add_new_custom_color'),
|
||
|
|
(t = function (e) {
|
||
|
|
return a(B(e, r));
|
||
|
|
}),
|
||
|
|
Object(o.useEffect)(
|
||
|
|
function () {
|
||
|
|
return (
|
||
|
|
R.subscribe(e, t, null),
|
||
|
|
function () {
|
||
|
|
R.unsubscribe(e, t, null);
|
||
|
|
}
|
||
|
|
);
|
||
|
|
},
|
||
|
|
[e, t],
|
||
|
|
);
|
||
|
|
var i = Object(o.useCallback)(
|
||
|
|
function (e) {
|
||
|
|
var t = e ? Object(d.parseRgb)(e) : null;
|
||
|
|
r.some(function (e) {
|
||
|
|
return (
|
||
|
|
null !== e &&
|
||
|
|
null !== t &&
|
||
|
|
Object(d.areEqualRgb)(Object(d.parseRgb)(e), t)
|
||
|
|
);
|
||
|
|
}) ||
|
||
|
|
(R.emit('add_new_custom_color', e),
|
||
|
|
Object(G.setJSON)('pickerCustomColors', B(e, r)));
|
||
|
|
},
|
||
|
|
[r],
|
||
|
|
);
|
||
|
|
return [r, i];
|
||
|
|
}
|
||
|
|
function B(e, t) {
|
||
|
|
var n = t.slice();
|
||
|
|
return n.push(e), n.length > 29 && n.shift(), n;
|
||
|
|
}
|
||
|
|
var H = n('Tmoa'),
|
||
|
|
q = n('0W35'),
|
||
|
|
J = n('95N5'),
|
||
|
|
F = Object(q.makeSwitchGroupItem)(
|
||
|
|
(function (e) {
|
||
|
|
function t() {
|
||
|
|
var t = (null !== e && e.apply(this, arguments)) || this;
|
||
|
|
return (
|
||
|
|
(t._onChange = function () {
|
||
|
|
t.props.onChange && t.props.onChange(t.props.value);
|
||
|
|
}),
|
||
|
|
t
|
||
|
|
);
|
||
|
|
}
|
||
|
|
return (
|
||
|
|
Object(c.__extends)(t, e),
|
||
|
|
(t.prototype.render = function () {
|
||
|
|
var e,
|
||
|
|
t,
|
||
|
|
n = this.props,
|
||
|
|
r = n.name,
|
||
|
|
i = n.checked,
|
||
|
|
c = n.value,
|
||
|
|
s = a(J.thicknessItem, (((e = {})[J.checked] = i), e)),
|
||
|
|
l = a(J.bar, (((t = {})[J.checked] = i), t)),
|
||
|
|
u = { borderTopWidth: parseInt(c) };
|
||
|
|
return o.createElement(
|
||
|
|
'div',
|
||
|
|
{ className: s },
|
||
|
|
o.createElement('input', {
|
||
|
|
type: 'radio',
|
||
|
|
className: J.radio,
|
||
|
|
name: r,
|
||
|
|
value: c,
|
||
|
|
onChange: this._onChange,
|
||
|
|
checked: i,
|
||
|
|
}),
|
||
|
|
o.createElement('div', { className: l, style: u }, ' '),
|
||
|
|
);
|
||
|
|
}),
|
||
|
|
t
|
||
|
|
);
|
||
|
|
})(o.PureComponent),
|
||
|
|
);
|
||
|
|
function Q(e) {
|
||
|
|
var t = e.name,
|
||
|
|
n = e.values,
|
||
|
|
r = e.selectedValues,
|
||
|
|
a = e.onChange,
|
||
|
|
i = n.map(function (e, t) {
|
||
|
|
return o.createElement(F, { key: t, value: e.toString() });
|
||
|
|
}),
|
||
|
|
c = r.map(function (e) {
|
||
|
|
return e.toString();
|
||
|
|
});
|
||
|
|
return o.createElement(
|
||
|
|
'div',
|
||
|
|
{ className: J.wrap },
|
||
|
|
o.createElement(
|
||
|
|
q.SwitchGroup,
|
||
|
|
{
|
||
|
|
name: t,
|
||
|
|
onChange: function (e) {
|
||
|
|
a(parseInt(e));
|
||
|
|
},
|
||
|
|
values: c,
|
||
|
|
},
|
||
|
|
i,
|
||
|
|
),
|
||
|
|
);
|
||
|
|
}
|
||
|
|
var K = n('85uA'),
|
||
|
|
Z = window.t('Thickness');
|
||
|
|
function V(e) {
|
||
|
|
return r.a.createElement(
|
||
|
|
'div',
|
||
|
|
{ className: K.thicknessContainer },
|
||
|
|
r.a.createElement('div', { className: K.thicknessTitle }, Z),
|
||
|
|
r.a.createElement(Q, {
|
||
|
|
name: 'color_picker_thickness_select',
|
||
|
|
onChange: e.onChange,
|
||
|
|
values: e.items,
|
||
|
|
selectedValues: [e.value],
|
||
|
|
}),
|
||
|
|
);
|
||
|
|
}
|
||
|
|
var $ = n('4bOu');
|
||
|
|
function ee(e) {
|
||
|
|
var t = e.className,
|
||
|
|
n = e.selectOpacity,
|
||
|
|
o = void 0 === n ? void 0 !== e.opacity : n,
|
||
|
|
a = e.thickness,
|
||
|
|
c = e.color,
|
||
|
|
s = e.disabled,
|
||
|
|
l = e.opacity,
|
||
|
|
u = void 0 === l ? 1 : l,
|
||
|
|
p = e.onColorChange,
|
||
|
|
d = e.onOpacityChange,
|
||
|
|
h = e.onThicknessChange,
|
||
|
|
m = e.thicknessItems,
|
||
|
|
v = e.onPopupClose,
|
||
|
|
f = X(),
|
||
|
|
_ = f[0],
|
||
|
|
g = f[1];
|
||
|
|
return r.a.createElement(
|
||
|
|
Y,
|
||
|
|
{
|
||
|
|
className: t,
|
||
|
|
disabled: s,
|
||
|
|
color: c,
|
||
|
|
selectOpacity: o,
|
||
|
|
opacity: u,
|
||
|
|
selectCustom: !0,
|
||
|
|
customColors: _,
|
||
|
|
onColorChange: p,
|
||
|
|
onOpacityChange: c ? d : void 0,
|
||
|
|
onAddColor: g,
|
||
|
|
button: function (e, t) {
|
||
|
|
var n = e || t,
|
||
|
|
o = n ? 'primary' : 'default';
|
||
|
|
return r.a.createElement(
|
||
|
|
'div',
|
||
|
|
{
|
||
|
|
className: i()(
|
||
|
|
$.colorPickerWrap,
|
||
|
|
$['intent-' + o],
|
||
|
|
$['border-thin'],
|
||
|
|
$['size-medium'],
|
||
|
|
n && $.highlight,
|
||
|
|
n && $.focused,
|
||
|
|
s && $.disabled,
|
||
|
|
),
|
||
|
|
'data-role': 'button',
|
||
|
|
'data-name': a
|
||
|
|
? 'color-with-thickness-select'
|
||
|
|
: 'color-select',
|
||
|
|
},
|
||
|
|
r.a.createElement(
|
||
|
|
'div',
|
||
|
|
{ className: i()($.colorPicker, s && $.disabled) },
|
||
|
|
c
|
||
|
|
? ((l = te(c, u)),
|
||
|
|
(p = u >= 0.95 && ne(c)),
|
||
|
|
r.a.createElement(
|
||
|
|
'div',
|
||
|
|
{ className: $.opacitySwatch },
|
||
|
|
r.a.createElement('div', {
|
||
|
|
style: { backgroundColor: l },
|
||
|
|
className: i()($.swatch, p && $.white),
|
||
|
|
}),
|
||
|
|
))
|
||
|
|
: r.a.createElement(
|
||
|
|
'div',
|
||
|
|
{ className: $.placeholderContainer },
|
||
|
|
r.a.createElement('div', { className: $.placeholder }),
|
||
|
|
),
|
||
|
|
a &&
|
||
|
|
r.a.createElement('span', {
|
||
|
|
className: i()($.colorLine, ne(c) && $.white),
|
||
|
|
style: { height: a, backgroundColor: te(c, u) },
|
||
|
|
}),
|
||
|
|
),
|
||
|
|
n && r.a.createElement('span', { className: $.shadow }),
|
||
|
|
);
|
||
|
|
var l, p;
|
||
|
|
},
|
||
|
|
onPopupClose: v,
|
||
|
|
},
|
||
|
|
a &&
|
||
|
|
m &&
|
||
|
|
r.a.createElement(V, {
|
||
|
|
value: a,
|
||
|
|
items: m,
|
||
|
|
onChange: function (e) {
|
||
|
|
h && h(e);
|
||
|
|
},
|
||
|
|
}),
|
||
|
|
);
|
||
|
|
}
|
||
|
|
function te(e, t) {
|
||
|
|
return e
|
||
|
|
? Object(H.generateColor)(e, Object(H.alphaToTransparency)(t))
|
||
|
|
: '#000000';
|
||
|
|
}
|
||
|
|
function ne(e) {
|
||
|
|
return !!e && e.toLowerCase() === m;
|
||
|
|
}
|
||
|
|
n.d(t, 'a', function () {
|
||
|
|
return ee;
|
||
|
|
});
|
||
|
|
},
|
||
|
|
'85uA': function (e, t, n) {
|
||
|
|
e.exports = {
|
||
|
|
thicknessContainer: 'thicknessContainer-1lrdH7bz',
|
||
|
|
thicknessTitle: 'thicknessTitle-2nZV_6CD',
|
||
|
|
};
|
||
|
|
},
|
||
|
|
'95N5': function (e, t, n) {
|
||
|
|
e.exports = {
|
||
|
|
wrap: 'wrap-3KIz6IQG',
|
||
|
|
thicknessItem: 'thicknessItem-1D40arGe',
|
||
|
|
checked: 'checked-pDy7EtmX',
|
||
|
|
radio: 'radio-mk150mXO',
|
||
|
|
bar: 'bar-3l4jwcsX',
|
||
|
|
};
|
||
|
|
},
|
||
|
|
CHgb: function (e, t, n) {
|
||
|
|
'use strict';
|
||
|
|
n.d(t, 'c', function () {
|
||
|
|
return p;
|
||
|
|
}),
|
||
|
|
n.d(t, 'a', function () {
|
||
|
|
return d;
|
||
|
|
}),
|
||
|
|
n.d(t, 'b', function () {
|
||
|
|
return h;
|
||
|
|
});
|
||
|
|
var o = n('mrSG'),
|
||
|
|
r = n('q1tI'),
|
||
|
|
a = n.n(r),
|
||
|
|
i = n('TSYQ'),
|
||
|
|
c = n.n(i),
|
||
|
|
s = n('H172'),
|
||
|
|
l = n('Iivm'),
|
||
|
|
u = n('+ByK');
|
||
|
|
function p(e) {
|
||
|
|
var t = e.menuItemClassName,
|
||
|
|
n = Object(o.__rest)(e, ['menuItemClassName']);
|
||
|
|
return a.a.createElement(
|
||
|
|
s.a,
|
||
|
|
Object(o.__assign)({}, n, { menuItemClassName: c()(t, u.itemWrap) }),
|
||
|
|
);
|
||
|
|
}
|
||
|
|
function d(e) {
|
||
|
|
return a.a.createElement(
|
||
|
|
'div',
|
||
|
|
{ className: c()(u.item, u.selected) },
|
||
|
|
a.a.createElement(l.Icon, { className: u.icon, icon: e.icon }),
|
||
|
|
);
|
||
|
|
}
|
||
|
|
function h(e) {
|
||
|
|
return a.a.createElement(
|
||
|
|
'div',
|
||
|
|
{ className: u.item },
|
||
|
|
a.a.createElement(l.Icon, {
|
||
|
|
className: c()(u.icon, e.iconClassName),
|
||
|
|
icon: e.icon,
|
||
|
|
}),
|
||
|
|
a.a.createElement('div', { className: u.label }, e.label),
|
||
|
|
);
|
||
|
|
}
|
||
|
|
},
|
||
|
|
DXuF: function (e, t, n) {
|
||
|
|
e.exports = {
|
||
|
|
swatches: 'swatches-2NO2y7Xs',
|
||
|
|
swatch: 'swatch-CMyFZXry',
|
||
|
|
empty: 'empty-1lteEy1B',
|
||
|
|
white: 'white-RBcZELAh',
|
||
|
|
selected: 'selected-3mQR-gqr',
|
||
|
|
};
|
||
|
|
},
|
||
|
|
HWhk: function (e, t) {
|
||
|
|
e.exports =
|
||
|
|
'<svg xmlns="http://www.w3.org/2000/svg" width="28" height="28" fill="none"><path fill="currentColor" fillRule="evenodd" clipRule="evenodd" d="M7.5 13a1.5 1.5 0 1 0 0 3 1.5 1.5 0 0 0 0-3zM5 14.5a2.5 2.5 0 1 1 5 0 2.5 2.5 0 0 1-5 0zm9.5-1.5a1.5 1.5 0 1 0 0 3 1.5 1.5 0 0 0 0-3zM12 14.5a2.5 2.5 0 1 1 5 0 2.5 2.5 0 0 1-5 0zm9.5-1.5a1.5 1.5 0 1 0 0 3 1.5 1.5 0 0 0 0-3zM19 14.5a2.5 2.5 0 1 1 5 0 2.5 2.5 0 0 1-5 0z"/></svg>';
|
||
|
|
},
|
||
|
|
J4oI: function (e, t, n) {
|
||
|
|
e.exports = { lineStyleSelect: 'lineStyleSelect-1s1ap44b' };
|
||
|
|
},
|
||
|
|
KacW: function (e, t, n) {
|
||
|
|
'use strict';
|
||
|
|
n.d(t, 'a', function () {
|
||
|
|
return v;
|
||
|
|
});
|
||
|
|
var o = n('mrSG'),
|
||
|
|
r = (n('YFKU'), n('q1tI')),
|
||
|
|
a = n.n(r),
|
||
|
|
i = n('TSYQ'),
|
||
|
|
c = n.n(i),
|
||
|
|
s = n('8Uy/'),
|
||
|
|
l = n('CHgb'),
|
||
|
|
u = n('bQEj'),
|
||
|
|
p = n('UXdH'),
|
||
|
|
d = n('ZSM+'),
|
||
|
|
h = n('J4oI'),
|
||
|
|
m = [
|
||
|
|
{ type: s.LINESTYLE_SOLID, icon: u, label: window.t('Line') },
|
||
|
|
{ type: s.LINESTYLE_DASHED, icon: p, label: window.t('Dashed Line') },
|
||
|
|
{ type: s.LINESTYLE_DOTTED, icon: d, label: window.t('Dotted Line') },
|
||
|
|
];
|
||
|
|
var v = (function (e) {
|
||
|
|
function t() {
|
||
|
|
return (null !== e && e.apply(this, arguments)) || this;
|
||
|
|
}
|
||
|
|
return (
|
||
|
|
Object(o.__extends)(t, e),
|
||
|
|
(t.prototype.render = function () {
|
||
|
|
var e,
|
||
|
|
t,
|
||
|
|
n = this.props,
|
||
|
|
r = n.lineStyle,
|
||
|
|
i = n.className,
|
||
|
|
s = n.lineStyleChange,
|
||
|
|
u = n.disabled,
|
||
|
|
p = n.additionalItems,
|
||
|
|
d = n.allowedLineStyles,
|
||
|
|
v =
|
||
|
|
((e = d),
|
||
|
|
(t = Object(o.__spreadArrays)(m)),
|
||
|
|
void 0 !== e &&
|
||
|
|
(t = t.filter(function (t) {
|
||
|
|
return e.includes(t.type);
|
||
|
|
})),
|
||
|
|
t.map(function (e) {
|
||
|
|
return {
|
||
|
|
value: e.type,
|
||
|
|
selectedContent: a.a.createElement(l.a, { icon: e.icon }),
|
||
|
|
content: a.a.createElement(l.b, {
|
||
|
|
icon: e.icon,
|
||
|
|
label: e.label,
|
||
|
|
}),
|
||
|
|
};
|
||
|
|
}));
|
||
|
|
return (
|
||
|
|
p &&
|
||
|
|
(v = Object(o.__spreadArrays)(
|
||
|
|
[{ readonly: !0, content: p }],
|
||
|
|
v,
|
||
|
|
)),
|
||
|
|
a.a.createElement(l.c, {
|
||
|
|
disabled: u,
|
||
|
|
className: c()(h.lineStyleSelect, i),
|
||
|
|
hideArrowButton: !0,
|
||
|
|
items: v,
|
||
|
|
value: r,
|
||
|
|
onChange: s,
|
||
|
|
'data-name': 'line-style-select',
|
||
|
|
})
|
||
|
|
);
|
||
|
|
}),
|
||
|
|
t
|
||
|
|
);
|
||
|
|
})(a.a.PureComponent);
|
||
|
|
},
|
||
|
|
Oqo1: function (e, t, n) {
|
||
|
|
e.exports = {
|
||
|
|
opacity: 'opacity-2aYjtVUz',
|
||
|
|
opacitySlider: 'opacitySlider-2S5vLqQZ',
|
||
|
|
opacitySliderGradient: 'opacitySliderGradient-1uUWtQAG',
|
||
|
|
pointer: 'pointer-3pBhp8nL',
|
||
|
|
dragged: 'dragged-1FWLoCMd',
|
||
|
|
opacityPointerWrap: 'opacityPointerWrap-133eLPOE',
|
||
|
|
opacityInputWrap: 'opacityInputWrap-1okRhpq9',
|
||
|
|
opacityInput: 'opacityInput-1A9bqplo',
|
||
|
|
opacityInputPercent: 'opacityInputPercent-n0mDvs0P',
|
||
|
|
};
|
||
|
|
},
|
||
|
|
U1eG: function (e, t, n) {
|
||
|
|
'use strict';
|
||
|
|
n.d(t, 'a', function () {
|
||
|
|
return l;
|
||
|
|
});
|
||
|
|
var o = n('mrSG'),
|
||
|
|
r = n('q1tI'),
|
||
|
|
a = n('TSYQ'),
|
||
|
|
i = n('Eyy1'),
|
||
|
|
c = n('Hr11'),
|
||
|
|
s = n('Oqo1'),
|
||
|
|
l = (function (e) {
|
||
|
|
function t(t) {
|
||
|
|
var n = e.call(this, t) || this;
|
||
|
|
return (
|
||
|
|
(n._container = null),
|
||
|
|
(n._pointer = null),
|
||
|
|
(n._raf = null),
|
||
|
|
(n._refContainer = function (e) {
|
||
|
|
n._container = e;
|
||
|
|
}),
|
||
|
|
(n._refPointer = function (e) {
|
||
|
|
n._pointer = e;
|
||
|
|
}),
|
||
|
|
(n._handlePosition = function (e) {
|
||
|
|
null === n._raf &&
|
||
|
|
(n._raf = requestAnimationFrame(function () {
|
||
|
|
var t = Object(i.ensureNotNull)(n._container),
|
||
|
|
o = Object(i.ensureNotNull)(n._pointer),
|
||
|
|
r = t.getBoundingClientRect(),
|
||
|
|
a = o.offsetWidth,
|
||
|
|
s = e.clientX - a / 2 - r.left,
|
||
|
|
l = Object(c.clamp)(s / (r.width - a), 0, 1);
|
||
|
|
n.setState({
|
||
|
|
inputOpacity: Math.round(100 * l).toString(),
|
||
|
|
}),
|
||
|
|
n.props.onChange(l),
|
||
|
|
(n._raf = null);
|
||
|
|
}));
|
||
|
|
}),
|
||
|
|
(n._onSliderClick = function (e) {
|
||
|
|
n._handlePosition(e.nativeEvent), n._dragSubscribe();
|
||
|
|
}),
|
||
|
|
(n._mouseUp = function (e) {
|
||
|
|
n.setState({ isPointerDragged: !1 }),
|
||
|
|
n._dragUnsubscribe(),
|
||
|
|
n._handlePosition(e);
|
||
|
|
}),
|
||
|
|
(n._mouseMove = function (e) {
|
||
|
|
n.setState({ isPointerDragged: !0 }), n._handlePosition(e);
|
||
|
|
}),
|
||
|
|
(n._onTouchStart = function (e) {
|
||
|
|
n._handlePosition(e.nativeEvent.touches[0]);
|
||
|
|
}),
|
||
|
|
(n._handleTouch = function (e) {
|
||
|
|
n.setState({ isPointerDragged: !0 }),
|
||
|
|
n._handlePosition(e.nativeEvent.touches[0]);
|
||
|
|
}),
|
||
|
|
(n._handleTouchEnd = function () {
|
||
|
|
n.setState({ isPointerDragged: !1 });
|
||
|
|
}),
|
||
|
|
(n._handleInput = function (e) {
|
||
|
|
var t = e.currentTarget.value,
|
||
|
|
o = Number(t) / 100;
|
||
|
|
n.setState({ inputOpacity: t }),
|
||
|
|
Number.isNaN(o) || o > 1 || n.props.onChange(o);
|
||
|
|
}),
|
||
|
|
(n.state = {
|
||
|
|
inputOpacity: Math.round(100 * t.opacity).toString(),
|
||
|
|
isPointerDragged: !1,
|
||
|
|
}),
|
||
|
|
n
|
||
|
|
);
|
||
|
|
}
|
||
|
|
return (
|
||
|
|
Object(o.__extends)(t, e),
|
||
|
|
(t.prototype.componentWillUnmount = function () {
|
||
|
|
null !== this._raf &&
|
||
|
|
(cancelAnimationFrame(this._raf), (this._raf = null)),
|
||
|
|
this._dragUnsubscribe();
|
||
|
|
}),
|
||
|
|
(t.prototype.render = function () {
|
||
|
|
var e = this.props,
|
||
|
|
t = e.color,
|
||
|
|
n = e.opacity,
|
||
|
|
o = e.hideInput,
|
||
|
|
i = this.state,
|
||
|
|
c = i.inputOpacity,
|
||
|
|
l = i.isPointerDragged,
|
||
|
|
u = { color: t || void 0 };
|
||
|
|
return r.createElement(
|
||
|
|
'div',
|
||
|
|
{ className: s.opacity },
|
||
|
|
r.createElement(
|
||
|
|
'div',
|
||
|
|
{
|
||
|
|
className: s.opacitySlider,
|
||
|
|
style: u,
|
||
|
|
ref: this._refContainer,
|
||
|
|
onMouseDown: this._onSliderClick,
|
||
|
|
onTouchStart: this._onTouchStart,
|
||
|
|
onTouchMove: this._handleTouch,
|
||
|
|
onTouchEnd: this._handleTouchEnd,
|
||
|
|
},
|
||
|
|
r.createElement('div', {
|
||
|
|
className: s.opacitySliderGradient,
|
||
|
|
style: {
|
||
|
|
backgroundImage:
|
||
|
|
'linear-gradient(90deg, transparent, ' + t + ')',
|
||
|
|
},
|
||
|
|
}),
|
||
|
|
r.createElement(
|
||
|
|
'div',
|
||
|
|
{ className: s.opacityPointerWrap },
|
||
|
|
r.createElement('div', {
|
||
|
|
className: a(s.pointer, l && s.dragged),
|
||
|
|
style: { left: 100 * n + '%' },
|
||
|
|
ref: this._refPointer,
|
||
|
|
}),
|
||
|
|
),
|
||
|
|
),
|
||
|
|
!o &&
|
||
|
|
r.createElement(
|
||
|
|
'div',
|
||
|
|
{ className: s.opacityInputWrap },
|
||
|
|
r.createElement('input', {
|
||
|
|
type: 'text',
|
||
|
|
className: s.opacityInput,
|
||
|
|
value: c,
|
||
|
|
onChange: this._handleInput,
|
||
|
|
}),
|
||
|
|
r.createElement(
|
||
|
|
'span',
|
||
|
|
{ className: s.opacityInputPercent },
|
||
|
|
'%',
|
||
|
|
),
|
||
|
|
),
|
||
|
|
);
|
||
|
|
}),
|
||
|
|
(t.prototype._dragSubscribe = function () {
|
||
|
|
var e = Object(i.ensureNotNull)(this._container).ownerDocument;
|
||
|
|
e &&
|
||
|
|
(e.addEventListener('mouseup', this._mouseUp),
|
||
|
|
e.addEventListener('mousemove', this._mouseMove));
|
||
|
|
}),
|
||
|
|
(t.prototype._dragUnsubscribe = function () {
|
||
|
|
var e = Object(i.ensureNotNull)(this._container).ownerDocument;
|
||
|
|
e &&
|
||
|
|
(e.removeEventListener('mousemove', this._mouseMove),
|
||
|
|
e.removeEventListener('mouseup', this._mouseUp));
|
||
|
|
}),
|
||
|
|
t
|
||
|
|
);
|
||
|
|
})(r.PureComponent);
|
||
|
|
},
|
||
|
|
UXdH: function (e, t) {
|
||
|
|
e.exports =
|
||
|
|
'<svg xmlns="http://www.w3.org/2000/svg" width="28" height="28"><path fill="currentColor" d="M4 13h5v1H4v-1zM12 13h5v1h-5v-1zM20 13h5v1h-5v-1z"/></svg>';
|
||
|
|
},
|
||
|
|
UXjO: function (e, t, n) {
|
||
|
|
'use strict';
|
||
|
|
n.d(t, 'a', function () {
|
||
|
|
return p;
|
||
|
|
});
|
||
|
|
var o = n('mrSG'),
|
||
|
|
r = n('q1tI'),
|
||
|
|
a = n.n(r),
|
||
|
|
i = n('TSYQ'),
|
||
|
|
c = n.n(i),
|
||
|
|
s = n('H172'),
|
||
|
|
l = n('QpNh'),
|
||
|
|
u = n('z1Uu');
|
||
|
|
function p(e) {
|
||
|
|
var t,
|
||
|
|
n = e.fontSize,
|
||
|
|
r = e.fontSizes,
|
||
|
|
i = void 0 === r ? [] : r,
|
||
|
|
p = e.className,
|
||
|
|
d = e.disabled,
|
||
|
|
h = e.fontSizeChange;
|
||
|
|
return a.a.createElement(
|
||
|
|
s.a,
|
||
|
|
Object(o.__assign)(
|
||
|
|
{
|
||
|
|
disabled: d,
|
||
|
|
className: c()(p, u.defaultSelect),
|
||
|
|
menuClassName: u.defaultSelect,
|
||
|
|
items:
|
||
|
|
((t = i),
|
||
|
|
t.map(function (e) {
|
||
|
|
return { value: e.value, content: e.title };
|
||
|
|
})),
|
||
|
|
value: n,
|
||
|
|
onChange: h,
|
||
|
|
},
|
||
|
|
Object(l.a)(e),
|
||
|
|
),
|
||
|
|
);
|
||
|
|
}
|
||
|
|
},
|
||
|
|
'ZSM+': function (e, t) {
|
||
|
|
e.exports =
|
||
|
|
'<svg xmlns="http://www.w3.org/2000/svg" width="28" height="28" fill="currentColor"><circle cx="9" cy="14" r="1"/><circle cx="4" cy="14" r="1"/><circle cx="14" cy="14" r="1"/><circle cx="19" cy="14" r="1"/><circle cx="24" cy="14" r="1"/></svg>';
|
||
|
|
},
|
||
|
|
bQEj: function (e, t) {
|
||
|
|
e.exports =
|
||
|
|
'<svg xmlns="http://www.w3.org/2000/svg" width="28" height="28"><path stroke="currentColor" d="M4 13.5h20"/></svg>';
|
||
|
|
},
|
||
|
|
'jpE+': function (e, t, n) {
|
||
|
|
e.exports = {
|
||
|
|
hue: 'hue-2mlXxlkM',
|
||
|
|
pointer: 'pointer-3fNcCimp',
|
||
|
|
pointerContainer: 'pointerContainer-1T_sOwrr',
|
||
|
|
};
|
||
|
|
},
|
||
|
|
lY1a: function (e, t, n) {
|
||
|
|
e.exports = {
|
||
|
|
saturation: 'saturation-2SLmW8C-',
|
||
|
|
pointer: 'pointer-2fX2g8ap',
|
||
|
|
};
|
||
|
|
},
|
||
|
|
uJfL: function (e, t, n) {
|
||
|
|
e.exports = {
|
||
|
|
container: 'container-1-OmVBa-',
|
||
|
|
form: 'form-1PwJY7C7',
|
||
|
|
swatch: 'swatch-1yekatxU',
|
||
|
|
inputWrap: 'inputWrap-11zHN5-G',
|
||
|
|
inputHash: 'inputHash-2IZ-P-A4',
|
||
|
|
input: 'input-35LrVJJj',
|
||
|
|
buttonWrap: 'buttonWrap-37bmOXG9',
|
||
|
|
hueSaturationWrap: 'hueSaturationWrap-2qtz1WJa',
|
||
|
|
saturation: 'saturation-3duvfnxs',
|
||
|
|
hue: 'hue-31zIOKyJ',
|
||
|
|
};
|
||
|
|
},
|
||
|
|
z1Uu: function (e, t, n) {
|
||
|
|
e.exports = { defaultSelect: 'defaultSelect-2RDyqwu4' };
|
||
|
|
},
|
||
|
|
},
|
||
|
|
]);
|