@dreamcommerce/aurora 2.12.1-2 → 2.12.1-20
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/build/cjs/packages/aurora/src/components/color_picker_new/components/color-picker-header.js +4 -2
- package/build/cjs/packages/aurora/src/components/color_picker_new/components/color-picker-header.js.map +1 -1
- package/build/cjs/packages/aurora/src/components/color_picker_new/components/color-picker-swatches.js +2 -2
- package/build/cjs/packages/aurora/src/components/color_picker_new/constants.js +8 -7
- package/build/cjs/packages/aurora/src/components/color_picker_new/constants.js.map +1 -1
- package/build/cjs/packages/aurora/src/components/color_picker_new/hooks/use_color_picker.js +14 -18
- package/build/cjs/packages/aurora/src/components/color_picker_new/hooks/use_color_picker.js.map +1 -1
- package/build/cjs/packages/aurora/src/components/color_picker_new/index.js +9 -9
- package/build/cjs/packages/aurora/src/components/color_picker_new/utilities.js +11 -5
- package/build/cjs/packages/aurora/src/components/color_picker_new/utilities.js.map +1 -1
- package/build/cjs/packages/aurora/src/components/controls/hoc/control_color_picker_new/index.js +2 -2
- package/build/cjs/packages/aurora/src/translations/en.json.js +6 -1
- package/build/cjs/packages/aurora/src/translations/en.json.js.map +1 -1
- package/build/cjs/packages/aurora/src/translations/pl.json.js +6 -1
- package/build/cjs/packages/aurora/src/translations/pl.json.js.map +1 -1
- package/build/esm/packages/aurora/src/components/color_picker_new/components/color-picker-header.d.ts +0 -1
- package/build/esm/packages/aurora/src/components/color_picker_new/components/color-picker-header.js +4 -2
- package/build/esm/packages/aurora/src/components/color_picker_new/components/color-picker-header.js.map +1 -1
- package/build/esm/packages/aurora/src/components/color_picker_new/components/color-picker-swatch.d.ts +2 -2
- package/build/esm/packages/aurora/src/components/color_picker_new/components/color-picker-swatches.d.ts +2 -2
- package/build/esm/packages/aurora/src/components/color_picker_new/components/color-picker-swatches.js +2 -2
- package/build/esm/packages/aurora/src/components/color_picker_new/constants.d.ts +4 -3
- package/build/esm/packages/aurora/src/components/color_picker_new/constants.js +8 -7
- package/build/esm/packages/aurora/src/components/color_picker_new/constants.js.map +1 -1
- package/build/esm/packages/aurora/src/components/color_picker_new/hooks/use_color_picker.d.ts +7 -7
- package/build/esm/packages/aurora/src/components/color_picker_new/hooks/use_color_picker.js +15 -19
- package/build/esm/packages/aurora/src/components/color_picker_new/hooks/use_color_picker.js.map +1 -1
- package/build/esm/packages/aurora/src/components/color_picker_new/index.js +9 -9
- package/build/esm/packages/aurora/src/components/color_picker_new/types.d.ts +12 -10
- package/build/esm/packages/aurora/src/components/color_picker_new/utilities.d.ts +9 -7
- package/build/esm/packages/aurora/src/components/color_picker_new/utilities.js +11 -5
- package/build/esm/packages/aurora/src/components/color_picker_new/utilities.js.map +1 -1
- package/build/esm/packages/aurora/src/components/controls/hoc/control_color_picker_new/index.js +2 -2
- package/build/esm/packages/aurora/src/index.d.ts +3 -2
- package/build/esm/packages/aurora/src/translations/en.json +4 -1
- package/build/esm/packages/aurora/src/translations/en.json.js +6 -2
- package/build/esm/packages/aurora/src/translations/en.json.js.map +1 -1
- package/build/esm/packages/aurora/src/translations/pl.json +4 -1
- package/build/esm/packages/aurora/src/translations/pl.json.js +6 -2
- package/build/esm/packages/aurora/src/translations/pl.json.js.map +1 -1
- package/package.json +1 -1
package/build/cjs/packages/aurora/src/components/color_picker_new/components/color-picker-header.js
CHANGED
|
@@ -3,6 +3,7 @@
|
|
|
3
3
|
Object.defineProperty(exports, '__esModule', { value: true });
|
|
4
4
|
|
|
5
5
|
var React = require('react');
|
|
6
|
+
var useTranslation = require('../../../../../../external/react-i18next/dist/es/useTranslation.js');
|
|
6
7
|
var index = require('../../dropdown/context/index.js');
|
|
7
8
|
var css_classes = require('../css_classes.js');
|
|
8
9
|
var main_module = require('../../../css/color_picker_new/main.module.less.js');
|
|
@@ -12,14 +13,15 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
|
|
|
12
13
|
|
|
13
14
|
var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
|
|
14
15
|
|
|
15
|
-
const ColorPickerHeader = ({
|
|
16
|
+
const ColorPickerHeader = ({ onCancel }) => {
|
|
17
|
+
const [t] = useTranslation.useTranslation();
|
|
16
18
|
const { toggleDropdown } = React.useContext(index.DropdownContext);
|
|
17
19
|
const handleCancelButton = () => {
|
|
18
20
|
toggleDropdown === null || toggleDropdown === void 0 ? void 0 : toggleDropdown();
|
|
19
21
|
onCancel === null || onCancel === void 0 ? void 0 : onCancel();
|
|
20
22
|
};
|
|
21
23
|
return (React__default['default'].createElement("div", { className: `${main_module['default'][css_classes.cssColorPickerHeader]}` },
|
|
22
|
-
|
|
24
|
+
t('Select color'),
|
|
23
25
|
React__default['default'].createElement("button", { onClick: handleCancelButton, className: `${main_module['default'][css_classes.cssColorPickerCloseIcon]}` },
|
|
24
26
|
React__default['default'].createElement(icon_close['default'], { size: "m" }))));
|
|
25
27
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}
|
|
1
|
+
{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA,6BAA6B,oEAAwE;AACrG;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}
|
|
@@ -32,8 +32,8 @@ const ColorPickerSwatches = ({ color, onClick }) => {
|
|
|
32
32
|
React__default['default'].createElement("div", { className: main_module['default'][css_classes.cssColorPickerSwatchesHeader] },
|
|
33
33
|
React__default['default'].createElement("p", null, t('Shades of color'))),
|
|
34
34
|
React__default['default'].createElement("div", { className: main_module['default'][css_classes.cssColorPickerSwatchesContent] }, shades.map((shade, index) => {
|
|
35
|
-
const
|
|
36
|
-
const rgbColor =
|
|
35
|
+
const color = tinycolor['default'](shade);
|
|
36
|
+
const rgbColor = color.toRgb();
|
|
37
37
|
const handleOnClick = () => {
|
|
38
38
|
onClick === null || onClick === void 0 ? void 0 : onClick(rgbColor);
|
|
39
39
|
};
|
|
@@ -3,25 +3,26 @@
|
|
|
3
3
|
Object.defineProperty(exports, '__esModule', { value: true });
|
|
4
4
|
|
|
5
5
|
const COLOR_PICKER_INITIAL_STATE = {
|
|
6
|
-
|
|
6
|
+
hsla: {
|
|
7
7
|
h: 0,
|
|
8
8
|
s: 0,
|
|
9
9
|
l: 0,
|
|
10
|
-
a:
|
|
10
|
+
a: 1
|
|
11
11
|
},
|
|
12
|
-
|
|
12
|
+
hsva: {
|
|
13
13
|
h: 0,
|
|
14
14
|
s: 0,
|
|
15
15
|
v: 0,
|
|
16
|
-
a:
|
|
16
|
+
a: 1
|
|
17
17
|
},
|
|
18
|
-
|
|
18
|
+
rgba: {
|
|
19
19
|
r: 0,
|
|
20
20
|
g: 0,
|
|
21
21
|
b: 0,
|
|
22
|
-
a:
|
|
22
|
+
a: 1
|
|
23
23
|
},
|
|
24
|
-
hex: ''
|
|
24
|
+
hex: '000000',
|
|
25
|
+
hexWithPrefix: '#000000'
|
|
25
26
|
};
|
|
26
27
|
|
|
27
28
|
exports.COLOR_PICKER_INITIAL_STATE = COLOR_PICKER_INITIAL_STATE;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}
|
|
1
|
+
{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}
|
|
@@ -7,28 +7,24 @@ var utilities = require('../utilities.js');
|
|
|
7
7
|
var constants = require('../constants.js');
|
|
8
8
|
|
|
9
9
|
const useColorPicker = ({ initialColor, onChange, onCancel, onSave }) => {
|
|
10
|
-
const [choosenColor, setChoosenColor] = React.useState(initialColor);
|
|
11
|
-
const [color, setColor] = React.useState(constants.COLOR_PICKER_INITIAL_STATE);
|
|
10
|
+
const [choosenColor, setChoosenColor] = React.useState(initialColor !== null && initialColor !== void 0 ? initialColor : constants.COLOR_PICKER_INITIAL_STATE.hex);
|
|
11
|
+
const [color, setColor] = React.useState(initialColor ? utilities.getAllColorFormats(initialColor) : constants.COLOR_PICKER_INITIAL_STATE);
|
|
12
12
|
React.useEffect(() => {
|
|
13
|
-
|
|
14
|
-
}, [
|
|
15
|
-
const handleChangeSaturation = (
|
|
16
|
-
setColors(
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
const hueColorSet = utilities.getColorFormatsWithoutHsv(hsl);
|
|
13
|
+
onChange === null || onChange === void 0 ? void 0 : onChange(color);
|
|
14
|
+
}, [color]);
|
|
15
|
+
const handleChangeSaturation = (hsva) => {
|
|
16
|
+
setColors(hsva);
|
|
17
|
+
};
|
|
18
|
+
const handleChangeHue = (hsls) => {
|
|
19
|
+
const hueColorSet = utilities.getColorFormatsWithoutHsv(hsls);
|
|
21
20
|
setColor({ ...color, ...hueColorSet });
|
|
22
|
-
onChange === null || onChange === void 0 ? void 0 : onChange(color.hex);
|
|
23
21
|
};
|
|
24
|
-
const handleChangeAlpha = (
|
|
25
|
-
const hueColorSet = utilities.getColorFormatsWithoutHsv(
|
|
22
|
+
const handleChangeAlpha = (hsls) => {
|
|
23
|
+
const hueColorSet = utilities.getColorFormatsWithoutHsv(hsls);
|
|
26
24
|
setColor({ ...color, ...hueColorSet });
|
|
27
|
-
onChange === null || onChange === void 0 ? void 0 : onChange(color.hex);
|
|
28
25
|
};
|
|
29
|
-
const handlePickSwatch = (
|
|
30
|
-
setColors(
|
|
31
|
-
onChange === null || onChange === void 0 ? void 0 : onChange(color.hex);
|
|
26
|
+
const handlePickSwatch = (rgba) => {
|
|
27
|
+
setColors(rgba);
|
|
32
28
|
};
|
|
33
29
|
const handleCancel = () => {
|
|
34
30
|
setColors(choosenColor);
|
|
@@ -36,7 +32,7 @@ const useColorPicker = ({ initialColor, onChange, onCancel, onSave }) => {
|
|
|
36
32
|
};
|
|
37
33
|
const handleSave = () => {
|
|
38
34
|
setChoosenColor(color.hex);
|
|
39
|
-
onSave === null || onSave === void 0 ? void 0 : onSave(color
|
|
35
|
+
onSave === null || onSave === void 0 ? void 0 : onSave(color);
|
|
40
36
|
};
|
|
41
37
|
const setColors = (color) => {
|
|
42
38
|
setColor(utilities.getAllColorFormats(color));
|
package/build/cjs/packages/aurora/src/components/color_picker_new/hooks/use_color_picker.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;
|
|
1
|
+
{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}
|
|
@@ -20,7 +20,7 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
|
|
|
20
20
|
var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
|
|
21
21
|
|
|
22
22
|
// @ts-ignore
|
|
23
|
-
const ColorPickerNew = ({
|
|
23
|
+
const ColorPickerNew = ({ id, name, initialColor, onChange, onCancel, onSave }) => {
|
|
24
24
|
var _a;
|
|
25
25
|
const { color, handleChangeSaturation, handleChangeHue, handleChangeAlpha, handlePickSwatch, handleCancel, handleSave } = use_color_picker['default']({
|
|
26
26
|
initialColor,
|
|
@@ -33,22 +33,22 @@ const ColorPickerNew = ({ initialColor = '#fff', pickerText, onChange, onCancel,
|
|
|
33
33
|
React__default['default'].createElement(index['default'].CustomLabel, null,
|
|
34
34
|
React__default['default'].createElement("div", { className: `${main_module['default'][css_classes.cssColorPickerInputContainer]}` },
|
|
35
35
|
React__default['default'].createElement("div", { className: `${main_module['default'][css_classes.cssColorPickerInputColorSwatchContainer]}` },
|
|
36
|
-
React__default['default'].createElement(colorPickerSwatch.ColorPickerSwatch, { color: color === null || color === void 0 ? void 0 : color.
|
|
37
|
-
React__default['default'].createElement(input['default'], { value: `# ${(_a = color === null || color === void 0 ? void 0 : color.hex) === null || _a === void 0 ? void 0 : _a.toUpperCase()}`, readOnly: true }))),
|
|
36
|
+
React__default['default'].createElement(colorPickerSwatch.ColorPickerSwatch, { color: color === null || color === void 0 ? void 0 : color.rgba })),
|
|
37
|
+
React__default['default'].createElement(input['default'], { type: "text", id: id, name: name, value: `# ${(_a = color === null || color === void 0 ? void 0 : color.hex) === null || _a === void 0 ? void 0 : _a.toUpperCase()}`, readOnly: true }))),
|
|
38
38
|
React__default['default'].createElement(index['default'].Content, { onClickOutside: handleCancel },
|
|
39
|
-
React__default['default'].createElement(colorPickerHeader.ColorPickerHeader, {
|
|
39
|
+
React__default['default'].createElement(colorPickerHeader.ColorPickerHeader, { onCancel: handleCancel }),
|
|
40
40
|
React__default['default'].createElement("div", { className: `${main_module['default'][css_classes.cssColorPickerContainer]}` },
|
|
41
41
|
React__default['default'].createElement("div", { className: `${main_module['default'][css_classes.cssColorPickerSaturation]}` },
|
|
42
|
-
React__default['default'].createElement(index$1.common.Saturation, { hsl: color === null || color === void 0 ? void 0 : color.
|
|
42
|
+
React__default['default'].createElement(index$1.common.Saturation, { hsl: color === null || color === void 0 ? void 0 : color.hsla, hsv: color === null || color === void 0 ? void 0 : color.hsva, pointer: () => React__default['default'].createElement(colorPickerHandler.ColorPickerHandler, { size: "big" }), onChange: handleChangeSaturation })),
|
|
43
43
|
React__default['default'].createElement("div", { className: `${main_module['default'][css_classes.cssColorPickerHueAlphaContanier]}` },
|
|
44
44
|
React__default['default'].createElement("div", { className: `${main_module['default'][css_classes.cssColorPickerHueAlphaContanierSet]}` },
|
|
45
45
|
React__default['default'].createElement("div", { className: `${main_module['default'][css_classes.cssColorPickerHue]}` },
|
|
46
|
-
React__default['default'].createElement(index$1.common.Hue, { hsl: color === null || color === void 0 ? void 0 : color.
|
|
46
|
+
React__default['default'].createElement(index$1.common.Hue, { hsl: color === null || color === void 0 ? void 0 : color.hsla, pointer: colorPickerHandler.ColorPickerHandler, onChange: handleChangeHue })),
|
|
47
47
|
React__default['default'].createElement("div", { className: `${main_module['default'][css_classes.cssColorPickerAlpha]}` },
|
|
48
|
-
React__default['default'].createElement(index$1.common.Alpha, { rgb: color.
|
|
48
|
+
React__default['default'].createElement(index$1.common.Alpha, { rgb: color.rgba, hsl: color === null || color === void 0 ? void 0 : color.hsla, pointer: colorPickerHandler.ColorPickerHandler, onChange: handleChangeAlpha }))),
|
|
49
49
|
React__default['default'].createElement("div", { className: `${main_module['default'][css_classes.cssColorPickerHueAlphaContanierResult]}` },
|
|
50
|
-
React__default['default'].createElement(colorPickerSwatch.ColorPickerSwatch, { color: color === null || color === void 0 ? void 0 : color.
|
|
51
|
-
React__default['default'].createElement(colorPickerSwatches.ColorPickerSwatches, { color: color.
|
|
50
|
+
React__default['default'].createElement(colorPickerSwatch.ColorPickerSwatch, { color: color === null || color === void 0 ? void 0 : color.rgba, size: "big" }))),
|
|
51
|
+
React__default['default'].createElement(colorPickerSwatches.ColorPickerSwatches, { color: color.hsla, onClick: handlePickSwatch })),
|
|
52
52
|
React__default['default'].createElement(colorPickerFooter.ColorPickerFooter, { onCancel: handleCancel, onSave: handleSave, color: color === null || color === void 0 ? void 0 : color.hex })))));
|
|
53
53
|
};
|
|
54
54
|
|
|
@@ -7,15 +7,21 @@ var tinycolor = require('../../../../../external/tinycolor2/esm/tinycolor.js');
|
|
|
7
7
|
const getAllColorFormats = (color) => {
|
|
8
8
|
const colorSet = tinycolor['default'](color);
|
|
9
9
|
return {
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
hex: getHexValue(colorSet)
|
|
10
|
+
hsla: colorSet.toHsl(),
|
|
11
|
+
hsva: colorSet.toHsv(),
|
|
12
|
+
rgba: colorSet.toRgb(),
|
|
13
|
+
hex: getHexValue(colorSet),
|
|
14
|
+
hexWithPrefix: `#${getHexValue(colorSet)}`
|
|
14
15
|
};
|
|
15
16
|
};
|
|
16
17
|
const getColorFormatsWithoutHsv = (hue) => {
|
|
17
18
|
const colorSet = tinycolor['default'](hue);
|
|
18
|
-
return {
|
|
19
|
+
return {
|
|
20
|
+
hsla: hue,
|
|
21
|
+
rgba: colorSet.toRgb(),
|
|
22
|
+
hex: getHexValue(colorSet),
|
|
23
|
+
hexWithPrefix: `#${getHexValue(colorSet)}`
|
|
24
|
+
};
|
|
19
25
|
};
|
|
20
26
|
const getHexValue = (colorSet) => {
|
|
21
27
|
const alphaValue = colorSet.getAlpha();
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA,wBAAwB,qDAAyD;AACjF;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}
|
|
1
|
+
{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA,wBAAwB,qDAAyD;AACjF;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}
|
package/build/cjs/packages/aurora/src/components/controls/hoc/control_color_picker_new/index.js
CHANGED
|
@@ -11,14 +11,14 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
|
|
|
11
11
|
|
|
12
12
|
var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
|
|
13
13
|
|
|
14
|
-
const ControlColorPickerNew = ({ label, hint, isRequired, id, name, errors, labelAdditionalInfo,
|
|
14
|
+
const ControlColorPickerNew = ({ label, hint, isRequired, id, name, errors, labelAdditionalInfo, initialColor, onChange, onCancel, onSave }) => {
|
|
15
15
|
return (React__default['default'].createElement(index['default'], { errors: errors, name: name, id: id },
|
|
16
16
|
(label || hint) && (React__default['default'].createElement(index['default'].Label, { id: id, isRequired: isRequired, additionalInfo: labelAdditionalInfo },
|
|
17
17
|
label,
|
|
18
18
|
hint && React__default['default'].createElement(index$1['default'], { hint: hint, spacingLeft: true }))),
|
|
19
19
|
React__default['default'].createElement(index['default'].Content, null,
|
|
20
20
|
React__default['default'].createElement(index['default'].Element, null,
|
|
21
|
-
React__default['default'].createElement(index$2['default'], {
|
|
21
|
+
React__default['default'].createElement(index$2['default'], { id: id, name: name, initialColor: initialColor, onChange: onChange, onCancel: onCancel, onSave: onSave }))),
|
|
22
22
|
React__default['default'].createElement(index['default'].Errors, null)));
|
|
23
23
|
};
|
|
24
24
|
|
|
@@ -29,6 +29,7 @@ var Yesterday = "Yesterday";
|
|
|
29
29
|
var Add = "Add";
|
|
30
30
|
var Remove = "Remove";
|
|
31
31
|
var Search = "Search";
|
|
32
|
+
var save = "save";
|
|
32
33
|
var en = {
|
|
33
34
|
date: date,
|
|
34
35
|
cancel: cancel,
|
|
@@ -83,7 +84,10 @@ var en = {
|
|
|
83
84
|
"Drag a file here or browse": "Drag a file here or browse",
|
|
84
85
|
"supported format": "supported format",
|
|
85
86
|
"The value cannot be greater than the width of the uploaded file": "The value cannot be greater than the width of the uploaded file",
|
|
86
|
-
"Invalid file format": "Invalid file format"
|
|
87
|
+
"Invalid file format": "Invalid file format",
|
|
88
|
+
save: save,
|
|
89
|
+
"Shades of color": "Shades of color",
|
|
90
|
+
"Select color": "Select color"
|
|
87
91
|
};
|
|
88
92
|
|
|
89
93
|
exports.Add = Add;
|
|
@@ -109,6 +113,7 @@ exports.monday = monday;
|
|
|
109
113
|
exports.november = november;
|
|
110
114
|
exports.october = october;
|
|
111
115
|
exports.saturday = saturday;
|
|
116
|
+
exports.save = save;
|
|
112
117
|
exports.september = september;
|
|
113
118
|
exports.sunday = sunday;
|
|
114
119
|
exports.thursday = thursday;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}
|
|
1
|
+
{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}
|
|
@@ -29,6 +29,7 @@ var Yesterday = "Wczoraj";
|
|
|
29
29
|
var Add = "Dodaj";
|
|
30
30
|
var Remove = "Usuń";
|
|
31
31
|
var Search = "Szukaj";
|
|
32
|
+
var save = "zapisz";
|
|
32
33
|
var pl = {
|
|
33
34
|
date: date,
|
|
34
35
|
cancel: cancel,
|
|
@@ -83,7 +84,10 @@ var pl = {
|
|
|
83
84
|
"Drag a file here or browse": "Przeciągnij lub wybierz plik z dysku",
|
|
84
85
|
"supported format": "obsługiwany format",
|
|
85
86
|
"The value cannot be greater than the width of the uploaded file": "Wartość nie może być większa od szerokości wgranego pliku",
|
|
86
|
-
"Invalid file format": "Nieprawidłowy format pliku"
|
|
87
|
+
"Invalid file format": "Nieprawidłowy format pliku",
|
|
88
|
+
save: save,
|
|
89
|
+
"Shades of color": "Odcienie koloru",
|
|
90
|
+
"Select color": "Wybierz kolor"
|
|
87
91
|
};
|
|
88
92
|
|
|
89
93
|
exports.Add = Add;
|
|
@@ -109,6 +113,7 @@ exports.monday = monday;
|
|
|
109
113
|
exports.november = november;
|
|
110
114
|
exports.october = october;
|
|
111
115
|
exports.saturday = saturday;
|
|
116
|
+
exports.save = save;
|
|
112
117
|
exports.september = september;
|
|
113
118
|
exports.sunday = sunday;
|
|
114
119
|
exports.thursday = thursday;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}
|
|
1
|
+
{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}
|
package/build/esm/packages/aurora/src/components/color_picker_new/components/color-picker-header.js
CHANGED
|
@@ -1,17 +1,19 @@
|
|
|
1
1
|
import React, { useContext } from 'react';
|
|
2
|
+
import { useTranslation } from '../../../../../../external/react-i18next/dist/es/useTranslation.js';
|
|
2
3
|
import { DropdownContext } from '../../dropdown/context/index.js';
|
|
3
4
|
import { cssColorPickerHeader, cssColorPickerCloseIcon } from '../css_classes.js';
|
|
4
5
|
import styles from '../../../css/color_picker_new/main.module.less.js';
|
|
5
6
|
import IconClose from '../../../assets/icon_close.js';
|
|
6
7
|
|
|
7
|
-
const ColorPickerHeader = ({
|
|
8
|
+
const ColorPickerHeader = ({ onCancel }) => {
|
|
9
|
+
const [t] = useTranslation();
|
|
8
10
|
const { toggleDropdown } = useContext(DropdownContext);
|
|
9
11
|
const handleCancelButton = () => {
|
|
10
12
|
toggleDropdown === null || toggleDropdown === void 0 ? void 0 : toggleDropdown();
|
|
11
13
|
onCancel === null || onCancel === void 0 ? void 0 : onCancel();
|
|
12
14
|
};
|
|
13
15
|
return (React.createElement("div", { className: `${styles[cssColorPickerHeader]}` },
|
|
14
|
-
|
|
16
|
+
t('Select color'),
|
|
15
17
|
React.createElement("button", { onClick: handleCancelButton, className: `${styles[cssColorPickerCloseIcon]}` },
|
|
16
18
|
React.createElement(IconClose, { size: "m" }))));
|
|
17
19
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}
|
|
1
|
+
{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA,+BAA+B,oEAAwE;AACvG;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}
|
|
@@ -1,9 +1,9 @@
|
|
|
1
1
|
import { ColorPickerColorFormats } from '../types';
|
|
2
2
|
import React from 'react';
|
|
3
3
|
interface IColorPickerSwatchProps {
|
|
4
|
-
color: ColorPickerColorFormats['
|
|
4
|
+
color: ColorPickerColorFormats['rgba'];
|
|
5
5
|
size?: 'small' | 'big';
|
|
6
|
-
onClick?: (color: ColorPickerColorFormats['
|
|
6
|
+
onClick?: (color: ColorPickerColorFormats['rgba']) => void;
|
|
7
7
|
}
|
|
8
8
|
export declare const ColorPickerSwatch: React.FC<IColorPickerSwatchProps>;
|
|
9
9
|
export {};
|
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
import { ColorPickerColorFormats } from '../types';
|
|
2
2
|
import React from 'react';
|
|
3
3
|
interface IColorPickerSwatchesProps {
|
|
4
|
-
color: ColorPickerColorFormats['
|
|
5
|
-
onClick?: (color: ColorPickerColorFormats['
|
|
4
|
+
color: ColorPickerColorFormats['hsla'];
|
|
5
|
+
onClick?: (color: ColorPickerColorFormats['rgba']) => void;
|
|
6
6
|
}
|
|
7
7
|
export declare const ColorPickerSwatches: React.FC<IColorPickerSwatchesProps>;
|
|
8
8
|
export {};
|
|
@@ -24,8 +24,8 @@ const ColorPickerSwatches = ({ color, onClick }) => {
|
|
|
24
24
|
React.createElement("div", { className: styles[cssColorPickerSwatchesHeader] },
|
|
25
25
|
React.createElement("p", null, t('Shades of color'))),
|
|
26
26
|
React.createElement("div", { className: styles[cssColorPickerSwatchesContent] }, shades.map((shade, index) => {
|
|
27
|
-
const
|
|
28
|
-
const rgbColor =
|
|
27
|
+
const color = tinycolor(shade);
|
|
28
|
+
const rgbColor = color.toRgb();
|
|
29
29
|
const handleOnClick = () => {
|
|
30
30
|
onClick === null || onClick === void 0 ? void 0 : onClick(rgbColor);
|
|
31
31
|
};
|
|
@@ -1,21 +1,22 @@
|
|
|
1
1
|
export declare const COLOR_PICKER_INITIAL_STATE: {
|
|
2
|
-
|
|
2
|
+
hsla: {
|
|
3
3
|
h: number;
|
|
4
4
|
s: number;
|
|
5
5
|
l: number;
|
|
6
6
|
a: number;
|
|
7
7
|
};
|
|
8
|
-
|
|
8
|
+
hsva: {
|
|
9
9
|
h: number;
|
|
10
10
|
s: number;
|
|
11
11
|
v: number;
|
|
12
12
|
a: number;
|
|
13
13
|
};
|
|
14
|
-
|
|
14
|
+
rgba: {
|
|
15
15
|
r: number;
|
|
16
16
|
g: number;
|
|
17
17
|
b: number;
|
|
18
18
|
a: number;
|
|
19
19
|
};
|
|
20
20
|
hex: string;
|
|
21
|
+
hexWithPrefix: string;
|
|
21
22
|
};
|
|
@@ -1,23 +1,24 @@
|
|
|
1
1
|
const COLOR_PICKER_INITIAL_STATE = {
|
|
2
|
-
|
|
2
|
+
hsla: {
|
|
3
3
|
h: 0,
|
|
4
4
|
s: 0,
|
|
5
5
|
l: 0,
|
|
6
|
-
a:
|
|
6
|
+
a: 1
|
|
7
7
|
},
|
|
8
|
-
|
|
8
|
+
hsva: {
|
|
9
9
|
h: 0,
|
|
10
10
|
s: 0,
|
|
11
11
|
v: 0,
|
|
12
|
-
a:
|
|
12
|
+
a: 1
|
|
13
13
|
},
|
|
14
|
-
|
|
14
|
+
rgba: {
|
|
15
15
|
r: 0,
|
|
16
16
|
g: 0,
|
|
17
17
|
b: 0,
|
|
18
|
-
a:
|
|
18
|
+
a: 1
|
|
19
19
|
},
|
|
20
|
-
hex: ''
|
|
20
|
+
hex: '000000',
|
|
21
|
+
hexWithPrefix: '#000000'
|
|
21
22
|
};
|
|
22
23
|
|
|
23
24
|
export { COLOR_PICKER_INITIAL_STATE };
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}
|
|
1
|
+
{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}
|
package/build/esm/packages/aurora/src/components/color_picker_new/hooks/use_color_picker.d.ts
CHANGED
|
@@ -1,16 +1,16 @@
|
|
|
1
1
|
import { ColorPickerColorFormats } from '../types';
|
|
2
2
|
export declare type ColorPickerHookProps = {
|
|
3
|
-
initialColor
|
|
4
|
-
onChange?: (color:
|
|
3
|
+
initialColor?: ColorPickerColorFormats['hex'];
|
|
4
|
+
onChange?: (color: ColorPickerColorFormats) => void;
|
|
5
5
|
onCancel?: () => void;
|
|
6
|
-
onSave?: (color:
|
|
6
|
+
onSave?: (color: ColorPickerColorFormats) => void;
|
|
7
7
|
};
|
|
8
8
|
declare const useColorPicker: ({ initialColor, onChange, onCancel, onSave }: ColorPickerHookProps) => {
|
|
9
9
|
color: ColorPickerColorFormats;
|
|
10
|
-
handleChangeSaturation: (
|
|
11
|
-
handleChangeHue: (
|
|
12
|
-
handleChangeAlpha: (
|
|
13
|
-
handlePickSwatch: (
|
|
10
|
+
handleChangeSaturation: (hsva: ColorPickerColorFormats['hsva']) => void;
|
|
11
|
+
handleChangeHue: (hsls: ColorPickerColorFormats['hsla']) => void;
|
|
12
|
+
handleChangeAlpha: (hsls: ColorPickerColorFormats['hsla']) => void;
|
|
13
|
+
handlePickSwatch: (rgba: ColorPickerColorFormats['rgba']) => void;
|
|
14
14
|
handleCancel: () => void;
|
|
15
15
|
handleSave: () => void;
|
|
16
16
|
};
|
|
@@ -1,30 +1,26 @@
|
|
|
1
1
|
import { useState, useEffect } from 'react';
|
|
2
|
-
import {
|
|
2
|
+
import { getAllColorFormats, getColorFormatsWithoutHsv } from '../utilities.js';
|
|
3
3
|
import { COLOR_PICKER_INITIAL_STATE } from '../constants.js';
|
|
4
4
|
|
|
5
5
|
const useColorPicker = ({ initialColor, onChange, onCancel, onSave }) => {
|
|
6
|
-
const [choosenColor, setChoosenColor] = useState(initialColor);
|
|
7
|
-
const [color, setColor] = useState(COLOR_PICKER_INITIAL_STATE);
|
|
6
|
+
const [choosenColor, setChoosenColor] = useState(initialColor !== null && initialColor !== void 0 ? initialColor : COLOR_PICKER_INITIAL_STATE.hex);
|
|
7
|
+
const [color, setColor] = useState(initialColor ? getAllColorFormats(initialColor) : COLOR_PICKER_INITIAL_STATE);
|
|
8
8
|
useEffect(() => {
|
|
9
|
-
|
|
10
|
-
}, [
|
|
11
|
-
const handleChangeSaturation = (
|
|
12
|
-
setColors(
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
const hueColorSet = getColorFormatsWithoutHsv(hsl);
|
|
9
|
+
onChange === null || onChange === void 0 ? void 0 : onChange(color);
|
|
10
|
+
}, [color]);
|
|
11
|
+
const handleChangeSaturation = (hsva) => {
|
|
12
|
+
setColors(hsva);
|
|
13
|
+
};
|
|
14
|
+
const handleChangeHue = (hsls) => {
|
|
15
|
+
const hueColorSet = getColorFormatsWithoutHsv(hsls);
|
|
17
16
|
setColor({ ...color, ...hueColorSet });
|
|
18
|
-
onChange === null || onChange === void 0 ? void 0 : onChange(color.hex);
|
|
19
17
|
};
|
|
20
|
-
const handleChangeAlpha = (
|
|
21
|
-
const hueColorSet = getColorFormatsWithoutHsv(
|
|
18
|
+
const handleChangeAlpha = (hsls) => {
|
|
19
|
+
const hueColorSet = getColorFormatsWithoutHsv(hsls);
|
|
22
20
|
setColor({ ...color, ...hueColorSet });
|
|
23
|
-
onChange === null || onChange === void 0 ? void 0 : onChange(color.hex);
|
|
24
21
|
};
|
|
25
|
-
const handlePickSwatch = (
|
|
26
|
-
setColors(
|
|
27
|
-
onChange === null || onChange === void 0 ? void 0 : onChange(color.hex);
|
|
22
|
+
const handlePickSwatch = (rgba) => {
|
|
23
|
+
setColors(rgba);
|
|
28
24
|
};
|
|
29
25
|
const handleCancel = () => {
|
|
30
26
|
setColors(choosenColor);
|
|
@@ -32,7 +28,7 @@ const useColorPicker = ({ initialColor, onChange, onCancel, onSave }) => {
|
|
|
32
28
|
};
|
|
33
29
|
const handleSave = () => {
|
|
34
30
|
setChoosenColor(color.hex);
|
|
35
|
-
onSave === null || onSave === void 0 ? void 0 : onSave(color
|
|
31
|
+
onSave === null || onSave === void 0 ? void 0 : onSave(color);
|
|
36
32
|
};
|
|
37
33
|
const setColors = (color) => {
|
|
38
34
|
setColor(getAllColorFormats(color));
|
package/build/esm/packages/aurora/src/components/color_picker_new/hooks/use_color_picker.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;
|
|
1
|
+
{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}
|
|
@@ -12,7 +12,7 @@ import Dropdown from '../dropdown/index.js';
|
|
|
12
12
|
import useColorPicker from './hooks/use_color_picker.js';
|
|
13
13
|
|
|
14
14
|
// @ts-ignore
|
|
15
|
-
const ColorPickerNew = ({
|
|
15
|
+
const ColorPickerNew = ({ id, name, initialColor, onChange, onCancel, onSave }) => {
|
|
16
16
|
var _a;
|
|
17
17
|
const { color, handleChangeSaturation, handleChangeHue, handleChangeAlpha, handlePickSwatch, handleCancel, handleSave } = useColorPicker({
|
|
18
18
|
initialColor,
|
|
@@ -25,22 +25,22 @@ const ColorPickerNew = ({ initialColor = '#fff', pickerText, onChange, onCancel,
|
|
|
25
25
|
React.createElement(Dropdown.CustomLabel, null,
|
|
26
26
|
React.createElement("div", { className: `${styles[cssColorPickerInputContainer]}` },
|
|
27
27
|
React.createElement("div", { className: `${styles[cssColorPickerInputColorSwatchContainer]}` },
|
|
28
|
-
React.createElement(ColorPickerSwatch, { color: color === null || color === void 0 ? void 0 : color.
|
|
29
|
-
React.createElement(Input, { value: `# ${(_a = color === null || color === void 0 ? void 0 : color.hex) === null || _a === void 0 ? void 0 : _a.toUpperCase()}`, readOnly: true }))),
|
|
28
|
+
React.createElement(ColorPickerSwatch, { color: color === null || color === void 0 ? void 0 : color.rgba })),
|
|
29
|
+
React.createElement(Input, { type: "text", id: id, name: name, value: `# ${(_a = color === null || color === void 0 ? void 0 : color.hex) === null || _a === void 0 ? void 0 : _a.toUpperCase()}`, readOnly: true }))),
|
|
30
30
|
React.createElement(Dropdown.Content, { onClickOutside: handleCancel },
|
|
31
|
-
React.createElement(ColorPickerHeader, {
|
|
31
|
+
React.createElement(ColorPickerHeader, { onCancel: handleCancel }),
|
|
32
32
|
React.createElement("div", { className: `${styles[cssColorPickerContainer]}` },
|
|
33
33
|
React.createElement("div", { className: `${styles[cssColorPickerSaturation]}` },
|
|
34
|
-
React.createElement(common.Saturation, { hsl: color === null || color === void 0 ? void 0 : color.
|
|
34
|
+
React.createElement(common.Saturation, { hsl: color === null || color === void 0 ? void 0 : color.hsla, hsv: color === null || color === void 0 ? void 0 : color.hsva, pointer: () => React.createElement(ColorPickerHandler, { size: "big" }), onChange: handleChangeSaturation })),
|
|
35
35
|
React.createElement("div", { className: `${styles[cssColorPickerHueAlphaContanier]}` },
|
|
36
36
|
React.createElement("div", { className: `${styles[cssColorPickerHueAlphaContanierSet]}` },
|
|
37
37
|
React.createElement("div", { className: `${styles[cssColorPickerHue]}` },
|
|
38
|
-
React.createElement(common.Hue, { hsl: color === null || color === void 0 ? void 0 : color.
|
|
38
|
+
React.createElement(common.Hue, { hsl: color === null || color === void 0 ? void 0 : color.hsla, pointer: ColorPickerHandler, onChange: handleChangeHue })),
|
|
39
39
|
React.createElement("div", { className: `${styles[cssColorPickerAlpha]}` },
|
|
40
|
-
React.createElement(common.Alpha, { rgb: color.
|
|
40
|
+
React.createElement(common.Alpha, { rgb: color.rgba, hsl: color === null || color === void 0 ? void 0 : color.hsla, pointer: ColorPickerHandler, onChange: handleChangeAlpha }))),
|
|
41
41
|
React.createElement("div", { className: `${styles[cssColorPickerHueAlphaContanierResult]}` },
|
|
42
|
-
React.createElement(ColorPickerSwatch, { color: color === null || color === void 0 ? void 0 : color.
|
|
43
|
-
React.createElement(ColorPickerSwatches, { color: color.
|
|
42
|
+
React.createElement(ColorPickerSwatch, { color: color === null || color === void 0 ? void 0 : color.rgba, size: "big" }))),
|
|
43
|
+
React.createElement(ColorPickerSwatches, { color: color.hsla, onClick: handlePickSwatch })),
|
|
44
44
|
React.createElement(ColorPickerFooter, { onCancel: handleCancel, onSave: handleSave, color: color === null || color === void 0 ? void 0 : color.hex })))));
|
|
45
45
|
};
|
|
46
46
|
|
|
@@ -1,29 +1,31 @@
|
|
|
1
1
|
export interface IColorPickerNewProps {
|
|
2
|
-
|
|
2
|
+
id: string;
|
|
3
|
+
name?: string;
|
|
3
4
|
initialColor?: ColorPickerColorFormats['hex'] | undefined;
|
|
4
|
-
onChange?: (color:
|
|
5
|
+
onChange?: (color: ColorPickerColorFormats) => void;
|
|
5
6
|
onCancel?: () => void;
|
|
6
|
-
onSave?: (color:
|
|
7
|
+
onSave?: (color: ColorPickerColorFormats) => void;
|
|
7
8
|
}
|
|
8
9
|
export declare type ColorPickerColorFormats = {
|
|
9
|
-
|
|
10
|
+
hsla: {
|
|
10
11
|
h: number;
|
|
11
12
|
s: number;
|
|
12
13
|
l: number;
|
|
13
|
-
a
|
|
14
|
+
a: number;
|
|
14
15
|
};
|
|
15
|
-
|
|
16
|
+
hsva: {
|
|
16
17
|
h: number;
|
|
17
18
|
s: number;
|
|
18
19
|
v: number;
|
|
19
|
-
a
|
|
20
|
+
a: number;
|
|
20
21
|
};
|
|
21
|
-
|
|
22
|
+
rgba: {
|
|
22
23
|
r: number;
|
|
23
24
|
g: number;
|
|
24
25
|
b: number;
|
|
25
|
-
a
|
|
26
|
+
a: number;
|
|
26
27
|
};
|
|
27
28
|
hex: string;
|
|
29
|
+
hexWithPrefix: string;
|
|
28
30
|
};
|
|
29
|
-
export declare type ColorPickerColorTypes = ColorPickerColorFormats['
|
|
31
|
+
export declare type ColorPickerColorTypes = ColorPickerColorFormats['hsla'] | ColorPickerColorFormats['hsva'] | ColorPickerColorFormats['rgba'] | ColorPickerColorFormats['hex'] | ColorPickerColorFormats['hexWithPrefix'];
|
|
@@ -1,19 +1,21 @@
|
|
|
1
1
|
import { ColorPickerColorFormats, ColorPickerColorTypes } from './types';
|
|
2
2
|
import tinycolor from 'tinycolor2';
|
|
3
3
|
export declare const getAllColorFormats: (color: ColorPickerColorTypes) => {
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
4
|
+
hsla: tinycolor.ColorFormats.HSLA;
|
|
5
|
+
hsva: tinycolor.ColorFormats.HSVA;
|
|
6
|
+
rgba: tinycolor.ColorFormats.RGBA;
|
|
7
7
|
hex: string;
|
|
8
|
+
hexWithPrefix: string;
|
|
8
9
|
};
|
|
9
|
-
export declare const getColorFormatsWithoutHsv: (hue: ColorPickerColorFormats['
|
|
10
|
-
|
|
10
|
+
export declare const getColorFormatsWithoutHsv: (hue: ColorPickerColorFormats['hsla']) => {
|
|
11
|
+
hsla: {
|
|
11
12
|
h: number;
|
|
12
13
|
s: number;
|
|
13
14
|
l: number;
|
|
14
|
-
a
|
|
15
|
+
a: number;
|
|
15
16
|
};
|
|
16
|
-
|
|
17
|
+
rgba: tinycolor.ColorFormats.RGBA;
|
|
17
18
|
hex: string;
|
|
19
|
+
hexWithPrefix: string;
|
|
18
20
|
};
|
|
19
21
|
export declare const getHexValue: (colorSet: tinycolor.Instance) => string;
|
|
@@ -3,15 +3,21 @@ import tinycolor from '../../../../../external/tinycolor2/esm/tinycolor.js';
|
|
|
3
3
|
const getAllColorFormats = (color) => {
|
|
4
4
|
const colorSet = tinycolor(color);
|
|
5
5
|
return {
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
hex: getHexValue(colorSet)
|
|
6
|
+
hsla: colorSet.toHsl(),
|
|
7
|
+
hsva: colorSet.toHsv(),
|
|
8
|
+
rgba: colorSet.toRgb(),
|
|
9
|
+
hex: getHexValue(colorSet),
|
|
10
|
+
hexWithPrefix: `#${getHexValue(colorSet)}`
|
|
10
11
|
};
|
|
11
12
|
};
|
|
12
13
|
const getColorFormatsWithoutHsv = (hue) => {
|
|
13
14
|
const colorSet = tinycolor(hue);
|
|
14
|
-
return {
|
|
15
|
+
return {
|
|
16
|
+
hsla: hue,
|
|
17
|
+
rgba: colorSet.toRgb(),
|
|
18
|
+
hex: getHexValue(colorSet),
|
|
19
|
+
hexWithPrefix: `#${getHexValue(colorSet)}`
|
|
20
|
+
};
|
|
15
21
|
};
|
|
16
22
|
const getHexValue = (colorSet) => {
|
|
17
23
|
const alphaValue = colorSet.getAlpha();
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA,sBAAsB,qDAAyD;AAC/E;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}
|
|
1
|
+
{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA,sBAAsB,qDAAyD;AAC/E;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}
|
package/build/esm/packages/aurora/src/components/controls/hoc/control_color_picker_new/index.js
CHANGED
|
@@ -3,14 +3,14 @@ import Control from '../../index.js';
|
|
|
3
3
|
import Hint from '../../../hint/index.js';
|
|
4
4
|
import ColorPickerNew from '../../../color_picker_new/index.js';
|
|
5
5
|
|
|
6
|
-
const ControlColorPickerNew = ({ label, hint, isRequired, id, name, errors, labelAdditionalInfo,
|
|
6
|
+
const ControlColorPickerNew = ({ label, hint, isRequired, id, name, errors, labelAdditionalInfo, initialColor, onChange, onCancel, onSave }) => {
|
|
7
7
|
return (React.createElement(Control, { errors: errors, name: name, id: id },
|
|
8
8
|
(label || hint) && (React.createElement(Control.Label, { id: id, isRequired: isRequired, additionalInfo: labelAdditionalInfo },
|
|
9
9
|
label,
|
|
10
10
|
hint && React.createElement(Hint, { hint: hint, spacingLeft: true }))),
|
|
11
11
|
React.createElement(Control.Content, null,
|
|
12
12
|
React.createElement(Control.Element, null,
|
|
13
|
-
React.createElement(ColorPickerNew, {
|
|
13
|
+
React.createElement(ColorPickerNew, { id: id, name: name, initialColor: initialColor, onChange: onChange, onCancel: onCancel, onSave: onSave }))),
|
|
14
14
|
React.createElement(Control.Errors, null)));
|
|
15
15
|
};
|
|
16
16
|
|
|
@@ -1,6 +1,5 @@
|
|
|
1
1
|
import './i18n';
|
|
2
2
|
import { ICellProps, IIRowProps, ITableProps } from "./components/table/types";
|
|
3
|
-
import { IControlColorPickerNew, IControlRadioGroupOption } from "./components/controls/types";
|
|
4
3
|
/**
|
|
5
4
|
* import types for export
|
|
6
5
|
*/
|
|
@@ -16,6 +15,7 @@ import Breadcrumbs from "./components/breadcrumbs";
|
|
|
16
15
|
import Button from "./components/button";
|
|
17
16
|
import ButtonsGroup from "./components/buttons_group";
|
|
18
17
|
import ColorPicker from "./components/color_picker";
|
|
18
|
+
import { ColorPickerColorFormats } from "./components/color_picker_new/types";
|
|
19
19
|
import ColorPickerNew from "./components/color_picker_new";
|
|
20
20
|
import Control from "./components/controls";
|
|
21
21
|
import ControlCellSelector from "./components/controls/hoc/control_cell_selector";
|
|
@@ -50,6 +50,7 @@ import Grid from "./components/grid";
|
|
|
50
50
|
import Heading from "./components/heading";
|
|
51
51
|
import Hint from "./components/hint";
|
|
52
52
|
import { IColor } from "./components/color_picker/types";
|
|
53
|
+
import { IControlRadioGroupOption } from "./components/controls/types";
|
|
53
54
|
import { IDatepickerRange } from "./components/date_picker/types";
|
|
54
55
|
import { IDropdownContext } from "./components/dropdown/context/types";
|
|
55
56
|
import { IHeadingProps } from "./components/heading/types";
|
|
@@ -123,4 +124,4 @@ export { Accordion, Button, Tooltip, ButtonsGroup, Dropdown, Select, MultiSelect
|
|
|
123
124
|
/**
|
|
124
125
|
* export types
|
|
125
126
|
*/
|
|
126
|
-
export type { IDropdownProps, ISelectOption, IHeadingProps, ICellProps, IIRowProps, ITableProps, IDropdownContext, IControlRadioGroupOption, IColor,
|
|
127
|
+
export type { IDropdownProps, ISelectOption, IHeadingProps, ICellProps, IIRowProps, ITableProps, IDropdownContext, IControlRadioGroupOption, IColor, ColorPickerColorFormats, IDatepickerRange, TFilePickerFile, TImagePickerFile, TMessageBoxType, ILoaderProps, IWithLoader, TFlashMessage, TFlashMessageExtended, TImageSize };
|
|
@@ -52,5 +52,8 @@
|
|
|
52
52
|
"Drag a file here or browse": "Drag a file here or browse",
|
|
53
53
|
"supported format": "supported format",
|
|
54
54
|
"The value cannot be greater than the width of the uploaded file": "The value cannot be greater than the width of the uploaded file",
|
|
55
|
-
"Invalid file format": "Invalid file format"
|
|
55
|
+
"Invalid file format": "Invalid file format",
|
|
56
|
+
"save": "save",
|
|
57
|
+
"Shades of color": "Shades of color",
|
|
58
|
+
"Select color": "Select color"
|
|
56
59
|
}
|
|
@@ -25,6 +25,7 @@ var Yesterday = "Yesterday";
|
|
|
25
25
|
var Add = "Add";
|
|
26
26
|
var Remove = "Remove";
|
|
27
27
|
var Search = "Search";
|
|
28
|
+
var save = "save";
|
|
28
29
|
var en = {
|
|
29
30
|
date: date,
|
|
30
31
|
cancel: cancel,
|
|
@@ -79,9 +80,12 @@ var en = {
|
|
|
79
80
|
"Drag a file here or browse": "Drag a file here or browse",
|
|
80
81
|
"supported format": "supported format",
|
|
81
82
|
"The value cannot be greater than the width of the uploaded file": "The value cannot be greater than the width of the uploaded file",
|
|
82
|
-
"Invalid file format": "Invalid file format"
|
|
83
|
+
"Invalid file format": "Invalid file format",
|
|
84
|
+
save: save,
|
|
85
|
+
"Shades of color": "Shades of color",
|
|
86
|
+
"Select color": "Select color"
|
|
83
87
|
};
|
|
84
88
|
|
|
85
89
|
export default en;
|
|
86
|
-
export { Add, Remove, Search, Yesterday, april, august, cancel, choose, color, date, december, february, friday, january, july, june, march, may, monday, november, october, saturday, september, sunday, thursday, tuesday, wednesday };
|
|
90
|
+
export { Add, Remove, Search, Yesterday, april, august, cancel, choose, color, date, december, february, friday, january, july, june, march, may, monday, november, october, saturday, save, september, sunday, thursday, tuesday, wednesday };
|
|
87
91
|
//# sourceMappingURL=en.json.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}
|
|
1
|
+
{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}
|
|
@@ -52,5 +52,8 @@
|
|
|
52
52
|
"Drag a file here or browse": "Przeciągnij lub wybierz plik z dysku",
|
|
53
53
|
"supported format": "obsługiwany format",
|
|
54
54
|
"The value cannot be greater than the width of the uploaded file": "Wartość nie może być większa od szerokości wgranego pliku",
|
|
55
|
-
"Invalid file format": "Nieprawidłowy format pliku"
|
|
55
|
+
"Invalid file format": "Nieprawidłowy format pliku",
|
|
56
|
+
"save": "zapisz",
|
|
57
|
+
"Shades of color": "Odcienie koloru",
|
|
58
|
+
"Select color": "Wybierz kolor"
|
|
56
59
|
}
|
|
@@ -25,6 +25,7 @@ var Yesterday = "Wczoraj";
|
|
|
25
25
|
var Add = "Dodaj";
|
|
26
26
|
var Remove = "Usuń";
|
|
27
27
|
var Search = "Szukaj";
|
|
28
|
+
var save = "zapisz";
|
|
28
29
|
var pl = {
|
|
29
30
|
date: date,
|
|
30
31
|
cancel: cancel,
|
|
@@ -79,9 +80,12 @@ var pl = {
|
|
|
79
80
|
"Drag a file here or browse": "Przeciągnij lub wybierz plik z dysku",
|
|
80
81
|
"supported format": "obsługiwany format",
|
|
81
82
|
"The value cannot be greater than the width of the uploaded file": "Wartość nie może być większa od szerokości wgranego pliku",
|
|
82
|
-
"Invalid file format": "Nieprawidłowy format pliku"
|
|
83
|
+
"Invalid file format": "Nieprawidłowy format pliku",
|
|
84
|
+
save: save,
|
|
85
|
+
"Shades of color": "Odcienie koloru",
|
|
86
|
+
"Select color": "Wybierz kolor"
|
|
83
87
|
};
|
|
84
88
|
|
|
85
89
|
export default pl;
|
|
86
|
-
export { Add, Remove, Search, Yesterday, april, august, cancel, choose, color, date, december, february, friday, january, july, june, march, may, monday, november, october, saturday, september, sunday, thursday, tuesday, wednesday };
|
|
90
|
+
export { Add, Remove, Search, Yesterday, april, august, cancel, choose, color, date, december, february, friday, january, july, june, march, may, monday, november, october, saturday, save, september, sunday, thursday, tuesday, wednesday };
|
|
87
91
|
//# sourceMappingURL=pl.json.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}
|
|
1
|
+
{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}
|