UNPKG

primereact

Version:

PrimeReact is an open source UI library for React featuring a rich set of 90+ components, a theme designer, various theme alternatives such as Material, Bootstrap, Tailwind, premium templates and professional support. In addition, it integrates with Prime

2 lines (1 loc) 3.78 kB
import*as e from"react";import{PrimeReactContext as n}from"primereact/api";import{ComponentBase as t,useHandleStyle as i}from"primereact/componentbase";import{useMergeProps as r}from"primereact/hooks";import{classNames as o}from"primereact/utils";var l=t.extend({defaultProps:{__TYPE:"Divider",align:null,layout:"horizontal",type:"solid",style:null,className:null,children:void 0},css:{classes:{root:function(e){var n=e.props,t=e.horizontal,i=e.vertical;return o("p-divider p-component p-divider-".concat(n.layout," p-divider-").concat(n.type),{"p-divider-left":t&&(!n.align||"left"===n.align),"p-divider-right":t&&"right"===n.align,"p-divider-center":t&&"center"===n.align||i&&(!n.align||"center"===n.align),"p-divider-top":i&&"top"===n.align,"p-divider-bottom":i&&"bottom"===n.align},n.className)},content:"p-divider-content"},styles:'\n@layer primereact {\n .p-divider-horizontal {\n display: flex;\n width: 100%;\n position: relative;\n align-items: center;\n }\n \n .p-divider-horizontal:before {\n position: absolute;\n display: block;\n top: 50%;\n left: 0;\n width: 100%;\n content: "";\n }\n \n .p-divider-horizontal.p-divider-left {\n justify-content: flex-start;\n }\n \n .p-divider-horizontal.p-divider-right {\n justify-content: flex-end;\n }\n \n .p-divider-horizontal.p-divider-center {\n justify-content: center;\n }\n \n .p-divider-content {\n z-index: 1;\n }\n \n .p-divider-vertical {\n min-height: 100%;\n margin: 0 1rem;\n display: flex;\n position: relative;\n justify-content: center;\n }\n \n .p-divider-vertical:before {\n position: absolute;\n display: block;\n top: 0;\n left: 50%;\n height: 100%;\n content: "";\n }\n \n .p-divider-vertical.p-divider-top {\n align-items: flex-start;\n }\n \n .p-divider-vertical.p-divider-center {\n align-items: center;\n }\n \n .p-divider-vertical.p-divider-bottom {\n align-items: flex-end;\n }\n \n .p-divider-solid.p-divider-horizontal:before {\n border-top-style: solid;\n }\n \n .p-divider-solid.p-divider-vertical:before {\n border-left-style: solid;\n }\n \n .p-divider-dashed.p-divider-horizontal:before {\n border-top-style: dashed;\n }\n \n .p-divider-dashed.p-divider-vertical:before {\n border-left-style: dashed;\n }\n \n .p-divider-dotted.p-divider-horizontal:before {\n border-top-style: dotted;\n }\n \n .p-divider-dotted.p-divider-horizontal:before {\n border-left-style: dotted;\n }\n}\n',inlineStyles:{root:function(e){var n=e.props;return{justifyContent:"horizontal"===n.layout?"center"===n.align||null===n.align?"center":"left"===n.align?"flex-start":"right"===n.align?"flex-end":null:null,alignItems:"vertical"===n.layout?"center"===n.align||null===n.align?"center":"top"===n.align?"flex-start":"bottom"===n.align?"flex-end":null:null}}}}}),d=e.forwardRef((function(t,d){var a=r(),p=e.useContext(n),s=l.getProps(t,p),c=l.setMetaData({props:s}),v=c.ptm,f=c.cx,m=c.sx;i(l.css.styles,c.isUnstyled,{name:"divider"});var u=e.useRef(null),g="horizontal"===s.layout,h="vertical"===s.layout;e.useImperativeHandle(d,(function(){return{props:s,getElement:function(){return u.current}}}));var y=a({ref:u,style:m("root"),className:o(s.className,f("root",{horizontal:g,vertical:h})),"aria-orientation":s.layout,role:"separator"},l.getOtherProps(s),v("root")),b=a({className:f("content")},v("content"));return e.createElement("div",y,e.createElement("div",b,s.children))}));d.displayName="Divider";export{d as Divider};