@react-stately/color 3.6.2-nightly.4709 → 3.6.2-nightly.4723
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/types.d.ts +1 -1
- package/dist/types.d.ts.map +1 -1
- package/dist/useColorChannelFieldState.main.js +13 -5
- package/dist/useColorChannelFieldState.main.js.map +1 -1
- package/dist/useColorChannelFieldState.mjs +13 -5
- package/dist/useColorChannelFieldState.module.js +13 -5
- package/dist/useColorChannelFieldState.module.js.map +1 -1
- package/dist/useColorPickerState.main.js +2 -2
- package/dist/useColorPickerState.main.js.map +1 -1
- package/dist/useColorPickerState.mjs +2 -2
- package/dist/useColorPickerState.module.js +2 -2
- package/dist/useColorPickerState.module.js.map +1 -1
- package/package.json +11 -11
- package/src/useColorChannelFieldState.ts +15 -5
- package/src/useColorPickerState.ts +5 -3
package/dist/types.d.ts
CHANGED
|
@@ -171,7 +171,7 @@ export interface ColorChannelFieldState extends NumberFieldState {
|
|
|
171
171
|
* value of an individual color channel.
|
|
172
172
|
*/
|
|
173
173
|
export function useColorChannelFieldState(props: ColorChannelFieldStateOptions): ColorChannelFieldState;
|
|
174
|
-
export interface ColorPickerProps extends ValueBase<string | Color
|
|
174
|
+
export interface ColorPickerProps extends ValueBase<string | Color, Color> {
|
|
175
175
|
}
|
|
176
176
|
export interface ColorPickerState {
|
|
177
177
|
/** The current color value of the color picker. */
|
package/dist/types.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"mappings":"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
|
|
1
|
+
{"mappings":";;;;;AAqBA,6FAA6F;AAC7F,2BAA2B,KAAK,EAAE,MAAM,GAAG,KAAM,CAOhD;AAUD,gEAAgE;AAChE,iCAAiC,UAAU,EAAE,UAAU,8CAStD;AChCD;IACE,2DAA2D;IAC3D,QAAQ,CAAC,KAAK,EAAE,KAAK,CAAC;IACtB,yFAAyF;IACzF,QAAQ,CAAC,KAAK,EAAE,MAAM,GAAG,KAAK,GAAG,IAAI,CAAC;IAEtC,oFAAoF;IACpF,MAAM,EAAE,MAAM,CAAC;IACf,2GAA2G;IAC3G,SAAS,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI,CAAC;IAE/B,kFAAkF;IAClF,MAAM,EAAE,MAAM,CAAC;IACf,yGAAyG;IACzG,SAAS,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI,CAAC;IAE/B,qJAAqJ;IACrJ,iBAAiB,CAAC,CAAC,EAAE,MAAM,EAAE,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAC9C,gHAAgH;IAChH,gBAAgB,IAAI;QAAC,CAAC,EAAE,MAAM,CAAC;QAAC,CAAC,EAAE,MAAM,CAAA;KAAC,CAAC;IAE3C,8FAA8F;IAC9F,UAAU,CAAC,QAAQ,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACpC,8FAA8F;IAC9F,UAAU,CAAC,QAAQ,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAEpC,4FAA4F;IAC5F,UAAU,CAAC,QAAQ,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACpC,4FAA4F;IAC5F,UAAU,CAAC,QAAQ,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAEpC,yDAAyD;IACzD,QAAQ,CAAC,UAAU,EAAE,OAAO,CAAC;IAC7B,oDAAoD;IACpD,WAAW,CAAC,KAAK,EAAE,OAAO,GAAG,IAAI,CAAC;IAElC,kFAAkF;IAClF,QAAQ,EAAE;QAAC,QAAQ,EAAE,YAAY,CAAC;QAAC,QAAQ,EAAE,YAAY,CAAC;QAAC,QAAQ,EAAE,YAAY,CAAA;KAAC,CAAC;IACnF,+EAA+E;IAC/E,YAAY,EAAE,MAAM,CAAC;IACrB,+EAA+E;IAC/E,YAAY,EAAE,MAAM,CAAC;IACrB,oFAAoF;IACpF,gBAAgB,EAAE,MAAM,CAAC;IACzB,oFAAoF;IACpF,gBAAgB,EAAE,MAAM,CAAC;IAEzB,6FAA6F;IAC7F,eAAe,IAAI,KAAK,CAAA;CACzB;AAGD;;;GAGG;AACH,kCAAkC,KAAK,EAAE,cAAc,GAAG,cAAc,CA4HvE;ACnLD,iCAAkC,SAAQ,WAAW;IACnD,+DAA+D;IAC/D,QAAQ,CAAC,KAAK,EAAE,KAAK,CAAC;IACtB,yFAAyF;IACzF,QAAQ,CAAC,KAAK,EAAE,MAAM,GAAG,KAAK,GAAG,IAAI,CAAC;IACtC,6GAA6G;IAC7G,eAAe,IAAI,KAAK,CAAC;IACzB,2DAA2D;IAC3D,QAAQ,CAAC,UAAU,EAAE,OAAO,CAAA;CAC7B;AAGD,wCAAyC,SAAQ,gBAAgB;IAC/D,gEAAgE;IAChE,MAAM,EAAE,MAAM,CAAA;CACf;AAED;;;GAGG;AACH,oCAAoC,KAAK,EAAE,uBAAuB,GAAG,gBAAgB,CAiEpF;ACvFD;IACE,8DAA8D;IAC9D,QAAQ,CAAC,KAAK,EAAE,KAAK,CAAC;IACtB,oFAAoF;IACpF,QAAQ,CAAC,KAAK,EAAE,MAAM,GAAG,KAAK,GAAG,IAAI,CAAC;IAEtC,yEAAyE;IACzE,QAAQ,CAAC,GAAG,EAAE,MAAM,CAAC;IACrB,+EAA+E;IAC/E,MAAM,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI,CAAC;IAE5B,6IAA6I;IAC7I,eAAe,CAAC,CAAC,EAAE,MAAM,EAAE,CAAC,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,GAAG,IAAI,CAAC;IAC5D,4FAA4F;IAC5F,gBAAgB,CAAC,MAAM,EAAE,MAAM,GAAG;QAAC,CAAC,EAAE,MAAM,CAAC;QAAC,CAAC,EAAE,MAAM,CAAA;KAAC,CAAC;IAEzD,8DAA8D;IAC9D,SAAS,CAAC,QAAQ,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACnC,8DAA8D;IAC9D,SAAS,CAAC,QAAQ,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAEnC,0DAA0D;IAC1D,QAAQ,CAAC,UAAU,EAAE,OAAO,CAAC;IAC7B,qDAAqD;IACrD,WAAW,CAAC,KAAK,EAAE,OAAO,GAAG,IAAI,CAAC;IAClC,wFAAwF;IACxF,eAAe,IAAI,KAAK,CAAC;IACzB,kFAAkF;IAClF,IAAI,EAAE,MAAM,CAAC;IACb,uFAAuF;IACvF,QAAQ,EAAE,MAAM,CAAC;IAEjB,2CAA2C;IAC3C,QAAQ,CAAC,UAAU,EAAE,OAAO,CAAA;CAC7B;AA0CD;;;GAGG;AACH,mCAAmC,KAAK,EAAE,eAAe,GAAG,eAAe,CA8F1E;AE5KD,gCAAiC,SAAQ,mBAAmB;IAC1D;;;OAGG;IACH,QAAQ,CAAC,UAAU,EAAE,MAAM,CAAC;IAC5B;;;OAGG;IACH,QAAQ,CAAC,UAAU,EAAE,KAAK,GAAG,IAAI,CAAC;IAClC,gDAAgD;IAChD,aAAa,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI,CAAC;IACnC;;;OAGG;IACH,MAAM,IAAI,IAAI,CAAC;IACf,0FAA0F;IAC1F,SAAS,IAAI,IAAI,CAAC;IAClB,0FAA0F;IAC1F,SAAS,IAAI,IAAI,CAAC;IAClB,+EAA+E;IAC/E,cAAc,IAAI,IAAI,CAAC;IACvB,+EAA+E;IAC/E,cAAc,IAAI,IAAI,CAAC;IACvB;;;;OAIG;IACH,QAAQ,CAAC,KAAK,EAAE,MAAM,GAAG,OAAO,CAAA;CACjC;AAOD;;;GAGG;AACH,mCACE,KAAK,EAAE,eAAe,GACrB,eAAe,CAiHjB;AC3KD,uCAAwC,SAAQ,eAAe;IAC7D,UAAU,CAAC,EAAE,UAAU,CAAC;IACxB,OAAO,EAAE,YAAY,CAAA;CACtB;AAED,8CAA+C,SAAQ,sBAAsB;IAC3E,MAAM,EAAE,MAAM,CAAA;CACf;AAED,uCAAwC,SAAQ,gBAAgB;IAC9D,UAAU,EAAE,KAAK,CAAA;CAClB;AAED;;;GAGG;AACH,0CAA0C,KAAK,EAAE,6BAA6B,GAAG,sBAAsB,CAmCtG;ACpDD,iCAAkC,SAAQ,UAAU,MAAM,GAAG,KAAK,EAAE,KAAK,CAAC;CAAG;AAE7E;IACE,mDAAmD;IACnD,KAAK,EAAE,KAAK,CAAC;IACb,wDAAwD;IACxD,QAAQ,CAAC,KAAK,EAAE,KAAK,GAAG,IAAI,GAAG,IAAI,CAAA;CACpC;AAED,oCAAoC,KAAK,EAAE,gBAAgB,GAAG,gBAAgB,CAa7E;ACDD,YAAY,EAAC,KAAK,EAAE,cAAc,EAAE,eAAe,EAAE,eAAe,EAAC,MAAM,oBAAoB,CAAC","sources":["packages/@react-stately/color/src/packages/@react-stately/color/src/Color.ts","packages/@react-stately/color/src/packages/@react-stately/color/src/useColorAreaState.ts","packages/@react-stately/color/src/packages/@react-stately/color/src/useColorSliderState.ts","packages/@react-stately/color/src/packages/@react-stately/color/src/useColorWheelState.ts","packages/@react-stately/color/src/packages/@react-stately/color/src/useColor.ts","packages/@react-stately/color/src/packages/@react-stately/color/src/useColorFieldState.ts","packages/@react-stately/color/src/packages/@react-stately/color/src/useColorChannelFieldState.ts","packages/@react-stately/color/src/packages/@react-stately/color/src/useColorPickerState.ts","packages/@react-stately/color/src/packages/@react-stately/color/src/index.ts","packages/@react-stately/color/src/index.ts"],"sourcesContent":[null,null,null,null,null,null,null,null,null,"/*\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\nexport type {ColorAreaState} from './useColorAreaState';\nexport type {ColorSliderState} from './useColorSliderState';\nexport type {ColorWheelState} from './useColorWheelState';\nexport type {ColorFieldState} from './useColorFieldState';\nexport type {ColorChannelFieldProps, ColorChannelFieldState, ColorChannelFieldStateOptions} from './useColorChannelFieldState';\nexport type {ColorPickerProps, ColorPickerState} from './useColorPickerState';\n\nexport {parseColor, getColorChannels} from './Color';\nexport {useColorAreaState} from './useColorAreaState';\nexport {useColorSliderState} from './useColorSliderState';\nexport {useColorWheelState} from './useColorWheelState';\nexport {useColorFieldState} from './useColorFieldState';\nexport {useColorChannelFieldState} from './useColorChannelFieldState';\nexport {useColorPickerState} from './useColorPickerState';\n\nexport type {Color, ColorAreaProps, ColorFieldProps, ColorWheelProps} from '@react-types/color';\nexport type {ColorSliderStateOptions} from './useColorSliderState';\n"],"names":[],"version":3,"file":"types.d.ts.map"}
|
|
@@ -15,10 +15,15 @@ $parcel$export(module.exports, "useColorChannelFieldState", () => $9f9c35e37074b
|
|
|
15
15
|
|
|
16
16
|
function $9f9c35e37074b99b$export$b9fc0d69c9190c4a(props) {
|
|
17
17
|
let { channel: channel, colorSpace: colorSpace, locale: locale } = props;
|
|
18
|
+
let black = (0, $f8b3be23ba4462b1$exports.useColor)('#000');
|
|
18
19
|
let initialValue = (0, $f8b3be23ba4462b1$exports.useColor)(props.value);
|
|
19
|
-
let initialDefaultValue = (0, $f8b3be23ba4462b1$exports.useColor)(props.defaultValue
|
|
20
|
-
let [colorValue, setColor] = (0, $8s2vy$reactstatelyutils.useControlledState)(initialValue
|
|
21
|
-
let color = (0, $8s2vy$react.useMemo)(()=>
|
|
20
|
+
let initialDefaultValue = (0, $f8b3be23ba4462b1$exports.useColor)(props.defaultValue);
|
|
21
|
+
let [colorValue, setColor] = (0, $8s2vy$reactstatelyutils.useControlledState)(initialValue, initialDefaultValue !== null && initialDefaultValue !== void 0 ? initialDefaultValue : null, props.onChange);
|
|
22
|
+
let color = (0, $8s2vy$react.useMemo)(()=>{
|
|
23
|
+
let nonNullColorValue = colorValue || black;
|
|
24
|
+
return colorSpace && nonNullColorValue ? nonNullColorValue.toFormat(colorSpace) : nonNullColorValue;
|
|
25
|
+
}, [
|
|
26
|
+
black,
|
|
22
27
|
colorValue,
|
|
23
28
|
colorSpace
|
|
24
29
|
]);
|
|
@@ -31,8 +36,11 @@ function $9f9c35e37074b99b$export$b9fc0d69c9190c4a(props) {
|
|
|
31
36
|
let multiplier = formatOptions.style === 'percent' && range.maxValue === 100 ? 100 : 1;
|
|
32
37
|
let numberFieldState = (0, $8s2vy$reactstatelynumberfield.useNumberFieldState)({
|
|
33
38
|
locale: locale,
|
|
34
|
-
value: value / multiplier,
|
|
35
|
-
onChange: (v)=>
|
|
39
|
+
value: colorValue === null ? NaN : value / multiplier,
|
|
40
|
+
onChange: (v)=>{
|
|
41
|
+
if (!Number.isNaN(v)) setColor(color.withChannelValue(channel, v * multiplier));
|
|
42
|
+
else setColor(null);
|
|
43
|
+
},
|
|
36
44
|
minValue: range.minValue / multiplier,
|
|
37
45
|
maxValue: range.maxValue / multiplier,
|
|
38
46
|
step: range.step / multiplier,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"mappings":";;;;;;;;;;;;;;;AAuBO,SAAS,0CAA0B,KAAoC;IAC5E,IAAI,WAAC,OAAO,cAAE,UAAU,UAAE,MAAM,EAAC,GAAG;IACpC,IAAI,eAAe,CAAA,GAAA,kCAAO,EAAE,MAAM,KAAK;IACvC,IAAI,sBAAsB,CAAA,GAAA,kCAAO,EAAE,MAAM,YAAY
|
|
1
|
+
{"mappings":";;;;;;;;;;;;;;;AAuBO,SAAS,0CAA0B,KAAoC;IAC5E,IAAI,WAAC,OAAO,cAAE,UAAU,UAAE,MAAM,EAAC,GAAG;IACpC,IAAI,QAAQ,CAAA,GAAA,kCAAO,EAAE;IACrB,IAAI,eAAe,CAAA,GAAA,kCAAO,EAAE,MAAM,KAAK;IACvC,IAAI,sBAAsB,CAAA,GAAA,kCAAO,EAAE,MAAM,YAAY;IACrD,IAAI,CAAC,YAAY,SAAS,GAAG,CAAA,GAAA,2CAAiB,EAAE,cAAc,gCAAA,iCAAA,sBAAuB,MAAM,MAAM,QAAQ;IACzG,IAAI,QAAQ,CAAA,GAAA,oBAAM,EAAE;QAClB,IAAI,oBAAoB,cAAc;QACtC,OAAO,cAAc,oBAAoB,kBAAkB,QAAQ,CAAC,cAAc;IACpF,GAAG;QAAC;QAAO;QAAY;KAAW;IAClC,IAAI,QAAQ,MAAM,eAAe,CAAC;IAClC,IAAI,QAAQ,MAAM,eAAe,CAAC;IAClC,IAAI,gBAAgB,CAAA,GAAA,oBAAM,EAAE,IAAM,MAAM,uBAAuB,CAAC,UAAU;QAAC;QAAO;KAAQ;IAC1F,IAAI,aAAa,cAAc,KAAK,KAAK,aAAa,MAAM,QAAQ,KAAK,MAAM,MAAM;IAErF,IAAI,mBAAmB,CAAA,GAAA,kDAAkB,EAAE;gBACzC;QACA,OAAO,eAAe,OAAO,MAAM,QAAQ;QAC3C,UAAU,CAAC;YACT,IAAI,CAAC,OAAO,KAAK,CAAC,IAChB,SAAS,MAAM,gBAAgB,CAAC,SAAS,IAAI;iBAE7C,SAAS;QAEb;QACA,UAAU,MAAM,QAAQ,GAAG;QAC3B,UAAU,MAAM,QAAQ,GAAG;QAC3B,MAAM,MAAM,IAAI,GAAG;uBACnB;IACF;IAEA,OAAO;QACL,GAAG,gBAAgB;QACnB,YAAY;IACd;AACF","sources":["packages/@react-stately/color/src/useColorChannelFieldState.ts"],"sourcesContent":["import {Color, ColorChannel, ColorFieldProps, ColorSpace} from '@react-types/color';\nimport {NumberFieldState, useNumberFieldState} from '@react-stately/numberfield';\nimport {useColor} from './useColor';\nimport {useControlledState} from '@react-stately/utils';\nimport {useMemo} from 'react';\n\nexport interface ColorChannelFieldProps extends ColorFieldProps {\n colorSpace?: ColorSpace,\n channel: ColorChannel\n}\n\nexport interface ColorChannelFieldStateOptions extends ColorChannelFieldProps {\n locale: string\n}\n\nexport interface ColorChannelFieldState extends NumberFieldState {\n colorValue: Color\n}\n\n/**\n * Provides state management for a color channel field, allowing users to edit the\n * value of an individual color channel.\n */\nexport function useColorChannelFieldState(props: ColorChannelFieldStateOptions): ColorChannelFieldState {\n let {channel, colorSpace, locale} = props;\n let black = useColor('#000')!;\n let initialValue = useColor(props.value);\n let initialDefaultValue = useColor(props.defaultValue);\n let [colorValue, setColor] = useControlledState(initialValue, initialDefaultValue ?? null, props.onChange);\n let color = useMemo(() => {\n let nonNullColorValue = colorValue || black;\n return colorSpace && nonNullColorValue ? nonNullColorValue.toFormat(colorSpace) : nonNullColorValue;\n }, [black, colorValue, colorSpace]);\n let value = color.getChannelValue(channel);\n let range = color.getChannelRange(channel);\n let formatOptions = useMemo(() => color.getChannelFormatOptions(channel), [color, channel]);\n let multiplier = formatOptions.style === 'percent' && range.maxValue === 100 ? 100 : 1;\n\n let numberFieldState = useNumberFieldState({\n locale,\n value: colorValue === null ? NaN : value / multiplier,\n onChange: (v) => {\n if (!Number.isNaN(v)) {\n setColor(color.withChannelValue(channel, v * multiplier));\n } else {\n setColor(null);\n }\n },\n minValue: range.minValue / multiplier,\n maxValue: range.maxValue / multiplier,\n step: range.step / multiplier,\n formatOptions\n });\n\n return {\n ...numberFieldState,\n colorValue: color\n };\n}\n"],"names":[],"version":3,"file":"useColorChannelFieldState.main.js.map"}
|
|
@@ -9,10 +9,15 @@ import {useMemo as $52OvP$useMemo} from "react";
|
|
|
9
9
|
|
|
10
10
|
function $31a863bb88e75dd6$export$b9fc0d69c9190c4a(props) {
|
|
11
11
|
let { channel: channel, colorSpace: colorSpace, locale: locale } = props;
|
|
12
|
+
let black = (0, $aa90ad8b2b1d015f$export$5aadd9c0606af5c2)('#000');
|
|
12
13
|
let initialValue = (0, $aa90ad8b2b1d015f$export$5aadd9c0606af5c2)(props.value);
|
|
13
|
-
let initialDefaultValue = (0, $aa90ad8b2b1d015f$export$5aadd9c0606af5c2)(props.defaultValue
|
|
14
|
-
let [colorValue, setColor] = (0, $52OvP$useControlledState)(initialValue
|
|
15
|
-
let color = (0, $52OvP$useMemo)(()=>
|
|
14
|
+
let initialDefaultValue = (0, $aa90ad8b2b1d015f$export$5aadd9c0606af5c2)(props.defaultValue);
|
|
15
|
+
let [colorValue, setColor] = (0, $52OvP$useControlledState)(initialValue, initialDefaultValue !== null && initialDefaultValue !== void 0 ? initialDefaultValue : null, props.onChange);
|
|
16
|
+
let color = (0, $52OvP$useMemo)(()=>{
|
|
17
|
+
let nonNullColorValue = colorValue || black;
|
|
18
|
+
return colorSpace && nonNullColorValue ? nonNullColorValue.toFormat(colorSpace) : nonNullColorValue;
|
|
19
|
+
}, [
|
|
20
|
+
black,
|
|
16
21
|
colorValue,
|
|
17
22
|
colorSpace
|
|
18
23
|
]);
|
|
@@ -25,8 +30,11 @@ function $31a863bb88e75dd6$export$b9fc0d69c9190c4a(props) {
|
|
|
25
30
|
let multiplier = formatOptions.style === 'percent' && range.maxValue === 100 ? 100 : 1;
|
|
26
31
|
let numberFieldState = (0, $52OvP$useNumberFieldState)({
|
|
27
32
|
locale: locale,
|
|
28
|
-
value: value / multiplier,
|
|
29
|
-
onChange: (v)=>
|
|
33
|
+
value: colorValue === null ? NaN : value / multiplier,
|
|
34
|
+
onChange: (v)=>{
|
|
35
|
+
if (!Number.isNaN(v)) setColor(color.withChannelValue(channel, v * multiplier));
|
|
36
|
+
else setColor(null);
|
|
37
|
+
},
|
|
30
38
|
minValue: range.minValue / multiplier,
|
|
31
39
|
maxValue: range.maxValue / multiplier,
|
|
32
40
|
step: range.step / multiplier,
|
|
@@ -9,10 +9,15 @@ import {useMemo as $52OvP$useMemo} from "react";
|
|
|
9
9
|
|
|
10
10
|
function $31a863bb88e75dd6$export$b9fc0d69c9190c4a(props) {
|
|
11
11
|
let { channel: channel, colorSpace: colorSpace, locale: locale } = props;
|
|
12
|
+
let black = (0, $aa90ad8b2b1d015f$export$5aadd9c0606af5c2)('#000');
|
|
12
13
|
let initialValue = (0, $aa90ad8b2b1d015f$export$5aadd9c0606af5c2)(props.value);
|
|
13
|
-
let initialDefaultValue = (0, $aa90ad8b2b1d015f$export$5aadd9c0606af5c2)(props.defaultValue
|
|
14
|
-
let [colorValue, setColor] = (0, $52OvP$useControlledState)(initialValue
|
|
15
|
-
let color = (0, $52OvP$useMemo)(()=>
|
|
14
|
+
let initialDefaultValue = (0, $aa90ad8b2b1d015f$export$5aadd9c0606af5c2)(props.defaultValue);
|
|
15
|
+
let [colorValue, setColor] = (0, $52OvP$useControlledState)(initialValue, initialDefaultValue !== null && initialDefaultValue !== void 0 ? initialDefaultValue : null, props.onChange);
|
|
16
|
+
let color = (0, $52OvP$useMemo)(()=>{
|
|
17
|
+
let nonNullColorValue = colorValue || black;
|
|
18
|
+
return colorSpace && nonNullColorValue ? nonNullColorValue.toFormat(colorSpace) : nonNullColorValue;
|
|
19
|
+
}, [
|
|
20
|
+
black,
|
|
16
21
|
colorValue,
|
|
17
22
|
colorSpace
|
|
18
23
|
]);
|
|
@@ -25,8 +30,11 @@ function $31a863bb88e75dd6$export$b9fc0d69c9190c4a(props) {
|
|
|
25
30
|
let multiplier = formatOptions.style === 'percent' && range.maxValue === 100 ? 100 : 1;
|
|
26
31
|
let numberFieldState = (0, $52OvP$useNumberFieldState)({
|
|
27
32
|
locale: locale,
|
|
28
|
-
value: value / multiplier,
|
|
29
|
-
onChange: (v)=>
|
|
33
|
+
value: colorValue === null ? NaN : value / multiplier,
|
|
34
|
+
onChange: (v)=>{
|
|
35
|
+
if (!Number.isNaN(v)) setColor(color.withChannelValue(channel, v * multiplier));
|
|
36
|
+
else setColor(null);
|
|
37
|
+
},
|
|
30
38
|
minValue: range.minValue / multiplier,
|
|
31
39
|
maxValue: range.maxValue / multiplier,
|
|
32
40
|
step: range.step / multiplier,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"mappings":";;;;;;;;;AAuBO,SAAS,0CAA0B,KAAoC;IAC5E,IAAI,WAAC,OAAO,cAAE,UAAU,UAAE,MAAM,EAAC,GAAG;IACpC,IAAI,eAAe,CAAA,GAAA,yCAAO,EAAE,MAAM,KAAK;IACvC,IAAI,sBAAsB,CAAA,GAAA,yCAAO,EAAE,MAAM,YAAY
|
|
1
|
+
{"mappings":";;;;;;;;;AAuBO,SAAS,0CAA0B,KAAoC;IAC5E,IAAI,WAAC,OAAO,cAAE,UAAU,UAAE,MAAM,EAAC,GAAG;IACpC,IAAI,QAAQ,CAAA,GAAA,yCAAO,EAAE;IACrB,IAAI,eAAe,CAAA,GAAA,yCAAO,EAAE,MAAM,KAAK;IACvC,IAAI,sBAAsB,CAAA,GAAA,yCAAO,EAAE,MAAM,YAAY;IACrD,IAAI,CAAC,YAAY,SAAS,GAAG,CAAA,GAAA,yBAAiB,EAAE,cAAc,gCAAA,iCAAA,sBAAuB,MAAM,MAAM,QAAQ;IACzG,IAAI,QAAQ,CAAA,GAAA,cAAM,EAAE;QAClB,IAAI,oBAAoB,cAAc;QACtC,OAAO,cAAc,oBAAoB,kBAAkB,QAAQ,CAAC,cAAc;IACpF,GAAG;QAAC;QAAO;QAAY;KAAW;IAClC,IAAI,QAAQ,MAAM,eAAe,CAAC;IAClC,IAAI,QAAQ,MAAM,eAAe,CAAC;IAClC,IAAI,gBAAgB,CAAA,GAAA,cAAM,EAAE,IAAM,MAAM,uBAAuB,CAAC,UAAU;QAAC;QAAO;KAAQ;IAC1F,IAAI,aAAa,cAAc,KAAK,KAAK,aAAa,MAAM,QAAQ,KAAK,MAAM,MAAM;IAErF,IAAI,mBAAmB,CAAA,GAAA,0BAAkB,EAAE;gBACzC;QACA,OAAO,eAAe,OAAO,MAAM,QAAQ;QAC3C,UAAU,CAAC;YACT,IAAI,CAAC,OAAO,KAAK,CAAC,IAChB,SAAS,MAAM,gBAAgB,CAAC,SAAS,IAAI;iBAE7C,SAAS;QAEb;QACA,UAAU,MAAM,QAAQ,GAAG;QAC3B,UAAU,MAAM,QAAQ,GAAG;QAC3B,MAAM,MAAM,IAAI,GAAG;uBACnB;IACF;IAEA,OAAO;QACL,GAAG,gBAAgB;QACnB,YAAY;IACd;AACF","sources":["packages/@react-stately/color/src/useColorChannelFieldState.ts"],"sourcesContent":["import {Color, ColorChannel, ColorFieldProps, ColorSpace} from '@react-types/color';\nimport {NumberFieldState, useNumberFieldState} from '@react-stately/numberfield';\nimport {useColor} from './useColor';\nimport {useControlledState} from '@react-stately/utils';\nimport {useMemo} from 'react';\n\nexport interface ColorChannelFieldProps extends ColorFieldProps {\n colorSpace?: ColorSpace,\n channel: ColorChannel\n}\n\nexport interface ColorChannelFieldStateOptions extends ColorChannelFieldProps {\n locale: string\n}\n\nexport interface ColorChannelFieldState extends NumberFieldState {\n colorValue: Color\n}\n\n/**\n * Provides state management for a color channel field, allowing users to edit the\n * value of an individual color channel.\n */\nexport function useColorChannelFieldState(props: ColorChannelFieldStateOptions): ColorChannelFieldState {\n let {channel, colorSpace, locale} = props;\n let black = useColor('#000')!;\n let initialValue = useColor(props.value);\n let initialDefaultValue = useColor(props.defaultValue);\n let [colorValue, setColor] = useControlledState(initialValue, initialDefaultValue ?? null, props.onChange);\n let color = useMemo(() => {\n let nonNullColorValue = colorValue || black;\n return colorSpace && nonNullColorValue ? nonNullColorValue.toFormat(colorSpace) : nonNullColorValue;\n }, [black, colorValue, colorSpace]);\n let value = color.getChannelValue(channel);\n let range = color.getChannelRange(channel);\n let formatOptions = useMemo(() => color.getChannelFormatOptions(channel), [color, channel]);\n let multiplier = formatOptions.style === 'percent' && range.maxValue === 100 ? 100 : 1;\n\n let numberFieldState = useNumberFieldState({\n locale,\n value: colorValue === null ? NaN : value / multiplier,\n onChange: (v) => {\n if (!Number.isNaN(v)) {\n setColor(color.withChannelValue(channel, v * multiplier));\n } else {\n setColor(null);\n }\n },\n minValue: range.minValue / multiplier,\n maxValue: range.maxValue / multiplier,\n step: range.step / multiplier,\n formatOptions\n });\n\n return {\n ...numberFieldState,\n colorValue: color\n };\n}\n"],"names":[],"version":3,"file":"useColorChannelFieldState.module.js.map"}
|
|
@@ -13,12 +13,12 @@ $parcel$export(module.exports, "useColorPickerState", () => $f31788ea48a5c383$ex
|
|
|
13
13
|
|
|
14
14
|
function $f31788ea48a5c383$export$dc6b73b623f8645f(props) {
|
|
15
15
|
let value = (0, $f8b3be23ba4462b1$exports.useColor)(props.value);
|
|
16
|
-
let defaultValue = (0, $f8b3be23ba4462b1$exports.useColor)(props.defaultValue || '#
|
|
16
|
+
let defaultValue = (0, $f8b3be23ba4462b1$exports.useColor)(props.defaultValue || '#000000');
|
|
17
17
|
let [color, setColor] = (0, $1Pz5H$reactstatelyutils.useControlledState)(value || undefined, defaultValue, props.onChange);
|
|
18
18
|
return {
|
|
19
19
|
color: color,
|
|
20
20
|
setColor (color) {
|
|
21
|
-
setColor(color || (0, $83fe1a57d631223b$exports.parseColor)('#
|
|
21
|
+
if (color != null) setColor(color || (0, $83fe1a57d631223b$exports.parseColor)('#000000'));
|
|
22
22
|
}
|
|
23
23
|
};
|
|
24
24
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"mappings":";;;;;;;;;;;;;AAeO,SAAS,0CAAoB,KAAuB;IACzD,IAAI,QAAQ,CAAA,GAAA,kCAAO,EAAE,MAAM,KAAK;IAChC,IAAI,eAAe,CAAA,GAAA,kCAAO,EAAE,MAAM,YAAY,IAAI;IAClD,IAAI,CAAC,OAAO,SAAS,GAAG,CAAA,GAAA,2CAAiB,EAAE,SAAS,WAAW,cAAc,MAAM,QAAQ;IAE3F,OAAO;eACL;QACA,UAAS,KAAK;YACZ,SAAS,SAAS,CAAA,GAAA,oCAAS,EAAE;
|
|
1
|
+
{"mappings":";;;;;;;;;;;;;AAeO,SAAS,0CAAoB,KAAuB;IACzD,IAAI,QAAQ,CAAA,GAAA,kCAAO,EAAE,MAAM,KAAK;IAChC,IAAI,eAAe,CAAA,GAAA,kCAAO,EAAE,MAAM,YAAY,IAAI;IAClD,IAAI,CAAC,OAAO,SAAS,GAAG,CAAA,GAAA,2CAAiB,EAAE,SAAS,WAAW,cAAc,MAAM,QAAQ;IAE3F,OAAO;eACL;QACA,UAAS,KAAK;YACZ,IAAI,SAAS,MACX,SAAS,SAAS,CAAA,GAAA,oCAAS,EAAE;QAEjC;IACF;AACF","sources":["packages/@react-stately/color/src/useColorPickerState.ts"],"sourcesContent":["import {Color} from '@react-types/color';\nimport {parseColor} from './Color';\nimport {useColor} from './useColor';\nimport {useControlledState} from '@react-stately/utils';\nimport {ValueBase} from '@react-types/shared';\n\nexport interface ColorPickerProps extends ValueBase<string | Color, Color> {}\n\nexport interface ColorPickerState {\n /** The current color value of the color picker. */\n color: Color,\n /** Sets the current color value of the color picker. */\n setColor(color: Color | null): void\n}\n\nexport function useColorPickerState(props: ColorPickerProps): ColorPickerState {\n let value = useColor(props.value);\n let defaultValue = useColor(props.defaultValue || '#000000')!;\n let [color, setColor] = useControlledState(value || undefined, defaultValue, props.onChange);\n \n return {\n color,\n setColor(color) {\n if (color != null) {\n setColor(color || parseColor('#000000'));\n }\n }\n };\n}\n"],"names":[],"version":3,"file":"useColorPickerState.main.js.map"}
|
|
@@ -7,12 +7,12 @@ import {useControlledState as $5GESt$useControlledState} from "@react-stately/ut
|
|
|
7
7
|
|
|
8
8
|
function $309d2b7669014898$export$dc6b73b623f8645f(props) {
|
|
9
9
|
let value = (0, $aa90ad8b2b1d015f$export$5aadd9c0606af5c2)(props.value);
|
|
10
|
-
let defaultValue = (0, $aa90ad8b2b1d015f$export$5aadd9c0606af5c2)(props.defaultValue || '#
|
|
10
|
+
let defaultValue = (0, $aa90ad8b2b1d015f$export$5aadd9c0606af5c2)(props.defaultValue || '#000000');
|
|
11
11
|
let [color, setColor] = (0, $5GESt$useControlledState)(value || undefined, defaultValue, props.onChange);
|
|
12
12
|
return {
|
|
13
13
|
color: color,
|
|
14
14
|
setColor (color) {
|
|
15
|
-
setColor(color || (0, $799cddbef784668f$export$6e865ea70d7724f)('#
|
|
15
|
+
if (color != null) setColor(color || (0, $799cddbef784668f$export$6e865ea70d7724f)('#000000'));
|
|
16
16
|
}
|
|
17
17
|
};
|
|
18
18
|
}
|
|
@@ -7,12 +7,12 @@ import {useControlledState as $5GESt$useControlledState} from "@react-stately/ut
|
|
|
7
7
|
|
|
8
8
|
function $309d2b7669014898$export$dc6b73b623f8645f(props) {
|
|
9
9
|
let value = (0, $aa90ad8b2b1d015f$export$5aadd9c0606af5c2)(props.value);
|
|
10
|
-
let defaultValue = (0, $aa90ad8b2b1d015f$export$5aadd9c0606af5c2)(props.defaultValue || '#
|
|
10
|
+
let defaultValue = (0, $aa90ad8b2b1d015f$export$5aadd9c0606af5c2)(props.defaultValue || '#000000');
|
|
11
11
|
let [color, setColor] = (0, $5GESt$useControlledState)(value || undefined, defaultValue, props.onChange);
|
|
12
12
|
return {
|
|
13
13
|
color: color,
|
|
14
14
|
setColor (color) {
|
|
15
|
-
setColor(color || (0, $799cddbef784668f$export$6e865ea70d7724f)('#
|
|
15
|
+
if (color != null) setColor(color || (0, $799cddbef784668f$export$6e865ea70d7724f)('#000000'));
|
|
16
16
|
}
|
|
17
17
|
};
|
|
18
18
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"mappings":";;;;;;;AAeO,SAAS,0CAAoB,KAAuB;IACzD,IAAI,QAAQ,CAAA,GAAA,yCAAO,EAAE,MAAM,KAAK;IAChC,IAAI,eAAe,CAAA,GAAA,yCAAO,EAAE,MAAM,YAAY,IAAI;IAClD,IAAI,CAAC,OAAO,SAAS,GAAG,CAAA,GAAA,yBAAiB,EAAE,SAAS,WAAW,cAAc,MAAM,QAAQ;IAE3F,OAAO;eACL;QACA,UAAS,KAAK;YACZ,SAAS,SAAS,CAAA,GAAA,wCAAS,EAAE;
|
|
1
|
+
{"mappings":";;;;;;;AAeO,SAAS,0CAAoB,KAAuB;IACzD,IAAI,QAAQ,CAAA,GAAA,yCAAO,EAAE,MAAM,KAAK;IAChC,IAAI,eAAe,CAAA,GAAA,yCAAO,EAAE,MAAM,YAAY,IAAI;IAClD,IAAI,CAAC,OAAO,SAAS,GAAG,CAAA,GAAA,yBAAiB,EAAE,SAAS,WAAW,cAAc,MAAM,QAAQ;IAE3F,OAAO;eACL;QACA,UAAS,KAAK;YACZ,IAAI,SAAS,MACX,SAAS,SAAS,CAAA,GAAA,wCAAS,EAAE;QAEjC;IACF;AACF","sources":["packages/@react-stately/color/src/useColorPickerState.ts"],"sourcesContent":["import {Color} from '@react-types/color';\nimport {parseColor} from './Color';\nimport {useColor} from './useColor';\nimport {useControlledState} from '@react-stately/utils';\nimport {ValueBase} from '@react-types/shared';\n\nexport interface ColorPickerProps extends ValueBase<string | Color, Color> {}\n\nexport interface ColorPickerState {\n /** The current color value of the color picker. */\n color: Color,\n /** Sets the current color value of the color picker. */\n setColor(color: Color | null): void\n}\n\nexport function useColorPickerState(props: ColorPickerProps): ColorPickerState {\n let value = useColor(props.value);\n let defaultValue = useColor(props.defaultValue || '#000000')!;\n let [color, setColor] = useControlledState(value || undefined, defaultValue, props.onChange);\n \n return {\n color,\n setColor(color) {\n if (color != null) {\n setColor(color || parseColor('#000000'));\n }\n }\n };\n}\n"],"names":[],"version":3,"file":"useColorPickerState.module.js.map"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@react-stately/color",
|
|
3
|
-
"version": "3.6.2-nightly.
|
|
3
|
+
"version": "3.6.2-nightly.4723+9b48ec5d5",
|
|
4
4
|
"description": "Spectrum UI components in React",
|
|
5
5
|
"license": "Apache-2.0",
|
|
6
6
|
"main": "dist/main.js",
|
|
@@ -22,15 +22,15 @@
|
|
|
22
22
|
"url": "https://github.com/adobe/react-spectrum"
|
|
23
23
|
},
|
|
24
24
|
"dependencies": {
|
|
25
|
-
"@internationalized/number": "3.5.4-nightly.
|
|
26
|
-
"@internationalized/string": "3.2.4-nightly.
|
|
27
|
-
"@react-aria/i18n": "3.0.0-nightly.
|
|
28
|
-
"@react-stately/form": "3.0.4-nightly.
|
|
29
|
-
"@react-stately/numberfield": "3.0.0-nightly.
|
|
30
|
-
"@react-stately/slider": "3.5.5-nightly.
|
|
31
|
-
"@react-stately/utils": "3.0.0-nightly.
|
|
32
|
-
"@react-types/color": "3.0.0-nightly.
|
|
33
|
-
"@react-types/shared": "3.0.0-nightly.
|
|
25
|
+
"@internationalized/number": "3.5.4-nightly.4723+9b48ec5d5",
|
|
26
|
+
"@internationalized/string": "3.2.4-nightly.4723+9b48ec5d5",
|
|
27
|
+
"@react-aria/i18n": "3.0.0-nightly.3011+9b48ec5d5",
|
|
28
|
+
"@react-stately/form": "3.0.4-nightly.4723+9b48ec5d5",
|
|
29
|
+
"@react-stately/numberfield": "3.0.0-nightly.3011+9b48ec5d5",
|
|
30
|
+
"@react-stately/slider": "3.5.5-nightly.4723+9b48ec5d5",
|
|
31
|
+
"@react-stately/utils": "3.0.0-nightly.3011+9b48ec5d5",
|
|
32
|
+
"@react-types/color": "3.0.0-nightly.4723+9b48ec5d5",
|
|
33
|
+
"@react-types/shared": "3.0.0-nightly.3011+9b48ec5d5",
|
|
34
34
|
"@swc/helpers": "^0.5.0"
|
|
35
35
|
},
|
|
36
36
|
"peerDependencies": {
|
|
@@ -39,5 +39,5 @@
|
|
|
39
39
|
"publishConfig": {
|
|
40
40
|
"access": "public"
|
|
41
41
|
},
|
|
42
|
-
"gitHead": "
|
|
42
|
+
"gitHead": "9b48ec5d528adeba1a96592945459726def7ba56"
|
|
43
43
|
}
|
|
@@ -23,10 +23,14 @@ export interface ColorChannelFieldState extends NumberFieldState {
|
|
|
23
23
|
*/
|
|
24
24
|
export function useColorChannelFieldState(props: ColorChannelFieldStateOptions): ColorChannelFieldState {
|
|
25
25
|
let {channel, colorSpace, locale} = props;
|
|
26
|
+
let black = useColor('#000')!;
|
|
26
27
|
let initialValue = useColor(props.value);
|
|
27
|
-
let initialDefaultValue = useColor(props.defaultValue
|
|
28
|
-
let [colorValue, setColor] = useControlledState(initialValue
|
|
29
|
-
let color = useMemo(() =>
|
|
28
|
+
let initialDefaultValue = useColor(props.defaultValue);
|
|
29
|
+
let [colorValue, setColor] = useControlledState(initialValue, initialDefaultValue ?? null, props.onChange);
|
|
30
|
+
let color = useMemo(() => {
|
|
31
|
+
let nonNullColorValue = colorValue || black;
|
|
32
|
+
return colorSpace && nonNullColorValue ? nonNullColorValue.toFormat(colorSpace) : nonNullColorValue;
|
|
33
|
+
}, [black, colorValue, colorSpace]);
|
|
30
34
|
let value = color.getChannelValue(channel);
|
|
31
35
|
let range = color.getChannelRange(channel);
|
|
32
36
|
let formatOptions = useMemo(() => color.getChannelFormatOptions(channel), [color, channel]);
|
|
@@ -34,8 +38,14 @@ export function useColorChannelFieldState(props: ColorChannelFieldStateOptions):
|
|
|
34
38
|
|
|
35
39
|
let numberFieldState = useNumberFieldState({
|
|
36
40
|
locale,
|
|
37
|
-
value: value / multiplier,
|
|
38
|
-
onChange: (v) =>
|
|
41
|
+
value: colorValue === null ? NaN : value / multiplier,
|
|
42
|
+
onChange: (v) => {
|
|
43
|
+
if (!Number.isNaN(v)) {
|
|
44
|
+
setColor(color.withChannelValue(channel, v * multiplier));
|
|
45
|
+
} else {
|
|
46
|
+
setColor(null);
|
|
47
|
+
}
|
|
48
|
+
},
|
|
39
49
|
minValue: range.minValue / multiplier,
|
|
40
50
|
maxValue: range.maxValue / multiplier,
|
|
41
51
|
step: range.step / multiplier,
|
|
@@ -4,7 +4,7 @@ import {useColor} from './useColor';
|
|
|
4
4
|
import {useControlledState} from '@react-stately/utils';
|
|
5
5
|
import {ValueBase} from '@react-types/shared';
|
|
6
6
|
|
|
7
|
-
export interface ColorPickerProps extends ValueBase<string | Color
|
|
7
|
+
export interface ColorPickerProps extends ValueBase<string | Color, Color> {}
|
|
8
8
|
|
|
9
9
|
export interface ColorPickerState {
|
|
10
10
|
/** The current color value of the color picker. */
|
|
@@ -15,13 +15,15 @@ export interface ColorPickerState {
|
|
|
15
15
|
|
|
16
16
|
export function useColorPickerState(props: ColorPickerProps): ColorPickerState {
|
|
17
17
|
let value = useColor(props.value);
|
|
18
|
-
let defaultValue = useColor(props.defaultValue || '#
|
|
18
|
+
let defaultValue = useColor(props.defaultValue || '#000000')!;
|
|
19
19
|
let [color, setColor] = useControlledState(value || undefined, defaultValue, props.onChange);
|
|
20
20
|
|
|
21
21
|
return {
|
|
22
22
|
color,
|
|
23
23
|
setColor(color) {
|
|
24
|
-
|
|
24
|
+
if (color != null) {
|
|
25
|
+
setColor(color || parseColor('#000000'));
|
|
26
|
+
}
|
|
25
27
|
}
|
|
26
28
|
};
|
|
27
29
|
}
|