@dreamcommerce/aurora 2.12.1-49 → 2.12.1-50
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-footer.js +1 -1
- package/build/cjs/packages/aurora/src/components/color_picker_new/components/color-picker-header.js +1 -1
- package/build/cjs/packages/aurora/src/components/color_picker_new/components/color-picker-swatches.js +1 -1
- package/build/cjs/packages/aurora/src/components/color_picker_new/components/pure-color-picker.js +43 -0
- package/build/cjs/packages/aurora/src/components/color_picker_new/components/pure-color-picker.js.map +1 -0
- package/build/cjs/packages/aurora/src/components/color_picker_new/hooks/use_color_picker.js +6 -3
- 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 +4 -29
- package/build/cjs/packages/aurora/src/components/color_picker_new/index.js.map +1 -1
- package/build/esm/packages/aurora/src/components/color_picker_new/components/color-picker-footer.js +1 -1
- package/build/esm/packages/aurora/src/components/color_picker_new/components/color-picker-header.js +1 -1
- package/build/esm/packages/aurora/src/components/color_picker_new/components/color-picker-swatches.js +1 -1
- package/build/esm/packages/aurora/src/components/color_picker_new/components/pure-color-picker.js +32 -19
- package/build/esm/packages/aurora/src/components/color_picker_new/components/pure-color-picker.js.map +1 -1
- package/build/esm/packages/aurora/src/components/color_picker_new/hooks/use_color_picker.d.ts +5 -4
- package/build/esm/packages/aurora/src/components/color_picker_new/hooks/use_color_picker.js +6 -3
- 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 +5 -30
- package/build/esm/packages/aurora/src/components/color_picker_new/index.js.map +1 -1
- package/package.json +1 -1
package/build/cjs/packages/aurora/src/components/color_picker_new/components/color-picker-footer.js
CHANGED
|
@@ -6,8 +6,8 @@ var React = require('react');
|
|
|
6
6
|
var useTranslation = require('../../../../../../external/react-i18next/dist/es/useTranslation.js');
|
|
7
7
|
var index$1 = require('../../button/index.js');
|
|
8
8
|
var index = require('../../dropdown/context/index.js');
|
|
9
|
-
var css_classes = require('../css_classes.js');
|
|
10
9
|
var context = require('../context.js');
|
|
10
|
+
var css_classes = require('../css_classes.js');
|
|
11
11
|
var utilities = require('../utilities.js');
|
|
12
12
|
var main_module = require('../../../css/color_picker_new/main.module.less.js');
|
|
13
13
|
|
package/build/cjs/packages/aurora/src/components/color_picker_new/components/color-picker-header.js
CHANGED
|
@@ -5,8 +5,8 @@ Object.defineProperty(exports, '__esModule', { value: true });
|
|
|
5
5
|
var React = require('react');
|
|
6
6
|
var useTranslation = require('../../../../../../external/react-i18next/dist/es/useTranslation.js');
|
|
7
7
|
var index = require('../../dropdown/context/index.js');
|
|
8
|
-
var css_classes = require('../css_classes.js');
|
|
9
8
|
var context = require('../context.js');
|
|
9
|
+
var css_classes = require('../css_classes.js');
|
|
10
10
|
var main_module = require('../../../css/color_picker_new/main.module.less.js');
|
|
11
11
|
var icon_close = require('../../../assets/icon_close.js');
|
|
12
12
|
|
|
@@ -4,8 +4,8 @@ Object.defineProperty(exports, '__esModule', { value: true });
|
|
|
4
4
|
|
|
5
5
|
var React = require('react');
|
|
6
6
|
var useTranslation = require('../../../../../../external/react-i18next/dist/es/useTranslation.js');
|
|
7
|
-
var css_classes = require('../css_classes.js');
|
|
8
7
|
var context = require('../context.js');
|
|
8
|
+
var css_classes = require('../css_classes.js');
|
|
9
9
|
var utilities = require('../utilities.js');
|
|
10
10
|
var main_module = require('../../../css/color_picker_new/main.module.less.js');
|
|
11
11
|
var colorPickerSwatch = require('./color-picker-swatch.js');
|
package/build/cjs/packages/aurora/src/components/color_picker_new/components/pure-color-picker.js
ADDED
|
@@ -0,0 +1,43 @@
|
|
|
1
|
+
'use strict';
|
|
2
|
+
|
|
3
|
+
Object.defineProperty(exports, '__esModule', { value: true });
|
|
4
|
+
|
|
5
|
+
var React = require('react');
|
|
6
|
+
var input = require('../../controls/components/input.js');
|
|
7
|
+
var context = require('../context.js');
|
|
8
|
+
var constants = require('../constants.js');
|
|
9
|
+
var css_classes = require('../css_classes.js');
|
|
10
|
+
var index$1 = require('../../../../../../external/react-best-gradient-color-picker/dist/esm/components/index.js');
|
|
11
|
+
var main_module = require('../../../css/color_picker_new/main.module.less.js');
|
|
12
|
+
var colorPickerFooter = require('./color-picker-footer.js');
|
|
13
|
+
var colorPickerHeader = require('./color-picker-header.js');
|
|
14
|
+
var colorPickerInputs = require('./color-picker-inputs/color-picker-inputs.js');
|
|
15
|
+
var colorPickerSwatch = require('./color-picker-swatch.js');
|
|
16
|
+
var colorPickerSwatches = require('./color-picker-swatches.js');
|
|
17
|
+
var index = require('../../dropdown/index.js');
|
|
18
|
+
|
|
19
|
+
function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
|
|
20
|
+
|
|
21
|
+
var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
|
|
22
|
+
|
|
23
|
+
const ColorPickerNewPure = ({ id, name }) => {
|
|
24
|
+
const { color, setColor, hex, handleCancel } = React.useContext(context.ColorPickerNewContext);
|
|
25
|
+
// const [color, setColor] = useState('rgba(255,255,255,1)');
|
|
26
|
+
return (React__default['default'].createElement("div", { className: `${main_module['default'][css_classes.cssColorPicker]}` },
|
|
27
|
+
React__default['default'].createElement(index['default'], null,
|
|
28
|
+
React__default['default'].createElement(index['default'].CustomLabel, null,
|
|
29
|
+
React__default['default'].createElement("div", { className: `${main_module['default'][css_classes.cssColorPickerInputContainer]}` },
|
|
30
|
+
React__default['default'].createElement("div", { className: `${main_module['default'][css_classes.cssColorPickerInputColorSwatchContainer]}` },
|
|
31
|
+
React__default['default'].createElement(colorPickerSwatch.ColorPickerSwatch, { color: color })),
|
|
32
|
+
React__default['default'].createElement(input['default'], { type: "text", id: id, name: name, value: `# ${hex === null || hex === void 0 ? void 0 : hex.toUpperCase()}`, readOnly: true }))),
|
|
33
|
+
React__default['default'].createElement(index['default'].Content, { onClickOutside: handleCancel },
|
|
34
|
+
React__default['default'].createElement(colorPickerHeader.ColorPickerHeader, null),
|
|
35
|
+
React__default['default'].createElement("div", { className: `${main_module['default'][css_classes.cssColorPickerContainer]}` },
|
|
36
|
+
React__default['default'].createElement(index$1.ColorPicker, { value: color, onChange: setColor, width: constants.COLOR_PICKER_WIDTH, height: constants.COLOR_PICKER_HEIGHT, hideColorTypeBtns: true, hideColorGuide: true, hideAdvancedSliders: true, hideInputType: true, hideInputs: true, hidePresets: true, className: `${main_module['default'][css_classes.cssColorPickerRbgcp]}` }),
|
|
37
|
+
React__default['default'].createElement(colorPickerInputs.ColorPickerInputs, null),
|
|
38
|
+
React__default['default'].createElement(colorPickerSwatches.ColorPickerSwatches, null)),
|
|
39
|
+
React__default['default'].createElement(colorPickerFooter.ColorPickerFooter, null)))));
|
|
40
|
+
};
|
|
41
|
+
|
|
42
|
+
exports.default = ColorPickerNewPure;
|
|
43
|
+
//# sourceMappingURL=pure-color-picker.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,sBAAsB,0FAA8F;AACpH;AACA;AACA;AACA;AACA;AACA;AACA;AACA;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,10 +3,12 @@
|
|
|
3
3
|
Object.defineProperty(exports, '__esModule', { value: true });
|
|
4
4
|
|
|
5
5
|
var React = require('react');
|
|
6
|
+
var constants = require('../constants.js');
|
|
6
7
|
var useColorPicker$1 = require('../../../../../../external/react-best-gradient-color-picker/dist/esm/hooks/useColorPicker.js');
|
|
7
8
|
var utilities = require('../utilities.js');
|
|
8
9
|
|
|
9
|
-
const useColorPicker = ({
|
|
10
|
+
const useColorPicker = ({ initialColor, onChange, onCancel, onSave }) => {
|
|
11
|
+
const [color, setColor] = React.useState(initialColor ? initialColor : constants.COLOR_PICKER_INITIAL_STATE);
|
|
10
12
|
const [choosenColor, setChoosenColor] = React.useState(color);
|
|
11
13
|
const { hslArr, rgbaArr, setR, setG, setB, setA } = useColorPicker$1.useColorPicker(color, setColor);
|
|
12
14
|
const tinyColor = utilities.getTinyColorInstance(color);
|
|
@@ -27,6 +29,7 @@ const useColorPicker = ({ color, setColor, onChange, onCancel, onSave }) => {
|
|
|
27
29
|
}, [rgbaArr[3]]);
|
|
28
30
|
React.useEffect(() => {
|
|
29
31
|
onChange === null || onChange === void 0 ? void 0 : onChange(utilities.getAllColorTypes(color));
|
|
32
|
+
console.log('color');
|
|
30
33
|
}, [color]);
|
|
31
34
|
const handleCancel = () => {
|
|
32
35
|
setColor(choosenColor);
|
|
@@ -40,8 +43,8 @@ const useColorPicker = ({ color, setColor, onChange, onCancel, onSave }) => {
|
|
|
40
43
|
setColor(color);
|
|
41
44
|
};
|
|
42
45
|
return {
|
|
43
|
-
|
|
44
|
-
|
|
46
|
+
color,
|
|
47
|
+
setColor,
|
|
45
48
|
hex,
|
|
46
49
|
hslArr,
|
|
47
50
|
handleOnChangeAlpha,
|
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,+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;"}
|
|
1
|
+
{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA,+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;"}
|
|
@@ -3,18 +3,8 @@
|
|
|
3
3
|
Object.defineProperty(exports, '__esModule', { value: true });
|
|
4
4
|
|
|
5
5
|
var React = require('react');
|
|
6
|
-
var input = require('../controls/components/input.js');
|
|
7
|
-
var constants = require('./constants.js');
|
|
8
|
-
var css_classes = require('./css_classes.js');
|
|
9
|
-
var index$1 = require('../../../../../external/react-best-gradient-color-picker/dist/esm/components/index.js');
|
|
10
6
|
var context = require('./context.js');
|
|
11
|
-
var
|
|
12
|
-
var colorPickerFooter = require('./components/color-picker-footer.js');
|
|
13
|
-
var colorPickerHeader = require('./components/color-picker-header.js');
|
|
14
|
-
var colorPickerInputs = require('./components/color-picker-inputs/color-picker-inputs.js');
|
|
15
|
-
var colorPickerSwatch = require('./components/color-picker-swatch.js');
|
|
16
|
-
var colorPickerSwatches = require('./components/color-picker-swatches.js');
|
|
17
|
-
var index = require('../dropdown/index.js');
|
|
7
|
+
var pureColorPicker = require('./components/pure-color-picker.js');
|
|
18
8
|
var use_color_picker = require('./hooks/use_color_picker.js');
|
|
19
9
|
|
|
20
10
|
function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
|
|
@@ -22,29 +12,14 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
|
|
|
22
12
|
var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
|
|
23
13
|
|
|
24
14
|
const ColorPickerNewWithContext = ({ id, name, initialColor, onChange, onCancel, onSave }) => {
|
|
25
|
-
const [color, setColor] = React.useState(initialColor ? initialColor : constants.COLOR_PICKER_INITIAL_STATE);
|
|
26
15
|
const contextValue = use_color_picker['default']({
|
|
27
|
-
|
|
28
|
-
setColor,
|
|
16
|
+
initialColor,
|
|
29
17
|
onChange,
|
|
30
18
|
onCancel,
|
|
31
19
|
onSave
|
|
32
20
|
});
|
|
33
|
-
return (React__default['default'].createElement(context.ColorPickerNewContext.Provider, { value:
|
|
34
|
-
React__default['default'].createElement(
|
|
35
|
-
React__default['default'].createElement(index['default'], null,
|
|
36
|
-
React__default['default'].createElement(index['default'].CustomLabel, null,
|
|
37
|
-
React__default['default'].createElement("div", { className: `${main_module['default'][css_classes.cssColorPickerInputContainer]}` },
|
|
38
|
-
React__default['default'].createElement("div", { className: `${main_module['default'][css_classes.cssColorPickerInputColorSwatchContainer]}` },
|
|
39
|
-
React__default['default'].createElement(colorPickerSwatch.ColorPickerSwatch, { color: color })),
|
|
40
|
-
React__default['default'].createElement(input['default'], { type: "text", id: id, name: name, value: `# ${color === null || color === void 0 ? void 0 : color.toUpperCase()}`, readOnly: true }))),
|
|
41
|
-
React__default['default'].createElement(index['default'].Content, null,
|
|
42
|
-
React__default['default'].createElement(colorPickerHeader.ColorPickerHeader, null),
|
|
43
|
-
React__default['default'].createElement("div", { className: `${main_module['default'][css_classes.cssColorPickerContainer]}` },
|
|
44
|
-
React__default['default'].createElement(index$1.ColorPicker, { value: color, onChange: setColor, width: constants.COLOR_PICKER_WIDTH, height: constants.COLOR_PICKER_HEIGHT, hideColorTypeBtns: true, hideColorGuide: true, hideAdvancedSliders: true, hideInputType: true, hideInputs: true, hidePresets: true, className: `${main_module['default'][css_classes.cssColorPickerRbgcp]}` }),
|
|
45
|
-
React__default['default'].createElement(colorPickerInputs.ColorPickerInputs, null),
|
|
46
|
-
React__default['default'].createElement(colorPickerSwatches.ColorPickerSwatches, null)),
|
|
47
|
-
React__default['default'].createElement(colorPickerFooter.ColorPickerFooter, null))))));
|
|
21
|
+
return (React__default['default'].createElement(context.ColorPickerNewContext.Provider, { value: contextValue },
|
|
22
|
+
React__default['default'].createElement(pureColorPicker['default'], { id: id, name: name })));
|
|
48
23
|
};
|
|
49
24
|
|
|
50
25
|
exports.default = ColorPickerNewWithContext;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;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;"}
|
package/build/esm/packages/aurora/src/components/color_picker_new/components/color-picker-footer.js
CHANGED
|
@@ -2,8 +2,8 @@ import React, { useContext } from 'react';
|
|
|
2
2
|
import { useTranslation } from '../../../../../../external/react-i18next/dist/es/useTranslation.js';
|
|
3
3
|
import Button from '../../button/index.js';
|
|
4
4
|
import { DropdownContext } from '../../dropdown/context/index.js';
|
|
5
|
-
import { cssColorPickerFooter } from '../css_classes.js';
|
|
6
5
|
import { ColorPickerNewContext } from '../context.js';
|
|
6
|
+
import { cssColorPickerFooter } from '../css_classes.js';
|
|
7
7
|
import { getAllColorTypes } from '../utilities.js';
|
|
8
8
|
import styles from '../../../css/color_picker_new/main.module.less.js';
|
|
9
9
|
|
package/build/esm/packages/aurora/src/components/color_picker_new/components/color-picker-header.js
CHANGED
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
import React, { useContext, useEffect } from 'react';
|
|
2
2
|
import { useTranslation } from '../../../../../../external/react-i18next/dist/es/useTranslation.js';
|
|
3
3
|
import { DropdownContext } from '../../dropdown/context/index.js';
|
|
4
|
-
import { cssColorPickerHeader, cssColorPickerCloseIcon } from '../css_classes.js';
|
|
5
4
|
import { ColorPickerNewContext } from '../context.js';
|
|
5
|
+
import { cssColorPickerHeader, cssColorPickerCloseIcon } from '../css_classes.js';
|
|
6
6
|
import styles from '../../../css/color_picker_new/main.module.less.js';
|
|
7
7
|
import IconClose from '../../../assets/icon_close.js';
|
|
8
8
|
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import React, { useContext } from 'react';
|
|
2
2
|
import { useTranslation } from '../../../../../../external/react-i18next/dist/es/useTranslation.js';
|
|
3
|
-
import { cssColorPickerSwatches, cssColorPickerSwatchesHeader, cssColorPickerSwatchesContent } from '../css_classes.js';
|
|
4
3
|
import { ColorPickerNewContext } from '../context.js';
|
|
4
|
+
import { cssColorPickerSwatches, cssColorPickerSwatchesHeader, cssColorPickerSwatchesContent } from '../css_classes.js';
|
|
5
5
|
import { getTinyColorInstance, getHexValue } from '../utilities.js';
|
|
6
6
|
import styles from '../../../css/color_picker_new/main.module.less.js';
|
|
7
7
|
import { ColorPickerSwatch } from './color-picker-swatch.js';
|
package/build/esm/packages/aurora/src/components/color_picker_new/components/pure-color-picker.js
CHANGED
|
@@ -1,22 +1,35 @@
|
|
|
1
|
-
import '../constants';
|
|
2
|
-
import '../types';
|
|
3
1
|
import React, { useContext } from 'react';
|
|
4
|
-
import
|
|
5
|
-
import '
|
|
6
|
-
import '
|
|
7
|
-
import '
|
|
8
|
-
import '
|
|
9
|
-
import
|
|
10
|
-
import './color-picker-
|
|
11
|
-
import './color-picker-
|
|
12
|
-
import
|
|
13
|
-
import '
|
|
14
|
-
import
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
2
|
+
import Input from '../../controls/components/input.js';
|
|
3
|
+
import { ColorPickerNewContext } from '../context.js';
|
|
4
|
+
import { COLOR_PICKER_WIDTH, COLOR_PICKER_HEIGHT } from '../constants.js';
|
|
5
|
+
import { cssColorPicker, cssColorPickerInputContainer, cssColorPickerInputColorSwatchContainer, cssColorPickerContainer, cssColorPickerRbgcp } from '../css_classes.js';
|
|
6
|
+
import { ColorPicker } from '../../../../../../external/react-best-gradient-color-picker/dist/esm/components/index.js';
|
|
7
|
+
import styles from '../../../css/color_picker_new/main.module.less.js';
|
|
8
|
+
import { ColorPickerFooter } from './color-picker-footer.js';
|
|
9
|
+
import { ColorPickerHeader } from './color-picker-header.js';
|
|
10
|
+
import { ColorPickerInputs } from './color-picker-inputs/color-picker-inputs.js';
|
|
11
|
+
import { ColorPickerSwatch } from './color-picker-swatch.js';
|
|
12
|
+
import { ColorPickerSwatches } from './color-picker-swatches.js';
|
|
13
|
+
import Dropdown from '../../dropdown/index.js';
|
|
14
|
+
|
|
15
|
+
const ColorPickerNewPure = ({ id, name }) => {
|
|
16
|
+
const { color, setColor, hex, handleCancel } = useContext(ColorPickerNewContext);
|
|
17
|
+
// const [color, setColor] = useState('rgba(255,255,255,1)');
|
|
18
|
+
return (React.createElement("div", { className: `${styles[cssColorPicker]}` },
|
|
19
|
+
React.createElement(Dropdown, null,
|
|
20
|
+
React.createElement(Dropdown.CustomLabel, null,
|
|
21
|
+
React.createElement("div", { className: `${styles[cssColorPickerInputContainer]}` },
|
|
22
|
+
React.createElement("div", { className: `${styles[cssColorPickerInputColorSwatchContainer]}` },
|
|
23
|
+
React.createElement(ColorPickerSwatch, { color: color })),
|
|
24
|
+
React.createElement(Input, { type: "text", id: id, name: name, value: `# ${hex === null || hex === void 0 ? void 0 : hex.toUpperCase()}`, readOnly: true }))),
|
|
25
|
+
React.createElement(Dropdown.Content, { onClickOutside: handleCancel },
|
|
26
|
+
React.createElement(ColorPickerHeader, null),
|
|
27
|
+
React.createElement("div", { className: `${styles[cssColorPickerContainer]}` },
|
|
28
|
+
React.createElement(ColorPicker, { value: color, onChange: setColor, width: COLOR_PICKER_WIDTH, height: COLOR_PICKER_HEIGHT, hideColorTypeBtns: true, hideColorGuide: true, hideAdvancedSliders: true, hideInputType: true, hideInputs: true, hidePresets: true, className: `${styles[cssColorPickerRbgcp]}` }),
|
|
29
|
+
React.createElement(ColorPickerInputs, null),
|
|
30
|
+
React.createElement(ColorPickerSwatches, null)),
|
|
31
|
+
React.createElement(ColorPickerFooter, null)))));
|
|
20
32
|
};
|
|
33
|
+
|
|
21
34
|
export default ColorPickerNewPure;
|
|
22
|
-
//# sourceMappingURL=pure-color-picker.js.map
|
|
35
|
+
//# sourceMappingURL=pure-color-picker.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":
|
|
1
|
+
{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA,4BAA4B,0FAA8F;AAC1H;AACA;AACA;AACA;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/hooks/use_color_picker.d.ts
CHANGED
|
@@ -1,13 +1,14 @@
|
|
|
1
|
+
/// <reference types="react" />
|
|
1
2
|
import { ColorPickerColorTypes, IColorPickerColor } from '../types';
|
|
2
|
-
import { Dispatch, SetStateAction } from 'react';
|
|
3
3
|
export declare type ColorPickerHookProps = {
|
|
4
|
-
|
|
5
|
-
setColor: Dispatch<SetStateAction<string>>;
|
|
4
|
+
initialColor?: ColorPickerColorTypes['hex'];
|
|
6
5
|
onChange?: (color: IColorPickerColor) => void;
|
|
7
6
|
onCancel?: () => void;
|
|
8
7
|
onSave?: (color: IColorPickerColor) => void;
|
|
9
8
|
};
|
|
10
|
-
declare const useColorPicker: ({
|
|
9
|
+
declare const useColorPicker: ({ initialColor, onChange, onCancel, onSave }: ColorPickerHookProps) => {
|
|
10
|
+
color: string;
|
|
11
|
+
setColor: import("react").Dispatch<import("react").SetStateAction<string>>;
|
|
11
12
|
hex: string;
|
|
12
13
|
hslArr: number[];
|
|
13
14
|
handleOnChangeAlpha: (event: React.ChangeEvent<HTMLInputElement>) => void;
|
|
@@ -1,8 +1,10 @@
|
|
|
1
1
|
import { useState, useEffect } from 'react';
|
|
2
|
+
import { COLOR_PICKER_INITIAL_STATE } from '../constants.js';
|
|
2
3
|
import { useColorPicker as useColorPicker$1 } from '../../../../../../external/react-best-gradient-color-picker/dist/esm/hooks/useColorPicker.js';
|
|
3
4
|
import { getTinyColorInstance, getHexValue, getAllColorTypes } from '../utilities.js';
|
|
4
5
|
|
|
5
|
-
const useColorPicker = ({
|
|
6
|
+
const useColorPicker = ({ initialColor, onChange, onCancel, onSave }) => {
|
|
7
|
+
const [color, setColor] = useState(initialColor ? initialColor : COLOR_PICKER_INITIAL_STATE);
|
|
6
8
|
const [choosenColor, setChoosenColor] = useState(color);
|
|
7
9
|
const { hslArr, rgbaArr, setR, setG, setB, setA } = useColorPicker$1(color, setColor);
|
|
8
10
|
const tinyColor = getTinyColorInstance(color);
|
|
@@ -23,6 +25,7 @@ const useColorPicker = ({ color, setColor, onChange, onCancel, onSave }) => {
|
|
|
23
25
|
}, [rgbaArr[3]]);
|
|
24
26
|
useEffect(() => {
|
|
25
27
|
onChange === null || onChange === void 0 ? void 0 : onChange(getAllColorTypes(color));
|
|
28
|
+
console.log('color');
|
|
26
29
|
}, [color]);
|
|
27
30
|
const handleCancel = () => {
|
|
28
31
|
setColor(choosenColor);
|
|
@@ -36,8 +39,8 @@ const useColorPicker = ({ color, setColor, onChange, onCancel, onSave }) => {
|
|
|
36
39
|
setColor(color);
|
|
37
40
|
};
|
|
38
41
|
return {
|
|
39
|
-
|
|
40
|
-
|
|
42
|
+
color,
|
|
43
|
+
setColor,
|
|
41
44
|
hex,
|
|
42
45
|
hslArr,
|
|
43
46
|
handleOnChangeAlpha,
|
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,mDAAmD,8FAAkG;AACrJ;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;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,mDAAmD,8FAAkG;AACrJ;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;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,42 +1,17 @@
|
|
|
1
|
-
import React
|
|
2
|
-
import Input from '../controls/components/input.js';
|
|
3
|
-
import { COLOR_PICKER_INITIAL_STATE, COLOR_PICKER_WIDTH, COLOR_PICKER_HEIGHT } from './constants.js';
|
|
4
|
-
import { cssColorPicker, cssColorPickerInputContainer, cssColorPickerInputColorSwatchContainer, cssColorPickerContainer, cssColorPickerRbgcp } from './css_classes.js';
|
|
5
|
-
import { ColorPicker } from '../../../../../external/react-best-gradient-color-picker/dist/esm/components/index.js';
|
|
1
|
+
import React from 'react';
|
|
6
2
|
import { ColorPickerNewContext } from './context.js';
|
|
7
|
-
import
|
|
8
|
-
import { ColorPickerFooter } from './components/color-picker-footer.js';
|
|
9
|
-
import { ColorPickerHeader } from './components/color-picker-header.js';
|
|
10
|
-
import { ColorPickerInputs } from './components/color-picker-inputs/color-picker-inputs.js';
|
|
11
|
-
import { ColorPickerSwatch } from './components/color-picker-swatch.js';
|
|
12
|
-
import { ColorPickerSwatches } from './components/color-picker-swatches.js';
|
|
13
|
-
import Dropdown from '../dropdown/index.js';
|
|
3
|
+
import ColorPickerNewPure from './components/pure-color-picker.js';
|
|
14
4
|
import useColorPicker from './hooks/use_color_picker.js';
|
|
15
5
|
|
|
16
6
|
const ColorPickerNewWithContext = ({ id, name, initialColor, onChange, onCancel, onSave }) => {
|
|
17
|
-
const [color, setColor] = useState(initialColor ? initialColor : COLOR_PICKER_INITIAL_STATE);
|
|
18
7
|
const contextValue = useColorPicker({
|
|
19
|
-
|
|
20
|
-
setColor,
|
|
8
|
+
initialColor,
|
|
21
9
|
onChange,
|
|
22
10
|
onCancel,
|
|
23
11
|
onSave
|
|
24
12
|
});
|
|
25
|
-
return (React.createElement(ColorPickerNewContext.Provider, { value:
|
|
26
|
-
React.createElement(
|
|
27
|
-
React.createElement(Dropdown, null,
|
|
28
|
-
React.createElement(Dropdown.CustomLabel, null,
|
|
29
|
-
React.createElement("div", { className: `${styles[cssColorPickerInputContainer]}` },
|
|
30
|
-
React.createElement("div", { className: `${styles[cssColorPickerInputColorSwatchContainer]}` },
|
|
31
|
-
React.createElement(ColorPickerSwatch, { color: color })),
|
|
32
|
-
React.createElement(Input, { type: "text", id: id, name: name, value: `# ${color === null || color === void 0 ? void 0 : color.toUpperCase()}`, readOnly: true }))),
|
|
33
|
-
React.createElement(Dropdown.Content, null,
|
|
34
|
-
React.createElement(ColorPickerHeader, null),
|
|
35
|
-
React.createElement("div", { className: `${styles[cssColorPickerContainer]}` },
|
|
36
|
-
React.createElement(ColorPicker, { value: color, onChange: setColor, width: COLOR_PICKER_WIDTH, height: COLOR_PICKER_HEIGHT, hideColorTypeBtns: true, hideColorGuide: true, hideAdvancedSliders: true, hideInputType: true, hideInputs: true, hidePresets: true, className: `${styles[cssColorPickerRbgcp]}` }),
|
|
37
|
-
React.createElement(ColorPickerInputs, null),
|
|
38
|
-
React.createElement(ColorPickerSwatches, null)),
|
|
39
|
-
React.createElement(ColorPickerFooter, null))))));
|
|
13
|
+
return (React.createElement(ColorPickerNewContext.Provider, { value: contextValue },
|
|
14
|
+
React.createElement(ColorPickerNewPure, { id: id, name: name })));
|
|
40
15
|
};
|
|
41
16
|
|
|
42
17
|
export default ColorPickerNewWithContext;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;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;"}
|