@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.
Files changed (233) hide show
  1. package/dist/import.mjs +7 -9
  2. package/dist/main.js +14 -16
  3. package/dist/main.js.map +1 -1
  4. package/dist/module.js +7 -9
  5. package/dist/module.js.map +1 -1
  6. package/dist/types/src/index.d.ts +12 -0
  7. package/package.json +17 -20
  8. package/src/index.ts +12 -16
  9. package/dist/Color.main.js +0 -766
  10. package/dist/Color.main.js.map +0 -1
  11. package/dist/Color.mjs +0 -759
  12. package/dist/Color.module.js +0 -759
  13. package/dist/Color.module.js.map +0 -1
  14. package/dist/ar-AE.main.js +0 -42
  15. package/dist/ar-AE.main.js.map +0 -1
  16. package/dist/ar-AE.mjs +0 -44
  17. package/dist/ar-AE.module.js +0 -44
  18. package/dist/ar-AE.module.js.map +0 -1
  19. package/dist/bg-BG.main.js +0 -42
  20. package/dist/bg-BG.main.js.map +0 -1
  21. package/dist/bg-BG.mjs +0 -44
  22. package/dist/bg-BG.module.js +0 -44
  23. package/dist/bg-BG.module.js.map +0 -1
  24. package/dist/cs-CZ.main.js +0 -42
  25. package/dist/cs-CZ.main.js.map +0 -1
  26. package/dist/cs-CZ.mjs +0 -44
  27. package/dist/cs-CZ.module.js +0 -44
  28. package/dist/cs-CZ.module.js.map +0 -1
  29. package/dist/da-DK.main.js +0 -42
  30. package/dist/da-DK.main.js.map +0 -1
  31. package/dist/da-DK.mjs +0 -44
  32. package/dist/da-DK.module.js +0 -44
  33. package/dist/da-DK.module.js.map +0 -1
  34. package/dist/de-DE.main.js +0 -42
  35. package/dist/de-DE.main.js.map +0 -1
  36. package/dist/de-DE.mjs +0 -44
  37. package/dist/de-DE.module.js +0 -44
  38. package/dist/de-DE.module.js.map +0 -1
  39. package/dist/el-GR.main.js +0 -42
  40. package/dist/el-GR.main.js.map +0 -1
  41. package/dist/el-GR.mjs +0 -44
  42. package/dist/el-GR.module.js +0 -44
  43. package/dist/el-GR.module.js.map +0 -1
  44. package/dist/en-US.main.js +0 -42
  45. package/dist/en-US.main.js.map +0 -1
  46. package/dist/en-US.mjs +0 -44
  47. package/dist/en-US.module.js +0 -44
  48. package/dist/en-US.module.js.map +0 -1
  49. package/dist/es-ES.main.js +0 -42
  50. package/dist/es-ES.main.js.map +0 -1
  51. package/dist/es-ES.mjs +0 -44
  52. package/dist/es-ES.module.js +0 -44
  53. package/dist/es-ES.module.js.map +0 -1
  54. package/dist/et-EE.main.js +0 -42
  55. package/dist/et-EE.main.js.map +0 -1
  56. package/dist/et-EE.mjs +0 -44
  57. package/dist/et-EE.module.js +0 -44
  58. package/dist/et-EE.module.js.map +0 -1
  59. package/dist/fi-FI.main.js +0 -42
  60. package/dist/fi-FI.main.js.map +0 -1
  61. package/dist/fi-FI.mjs +0 -44
  62. package/dist/fi-FI.module.js +0 -44
  63. package/dist/fi-FI.module.js.map +0 -1
  64. package/dist/fr-FR.main.js +0 -42
  65. package/dist/fr-FR.main.js.map +0 -1
  66. package/dist/fr-FR.mjs +0 -44
  67. package/dist/fr-FR.module.js +0 -44
  68. package/dist/fr-FR.module.js.map +0 -1
  69. package/dist/he-IL.main.js +0 -42
  70. package/dist/he-IL.main.js.map +0 -1
  71. package/dist/he-IL.mjs +0 -44
  72. package/dist/he-IL.module.js +0 -44
  73. package/dist/he-IL.module.js.map +0 -1
  74. package/dist/hr-HR.main.js +0 -42
  75. package/dist/hr-HR.main.js.map +0 -1
  76. package/dist/hr-HR.mjs +0 -44
  77. package/dist/hr-HR.module.js +0 -44
  78. package/dist/hr-HR.module.js.map +0 -1
  79. package/dist/hu-HU.main.js +0 -42
  80. package/dist/hu-HU.main.js.map +0 -1
  81. package/dist/hu-HU.mjs +0 -44
  82. package/dist/hu-HU.module.js +0 -44
  83. package/dist/hu-HU.module.js.map +0 -1
  84. package/dist/intlStrings.main.js +0 -108
  85. package/dist/intlStrings.main.js.map +0 -1
  86. package/dist/intlStrings.mjs +0 -110
  87. package/dist/intlStrings.module.js +0 -110
  88. package/dist/intlStrings.module.js.map +0 -1
  89. package/dist/it-IT.main.js +0 -42
  90. package/dist/it-IT.main.js.map +0 -1
  91. package/dist/it-IT.mjs +0 -44
  92. package/dist/it-IT.module.js +0 -44
  93. package/dist/it-IT.module.js.map +0 -1
  94. package/dist/ja-JP.main.js +0 -42
  95. package/dist/ja-JP.main.js.map +0 -1
  96. package/dist/ja-JP.mjs +0 -44
  97. package/dist/ja-JP.module.js +0 -44
  98. package/dist/ja-JP.module.js.map +0 -1
  99. package/dist/ko-KR.main.js +0 -42
  100. package/dist/ko-KR.main.js.map +0 -1
  101. package/dist/ko-KR.mjs +0 -44
  102. package/dist/ko-KR.module.js +0 -44
  103. package/dist/ko-KR.module.js.map +0 -1
  104. package/dist/lt-LT.main.js +0 -42
  105. package/dist/lt-LT.main.js.map +0 -1
  106. package/dist/lt-LT.mjs +0 -44
  107. package/dist/lt-LT.module.js +0 -44
  108. package/dist/lt-LT.module.js.map +0 -1
  109. package/dist/lv-LV.main.js +0 -42
  110. package/dist/lv-LV.main.js.map +0 -1
  111. package/dist/lv-LV.mjs +0 -44
  112. package/dist/lv-LV.module.js +0 -44
  113. package/dist/lv-LV.module.js.map +0 -1
  114. package/dist/nb-NO.main.js +0 -42
  115. package/dist/nb-NO.main.js.map +0 -1
  116. package/dist/nb-NO.mjs +0 -44
  117. package/dist/nb-NO.module.js +0 -44
  118. package/dist/nb-NO.module.js.map +0 -1
  119. package/dist/nl-NL.main.js +0 -42
  120. package/dist/nl-NL.main.js.map +0 -1
  121. package/dist/nl-NL.mjs +0 -44
  122. package/dist/nl-NL.module.js +0 -44
  123. package/dist/nl-NL.module.js.map +0 -1
  124. package/dist/pl-PL.main.js +0 -42
  125. package/dist/pl-PL.main.js.map +0 -1
  126. package/dist/pl-PL.mjs +0 -44
  127. package/dist/pl-PL.module.js +0 -44
  128. package/dist/pl-PL.module.js.map +0 -1
  129. package/dist/pt-BR.main.js +0 -42
  130. package/dist/pt-BR.main.js.map +0 -1
  131. package/dist/pt-BR.mjs +0 -44
  132. package/dist/pt-BR.module.js +0 -44
  133. package/dist/pt-BR.module.js.map +0 -1
  134. package/dist/pt-PT.main.js +0 -42
  135. package/dist/pt-PT.main.js.map +0 -1
  136. package/dist/pt-PT.mjs +0 -44
  137. package/dist/pt-PT.module.js +0 -44
  138. package/dist/pt-PT.module.js.map +0 -1
  139. package/dist/ro-RO.main.js +0 -42
  140. package/dist/ro-RO.main.js.map +0 -1
  141. package/dist/ro-RO.mjs +0 -44
  142. package/dist/ro-RO.module.js +0 -44
  143. package/dist/ro-RO.module.js.map +0 -1
  144. package/dist/ru-RU.main.js +0 -42
  145. package/dist/ru-RU.main.js.map +0 -1
  146. package/dist/ru-RU.mjs +0 -44
  147. package/dist/ru-RU.module.js +0 -44
  148. package/dist/ru-RU.module.js.map +0 -1
  149. package/dist/sk-SK.main.js +0 -42
  150. package/dist/sk-SK.main.js.map +0 -1
  151. package/dist/sk-SK.mjs +0 -44
  152. package/dist/sk-SK.module.js +0 -44
  153. package/dist/sk-SK.module.js.map +0 -1
  154. package/dist/sl-SI.main.js +0 -42
  155. package/dist/sl-SI.main.js.map +0 -1
  156. package/dist/sl-SI.mjs +0 -44
  157. package/dist/sl-SI.module.js +0 -44
  158. package/dist/sl-SI.module.js.map +0 -1
  159. package/dist/sr-SP.main.js +0 -42
  160. package/dist/sr-SP.main.js.map +0 -1
  161. package/dist/sr-SP.mjs +0 -44
  162. package/dist/sr-SP.module.js +0 -44
  163. package/dist/sr-SP.module.js.map +0 -1
  164. package/dist/sv-SE.main.js +0 -42
  165. package/dist/sv-SE.main.js.map +0 -1
  166. package/dist/sv-SE.mjs +0 -44
  167. package/dist/sv-SE.module.js +0 -44
  168. package/dist/sv-SE.module.js.map +0 -1
  169. package/dist/tr-TR.main.js +0 -42
  170. package/dist/tr-TR.main.js.map +0 -1
  171. package/dist/tr-TR.mjs +0 -44
  172. package/dist/tr-TR.module.js +0 -44
  173. package/dist/tr-TR.module.js.map +0 -1
  174. package/dist/types.d.ts +0 -198
  175. package/dist/types.d.ts.map +0 -1
  176. package/dist/uk-UA.main.js +0 -42
  177. package/dist/uk-UA.main.js.map +0 -1
  178. package/dist/uk-UA.mjs +0 -44
  179. package/dist/uk-UA.module.js +0 -44
  180. package/dist/uk-UA.module.js.map +0 -1
  181. package/dist/useColor.main.js +0 -36
  182. package/dist/useColor.main.js.map +0 -1
  183. package/dist/useColor.mjs +0 -31
  184. package/dist/useColor.module.js +0 -31
  185. package/dist/useColor.module.js.map +0 -1
  186. package/dist/useColorAreaState.main.js +0 -133
  187. package/dist/useColorAreaState.main.js.map +0 -1
  188. package/dist/useColorAreaState.mjs +0 -128
  189. package/dist/useColorAreaState.module.js +0 -128
  190. package/dist/useColorAreaState.module.js.map +0 -1
  191. package/dist/useColorChannelFieldState.main.js +0 -65
  192. package/dist/useColorChannelFieldState.main.js.map +0 -1
  193. package/dist/useColorChannelFieldState.mjs +0 -60
  194. package/dist/useColorChannelFieldState.module.js +0 -60
  195. package/dist/useColorChannelFieldState.module.js.map +0 -1
  196. package/dist/useColorFieldState.main.js +0 -142
  197. package/dist/useColorFieldState.main.js.map +0 -1
  198. package/dist/useColorFieldState.mjs +0 -137
  199. package/dist/useColorFieldState.module.js +0 -137
  200. package/dist/useColorFieldState.module.js.map +0 -1
  201. package/dist/useColorPickerState.main.js +0 -27
  202. package/dist/useColorPickerState.main.js.map +0 -1
  203. package/dist/useColorPickerState.mjs +0 -22
  204. package/dist/useColorPickerState.module.js +0 -22
  205. package/dist/useColorPickerState.module.js.map +0 -1
  206. package/dist/useColorSliderState.main.js +0 -93
  207. package/dist/useColorSliderState.main.js.map +0 -1
  208. package/dist/useColorSliderState.mjs +0 -88
  209. package/dist/useColorSliderState.module.js +0 -88
  210. package/dist/useColorSliderState.module.js.map +0 -1
  211. package/dist/useColorWheelState.main.js +0 -135
  212. package/dist/useColorWheelState.main.js.map +0 -1
  213. package/dist/useColorWheelState.mjs +0 -130
  214. package/dist/useColorWheelState.module.js +0 -130
  215. package/dist/useColorWheelState.module.js.map +0 -1
  216. package/dist/zh-CN.main.js +0 -42
  217. package/dist/zh-CN.main.js.map +0 -1
  218. package/dist/zh-CN.mjs +0 -44
  219. package/dist/zh-CN.module.js +0 -44
  220. package/dist/zh-CN.module.js.map +0 -1
  221. package/dist/zh-TW.main.js +0 -42
  222. package/dist/zh-TW.main.js.map +0 -1
  223. package/dist/zh-TW.mjs +0 -44
  224. package/dist/zh-TW.module.js +0 -44
  225. package/dist/zh-TW.module.js.map +0 -1
  226. package/src/Color.ts +0 -792
  227. package/src/useColor.ts +0 -28
  228. package/src/useColorAreaState.ts +0 -202
  229. package/src/useColorChannelFieldState.ts +0 -74
  230. package/src/useColorFieldState.ts +0 -197
  231. package/src/useColorPickerState.ts +0 -29
  232. package/src/useColorSliderState.ts +0 -109
  233. 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