@lanaco/lnc-react-ui
Version:
React component library
10 lines (9 loc) • 1.53 kB
JavaScript
;const w=require("react/jsx-runtime"),d=require("react"),y=require("./emotion-styled.browser.esm-Cle7tAM9.cjs"),r=require("./index-BPVoEhTF.cjs"),f={Row:"row",RowReverse:"row-reverse",Column:"column",ColumnReverse:"column-reverse"},m={NoWrap:"nowrap",Wrap:"wrap",WrapReverse:"wrap-reverse"},x={Start:"flex-start",Center:"center",End:"flex-end",SpaceAround:"space-around",SpaceBetween:"space-between",SpaceEvenly:"space-evenly"},S={Start:"flex-start",Center:"center",Stretch:"stretch",End:"flex-end",Baseline:"baseline"},g=y.newStyled.div`
display: flex;
flex-direction: ${e=>f[e.direction]};
flex-wrap: ${e=>m[e.wrap]};
justify-content: ${e=>x[e.justifyContent]};
align-items: ${e=>S[e.alignItems]};
column-gap: ${e=>e.columnGap?e.columnGap:e.gap};
row-gap: ${e=>e.rowGap?e.rowGap:e.gap};
`,t=d.forwardRef((e,o)=>{const{className:n="",children:a,direction:s="Row",wrap:p="NoWrap",justifyContent:c="Start",alignItems:i="Stretch",gap:l="0",...u}=e;return w.jsx(g,{className:"lnc-flexbox-container "+(n||""),ref:o,wrap:p,gap:l,alignItems:i,direction:s,justifyContent:c,...u,children:a})});t.propTypes={rowGap:r.PropTypes.string,columnGap:r.PropTypes.string,gap:r.PropTypes.string,direction:r.PropTypes.oneOf(["Row","RowReverse","Column","ColumnReverse"]),wrap:r.PropTypes.oneOf(["NoWrap","Wrap","WrapReverse"]),justifyContent:r.PropTypes.oneOf(["Start","Center","End","SpaceAround","SpaceBetween","SpaceEvenly"]),alignItems:r.PropTypes.oneOf(["Start","Center","Stretch","End","Baseline"])};module.exports=t;