carbon-react
Version:
A library of reusable React components for easily building user interfaces.
2 lines (1 loc) • 4.26 kB
JavaScript
import{jsxs as e,jsx as t}from"react/jsx-runtime";import n,{useState as r,useMemo as o}from"react";import i from"../../hooks/__internal__/useLocale/useLocale.js";import l from"../../__internal__/utils/helpers/tags/tags.js";import{StyledPod as a,StyledBlock as d,StyledContent as s,StyledHeader as c,StyledTitle as u,StyledSubtitle as p,StyledFooter as f,StyledActionsContainer as b,StyledUndoButton as y,StyledEditAction as m,StyledDeleteButton as O}from"./pod.style.js";import h from"../icon/icon.component.js";import g from"../../__internal__/utils/helpers/events/events.js";function v(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}function E(e){for(var t=1;t<arguments.length;t++){var n=null!=arguments[t]?arguments[t]:{},r=Object.keys(n);"function"==typeof Object.getOwnPropertySymbols&&(r=r.concat(Object.getOwnPropertySymbols(n).filter((function(e){return Object.getOwnPropertyDescriptor(n,e).enumerable})))),r.forEach((function(t){v(e,t,n[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 n=Object.getOwnPropertySymbols(e);t.push.apply(t,n)}return t}(Object(t)).forEach((function(n){Object.defineProperty(e,n,Object.getOwnPropertyDescriptor(t,n))})),e}const B=n.forwardRef(((n,v)=>{var{alignTitle:B="left",border:w=!0,children:P,displayEditButtonOnHover:D,editContentFullWidth:_,footer:k,height:F,internalEditButton:z,onDelete:C,onEdit:H,onUndo:x,size:M="medium",softDelete:S,subtitle:T,title:L,triggerEditOnContent:K,variant:W="primary"}=n,I=function(e,t){if(null==e)return{};var n,r,o=function(e,t){if(null==e)return{};var n,r,o={},i=Object.keys(e);for(r=0;r<i.length;r++)n=i[r],t.indexOf(n)>=0||(o[n]=e[n]);return o}(e,t);if(Object.getOwnPropertySymbols){var i=Object.getOwnPropertySymbols(e);for(r=0;r<i.length;r++)n=i[r],t.indexOf(n)>=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(o[n]=e[n])}return o}(n,["alignTitle","border","children","displayEditButtonOnHover","editContentFullWidth","footer","height","internalEditButton","onDelete","onEdit","onUndo","size","softDelete","subtitle","title","triggerEditOnContent","variant"]);const[U,N]=r(!1),[R,$]=r(!1),[q,A]=r(!1),[G,J]=r(!1),[Q,V]=r(!1),[X,Y]=r(!1),Z=i(),ee=o((()=>!(!H||!K&&!D)),[D,H,K]),te=o((()=>!!(H||C||x)),[H,C,x]),ne=e=>t=>{g.isKeyboardEvent(t)&&g.isEventType(t,"keydown")&&!g.isEnterKey(t)||(t.preventDefault(),e(t))},re={onMouseEnter:()=>$(!0),onMouseLeave:()=>$(!1),onFocus:()=>N(!0),onBlur:()=>N(!1),onClick:H&&ne(H),onKeyDown:H&&ne(H)};return e(a,j(E({alignTitle:B,internalEditButton:z,height:"number"==typeof F?`${F}px`:F,ref:v},I,l("pod",I)),{children:[e(d,j(E({"data-element":"block","data-role":"pod-block",contentTriggersEdit:ee,hasButtons:te,fullWidth:_,internalEditButton:z,isFocused:U||q,isHovered:R||G,noBorder:!w,variant:W,softDelete:S},ee&&j(E({},re),{tabIndex:0})),{children:[e(s,{"data-element":"content",size:M,children:[L&&e(c,{"data-role":"pod-content-header",alignTitle:B,internalEditButton:z,size:M,children:["string"==typeof L?t(u,{"data-element":"title",children:L}):L,"string"==typeof T?t(p,{"data-element":"subtitle",children:T}):T]}),P]}),k&&t(f,{"data-element":"footer",size:M,variant:W,softDelete:S,children:k})]})),te&&e(b,{"data-element":"action-button-container","data-role":"action-button-container",internalEditButton:z,children:[S&&x&&t(y,{"aria-label":Z.pod.undo(),onMouseEnter:()=>Y(!0),onMouseLeave:()=>Y(!1),onFocus:()=>V(!0),onBlur:()=>V(!1),"data-element":"undo",internalEditButton:z,isFocused:Q,isHovered:X,noBorder:!w,size:M,variant:W,onClick:ne(x),children:t(h,{type:"undo"})}),!S&&H&&t(m,j(E({},re),{"aria-label":Z.actions.edit(),"data-element":"edit",displayOnlyOnHover:D,internalEditButton:z,isFocused:U,isHovered:R,noBorder:!w,size:M,variant:W,children:t(h,{type:"edit"})})),!S&&C&&t(O,{"aria-label":Z.actions.delete(),"data-element":"delete",onMouseEnter:()=>J(!0),onMouseLeave:()=>J(!1),onFocus:()=>A(!0),onBlur:()=>A(!1),internalEditButton:z,isFocused:q,isHovered:G,noBorder:!w,size:M,variant:W,onClick:ne(C),children:t(h,{type:"delete"})})]})]}))}));B.displayName="Pod";export{B as default};