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) 4.12 kB
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react"),n=require("primereact/api"),t=require("primereact/componentbase"),i=require("primereact/hooks"),r=require("primereact/utils");function o(e){if(e&&e.__esModule)return e;var n=Object.create(null);return e&&Object.keys(e).forEach((function(t){if("default"!==t){var i=Object.getOwnPropertyDescriptor(e,t);Object.defineProperty(n,t,i.get?i:{enumerable:!0,get:function(){return e[t]}})}})),n.default=e,Object.freeze(n)}var l=o(e),d=t.ComponentBase.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 r.classNames("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}}}}}),a=l.forwardRef((function(e,o){var a=i.useMergeProps(),s=l.useContext(n.PrimeReactContext),p=d.getProps(e,s),c=d.setMetaData({props:p}),v=c.ptm,u=c.cx,f=c.sx;t.useHandleStyle(d.css.styles,c.isUnstyled,{name:"divider"});var y=l.useRef(null),g="horizontal"===p.layout,m="vertical"===p.layout;l.useImperativeHandle(o,(function(){return{props:p,getElement:function(){return y.current}}}));var h=a({ref:y,style:f("root"),className:r.classNames(p.className,u("root",{horizontal:g,vertical:m})),"aria-orientation":p.layout,role:"separator"},d.getOtherProps(p),v("root")),b=a({className:u("content")},v("content"));return l.createElement("div",h,l.createElement("div",b,p.children))}));a.displayName="Divider",exports.Divider=a;