@synerise/ds-color-picker 1.2.9 → 1.2.10
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/CHANGELOG.md +212 -775
- package/dist/ColorPicker.d.ts +1 -1
- package/dist/ColorPicker.js +9 -7
- package/dist/ColorPicker.styles.js +1 -1
- package/dist/ColorPicker.types.d.ts +2 -2
- package/dist/utils.js +3 -3
- package/package.json +10 -10
package/dist/ColorPicker.d.ts
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
|
-
import { ColorPickerProps } from './ColorPicker.types';
|
|
2
|
+
import { type ColorPickerProps } from './ColorPicker.types';
|
|
3
3
|
declare const ColorPicker: ({ maxWidth, value, onChange, colors, onSaveColors, infix, getPopupContainer, placeholder, inputProps, maxSavedColors, tooltip, isShownSavedColors, size, errorText, description, disabled, error, readOnly, }: ColorPickerProps) => React.JSX.Element;
|
|
4
4
|
export default ColorPicker;
|
package/dist/ColorPicker.js
CHANGED
|
@@ -1,15 +1,15 @@
|
|
|
1
1
|
function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
|
|
2
|
+
import copy from 'copy-to-clipboard';
|
|
2
3
|
import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
|
|
3
4
|
import { HexColorPicker as ReactColorful } from 'react-colorful';
|
|
4
5
|
import Divider from '@synerise/ds-divider';
|
|
5
|
-
import Tags, { TagShape, Tag } from '@synerise/ds-tags';
|
|
6
|
-
import Icon, { FormulaPlusM, CopyClipboardM } from '@synerise/ds-icon';
|
|
7
|
-
import copy from 'copy-to-clipboard';
|
|
8
|
-
import Tooltip from '@synerise/ds-tooltip';
|
|
9
6
|
import Dropdown from '@synerise/ds-dropdown';
|
|
10
|
-
import {
|
|
11
|
-
import
|
|
7
|
+
import Icon, { CopyClipboardM, FormulaPlusM } from '@synerise/ds-icon';
|
|
8
|
+
import Tags, { Tag, TagShape } from '@synerise/ds-tags';
|
|
9
|
+
import Tooltip from '@synerise/ds-tooltip';
|
|
10
|
+
import { getPopupContainer as defaultGetPopupContainer, useOnClickOutside } from '@synerise/ds-utils';
|
|
12
11
|
import * as S from './ColorPicker.styles';
|
|
12
|
+
import { convert3DigitHexTo6Digit, filterAlphanumeric, isValidHexColor, isValidTextColor, standardizeColor } from './utils';
|
|
13
13
|
var DEFAULT_MAX_WIDTH_PICKER = 228;
|
|
14
14
|
var DEFAULT_COLOR = '#ffffff';
|
|
15
15
|
var ColorPicker = function ColorPicker(_ref) {
|
|
@@ -222,7 +222,9 @@ var ColorPicker = function ColorPicker(_ref) {
|
|
|
222
222
|
error: error
|
|
223
223
|
}, inputProps));
|
|
224
224
|
}, [disabled, error, readOnly, onClickHandler, onChangeHandler, onBlurHandler, lastValidHexColor, placeholder, colorTextInput, description, errorText, inputProps]);
|
|
225
|
-
if (readOnly || disabled)
|
|
225
|
+
if (readOnly || disabled) {
|
|
226
|
+
return trigger;
|
|
227
|
+
}
|
|
226
228
|
return /*#__PURE__*/React.createElement(React.Fragment, null, maxWidth && maxWidth >= DEFAULT_MAX_WIDTH_PICKER && /*#__PURE__*/React.createElement(S.ColorPickerModalStyle, {
|
|
227
229
|
maxWidth: maxWidth
|
|
228
230
|
}), /*#__PURE__*/React.createElement(Dropdown, {
|
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
import styled, { createGlobalStyle } from 'styled-components';
|
|
2
|
-
import { TagsStyles, Tag } from '@synerise/ds-tags';
|
|
3
2
|
import Button from '@synerise/ds-button';
|
|
4
3
|
import Icon from '@synerise/ds-icon';
|
|
5
4
|
import { Input } from '@synerise/ds-input';
|
|
5
|
+
import { Tag, TagsStyles } from '@synerise/ds-tags';
|
|
6
6
|
import { ColorPickerSize } from './ColorPicker.types';
|
|
7
7
|
export var TagDot = styled.div.withConfig({
|
|
8
8
|
displayName: "ColorPickerstyles__TagDot",
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
/// <reference types="react" />
|
|
2
|
-
import type
|
|
2
|
+
import { type DropdownProps } from '@synerise/ds-dropdown';
|
|
3
3
|
import type { FormFieldCommonProps } from '@synerise/ds-form-field';
|
|
4
|
-
import {
|
|
4
|
+
import type { InputProps } from '@synerise/ds-input';
|
|
5
5
|
export type ColorHookType = {
|
|
6
6
|
color: string;
|
|
7
7
|
setColor: (color: string) => void;
|
package/dist/utils.js
CHANGED
|
@@ -16,8 +16,9 @@ export var isValidHexColor = function isValidHexColor(hex) {
|
|
|
16
16
|
* @returns {boolean}
|
|
17
17
|
*/
|
|
18
18
|
export var isValidTextColor = function isValidTextColor(strColor) {
|
|
19
|
-
if (!strColor)
|
|
20
|
-
|
|
19
|
+
if (!strColor) {
|
|
20
|
+
return false;
|
|
21
|
+
}
|
|
21
22
|
var s = new Option().style;
|
|
22
23
|
s.color = strColor;
|
|
23
24
|
return s.color === strColor;
|
|
@@ -43,7 +44,6 @@ export var convert3DigitHexTo6Digit = function convert3DigitHexTo6Digit(hexColor
|
|
|
43
44
|
var alphaHexColor = filterAlphanumeric(hexColor);
|
|
44
45
|
if (alphaHexColor.length === 3) {
|
|
45
46
|
var newAlphaHexColor = '';
|
|
46
|
-
// eslint-disable-next-line no-plusplus
|
|
47
47
|
for (var i = 0; i < alphaHexColor.length; i++) {
|
|
48
48
|
newAlphaHexColor += alphaHexColor[i] + alphaHexColor[i];
|
|
49
49
|
}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@synerise/ds-color-picker",
|
|
3
|
-
"version": "1.2.
|
|
3
|
+
"version": "1.2.10",
|
|
4
4
|
"description": "Color-Picker Component for the Synerise Design System",
|
|
5
5
|
"license": "ISC",
|
|
6
6
|
"repository": "Synerise/synerise-design",
|
|
@@ -34,14 +34,14 @@
|
|
|
34
34
|
],
|
|
35
35
|
"types": "dist/index.d.ts",
|
|
36
36
|
"dependencies": {
|
|
37
|
-
"@synerise/ds-button": "^1.4.
|
|
38
|
-
"@synerise/ds-divider": "^1.0.
|
|
39
|
-
"@synerise/ds-dropdown": "^1.0.
|
|
40
|
-
"@synerise/ds-icon": "^1.5.
|
|
41
|
-
"@synerise/ds-input": "^1.3.
|
|
42
|
-
"@synerise/ds-tags": "^1.1.
|
|
43
|
-
"@synerise/ds-tooltip": "^1.1.
|
|
44
|
-
"@synerise/ds-utils": "^1.3.
|
|
37
|
+
"@synerise/ds-button": "^1.4.2",
|
|
38
|
+
"@synerise/ds-divider": "^1.0.13",
|
|
39
|
+
"@synerise/ds-dropdown": "^1.0.15",
|
|
40
|
+
"@synerise/ds-icon": "^1.5.4",
|
|
41
|
+
"@synerise/ds-input": "^1.3.2",
|
|
42
|
+
"@synerise/ds-tags": "^1.1.15",
|
|
43
|
+
"@synerise/ds-tooltip": "^1.1.12",
|
|
44
|
+
"@synerise/ds-utils": "^1.3.1",
|
|
45
45
|
"copy-to-clipboard": "^3.3.1",
|
|
46
46
|
"react-colorful": "^5.2.0"
|
|
47
47
|
},
|
|
@@ -51,5 +51,5 @@
|
|
|
51
51
|
"react": ">=16.9.0 <= 18.3.1",
|
|
52
52
|
"styled-components": "^5.3.3"
|
|
53
53
|
},
|
|
54
|
-
"gitHead": "
|
|
54
|
+
"gitHead": "4512641033ba3581a3df208143c547fcfed45895"
|
|
55
55
|
}
|