@griddo/ax 1.60.4 → 1.60.8
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/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@griddo/ax",
|
|
3
3
|
"description": "Griddo Author Experience",
|
|
4
|
-
"version": "1.60.
|
|
4
|
+
"version": "1.60.8",
|
|
5
5
|
"authors": [
|
|
6
6
|
"Álvaro Sánchez' <alvaro.sanches@secuoyas.com>",
|
|
7
7
|
"Carlos Torres <carlos.torres@secuoyas.com>",
|
|
@@ -242,5 +242,5 @@
|
|
|
242
242
|
"publishConfig": {
|
|
243
243
|
"access": "public"
|
|
244
244
|
},
|
|
245
|
-
"gitHead": "
|
|
245
|
+
"gitHead": "09ad88f6e7e61308db506b2e7ad451541c65dc00"
|
|
246
246
|
}
|
|
@@ -9,7 +9,17 @@ const Picker = (props: IProps): JSX.Element => {
|
|
|
9
9
|
const [color, setColor] = useState(value);
|
|
10
10
|
const [inputValue, setInputValue] = useState(value);
|
|
11
11
|
|
|
12
|
-
const defaultColors = [
|
|
12
|
+
const defaultColors = [
|
|
13
|
+
"#d9e3f0",
|
|
14
|
+
"#f47373",
|
|
15
|
+
"#697689",
|
|
16
|
+
"#37d67a",
|
|
17
|
+
"#2ccce4",
|
|
18
|
+
"#555555",
|
|
19
|
+
"#dce775",
|
|
20
|
+
"#ff8a65",
|
|
21
|
+
"#ba68c8",
|
|
22
|
+
];
|
|
13
23
|
|
|
14
24
|
const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
|
|
15
25
|
let newValue = e.target.value;
|
|
@@ -18,40 +28,47 @@ const Picker = (props: IProps): JSX.Element => {
|
|
|
18
28
|
const re3 = /^#[0-9a-fA-F]{3}$/;
|
|
19
29
|
const re6 = /^#[0-9a-fA-F]{6}$/;
|
|
20
30
|
|
|
21
|
-
if(re3.test(newValue)){
|
|
31
|
+
if (re3.test(newValue)) {
|
|
22
32
|
newValue = hex3to6(newValue);
|
|
23
33
|
setColor(newValue);
|
|
24
34
|
onChange(newValue);
|
|
25
|
-
} else if(re6.test(newValue)){
|
|
35
|
+
} else if (re6.test(newValue)) {
|
|
26
36
|
setColor(newValue);
|
|
27
37
|
onChange(newValue);
|
|
28
38
|
}
|
|
29
|
-
}
|
|
39
|
+
};
|
|
30
40
|
|
|
31
41
|
const handleClick = (newColor: string) => () => {
|
|
32
42
|
setInputValue(newColor);
|
|
33
43
|
setColor(newColor);
|
|
34
44
|
onChange(newColor);
|
|
35
|
-
}
|
|
45
|
+
};
|
|
36
46
|
|
|
37
47
|
const isLight = (color: string) => {
|
|
38
|
-
|
|
48
|
+
if (!color) return true;
|
|
49
|
+
const hex = color.replace("#", "");
|
|
39
50
|
const c_r = parseInt(hex.substr(0, 2), 16);
|
|
40
51
|
const c_g = parseInt(hex.substr(2, 2), 16);
|
|
41
52
|
const c_b = parseInt(hex.substr(4, 2), 16);
|
|
42
|
-
const brightness = (
|
|
53
|
+
const brightness = (c_r * 299 + c_g * 587 + c_b * 114) / 1000;
|
|
43
54
|
return brightness > 155;
|
|
44
|
-
}
|
|
55
|
+
};
|
|
45
56
|
|
|
46
57
|
const gridColors = colors ? colors : defaultColors;
|
|
47
58
|
|
|
48
59
|
return (
|
|
49
|
-
<S.Wrapper
|
|
50
|
-
<S.Cover background={color} light={isLight(color)}>
|
|
60
|
+
<S.Wrapper>
|
|
61
|
+
<S.Cover background={color} light={isLight(color)}>
|
|
62
|
+
{color}
|
|
63
|
+
</S.Cover>
|
|
51
64
|
<S.Grid>
|
|
52
|
-
{gridColors.map((item: string) =>
|
|
65
|
+
{gridColors.map((item: string) => (
|
|
66
|
+
<S.GridItem key={item} background={item} onClick={handleClick(item)} selected={item === color} />
|
|
67
|
+
))}
|
|
53
68
|
</S.Grid>
|
|
54
|
-
<S.InputWrapper
|
|
69
|
+
<S.InputWrapper>
|
|
70
|
+
<S.Input type="text" value={inputValue} onChange={handleChange} />
|
|
71
|
+
</S.InputWrapper>
|
|
55
72
|
</S.Wrapper>
|
|
56
73
|
);
|
|
57
74
|
};
|
|
@@ -6,7 +6,7 @@ const Wrapper = styled.div`
|
|
|
6
6
|
border: 1px solid ${(p) => p.theme.color.uiLine};
|
|
7
7
|
background-color: ${(p) => p.theme.color.interactiveBackground};
|
|
8
8
|
position: absolute;
|
|
9
|
-
z-index:
|
|
9
|
+
z-index: 2;
|
|
10
10
|
`;
|
|
11
11
|
|
|
12
12
|
const Cover = styled.div<{background: string; light: boolean}>`
|