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

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

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