carbon-react
Version:
A library of reusable React components for easily building user interfaces.
2 lines (1 loc) • 3.21 kB
JavaScript
;Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),t=require("react"),r=require("react-transition-group"),n=require("./picklist-group.style.js"),o=require("../__internal__/duelling-picklist.context.js"),l=require("../../../__internal__/utils/helpers/events/events.js");function i(e){return e&&e.__esModule?e:{default:e}}var u=i(t);function s(e,t,r){return t in e?Object.defineProperty(e,t,{value:r,enumerable:!0,configurable:!0,writable:!0}):e[t]=r,e}const c=u.default.forwardRef(((i,c)=>{var{title:a,children:p,type:d,onChange:f,index:y,listIndex:b,isLastGroup:O}=i,g=function(e,t){if(null==e)return{};var r,n,o=function(e,t){if(null==e)return{};var r,n,o={},l=Object.keys(e);for(n=0;n<l.length;n++)r=l[n],t.indexOf(r)>=0||(o[r]=e[r]);return o}(e,t);if(Object.getOwnPropertySymbols){var l=Object.getOwnPropertySymbols(e);for(n=0;n<l.length;n++)r=l[n],t.indexOf(r)>=0||Object.prototype.propertyIsEnumerable.call(e,r)&&(o[r]=e[r])}return o}(i,["title","children","type","onChange","index","listIndex","isLastGroup"]);const{setElementToFocus:j,elementToFocus:m}=t.useContext(o.default),[x,h]=t.useState(!1),v=u.default.useRef(null),P=u.default.Children.toArray(p),k=t.useCallback((()=>{f(),j(y,b)}),[y,b,f,j]),S=t.useCallback((e=>{(l.default.isEnterKey(e)||l.default.isSpaceKey(e))&&(e.preventDefault(),f(),j(y,b))}),[y,b,f,j]),w=t.useMemo((()=>Array.from({length:P.length},(()=>u.default.createRef()))),[P.length]),_=u.default.Children.map(p,((e,t)=>{if(!u.default.isValidElement(e))return e;const r={ref:w[t],index:t,listIndex:b,groupIndex:y,isLastGroup:O,isLastItem:t===P.length-1};return u.default.cloneElement(e,r)}));return t.useEffect((()=>{var e;m.groupIndex===y&&m.listIndex===b&&void 0!==m.itemIndex&&(null===(e=w[m.itemIndex].current)||void 0===e||e.focus(),j())}),[m,y,O,b,w,j]),e.jsx(r.CSSTransition,(G=function(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){s(e,t,r[t])}))}return e}({timeout:{appear:500,enter:300,exit:0},nodeRef:v,classNames:"picklist-group"},g,"add"===d?{enter:!1}:{}),I=null!=(I={children:e.jsx(n.StyledGroupWrapper,{ref:v,highlighted:x,type:d,children:e.jsxs(n.StyledPicklistGroupUl,{children:[e.jsxs(n.StyledPicklistGroup,{onKeyDown:S,"data-element":"picklist-group",children:[a,e.jsx(n.StyledGroupButton,{"data-role":"picklist-group-button",buttonType:"secondary",destructive:"remove"===d,iconType:d,onClick:k,onMouseEnter:()=>h(!0),onMouseLeave:()=>h(!1),onFocus:()=>h(!0),onBlur:()=>h(!1),ref:c})]}),e.jsx(r.TransitionGroup,{component:null,children:_})]})})})?I:{},Object.getOwnPropertyDescriptors?Object.defineProperties(G,Object.getOwnPropertyDescriptors(I)):function(e){var t=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);t.push.apply(t,r)}return t}(Object(I)).forEach((function(e){Object.defineProperty(G,e,Object.getOwnPropertyDescriptor(I,e))})),G));var G,I}));c.displayName="PicklistGroup",exports.PicklistGroup=c,exports.default=c;