@dreamcommerce/aurora 3.0.0-316 → 3.0.0-318
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/color_picker.js +5 -1
- package/build/cjs/packages/aurora/src/components/color_picker/color_picker.js.map +1 -1
- package/build/cjs/packages/aurora/src/components/color_picker/color_picker_utils.js +3 -0
- package/build/cjs/packages/aurora/src/components/color_picker/color_picker_utils.js.map +1 -1
- package/build/cjs/packages/aurora/src/components/color_picker/components/color_picker_content.js +2 -14
- package/build/cjs/packages/aurora/src/components/color_picker/components/color_picker_content.js.map +1 -1
- package/build/cjs/packages/aurora/src/components/color_picker/components/{color_label_input.js → color_picker_input.js} +15 -10
- package/build/cjs/packages/aurora/src/components/color_picker/components/{color_label_input.js.map → color_picker_input.js.map} +1 -1
- package/build/cjs/packages/aurora/src/components/color_picker/components/color_picker_inputs/color_picker_inputs.js +1 -1
- package/build/cjs/packages/aurora/src/components/color_picker/components/color_picker_inputs/color_picker_inputs_hex/color_picker_inputs_hex.js +20 -0
- package/build/cjs/packages/aurora/src/components/color_picker/components/color_picker_inputs/color_picker_inputs_hex/color_picker_inputs_hex.js.map +1 -0
- package/build/cjs/packages/aurora/src/components/color_picker/components/color_picker_inputs/color_picker_inputs_hex/color_picker_inputs_hex_alpha.js +33 -0
- package/build/cjs/packages/aurora/src/components/color_picker/components/color_picker_inputs/color_picker_inputs_hex/color_picker_inputs_hex_alpha.js.map +1 -0
- package/build/cjs/packages/aurora/src/components/color_picker/components/color_picker_inputs/color_picker_inputs_hex/color_picker_inputs_hex_input.js +93 -0
- package/build/cjs/packages/aurora/src/components/color_picker/components/color_picker_inputs/{color_picker_inputs_hex.js.map → color_picker_inputs_hex/color_picker_inputs_hex_input.js.map} +1 -1
- package/build/cjs/packages/aurora/src/components/color_picker/components/color_picker_inputs/color_picker_inputs_rgba.js +3 -3
- package/build/cjs/packages/aurora/src/components/color_picker/components/pure_color_picker.js +17 -3
- package/build/cjs/packages/aurora/src/components/color_picker/components/pure_color_picker.js.map +1 -1
- package/build/cjs/packages/aurora/src/components/color_picker/hooks/setup_color_picker.js +6 -0
- package/build/cjs/packages/aurora/src/components/color_picker/hooks/setup_color_picker.js.map +1 -1
- package/build/cjs/packages/aurora/src/components/input/input.js +5 -2
- package/build/cjs/packages/aurora/src/components/input/input.js.map +1 -1
- package/build/cjs/packages/aurora/src/components/tooltip/components/tooltip_content.js +1 -1
- package/build/esm/packages/aurora/src/components/color_picker/color_picker.js +5 -1
- package/build/esm/packages/aurora/src/components/color_picker/color_picker.js.map +1 -1
- package/build/esm/packages/aurora/src/components/color_picker/color_picker_types.d.ts +2 -0
- package/build/esm/packages/aurora/src/components/color_picker/color_picker_utils.d.ts +1 -0
- package/build/esm/packages/aurora/src/components/color_picker/color_picker_utils.js +3 -0
- package/build/esm/packages/aurora/src/components/color_picker/color_picker_utils.js.map +1 -1
- package/build/esm/packages/aurora/src/components/color_picker/components/color_picker_content.js +3 -15
- package/build/esm/packages/aurora/src/components/color_picker/components/color_picker_content.js.map +1 -1
- package/build/esm/packages/aurora/src/components/color_picker/components/{color_label_input.js → color_picker_input.js} +15 -10
- package/build/esm/packages/aurora/src/components/color_picker/components/{color_label_input.js.map → color_picker_input.js.map} +1 -1
- package/build/esm/packages/aurora/src/components/color_picker/components/color_picker_inputs/color_picker_inputs.js +1 -1
- package/build/esm/packages/aurora/src/components/color_picker/components/color_picker_inputs/color_picker_inputs_hex/color_picker_inputs_hex.js +12 -0
- package/build/esm/packages/aurora/src/components/color_picker/components/color_picker_inputs/color_picker_inputs_hex/color_picker_inputs_hex.js.map +1 -0
- package/build/esm/packages/aurora/src/components/color_picker/components/color_picker_inputs/color_picker_inputs_hex/color_picker_inputs_hex_alpha.d.ts +2 -0
- package/build/esm/packages/aurora/src/components/color_picker/components/color_picker_inputs/color_picker_inputs_hex/color_picker_inputs_hex_alpha.js +25 -0
- package/build/esm/packages/aurora/src/components/color_picker/components/color_picker_inputs/color_picker_inputs_hex/color_picker_inputs_hex_alpha.js.map +1 -0
- package/build/esm/packages/aurora/src/components/color_picker/components/color_picker_inputs/color_picker_inputs_hex/color_picker_inputs_hex_input.d.ts +3 -0
- package/build/esm/packages/aurora/src/components/color_picker/components/color_picker_inputs/color_picker_inputs_hex/color_picker_inputs_hex_input.js +85 -0
- package/build/esm/packages/aurora/src/components/color_picker/components/color_picker_inputs/{color_picker_inputs_hex.js.map → color_picker_inputs_hex/color_picker_inputs_hex_input.js.map} +1 -1
- package/build/esm/packages/aurora/src/components/color_picker/components/color_picker_inputs/color_picker_inputs_rgba.js +3 -3
- package/build/esm/packages/aurora/src/components/color_picker/components/pure_color_picker.js +16 -2
- package/build/esm/packages/aurora/src/components/color_picker/components/pure_color_picker.js.map +1 -1
- package/build/esm/packages/aurora/src/components/color_picker/hooks/setup_color_picker.d.ts +2 -0
- package/build/esm/packages/aurora/src/components/color_picker/hooks/setup_color_picker.js +6 -0
- package/build/esm/packages/aurora/src/components/color_picker/hooks/setup_color_picker.js.map +1 -1
- package/build/esm/packages/aurora/src/components/input/input.js +5 -2
- package/build/esm/packages/aurora/src/components/input/input.js.map +1 -1
- package/build/esm/packages/aurora/src/components/input/input_types.d.ts +1 -0
- package/build/esm/packages/aurora/src/components/tooltip/components/tooltip_content.js +1 -1
- package/package.json +1 -1
- package/build/cjs/packages/aurora/src/components/color_picker/components/color_picker_inputs/color_picker_inputs_hex.js +0 -87
- package/build/esm/packages/aurora/src/components/color_picker/components/color_picker_inputs/color_picker_inputs_hex.js +0 -79
- /package/build/esm/packages/aurora/src/components/color_picker/components/{color_label_input.d.ts → color_picker_input.d.ts} +0 -0
- /package/build/esm/packages/aurora/src/components/color_picker/components/color_picker_inputs/{color_picker_inputs_hex.d.ts → color_picker_inputs_hex/color_picker_inputs_hex.d.ts} +0 -0
package/build/esm/packages/aurora/src/components/color_picker/components/color_picker_content.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA
|
|
1
|
+
{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA,0BAA0B,uFAA2F;AACrH;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;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,10 +1,10 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
2
|
import { useTranslation } from '../../../../../../external/react-i18next/dist/es/useTranslation.js';
|
|
3
3
|
import { slicedToArray as _slicedToArray } from '../../../../../../_virtual/_rollupPluginBabelHelpers.js';
|
|
4
|
-
import { Input } from '../../input/input.js';
|
|
5
4
|
import { GRADIENT_TYPES } from '../color_picker_constants.js';
|
|
6
5
|
import { useColorPicker } from '../hooks/use_color_picker.js';
|
|
7
6
|
import { ColorPickerUtils } from '../color_picker_utils.js';
|
|
7
|
+
import { ColorPickerInputsHexInput } from './color_picker_inputs/color_picker_inputs_hex/color_picker_inputs_hex_input.js';
|
|
8
8
|
|
|
9
9
|
var ColorPickerInput = function ColorPickerInput(_ref) {
|
|
10
10
|
var id = _ref.id,
|
|
@@ -13,8 +13,8 @@ var ColorPickerInput = function ColorPickerInput(_ref) {
|
|
|
13
13
|
disabled = _ref.disabled,
|
|
14
14
|
preElement = _ref.preElement;
|
|
15
15
|
var _useColorPicker = useColorPicker(),
|
|
16
|
-
hex = _useColorPicker.hex,
|
|
17
16
|
color = _useColorPicker.color,
|
|
17
|
+
typedInputValue = _useColorPicker.typedInputValue,
|
|
18
18
|
isCurrentValueGradient = _useColorPicker.isCurrentValueGradient,
|
|
19
19
|
gradientType = _useColorPicker.gradientType,
|
|
20
20
|
colorVariables = _useColorPicker.colorVariables,
|
|
@@ -22,21 +22,26 @@ var ColorPickerInput = function ColorPickerInput(_ref) {
|
|
|
22
22
|
var _useTranslation = useTranslation(),
|
|
23
23
|
_useTranslation2 = _slicedToArray(_useTranslation, 1),
|
|
24
24
|
t = _useTranslation2[0];
|
|
25
|
+
var typedInputValueHasFullHexLength = typedInputValue.length >= 6;
|
|
25
26
|
var variableName = (colorVariables === null || colorVariables === void 0 ? void 0 : colorVariables.variables) && ColorPickerUtils.findVariable(colorVariables.variables, color) || shadeName || '';
|
|
26
|
-
var colorName =
|
|
27
|
-
if (isCurrentValueGradient)
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
27
|
+
var colorName = undefined;
|
|
28
|
+
if (isCurrentValueGradient) {
|
|
29
|
+
colorName = gradientType === GRADIENT_TYPES.linear ? t('Linear gradient') : t('Radial gradient');
|
|
30
|
+
} else if (variableName && typedInputValueHasFullHexLength) {
|
|
31
|
+
colorName = "".concat(t(variableName));
|
|
32
|
+
}
|
|
33
|
+
return /*#__PURE__*/React.createElement(ColorPickerInputsHexInput, {
|
|
32
34
|
id: id,
|
|
33
35
|
name: name,
|
|
34
36
|
value: colorName,
|
|
35
37
|
errors: errors,
|
|
36
38
|
disabled: disabled,
|
|
37
|
-
|
|
39
|
+
className: "aurora-cursor-pointer ".concat(colorName ? 'aurora-cursor-pointer' : ''),
|
|
40
|
+
preElement: preElement,
|
|
41
|
+
readOnly: !!colorName,
|
|
42
|
+
hasCursorPointer: !!colorName
|
|
38
43
|
});
|
|
39
44
|
};
|
|
40
45
|
|
|
41
46
|
export { ColorPickerInput };
|
|
42
|
-
//# sourceMappingURL=
|
|
47
|
+
//# sourceMappingURL=color_picker_input.js.map
|
|
@@ -1 +1 @@
|
|
|
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;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,+BAA+B,oEAAwE;AACvG;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}
|
|
@@ -2,7 +2,7 @@ import React, { useState } from 'react';
|
|
|
2
2
|
import { slicedToArray as _slicedToArray } from '../../../../../../../_virtual/_rollupPluginBabelHelpers.js';
|
|
3
3
|
import { Stack } from '../../../stack/stack.js';
|
|
4
4
|
import { COLOR_PICKER_TYPES } from '../../color_picker_constants.js';
|
|
5
|
-
import { ColorPickerInputsHex } from './color_picker_inputs_hex.js';
|
|
5
|
+
import { ColorPickerInputsHex } from './color_picker_inputs_hex/color_picker_inputs_hex.js';
|
|
6
6
|
import { ColorPickerInputsRgba } from './color_picker_inputs_rgba.js';
|
|
7
7
|
import { CurrentColorPreview } from '../current_color_preview.js';
|
|
8
8
|
|
|
@@ -0,0 +1,12 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import { ColorPickerInputsHexInput } from './color_picker_inputs_hex_input.js';
|
|
3
|
+
import { ColorPickerInputsHexAlpha } from './color_picker_inputs_hex_alpha.js';
|
|
4
|
+
|
|
5
|
+
var ColorPickerInputsHex = function ColorPickerInputsHex() {
|
|
6
|
+
return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(ColorPickerInputsHexInput, {
|
|
7
|
+
className: "aurora-h-full aurora-text-xs"
|
|
8
|
+
}), /*#__PURE__*/React.createElement(ColorPickerInputsHexAlpha, null));
|
|
9
|
+
};
|
|
10
|
+
|
|
11
|
+
export { ColorPickerInputsHex };
|
|
12
|
+
//# sourceMappingURL=color_picker_inputs_hex.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}
|
|
@@ -0,0 +1,25 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import { useColorPicker } from '../../../hooks/use_color_picker.js';
|
|
3
|
+
import { ColorPickerUtils } from '../../../color_picker_utils.js';
|
|
4
|
+
|
|
5
|
+
var ColorPickerInputsHexAlpha = function ColorPickerInputsHexAlpha() {
|
|
6
|
+
var _useColorPicker = useColorPicker(),
|
|
7
|
+
handleOnChangeAlpha = _useColorPicker.handleOnChangeAlpha,
|
|
8
|
+
alpha = _useColorPicker.alpha;
|
|
9
|
+
return /*#__PURE__*/React.createElement("div", {
|
|
10
|
+
className: "aurora-flex aurora-rounded-6 focus aurora-text aurora-w-[46px] aurora-flex-none aurora-px-1 aurora-items-center"
|
|
11
|
+
}, /*#__PURE__*/React.createElement("input", {
|
|
12
|
+
className: "aurora-w-full focus:aurora-outline-none focus:aurora-shadow-none aurora-rounded-6 aurora-h-full aurora-text-xs",
|
|
13
|
+
type: "text",
|
|
14
|
+
value: Math.round(alpha),
|
|
15
|
+
onChange: function onChange(e) {
|
|
16
|
+
return handleOnChangeAlpha(Number(e.target.value));
|
|
17
|
+
},
|
|
18
|
+
onKeyDown: ColorPickerUtils.preventTypingLetters
|
|
19
|
+
}), /*#__PURE__*/React.createElement("div", {
|
|
20
|
+
className: "aurora-text-xs aurora-pl-0.5"
|
|
21
|
+
}, "%"));
|
|
22
|
+
};
|
|
23
|
+
|
|
24
|
+
export { ColorPickerInputsHexAlpha };
|
|
25
|
+
//# sourceMappingURL=color_picker_inputs_hex_alpha.js.map
|
|
@@ -0,0 +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;"}
|
|
@@ -0,0 +1,3 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import { TInputProps } from "../../../../input/input_types";
|
|
3
|
+
export declare const ColorPickerInputsHexInput: ({ id, name, value: initialValue, type, errors, disabled, className, preElement, readOnly, hasCursorPointer }: TInputProps) => React.JSX.Element;
|
|
@@ -0,0 +1,85 @@
|
|
|
1
|
+
import React, { useState, useRef, useEffect } from 'react';
|
|
2
|
+
import { slicedToArray as _slicedToArray } from '../../../../../../../../_virtual/_rollupPluginBabelHelpers.js';
|
|
3
|
+
import { Input } from '../../../../input/input.js';
|
|
4
|
+
import { useColorPicker } from '../../../hooks/use_color_picker.js';
|
|
5
|
+
import tinycolor from '../../../../../../../../external/tinycolor2/esm/tinycolor.js';
|
|
6
|
+
import { usePicker } from '../../../../../../../../external/react-best-gradient-color-picker/dist/esm/context.js';
|
|
7
|
+
import { ColorPickerUtils } from '../../../color_picker_utils.js';
|
|
8
|
+
|
|
9
|
+
var ColorPickerInputsHexInput = function ColorPickerInputsHexInput(_ref) {
|
|
10
|
+
var id = _ref.id,
|
|
11
|
+
name = _ref.name,
|
|
12
|
+
initialValue = _ref.value,
|
|
13
|
+
_ref$type = _ref.type,
|
|
14
|
+
type = _ref$type === void 0 ? 'text' : _ref$type,
|
|
15
|
+
errors = _ref.errors,
|
|
16
|
+
disabled = _ref.disabled,
|
|
17
|
+
className = _ref.className,
|
|
18
|
+
preElement = _ref.preElement,
|
|
19
|
+
readOnly = _ref.readOnly,
|
|
20
|
+
hasCursorPointer = _ref.hasCursorPointer;
|
|
21
|
+
var _useColorPicker = useColorPicker(),
|
|
22
|
+
setColor = _useColorPicker.setColor,
|
|
23
|
+
setTypedInputValue = _useColorPicker.setTypedInputValue,
|
|
24
|
+
hex = _useColorPicker.hex,
|
|
25
|
+
isCurrentValueGradient = _useColorPicker.isCurrentValueGradient,
|
|
26
|
+
gradientType = _useColorPicker.gradientType;
|
|
27
|
+
var _useState = useState(hex),
|
|
28
|
+
_useState2 = _slicedToArray(_useState, 2),
|
|
29
|
+
value = _useState2[0],
|
|
30
|
+
setValue = _useState2[1];
|
|
31
|
+
var valueRef = useRef(value);
|
|
32
|
+
var _useState3 = useState(false),
|
|
33
|
+
_useState4 = _slicedToArray(_useState3, 2),
|
|
34
|
+
isDisabled = _useState4[0],
|
|
35
|
+
setIsDisabled = _useState4[1];
|
|
36
|
+
var _usePicker = usePicker(),
|
|
37
|
+
colors = _usePicker.colors,
|
|
38
|
+
selectedColor = _usePicker.selectedColor,
|
|
39
|
+
createGradientStr = _usePicker.createGradientStr;
|
|
40
|
+
var handleOnChange = function handleOnChange(event) {
|
|
41
|
+
var inputValue = event.target.value.replace('%', '');
|
|
42
|
+
setTypedInputValue(inputValue);
|
|
43
|
+
setValue(inputValue);
|
|
44
|
+
valueRef.current = inputValue;
|
|
45
|
+
if (!tinycolor(inputValue).isValid()) return;
|
|
46
|
+
if (isCurrentValueGradient && gradientType) {
|
|
47
|
+
var newColors = ColorPickerUtils.updateGradientWithActiveColor(colors, selectedColor, inputValue);
|
|
48
|
+
createGradientStr(newColors);
|
|
49
|
+
} else {
|
|
50
|
+
setColor(inputValue);
|
|
51
|
+
}
|
|
52
|
+
};
|
|
53
|
+
var hexFocus = function hexFocus() {
|
|
54
|
+
setIsDisabled(true);
|
|
55
|
+
};
|
|
56
|
+
var hexBlur = function hexBlur() {
|
|
57
|
+
setIsDisabled(false);
|
|
58
|
+
};
|
|
59
|
+
useEffect(function () {
|
|
60
|
+
if (hex === valueRef.current) return;
|
|
61
|
+
if (!isDisabled) {
|
|
62
|
+
setValue(hex);
|
|
63
|
+
valueRef.current = hex;
|
|
64
|
+
}
|
|
65
|
+
}, [hex, isDisabled]);
|
|
66
|
+
return /*#__PURE__*/React.createElement(Input, {
|
|
67
|
+
className: className,
|
|
68
|
+
type: type,
|
|
69
|
+
preElement: preElement,
|
|
70
|
+
id: id,
|
|
71
|
+
name: name,
|
|
72
|
+
errors: errors,
|
|
73
|
+
disabled: disabled,
|
|
74
|
+
maxLength: 8,
|
|
75
|
+
value: initialValue || value.toUpperCase(),
|
|
76
|
+
onChange: handleOnChange,
|
|
77
|
+
onBlur: hexBlur,
|
|
78
|
+
onFocus: hexFocus,
|
|
79
|
+
readOnly: readOnly,
|
|
80
|
+
hasCursorPointer: hasCursorPointer
|
|
81
|
+
});
|
|
82
|
+
};
|
|
83
|
+
|
|
84
|
+
export { ColorPickerInputsHexInput };
|
|
85
|
+
//# sourceMappingURL=color_picker_inputs_hex_input.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA,sBAAsB,
|
|
1
|
+
{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA,sBAAsB,8DAAkE;AACxF,0BAA0B,uFAA2F;AACrH;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;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 @@ var ColorPickerInputsRgba = function ColorPickerInputsRgba() {
|
|
|
12
12
|
alpha = _useColorPicker.alpha,
|
|
13
13
|
rgbaArr = _useColorPicker.rgbaArr;
|
|
14
14
|
return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Input, {
|
|
15
|
-
className: "aurora-h-full aurora-
|
|
15
|
+
className: "aurora-h-full aurora-text-xs",
|
|
16
16
|
type: "text",
|
|
17
17
|
value: rgbaArr[0],
|
|
18
18
|
onChange: function onChange(e) {
|
|
@@ -20,7 +20,7 @@ var ColorPickerInputsRgba = function ColorPickerInputsRgba() {
|
|
|
20
20
|
},
|
|
21
21
|
onKeyDown: ColorPickerUtils.preventTypingLetters
|
|
22
22
|
}), /*#__PURE__*/React.createElement(Input, {
|
|
23
|
-
className: "aurora-h-full aurora-
|
|
23
|
+
className: "aurora-h-full aurora-text-xs",
|
|
24
24
|
type: "text",
|
|
25
25
|
value: rgbaArr[1],
|
|
26
26
|
onChange: function onChange(e) {
|
|
@@ -28,7 +28,7 @@ var ColorPickerInputsRgba = function ColorPickerInputsRgba() {
|
|
|
28
28
|
},
|
|
29
29
|
onKeyDown: ColorPickerUtils.preventTypingLetters
|
|
30
30
|
}), /*#__PURE__*/React.createElement(Input, {
|
|
31
|
-
className: "aurora-h-full aurora-
|
|
31
|
+
className: "aurora-h-full aurora-text-xs",
|
|
32
32
|
type: "text",
|
|
33
33
|
value: rgbaArr[2],
|
|
34
34
|
onChange: function onChange(e) {
|
package/build/esm/packages/aurora/src/components/color_picker/components/pure_color_picker.js
CHANGED
|
@@ -3,10 +3,14 @@ import { objectWithoutProperties as _objectWithoutProperties, objectSpread2 as _
|
|
|
3
3
|
import { cn } from '../../../utilities/cn.js';
|
|
4
4
|
import { Popover } from '../../popover/popover.js';
|
|
5
5
|
import { PopoverTrigger } from '../../popover/components/popover_trigger.js';
|
|
6
|
+
import { COLOR_PICKER_WIDTH, COLOR_PICKER_HEIGHT } from '../color_picker_constants.js';
|
|
6
7
|
import { useColorPicker } from '../hooks/use_color_picker.js';
|
|
7
8
|
import { ColorPickerSwatch } from './color_picker_swatch.js';
|
|
9
|
+
import { objectToString } from '../../../../../../external/react-best-gradient-color-picker/dist/esm/utils/utils.js';
|
|
10
|
+
import PickerContextWrapper from '../../../../../../external/react-best-gradient-color-picker/dist/esm/context.js';
|
|
11
|
+
import { getStyles } from '../../../../../../external/react-best-gradient-color-picker/dist/esm/styles/styles.js';
|
|
8
12
|
import { ColorPickerContent } from './color_picker_content.js';
|
|
9
|
-
import { ColorPickerInput } from './
|
|
13
|
+
import { ColorPickerInput } from './color_picker_input.js';
|
|
10
14
|
import { PopoverContent } from '../../popover/components/popover_content.js';
|
|
11
15
|
|
|
12
16
|
var _excluded = ["id", "name", "errors", "disabled", "className", "children", "triggerClassName"];
|
|
@@ -21,9 +25,12 @@ var ColorPickerPure = function ColorPickerPure(_ref) {
|
|
|
21
25
|
rest = _objectWithoutProperties(_ref, _excluded);
|
|
22
26
|
var _useColorPicker = useColorPicker(),
|
|
23
27
|
color = _useColorPicker.color,
|
|
28
|
+
setColor = _useColorPicker.setColor,
|
|
24
29
|
isColorPickerOpened = _useColorPicker.isColorPickerOpened,
|
|
25
30
|
setIsColorPickerOpened = _useColorPicker.setIsColorPickerOpened,
|
|
26
31
|
handleSave = _useColorPicker.handleSave;
|
|
32
|
+
var safeValue = objectToString(color);
|
|
33
|
+
var defaultStyles = getStyles(true);
|
|
27
34
|
var handleClosePopover = function handleClosePopover() {
|
|
28
35
|
handleSave();
|
|
29
36
|
setIsColorPickerOpened(false);
|
|
@@ -33,6 +40,13 @@ var ColorPickerPure = function ColorPickerPure(_ref) {
|
|
|
33
40
|
onOpenChange: function onOpenChange(value) {
|
|
34
41
|
return !value && handleClosePopover();
|
|
35
42
|
}
|
|
43
|
+
}, /*#__PURE__*/React.createElement(PickerContextWrapper, {
|
|
44
|
+
value: safeValue,
|
|
45
|
+
defaultStyles: defaultStyles,
|
|
46
|
+
onChange: setColor,
|
|
47
|
+
squareWidth: COLOR_PICKER_WIDTH,
|
|
48
|
+
squareHeight: COLOR_PICKER_HEIGHT,
|
|
49
|
+
hideOpacity: false
|
|
36
50
|
}, /*#__PURE__*/React.createElement(PopoverTrigger, {
|
|
37
51
|
onClick: function onClick() {
|
|
38
52
|
return setIsColorPickerOpened(true);
|
|
@@ -51,7 +65,7 @@ var ColorPickerPure = function ColorPickerPure(_ref) {
|
|
|
51
65
|
})
|
|
52
66
|
})), children), /*#__PURE__*/React.createElement(PopoverContent, _objectSpread2({
|
|
53
67
|
className: cn('aurora-rounded-16 aurora-overflow-hidden aurora-z-[99999] js__aurora-color-picker', className)
|
|
54
|
-
}, rest), /*#__PURE__*/React.createElement(ColorPickerContent, null)));
|
|
68
|
+
}, rest), /*#__PURE__*/React.createElement(ColorPickerContent, null))));
|
|
55
69
|
};
|
|
56
70
|
|
|
57
71
|
export default ColorPickerPure;
|
package/build/esm/packages/aurora/src/components/color_picker/components/pure_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;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,+BAA+B,qFAAyF;AACxH,iCAAiC,iFAAqF;AACtH,0BAA0B,uFAA2F;AACrH;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;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,6 +12,8 @@ declare const useSetupColorPicker: ({ value, onChange, onCancel, onSave, colorVa
|
|
|
12
12
|
color: string;
|
|
13
13
|
previousSolidColor: string;
|
|
14
14
|
previousGradientColor: string;
|
|
15
|
+
typedInputValue: string;
|
|
16
|
+
setTypedInputValue: import("react").Dispatch<import("react").SetStateAction<string>>;
|
|
15
17
|
setColor: (newColor: string, shadeName?: string) => void;
|
|
16
18
|
hex: string;
|
|
17
19
|
hslArr: number[];
|
|
@@ -34,6 +34,10 @@ var useSetupColorPicker = function useSetupColorPicker(_ref) {
|
|
|
34
34
|
_useState8 = _slicedToArray(_useState7, 2),
|
|
35
35
|
shadeName = _useState8[0],
|
|
36
36
|
setShadeName = _useState8[1];
|
|
37
|
+
var _useState9 = useState(ColorPickerUtils.getHexValueWithoutHash(colorValue)),
|
|
38
|
+
_useState10 = _slicedToArray(_useState9, 2),
|
|
39
|
+
typedInputValue = _useState10[0],
|
|
40
|
+
setTypedInputValue = _useState10[1];
|
|
37
41
|
var _getDetails = getDetails(colorValue),
|
|
38
42
|
degrees = _getDetails.degrees;
|
|
39
43
|
var savedDegRef = useRef(isNaN(degrees) ? 180 : degrees);
|
|
@@ -108,6 +112,8 @@ var useSetupColorPicker = function useSetupColorPicker(_ref) {
|
|
|
108
112
|
color: colorValue,
|
|
109
113
|
previousSolidColor: previousSolidColor,
|
|
110
114
|
previousGradientColor: previousGradientColor,
|
|
115
|
+
typedInputValue: typedInputValue,
|
|
116
|
+
setTypedInputValue: setTypedInputValue,
|
|
111
117
|
setColor: setColor,
|
|
112
118
|
hex: hex,
|
|
113
119
|
hslArr: hslArr,
|
package/build/esm/packages/aurora/src/components/color_picker/hooks/setup_color_picker.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA,2BAA2B,qFAAyF;AACpH,+BAA+B,8FAAkG;AACjI;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;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,2BAA2B,qFAAyF;AACpH,+BAA+B,8FAAkG;AACjI;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}
|
|
@@ -3,7 +3,7 @@ import { objectWithoutProperties as _objectWithoutProperties, objectSpread2 as _
|
|
|
3
3
|
import { cn } from '../../utilities/cn.js';
|
|
4
4
|
import { inputVariants } from './input_variants.js';
|
|
5
5
|
|
|
6
|
-
var _excluded = ["preElement", "postElement", "errors", "className", "id", "name", "value", "defaultValue", "placeholder", "disabled", "readOnly", "type", "onChange", "onKeyDown", "onKeyUp"];
|
|
6
|
+
var _excluded = ["preElement", "postElement", "errors", "className", "id", "name", "value", "defaultValue", "placeholder", "disabled", "readOnly", "type", "hasCursorPointer", "onChange", "onKeyDown", "onKeyUp"];
|
|
7
7
|
var Input = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
|
|
8
8
|
var preElement = _ref.preElement,
|
|
9
9
|
postElement = _ref.postElement,
|
|
@@ -18,6 +18,7 @@ var Input = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
|
|
|
18
18
|
disabled = _ref.disabled,
|
|
19
19
|
readOnly = _ref.readOnly,
|
|
20
20
|
type = _ref.type,
|
|
21
|
+
hasCursorPointer = _ref.hasCursorPointer,
|
|
21
22
|
onChange = _ref.onChange,
|
|
22
23
|
onKeyDown = _ref.onKeyDown,
|
|
23
24
|
onKeyUp = _ref.onKeyUp,
|
|
@@ -43,7 +44,9 @@ var Input = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
|
|
|
43
44
|
onKeyDown: onKeyDown,
|
|
44
45
|
onKeyUp: onKeyUp,
|
|
45
46
|
type: type,
|
|
46
|
-
className: cn('aurora-h-[40px] aurora-w-full focus:aurora-outline-none focus:aurora-shadow-none aurora-px-2 aurora-rounded-6'
|
|
47
|
+
className: cn('aurora-h-[40px] aurora-w-full focus:aurora-outline-none focus:aurora-shadow-none aurora-px-2 aurora-rounded-6', {
|
|
48
|
+
'aurora-cursor-pointer': hasCursorPointer
|
|
49
|
+
})
|
|
47
50
|
})), postElement && /*#__PURE__*/React.createElement("div", {
|
|
48
51
|
className: "aurora-flex aurora-h-full aurora-right-0 aurora-pr-2 aurora-items-center"
|
|
49
52
|
}, postElement));
|
|
@@ -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;"}
|
|
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;"}
|
|
@@ -14,7 +14,7 @@ var TooltipContent = /*#__PURE__*/forwardRef(function (_ref, ref) {
|
|
|
14
14
|
return /*#__PURE__*/createElement(Portal, null, /*#__PURE__*/createElement(Content, _objectSpread2({
|
|
15
15
|
ref: ref,
|
|
16
16
|
sideOffset: sideOffset,
|
|
17
|
-
className: cn('aurora-z-[
|
|
17
|
+
className: cn('aurora-z-[99999] aurora-max-w-[320px] aurora-shadow aurora-overflow-hidden aurora-border aurora-rounded-8 aurora-px-3 aurora-py-2 aurora-text-xs aurora-animate-in aurora-fade-in-0 data-[state=closed]:aurora-animate-out data-[state=closed]:aurora-fade-out-0 data-[side=bottom]:aurora-slide-in-from-top-2 data-[side=left]:aurora-slide-in-from-right-2 data-[side=right]:aurora-slide-in-from-left-2 data-[side=top]:aurora-slide-in-from-bottom-2', 'js__aurora-tooltip-content', tooltipContentVariants({
|
|
18
18
|
variant: variant
|
|
19
19
|
}), className)
|
|
20
20
|
}, props)));
|
package/package.json
CHANGED
|
@@ -1,87 +0,0 @@
|
|
|
1
|
-
'use strict';
|
|
2
|
-
|
|
3
|
-
Object.defineProperty(exports, '__esModule', { value: true });
|
|
4
|
-
|
|
5
|
-
var React = require('react');
|
|
6
|
-
var _rollupPluginBabelHelpers = require('../../../../../../../_virtual/_rollupPluginBabelHelpers.js');
|
|
7
|
-
var input = require('../../../input/input.js');
|
|
8
|
-
var use_color_picker = require('../../hooks/use_color_picker.js');
|
|
9
|
-
var tinycolor = require('../../../../../../../external/tinycolor2/esm/tinycolor.js');
|
|
10
|
-
var context = require('../../../../../../../external/react-best-gradient-color-picker/dist/esm/context.js');
|
|
11
|
-
var color_picker_utils = require('../../color_picker_utils.js');
|
|
12
|
-
|
|
13
|
-
function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
|
|
14
|
-
|
|
15
|
-
var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
|
|
16
|
-
|
|
17
|
-
var ColorPickerInputsHex = function ColorPickerInputsHex() {
|
|
18
|
-
var _useColorPicker = use_color_picker.useColorPicker(),
|
|
19
|
-
setColor = _useColorPicker.setColor,
|
|
20
|
-
hex = _useColorPicker.hex,
|
|
21
|
-
handleOnChangeAlpha = _useColorPicker.handleOnChangeAlpha,
|
|
22
|
-
alpha = _useColorPicker.alpha,
|
|
23
|
-
isCurrentValueGradient = _useColorPicker.isCurrentValueGradient,
|
|
24
|
-
gradientType = _useColorPicker.gradientType;
|
|
25
|
-
var _useState = React.useState(hex),
|
|
26
|
-
_useState2 = _rollupPluginBabelHelpers.slicedToArray(_useState, 2),
|
|
27
|
-
value = _useState2[0],
|
|
28
|
-
setValue = _useState2[1];
|
|
29
|
-
var valueRef = React.useRef(value);
|
|
30
|
-
var _useState3 = React.useState(false),
|
|
31
|
-
_useState4 = _rollupPluginBabelHelpers.slicedToArray(_useState3, 2),
|
|
32
|
-
disable = _useState4[0],
|
|
33
|
-
setDisable = _useState4[1];
|
|
34
|
-
var _usePicker = context.usePicker(),
|
|
35
|
-
colors = _usePicker.colors,
|
|
36
|
-
selectedColor = _usePicker.selectedColor,
|
|
37
|
-
createGradientStr = _usePicker.createGradientStr;
|
|
38
|
-
var handleOnChange = function handleOnChange(event) {
|
|
39
|
-
var inputValue = event.target.value.replace('%', '');
|
|
40
|
-
setValue(inputValue);
|
|
41
|
-
valueRef.current = inputValue;
|
|
42
|
-
if (!tinycolor['default'](inputValue).isValid()) return;
|
|
43
|
-
if (isCurrentValueGradient && gradientType) {
|
|
44
|
-
var newColors = color_picker_utils.ColorPickerUtils.updateGradientWithActiveColor(colors, selectedColor, inputValue);
|
|
45
|
-
createGradientStr(newColors);
|
|
46
|
-
} else {
|
|
47
|
-
setColor(inputValue);
|
|
48
|
-
}
|
|
49
|
-
};
|
|
50
|
-
var hexFocus = function hexFocus() {
|
|
51
|
-
setDisable(true);
|
|
52
|
-
};
|
|
53
|
-
var hexBlur = function hexBlur() {
|
|
54
|
-
setDisable(false);
|
|
55
|
-
};
|
|
56
|
-
React.useEffect(function () {
|
|
57
|
-
if (hex === valueRef.current) return;
|
|
58
|
-
if (!disable) {
|
|
59
|
-
setValue(hex);
|
|
60
|
-
valueRef.current = hex;
|
|
61
|
-
}
|
|
62
|
-
}, [hex, disable]);
|
|
63
|
-
return /*#__PURE__*/React__default['default'].createElement(React__default['default'].Fragment, null, /*#__PURE__*/React__default['default'].createElement(input.Input, {
|
|
64
|
-
className: "aurora-h-full aurora-px-2 aurora-text-xs",
|
|
65
|
-
type: "text",
|
|
66
|
-
maxLength: 8,
|
|
67
|
-
value: value.toUpperCase(),
|
|
68
|
-
onChange: handleOnChange,
|
|
69
|
-
onBlur: hexBlur,
|
|
70
|
-
onFocus: hexFocus
|
|
71
|
-
}), /*#__PURE__*/React__default['default'].createElement("div", {
|
|
72
|
-
className: "aurora-flex aurora-rounded-6 focus aurora-text aurora-w-[46px] aurora-flex-none aurora-px-1 aurora-items-center"
|
|
73
|
-
}, /*#__PURE__*/React__default['default'].createElement("input", {
|
|
74
|
-
className: "aurora-w-full focus:aurora-outline-none focus:aurora-shadow-none aurora-rounded-6 aurora-h-full aurora-text-xs",
|
|
75
|
-
type: "text",
|
|
76
|
-
value: Math.round(alpha),
|
|
77
|
-
onChange: function onChange(e) {
|
|
78
|
-
return handleOnChangeAlpha(Number(e.target.value));
|
|
79
|
-
},
|
|
80
|
-
onKeyDown: color_picker_utils.ColorPickerUtils.preventTypingLetters
|
|
81
|
-
}), /*#__PURE__*/React__default['default'].createElement("div", {
|
|
82
|
-
className: "aurora-text-xs aurora-pl-0.5"
|
|
83
|
-
}, "%")));
|
|
84
|
-
};
|
|
85
|
-
|
|
86
|
-
exports.ColorPickerInputsHex = ColorPickerInputsHex;
|
|
87
|
-
//# sourceMappingURL=color_picker_inputs_hex.js.map
|
|
@@ -1,79 +0,0 @@
|
|
|
1
|
-
import React, { useState, useRef, useEffect } from 'react';
|
|
2
|
-
import { slicedToArray as _slicedToArray } from '../../../../../../../_virtual/_rollupPluginBabelHelpers.js';
|
|
3
|
-
import { Input } from '../../../input/input.js';
|
|
4
|
-
import { useColorPicker } from '../../hooks/use_color_picker.js';
|
|
5
|
-
import tinycolor from '../../../../../../../external/tinycolor2/esm/tinycolor.js';
|
|
6
|
-
import { usePicker } from '../../../../../../../external/react-best-gradient-color-picker/dist/esm/context.js';
|
|
7
|
-
import { ColorPickerUtils } from '../../color_picker_utils.js';
|
|
8
|
-
|
|
9
|
-
var ColorPickerInputsHex = function ColorPickerInputsHex() {
|
|
10
|
-
var _useColorPicker = useColorPicker(),
|
|
11
|
-
setColor = _useColorPicker.setColor,
|
|
12
|
-
hex = _useColorPicker.hex,
|
|
13
|
-
handleOnChangeAlpha = _useColorPicker.handleOnChangeAlpha,
|
|
14
|
-
alpha = _useColorPicker.alpha,
|
|
15
|
-
isCurrentValueGradient = _useColorPicker.isCurrentValueGradient,
|
|
16
|
-
gradientType = _useColorPicker.gradientType;
|
|
17
|
-
var _useState = useState(hex),
|
|
18
|
-
_useState2 = _slicedToArray(_useState, 2),
|
|
19
|
-
value = _useState2[0],
|
|
20
|
-
setValue = _useState2[1];
|
|
21
|
-
var valueRef = useRef(value);
|
|
22
|
-
var _useState3 = useState(false),
|
|
23
|
-
_useState4 = _slicedToArray(_useState3, 2),
|
|
24
|
-
disable = _useState4[0],
|
|
25
|
-
setDisable = _useState4[1];
|
|
26
|
-
var _usePicker = usePicker(),
|
|
27
|
-
colors = _usePicker.colors,
|
|
28
|
-
selectedColor = _usePicker.selectedColor,
|
|
29
|
-
createGradientStr = _usePicker.createGradientStr;
|
|
30
|
-
var handleOnChange = function handleOnChange(event) {
|
|
31
|
-
var inputValue = event.target.value.replace('%', '');
|
|
32
|
-
setValue(inputValue);
|
|
33
|
-
valueRef.current = inputValue;
|
|
34
|
-
if (!tinycolor(inputValue).isValid()) return;
|
|
35
|
-
if (isCurrentValueGradient && gradientType) {
|
|
36
|
-
var newColors = ColorPickerUtils.updateGradientWithActiveColor(colors, selectedColor, inputValue);
|
|
37
|
-
createGradientStr(newColors);
|
|
38
|
-
} else {
|
|
39
|
-
setColor(inputValue);
|
|
40
|
-
}
|
|
41
|
-
};
|
|
42
|
-
var hexFocus = function hexFocus() {
|
|
43
|
-
setDisable(true);
|
|
44
|
-
};
|
|
45
|
-
var hexBlur = function hexBlur() {
|
|
46
|
-
setDisable(false);
|
|
47
|
-
};
|
|
48
|
-
useEffect(function () {
|
|
49
|
-
if (hex === valueRef.current) return;
|
|
50
|
-
if (!disable) {
|
|
51
|
-
setValue(hex);
|
|
52
|
-
valueRef.current = hex;
|
|
53
|
-
}
|
|
54
|
-
}, [hex, disable]);
|
|
55
|
-
return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Input, {
|
|
56
|
-
className: "aurora-h-full aurora-px-2 aurora-text-xs",
|
|
57
|
-
type: "text",
|
|
58
|
-
maxLength: 8,
|
|
59
|
-
value: value.toUpperCase(),
|
|
60
|
-
onChange: handleOnChange,
|
|
61
|
-
onBlur: hexBlur,
|
|
62
|
-
onFocus: hexFocus
|
|
63
|
-
}), /*#__PURE__*/React.createElement("div", {
|
|
64
|
-
className: "aurora-flex aurora-rounded-6 focus aurora-text aurora-w-[46px] aurora-flex-none aurora-px-1 aurora-items-center"
|
|
65
|
-
}, /*#__PURE__*/React.createElement("input", {
|
|
66
|
-
className: "aurora-w-full focus:aurora-outline-none focus:aurora-shadow-none aurora-rounded-6 aurora-h-full aurora-text-xs",
|
|
67
|
-
type: "text",
|
|
68
|
-
value: Math.round(alpha),
|
|
69
|
-
onChange: function onChange(e) {
|
|
70
|
-
return handleOnChangeAlpha(Number(e.target.value));
|
|
71
|
-
},
|
|
72
|
-
onKeyDown: ColorPickerUtils.preventTypingLetters
|
|
73
|
-
}), /*#__PURE__*/React.createElement("div", {
|
|
74
|
-
className: "aurora-text-xs aurora-pl-0.5"
|
|
75
|
-
}, "%")));
|
|
76
|
-
};
|
|
77
|
-
|
|
78
|
-
export { ColorPickerInputsHex };
|
|
79
|
-
//# sourceMappingURL=color_picker_inputs_hex.js.map
|
|
File without changes
|