carbon-react
Version:
A library of reusable React components for easily building user interfaces.
2 lines (1 loc) • 1.48 kB
JavaScript
import{jsxs as e,jsx as t}from"react/jsx-runtime";import r,{useContext as n,useMemo as i,useCallback as l,useEffect as o}from"react";import{TransitionGroup as s}from"react-transition-group";import{StyledPicklist as c,StyledEmptyContainer as d}from"./picklist.style.js";import a from"../__internal__/duelling-picklist.context.js";import m from"../../../__internal__/utils/helpers/events/events.js";import{PicklistGroup as p}from"../picklist-group/picklist-group.component.js";const u=({disabled:u,children:f,placeholder:h,index:g})=>{const{elementToFocus:x,setElementToFocus:v}=n(a),y=i((()=>!r.Children.toArray(f).length),[f]),_=r.Children.toArray(f),k=i((()=>Array.from({length:_.length},(()=>r.createRef()))),[_.length]),I=l(((e,t)=>{var r;e.preventDefault(),null===(r=k[t].current)||void 0===r||r.focus()}),[k]),j=l((e=>{m.isHomeKey(e)?I(e,0):m.isEndKey(e)&&I(e,k.length-1)}),[I,k]),E=_.map(((e,t)=>{if(!r.isValidElement(e))return e;const n={ref:k[t],disabled:u,index:t,listIndex:g,isLastGroup:e.type===p&&t===_.length-1};return r.cloneElement(e,n)}));return o((()=>{if(void 0===x.groupIndex&&x.listIndex===g&&void 0!==x.itemIndex){var e;const t=null===(e=k[x.itemIndex])||void 0===e?void 0:e.current;t?(t.focus(),v()):v(0,0===g?1:0,x.groupIndex)}}),[x,g,k,v]),e(c,{"data-element":"picklist","data-role":"picklist",scrollVariant:"light",onKeyDown:j,children:[y&&t(d,{children:h}),t(s,{component:null,children:E})]})};u.displayName="Picklist";export{u as Picklist,u as default};