@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.
Files changed (20) hide show
  1. package/build/cjs/packages/aurora/src/components/color_picker_new/components/color-picker-footer.js +1 -1
  2. package/build/cjs/packages/aurora/src/components/color_picker_new/components/color-picker-header.js +1 -1
  3. package/build/cjs/packages/aurora/src/components/color_picker_new/components/color-picker-swatches.js +1 -1
  4. package/build/cjs/packages/aurora/src/components/color_picker_new/components/pure-color-picker.js +43 -0
  5. package/build/cjs/packages/aurora/src/components/color_picker_new/components/pure-color-picker.js.map +1 -0
  6. package/build/cjs/packages/aurora/src/components/color_picker_new/hooks/use_color_picker.js +6 -3
  7. package/build/cjs/packages/aurora/src/components/color_picker_new/hooks/use_color_picker.js.map +1 -1
  8. package/build/cjs/packages/aurora/src/components/color_picker_new/index.js +4 -29
  9. package/build/cjs/packages/aurora/src/components/color_picker_new/index.js.map +1 -1
  10. package/build/esm/packages/aurora/src/components/color_picker_new/components/color-picker-footer.js +1 -1
  11. package/build/esm/packages/aurora/src/components/color_picker_new/components/color-picker-header.js +1 -1
  12. package/build/esm/packages/aurora/src/components/color_picker_new/components/color-picker-swatches.js +1 -1
  13. package/build/esm/packages/aurora/src/components/color_picker_new/components/pure-color-picker.js +32 -19
  14. package/build/esm/packages/aurora/src/components/color_picker_new/components/pure-color-picker.js.map +1 -1
  15. package/build/esm/packages/aurora/src/components/color_picker_new/hooks/use_color_picker.d.ts +5 -4
  16. package/build/esm/packages/aurora/src/components/color_picker_new/hooks/use_color_picker.js +6 -3
  17. package/build/esm/packages/aurora/src/components/color_picker_new/hooks/use_color_picker.js.map +1 -1
  18. package/build/esm/packages/aurora/src/components/color_picker_new/index.js +5 -30
  19. package/build/esm/packages/aurora/src/components/color_picker_new/index.js.map +1 -1
  20. package/package.json +1 -1
@@ -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
 
@@ -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');
@@ -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 = ({ color, setColor, onChange, onCancel, onSave }) => {
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
- // color,
44
- // setColor,
46
+ color,
47
+ setColor,
45
48
  hex,
46
49
  hslArr,
47
50
  handleOnChangeAlpha,
@@ -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 main_module = require('../../css/color_picker_new/main.module.less.js');
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
- color,
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: { ...contextValue, color, setColor } },
34
- React__default['default'].createElement("div", { className: `${main_module['default'][css_classes.cssColorPicker]}` },
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,sBAAsB,uFAA2F;AACjH;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;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;"}
@@ -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
 
@@ -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';
@@ -1,22 +1,35 @@
1
- import '../constants';
2
- import '../types';
3
1
  import React, { useContext } from 'react';
4
- import { cssColorPicker } from '../css_classes';
5
- import 'react-best-gradient-color-picker';
6
- import './color-picker-footer';
7
- import './color-picker-header';
8
- import './color-picker-inputs/color-picker-inputs';
9
- import { ColorPickerNewContext } from '../context';
10
- import './color-picker-swatch';
11
- import './color-picker-swatches';
12
- import Dropdown from '@auroraComponents/dropdown';
13
- import '@auroraComponents/controls/components/input';
14
- import styles from '@auroraCss/color_picker_new/main.module.less';
15
- const ColorPickerNewPure = ({ id, name }) => {
16
- const { 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)));
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":"pure-color-picker.js","sourceRoot":"","sources":["../../../../../../../../src/components/color_picker_new/components/pure-color-picker.tsx"],"names":[],"mappings":"AAAA,OAAwD,cAAc,CAAC;AACvE,OAAsE,UAAU,CAAC;AACjF,OAAO,KAAK,EAAE,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AAC1C,OAAO,EACH,cAAc,EAKjB,MAAM,gBAAgB,CAAC;AAExB,OAAwB,kCAAkC,CAAC;AAC3D,OAAkC,uBAAuB,CAAC;AAC1D,OAAkC,uBAAuB,CAAC;AAC1D,OAAkC,2CAA2C,CAAC;AAC9E,OAAO,EAAE,qBAAqB,EAAE,MAAM,YAAY,CAAC;AACnD,OAAkC,uBAAuB,CAAC;AAC1D,OAAoC,yBAAyB,CAAC;AAC9D,OAAO,QAAQ,MAAM,4BAA4B,CAAC;AAClD,OAAkB,6CAA6C,CAAC;AAChE,OAAO,MAAM,MAAM,8CAA8C,CAAC;AAElE,MAAM,kBAAkB,GAAuC,CAAC,EAAE,EAAE,EAAE,IAAI,EAAE,EAAE,EAAE;IAC5E,MAAM,EAAE,GAAG,EAAE,YAAY,EAAE,GAAG,UAAU,CAA8B,qBAAqB,CAAC,CAAC;IAE7F,6DAA6D;IAE7D,OAAO,CACH,6BAAK,SAAS,EAAE,GAAG,MAAM,CAAC,cAAc,CAAC,EAAE;QACvC,oBAAC,QAAQ,OAmCE,CACT,CACT,CAAC;AACN,CAAC,CAAC;AAEF,eAAe,kBAAkB,CAAC"}
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;"}
@@ -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
- color: string;
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: ({ color, setColor, onChange, onCancel, onSave }: ColorPickerHookProps) => {
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 = ({ color, setColor, onChange, onCancel, onSave }) => {
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
- // color,
40
- // setColor,
42
+ color,
43
+ setColor,
41
44
  hex,
42
45
  hslArr,
43
46
  handleOnChangeAlpha,
@@ -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, { useState } from '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 styles from '../../css/color_picker_new/main.module.less.js';
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
- color,
20
- setColor,
8
+ initialColor,
21
9
  onChange,
22
10
  onCancel,
23
11
  onSave
24
12
  });
25
- return (React.createElement(ColorPickerNewContext.Provider, { value: { ...contextValue, color, setColor } },
26
- React.createElement("div", { className: `${styles[cssColorPicker]}` },
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,4BAA4B,uFAA2F;AACvH;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;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;"}
package/package.json CHANGED
@@ -2,7 +2,7 @@
2
2
  "name": "@dreamcommerce/aurora",
3
3
  "packageManager": "yarn@3.2.0",
4
4
  "sideEffects": false,
5
- "version": "2.12.1-49",
5
+ "version": "2.12.1-50",
6
6
  "description": "aurora",
7
7
  "author": "k0ssak",
8
8
  "license": "MIT",