@chayns-components/color-picker 5.0.0-beta.575 → 5.0.0-beta.577
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.
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { Accordion, AccordionGroup,
|
|
1
|
+
import { Accordion, AccordionGroup, AreaContext } from '@chayns-components/core';
|
|
2
2
|
import { isHex } from '@chayns/colors';
|
|
3
3
|
import React, { useContext, useEffect, useMemo, useState } from 'react';
|
|
4
4
|
import { extractRgbValues, hexToRgb, isValidRGBA, rgbToHex } from '../../../../../utils/color';
|
|
@@ -10,7 +10,7 @@ const MoreOptions = () => {
|
|
|
10
10
|
updateSelectedColor,
|
|
11
11
|
updateShouldCallOnSelect
|
|
12
12
|
} = useContext(ColorPickerContext);
|
|
13
|
-
const areaProvider = useContext(
|
|
13
|
+
const areaProvider = useContext(AreaContext);
|
|
14
14
|
const [tmpHexValue, setTmpHexValue] = useState('');
|
|
15
15
|
const [tmpRgbValue, setTmpRgbValue] = useState('');
|
|
16
16
|
const [isHexInvalid, setIsHexInvalid] = useState(false);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"MoreOptions.js","names":["Accordion","AccordionGroup","
|
|
1
|
+
{"version":3,"file":"MoreOptions.js","names":["Accordion","AccordionGroup","AreaContext","isHex","React","useContext","useEffect","useMemo","useState","extractRgbValues","hexToRgb","isValidRGBA","rgbToHex","ColorPickerContext","StyledMoreOptions","StyledMoreOptionsInput","StyledMoreOptionsInputWrapper","MoreOptions","selectedColor","updateSelectedColor","updateShouldCallOnSelect","areaProvider","tmpHexValue","setTmpHexValue","tmpRgbValue","setTmpRgbValue","isHexInvalid","setIsHexInvalid","isRgbInvalid","setIsRgbInvalid","shouldChangeColor","handleHexChange","event","target","value","isValid","r","g","b","a","handleRgbChange","createElement","isWrapped","title","$shouldChangeColor","onChange","$isInvalid","displayName"],"sources":["../../../../../../src/components/color-picker/color-picker-wrapper/color-picker-popup/more-options/MoreOptions.tsx"],"sourcesContent":["import { Accordion, AccordionGroup, AreaContext } from '@chayns-components/core';\nimport { isHex } from '@chayns/colors';\nimport React, { useContext, useEffect, useMemo, useState, type ChangeEvent } from 'react';\nimport { extractRgbValues, hexToRgb, isValidRGBA, rgbToHex } from '../../../../../utils/color';\nimport { ColorPickerContext } from '../../../../ColorPickerProvider';\nimport {\n StyledMoreOptions,\n StyledMoreOptionsInput,\n StyledMoreOptionsInputWrapper,\n} from './MoreOptions.styles';\n\nconst MoreOptions = () => {\n const { selectedColor, updateSelectedColor, updateShouldCallOnSelect } =\n useContext(ColorPickerContext);\n const areaProvider = useContext(AreaContext);\n\n const [tmpHexValue, setTmpHexValue] = useState('');\n const [tmpRgbValue, setTmpRgbValue] = useState('');\n const [isHexInvalid, setIsHexInvalid] = useState(false);\n const [isRgbInvalid, setIsRgbInvalid] = useState(false);\n\n const shouldChangeColor = useMemo(\n () => areaProvider.shouldChangeColor ?? false,\n [areaProvider.shouldChangeColor],\n );\n\n const handleHexChange = (event: ChangeEvent<HTMLInputElement>) => {\n setTmpHexValue(event.target.value);\n\n const isValid = isHex(event.target.value);\n\n setIsHexInvalid(!isValid);\n\n if (typeof updateSelectedColor === 'function' && isValid) {\n const { r, g, b, a } = hexToRgb(event.target.value);\n\n updateSelectedColor(`rgba(${r},${g},${b},${a})`);\n }\n\n if (typeof updateShouldCallOnSelect === 'function' && isValid) {\n updateShouldCallOnSelect(true);\n }\n };\n\n const handleRgbChange = (event: ChangeEvent<HTMLInputElement>) => {\n setTmpRgbValue(event.target.value);\n\n const isValid = isValidRGBA(event.target.value);\n\n setIsRgbInvalid(!isValid);\n\n if (typeof updateSelectedColor === 'function' && isValid) {\n updateSelectedColor(event.target.value);\n }\n\n if (typeof updateShouldCallOnSelect === 'function' && isValid) {\n updateShouldCallOnSelect(true);\n }\n };\n\n useEffect(() => {\n if (selectedColor) {\n setTmpRgbValue(selectedColor);\n setTmpHexValue(rgbToHex(extractRgbValues(selectedColor ?? '')));\n }\n }, [selectedColor]);\n\n return (\n <StyledMoreOptions>\n <AccordionGroup isWrapped>\n <Accordion title=\"Erweitert\">\n <StyledMoreOptionsInputWrapper>\n <StyledMoreOptionsInput\n $shouldChangeColor={shouldChangeColor}\n value={tmpHexValue}\n onChange={handleHexChange}\n $isInvalid={isHexInvalid}\n />\n <StyledMoreOptionsInput\n $shouldChangeColor={shouldChangeColor}\n value={tmpRgbValue}\n onChange={handleRgbChange}\n $isInvalid={isRgbInvalid}\n />\n </StyledMoreOptionsInputWrapper>\n </Accordion>\n </AccordionGroup>\n </StyledMoreOptions>\n );\n};\n\nMoreOptions.displayName = 'MoreOptions';\n\nexport default MoreOptions;\n"],"mappings":"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","ignoreList":[]}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@chayns-components/color-picker",
|
|
3
|
-
"version": "5.0.0-beta.
|
|
3
|
+
"version": "5.0.0-beta.577",
|
|
4
4
|
"description": "A set of beautiful React components for developing your own applications with chayns.",
|
|
5
5
|
"sideEffects": false,
|
|
6
6
|
"browserslist": [
|
|
@@ -57,7 +57,7 @@
|
|
|
57
57
|
"typescript": "^5.4.5"
|
|
58
58
|
},
|
|
59
59
|
"dependencies": {
|
|
60
|
-
"@chayns-components/core": "^5.0.0-beta.
|
|
60
|
+
"@chayns-components/core": "^5.0.0-beta.577",
|
|
61
61
|
"@chayns/colors": "^2.0.0"
|
|
62
62
|
},
|
|
63
63
|
"peerDependencies": {
|
|
@@ -70,5 +70,5 @@
|
|
|
70
70
|
"publishConfig": {
|
|
71
71
|
"access": "public"
|
|
72
72
|
},
|
|
73
|
-
"gitHead": "
|
|
73
|
+
"gitHead": "2c4cdf186970672936ffe297f3901361d94b9e2d"
|
|
74
74
|
}
|