@festo-ui/react 9.0.0-dev.681 → 9.0.0-dev.683
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/index.css +1 -14
- package/index.d.ts +0 -5
- package/index.js +0 -5
- package/node/index.js +0 -35
- package/package.json +1 -6
- package/508.bundle.js +0 -1
- package/lib/forms/color-indicator/ColorIndicator.d.ts +0 -11
- package/lib/forms/color-indicator/ColorIndicator.js +0 -119
- package/lib/forms/color-picker/ColorHelper.d.ts +0 -9
- package/lib/forms/color-picker/ColorHelper.js +0 -140
- package/lib/forms/color-picker/ColorPicker.d.ts +0 -14
- package/lib/forms/color-picker/ColorPicker.js +0 -545
- package/lib/forms/date-picker/DatePicker.d.ts +0 -25
- package/lib/forms/date-picker/DatePicker.js +0 -155
- package/lib/forms/date-range-picker/DateRangePicker.d.ts +0 -19
- package/lib/forms/date-range-picker/DateRangePicker.js +0 -135
- package/lib/forms/text-editor/TextEditor.d.ts +0 -29
- package/lib/forms/text-editor/TextEditor.js +0 -256
- package/lib/forms/text-editor/TextEditorButton.d.ts +0 -14
- package/lib/forms/text-editor/TextEditorButton.js +0 -80
- package/node/lib/forms/color-indicator/ColorIndicator.js +0 -128
- package/node/lib/forms/color-picker/ColorHelper.js +0 -147
- package/node/lib/forms/color-picker/ColorPicker.js +0 -552
- package/node/lib/forms/date-picker/DatePicker.js +0 -162
- package/node/lib/forms/date-range-picker/DateRangePicker.js +0 -142
- package/node/lib/forms/text-editor/TextEditor.js +0 -265
- package/node/lib/forms/text-editor/TextEditorButton.js +0 -87
|
@@ -1,128 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
|
|
3
|
-
Object.defineProperty(exports, "__esModule", {
|
|
4
|
-
value: true
|
|
5
|
-
});
|
|
6
|
-
exports.default = void 0;
|
|
7
|
-
var _react = _interopRequireWildcard(require("react"));
|
|
8
|
-
var _classnames = _interopRequireDefault(require("classnames"));
|
|
9
|
-
var _Popover = _interopRequireDefault(require("../../components/popovers/popover/Popover.js"));
|
|
10
|
-
var _jsxRuntime = require("react/jsx-runtime");
|
|
11
|
-
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
|
|
12
|
-
function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
|
|
13
|
-
function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
|
|
14
|
-
function ColorIndicator(_ref) {
|
|
15
|
-
let {
|
|
16
|
-
text,
|
|
17
|
-
label,
|
|
18
|
-
color,
|
|
19
|
-
className,
|
|
20
|
-
showPopOver = false,
|
|
21
|
-
children,
|
|
22
|
-
disabled
|
|
23
|
-
} = _ref;
|
|
24
|
-
const classes = (0, _classnames.default)("fwe-color-indicator", className, disabled);
|
|
25
|
-
const [isEditorOpen, setEditorOpen] = (0, _react.useState)(false);
|
|
26
|
-
function getBorderColor() {
|
|
27
|
-
if (!color || color.toUpperCase() === "#FFFFFF" || color.toUpperCase() === "#F0F2F3") {
|
|
28
|
-
return "#b6bec6"; // = $control-border
|
|
29
|
-
}
|
|
30
|
-
return color;
|
|
31
|
-
}
|
|
32
|
-
const colorBox = /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
|
|
33
|
-
className: "fwe-color-box",
|
|
34
|
-
style: {
|
|
35
|
-
background: color,
|
|
36
|
-
borderColor: getBorderColor()
|
|
37
|
-
},
|
|
38
|
-
children: !color && /*#__PURE__*/(0, _jsxRuntime.jsxs)("svg", {
|
|
39
|
-
className: "fwe-no-color-pattern",
|
|
40
|
-
version: "1.1",
|
|
41
|
-
xmlns: "http://www.w3.org/2000/svg",
|
|
42
|
-
xmlnsXlink: "http://www.w3.org/1999/xlink",
|
|
43
|
-
id: "canvas1",
|
|
44
|
-
width: "18",
|
|
45
|
-
height: "18",
|
|
46
|
-
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("defs", {
|
|
47
|
-
children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("pattern", {
|
|
48
|
-
id: "bwsquare2px",
|
|
49
|
-
width: "4",
|
|
50
|
-
height: "4",
|
|
51
|
-
patternUnits: "userSpaceOnUse",
|
|
52
|
-
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("rect", {
|
|
53
|
-
x: "0",
|
|
54
|
-
y: "0",
|
|
55
|
-
width: "2",
|
|
56
|
-
height: "2",
|
|
57
|
-
stroke: "none",
|
|
58
|
-
fill: "#ffffff"
|
|
59
|
-
}), /*#__PURE__*/(0, _jsxRuntime.jsx)("rect", {
|
|
60
|
-
x: "2",
|
|
61
|
-
y: "0",
|
|
62
|
-
width: "2",
|
|
63
|
-
height: "2",
|
|
64
|
-
stroke: "none",
|
|
65
|
-
fill: "#e2e5e8"
|
|
66
|
-
}), /*#__PURE__*/(0, _jsxRuntime.jsx)("rect", {
|
|
67
|
-
x: "0",
|
|
68
|
-
y: "2",
|
|
69
|
-
width: "2",
|
|
70
|
-
height: "2",
|
|
71
|
-
stroke: "none",
|
|
72
|
-
fill: "#e2e5e8"
|
|
73
|
-
}), /*#__PURE__*/(0, _jsxRuntime.jsx)("rect", {
|
|
74
|
-
x: "2",
|
|
75
|
-
y: "2",
|
|
76
|
-
width: "2",
|
|
77
|
-
height: "2",
|
|
78
|
-
stroke: "none",
|
|
79
|
-
fill: "#ffffff"
|
|
80
|
-
})]
|
|
81
|
-
})
|
|
82
|
-
}), /*#__PURE__*/(0, _jsxRuntime.jsx)("rect", {
|
|
83
|
-
x: "0",
|
|
84
|
-
y: "0",
|
|
85
|
-
rx: "0",
|
|
86
|
-
ry: "0",
|
|
87
|
-
width: "18",
|
|
88
|
-
height: "18",
|
|
89
|
-
fill: "url(#bwsquare2px)",
|
|
90
|
-
strokeWidth: "0"
|
|
91
|
-
})]
|
|
92
|
-
})
|
|
93
|
-
});
|
|
94
|
-
const wrapperProperties = showPopOver ? {
|
|
95
|
-
onClick: () => setEditorOpen(prevOpen => !prevOpen)
|
|
96
|
-
} : {};
|
|
97
|
-
const wrapper = wrapperChildren => /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
|
|
98
|
-
className: classes,
|
|
99
|
-
...wrapperProperties,
|
|
100
|
-
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
|
|
101
|
-
style: {
|
|
102
|
-
opacity: isEditorOpen ? 0 : 1
|
|
103
|
-
},
|
|
104
|
-
className: "fwe-color-label",
|
|
105
|
-
children: label
|
|
106
|
-
}), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
|
|
107
|
-
className: "fwe-color-container",
|
|
108
|
-
children: [wrapperChildren, " ", text && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
|
|
109
|
-
className: "fwe-color-indicator-text",
|
|
110
|
-
children: text
|
|
111
|
-
}), " "]
|
|
112
|
-
})]
|
|
113
|
-
});
|
|
114
|
-
return showPopOver ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_Popover.default, {
|
|
115
|
-
containerClassName: "fwe-popover-container--color-indicator",
|
|
116
|
-
position: "top",
|
|
117
|
-
flip: false,
|
|
118
|
-
wrapper: wrapper,
|
|
119
|
-
popoverContent: children,
|
|
120
|
-
open: isEditorOpen,
|
|
121
|
-
onStatusChange: setEditorOpen,
|
|
122
|
-
stopPropagation: true,
|
|
123
|
-
children: colorBox
|
|
124
|
-
}) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_jsxRuntime.Fragment, {
|
|
125
|
-
children: wrapper(colorBox)
|
|
126
|
-
});
|
|
127
|
-
}
|
|
128
|
-
var _default = exports.default = ColorIndicator;
|
|
@@ -1,147 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
|
|
3
|
-
Object.defineProperty(exports, "__esModule", {
|
|
4
|
-
value: true
|
|
5
|
-
});
|
|
6
|
-
exports.default = void 0;
|
|
7
|
-
class ColorHelper {
|
|
8
|
-
// based on: https://gist.github.com/mjackson/5311256
|
|
9
|
-
static rgbToHsv(rgb) {
|
|
10
|
-
if (!rgb) {
|
|
11
|
-
return undefined;
|
|
12
|
-
}
|
|
13
|
-
const r = this.limitToByte(rgb.r) / 255;
|
|
14
|
-
const g = this.limitToByte(rgb.g) / 255;
|
|
15
|
-
const b = this.limitToByte(rgb.b) / 255;
|
|
16
|
-
const max = Math.max(r, g, b);
|
|
17
|
-
const min = Math.min(r, g, b);
|
|
18
|
-
let h = max;
|
|
19
|
-
let s = max;
|
|
20
|
-
const v = max;
|
|
21
|
-
const d = max - min;
|
|
22
|
-
s = max === 0 ? 0 : d / max;
|
|
23
|
-
if (max === min) {
|
|
24
|
-
h = 0; // achromatic
|
|
25
|
-
} else {
|
|
26
|
-
switch (max) {
|
|
27
|
-
case r:
|
|
28
|
-
h = (g - b) / d + (g < b ? 6 : 0);
|
|
29
|
-
break;
|
|
30
|
-
case g:
|
|
31
|
-
h = (b - r) / d + 2;
|
|
32
|
-
break;
|
|
33
|
-
case b:
|
|
34
|
-
h = (r - g) / d + 4;
|
|
35
|
-
break;
|
|
36
|
-
default:
|
|
37
|
-
// no other option
|
|
38
|
-
}
|
|
39
|
-
h /= 6;
|
|
40
|
-
}
|
|
41
|
-
return {
|
|
42
|
-
h,
|
|
43
|
-
s,
|
|
44
|
-
v
|
|
45
|
-
};
|
|
46
|
-
}
|
|
47
|
-
|
|
48
|
-
// based on: https://gist.github.com/mjackson/5311256
|
|
49
|
-
static hsvToRgb(_hsv) {
|
|
50
|
-
const hsv = _hsv;
|
|
51
|
-
hsv.h = this.limitToOne(_hsv.h);
|
|
52
|
-
hsv.s = this.limitToOne(_hsv.s);
|
|
53
|
-
hsv.v = this.limitToOne(_hsv.v);
|
|
54
|
-
let r = 0;
|
|
55
|
-
let g = 0;
|
|
56
|
-
let b = 0;
|
|
57
|
-
const i = Math.floor(hsv.h * 6);
|
|
58
|
-
const f = hsv.h * 6 - i;
|
|
59
|
-
const p = hsv.v * (1 - hsv.s);
|
|
60
|
-
const q = hsv.v * (1 - f * hsv.s);
|
|
61
|
-
const t = hsv.v * (1 - (1 - f) * hsv.s);
|
|
62
|
-
switch (i % 6) {
|
|
63
|
-
case 0:
|
|
64
|
-
r = hsv.v;
|
|
65
|
-
g = t;
|
|
66
|
-
b = p;
|
|
67
|
-
break;
|
|
68
|
-
case 1:
|
|
69
|
-
r = q;
|
|
70
|
-
g = hsv.v;
|
|
71
|
-
b = p;
|
|
72
|
-
break;
|
|
73
|
-
case 2:
|
|
74
|
-
r = p;
|
|
75
|
-
g = hsv.v;
|
|
76
|
-
b = t;
|
|
77
|
-
break;
|
|
78
|
-
case 3:
|
|
79
|
-
r = p;
|
|
80
|
-
g = q;
|
|
81
|
-
b = hsv.v;
|
|
82
|
-
break;
|
|
83
|
-
case 4:
|
|
84
|
-
r = t;
|
|
85
|
-
g = p;
|
|
86
|
-
b = hsv.v;
|
|
87
|
-
break;
|
|
88
|
-
case 5:
|
|
89
|
-
r = hsv.v;
|
|
90
|
-
g = p;
|
|
91
|
-
b = q;
|
|
92
|
-
break;
|
|
93
|
-
default:
|
|
94
|
-
// no other option
|
|
95
|
-
}
|
|
96
|
-
return {
|
|
97
|
-
r: this.limitToByte(r * 255),
|
|
98
|
-
g: this.limitToByte(g * 255),
|
|
99
|
-
b: this.limitToByte(b * 255)
|
|
100
|
-
};
|
|
101
|
-
}
|
|
102
|
-
static limitToByte(num) {
|
|
103
|
-
if (num <= 0) {
|
|
104
|
-
return 0;
|
|
105
|
-
}
|
|
106
|
-
if (num >= 255) {
|
|
107
|
-
return 255;
|
|
108
|
-
}
|
|
109
|
-
return num;
|
|
110
|
-
}
|
|
111
|
-
static limitToOne(num) {
|
|
112
|
-
if (num <= 0) {
|
|
113
|
-
return 0;
|
|
114
|
-
}
|
|
115
|
-
if (num >= 1) {
|
|
116
|
-
return 1;
|
|
117
|
-
}
|
|
118
|
-
return num;
|
|
119
|
-
}
|
|
120
|
-
static numberToHex(rgb) {
|
|
121
|
-
let hex = Math.round(rgb).toString(16);
|
|
122
|
-
if (hex.length < 2) {
|
|
123
|
-
hex = `0${hex}`;
|
|
124
|
-
}
|
|
125
|
-
return hex.toUpperCase();
|
|
126
|
-
}
|
|
127
|
-
static rgbToHex(_rgb) {
|
|
128
|
-
const rgb = _rgb;
|
|
129
|
-
rgb.r = this.limitToByte(rgb.r);
|
|
130
|
-
rgb.g = this.limitToByte(rgb.g);
|
|
131
|
-
rgb.b = this.limitToByte(rgb.b);
|
|
132
|
-
const red = this.numberToHex(rgb.r);
|
|
133
|
-
const green = this.numberToHex(rgb.g);
|
|
134
|
-
const blue = this.numberToHex(rgb.b);
|
|
135
|
-
return `#${red}${green}${blue}`;
|
|
136
|
-
}
|
|
137
|
-
static hexToRgb(hexString) {
|
|
138
|
-
const numbersOnly = hexString.substring(1);
|
|
139
|
-
const aRgbHex = numbersOnly.match(/.{1,2}/g);
|
|
140
|
-
return aRgbHex ? {
|
|
141
|
-
r: parseInt(aRgbHex[0], 16),
|
|
142
|
-
g: parseInt(aRgbHex[1], 16),
|
|
143
|
-
b: parseInt(aRgbHex[2], 16)
|
|
144
|
-
} : undefined;
|
|
145
|
-
}
|
|
146
|
-
}
|
|
147
|
-
exports.default = ColorHelper;
|