carbon-react/esm/components/simple-color-picker/simple-color-picker.component.js

A library of reusable React components for easily building user interfaces.

import{jsx as e,jsxs as t}from"react/jsx-runtime";import r,{useMemo as n,useRef as o,useState as i,useImperativeHandle as l,useCallback as a}from"react";import u from"invariant";import s from"../../__internal__/utils/helpers/events/events.js";import p from"../../__internal__/utils/helpers/tags/tags.js";import c from"../../__internal__/fieldset/fieldset.component.js";import{SimpleColor as d}from"./simple-color/simple-color.component.js";import m from"../../__internal__/radio-button-mapper/radio-button-mapper.component.js";import{StyledContent as f,StyledColorOptions as y}from"./simple-color-picker.style.js";import{ValidationIcon as g}from"../../__internal__/validations/validation-icon.component.js";import{InputGroupContext as h}from"../../__internal__/input-behaviour/input-group-behaviour.component.js";import"../../style/utils/filter-styled-system-padding-props.js";import b from"../../style/utils/filter-styled-system-margin-props.js";function v(e,t,r){return t in e?Object.defineProperty(e,t,{value:r,enumerable:!0,configurable:!0,writable:!0}):e[t]=r,e}function O(e){for(var t=1;t<arguments.length;t++){var r=null!=arguments[t]?arguments[t]:{},n=Object.keys(r);"function"==typeof Object.getOwnPropertySymbols&&(n=n.concat(Object.getOwnPropertySymbols(r).filter((function(e){return Object.getOwnPropertyDescriptor(r,e).enumerable})))),n.forEach((function(t){v(e,t,r[t])}))}return e}function j(e,t){return t=null!=t?t:{},Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(t)):function(e){var t=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);t.push.apply(t,r)}return t}(Object(t)).forEach((function(r){Object.defineProperty(e,r,Object.getOwnPropertyDescriptor(t,r))})),e}const w=r.forwardRef(((v,w)=>{const{children:_,error:P,warning:D,info:K,name:C,legend:E,onChange:S,onBlur:k,onKeyDown:x,value:A,maxWidth:L=300,childWidth:M=58,validationOnLegend:W,required:R}=v,q=function(e,t){if(null==e)return{};var r,n,o=function(e,t){if(null==e)return{};var r,n,o={},i=Object.keys(e);for(n=0;n<i.length;n++)r=i[n],t.indexOf(r)>=0||(o[r]=e[r]);return o}(e,t);if(Object.getOwnPropertySymbols){var i=Object.getOwnPropertySymbols(e);for(n=0;n<i.length;n++)r=i[n],t.indexOf(r)>=0||Object.prototype.propertyIsEnumerable.call(e,r)&&(o[r]=e[r])}return o}(v,["children","error","warning","info","name","legend","onChange","onBlur","onKeyDown","value","maxWidth","childWidth","validationOnLegend","required"]),B=n((()=>!r.Children.toArray(_).find((e=>"string"==typeof e||r.isValidElement(e)&&"SimpleColor"!==e.type.displayName))),[_]);u(B,`SimpleColorPicker accepts only children of type \`${d.displayName}\`.`);const I=n((()=>r.Children.toArray(_).filter((e=>r.isValidElement(e)))),[_]),N=o(null),[U,V]=i(null),F=Math.floor(+L/+M),T=Math.ceil((null==I?void 0:I.length)/F);let $=F*T-(null==I?void 0:I.length),z=1,G=1;const H=o([]),J=I.map(((e,t)=>{const n=1!==z;let o,i,l=!1;z+1===T&&$-F<0?(l=!0,$+=1):z+1!==T&&z!==T&&T>1&&(l=!0),G===F&&(G=0,z+=1),n&&(o=t-F),l&&(i=F+t);const a={ref:e=>{H.current[t]=e},"data-up":n,"data-down":l,"data-item-up":o,"data-item-down":i,required:R};return G+=1,r.cloneElement(e,a)}));l(w,(()=>({gridItemRefs:H.current})),[H]);const Q=a((e=>J.findIndex((t=>e.getAttribute("value")===t.props.value))),[J]),X=a((e=>{if(x&&x(e),![s.isLeftKey(e),s.isUpKey(e),s.isRightKey(e),s.isDownKey(e)].includes(!0))return;e.preventDefault();let t=null;const r=e.target;if(s.isUpKey(e)){if("true"!==r.getAttribute("data-up"))return;t=+r.getAttribute("data-item-up")}else if(s.isDownKey(e)){if("true"!==r.getAttribute("data-down"))return;t=+r.getAttribute("data-item-down")}if((s.isLeftKey(e)||s.isRightKey(e))&&(t=s.isLeftKey(e)?Q(r)-1:Q(r)+1,t<0?t=J.length-1:t>J.length-1&&(t=0)),null!==t){const e=H.current[t];null==e||e.focus(),null==e||e.click()}}),[x,J,Q]),Y=e=>{e.preventDefault(),setTimeout((()=>{var t;const r=!(null==H||null===(t=H.current)||void 0===t?void 0:t.find((e=>e===document.activeElement)));k&&r&&k(e)}),5)},Z=e=>{null!==U&&U===e.target?e.preventDefault():null!==U?(e.preventDefault(),V(e.target)):V(e.target)},ee={error:P,warning:D,info:K};return e(c,j(O({role:"radiogroup",legend:E,isRequired:R},W&&ee,p("simple-color-picker",v),b(q)),{children:t(f,{children:[e(h.Consumer,{children:({onMouseEnter:t,onMouseLeave:r})=>e(y,j(O({maxWidth:L,childWidth:M,ref:N,onMouseEnter:t,onMouseLeave:r},ee),{children:e(m,{name:C,value:A,onChange:S,onMouseDown:Z,onKeyDown:X,onBlur:Y,children:J})}))}),!W&&e(g,j(O({},ee),{tooltipFlipOverrides:["top","bottom"]}))]})}))}));w.displayName="SimpleColorPicker";export{w as SimpleColorPicker,w as default};