@react-spectrum/s2
Version:
Spectrum 2 UI components in React
105 lines (97 loc) • 5.46 kB
JavaScript
import "./ColorSwatch.css";
import {useSpectrumContextProps as $5ce63c423902f47d$export$764f6146fadd77f7} from "../icons/useSpectrumContextProps.mjs";
import {jsx as $b2Wh1$jsx} from "react/jsx-runtime";
import {parseColor as $b2Wh1$parseColor, ColorSwatch as $b2Wh1$ColorSwatch} from "react-aria-components";
import {createContext as $b2Wh1$createContext, forwardRef as $b2Wh1$forwardRef, useContext as $b2Wh1$useContext, useMemo as $b2Wh1$useMemo} from "react";
import {useDOMRef as $b2Wh1$useDOMRef} from "@react-spectrum/utils";
/*
* Copyright 2024 Adobe. All rights reserved.
* This file is licensed to you under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License. You may obtain a copy
* of the License at http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software distributed under
* the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
* OF ANY KIND, either express or implied. See the License for the specific language
* governing permissions and limitations under the License.
*/
const $cd9e1720baab3945$export$83cc445538396800 = /*#__PURE__*/ (0, $b2Wh1$createContext)(null);
const $cd9e1720baab3945$export$2d9e1fe7b5c0ceb6 = /*#__PURE__*/ (0, $b2Wh1$createContext)(null);
const $cd9e1720baab3945$export$cae13e90592f246a = /*#__PURE__*/ (0, $b2Wh1$forwardRef)(function ColorSwatch(props, ref) {
[props, ref] = (0, $5ce63c423902f47d$export$764f6146fadd77f7)(props, ref, $cd9e1720baab3945$export$83cc445538396800);
let domRef = (0, $b2Wh1$useDOMRef)(ref);
let ctx = (0, $b2Wh1$useContext)($cd9e1720baab3945$export$2d9e1fe7b5c0ceb6);
let { size: size = ctx?.size || 'M', rounding: rounding = ctx?.rounding || 'default', color: color } = props;
let nonNullValue = color || '#fff0';
color = (0, $b2Wh1$useMemo)(()=>typeof nonNullValue === 'string' ? (0, $b2Wh1$parseColor)(nonNullValue) : nonNullValue, [
nonNullValue
]);
let swatch = /*#__PURE__*/ (0, $b2Wh1$jsx)((0, $b2Wh1$ColorSwatch), {
...props,
color: color,
ref: domRef,
style: ({ color: color })=>({
// TODO: should there be a distinction between transparent and no value (e.g. null)?
background: color.getChannelValue('alpha') > 0 ? `linear-gradient(${color}, ${color}), repeating-conic-gradient(#e6e6e6 0% 25%, white 0% 50%) 0% 50% / 16px 16px` : 'linear-gradient(to bottom right, transparent calc(50% - 2px), var(--slash-color) calc(50% - 2px) calc(50% + 2px), transparent calc(50% + 2px)) no-repeat'
}),
className: function anonymous(props, overrides) {
let rules = " ";
let width = false;
let height = false;
let matches = (overrides || '').matchAll(/(?:^|\s)(J|G|I|H|_u|_v|_s|__A|_d|_J|z|y|B|A|_P|_9|W|_l|_A|_z|Z|N|L|F|M|K)[^\s]+/g);
for (let p of matches){
if (p[1] === "Z") width = true;
if (p[1] === "F") height = true;
rules += p[0];
}
if (props.size === "L") {
if (!width) rules += ' Zw91';
} else if (props.size === "M") {
if (!width) rules += ' ZC91';
} else if (props.size === "S") {
if (!width) rules += ' Zo91';
} else if (props.size === "XS") {
if (!width) rules += ' Zu91';
}
if (props.size === "L") {
if (!height) rules += ' Fv91';
} else if (props.size === "M") {
if (!height) rules += ' Fx91';
} else if (props.size === "S") {
if (!height) rules += ' Fp91';
} else if (props.size === "XS") {
if (!height) rules += ' Ft91';
}
if (props.rounding === "full") rules += ' og91';
else if (props.rounding === "none") rules += ' od91';
else if (props.rounding === "default") rules += ' oa91';
if (props.rounding === "full") rules += ' ng91';
else if (props.rounding === "none") rules += ' nd91';
else if (props.rounding === "default") rules += ' na91';
if (props.rounding === "full") rules += ' kg91';
else if (props.rounding === "none") rules += ' kd91';
else if (props.rounding === "default") rules += ' ka91';
if (props.rounding === "full") rules += ' jg91';
else if (props.rounding === "none") rules += ' jd91';
else if (props.rounding === "default") rules += ' ja91';
rules += ' iz91';
rules += ' _kb91';
rules += ' hb91';
rules += ' mb91';
rules += ' lb91';
rules += ' _jf91';
rules += ' _oa91';
rules += ' _yb91';
rules += ' -_8LZfRc-pq91';
return rules;
}({
size: size,
rounding: rounding
}, props.styles)
});
// ColorSwatchPicker needs to wrap the swatch in a ListBoxItem.
if (ctx) return ctx.useWrapper(swatch, color, rounding);
return swatch;
});
export {$cd9e1720baab3945$export$83cc445538396800 as ColorSwatchContext, $cd9e1720baab3945$export$2d9e1fe7b5c0ceb6 as InternalColorSwatchContext, $cd9e1720baab3945$export$cae13e90592f246a as ColorSwatch};
//# sourceMappingURL=ColorSwatch.mjs.map