carbon-react
Version:
A library of reusable React components for easily building user interfaces.
2 lines (1 loc) • 4.39 kB
JavaScript
import{jsxs as e,jsx as r}from"react/jsx-runtime";import{useState as o,useRef as t,useEffect as l,useCallback as n}from"react";import{StyledAdvancedColorPickerWrapper as i,HiddenCurrentColorList as a,DialogStyle as c,StyledAdvancedColorPickerPreview as s}from"./advanced-color-picker.style.js";import{SimpleColorPicker as p}from"../simple-color-picker/simple-color-picker.component.js";import{SimpleColor as u}from"../simple-color-picker/simple-color/simple-color.component.js";import d from"../../__internal__/utils/helpers/events/events.js";import"../../style/utils/filter-styled-system-padding-props.js";import m from"../../style/utils/filter-styled-system-margin-props.js";import f from"../../__internal__/utils/helpers/guid/index.js";import b from"../../hooks/__internal__/useLocale/useLocale.js";import"../definition-list/dl.component.js";import y from"../definition-list/dt/dt.component.js";import v from"../definition-list/dd/dd.component.js";import O from"../../__internal__/utils/helpers/tags/tags.js";import j from"./advanced-color-picker-cell.style.js";function g(e,r,o){return r in e?Object.defineProperty(e,r,{value:o,enumerable:!0,configurable:!0,writable:!0}):e[r]=o,e}const h=h=>{var{"aria-describedby":k,"aria-label":C,"aria-labelledby":P,availableColors:_,name:w,onOpen:D,onClose:x,onChange:E,onBlur:S,open:K=!1,role:F,selectedColor:R,restoreFocusOnClose:B=!0}=h,I=function(e,r){if(null==e)return{};var o,t,l=function(e,r){if(null==e)return{};var o,t,l={},n=Object.keys(e);for(t=0;t<n.length;t++)o=n[t],r.indexOf(o)>=0||(l[o]=e[o]);return l}(e,r);if(Object.getOwnPropertySymbols){var n=Object.getOwnPropertySymbols(e);for(t=0;t<n.length;t++)o=n[t],r.indexOf(o)>=0||Object.prototype.propertyIsEnumerable.call(e,o)&&(l[o]=e[o])}return l}(h,["aria-describedby","aria-label","aria-labelledby","availableColors","name","onOpen","onClose","onChange","onBlur","open","role","selectedColor","restoreFocusOnClose"]);const[L,T]=o(),[z,A]=o(null),q=t(f()),G=b(),H=t(null),J=_.map((({value:e,label:r},o)=>({value:e,label:r,getRef:()=>H.current?H.current.gridItemRefs[o]:null}))),M=()=>{var e;return(null===(e=_.find((e=>e.value===R)))||void 0===e?void 0:e.label)||R};l((()=>{if(L||K){const e=null==J?void 0:J.find((e=>R===e.value));e&&A(e.getRef())}}),[J,R,L,K]);const N=n(((e,r)=>{"Tab"===e.key&&(e.shiftKey?document.activeElement===r&&z&&(z.focus(),e.preventDefault()):document.activeElement===z&&(null==r||r.focus(),e.preventDefault()))}),[z]),Q=n((e=>{T(!0),D&&D(e)}),[D]),U=n((e=>{T(!1),x&&x(e)}),[x]),V=n((e=>{const r=null==J?void 0:J.find((r=>e.target.value===r.value));r&&A(r.getRef()),E&&E(e)}),[E,J]),W=n((e=>{(d.isEnterKey(e)||d.isSpaceKey(e))&&(e.preventDefault(),Q(e))}),[Q]),X=n((e=>{(d.isEnterKey(e)||d.isSpaceKey(e))&&(e.preventDefault(),U(e))}),[U]),Y=n((e=>{S&&S(e)}),[S]);return e(i,(Z=function(e){for(var r=1;r<arguments.length;r++){var o=null!=arguments[r]?arguments[r]:{},t=Object.keys(o);"function"==typeof Object.getOwnPropertySymbols&&(t=t.concat(Object.getOwnPropertySymbols(o).filter((function(e){return Object.getOwnPropertyDescriptor(o,e).enumerable})))),t.forEach((function(r){g(e,r,o[r])}))}return e}({m:"15px auto auto 15px"},m(I),O("advanced-color-picker",I)),$=null!=($={children:[r(j,{"data-element":"color-picker-cell","aria-label":G.advancedColorPicker.ariaLabel(),"aria-describedby":q.current,onClick:Q,onKeyDown:W,color:R,tabIndex:0}),e(a,{id:q.current,"data-element":"current-color-description",children:[r(y,{children:G.advancedColorPicker.currentColorDescriptionTerm(M())}),r(v,{children:G.advancedColorPicker.currentColorAssigned(M())})]}),e(c,{"aria-describedby":k,"aria-label":C,"aria-labelledby":P,open:L||K,size:"auto",onCancel:U,bespokeFocusTrap:N,focusFirstElement:z,role:F,restoreFocusOnClose:B,children:[r(s,{"data-element":"color-picker-preview",color:R}),r(p,{name:w,legend:"",onChange:V,onBlur:Y,onKeyDown:X,ref:H,value:R,children:null==J?void 0:J.map((({value:e,label:o})=>r(u,{value:e,"aria-label":o,id:e,checked:e===R},e)))})]})]})?$:{},Object.getOwnPropertyDescriptors?Object.defineProperties(Z,Object.getOwnPropertyDescriptors($)):function(e){var r=Object.keys(e);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);r.push.apply(r,o)}return r}(Object($)).forEach((function(e){Object.defineProperty(Z,e,Object.getOwnPropertyDescriptor($,e))})),Z));var Z,$};export{h as AdvancedColorPicker,h as default};