@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
|
@@ -1,93 +0,0 @@
|
|
|
1
|
-
var $83fe1a57d631223b$exports = require("./Color.main.js");
|
|
2
|
-
var $93tpS$reactstatelyslider = require("@react-stately/slider");
|
|
3
|
-
var $93tpS$reactstatelyutils = require("@react-stately/utils");
|
|
4
|
-
var $93tpS$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, "useColorSliderState", () => $5386a492cfd3234c$export$57bc203e1c9c6d44);
|
|
12
|
-
/*
|
|
13
|
-
* Copyright 2020 Adobe. All rights reserved.
|
|
14
|
-
* This file is licensed to you under the Apache License, Version 2.0 (the "License");
|
|
15
|
-
* you may not use this file except in compliance with the License. You may obtain a copy
|
|
16
|
-
* of the License at http://www.apache.org/licenses/LICENSE-2.0
|
|
17
|
-
*
|
|
18
|
-
* Unless required by applicable law or agreed to in writing, software distributed under
|
|
19
|
-
* the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
|
|
20
|
-
* OF ANY KIND, either express or implied. See the License for the specific language
|
|
21
|
-
* governing permissions and limitations under the License.
|
|
22
|
-
*/
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
function $5386a492cfd3234c$export$57bc203e1c9c6d44(props) {
|
|
27
|
-
let { channel: channel, colorSpace: colorSpace, value: value, defaultValue: defaultValue, onChange: onChange, locale: locale, ...otherProps } = props;
|
|
28
|
-
if (value == null && defaultValue == null) throw new Error('useColorSliderState requires a value or defaultValue');
|
|
29
|
-
if (value) value = (0, $83fe1a57d631223b$exports.normalizeColor)(value);
|
|
30
|
-
if (defaultValue) defaultValue = (0, $83fe1a57d631223b$exports.normalizeColor)(defaultValue);
|
|
31
|
-
// safe to cast value and defaultValue to Color, one of them will always be defined because if neither are, we throw an error
|
|
32
|
-
let [colorValue, setColor] = (0, $93tpS$reactstatelyutils.useControlledState)(value, defaultValue, onChange);
|
|
33
|
-
let color = (0, $93tpS$react.useMemo)(()=>colorSpace && colorValue ? colorValue.toFormat(colorSpace) : colorValue, [
|
|
34
|
-
colorValue,
|
|
35
|
-
colorSpace
|
|
36
|
-
]);
|
|
37
|
-
let [initialValue] = (0, $93tpS$react.useState)(colorValue);
|
|
38
|
-
let defaultColorValue = defaultValue !== null && defaultValue !== void 0 ? defaultValue : initialValue;
|
|
39
|
-
let defaultColor = (0, $93tpS$react.useMemo)(()=>colorSpace && defaultColorValue ? defaultColorValue.toFormat(colorSpace) : defaultColorValue, [
|
|
40
|
-
defaultColorValue,
|
|
41
|
-
colorSpace
|
|
42
|
-
]);
|
|
43
|
-
let sliderState = (0, $93tpS$reactstatelyslider.useSliderState)({
|
|
44
|
-
...color.getChannelRange(channel),
|
|
45
|
-
...otherProps,
|
|
46
|
-
// Unused except in getThumbValueLabel, which is overridden below. null to localize the TypeScript error for ignoring.
|
|
47
|
-
// @ts-ignore
|
|
48
|
-
numberFormatter: null,
|
|
49
|
-
value: color.getChannelValue(channel),
|
|
50
|
-
defaultValue: defaultColor.getChannelValue(channel),
|
|
51
|
-
onChange (v) {
|
|
52
|
-
setColor(color.withChannelValue(channel, v));
|
|
53
|
-
},
|
|
54
|
-
onChangeEnd (v) {
|
|
55
|
-
// onChange will have already been called with the right value, this is just to trigger onChangeEnd
|
|
56
|
-
if (props.onChangeEnd) props.onChangeEnd(color.withChannelValue(channel, v));
|
|
57
|
-
}
|
|
58
|
-
});
|
|
59
|
-
let { step: step, pageSize: pageSize } = color.getChannelRange(channel);
|
|
60
|
-
return {
|
|
61
|
-
...sliderState,
|
|
62
|
-
value: color,
|
|
63
|
-
setValue (value) {
|
|
64
|
-
setColor((0, $83fe1a57d631223b$exports.normalizeColor)(value));
|
|
65
|
-
},
|
|
66
|
-
getDisplayColor () {
|
|
67
|
-
switch(channel){
|
|
68
|
-
case 'hue':
|
|
69
|
-
return (0, $83fe1a57d631223b$exports.parseColor)(`hsl(${color.getChannelValue('hue')}, 100%, 50%)`);
|
|
70
|
-
case 'lightness':
|
|
71
|
-
case 'brightness':
|
|
72
|
-
case 'saturation':
|
|
73
|
-
case 'red':
|
|
74
|
-
case 'green':
|
|
75
|
-
case 'blue':
|
|
76
|
-
return color.withChannelValue('alpha', 1);
|
|
77
|
-
case 'alpha':
|
|
78
|
-
return color;
|
|
79
|
-
default:
|
|
80
|
-
throw new Error('Unknown color channel: ' + channel);
|
|
81
|
-
}
|
|
82
|
-
},
|
|
83
|
-
getThumbValueLabel () {
|
|
84
|
-
return color.formatChannelValue(channel, locale);
|
|
85
|
-
},
|
|
86
|
-
step: step,
|
|
87
|
-
pageSize: pageSize,
|
|
88
|
-
isDragging: sliderState.isThumbDragging(0)
|
|
89
|
-
};
|
|
90
|
-
}
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
//# sourceMappingURL=useColorSliderState.main.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"mappings":";;;;;;;;;;;AAAA;;;;;;;;;;CAUC;;;;AA6BM,SAAS,0CAAoB,KAA8B;IAChE,IAAI,WAAC,OAAO,cAAE,UAAU,SAAE,KAAK,gBAAE,YAAY,YAAE,QAAQ,UAAE,MAAM,EAAE,GAAG,YAAW,GAAG;IAClF,IAAI,SAAS,QAAQ,gBAAgB,MACnC,MAAM,IAAI,MAAM;IAGlB,IAAI,OACF,QAAQ,CAAA,GAAA,wCAAa,EAAE;IAEzB,IAAI,cACF,eAAe,CAAA,GAAA,wCAAa,EAAE;IAEhC,6HAA6H;IAC7H,IAAI,CAAC,YAAY,SAAS,GAAG,CAAA,GAAA,2CAAiB,EAAS,OAAgB,cAAuB;IAC9F,IAAI,QAAQ,CAAA,GAAA,oBAAM,EAAE,IAAM,cAAc,aAAa,WAAW,QAAQ,CAAC,cAAc,YAAY;QAAC;QAAY;KAAW;IAC3H,IAAI,CAAC,aAAa,GAAG,CAAA,GAAA,qBAAO,EAAE;IAC9B,IAAI,oBAAoB,AAAC,yBAAA,0BAAA,eAA0B;IACnD,IAAI,eAAe,CAAA,GAAA,oBAAM,EAAE,IAAM,cAAc,oBAAoB,kBAAkB,QAAQ,CAAC,cAAc,mBAAmB;QAAC;QAAmB;KAAW;IAC9J,IAAI,cAAc,CAAA,GAAA,wCAAa,EAAE;QAC/B,GAAG,MAAM,eAAe,CAAC,QAAQ;QACjC,GAAG,UAAU;QACb,sHAAsH;QACtH,aAAa;QACb,iBAAiB;QACjB,OAAO,MAAM,eAAe,CAAC;QAC7B,cAAc,aAAa,eAAe,CAAC;QAC3C,UAAS,CAAC;YACR,SAAS,MAAM,gBAAgB,CAAC,SAAS;QAC3C;QACA,aAAY,CAAC;YACX,mGAAmG;YACnG,IAAI,MAAM,WAAW,EACnB,MAAM,WAAW,CAAC,MAAM,gBAAgB,CAAC,SAAS;QAEtD;IACF;IAEA,IAAI,QAAC,IAAI,YAAE,QAAQ,EAAC,GAAG,MAAM,eAAe,CAAC;IAC7C,OAAO;QACL,GAAG,WAAW;QACd,OAAO;QACP,UAAS,KAAK;YACZ,SAAS,CAAA,GAAA,wCAAa,EAAE;QAC1B;QACA;YACE,OAAQ;gBACN,KAAK;oBACH,OAAO,CAAA,GAAA,oCAAS,EAAE,CAAC,IAAI,EAAE,MAAM,eAAe,CAAC,OAAO,YAAY,CAAC;gBACrE,KAAK;gBACL,KAAK;gBACL,KAAK;gBACL,KAAK;gBACL,KAAK;gBACL,KAAK;oBACH,OAAO,MAAM,gBAAgB,CAAC,SAAS;gBACzC,KAAK;oBACH,OAAO;gBAET;oBACE,MAAM,IAAI,MAAM,4BAA4B;YAChD;QACF;QACA;YACE,OAAO,MAAM,kBAAkB,CAAC,SAAS;QAC3C;cACA;kBACA;QACA,YAAY,YAAY,eAAe,CAAC;IAC1C;AACF","sources":["packages/@react-stately/color/src/useColorSliderState.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, ColorSliderProps} from '@react-types/color';\nimport {normalizeColor, parseColor} from './Color';\nimport {SliderState, useSliderState} from '@react-stately/slider';\nimport {useControlledState} from '@react-stately/utils';\nimport {useMemo, useState} from 'react';\n\nexport interface ColorSliderState extends SliderState {\n /** The current color value represented by the color slider. */\n readonly value: 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 /** Returns the color that should be displayed in the slider instead of `value` or the optional parameter. */\n getDisplayColor(): Color,\n /** Whether the color slider is currently being dragged. */\n readonly isDragging: boolean\n}\n\n\nexport interface ColorSliderStateOptions extends ColorSliderProps {\n /** The locale to use for formatting the color channel value. */\n locale: string\n}\n\n/**\n * Provides state management for a color slider component.\n * Color sliders allow users to adjust an individual channel of a color value.\n */\nexport function useColorSliderState(props: ColorSliderStateOptions): ColorSliderState {\n let {channel, colorSpace, value, defaultValue, onChange, locale, ...otherProps} = props;\n if (value == null && defaultValue == null) {\n throw new Error('useColorSliderState requires a value or defaultValue');\n }\n\n if (value) {\n value = normalizeColor(value);\n }\n if (defaultValue) {\n defaultValue = normalizeColor(defaultValue);\n }\n // safe to cast value and defaultValue to Color, one of them will always be defined because if neither are, we throw an error\n let [colorValue, setColor] = useControlledState<Color>(value as Color, defaultValue as Color, onChange);\n let color = useMemo(() => colorSpace && colorValue ? colorValue.toFormat(colorSpace) : colorValue, [colorValue, colorSpace]);\n let [initialValue] = useState(colorValue);\n let defaultColorValue = (defaultValue as Color) ?? initialValue;\n let defaultColor = useMemo(() => colorSpace && defaultColorValue ? defaultColorValue.toFormat(colorSpace) : defaultColorValue, [defaultColorValue, colorSpace]);\n let sliderState = useSliderState({\n ...color.getChannelRange(channel),\n ...otherProps,\n // Unused except in getThumbValueLabel, which is overridden below. null to localize the TypeScript error for ignoring.\n // @ts-ignore\n numberFormatter: null,\n value: color.getChannelValue(channel),\n defaultValue: defaultColor.getChannelValue(channel),\n onChange(v) {\n setColor(color.withChannelValue(channel, v));\n },\n onChangeEnd(v) {\n // onChange will have already been called with the right value, this is just to trigger onChangeEnd\n if (props.onChangeEnd) {\n props.onChangeEnd(color.withChannelValue(channel, v));\n }\n }\n });\n\n let {step, pageSize} = color.getChannelRange(channel);\n return {\n ...sliderState,\n value: color,\n setValue(value) {\n setColor(normalizeColor(value));\n },\n getDisplayColor() {\n switch (channel) {\n case 'hue':\n return parseColor(`hsl(${color.getChannelValue('hue')}, 100%, 50%)`);\n case 'lightness':\n case 'brightness':\n case 'saturation':\n case 'red':\n case 'green':\n case 'blue':\n return color.withChannelValue('alpha', 1);\n case 'alpha': {\n return color;\n }\n default:\n throw new Error('Unknown color channel: ' + channel);\n }\n },\n getThumbValueLabel() {\n return color.formatChannelValue(channel, locale);\n },\n step,\n pageSize,\n isDragging: sliderState.isThumbDragging(0)\n };\n}\n"],"names":[],"version":3,"file":"useColorSliderState.main.js.map"}
|
|
@@ -1,88 +0,0 @@
|
|
|
1
|
-
import {normalizeColor as $799cddbef784668f$export$4cde5df63f53f473, parseColor as $799cddbef784668f$export$6e865ea70d7724f} from "./Color.mjs";
|
|
2
|
-
import {useSliderState as $1Eavr$useSliderState} from "@react-stately/slider";
|
|
3
|
-
import {useControlledState as $1Eavr$useControlledState} from "@react-stately/utils";
|
|
4
|
-
import {useMemo as $1Eavr$useMemo, useState as $1Eavr$useState} from "react";
|
|
5
|
-
|
|
6
|
-
/*
|
|
7
|
-
* Copyright 2020 Adobe. All rights reserved.
|
|
8
|
-
* This file is licensed to you under the Apache License, Version 2.0 (the "License");
|
|
9
|
-
* you may not use this file except in compliance with the License. You may obtain a copy
|
|
10
|
-
* of the License at http://www.apache.org/licenses/LICENSE-2.0
|
|
11
|
-
*
|
|
12
|
-
* Unless required by applicable law or agreed to in writing, software distributed under
|
|
13
|
-
* the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
|
|
14
|
-
* OF ANY KIND, either express or implied. See the License for the specific language
|
|
15
|
-
* governing permissions and limitations under the License.
|
|
16
|
-
*/
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
function $25a25ac0d1624665$export$57bc203e1c9c6d44(props) {
|
|
21
|
-
let { channel: channel, colorSpace: colorSpace, value: value, defaultValue: defaultValue, onChange: onChange, locale: locale, ...otherProps } = props;
|
|
22
|
-
if (value == null && defaultValue == null) throw new Error('useColorSliderState requires a value or defaultValue');
|
|
23
|
-
if (value) value = (0, $799cddbef784668f$export$4cde5df63f53f473)(value);
|
|
24
|
-
if (defaultValue) defaultValue = (0, $799cddbef784668f$export$4cde5df63f53f473)(defaultValue);
|
|
25
|
-
// safe to cast value and defaultValue to Color, one of them will always be defined because if neither are, we throw an error
|
|
26
|
-
let [colorValue, setColor] = (0, $1Eavr$useControlledState)(value, defaultValue, onChange);
|
|
27
|
-
let color = (0, $1Eavr$useMemo)(()=>colorSpace && colorValue ? colorValue.toFormat(colorSpace) : colorValue, [
|
|
28
|
-
colorValue,
|
|
29
|
-
colorSpace
|
|
30
|
-
]);
|
|
31
|
-
let [initialValue] = (0, $1Eavr$useState)(colorValue);
|
|
32
|
-
let defaultColorValue = defaultValue !== null && defaultValue !== void 0 ? defaultValue : initialValue;
|
|
33
|
-
let defaultColor = (0, $1Eavr$useMemo)(()=>colorSpace && defaultColorValue ? defaultColorValue.toFormat(colorSpace) : defaultColorValue, [
|
|
34
|
-
defaultColorValue,
|
|
35
|
-
colorSpace
|
|
36
|
-
]);
|
|
37
|
-
let sliderState = (0, $1Eavr$useSliderState)({
|
|
38
|
-
...color.getChannelRange(channel),
|
|
39
|
-
...otherProps,
|
|
40
|
-
// Unused except in getThumbValueLabel, which is overridden below. null to localize the TypeScript error for ignoring.
|
|
41
|
-
// @ts-ignore
|
|
42
|
-
numberFormatter: null,
|
|
43
|
-
value: color.getChannelValue(channel),
|
|
44
|
-
defaultValue: defaultColor.getChannelValue(channel),
|
|
45
|
-
onChange (v) {
|
|
46
|
-
setColor(color.withChannelValue(channel, v));
|
|
47
|
-
},
|
|
48
|
-
onChangeEnd (v) {
|
|
49
|
-
// onChange will have already been called with the right value, this is just to trigger onChangeEnd
|
|
50
|
-
if (props.onChangeEnd) props.onChangeEnd(color.withChannelValue(channel, v));
|
|
51
|
-
}
|
|
52
|
-
});
|
|
53
|
-
let { step: step, pageSize: pageSize } = color.getChannelRange(channel);
|
|
54
|
-
return {
|
|
55
|
-
...sliderState,
|
|
56
|
-
value: color,
|
|
57
|
-
setValue (value) {
|
|
58
|
-
setColor((0, $799cddbef784668f$export$4cde5df63f53f473)(value));
|
|
59
|
-
},
|
|
60
|
-
getDisplayColor () {
|
|
61
|
-
switch(channel){
|
|
62
|
-
case 'hue':
|
|
63
|
-
return (0, $799cddbef784668f$export$6e865ea70d7724f)(`hsl(${color.getChannelValue('hue')}, 100%, 50%)`);
|
|
64
|
-
case 'lightness':
|
|
65
|
-
case 'brightness':
|
|
66
|
-
case 'saturation':
|
|
67
|
-
case 'red':
|
|
68
|
-
case 'green':
|
|
69
|
-
case 'blue':
|
|
70
|
-
return color.withChannelValue('alpha', 1);
|
|
71
|
-
case 'alpha':
|
|
72
|
-
return color;
|
|
73
|
-
default:
|
|
74
|
-
throw new Error('Unknown color channel: ' + channel);
|
|
75
|
-
}
|
|
76
|
-
},
|
|
77
|
-
getThumbValueLabel () {
|
|
78
|
-
return color.formatChannelValue(channel, locale);
|
|
79
|
-
},
|
|
80
|
-
step: step,
|
|
81
|
-
pageSize: pageSize,
|
|
82
|
-
isDragging: sliderState.isThumbDragging(0)
|
|
83
|
-
};
|
|
84
|
-
}
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
export {$25a25ac0d1624665$export$57bc203e1c9c6d44 as useColorSliderState};
|
|
88
|
-
//# sourceMappingURL=useColorSliderState.module.js.map
|
|
@@ -1,88 +0,0 @@
|
|
|
1
|
-
import {normalizeColor as $799cddbef784668f$export$4cde5df63f53f473, parseColor as $799cddbef784668f$export$6e865ea70d7724f} from "./Color.module.js";
|
|
2
|
-
import {useSliderState as $1Eavr$useSliderState} from "@react-stately/slider";
|
|
3
|
-
import {useControlledState as $1Eavr$useControlledState} from "@react-stately/utils";
|
|
4
|
-
import {useMemo as $1Eavr$useMemo, useState as $1Eavr$useState} from "react";
|
|
5
|
-
|
|
6
|
-
/*
|
|
7
|
-
* Copyright 2020 Adobe. All rights reserved.
|
|
8
|
-
* This file is licensed to you under the Apache License, Version 2.0 (the "License");
|
|
9
|
-
* you may not use this file except in compliance with the License. You may obtain a copy
|
|
10
|
-
* of the License at http://www.apache.org/licenses/LICENSE-2.0
|
|
11
|
-
*
|
|
12
|
-
* Unless required by applicable law or agreed to in writing, software distributed under
|
|
13
|
-
* the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
|
|
14
|
-
* OF ANY KIND, either express or implied. See the License for the specific language
|
|
15
|
-
* governing permissions and limitations under the License.
|
|
16
|
-
*/
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
function $25a25ac0d1624665$export$57bc203e1c9c6d44(props) {
|
|
21
|
-
let { channel: channel, colorSpace: colorSpace, value: value, defaultValue: defaultValue, onChange: onChange, locale: locale, ...otherProps } = props;
|
|
22
|
-
if (value == null && defaultValue == null) throw new Error('useColorSliderState requires a value or defaultValue');
|
|
23
|
-
if (value) value = (0, $799cddbef784668f$export$4cde5df63f53f473)(value);
|
|
24
|
-
if (defaultValue) defaultValue = (0, $799cddbef784668f$export$4cde5df63f53f473)(defaultValue);
|
|
25
|
-
// safe to cast value and defaultValue to Color, one of them will always be defined because if neither are, we throw an error
|
|
26
|
-
let [colorValue, setColor] = (0, $1Eavr$useControlledState)(value, defaultValue, onChange);
|
|
27
|
-
let color = (0, $1Eavr$useMemo)(()=>colorSpace && colorValue ? colorValue.toFormat(colorSpace) : colorValue, [
|
|
28
|
-
colorValue,
|
|
29
|
-
colorSpace
|
|
30
|
-
]);
|
|
31
|
-
let [initialValue] = (0, $1Eavr$useState)(colorValue);
|
|
32
|
-
let defaultColorValue = defaultValue !== null && defaultValue !== void 0 ? defaultValue : initialValue;
|
|
33
|
-
let defaultColor = (0, $1Eavr$useMemo)(()=>colorSpace && defaultColorValue ? defaultColorValue.toFormat(colorSpace) : defaultColorValue, [
|
|
34
|
-
defaultColorValue,
|
|
35
|
-
colorSpace
|
|
36
|
-
]);
|
|
37
|
-
let sliderState = (0, $1Eavr$useSliderState)({
|
|
38
|
-
...color.getChannelRange(channel),
|
|
39
|
-
...otherProps,
|
|
40
|
-
// Unused except in getThumbValueLabel, which is overridden below. null to localize the TypeScript error for ignoring.
|
|
41
|
-
// @ts-ignore
|
|
42
|
-
numberFormatter: null,
|
|
43
|
-
value: color.getChannelValue(channel),
|
|
44
|
-
defaultValue: defaultColor.getChannelValue(channel),
|
|
45
|
-
onChange (v) {
|
|
46
|
-
setColor(color.withChannelValue(channel, v));
|
|
47
|
-
},
|
|
48
|
-
onChangeEnd (v) {
|
|
49
|
-
// onChange will have already been called with the right value, this is just to trigger onChangeEnd
|
|
50
|
-
if (props.onChangeEnd) props.onChangeEnd(color.withChannelValue(channel, v));
|
|
51
|
-
}
|
|
52
|
-
});
|
|
53
|
-
let { step: step, pageSize: pageSize } = color.getChannelRange(channel);
|
|
54
|
-
return {
|
|
55
|
-
...sliderState,
|
|
56
|
-
value: color,
|
|
57
|
-
setValue (value) {
|
|
58
|
-
setColor((0, $799cddbef784668f$export$4cde5df63f53f473)(value));
|
|
59
|
-
},
|
|
60
|
-
getDisplayColor () {
|
|
61
|
-
switch(channel){
|
|
62
|
-
case 'hue':
|
|
63
|
-
return (0, $799cddbef784668f$export$6e865ea70d7724f)(`hsl(${color.getChannelValue('hue')}, 100%, 50%)`);
|
|
64
|
-
case 'lightness':
|
|
65
|
-
case 'brightness':
|
|
66
|
-
case 'saturation':
|
|
67
|
-
case 'red':
|
|
68
|
-
case 'green':
|
|
69
|
-
case 'blue':
|
|
70
|
-
return color.withChannelValue('alpha', 1);
|
|
71
|
-
case 'alpha':
|
|
72
|
-
return color;
|
|
73
|
-
default:
|
|
74
|
-
throw new Error('Unknown color channel: ' + channel);
|
|
75
|
-
}
|
|
76
|
-
},
|
|
77
|
-
getThumbValueLabel () {
|
|
78
|
-
return color.formatChannelValue(channel, locale);
|
|
79
|
-
},
|
|
80
|
-
step: step,
|
|
81
|
-
pageSize: pageSize,
|
|
82
|
-
isDragging: sliderState.isThumbDragging(0)
|
|
83
|
-
};
|
|
84
|
-
}
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
export {$25a25ac0d1624665$export$57bc203e1c9c6d44 as useColorSliderState};
|
|
88
|
-
//# sourceMappingURL=useColorSliderState.module.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"mappings":";;;;;AAAA;;;;;;;;;;CAUC;;;;AA6BM,SAAS,0CAAoB,KAA8B;IAChE,IAAI,WAAC,OAAO,cAAE,UAAU,SAAE,KAAK,gBAAE,YAAY,YAAE,QAAQ,UAAE,MAAM,EAAE,GAAG,YAAW,GAAG;IAClF,IAAI,SAAS,QAAQ,gBAAgB,MACnC,MAAM,IAAI,MAAM;IAGlB,IAAI,OACF,QAAQ,CAAA,GAAA,yCAAa,EAAE;IAEzB,IAAI,cACF,eAAe,CAAA,GAAA,yCAAa,EAAE;IAEhC,6HAA6H;IAC7H,IAAI,CAAC,YAAY,SAAS,GAAG,CAAA,GAAA,yBAAiB,EAAS,OAAgB,cAAuB;IAC9F,IAAI,QAAQ,CAAA,GAAA,cAAM,EAAE,IAAM,cAAc,aAAa,WAAW,QAAQ,CAAC,cAAc,YAAY;QAAC;QAAY;KAAW;IAC3H,IAAI,CAAC,aAAa,GAAG,CAAA,GAAA,eAAO,EAAE;IAC9B,IAAI,oBAAoB,AAAC,yBAAA,0BAAA,eAA0B;IACnD,IAAI,eAAe,CAAA,GAAA,cAAM,EAAE,IAAM,cAAc,oBAAoB,kBAAkB,QAAQ,CAAC,cAAc,mBAAmB;QAAC;QAAmB;KAAW;IAC9J,IAAI,cAAc,CAAA,GAAA,qBAAa,EAAE;QAC/B,GAAG,MAAM,eAAe,CAAC,QAAQ;QACjC,GAAG,UAAU;QACb,sHAAsH;QACtH,aAAa;QACb,iBAAiB;QACjB,OAAO,MAAM,eAAe,CAAC;QAC7B,cAAc,aAAa,eAAe,CAAC;QAC3C,UAAS,CAAC;YACR,SAAS,MAAM,gBAAgB,CAAC,SAAS;QAC3C;QACA,aAAY,CAAC;YACX,mGAAmG;YACnG,IAAI,MAAM,WAAW,EACnB,MAAM,WAAW,CAAC,MAAM,gBAAgB,CAAC,SAAS;QAEtD;IACF;IAEA,IAAI,QAAC,IAAI,YAAE,QAAQ,EAAC,GAAG,MAAM,eAAe,CAAC;IAC7C,OAAO;QACL,GAAG,WAAW;QACd,OAAO;QACP,UAAS,KAAK;YACZ,SAAS,CAAA,GAAA,yCAAa,EAAE;QAC1B;QACA;YACE,OAAQ;gBACN,KAAK;oBACH,OAAO,CAAA,GAAA,wCAAS,EAAE,CAAC,IAAI,EAAE,MAAM,eAAe,CAAC,OAAO,YAAY,CAAC;gBACrE,KAAK;gBACL,KAAK;gBACL,KAAK;gBACL,KAAK;gBACL,KAAK;gBACL,KAAK;oBACH,OAAO,MAAM,gBAAgB,CAAC,SAAS;gBACzC,KAAK;oBACH,OAAO;gBAET;oBACE,MAAM,IAAI,MAAM,4BAA4B;YAChD;QACF;QACA;YACE,OAAO,MAAM,kBAAkB,CAAC,SAAS;QAC3C;cACA;kBACA;QACA,YAAY,YAAY,eAAe,CAAC;IAC1C;AACF","sources":["packages/@react-stately/color/src/useColorSliderState.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, ColorSliderProps} from '@react-types/color';\nimport {normalizeColor, parseColor} from './Color';\nimport {SliderState, useSliderState} from '@react-stately/slider';\nimport {useControlledState} from '@react-stately/utils';\nimport {useMemo, useState} from 'react';\n\nexport interface ColorSliderState extends SliderState {\n /** The current color value represented by the color slider. */\n readonly value: 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 /** Returns the color that should be displayed in the slider instead of `value` or the optional parameter. */\n getDisplayColor(): Color,\n /** Whether the color slider is currently being dragged. */\n readonly isDragging: boolean\n}\n\n\nexport interface ColorSliderStateOptions extends ColorSliderProps {\n /** The locale to use for formatting the color channel value. */\n locale: string\n}\n\n/**\n * Provides state management for a color slider component.\n * Color sliders allow users to adjust an individual channel of a color value.\n */\nexport function useColorSliderState(props: ColorSliderStateOptions): ColorSliderState {\n let {channel, colorSpace, value, defaultValue, onChange, locale, ...otherProps} = props;\n if (value == null && defaultValue == null) {\n throw new Error('useColorSliderState requires a value or defaultValue');\n }\n\n if (value) {\n value = normalizeColor(value);\n }\n if (defaultValue) {\n defaultValue = normalizeColor(defaultValue);\n }\n // safe to cast value and defaultValue to Color, one of them will always be defined because if neither are, we throw an error\n let [colorValue, setColor] = useControlledState<Color>(value as Color, defaultValue as Color, onChange);\n let color = useMemo(() => colorSpace && colorValue ? colorValue.toFormat(colorSpace) : colorValue, [colorValue, colorSpace]);\n let [initialValue] = useState(colorValue);\n let defaultColorValue = (defaultValue as Color) ?? initialValue;\n let defaultColor = useMemo(() => colorSpace && defaultColorValue ? defaultColorValue.toFormat(colorSpace) : defaultColorValue, [defaultColorValue, colorSpace]);\n let sliderState = useSliderState({\n ...color.getChannelRange(channel),\n ...otherProps,\n // Unused except in getThumbValueLabel, which is overridden below. null to localize the TypeScript error for ignoring.\n // @ts-ignore\n numberFormatter: null,\n value: color.getChannelValue(channel),\n defaultValue: defaultColor.getChannelValue(channel),\n onChange(v) {\n setColor(color.withChannelValue(channel, v));\n },\n onChangeEnd(v) {\n // onChange will have already been called with the right value, this is just to trigger onChangeEnd\n if (props.onChangeEnd) {\n props.onChangeEnd(color.withChannelValue(channel, v));\n }\n }\n });\n\n let {step, pageSize} = color.getChannelRange(channel);\n return {\n ...sliderState,\n value: color,\n setValue(value) {\n setColor(normalizeColor(value));\n },\n getDisplayColor() {\n switch (channel) {\n case 'hue':\n return parseColor(`hsl(${color.getChannelValue('hue')}, 100%, 50%)`);\n case 'lightness':\n case 'brightness':\n case 'saturation':\n case 'red':\n case 'green':\n case 'blue':\n return color.withChannelValue('alpha', 1);\n case 'alpha': {\n return color;\n }\n default:\n throw new Error('Unknown color channel: ' + channel);\n }\n },\n getThumbValueLabel() {\n return color.formatChannelValue(channel, locale);\n },\n step,\n pageSize,\n isDragging: sliderState.isThumbDragging(0)\n };\n}\n"],"names":[],"version":3,"file":"useColorSliderState.module.js.map"}
|
|
@@ -1,135 +0,0 @@
|
|
|
1
|
-
var $83fe1a57d631223b$exports = require("./Color.main.js");
|
|
2
|
-
var $5Frb2$reactstatelyutils = require("@react-stately/utils");
|
|
3
|
-
var $5Frb2$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, "useColorWheelState", () => $9d7d8736d45f74b8$export$f4301076d9336137);
|
|
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 $9d7d8736d45f74b8$var$DEFAULT_COLOR = (0, $83fe1a57d631223b$exports.parseColor)('hsl(0, 100%, 50%)');
|
|
25
|
-
function $9d7d8736d45f74b8$var$roundToStep(value, step) {
|
|
26
|
-
return Math.round(value / step) * step;
|
|
27
|
-
}
|
|
28
|
-
function $9d7d8736d45f74b8$var$mod(n, m) {
|
|
29
|
-
return (n % m + m) % m;
|
|
30
|
-
}
|
|
31
|
-
function $9d7d8736d45f74b8$var$roundDown(v) {
|
|
32
|
-
let r = Math.floor(v);
|
|
33
|
-
if (r === v) return v - 1;
|
|
34
|
-
else return r;
|
|
35
|
-
}
|
|
36
|
-
function $9d7d8736d45f74b8$var$degToRad(deg) {
|
|
37
|
-
return deg * Math.PI / 180;
|
|
38
|
-
}
|
|
39
|
-
function $9d7d8736d45f74b8$var$radToDeg(rad) {
|
|
40
|
-
return rad * 180 / Math.PI;
|
|
41
|
-
}
|
|
42
|
-
// 0deg = 3 o'clock. increases clockwise
|
|
43
|
-
function $9d7d8736d45f74b8$var$angleToCartesian(angle, radius) {
|
|
44
|
-
let rad = $9d7d8736d45f74b8$var$degToRad(360 - angle + 90);
|
|
45
|
-
let x = Math.sin(rad) * radius;
|
|
46
|
-
let y = Math.cos(rad) * radius;
|
|
47
|
-
return {
|
|
48
|
-
x: x,
|
|
49
|
-
y: y
|
|
50
|
-
};
|
|
51
|
-
}
|
|
52
|
-
function $9d7d8736d45f74b8$var$cartesianToAngle(x, y, radius) {
|
|
53
|
-
let deg = $9d7d8736d45f74b8$var$radToDeg(Math.atan2(y / radius, x / radius));
|
|
54
|
-
return (deg + 360) % 360;
|
|
55
|
-
}
|
|
56
|
-
function $9d7d8736d45f74b8$export$f4301076d9336137(props) {
|
|
57
|
-
let { value: propsValue, defaultValue: defaultValue, onChange: onChange, onChangeEnd: onChangeEnd } = props;
|
|
58
|
-
if (!propsValue && !defaultValue) defaultValue = $9d7d8736d45f74b8$var$DEFAULT_COLOR;
|
|
59
|
-
if (propsValue) propsValue = (0, $83fe1a57d631223b$exports.normalizeColor)(propsValue);
|
|
60
|
-
if (defaultValue) defaultValue = (0, $83fe1a57d631223b$exports.normalizeColor)(defaultValue);
|
|
61
|
-
// safe to cast value and defaultValue to Color, one of them will always be defined because if neither are, we assign a default
|
|
62
|
-
let [stateValue, setValueState] = (0, $5Frb2$reactstatelyutils.useControlledState)(propsValue, defaultValue, onChange);
|
|
63
|
-
let [initialValue] = (0, $5Frb2$react.useState)(stateValue);
|
|
64
|
-
let value = (0, $5Frb2$react.useMemo)(()=>{
|
|
65
|
-
let colorSpace = stateValue.getColorSpace();
|
|
66
|
-
return colorSpace === 'hsl' || colorSpace === 'hsb' ? stateValue : stateValue.toFormat('hsl');
|
|
67
|
-
}, [
|
|
68
|
-
stateValue
|
|
69
|
-
]);
|
|
70
|
-
let valueRef = (0, $5Frb2$react.useRef)(value);
|
|
71
|
-
let setValue = (value)=>{
|
|
72
|
-
valueRef.current = value;
|
|
73
|
-
setValueState(value);
|
|
74
|
-
};
|
|
75
|
-
let channelRange = value.getChannelRange('hue');
|
|
76
|
-
let { minValue: minValueX, maxValue: maxValueX, step: step, pageSize: pageStep } = channelRange;
|
|
77
|
-
let [isDragging, setDragging] = (0, $5Frb2$react.useState)(false);
|
|
78
|
-
let isDraggingRef = (0, $5Frb2$react.useRef)(false);
|
|
79
|
-
let hue = value.getChannelValue('hue');
|
|
80
|
-
function setHue(v) {
|
|
81
|
-
if (v > 360) // Make sure you can always get back to 0.
|
|
82
|
-
v = 0;
|
|
83
|
-
v = $9d7d8736d45f74b8$var$roundToStep($9d7d8736d45f74b8$var$mod(v, 360), step);
|
|
84
|
-
if (hue !== v) {
|
|
85
|
-
let color = value.withChannelValue('hue', v);
|
|
86
|
-
setValue(color);
|
|
87
|
-
}
|
|
88
|
-
}
|
|
89
|
-
return {
|
|
90
|
-
value: value,
|
|
91
|
-
defaultValue: propsValue !== undefined ? initialValue : defaultValue,
|
|
92
|
-
step: step,
|
|
93
|
-
pageStep: pageStep,
|
|
94
|
-
setValue (v) {
|
|
95
|
-
let color = (0, $83fe1a57d631223b$exports.normalizeColor)(v);
|
|
96
|
-
setValue(color);
|
|
97
|
-
},
|
|
98
|
-
hue: hue,
|
|
99
|
-
setHue: setHue,
|
|
100
|
-
setHueFromPoint (x, y, radius) {
|
|
101
|
-
setHue($9d7d8736d45f74b8$var$cartesianToAngle(x, y, radius));
|
|
102
|
-
},
|
|
103
|
-
getThumbPosition (radius) {
|
|
104
|
-
return $9d7d8736d45f74b8$var$angleToCartesian(value.getChannelValue('hue'), radius);
|
|
105
|
-
},
|
|
106
|
-
increment (stepSize = 1) {
|
|
107
|
-
let s = Math.max(stepSize, step);
|
|
108
|
-
let newValue = hue + s;
|
|
109
|
-
if (newValue >= maxValueX) // Make sure you can always get back to 0.
|
|
110
|
-
newValue = minValueX;
|
|
111
|
-
setHue($9d7d8736d45f74b8$var$roundToStep($9d7d8736d45f74b8$var$mod(newValue, 360), s));
|
|
112
|
-
},
|
|
113
|
-
decrement (stepSize = 1) {
|
|
114
|
-
let s = Math.max(stepSize, step);
|
|
115
|
-
if (hue === 0) // We can't just subtract step because this might be the case:
|
|
116
|
-
// |(previous step) - 0| < step size
|
|
117
|
-
setHue($9d7d8736d45f74b8$var$roundDown(360 / s) * s);
|
|
118
|
-
else setHue($9d7d8736d45f74b8$var$roundToStep($9d7d8736d45f74b8$var$mod(hue - s, 360), s));
|
|
119
|
-
},
|
|
120
|
-
setDragging (isDragging) {
|
|
121
|
-
let wasDragging = isDraggingRef.current;
|
|
122
|
-
isDraggingRef.current = isDragging;
|
|
123
|
-
if (onChangeEnd && !isDragging && wasDragging) onChangeEnd(valueRef.current);
|
|
124
|
-
setDragging(isDragging);
|
|
125
|
-
},
|
|
126
|
-
isDragging: isDragging,
|
|
127
|
-
getDisplayColor () {
|
|
128
|
-
return value.toFormat('hsl').withChannelValue('saturation', 100).withChannelValue('lightness', 50).withChannelValue('alpha', 1);
|
|
129
|
-
},
|
|
130
|
-
isDisabled: props.isDisabled || false
|
|
131
|
-
};
|
|
132
|
-
}
|
|
133
|
-
|
|
134
|
-
|
|
135
|
-
//# sourceMappingURL=useColorWheelState.main.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"mappings":"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","sources":["packages/@react-stately/color/src/useColorWheelState.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, ColorWheelProps} from '@react-types/color';\nimport {normalizeColor, parseColor} from './Color';\nimport {useControlledState} from '@react-stately/utils';\nimport {useMemo, useRef, useState} from 'react';\n\nexport interface ColorWheelState {\n /** The current color value represented by the color wheel. */\n readonly value: Color,\n /** The default color value. */\n readonly defaultValue: Color,\n /** Sets the color value represented by the color wheel, and triggers `onChange`. */\n setValue(value: string | Color): void,\n\n /** The current value of the hue channel displayed by the color wheel. */\n readonly hue: number,\n /** Sets the hue channel of the current color value and triggers `onChange`. */\n setHue(value: number): void,\n\n /** Sets the hue channel of the current color value based on the given coordinates and radius of the color wheel, and triggers `onChange`. */\n setHueFromPoint(x: number, y: number, radius: number): void,\n /** Returns the coordinates of the thumb relative to the center point of the color wheel. */\n getThumbPosition(radius: number): {x: number, y: number},\n\n /** Increments the hue by the given amount (defaults to 1). */\n increment(stepSize?: number): void,\n /** Decrements the hue by the given amount (defaults to 1). */\n decrement(stepSize?: number): void,\n\n /** Whether the color wheel is currently being dragged. */\n readonly isDragging: boolean,\n /** Sets whether the color wheel is being dragged. */\n setDragging(value: boolean): void,\n /** Returns the color that should be displayed in the color wheel instead of `value`. */\n getDisplayColor(): Color,\n /** The step value of the hue channel, used when incrementing and decrementing. */\n step: number,\n /** The page step value of the hue channel, used when incrementing and decrementing. */\n pageStep: number,\n\n /** Whether the color wheel is disabled. */\n readonly isDisabled: boolean\n}\n\nconst DEFAULT_COLOR = parseColor('hsl(0, 100%, 50%)');\n\nfunction roundToStep(value: number, step: number): number {\n return Math.round(value / step) * step;\n}\n\nfunction mod(n: number, m: number) {\n return ((n % m) + m) % m;\n}\n\nfunction roundDown(v: number) {\n let r = Math.floor(v);\n if (r === v) {\n return v - 1;\n } else {\n return r;\n }\n}\n\nfunction degToRad(deg: number) {\n return deg * Math.PI / 180;\n}\n\nfunction radToDeg(rad: number) {\n return rad * 180 / Math.PI;\n}\n\n// 0deg = 3 o'clock. increases clockwise\nfunction angleToCartesian(angle: number, radius: number): {x: number, y: number} {\n let rad = degToRad(360 - angle + 90);\n let x = Math.sin(rad) * (radius);\n let y = Math.cos(rad) * (radius);\n return {x, y};\n}\n\nfunction cartesianToAngle(x: number, y: number, radius: number): number {\n let deg = radToDeg(Math.atan2(y / radius, x / radius));\n return (deg + 360) % 360;\n}\n\n/**\n * Provides state management for a color wheel component.\n * Color wheels allow users to adjust the hue of an HSL or HSB color value on a circular track.\n */\nexport function useColorWheelState(props: ColorWheelProps): ColorWheelState {\n let {value: propsValue, defaultValue, onChange, onChangeEnd} = props;\n\n if (!propsValue && !defaultValue) {\n defaultValue = DEFAULT_COLOR;\n }\n if (propsValue) {\n propsValue = normalizeColor(propsValue);\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 [stateValue, setValueState] = useControlledState<Color>(propsValue as Color, defaultValue as Color, onChange);\n let [initialValue] = useState(stateValue);\n let value = useMemo(() => {\n let colorSpace = stateValue.getColorSpace();\n return colorSpace === 'hsl' || colorSpace === 'hsb' ? stateValue : stateValue.toFormat('hsl');\n }, [stateValue]);\n let valueRef = useRef(value);\n let setValue = (value: Color) => {\n valueRef.current = value;\n setValueState(value);\n };\n\n let channelRange = value.getChannelRange('hue');\n let {minValue: minValueX, maxValue: maxValueX, step: step, pageSize: pageStep} = channelRange;\n let [isDragging, setDragging] = useState(false);\n let isDraggingRef = useRef(false);\n\n let hue = value.getChannelValue('hue');\n function setHue(v: number) {\n if (v > 360) {\n // Make sure you can always get back to 0.\n v = 0;\n }\n v = roundToStep(mod(v, 360), step);\n if (hue !== v) {\n let color = value.withChannelValue('hue', v);\n setValue(color);\n }\n }\n\n return {\n value,\n defaultValue: propsValue !== undefined ? initialValue : defaultValue as Color,\n step,\n pageStep,\n setValue(v) {\n let color = normalizeColor(v);\n setValue(color);\n },\n hue,\n setHue,\n setHueFromPoint(x, y, radius) {\n setHue(cartesianToAngle(x, y, radius));\n },\n getThumbPosition(radius) {\n return angleToCartesian(value.getChannelValue('hue'), radius);\n },\n increment(stepSize = 1) {\n let s = Math.max(stepSize, step);\n let newValue = hue + s;\n if (newValue >= maxValueX) {\n // Make sure you can always get back to 0.\n newValue = minValueX;\n }\n setHue(roundToStep(mod(newValue, 360), s));\n },\n decrement(stepSize = 1) {\n let s = Math.max(stepSize, step);\n if (hue === 0) {\n // We can't just subtract step because this might be the case:\n // |(previous step) - 0| < step size\n setHue(roundDown(360 / s) * s);\n } else {\n setHue(roundToStep(mod(hue - s, 360), s));\n }\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 value.toFormat('hsl').withChannelValue('saturation', 100).withChannelValue('lightness', 50).withChannelValue('alpha', 1);\n },\n isDisabled: props.isDisabled || false\n };\n}\n"],"names":[],"version":3,"file":"useColorWheelState.main.js.map"}
|
|
@@ -1,130 +0,0 @@
|
|
|
1
|
-
import {normalizeColor as $799cddbef784668f$export$4cde5df63f53f473, parseColor as $799cddbef784668f$export$6e865ea70d7724f} from "./Color.mjs";
|
|
2
|
-
import {useControlledState as $d4Pfi$useControlledState} from "@react-stately/utils";
|
|
3
|
-
import {useState as $d4Pfi$useState, useMemo as $d4Pfi$useMemo, useRef as $d4Pfi$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 $ee4262c74a467b07$var$DEFAULT_COLOR = (0, $799cddbef784668f$export$6e865ea70d7724f)('hsl(0, 100%, 50%)');
|
|
19
|
-
function $ee4262c74a467b07$var$roundToStep(value, step) {
|
|
20
|
-
return Math.round(value / step) * step;
|
|
21
|
-
}
|
|
22
|
-
function $ee4262c74a467b07$var$mod(n, m) {
|
|
23
|
-
return (n % m + m) % m;
|
|
24
|
-
}
|
|
25
|
-
function $ee4262c74a467b07$var$roundDown(v) {
|
|
26
|
-
let r = Math.floor(v);
|
|
27
|
-
if (r === v) return v - 1;
|
|
28
|
-
else return r;
|
|
29
|
-
}
|
|
30
|
-
function $ee4262c74a467b07$var$degToRad(deg) {
|
|
31
|
-
return deg * Math.PI / 180;
|
|
32
|
-
}
|
|
33
|
-
function $ee4262c74a467b07$var$radToDeg(rad) {
|
|
34
|
-
return rad * 180 / Math.PI;
|
|
35
|
-
}
|
|
36
|
-
// 0deg = 3 o'clock. increases clockwise
|
|
37
|
-
function $ee4262c74a467b07$var$angleToCartesian(angle, radius) {
|
|
38
|
-
let rad = $ee4262c74a467b07$var$degToRad(360 - angle + 90);
|
|
39
|
-
let x = Math.sin(rad) * radius;
|
|
40
|
-
let y = Math.cos(rad) * radius;
|
|
41
|
-
return {
|
|
42
|
-
x: x,
|
|
43
|
-
y: y
|
|
44
|
-
};
|
|
45
|
-
}
|
|
46
|
-
function $ee4262c74a467b07$var$cartesianToAngle(x, y, radius) {
|
|
47
|
-
let deg = $ee4262c74a467b07$var$radToDeg(Math.atan2(y / radius, x / radius));
|
|
48
|
-
return (deg + 360) % 360;
|
|
49
|
-
}
|
|
50
|
-
function $ee4262c74a467b07$export$f4301076d9336137(props) {
|
|
51
|
-
let { value: propsValue, defaultValue: defaultValue, onChange: onChange, onChangeEnd: onChangeEnd } = props;
|
|
52
|
-
if (!propsValue && !defaultValue) defaultValue = $ee4262c74a467b07$var$DEFAULT_COLOR;
|
|
53
|
-
if (propsValue) propsValue = (0, $799cddbef784668f$export$4cde5df63f53f473)(propsValue);
|
|
54
|
-
if (defaultValue) defaultValue = (0, $799cddbef784668f$export$4cde5df63f53f473)(defaultValue);
|
|
55
|
-
// safe to cast value and defaultValue to Color, one of them will always be defined because if neither are, we assign a default
|
|
56
|
-
let [stateValue, setValueState] = (0, $d4Pfi$useControlledState)(propsValue, defaultValue, onChange);
|
|
57
|
-
let [initialValue] = (0, $d4Pfi$useState)(stateValue);
|
|
58
|
-
let value = (0, $d4Pfi$useMemo)(()=>{
|
|
59
|
-
let colorSpace = stateValue.getColorSpace();
|
|
60
|
-
return colorSpace === 'hsl' || colorSpace === 'hsb' ? stateValue : stateValue.toFormat('hsl');
|
|
61
|
-
}, [
|
|
62
|
-
stateValue
|
|
63
|
-
]);
|
|
64
|
-
let valueRef = (0, $d4Pfi$useRef)(value);
|
|
65
|
-
let setValue = (value)=>{
|
|
66
|
-
valueRef.current = value;
|
|
67
|
-
setValueState(value);
|
|
68
|
-
};
|
|
69
|
-
let channelRange = value.getChannelRange('hue');
|
|
70
|
-
let { minValue: minValueX, maxValue: maxValueX, step: step, pageSize: pageStep } = channelRange;
|
|
71
|
-
let [isDragging, setDragging] = (0, $d4Pfi$useState)(false);
|
|
72
|
-
let isDraggingRef = (0, $d4Pfi$useRef)(false);
|
|
73
|
-
let hue = value.getChannelValue('hue');
|
|
74
|
-
function setHue(v) {
|
|
75
|
-
if (v > 360) // Make sure you can always get back to 0.
|
|
76
|
-
v = 0;
|
|
77
|
-
v = $ee4262c74a467b07$var$roundToStep($ee4262c74a467b07$var$mod(v, 360), step);
|
|
78
|
-
if (hue !== v) {
|
|
79
|
-
let color = value.withChannelValue('hue', v);
|
|
80
|
-
setValue(color);
|
|
81
|
-
}
|
|
82
|
-
}
|
|
83
|
-
return {
|
|
84
|
-
value: value,
|
|
85
|
-
defaultValue: propsValue !== undefined ? initialValue : defaultValue,
|
|
86
|
-
step: step,
|
|
87
|
-
pageStep: pageStep,
|
|
88
|
-
setValue (v) {
|
|
89
|
-
let color = (0, $799cddbef784668f$export$4cde5df63f53f473)(v);
|
|
90
|
-
setValue(color);
|
|
91
|
-
},
|
|
92
|
-
hue: hue,
|
|
93
|
-
setHue: setHue,
|
|
94
|
-
setHueFromPoint (x, y, radius) {
|
|
95
|
-
setHue($ee4262c74a467b07$var$cartesianToAngle(x, y, radius));
|
|
96
|
-
},
|
|
97
|
-
getThumbPosition (radius) {
|
|
98
|
-
return $ee4262c74a467b07$var$angleToCartesian(value.getChannelValue('hue'), radius);
|
|
99
|
-
},
|
|
100
|
-
increment (stepSize = 1) {
|
|
101
|
-
let s = Math.max(stepSize, step);
|
|
102
|
-
let newValue = hue + s;
|
|
103
|
-
if (newValue >= maxValueX) // Make sure you can always get back to 0.
|
|
104
|
-
newValue = minValueX;
|
|
105
|
-
setHue($ee4262c74a467b07$var$roundToStep($ee4262c74a467b07$var$mod(newValue, 360), s));
|
|
106
|
-
},
|
|
107
|
-
decrement (stepSize = 1) {
|
|
108
|
-
let s = Math.max(stepSize, step);
|
|
109
|
-
if (hue === 0) // We can't just subtract step because this might be the case:
|
|
110
|
-
// |(previous step) - 0| < step size
|
|
111
|
-
setHue($ee4262c74a467b07$var$roundDown(360 / s) * s);
|
|
112
|
-
else setHue($ee4262c74a467b07$var$roundToStep($ee4262c74a467b07$var$mod(hue - s, 360), s));
|
|
113
|
-
},
|
|
114
|
-
setDragging (isDragging) {
|
|
115
|
-
let wasDragging = isDraggingRef.current;
|
|
116
|
-
isDraggingRef.current = isDragging;
|
|
117
|
-
if (onChangeEnd && !isDragging && wasDragging) onChangeEnd(valueRef.current);
|
|
118
|
-
setDragging(isDragging);
|
|
119
|
-
},
|
|
120
|
-
isDragging: isDragging,
|
|
121
|
-
getDisplayColor () {
|
|
122
|
-
return value.toFormat('hsl').withChannelValue('saturation', 100).withChannelValue('lightness', 50).withChannelValue('alpha', 1);
|
|
123
|
-
},
|
|
124
|
-
isDisabled: props.isDisabled || false
|
|
125
|
-
};
|
|
126
|
-
}
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
export {$ee4262c74a467b07$export$f4301076d9336137 as useColorWheelState};
|
|
130
|
-
//# sourceMappingURL=useColorWheelState.module.js.map
|