@gsretail.com/gui-core
Version:
A skeleton to create your own React component library using Rollup, TypeScript, Sass and Storybook
2 lines (1 loc) • 1.97 kB
JavaScript
import{__rest as e,__assign as l}from"../../../../../node_modules/tslib/tslib.es6.js";import t,{useRef as o,useState as n,useEffect as a}from"react";import{Box as r,Grid as i,Button as c}from"@mui/material";import{GuiIcon as m}from"../../../../../node_modules/@gsretail.com/gui-icons/dist/index.js";import"@mui/material/styles";import s from"../../../../../assets/theme/basicStyle.js";import{StyledPanel as d}from"./styled.js";var p=function(p){var f=p.padding,u=p.renderComponent,b=p.children,g=p.disableFold,E=void 0!==g&&g,h=p.labelMinWidth,y=p.labelMaxWidth,v=p.labelColor,x=p.textAlign,C=p.columnSpacing;p.verticalMove;var M=p.isCollapse,w=void 0===M||M,W=p.onFold,A=e(p,["padding","renderComponent","children","disableFold","labelMinWidth","labelMaxWidth","labelColor","textAlign","columnSpacing","verticalMove","isCollapse","onFold"]),S=o(!1),j=n(!1),F=j[0],N=j[1],_=n(!1),k=_[0];_[1],a((function(){S.current&&W&&W(F)}),[F]),a((function(){!w||!k&&F?N(!1):(!w||k&&!F)&&N(!0)}),[k]),a((function(){S.current=!0}),[]);var B=function(){N(!F)};return t.createElement(d,l({id:"page_panel",textAlign:x,labelMinWidth:h,labelMaxWidth:y,labelColor:v,style:{padding:F?"unset":"compact"===f?0:"number"==typeof f?f:null}},A),t.createElement(r,{style:l(l({},F&&{display:"none"}),{width:"100%"})},u&&u.header&&t.createElement(r,{mb:1},t.createElement(i,{container:!0,style:{alignItems:"center",rowGap:"8px"}},u.header)),t.createElement(i,{container:!0,rowSpacing:1,columnSpacing:C||6},b),u&&u.footer&&t.createElement(r,{mt:1},t.createElement(i,{container:!0,style:{alignItems:"center",rowGap:"8px"}},u.footer))),!E&&(F?t.createElement(r,{className:"fold on"},t.createElement(c,{className:"foldBtn",onClick:B,disableRipple:!0},t.createElement(m,{name:"ArrowTop",color:s.color.grey600}))):t.createElement(r,{className:"fold off"},t.createElement(c,{className:"foldBtn",onClick:B,disableRipple:!0},t.createElement(m,{name:"ArrowTop",color:s.color.grey600})))))};export{p as default};