@react-stately/color 3.9.5 → 3.10.0
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/dist/import.mjs +7 -9
- package/dist/main.js +14 -16
- package/dist/main.js.map +1 -1
- package/dist/module.js +7 -9
- package/dist/module.js.map +1 -1
- package/dist/types/src/index.d.ts +12 -0
- package/package.json +17 -20
- package/src/index.ts +12 -16
- package/dist/Color.main.js +0 -766
- package/dist/Color.main.js.map +0 -1
- package/dist/Color.mjs +0 -759
- package/dist/Color.module.js +0 -759
- package/dist/Color.module.js.map +0 -1
- package/dist/ar-AE.main.js +0 -42
- package/dist/ar-AE.main.js.map +0 -1
- package/dist/ar-AE.mjs +0 -44
- package/dist/ar-AE.module.js +0 -44
- package/dist/ar-AE.module.js.map +0 -1
- package/dist/bg-BG.main.js +0 -42
- package/dist/bg-BG.main.js.map +0 -1
- package/dist/bg-BG.mjs +0 -44
- package/dist/bg-BG.module.js +0 -44
- package/dist/bg-BG.module.js.map +0 -1
- package/dist/cs-CZ.main.js +0 -42
- package/dist/cs-CZ.main.js.map +0 -1
- package/dist/cs-CZ.mjs +0 -44
- package/dist/cs-CZ.module.js +0 -44
- package/dist/cs-CZ.module.js.map +0 -1
- package/dist/da-DK.main.js +0 -42
- package/dist/da-DK.main.js.map +0 -1
- package/dist/da-DK.mjs +0 -44
- package/dist/da-DK.module.js +0 -44
- package/dist/da-DK.module.js.map +0 -1
- package/dist/de-DE.main.js +0 -42
- package/dist/de-DE.main.js.map +0 -1
- package/dist/de-DE.mjs +0 -44
- package/dist/de-DE.module.js +0 -44
- package/dist/de-DE.module.js.map +0 -1
- package/dist/el-GR.main.js +0 -42
- package/dist/el-GR.main.js.map +0 -1
- package/dist/el-GR.mjs +0 -44
- package/dist/el-GR.module.js +0 -44
- package/dist/el-GR.module.js.map +0 -1
- package/dist/en-US.main.js +0 -42
- package/dist/en-US.main.js.map +0 -1
- package/dist/en-US.mjs +0 -44
- package/dist/en-US.module.js +0 -44
- package/dist/en-US.module.js.map +0 -1
- package/dist/es-ES.main.js +0 -42
- package/dist/es-ES.main.js.map +0 -1
- package/dist/es-ES.mjs +0 -44
- package/dist/es-ES.module.js +0 -44
- package/dist/es-ES.module.js.map +0 -1
- package/dist/et-EE.main.js +0 -42
- package/dist/et-EE.main.js.map +0 -1
- package/dist/et-EE.mjs +0 -44
- package/dist/et-EE.module.js +0 -44
- package/dist/et-EE.module.js.map +0 -1
- package/dist/fi-FI.main.js +0 -42
- package/dist/fi-FI.main.js.map +0 -1
- package/dist/fi-FI.mjs +0 -44
- package/dist/fi-FI.module.js +0 -44
- package/dist/fi-FI.module.js.map +0 -1
- package/dist/fr-FR.main.js +0 -42
- package/dist/fr-FR.main.js.map +0 -1
- package/dist/fr-FR.mjs +0 -44
- package/dist/fr-FR.module.js +0 -44
- package/dist/fr-FR.module.js.map +0 -1
- package/dist/he-IL.main.js +0 -42
- package/dist/he-IL.main.js.map +0 -1
- package/dist/he-IL.mjs +0 -44
- package/dist/he-IL.module.js +0 -44
- package/dist/he-IL.module.js.map +0 -1
- package/dist/hr-HR.main.js +0 -42
- package/dist/hr-HR.main.js.map +0 -1
- package/dist/hr-HR.mjs +0 -44
- package/dist/hr-HR.module.js +0 -44
- package/dist/hr-HR.module.js.map +0 -1
- package/dist/hu-HU.main.js +0 -42
- package/dist/hu-HU.main.js.map +0 -1
- package/dist/hu-HU.mjs +0 -44
- package/dist/hu-HU.module.js +0 -44
- package/dist/hu-HU.module.js.map +0 -1
- package/dist/intlStrings.main.js +0 -108
- package/dist/intlStrings.main.js.map +0 -1
- package/dist/intlStrings.mjs +0 -110
- package/dist/intlStrings.module.js +0 -110
- package/dist/intlStrings.module.js.map +0 -1
- package/dist/it-IT.main.js +0 -42
- package/dist/it-IT.main.js.map +0 -1
- package/dist/it-IT.mjs +0 -44
- package/dist/it-IT.module.js +0 -44
- package/dist/it-IT.module.js.map +0 -1
- package/dist/ja-JP.main.js +0 -42
- package/dist/ja-JP.main.js.map +0 -1
- package/dist/ja-JP.mjs +0 -44
- package/dist/ja-JP.module.js +0 -44
- package/dist/ja-JP.module.js.map +0 -1
- package/dist/ko-KR.main.js +0 -42
- package/dist/ko-KR.main.js.map +0 -1
- package/dist/ko-KR.mjs +0 -44
- package/dist/ko-KR.module.js +0 -44
- package/dist/ko-KR.module.js.map +0 -1
- package/dist/lt-LT.main.js +0 -42
- package/dist/lt-LT.main.js.map +0 -1
- package/dist/lt-LT.mjs +0 -44
- package/dist/lt-LT.module.js +0 -44
- package/dist/lt-LT.module.js.map +0 -1
- package/dist/lv-LV.main.js +0 -42
- package/dist/lv-LV.main.js.map +0 -1
- package/dist/lv-LV.mjs +0 -44
- package/dist/lv-LV.module.js +0 -44
- package/dist/lv-LV.module.js.map +0 -1
- package/dist/nb-NO.main.js +0 -42
- package/dist/nb-NO.main.js.map +0 -1
- package/dist/nb-NO.mjs +0 -44
- package/dist/nb-NO.module.js +0 -44
- package/dist/nb-NO.module.js.map +0 -1
- package/dist/nl-NL.main.js +0 -42
- package/dist/nl-NL.main.js.map +0 -1
- package/dist/nl-NL.mjs +0 -44
- package/dist/nl-NL.module.js +0 -44
- package/dist/nl-NL.module.js.map +0 -1
- package/dist/pl-PL.main.js +0 -42
- package/dist/pl-PL.main.js.map +0 -1
- package/dist/pl-PL.mjs +0 -44
- package/dist/pl-PL.module.js +0 -44
- package/dist/pl-PL.module.js.map +0 -1
- package/dist/pt-BR.main.js +0 -42
- package/dist/pt-BR.main.js.map +0 -1
- package/dist/pt-BR.mjs +0 -44
- package/dist/pt-BR.module.js +0 -44
- package/dist/pt-BR.module.js.map +0 -1
- package/dist/pt-PT.main.js +0 -42
- package/dist/pt-PT.main.js.map +0 -1
- package/dist/pt-PT.mjs +0 -44
- package/dist/pt-PT.module.js +0 -44
- package/dist/pt-PT.module.js.map +0 -1
- package/dist/ro-RO.main.js +0 -42
- package/dist/ro-RO.main.js.map +0 -1
- package/dist/ro-RO.mjs +0 -44
- package/dist/ro-RO.module.js +0 -44
- package/dist/ro-RO.module.js.map +0 -1
- package/dist/ru-RU.main.js +0 -42
- package/dist/ru-RU.main.js.map +0 -1
- package/dist/ru-RU.mjs +0 -44
- package/dist/ru-RU.module.js +0 -44
- package/dist/ru-RU.module.js.map +0 -1
- package/dist/sk-SK.main.js +0 -42
- package/dist/sk-SK.main.js.map +0 -1
- package/dist/sk-SK.mjs +0 -44
- package/dist/sk-SK.module.js +0 -44
- package/dist/sk-SK.module.js.map +0 -1
- package/dist/sl-SI.main.js +0 -42
- package/dist/sl-SI.main.js.map +0 -1
- package/dist/sl-SI.mjs +0 -44
- package/dist/sl-SI.module.js +0 -44
- package/dist/sl-SI.module.js.map +0 -1
- package/dist/sr-SP.main.js +0 -42
- package/dist/sr-SP.main.js.map +0 -1
- package/dist/sr-SP.mjs +0 -44
- package/dist/sr-SP.module.js +0 -44
- package/dist/sr-SP.module.js.map +0 -1
- package/dist/sv-SE.main.js +0 -42
- package/dist/sv-SE.main.js.map +0 -1
- package/dist/sv-SE.mjs +0 -44
- package/dist/sv-SE.module.js +0 -44
- package/dist/sv-SE.module.js.map +0 -1
- package/dist/tr-TR.main.js +0 -42
- package/dist/tr-TR.main.js.map +0 -1
- package/dist/tr-TR.mjs +0 -44
- package/dist/tr-TR.module.js +0 -44
- package/dist/tr-TR.module.js.map +0 -1
- package/dist/types.d.ts +0 -198
- package/dist/types.d.ts.map +0 -1
- package/dist/uk-UA.main.js +0 -42
- package/dist/uk-UA.main.js.map +0 -1
- package/dist/uk-UA.mjs +0 -44
- package/dist/uk-UA.module.js +0 -44
- package/dist/uk-UA.module.js.map +0 -1
- package/dist/useColor.main.js +0 -36
- package/dist/useColor.main.js.map +0 -1
- package/dist/useColor.mjs +0 -31
- package/dist/useColor.module.js +0 -31
- package/dist/useColor.module.js.map +0 -1
- package/dist/useColorAreaState.main.js +0 -133
- package/dist/useColorAreaState.main.js.map +0 -1
- package/dist/useColorAreaState.mjs +0 -128
- package/dist/useColorAreaState.module.js +0 -128
- package/dist/useColorAreaState.module.js.map +0 -1
- package/dist/useColorChannelFieldState.main.js +0 -65
- package/dist/useColorChannelFieldState.main.js.map +0 -1
- package/dist/useColorChannelFieldState.mjs +0 -60
- package/dist/useColorChannelFieldState.module.js +0 -60
- package/dist/useColorChannelFieldState.module.js.map +0 -1
- package/dist/useColorFieldState.main.js +0 -142
- package/dist/useColorFieldState.main.js.map +0 -1
- package/dist/useColorFieldState.mjs +0 -137
- package/dist/useColorFieldState.module.js +0 -137
- package/dist/useColorFieldState.module.js.map +0 -1
- package/dist/useColorPickerState.main.js +0 -27
- package/dist/useColorPickerState.main.js.map +0 -1
- package/dist/useColorPickerState.mjs +0 -22
- package/dist/useColorPickerState.module.js +0 -22
- package/dist/useColorPickerState.module.js.map +0 -1
- package/dist/useColorSliderState.main.js +0 -93
- package/dist/useColorSliderState.main.js.map +0 -1
- package/dist/useColorSliderState.mjs +0 -88
- package/dist/useColorSliderState.module.js +0 -88
- package/dist/useColorSliderState.module.js.map +0 -1
- package/dist/useColorWheelState.main.js +0 -135
- package/dist/useColorWheelState.main.js.map +0 -1
- package/dist/useColorWheelState.mjs +0 -130
- package/dist/useColorWheelState.module.js +0 -130
- package/dist/useColorWheelState.module.js.map +0 -1
- package/dist/zh-CN.main.js +0 -42
- package/dist/zh-CN.main.js.map +0 -1
- package/dist/zh-CN.mjs +0 -44
- package/dist/zh-CN.module.js +0 -44
- package/dist/zh-CN.module.js.map +0 -1
- package/dist/zh-TW.main.js +0 -42
- package/dist/zh-TW.main.js.map +0 -1
- package/dist/zh-TW.mjs +0 -44
- package/dist/zh-TW.module.js +0 -44
- package/dist/zh-TW.module.js.map +0 -1
- package/src/Color.ts +0 -792
- package/src/useColor.ts +0 -28
- package/src/useColorAreaState.ts +0 -202
- package/src/useColorChannelFieldState.ts +0 -74
- package/src/useColorFieldState.ts +0 -197
- package/src/useColorPickerState.ts +0 -29
- package/src/useColorSliderState.ts +0 -109
- package/src/useColorWheelState.ts +0 -196
package/dist/useColor.mjs
DELETED
|
@@ -1,31 +0,0 @@
|
|
|
1
|
-
import {parseColor as $799cddbef784668f$export$6e865ea70d7724f} from "./Color.mjs";
|
|
2
|
-
import {useMemo as $2sEeQ$useMemo} from "react";
|
|
3
|
-
|
|
4
|
-
/*
|
|
5
|
-
* Copyright 2020 Adobe. All rights reserved.
|
|
6
|
-
* This file is licensed to you under the Apache License, Version 2.0 (the "License");
|
|
7
|
-
* you may not use this file except in compliance with the License. You may obtain a copy
|
|
8
|
-
* of the License at http://www.apache.org/licenses/LICENSE-2.0
|
|
9
|
-
*
|
|
10
|
-
* Unless required by applicable law or agreed to in writing, software distributed under
|
|
11
|
-
* the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
|
|
12
|
-
* OF ANY KIND, either express or implied. See the License for the specific language
|
|
13
|
-
* governing permissions and limitations under the License.
|
|
14
|
-
*/
|
|
15
|
-
|
|
16
|
-
function $aa90ad8b2b1d015f$export$5aadd9c0606af5c2(value) {
|
|
17
|
-
return (0, $2sEeQ$useMemo)(()=>{
|
|
18
|
-
if (typeof value === 'string') try {
|
|
19
|
-
return (0, $799cddbef784668f$export$6e865ea70d7724f)(value);
|
|
20
|
-
} catch {
|
|
21
|
-
return undefined;
|
|
22
|
-
}
|
|
23
|
-
return value;
|
|
24
|
-
}, [
|
|
25
|
-
value
|
|
26
|
-
]);
|
|
27
|
-
}
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
export {$aa90ad8b2b1d015f$export$5aadd9c0606af5c2 as useColor};
|
|
31
|
-
//# sourceMappingURL=useColor.module.js.map
|
package/dist/useColor.module.js
DELETED
|
@@ -1,31 +0,0 @@
|
|
|
1
|
-
import {parseColor as $799cddbef784668f$export$6e865ea70d7724f} from "./Color.module.js";
|
|
2
|
-
import {useMemo as $2sEeQ$useMemo} from "react";
|
|
3
|
-
|
|
4
|
-
/*
|
|
5
|
-
* Copyright 2020 Adobe. All rights reserved.
|
|
6
|
-
* This file is licensed to you under the Apache License, Version 2.0 (the "License");
|
|
7
|
-
* you may not use this file except in compliance with the License. You may obtain a copy
|
|
8
|
-
* of the License at http://www.apache.org/licenses/LICENSE-2.0
|
|
9
|
-
*
|
|
10
|
-
* Unless required by applicable law or agreed to in writing, software distributed under
|
|
11
|
-
* the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
|
|
12
|
-
* OF ANY KIND, either express or implied. See the License for the specific language
|
|
13
|
-
* governing permissions and limitations under the License.
|
|
14
|
-
*/
|
|
15
|
-
|
|
16
|
-
function $aa90ad8b2b1d015f$export$5aadd9c0606af5c2(value) {
|
|
17
|
-
return (0, $2sEeQ$useMemo)(()=>{
|
|
18
|
-
if (typeof value === 'string') try {
|
|
19
|
-
return (0, $799cddbef784668f$export$6e865ea70d7724f)(value);
|
|
20
|
-
} catch {
|
|
21
|
-
return undefined;
|
|
22
|
-
}
|
|
23
|
-
return value;
|
|
24
|
-
}, [
|
|
25
|
-
value
|
|
26
|
-
]);
|
|
27
|
-
}
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
export {$aa90ad8b2b1d015f$export$5aadd9c0606af5c2 as useColor};
|
|
31
|
-
//# sourceMappingURL=useColor.module.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"mappings":";;;AAAA;;;;;;;;;;CAUC;;AAMM,SAAS,0CAAS,KAAwC;IAC/D,OAAO,CAAA,GAAA,cAAM,EAAE;QACb,IAAI,OAAO,UAAU,UACnB,IAAI;YACF,OAAO,CAAA,GAAA,wCAAS,EAAE;QACpB,EAAE,OAAM;YACN,OAAO;QACT;QAEF,OAAO;IACT,GAAG;QAAC;KAAM;AACZ","sources":["packages/@react-stately/color/src/useColor.ts"],"sourcesContent":["/*\n * Copyright 2020 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\nimport {Color} from '@react-types/color';\nimport {parseColor} from './Color';\nimport {useMemo} from 'react';\n\nexport function useColor(value: string | Color | undefined | null): Color | null | undefined {\n return useMemo(() => {\n if (typeof value === 'string') {\n try {\n return parseColor(value);\n } catch {\n return undefined;\n }\n }\n return value;\n }, [value]);\n}\n"],"names":[],"version":3,"file":"useColor.module.js.map"}
|
|
@@ -1,133 +0,0 @@
|
|
|
1
|
-
var $83fe1a57d631223b$exports = require("./Color.main.js");
|
|
2
|
-
var $318Do$reactstatelyutils = require("@react-stately/utils");
|
|
3
|
-
var $318Do$react = require("react");
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
function $parcel$export(e, n, v, s) {
|
|
7
|
-
Object.defineProperty(e, n, {get: v, set: s, enumerable: true, configurable: true});
|
|
8
|
-
}
|
|
9
|
-
|
|
10
|
-
$parcel$export(module.exports, "useColorAreaState", () => $af2d7ac9990cfee2$export$6df7f0e2cabc7eef);
|
|
11
|
-
/*
|
|
12
|
-
* Copyright 2020 Adobe. All rights reserved.
|
|
13
|
-
* This file is licensed to you under the Apache License, Version 2.0 (the "License");
|
|
14
|
-
* you may not use this file except in compliance with the License. You may obtain a copy
|
|
15
|
-
* of the License at http://www.apache.org/licenses/LICENSE-2.0
|
|
16
|
-
*
|
|
17
|
-
* Unless required by applicable law or agreed to in writing, software distributed under
|
|
18
|
-
* the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
|
|
19
|
-
* OF ANY KIND, either express or implied. See the License for the specific language
|
|
20
|
-
* governing permissions and limitations under the License.
|
|
21
|
-
*/
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
const $af2d7ac9990cfee2$var$DEFAULT_COLOR = (0, $83fe1a57d631223b$exports.parseColor)('#ffffff');
|
|
25
|
-
function $af2d7ac9990cfee2$export$6df7f0e2cabc7eef(props) {
|
|
26
|
-
let { value: value, defaultValue: defaultValue, colorSpace: colorSpace, xChannel: xChannel, yChannel: yChannel, onChange: onChange, onChangeEnd: onChangeEnd } = props;
|
|
27
|
-
if (!value && !defaultValue) defaultValue = $af2d7ac9990cfee2$var$DEFAULT_COLOR;
|
|
28
|
-
if (value) value = (0, $83fe1a57d631223b$exports.normalizeColor)(value);
|
|
29
|
-
if (defaultValue) defaultValue = (0, $83fe1a57d631223b$exports.normalizeColor)(defaultValue);
|
|
30
|
-
// safe to cast value and defaultValue to Color, one of them will always be defined because if neither are, we assign a default
|
|
31
|
-
let [colorValue, setColorState] = (0, $318Do$reactstatelyutils.useControlledState)(value, defaultValue, onChange);
|
|
32
|
-
let [initialValue] = (0, $318Do$react.useState)(colorValue);
|
|
33
|
-
let color = (0, $318Do$react.useMemo)(()=>colorSpace && colorValue ? colorValue.toFormat(colorSpace) : colorValue, [
|
|
34
|
-
colorValue,
|
|
35
|
-
colorSpace
|
|
36
|
-
]);
|
|
37
|
-
let valueRef = (0, $318Do$react.useRef)(color);
|
|
38
|
-
let setColor = (color)=>{
|
|
39
|
-
valueRef.current = color;
|
|
40
|
-
setColorState(color);
|
|
41
|
-
};
|
|
42
|
-
let channels = (0, $318Do$react.useMemo)(()=>color.getColorSpaceAxes({
|
|
43
|
-
xChannel: xChannel,
|
|
44
|
-
yChannel: yChannel
|
|
45
|
-
}), [
|
|
46
|
-
color,
|
|
47
|
-
xChannel,
|
|
48
|
-
yChannel
|
|
49
|
-
]);
|
|
50
|
-
let xChannelRange = color.getChannelRange(channels.xChannel);
|
|
51
|
-
let yChannelRange = color.getChannelRange(channels.yChannel);
|
|
52
|
-
let { minValue: minValueX, maxValue: maxValueX, step: stepX, pageSize: pageSizeX } = xChannelRange;
|
|
53
|
-
let { minValue: minValueY, maxValue: maxValueY, step: stepY, pageSize: pageSizeY } = yChannelRange;
|
|
54
|
-
let [isDragging, setDragging] = (0, $318Do$react.useState)(false);
|
|
55
|
-
let isDraggingRef = (0, $318Do$react.useRef)(false);
|
|
56
|
-
let xValue = color.getChannelValue(channels.xChannel);
|
|
57
|
-
let yValue = color.getChannelValue(channels.yChannel);
|
|
58
|
-
let setXValue = (v)=>{
|
|
59
|
-
if (v === xValue) return;
|
|
60
|
-
let newColor = color.withChannelValue(channels.xChannel, v);
|
|
61
|
-
setColor(newColor);
|
|
62
|
-
};
|
|
63
|
-
let setYValue = (v)=>{
|
|
64
|
-
if (v === yValue) return;
|
|
65
|
-
let newColor = color.withChannelValue(channels.yChannel, v);
|
|
66
|
-
setColor(newColor);
|
|
67
|
-
};
|
|
68
|
-
return {
|
|
69
|
-
channels: channels,
|
|
70
|
-
xChannelStep: stepX,
|
|
71
|
-
yChannelStep: stepY,
|
|
72
|
-
xChannelPageStep: pageSizeX,
|
|
73
|
-
yChannelPageStep: pageSizeY,
|
|
74
|
-
value: color,
|
|
75
|
-
defaultValue: value !== undefined ? initialValue : defaultValue,
|
|
76
|
-
setValue (value) {
|
|
77
|
-
setColor((0, $83fe1a57d631223b$exports.normalizeColor)(value));
|
|
78
|
-
},
|
|
79
|
-
xValue: xValue,
|
|
80
|
-
setXValue: setXValue,
|
|
81
|
-
yValue: yValue,
|
|
82
|
-
setYValue: setYValue,
|
|
83
|
-
setColorFromPoint (x, y) {
|
|
84
|
-
let newXValue = minValueX + (0, $318Do$reactstatelyutils.clamp)(x, 0, 1) * (maxValueX - minValueX);
|
|
85
|
-
let newYValue = minValueY + (1 - (0, $318Do$reactstatelyutils.clamp)(y, 0, 1)) * (maxValueY - minValueY);
|
|
86
|
-
let newColor;
|
|
87
|
-
if (newXValue !== xValue) {
|
|
88
|
-
// Round new value to multiple of step, clamp value between min and max
|
|
89
|
-
newXValue = (0, $318Do$reactstatelyutils.snapValueToStep)(newXValue, minValueX, maxValueX, stepX);
|
|
90
|
-
newColor = color.withChannelValue(channels.xChannel, newXValue);
|
|
91
|
-
}
|
|
92
|
-
if (newYValue !== yValue) {
|
|
93
|
-
// Round new value to multiple of step, clamp value between min and max
|
|
94
|
-
newYValue = (0, $318Do$reactstatelyutils.snapValueToStep)(newYValue, minValueY, maxValueY, stepY);
|
|
95
|
-
newColor = (newColor || color).withChannelValue(channels.yChannel, newYValue);
|
|
96
|
-
}
|
|
97
|
-
if (newColor) setColor(newColor);
|
|
98
|
-
},
|
|
99
|
-
getThumbPosition () {
|
|
100
|
-
let x = (xValue - minValueX) / (maxValueX - minValueX);
|
|
101
|
-
let y = 1 - (yValue - minValueY) / (maxValueY - minValueY);
|
|
102
|
-
return {
|
|
103
|
-
x: x,
|
|
104
|
-
y: y
|
|
105
|
-
};
|
|
106
|
-
},
|
|
107
|
-
incrementX (stepSize = 1) {
|
|
108
|
-
setXValue(xValue + stepSize > maxValueX ? maxValueX : (0, $318Do$reactstatelyutils.snapValueToStep)(xValue + stepSize, minValueX, maxValueX, stepX));
|
|
109
|
-
},
|
|
110
|
-
incrementY (stepSize = 1) {
|
|
111
|
-
setYValue(yValue + stepSize > maxValueY ? maxValueY : (0, $318Do$reactstatelyutils.snapValueToStep)(yValue + stepSize, minValueY, maxValueY, stepY));
|
|
112
|
-
},
|
|
113
|
-
decrementX (stepSize = 1) {
|
|
114
|
-
setXValue((0, $318Do$reactstatelyutils.snapValueToStep)(xValue - stepSize, minValueX, maxValueX, stepX));
|
|
115
|
-
},
|
|
116
|
-
decrementY (stepSize = 1) {
|
|
117
|
-
setYValue((0, $318Do$reactstatelyutils.snapValueToStep)(yValue - stepSize, minValueY, maxValueY, stepY));
|
|
118
|
-
},
|
|
119
|
-
setDragging (isDragging) {
|
|
120
|
-
let wasDragging = isDraggingRef.current;
|
|
121
|
-
isDraggingRef.current = isDragging;
|
|
122
|
-
if (onChangeEnd && !isDragging && wasDragging) onChangeEnd(valueRef.current);
|
|
123
|
-
setDragging(isDragging);
|
|
124
|
-
},
|
|
125
|
-
isDragging: isDragging,
|
|
126
|
-
getDisplayColor () {
|
|
127
|
-
return color.withChannelValue('alpha', 1);
|
|
128
|
-
}
|
|
129
|
-
};
|
|
130
|
-
}
|
|
131
|
-
|
|
132
|
-
|
|
133
|
-
//# sourceMappingURL=useColorAreaState.main.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"mappings":"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","sources":["packages/@react-stately/color/src/useColorAreaState.ts"],"sourcesContent":["/*\n * Copyright 2020 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\nimport {clamp, snapValueToStep, useControlledState} from '@react-stately/utils';\nimport {Color, ColorAreaProps, ColorChannel} from '@react-types/color';\nimport {normalizeColor, parseColor} from './Color';\nimport {useMemo, useRef, useState} from 'react';\n\nexport interface ColorAreaState {\n /** The current color value displayed by the color area. */\n readonly value: Color,\n /** The default value of the color area. */\n readonly defaultValue: Color,\n /** Sets the current color value. If a string is passed, it will be parsed to a Color. */\n setValue(value: string | Color): void,\n\n /** The current value of the horizontal axis channel displayed by the color area. */\n xValue: number,\n /** Sets the value for the horizontal axis channel displayed by the color area, and triggers `onChange`. */\n setXValue(value: number): void,\n\n /** The current value of the vertical axis channel displayed by the color area. */\n yValue: number,\n /** Sets the value for the vertical axis channel displayed by the color area, and triggers `onChange`. */\n setYValue(value: number): void,\n\n /** Sets the x and y channels of the current color value based on a percentage of the width and height of the color area, and triggers `onChange`. */\n setColorFromPoint(x: number, y: number): void,\n /** Returns the coordinates of the thumb relative to the upper left corner of the color area as a percentage. */\n getThumbPosition(): {x: number, y: number},\n\n /** Increments the value of the horizontal axis channel by the channel step or page amount. */\n incrementX(stepSize?: number): void,\n /** Decrements the value of the horizontal axis channel by the channel step or page amount. */\n decrementX(stepSize?: number): void,\n\n /** Increments the value of the vertical axis channel by the channel step or page amount. */\n incrementY(stepSize?: number): void,\n /** Decrements the value of the vertical axis channel by the channel step or page amount. */\n decrementY(stepSize?: number): void,\n\n /** Whether the color area is currently being dragged. */\n readonly isDragging: boolean,\n /** Sets whether the color area is being dragged. */\n setDragging(value: boolean): void,\n\n /** Returns the xChannel, yChannel and zChannel names based on the color value. */\n channels: {xChannel: ColorChannel, yChannel: ColorChannel, zChannel: ColorChannel},\n /** The step value of the xChannel, used when incrementing and decrementing. */\n xChannelStep: number,\n /** The step value of the yChannel, used when incrementing and decrementing. */\n yChannelStep: number,\n /** The page step value of the xChannel, used when incrementing and decrementing. */\n xChannelPageStep: number,\n /** The page step value of the yChannel, used when incrementing and decrementing. */\n yChannelPageStep: number,\n\n /** Returns the color that should be displayed in the color area thumb instead of `value`. */\n getDisplayColor(): Color\n}\n\nconst DEFAULT_COLOR = parseColor('#ffffff');\n/**\n * Provides state management for a color area component.\n * Color area allows users to adjust two channels of an HSL, HSB or RGB color value against a two-dimensional gradient background.\n */\nexport function useColorAreaState(props: ColorAreaProps): ColorAreaState {\n let {\n value,\n defaultValue,\n colorSpace,\n xChannel,\n yChannel,\n onChange,\n onChangeEnd\n } = props;\n\n if (!value && !defaultValue) {\n defaultValue = DEFAULT_COLOR;\n }\n if (value) {\n value = normalizeColor(value);\n }\n if (defaultValue) {\n defaultValue = normalizeColor(defaultValue);\n }\n\n // safe to cast value and defaultValue to Color, one of them will always be defined because if neither are, we assign a default\n let [colorValue, setColorState] = useControlledState<Color>(value as Color, defaultValue as Color, onChange);\n let [initialValue] = useState(colorValue);\n let color = useMemo(() => colorSpace && colorValue ? colorValue.toFormat(colorSpace) : colorValue, [colorValue, colorSpace]);\n let valueRef = useRef(color);\n let setColor = (color: Color) => {\n valueRef.current = color;\n setColorState(color);\n };\n\n let channels = useMemo(() =>\n color.getColorSpaceAxes({xChannel, yChannel}),\n [color, xChannel, yChannel]\n );\n\n let xChannelRange = color.getChannelRange(channels.xChannel);\n let yChannelRange = color.getChannelRange(channels.yChannel);\n let {minValue: minValueX, maxValue: maxValueX, step: stepX, pageSize: pageSizeX} = xChannelRange;\n let {minValue: minValueY, maxValue: maxValueY, step: stepY, pageSize: pageSizeY} = yChannelRange;\n\n let [isDragging, setDragging] = useState(false);\n let isDraggingRef = useRef(false);\n\n let xValue = color.getChannelValue(channels.xChannel);\n let yValue = color.getChannelValue(channels.yChannel);\n let setXValue = (v: number) => {\n if (v === xValue) {\n return;\n }\n let newColor = color.withChannelValue(channels.xChannel, v);\n setColor(newColor);\n };\n let setYValue = (v: number) => {\n if (v === yValue) {\n return;\n }\n let newColor = color.withChannelValue(channels.yChannel, v);\n setColor(newColor);\n };\n\n return {\n channels,\n xChannelStep: stepX,\n yChannelStep: stepY,\n xChannelPageStep: pageSizeX,\n yChannelPageStep: pageSizeY,\n value: color,\n defaultValue: value !== undefined ? initialValue : defaultValue as Color,\n setValue(value) {\n setColor(normalizeColor(value));\n },\n xValue,\n setXValue,\n yValue,\n setYValue,\n setColorFromPoint(x: number, y: number) {\n let newXValue = minValueX + clamp(x, 0, 1) * (maxValueX - minValueX);\n let newYValue = minValueY + (1 - clamp(y, 0, 1)) * (maxValueY - minValueY);\n let newColor: Color | undefined;\n if (newXValue !== xValue) {\n // Round new value to multiple of step, clamp value between min and max\n newXValue = snapValueToStep(newXValue, minValueX, maxValueX, stepX);\n newColor = color.withChannelValue(channels.xChannel, newXValue);\n }\n if (newYValue !== yValue) {\n // Round new value to multiple of step, clamp value between min and max\n newYValue = snapValueToStep(newYValue, minValueY, maxValueY, stepY);\n newColor = (newColor || color).withChannelValue(channels.yChannel, newYValue);\n }\n if (newColor) {\n setColor(newColor);\n }\n },\n getThumbPosition() {\n let x = (xValue - minValueX) / (maxValueX - minValueX);\n let y = 1 - (yValue - minValueY) / (maxValueY - minValueY);\n return {x, y};\n },\n incrementX(stepSize = 1) {\n setXValue(xValue + stepSize > maxValueX ? maxValueX : snapValueToStep(xValue + stepSize, minValueX, maxValueX, stepX));\n },\n incrementY(stepSize = 1) {\n setYValue(yValue + stepSize > maxValueY ? maxValueY : snapValueToStep(yValue + stepSize, minValueY, maxValueY, stepY));\n },\n decrementX(stepSize = 1) {\n setXValue(snapValueToStep(xValue - stepSize, minValueX, maxValueX, stepX));\n },\n decrementY(stepSize = 1) {\n setYValue(snapValueToStep(yValue - stepSize, minValueY, maxValueY, stepY));\n },\n setDragging(isDragging) {\n let wasDragging = isDraggingRef.current;\n isDraggingRef.current = isDragging;\n\n if (onChangeEnd && !isDragging && wasDragging) {\n onChangeEnd(valueRef.current);\n }\n\n setDragging(isDragging);\n },\n isDragging,\n getDisplayColor() {\n return color.withChannelValue('alpha', 1);\n }\n };\n}\n"],"names":[],"version":3,"file":"useColorAreaState.main.js.map"}
|
|
@@ -1,128 +0,0 @@
|
|
|
1
|
-
import {normalizeColor as $799cddbef784668f$export$4cde5df63f53f473, parseColor as $799cddbef784668f$export$6e865ea70d7724f} from "./Color.mjs";
|
|
2
|
-
import {useControlledState as $5ShDH$useControlledState, clamp as $5ShDH$clamp, snapValueToStep as $5ShDH$snapValueToStep} from "@react-stately/utils";
|
|
3
|
-
import {useState as $5ShDH$useState, useMemo as $5ShDH$useMemo, useRef as $5ShDH$useRef} from "react";
|
|
4
|
-
|
|
5
|
-
/*
|
|
6
|
-
* Copyright 2020 Adobe. All rights reserved.
|
|
7
|
-
* This file is licensed to you under the Apache License, Version 2.0 (the "License");
|
|
8
|
-
* you may not use this file except in compliance with the License. You may obtain a copy
|
|
9
|
-
* of the License at http://www.apache.org/licenses/LICENSE-2.0
|
|
10
|
-
*
|
|
11
|
-
* Unless required by applicable law or agreed to in writing, software distributed under
|
|
12
|
-
* the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
|
|
13
|
-
* OF ANY KIND, either express or implied. See the License for the specific language
|
|
14
|
-
* governing permissions and limitations under the License.
|
|
15
|
-
*/
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
const $6e14a98a7f67141d$var$DEFAULT_COLOR = (0, $799cddbef784668f$export$6e865ea70d7724f)('#ffffff');
|
|
19
|
-
function $6e14a98a7f67141d$export$6df7f0e2cabc7eef(props) {
|
|
20
|
-
let { value: value, defaultValue: defaultValue, colorSpace: colorSpace, xChannel: xChannel, yChannel: yChannel, onChange: onChange, onChangeEnd: onChangeEnd } = props;
|
|
21
|
-
if (!value && !defaultValue) defaultValue = $6e14a98a7f67141d$var$DEFAULT_COLOR;
|
|
22
|
-
if (value) value = (0, $799cddbef784668f$export$4cde5df63f53f473)(value);
|
|
23
|
-
if (defaultValue) defaultValue = (0, $799cddbef784668f$export$4cde5df63f53f473)(defaultValue);
|
|
24
|
-
// safe to cast value and defaultValue to Color, one of them will always be defined because if neither are, we assign a default
|
|
25
|
-
let [colorValue, setColorState] = (0, $5ShDH$useControlledState)(value, defaultValue, onChange);
|
|
26
|
-
let [initialValue] = (0, $5ShDH$useState)(colorValue);
|
|
27
|
-
let color = (0, $5ShDH$useMemo)(()=>colorSpace && colorValue ? colorValue.toFormat(colorSpace) : colorValue, [
|
|
28
|
-
colorValue,
|
|
29
|
-
colorSpace
|
|
30
|
-
]);
|
|
31
|
-
let valueRef = (0, $5ShDH$useRef)(color);
|
|
32
|
-
let setColor = (color)=>{
|
|
33
|
-
valueRef.current = color;
|
|
34
|
-
setColorState(color);
|
|
35
|
-
};
|
|
36
|
-
let channels = (0, $5ShDH$useMemo)(()=>color.getColorSpaceAxes({
|
|
37
|
-
xChannel: xChannel,
|
|
38
|
-
yChannel: yChannel
|
|
39
|
-
}), [
|
|
40
|
-
color,
|
|
41
|
-
xChannel,
|
|
42
|
-
yChannel
|
|
43
|
-
]);
|
|
44
|
-
let xChannelRange = color.getChannelRange(channels.xChannel);
|
|
45
|
-
let yChannelRange = color.getChannelRange(channels.yChannel);
|
|
46
|
-
let { minValue: minValueX, maxValue: maxValueX, step: stepX, pageSize: pageSizeX } = xChannelRange;
|
|
47
|
-
let { minValue: minValueY, maxValue: maxValueY, step: stepY, pageSize: pageSizeY } = yChannelRange;
|
|
48
|
-
let [isDragging, setDragging] = (0, $5ShDH$useState)(false);
|
|
49
|
-
let isDraggingRef = (0, $5ShDH$useRef)(false);
|
|
50
|
-
let xValue = color.getChannelValue(channels.xChannel);
|
|
51
|
-
let yValue = color.getChannelValue(channels.yChannel);
|
|
52
|
-
let setXValue = (v)=>{
|
|
53
|
-
if (v === xValue) return;
|
|
54
|
-
let newColor = color.withChannelValue(channels.xChannel, v);
|
|
55
|
-
setColor(newColor);
|
|
56
|
-
};
|
|
57
|
-
let setYValue = (v)=>{
|
|
58
|
-
if (v === yValue) return;
|
|
59
|
-
let newColor = color.withChannelValue(channels.yChannel, v);
|
|
60
|
-
setColor(newColor);
|
|
61
|
-
};
|
|
62
|
-
return {
|
|
63
|
-
channels: channels,
|
|
64
|
-
xChannelStep: stepX,
|
|
65
|
-
yChannelStep: stepY,
|
|
66
|
-
xChannelPageStep: pageSizeX,
|
|
67
|
-
yChannelPageStep: pageSizeY,
|
|
68
|
-
value: color,
|
|
69
|
-
defaultValue: value !== undefined ? initialValue : defaultValue,
|
|
70
|
-
setValue (value) {
|
|
71
|
-
setColor((0, $799cddbef784668f$export$4cde5df63f53f473)(value));
|
|
72
|
-
},
|
|
73
|
-
xValue: xValue,
|
|
74
|
-
setXValue: setXValue,
|
|
75
|
-
yValue: yValue,
|
|
76
|
-
setYValue: setYValue,
|
|
77
|
-
setColorFromPoint (x, y) {
|
|
78
|
-
let newXValue = minValueX + (0, $5ShDH$clamp)(x, 0, 1) * (maxValueX - minValueX);
|
|
79
|
-
let newYValue = minValueY + (1 - (0, $5ShDH$clamp)(y, 0, 1)) * (maxValueY - minValueY);
|
|
80
|
-
let newColor;
|
|
81
|
-
if (newXValue !== xValue) {
|
|
82
|
-
// Round new value to multiple of step, clamp value between min and max
|
|
83
|
-
newXValue = (0, $5ShDH$snapValueToStep)(newXValue, minValueX, maxValueX, stepX);
|
|
84
|
-
newColor = color.withChannelValue(channels.xChannel, newXValue);
|
|
85
|
-
}
|
|
86
|
-
if (newYValue !== yValue) {
|
|
87
|
-
// Round new value to multiple of step, clamp value between min and max
|
|
88
|
-
newYValue = (0, $5ShDH$snapValueToStep)(newYValue, minValueY, maxValueY, stepY);
|
|
89
|
-
newColor = (newColor || color).withChannelValue(channels.yChannel, newYValue);
|
|
90
|
-
}
|
|
91
|
-
if (newColor) setColor(newColor);
|
|
92
|
-
},
|
|
93
|
-
getThumbPosition () {
|
|
94
|
-
let x = (xValue - minValueX) / (maxValueX - minValueX);
|
|
95
|
-
let y = 1 - (yValue - minValueY) / (maxValueY - minValueY);
|
|
96
|
-
return {
|
|
97
|
-
x: x,
|
|
98
|
-
y: y
|
|
99
|
-
};
|
|
100
|
-
},
|
|
101
|
-
incrementX (stepSize = 1) {
|
|
102
|
-
setXValue(xValue + stepSize > maxValueX ? maxValueX : (0, $5ShDH$snapValueToStep)(xValue + stepSize, minValueX, maxValueX, stepX));
|
|
103
|
-
},
|
|
104
|
-
incrementY (stepSize = 1) {
|
|
105
|
-
setYValue(yValue + stepSize > maxValueY ? maxValueY : (0, $5ShDH$snapValueToStep)(yValue + stepSize, minValueY, maxValueY, stepY));
|
|
106
|
-
},
|
|
107
|
-
decrementX (stepSize = 1) {
|
|
108
|
-
setXValue((0, $5ShDH$snapValueToStep)(xValue - stepSize, minValueX, maxValueX, stepX));
|
|
109
|
-
},
|
|
110
|
-
decrementY (stepSize = 1) {
|
|
111
|
-
setYValue((0, $5ShDH$snapValueToStep)(yValue - stepSize, minValueY, maxValueY, stepY));
|
|
112
|
-
},
|
|
113
|
-
setDragging (isDragging) {
|
|
114
|
-
let wasDragging = isDraggingRef.current;
|
|
115
|
-
isDraggingRef.current = isDragging;
|
|
116
|
-
if (onChangeEnd && !isDragging && wasDragging) onChangeEnd(valueRef.current);
|
|
117
|
-
setDragging(isDragging);
|
|
118
|
-
},
|
|
119
|
-
isDragging: isDragging,
|
|
120
|
-
getDisplayColor () {
|
|
121
|
-
return color.withChannelValue('alpha', 1);
|
|
122
|
-
}
|
|
123
|
-
};
|
|
124
|
-
}
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
export {$6e14a98a7f67141d$export$6df7f0e2cabc7eef as useColorAreaState};
|
|
128
|
-
//# sourceMappingURL=useColorAreaState.module.js.map
|
|
@@ -1,128 +0,0 @@
|
|
|
1
|
-
import {normalizeColor as $799cddbef784668f$export$4cde5df63f53f473, parseColor as $799cddbef784668f$export$6e865ea70d7724f} from "./Color.module.js";
|
|
2
|
-
import {useControlledState as $5ShDH$useControlledState, clamp as $5ShDH$clamp, snapValueToStep as $5ShDH$snapValueToStep} from "@react-stately/utils";
|
|
3
|
-
import {useState as $5ShDH$useState, useMemo as $5ShDH$useMemo, useRef as $5ShDH$useRef} from "react";
|
|
4
|
-
|
|
5
|
-
/*
|
|
6
|
-
* Copyright 2020 Adobe. All rights reserved.
|
|
7
|
-
* This file is licensed to you under the Apache License, Version 2.0 (the "License");
|
|
8
|
-
* you may not use this file except in compliance with the License. You may obtain a copy
|
|
9
|
-
* of the License at http://www.apache.org/licenses/LICENSE-2.0
|
|
10
|
-
*
|
|
11
|
-
* Unless required by applicable law or agreed to in writing, software distributed under
|
|
12
|
-
* the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
|
|
13
|
-
* OF ANY KIND, either express or implied. See the License for the specific language
|
|
14
|
-
* governing permissions and limitations under the License.
|
|
15
|
-
*/
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
const $6e14a98a7f67141d$var$DEFAULT_COLOR = (0, $799cddbef784668f$export$6e865ea70d7724f)('#ffffff');
|
|
19
|
-
function $6e14a98a7f67141d$export$6df7f0e2cabc7eef(props) {
|
|
20
|
-
let { value: value, defaultValue: defaultValue, colorSpace: colorSpace, xChannel: xChannel, yChannel: yChannel, onChange: onChange, onChangeEnd: onChangeEnd } = props;
|
|
21
|
-
if (!value && !defaultValue) defaultValue = $6e14a98a7f67141d$var$DEFAULT_COLOR;
|
|
22
|
-
if (value) value = (0, $799cddbef784668f$export$4cde5df63f53f473)(value);
|
|
23
|
-
if (defaultValue) defaultValue = (0, $799cddbef784668f$export$4cde5df63f53f473)(defaultValue);
|
|
24
|
-
// safe to cast value and defaultValue to Color, one of them will always be defined because if neither are, we assign a default
|
|
25
|
-
let [colorValue, setColorState] = (0, $5ShDH$useControlledState)(value, defaultValue, onChange);
|
|
26
|
-
let [initialValue] = (0, $5ShDH$useState)(colorValue);
|
|
27
|
-
let color = (0, $5ShDH$useMemo)(()=>colorSpace && colorValue ? colorValue.toFormat(colorSpace) : colorValue, [
|
|
28
|
-
colorValue,
|
|
29
|
-
colorSpace
|
|
30
|
-
]);
|
|
31
|
-
let valueRef = (0, $5ShDH$useRef)(color);
|
|
32
|
-
let setColor = (color)=>{
|
|
33
|
-
valueRef.current = color;
|
|
34
|
-
setColorState(color);
|
|
35
|
-
};
|
|
36
|
-
let channels = (0, $5ShDH$useMemo)(()=>color.getColorSpaceAxes({
|
|
37
|
-
xChannel: xChannel,
|
|
38
|
-
yChannel: yChannel
|
|
39
|
-
}), [
|
|
40
|
-
color,
|
|
41
|
-
xChannel,
|
|
42
|
-
yChannel
|
|
43
|
-
]);
|
|
44
|
-
let xChannelRange = color.getChannelRange(channels.xChannel);
|
|
45
|
-
let yChannelRange = color.getChannelRange(channels.yChannel);
|
|
46
|
-
let { minValue: minValueX, maxValue: maxValueX, step: stepX, pageSize: pageSizeX } = xChannelRange;
|
|
47
|
-
let { minValue: minValueY, maxValue: maxValueY, step: stepY, pageSize: pageSizeY } = yChannelRange;
|
|
48
|
-
let [isDragging, setDragging] = (0, $5ShDH$useState)(false);
|
|
49
|
-
let isDraggingRef = (0, $5ShDH$useRef)(false);
|
|
50
|
-
let xValue = color.getChannelValue(channels.xChannel);
|
|
51
|
-
let yValue = color.getChannelValue(channels.yChannel);
|
|
52
|
-
let setXValue = (v)=>{
|
|
53
|
-
if (v === xValue) return;
|
|
54
|
-
let newColor = color.withChannelValue(channels.xChannel, v);
|
|
55
|
-
setColor(newColor);
|
|
56
|
-
};
|
|
57
|
-
let setYValue = (v)=>{
|
|
58
|
-
if (v === yValue) return;
|
|
59
|
-
let newColor = color.withChannelValue(channels.yChannel, v);
|
|
60
|
-
setColor(newColor);
|
|
61
|
-
};
|
|
62
|
-
return {
|
|
63
|
-
channels: channels,
|
|
64
|
-
xChannelStep: stepX,
|
|
65
|
-
yChannelStep: stepY,
|
|
66
|
-
xChannelPageStep: pageSizeX,
|
|
67
|
-
yChannelPageStep: pageSizeY,
|
|
68
|
-
value: color,
|
|
69
|
-
defaultValue: value !== undefined ? initialValue : defaultValue,
|
|
70
|
-
setValue (value) {
|
|
71
|
-
setColor((0, $799cddbef784668f$export$4cde5df63f53f473)(value));
|
|
72
|
-
},
|
|
73
|
-
xValue: xValue,
|
|
74
|
-
setXValue: setXValue,
|
|
75
|
-
yValue: yValue,
|
|
76
|
-
setYValue: setYValue,
|
|
77
|
-
setColorFromPoint (x, y) {
|
|
78
|
-
let newXValue = minValueX + (0, $5ShDH$clamp)(x, 0, 1) * (maxValueX - minValueX);
|
|
79
|
-
let newYValue = minValueY + (1 - (0, $5ShDH$clamp)(y, 0, 1)) * (maxValueY - minValueY);
|
|
80
|
-
let newColor;
|
|
81
|
-
if (newXValue !== xValue) {
|
|
82
|
-
// Round new value to multiple of step, clamp value between min and max
|
|
83
|
-
newXValue = (0, $5ShDH$snapValueToStep)(newXValue, minValueX, maxValueX, stepX);
|
|
84
|
-
newColor = color.withChannelValue(channels.xChannel, newXValue);
|
|
85
|
-
}
|
|
86
|
-
if (newYValue !== yValue) {
|
|
87
|
-
// Round new value to multiple of step, clamp value between min and max
|
|
88
|
-
newYValue = (0, $5ShDH$snapValueToStep)(newYValue, minValueY, maxValueY, stepY);
|
|
89
|
-
newColor = (newColor || color).withChannelValue(channels.yChannel, newYValue);
|
|
90
|
-
}
|
|
91
|
-
if (newColor) setColor(newColor);
|
|
92
|
-
},
|
|
93
|
-
getThumbPosition () {
|
|
94
|
-
let x = (xValue - minValueX) / (maxValueX - minValueX);
|
|
95
|
-
let y = 1 - (yValue - minValueY) / (maxValueY - minValueY);
|
|
96
|
-
return {
|
|
97
|
-
x: x,
|
|
98
|
-
y: y
|
|
99
|
-
};
|
|
100
|
-
},
|
|
101
|
-
incrementX (stepSize = 1) {
|
|
102
|
-
setXValue(xValue + stepSize > maxValueX ? maxValueX : (0, $5ShDH$snapValueToStep)(xValue + stepSize, minValueX, maxValueX, stepX));
|
|
103
|
-
},
|
|
104
|
-
incrementY (stepSize = 1) {
|
|
105
|
-
setYValue(yValue + stepSize > maxValueY ? maxValueY : (0, $5ShDH$snapValueToStep)(yValue + stepSize, minValueY, maxValueY, stepY));
|
|
106
|
-
},
|
|
107
|
-
decrementX (stepSize = 1) {
|
|
108
|
-
setXValue((0, $5ShDH$snapValueToStep)(xValue - stepSize, minValueX, maxValueX, stepX));
|
|
109
|
-
},
|
|
110
|
-
decrementY (stepSize = 1) {
|
|
111
|
-
setYValue((0, $5ShDH$snapValueToStep)(yValue - stepSize, minValueY, maxValueY, stepY));
|
|
112
|
-
},
|
|
113
|
-
setDragging (isDragging) {
|
|
114
|
-
let wasDragging = isDraggingRef.current;
|
|
115
|
-
isDraggingRef.current = isDragging;
|
|
116
|
-
if (onChangeEnd && !isDragging && wasDragging) onChangeEnd(valueRef.current);
|
|
117
|
-
setDragging(isDragging);
|
|
118
|
-
},
|
|
119
|
-
isDragging: isDragging,
|
|
120
|
-
getDisplayColor () {
|
|
121
|
-
return color.withChannelValue('alpha', 1);
|
|
122
|
-
}
|
|
123
|
-
};
|
|
124
|
-
}
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
export {$6e14a98a7f67141d$export$6df7f0e2cabc7eef as useColorAreaState};
|
|
128
|
-
//# sourceMappingURL=useColorAreaState.module.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"mappings":"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","sources":["packages/@react-stately/color/src/useColorAreaState.ts"],"sourcesContent":["/*\n * Copyright 2020 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\nimport {clamp, snapValueToStep, useControlledState} from '@react-stately/utils';\nimport {Color, ColorAreaProps, ColorChannel} from '@react-types/color';\nimport {normalizeColor, parseColor} from './Color';\nimport {useMemo, useRef, useState} from 'react';\n\nexport interface ColorAreaState {\n /** The current color value displayed by the color area. */\n readonly value: Color,\n /** The default value of the color area. */\n readonly defaultValue: Color,\n /** Sets the current color value. If a string is passed, it will be parsed to a Color. */\n setValue(value: string | Color): void,\n\n /** The current value of the horizontal axis channel displayed by the color area. */\n xValue: number,\n /** Sets the value for the horizontal axis channel displayed by the color area, and triggers `onChange`. */\n setXValue(value: number): void,\n\n /** The current value of the vertical axis channel displayed by the color area. */\n yValue: number,\n /** Sets the value for the vertical axis channel displayed by the color area, and triggers `onChange`. */\n setYValue(value: number): void,\n\n /** Sets the x and y channels of the current color value based on a percentage of the width and height of the color area, and triggers `onChange`. */\n setColorFromPoint(x: number, y: number): void,\n /** Returns the coordinates of the thumb relative to the upper left corner of the color area as a percentage. */\n getThumbPosition(): {x: number, y: number},\n\n /** Increments the value of the horizontal axis channel by the channel step or page amount. */\n incrementX(stepSize?: number): void,\n /** Decrements the value of the horizontal axis channel by the channel step or page amount. */\n decrementX(stepSize?: number): void,\n\n /** Increments the value of the vertical axis channel by the channel step or page amount. */\n incrementY(stepSize?: number): void,\n /** Decrements the value of the vertical axis channel by the channel step or page amount. */\n decrementY(stepSize?: number): void,\n\n /** Whether the color area is currently being dragged. */\n readonly isDragging: boolean,\n /** Sets whether the color area is being dragged. */\n setDragging(value: boolean): void,\n\n /** Returns the xChannel, yChannel and zChannel names based on the color value. */\n channels: {xChannel: ColorChannel, yChannel: ColorChannel, zChannel: ColorChannel},\n /** The step value of the xChannel, used when incrementing and decrementing. */\n xChannelStep: number,\n /** The step value of the yChannel, used when incrementing and decrementing. */\n yChannelStep: number,\n /** The page step value of the xChannel, used when incrementing and decrementing. */\n xChannelPageStep: number,\n /** The page step value of the yChannel, used when incrementing and decrementing. */\n yChannelPageStep: number,\n\n /** Returns the color that should be displayed in the color area thumb instead of `value`. */\n getDisplayColor(): Color\n}\n\nconst DEFAULT_COLOR = parseColor('#ffffff');\n/**\n * Provides state management for a color area component.\n * Color area allows users to adjust two channels of an HSL, HSB or RGB color value against a two-dimensional gradient background.\n */\nexport function useColorAreaState(props: ColorAreaProps): ColorAreaState {\n let {\n value,\n defaultValue,\n colorSpace,\n xChannel,\n yChannel,\n onChange,\n onChangeEnd\n } = props;\n\n if (!value && !defaultValue) {\n defaultValue = DEFAULT_COLOR;\n }\n if (value) {\n value = normalizeColor(value);\n }\n if (defaultValue) {\n defaultValue = normalizeColor(defaultValue);\n }\n\n // safe to cast value and defaultValue to Color, one of them will always be defined because if neither are, we assign a default\n let [colorValue, setColorState] = useControlledState<Color>(value as Color, defaultValue as Color, onChange);\n let [initialValue] = useState(colorValue);\n let color = useMemo(() => colorSpace && colorValue ? colorValue.toFormat(colorSpace) : colorValue, [colorValue, colorSpace]);\n let valueRef = useRef(color);\n let setColor = (color: Color) => {\n valueRef.current = color;\n setColorState(color);\n };\n\n let channels = useMemo(() =>\n color.getColorSpaceAxes({xChannel, yChannel}),\n [color, xChannel, yChannel]\n );\n\n let xChannelRange = color.getChannelRange(channels.xChannel);\n let yChannelRange = color.getChannelRange(channels.yChannel);\n let {minValue: minValueX, maxValue: maxValueX, step: stepX, pageSize: pageSizeX} = xChannelRange;\n let {minValue: minValueY, maxValue: maxValueY, step: stepY, pageSize: pageSizeY} = yChannelRange;\n\n let [isDragging, setDragging] = useState(false);\n let isDraggingRef = useRef(false);\n\n let xValue = color.getChannelValue(channels.xChannel);\n let yValue = color.getChannelValue(channels.yChannel);\n let setXValue = (v: number) => {\n if (v === xValue) {\n return;\n }\n let newColor = color.withChannelValue(channels.xChannel, v);\n setColor(newColor);\n };\n let setYValue = (v: number) => {\n if (v === yValue) {\n return;\n }\n let newColor = color.withChannelValue(channels.yChannel, v);\n setColor(newColor);\n };\n\n return {\n channels,\n xChannelStep: stepX,\n yChannelStep: stepY,\n xChannelPageStep: pageSizeX,\n yChannelPageStep: pageSizeY,\n value: color,\n defaultValue: value !== undefined ? initialValue : defaultValue as Color,\n setValue(value) {\n setColor(normalizeColor(value));\n },\n xValue,\n setXValue,\n yValue,\n setYValue,\n setColorFromPoint(x: number, y: number) {\n let newXValue = minValueX + clamp(x, 0, 1) * (maxValueX - minValueX);\n let newYValue = minValueY + (1 - clamp(y, 0, 1)) * (maxValueY - minValueY);\n let newColor: Color | undefined;\n if (newXValue !== xValue) {\n // Round new value to multiple of step, clamp value between min and max\n newXValue = snapValueToStep(newXValue, minValueX, maxValueX, stepX);\n newColor = color.withChannelValue(channels.xChannel, newXValue);\n }\n if (newYValue !== yValue) {\n // Round new value to multiple of step, clamp value between min and max\n newYValue = snapValueToStep(newYValue, minValueY, maxValueY, stepY);\n newColor = (newColor || color).withChannelValue(channels.yChannel, newYValue);\n }\n if (newColor) {\n setColor(newColor);\n }\n },\n getThumbPosition() {\n let x = (xValue - minValueX) / (maxValueX - minValueX);\n let y = 1 - (yValue - minValueY) / (maxValueY - minValueY);\n return {x, y};\n },\n incrementX(stepSize = 1) {\n setXValue(xValue + stepSize > maxValueX ? maxValueX : snapValueToStep(xValue + stepSize, minValueX, maxValueX, stepX));\n },\n incrementY(stepSize = 1) {\n setYValue(yValue + stepSize > maxValueY ? maxValueY : snapValueToStep(yValue + stepSize, minValueY, maxValueY, stepY));\n },\n decrementX(stepSize = 1) {\n setXValue(snapValueToStep(xValue - stepSize, minValueX, maxValueX, stepX));\n },\n decrementY(stepSize = 1) {\n setYValue(snapValueToStep(yValue - stepSize, minValueY, maxValueY, stepY));\n },\n setDragging(isDragging) {\n let wasDragging = isDraggingRef.current;\n isDraggingRef.current = isDragging;\n\n if (onChangeEnd && !isDragging && wasDragging) {\n onChangeEnd(valueRef.current);\n }\n\n setDragging(isDragging);\n },\n isDragging,\n getDisplayColor() {\n return color.withChannelValue('alpha', 1);\n }\n };\n}\n"],"names":[],"version":3,"file":"useColorAreaState.module.js.map"}
|
|
@@ -1,65 +0,0 @@
|
|
|
1
|
-
var $f8b3be23ba4462b1$exports = require("./useColor.main.js");
|
|
2
|
-
var $8s2vy$reactstatelynumberfield = require("@react-stately/numberfield");
|
|
3
|
-
var $8s2vy$reactstatelyutils = require("@react-stately/utils");
|
|
4
|
-
var $8s2vy$react = require("react");
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
function $parcel$export(e, n, v, s) {
|
|
8
|
-
Object.defineProperty(e, n, {get: v, set: s, enumerable: true, configurable: true});
|
|
9
|
-
}
|
|
10
|
-
|
|
11
|
-
$parcel$export(module.exports, "useColorChannelFieldState", () => $9f9c35e37074b99b$export$b9fc0d69c9190c4a);
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
function $9f9c35e37074b99b$export$b9fc0d69c9190c4a(props) {
|
|
17
|
-
let { channel: channel, colorSpace: colorSpace, locale: locale } = props;
|
|
18
|
-
let initialValue = (0, $f8b3be23ba4462b1$exports.useColor)(props.value);
|
|
19
|
-
let initialDefaultValue = (0, $f8b3be23ba4462b1$exports.useColor)(props.defaultValue);
|
|
20
|
-
let [colorValue, setColor] = (0, $8s2vy$reactstatelyutils.useControlledState)(initialValue, initialDefaultValue !== null && initialDefaultValue !== void 0 ? initialDefaultValue : null, props.onChange);
|
|
21
|
-
let color = $9f9c35e37074b99b$var$useConvertColor(colorValue, colorSpace);
|
|
22
|
-
let [initialColorValue] = (0, $8s2vy$react.useState)(colorValue);
|
|
23
|
-
let defaultColorValue = initialDefaultValue !== null && initialDefaultValue !== void 0 ? initialDefaultValue : initialColorValue;
|
|
24
|
-
let defaultColor = $9f9c35e37074b99b$var$useConvertColor(defaultColorValue, colorSpace);
|
|
25
|
-
let value = color.getChannelValue(channel);
|
|
26
|
-
let range = color.getChannelRange(channel);
|
|
27
|
-
let formatOptions = (0, $8s2vy$react.useMemo)(()=>color.getChannelFormatOptions(channel), [
|
|
28
|
-
color,
|
|
29
|
-
channel
|
|
30
|
-
]);
|
|
31
|
-
let multiplier = formatOptions.style === 'percent' && range.maxValue === 100 ? 100 : 1;
|
|
32
|
-
let numberFieldState = (0, $8s2vy$reactstatelynumberfield.useNumberFieldState)({
|
|
33
|
-
locale: locale,
|
|
34
|
-
value: colorValue === null ? NaN : value / multiplier,
|
|
35
|
-
defaultValue: defaultColorValue === null ? NaN : defaultColor.getChannelValue(channel) / multiplier,
|
|
36
|
-
onChange: (v)=>{
|
|
37
|
-
if (!Number.isNaN(v)) setColor(color.withChannelValue(channel, v * multiplier));
|
|
38
|
-
else setColor(null);
|
|
39
|
-
},
|
|
40
|
-
minValue: range.minValue / multiplier,
|
|
41
|
-
maxValue: range.maxValue / multiplier,
|
|
42
|
-
step: range.step / multiplier,
|
|
43
|
-
formatOptions: formatOptions
|
|
44
|
-
});
|
|
45
|
-
return {
|
|
46
|
-
...numberFieldState,
|
|
47
|
-
colorValue: color,
|
|
48
|
-
defaultColorValue: defaultColorValue,
|
|
49
|
-
setColorValue: setColor
|
|
50
|
-
};
|
|
51
|
-
}
|
|
52
|
-
function $9f9c35e37074b99b$var$useConvertColor(colorValue, colorSpace) {
|
|
53
|
-
let black = (0, $f8b3be23ba4462b1$exports.useColor)('#000');
|
|
54
|
-
return (0, $8s2vy$react.useMemo)(()=>{
|
|
55
|
-
let nonNullColorValue = colorValue || black;
|
|
56
|
-
return colorSpace && nonNullColorValue ? nonNullColorValue.toFormat(colorSpace) : nonNullColorValue;
|
|
57
|
-
}, [
|
|
58
|
-
black,
|
|
59
|
-
colorValue,
|
|
60
|
-
colorSpace
|
|
61
|
-
]);
|
|
62
|
-
}
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
//# sourceMappingURL=useColorChannelFieldState.main.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"mappings":";;;;;;;;;;;;;;;AA4BO,SAAS,0CAA0B,KAAoC;IAC5E,IAAI,WAAC,OAAO,cAAE,UAAU,UAAE,MAAM,EAAC,GAAG;IACpC,IAAI,eAAe,CAAA,GAAA,kCAAO,EAAE,MAAM,KAAK;IACvC,IAAI,sBAAsB,CAAA,GAAA,kCAAO,EAAE,MAAM,YAAY;IACrD,IAAI,CAAC,YAAY,SAAS,GAAG,CAAA,GAAA,2CAAiB,EAAE,cAAc,gCAAA,iCAAA,sBAAuB,MAAM,MAAM,QAAQ;IACzG,IAAI,QAAQ,sCAAgB,YAAY;IACxC,IAAI,CAAC,kBAAkB,GAAG,CAAA,GAAA,qBAAO,EAAE;IACnC,IAAI,oBAAoB,gCAAA,iCAAA,sBAAuB;IAC/C,IAAI,eAAe,sCAAgB,mBAAmB;IACtD,IAAI,QAAQ,MAAM,eAAe,CAAC;IAClC,IAAI,QAAQ,MAAM,eAAe,CAAC;IAClC,IAAI,gBAAgB,CAAA,GAAA,oBAAM,EAAE,IAAM,MAAM,uBAAuB,CAAC,UAAU;QAAC;QAAO;KAAQ;IAC1F,IAAI,aAAa,cAAc,KAAK,KAAK,aAAa,MAAM,QAAQ,KAAK,MAAM,MAAM;IAErF,IAAI,mBAAmB,CAAA,GAAA,kDAAkB,EAAE;gBACzC;QACA,OAAO,eAAe,OAAO,MAAM,QAAQ;QAC3C,cAAc,sBAAsB,OAAO,MAAM,aAAa,eAAe,CAAC,WAAW;QACzF,UAAU,CAAC;YACT,IAAI,CAAC,OAAO,KAAK,CAAC,IAChB,SAAS,MAAM,gBAAgB,CAAC,SAAS,IAAI;iBAE7C,SAAS;QAEb;QACA,UAAU,MAAM,QAAQ,GAAG;QAC3B,UAAU,MAAM,QAAQ,GAAG;QAC3B,MAAM,MAAM,IAAI,GAAG;uBACnB;IACF;IAEA,OAAO;QACL,GAAG,gBAAgB;QACnB,YAAY;2BACZ;QACA,eAAe;IACjB;AACF;AAEA,SAAS,sCAAgB,UAAwB,EAAE,UAAyC;IAC1F,IAAI,QAAQ,CAAA,GAAA,kCAAO,EAAE;IACrB,OAAO,CAAA,GAAA,oBAAM,EAAE;QACb,IAAI,oBAAoB,cAAc;QACtC,OAAO,cAAc,oBAAoB,kBAAkB,QAAQ,CAAC,cAAc;IACpF,GAAG;QAAC;QAAO;QAAY;KAAW;AACpC","sources":["packages/@react-stately/color/src/useColorChannelFieldState.ts"],"sourcesContent":["import {Color, ColorChannel, ColorFieldProps, ColorSpace} from '@react-types/color';\nimport {NumberFieldState, useNumberFieldState} from '@react-stately/numberfield';\nimport {useColor} from './useColor';\nimport {useControlledState} from '@react-stately/utils';\nimport {useMemo, useState} from 'react';\n\nexport interface ColorChannelFieldProps extends ColorFieldProps {\n colorSpace?: ColorSpace,\n channel: ColorChannel\n}\n\nexport interface ColorChannelFieldStateOptions extends ColorChannelFieldProps {\n locale: string\n}\n\nexport interface ColorChannelFieldState extends NumberFieldState {\n /** The current value of the field. */\n colorValue: Color,\n /** The default value of the field. */\n defaultColorValue: Color | null,\n /** Sets the color value of the field. */\n setColorValue(value: Color | null): void\n}\n\n/**\n * Provides state management for a color channel field, allowing users to edit the\n * value of an individual color channel.\n */\nexport function useColorChannelFieldState(props: ColorChannelFieldStateOptions): ColorChannelFieldState {\n let {channel, colorSpace, locale} = props;\n let initialValue = useColor(props.value);\n let initialDefaultValue = useColor(props.defaultValue);\n let [colorValue, setColor] = useControlledState(initialValue, initialDefaultValue ?? null, props.onChange);\n let color = useConvertColor(colorValue, colorSpace);\n let [initialColorValue] = useState(colorValue);\n let defaultColorValue = initialDefaultValue ?? initialColorValue;\n let defaultColor = useConvertColor(defaultColorValue, colorSpace);\n let value = color.getChannelValue(channel);\n let range = color.getChannelRange(channel);\n let formatOptions = useMemo(() => color.getChannelFormatOptions(channel), [color, channel]);\n let multiplier = formatOptions.style === 'percent' && range.maxValue === 100 ? 100 : 1;\n\n let numberFieldState = useNumberFieldState({\n locale,\n value: colorValue === null ? NaN : value / multiplier,\n defaultValue: defaultColorValue === null ? NaN : defaultColor.getChannelValue(channel) / multiplier,\n onChange: (v) => {\n if (!Number.isNaN(v)) {\n setColor(color.withChannelValue(channel, v * multiplier));\n } else {\n setColor(null);\n }\n },\n minValue: range.minValue / multiplier,\n maxValue: range.maxValue / multiplier,\n step: range.step / multiplier,\n formatOptions\n });\n\n return {\n ...numberFieldState,\n colorValue: color,\n defaultColorValue,\n setColorValue: setColor\n };\n}\n\nfunction useConvertColor(colorValue: Color | null, colorSpace: ColorSpace | null | undefined) {\n let black = useColor('#000')!;\n return useMemo(() => {\n let nonNullColorValue = colorValue || black;\n return colorSpace && nonNullColorValue ? nonNullColorValue.toFormat(colorSpace) : nonNullColorValue;\n }, [black, colorValue, colorSpace]);\n}\n"],"names":[],"version":3,"file":"useColorChannelFieldState.main.js.map"}
|
|
@@ -1,60 +0,0 @@
|
|
|
1
|
-
import {useColor as $aa90ad8b2b1d015f$export$5aadd9c0606af5c2} from "./useColor.mjs";
|
|
2
|
-
import {useNumberFieldState as $52OvP$useNumberFieldState} from "@react-stately/numberfield";
|
|
3
|
-
import {useControlledState as $52OvP$useControlledState} from "@react-stately/utils";
|
|
4
|
-
import {useState as $52OvP$useState, useMemo as $52OvP$useMemo} from "react";
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
function $31a863bb88e75dd6$export$b9fc0d69c9190c4a(props) {
|
|
11
|
-
let { channel: channel, colorSpace: colorSpace, locale: locale } = props;
|
|
12
|
-
let initialValue = (0, $aa90ad8b2b1d015f$export$5aadd9c0606af5c2)(props.value);
|
|
13
|
-
let initialDefaultValue = (0, $aa90ad8b2b1d015f$export$5aadd9c0606af5c2)(props.defaultValue);
|
|
14
|
-
let [colorValue, setColor] = (0, $52OvP$useControlledState)(initialValue, initialDefaultValue !== null && initialDefaultValue !== void 0 ? initialDefaultValue : null, props.onChange);
|
|
15
|
-
let color = $31a863bb88e75dd6$var$useConvertColor(colorValue, colorSpace);
|
|
16
|
-
let [initialColorValue] = (0, $52OvP$useState)(colorValue);
|
|
17
|
-
let defaultColorValue = initialDefaultValue !== null && initialDefaultValue !== void 0 ? initialDefaultValue : initialColorValue;
|
|
18
|
-
let defaultColor = $31a863bb88e75dd6$var$useConvertColor(defaultColorValue, colorSpace);
|
|
19
|
-
let value = color.getChannelValue(channel);
|
|
20
|
-
let range = color.getChannelRange(channel);
|
|
21
|
-
let formatOptions = (0, $52OvP$useMemo)(()=>color.getChannelFormatOptions(channel), [
|
|
22
|
-
color,
|
|
23
|
-
channel
|
|
24
|
-
]);
|
|
25
|
-
let multiplier = formatOptions.style === 'percent' && range.maxValue === 100 ? 100 : 1;
|
|
26
|
-
let numberFieldState = (0, $52OvP$useNumberFieldState)({
|
|
27
|
-
locale: locale,
|
|
28
|
-
value: colorValue === null ? NaN : value / multiplier,
|
|
29
|
-
defaultValue: defaultColorValue === null ? NaN : defaultColor.getChannelValue(channel) / multiplier,
|
|
30
|
-
onChange: (v)=>{
|
|
31
|
-
if (!Number.isNaN(v)) setColor(color.withChannelValue(channel, v * multiplier));
|
|
32
|
-
else setColor(null);
|
|
33
|
-
},
|
|
34
|
-
minValue: range.minValue / multiplier,
|
|
35
|
-
maxValue: range.maxValue / multiplier,
|
|
36
|
-
step: range.step / multiplier,
|
|
37
|
-
formatOptions: formatOptions
|
|
38
|
-
});
|
|
39
|
-
return {
|
|
40
|
-
...numberFieldState,
|
|
41
|
-
colorValue: color,
|
|
42
|
-
defaultColorValue: defaultColorValue,
|
|
43
|
-
setColorValue: setColor
|
|
44
|
-
};
|
|
45
|
-
}
|
|
46
|
-
function $31a863bb88e75dd6$var$useConvertColor(colorValue, colorSpace) {
|
|
47
|
-
let black = (0, $aa90ad8b2b1d015f$export$5aadd9c0606af5c2)('#000');
|
|
48
|
-
return (0, $52OvP$useMemo)(()=>{
|
|
49
|
-
let nonNullColorValue = colorValue || black;
|
|
50
|
-
return colorSpace && nonNullColorValue ? nonNullColorValue.toFormat(colorSpace) : nonNullColorValue;
|
|
51
|
-
}, [
|
|
52
|
-
black,
|
|
53
|
-
colorValue,
|
|
54
|
-
colorSpace
|
|
55
|
-
]);
|
|
56
|
-
}
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
export {$31a863bb88e75dd6$export$b9fc0d69c9190c4a as useColorChannelFieldState};
|
|
60
|
-
//# sourceMappingURL=useColorChannelFieldState.module.js.map
|