pcm-shared-components 0.0.75 → 0.0.78
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/components/Layout/SimpleTab/components/TabPanel.js +31 -0
- package/dist/components/Layout/SimpleTab/index.js +126 -0
- package/dist/components/Layout/TwoColumnDisplay/index.js +9 -5
- package/dist/components/Layout/TwoColumnDisplay/style.css +37 -0
- package/dist/index.js +2 -1
- package/dist/styles/tailwind.css +1 -1
- package/package.json +1 -1
- package/dist/components/Layout/TwoColumnDisplay/index copy.js +0 -55
|
@@ -0,0 +1,31 @@
|
|
|
1
|
+
function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
|
|
2
|
+
|
|
3
|
+
import React from 'react';
|
|
4
|
+
import PropTypes from 'prop-types'; //Custom tab panel allow me to specify the styles needed to ensure I can hide the overflow or else I'm having a hard time getting the panel to work without a scroll band
|
|
5
|
+
|
|
6
|
+
const TabPanel = props => {
|
|
7
|
+
const {
|
|
8
|
+
children,
|
|
9
|
+
value,
|
|
10
|
+
index,
|
|
11
|
+
...other
|
|
12
|
+
} = props;
|
|
13
|
+
return /*#__PURE__*/React.createElement("div", _extends({
|
|
14
|
+
role: "tabpanel",
|
|
15
|
+
hidden: value !== index,
|
|
16
|
+
id: `scrollable-auto-tabpanel-${index}`,
|
|
17
|
+
"aria-labelledby": `scrollable-auto-tab-${index}`
|
|
18
|
+
}, other, {
|
|
19
|
+
className: "w-full h-full overflow-hidden",
|
|
20
|
+
style: {}
|
|
21
|
+
}), value === index && /*#__PURE__*/React.createElement("div", {
|
|
22
|
+
className: "w-full h-full"
|
|
23
|
+
}, children));
|
|
24
|
+
};
|
|
25
|
+
|
|
26
|
+
export default TabPanel;
|
|
27
|
+
TabPanel.propTypes = {
|
|
28
|
+
children: PropTypes.node,
|
|
29
|
+
index: PropTypes.any.isRequired,
|
|
30
|
+
value: PropTypes.any.isRequired
|
|
31
|
+
};
|
|
@@ -0,0 +1,126 @@
|
|
|
1
|
+
function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
|
|
2
|
+
|
|
3
|
+
import React, { useState } from 'react';
|
|
4
|
+
import PropTypes from 'prop-types';
|
|
5
|
+
import AppBar from '@mui/material/AppBar';
|
|
6
|
+
import Tabs from '@mui/material/Tabs';
|
|
7
|
+
import Tab from '@mui/material/Tab';
|
|
8
|
+
import { ThemeProvider } from '@mui/system';
|
|
9
|
+
import { createTheme, useTheme } from '@mui/material/styles';
|
|
10
|
+
import TabPanel from './components/TabPanel';
|
|
11
|
+
/**
|
|
12
|
+
Simple Tabs: simplifies the process of adding a tab panel with multiple contents
|
|
13
|
+
| tab1 | tab2 | tab3 | etc... |
|
|
14
|
+
|
|
15
|
+
* ### Importing the component
|
|
16
|
+
|
|
17
|
+
```//PitchCamp shared component
|
|
18
|
+
import {SimpleTab} from 'pcm-shared-components';
|
|
19
|
+
```
|
|
20
|
+
|
|
21
|
+
### Using the component
|
|
22
|
+
Note: the tab index id and setter for the id are managed by the parent component.
|
|
23
|
+
```//PitchCamp shared component
|
|
24
|
+
<SimpleTab
|
|
25
|
+
childrenTabs:
|
|
26
|
+
[
|
|
27
|
+
{
|
|
28
|
+
tabTitle: 'Tab one',
|
|
29
|
+
tabPanel: <>This is tab one</>
|
|
30
|
+
},
|
|
31
|
+
{
|
|
32
|
+
tabTitle: 'Tab two',
|
|
33
|
+
tabPanel: <>This is tab Two</>
|
|
34
|
+
}
|
|
35
|
+
],
|
|
36
|
+
selectedTabIndex: selectedTabIdx,
|
|
37
|
+
setSelectedTabIndex: handleSetIndex,
|
|
38
|
+
/>
|
|
39
|
+
```
|
|
40
|
+
|
|
41
|
+
*/
|
|
42
|
+
|
|
43
|
+
export const SimpleTab = props => {
|
|
44
|
+
const [selectedTabIdx, setSelectedTabIdx] = useState(0);
|
|
45
|
+
|
|
46
|
+
const handleSetIndex = value => {
|
|
47
|
+
setSelectedTabIdx(value);
|
|
48
|
+
};
|
|
49
|
+
|
|
50
|
+
const {
|
|
51
|
+
childrenTabs,
|
|
52
|
+
selectedTabIndex,
|
|
53
|
+
setSelectedTabIndex,
|
|
54
|
+
theme
|
|
55
|
+
} = props; //Uses the default mui theme if none is passed.
|
|
56
|
+
|
|
57
|
+
const compTheme = theme ? theme : useTheme();
|
|
58
|
+
const defaultTheme = createTheme(compTheme);
|
|
59
|
+
|
|
60
|
+
const handleChange = (event, newValue) => {
|
|
61
|
+
setSelectedTabIndex(newValue);
|
|
62
|
+
};
|
|
63
|
+
|
|
64
|
+
const a11yProps = index => {
|
|
65
|
+
return {
|
|
66
|
+
id: `scrollable-auto-tab-${index}`,
|
|
67
|
+
'aria-controls': `scrollable-auto-tabpanel-${index}`
|
|
68
|
+
};
|
|
69
|
+
};
|
|
70
|
+
|
|
71
|
+
SimpleTab.defaultProps = {
|
|
72
|
+
childrenTabs: [],
|
|
73
|
+
selectedTabIndex: selectedTabIdx,
|
|
74
|
+
setSelectedTabIndex: handleSetIndex,
|
|
75
|
+
theme: undefined
|
|
76
|
+
};
|
|
77
|
+
SimpleTab.propTypes = {
|
|
78
|
+
/** An array of object that determines the tab title and tab content.
|
|
79
|
+
*
|
|
80
|
+
* - The childrenTabs are object withing an array
|
|
81
|
+
*
|
|
82
|
+
```
|
|
83
|
+
[{tabTitle:'something',tabPanel:<Object/>}]
|
|
84
|
+
```
|
|
85
|
+
*/
|
|
86
|
+
childrenTabs: PropTypes.array,
|
|
87
|
+
|
|
88
|
+
/** Is the index value of the current selected tab */
|
|
89
|
+
selectedTabIndex: PropTypes.number,
|
|
90
|
+
|
|
91
|
+
/** The setter for selectedTabIndex: receives one parameter and it's the ```value``` of the index*/
|
|
92
|
+
setSelectedTabIndex: PropTypes.func,
|
|
93
|
+
|
|
94
|
+
/** Theme object to use on this component, if none provided then the MUI5 theme provider theme is used*/
|
|
95
|
+
theme: PropTypes.object
|
|
96
|
+
};
|
|
97
|
+
return /*#__PURE__*/React.createElement(ThemeProvider, {
|
|
98
|
+
theme: defaultTheme
|
|
99
|
+
}, /*#__PURE__*/React.createElement("div", {
|
|
100
|
+
className: "flex flex-col w-full h-full overflow-hidden"
|
|
101
|
+
}, /*#__PURE__*/React.createElement(AppBar, {
|
|
102
|
+
position: "static",
|
|
103
|
+
color: "default",
|
|
104
|
+
elevation: 0,
|
|
105
|
+
style: {
|
|
106
|
+
backgroundColor: 'white'
|
|
107
|
+
}
|
|
108
|
+
}, /*#__PURE__*/React.createElement(Tabs, {
|
|
109
|
+
value: selectedTabIndex,
|
|
110
|
+
onChange: handleChange,
|
|
111
|
+
indicatorColor: "primary",
|
|
112
|
+
textColor: "primary",
|
|
113
|
+
variant: "scrollable",
|
|
114
|
+
scrollButtons: "auto",
|
|
115
|
+
"aria-label": ""
|
|
116
|
+
}, childrenTabs.map((ct, idx) => /*#__PURE__*/React.createElement(Tab, _extends({
|
|
117
|
+
label: ct.tabTitle
|
|
118
|
+
}, a11yProps(idx), {
|
|
119
|
+
key: `simple_tabs_${idx}`
|
|
120
|
+
}))))), childrenTabs.map((ct, idx) => /*#__PURE__*/React.createElement(TabPanel, {
|
|
121
|
+
value: selectedTabIndex,
|
|
122
|
+
index: idx,
|
|
123
|
+
key: `simple_tabs_panels_${idx}`
|
|
124
|
+
}, ct.tabPanel))));
|
|
125
|
+
};
|
|
126
|
+
export default SimpleTab;
|
|
@@ -1,14 +1,18 @@
|
|
|
1
|
-
import React from 'react';
|
|
1
|
+
import React, { useEffect } from 'react';
|
|
2
2
|
import PCMScrollbar from '../../Tools/PCMScrollbar';
|
|
3
3
|
import PropTypes from 'prop-types';
|
|
4
|
+
import Split from 'react-split-it';
|
|
5
|
+
import './style.css';
|
|
4
6
|
/**
|
|
5
|
-
* This component allows you to display a two column split (50-50) layout with proper outer wrapping display both columns with individual scrolling and still having the main wrapper keep it's full size without scrolling
|
|
7
|
+
* This component allows you to display a two column split (50-50) layout with proper outer wrapping display both columns with individual scrolling and still having the main wrapper keep it's full size without scrolling over scan scrolling in the page.
|
|
6
8
|
*
|
|
7
9
|
* ### Importing the component
|
|
8
10
|
|
|
9
11
|
```//PitchCamp shared component
|
|
10
12
|
import {TwoColumnDisplay} from 'pcm-shared-components';
|
|
11
13
|
```
|
|
14
|
+
|
|
15
|
+
### Using the component
|
|
12
16
|
```//PitchCamp shared component
|
|
13
17
|
<TwoColumnDisplay
|
|
14
18
|
ColumnOne={ReactComp}
|
|
@@ -31,13 +35,13 @@ export const TwoColumnDisplay = props => {
|
|
|
31
35
|
} = props;
|
|
32
36
|
return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
|
|
33
37
|
className: "flex flex-col h-full overflow-hidden overscroll-none"
|
|
34
|
-
}, /*#__PURE__*/React.createElement(
|
|
38
|
+
}, /*#__PURE__*/React.createElement(Split, {
|
|
35
39
|
className: "flex flex-row h-screen overflow-hidden overscroll-none"
|
|
36
40
|
}, /*#__PURE__*/React.createElement(PCMScrollbar, {
|
|
37
|
-
className: "
|
|
41
|
+
className: "h-full",
|
|
38
42
|
style: {}
|
|
39
43
|
}, ColumnOne), /*#__PURE__*/React.createElement(PCMScrollbar, {
|
|
40
|
-
className: "
|
|
44
|
+
className: "h-full",
|
|
41
45
|
style: {}
|
|
42
46
|
}, ColumnTwo))));
|
|
43
47
|
};
|
|
@@ -0,0 +1,37 @@
|
|
|
1
|
+
.split-horizontal {
|
|
2
|
+
display: flex;
|
|
3
|
+
width: 100%;
|
|
4
|
+
height: 100%;
|
|
5
|
+
}
|
|
6
|
+
.split-vertical {
|
|
7
|
+
display: flex;
|
|
8
|
+
flex-direction: column;
|
|
9
|
+
height: 100%;
|
|
10
|
+
}
|
|
11
|
+
|
|
12
|
+
.gutter {
|
|
13
|
+
flex-shrink: 0;
|
|
14
|
+
flex-grow: 0;
|
|
15
|
+
background: rgb(213, 213, 213);
|
|
16
|
+
}
|
|
17
|
+
.gutter-horizontal {
|
|
18
|
+
cursor: col-resize;
|
|
19
|
+
flex-basis: 5px !important;
|
|
20
|
+
}
|
|
21
|
+
.gutter-vertical {
|
|
22
|
+
cursor: row-resize;
|
|
23
|
+
flex-basis: 5px !important;
|
|
24
|
+
}
|
|
25
|
+
.gutter:hover {
|
|
26
|
+
background: rgb(176, 176, 176);
|
|
27
|
+
}
|
|
28
|
+
.gutter-dragging:hover {
|
|
29
|
+
background: rgb(159, 159, 159);
|
|
30
|
+
}
|
|
31
|
+
|
|
32
|
+
.pane {
|
|
33
|
+
flex-shrink: 1;
|
|
34
|
+
flex-grow: 1;
|
|
35
|
+
overflow: hidden;
|
|
36
|
+
position: relative;
|
|
37
|
+
}
|
package/dist/index.js
CHANGED
|
@@ -8,4 +8,5 @@ import PcSharedComponentThemeInheritor from './components/PcSharedComponentTheme
|
|
|
8
8
|
import ImageCanvasDraw from './components/Drawing/ImageCanvasDraw';
|
|
9
9
|
import PCMScrollbar from './components/Tools/PCMScrollbar';
|
|
10
10
|
import TwoColumnDisplay from './components/Layout/TwoColumnDisplay';
|
|
11
|
-
|
|
11
|
+
import SimpleTab from './components/Layout/SimpleTab';
|
|
12
|
+
export { TestButton, CodeHighlight, CustomFab, HelpButton, GenericDialogWindow, PcSharedComponentThemeInheritor, ImageCanvasDraw, PCMScrollbar, TwoColumnDisplay, SimpleTab };
|
package/dist/styles/tailwind.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
*,:after,:before{--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness:proximity;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:#2196f380;--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: }.absolute{position:absolute}.relative{position:relative}.top-0{top:0}.bottom-0{bottom:0}.left-0{left:0}.right-0{right:0}.m-auto{margin:auto}.m-12{margin:1.2rem}.mx-6{margin-left:.6rem;margin-right:.6rem}.my-auto{margin-top:auto;margin-bottom:auto}.my-12{margin-top:1.2rem;margin-bottom:1.2rem}.my-6{margin-top:.6rem;margin-bottom:.6rem}.mx-8{margin-left:.8rem;margin-right:.8rem}.mt-6{margin-top:.6rem}.mb-2{margin-bottom:.2rem}.mt-12{margin-top:1.2rem}.mb-6{margin-bottom:.6rem}.ml-6{margin-left:.6rem}.mr-12{margin-right:1.2rem}.block{display:block}.flex{display:flex}.inline-flex{display:inline-flex}.grid{display:grid}.hidden{display:none}.h-full{height:100%}.h-screen{height:100vh}.w-full{width:100%}.w-1\/2{width:50%}.flex-row{flex-direction:row}.flex-row-reverse{flex-direction:row-reverse}.flex-col{flex-direction:column}.items-center{align-items:center}.justify-start{justify-content:flex-start}.justify-end{justify-content:flex-end}.justify-center{justify-content:center}.justify-between{justify-content:space-between}.overflow-auto{overflow:auto}.overflow-hidden{overflow:hidden}.overflow-scroll{overflow:scroll}.overscroll-none{-ms-scroll-chaining:none;overscroll-behavior:none}.rounded-md{border-radius:.6rem}.border{border-width:1px}.border-2{border-width:2px}.border-transparent{border-color:#0000}.bg-green-600{--tw-bg-opacity:1;background-color:rgb(67 160 71/var(--tw-bg-opacity))}.
|
|
1
|
+
*,:after,:before{--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness:proximity;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:#2196f380;--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: }.static{position:static}.absolute{position:absolute}.relative{position:relative}.top-0{top:0}.bottom-0{bottom:0}.left-0{left:0}.right-0{right:0}.m-auto{margin:auto}.m-12{margin:1.2rem}.mx-6{margin-left:.6rem;margin-right:.6rem}.my-auto{margin-top:auto;margin-bottom:auto}.my-12{margin-top:1.2rem;margin-bottom:1.2rem}.my-6{margin-top:.6rem;margin-bottom:.6rem}.mx-8{margin-left:.8rem;margin-right:.8rem}.mt-6{margin-top:.6rem}.mb-2{margin-bottom:.2rem}.mt-12{margin-top:1.2rem}.mb-6{margin-bottom:.6rem}.ml-6{margin-left:.6rem}.mr-12{margin-right:1.2rem}.block{display:block}.flex{display:flex}.inline-flex{display:inline-flex}.grid{display:grid}.contents{display:contents}.hidden{display:none}.h-full{height:100%}.h-screen{height:100vh}.w-full{width:100%}.w-1\/2{width:50%}.flex-row{flex-direction:row}.flex-row-reverse{flex-direction:row-reverse}.flex-col{flex-direction:column}.items-center{align-items:center}.justify-start{justify-content:flex-start}.justify-end{justify-content:flex-end}.justify-center{justify-content:center}.justify-between{justify-content:space-between}.overflow-auto{overflow:auto}.overflow-hidden{overflow:hidden}.overflow-scroll{overflow:scroll}.overscroll-none{-ms-scroll-chaining:none;overscroll-behavior:none}.rounded-md{border-radius:.6rem}.border{border-width:1px}.border-2{border-width:2px}.border-transparent{border-color:#0000}.bg-green-600{--tw-bg-opacity:1;background-color:rgb(67 160 71/var(--tw-bg-opacity))}.p-6{padding:.6rem}.px-4{padding-left:.4rem;padding-right:.4rem}.py-2{padding-top:.2rem;padding-bottom:.2rem}.px-2{padding-left:.2rem;padding-right:.2rem}.pt-4{padding-top:.4rem}.pl-0{padding-left:0}.pr-0{padding-right:0}.pl-16{padding-left:1.6rem}.text-sm{font-size:1.4rem;line-height:2rem}.text-xl{font-size:2rem;line-height:2.8rem}.text-2xl{font-size:2.4rem;line-height:3.2rem}.font-medium{font-weight:500}.text-white{--tw-text-opacity:1;color:rgb(255 255 255/var(--tw-text-opacity))}.shadow{--tw-shadow:0 1px 3px 0 #0000001a,0 1px 2px 0 #0000000f;--tw-shadow-colored:0 1px 3px 0 var(--tw-shadow-color),0 1px 2px 0 var(--tw-shadow-color)}.shadow,.shadow-sm{box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.shadow-sm{--tw-shadow:0 1px 2px 0 #0000000d;--tw-shadow-colored:0 1px 2px 0 var(--tw-shadow-color)}.drop-shadow-none{--tw-drop-shadow:drop-shadow(0 0 #0000)}.drop-shadow-none,.filter{filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.hover\:bg-green-700:hover{--tw-bg-opacity:1;background-color:rgb(56 142 60/var(--tw-bg-opacity))}.hover\:bg-gray-100\/75:hover{background-color:#f5f5f5bf}.focus\:outline-none:focus{outline:2px solid #0000;outline-offset:2px}.focus\:ring-2:focus{--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow,0 0 #0000)}.focus\:ring-green-500:focus{--tw-ring-opacity:1;--tw-ring-color:rgb(76 175 80/var(--tw-ring-opacity))}.focus\:ring-offset-2:focus{--tw-ring-offset-width:2px}
|
package/package.json
CHANGED
|
@@ -1,55 +0,0 @@
|
|
|
1
|
-
import React from 'react';
|
|
2
|
-
import PCMScrollbar from '../../Tools/PCMScrollbar';
|
|
3
|
-
import PropTypes from 'prop-types';
|
|
4
|
-
/**
|
|
5
|
-
* This component allows you to display a two column split (50-50) layout with proper outer wrapping display both columns with individual scrolling and still having the main wrapper keep it's full size without scrolling away down the page.
|
|
6
|
-
*
|
|
7
|
-
* ### Importing the component
|
|
8
|
-
|
|
9
|
-
```//PitchCamp shared component
|
|
10
|
-
import {TwoColumnDisplay} from 'pcm-shared-components';
|
|
11
|
-
```
|
|
12
|
-
```//PitchCamp shared component
|
|
13
|
-
<TwoColumnDisplay
|
|
14
|
-
ColumnOne={ReactComp}
|
|
15
|
-
ColumnTwo={ReactComp}
|
|
16
|
-
/>
|
|
17
|
-
```
|
|
18
|
-
|
|
19
|
-
### Dependencies
|
|
20
|
-
|
|
21
|
-
This component depends on the following component.
|
|
22
|
-
- PCMScrollbar from pc-shared-components
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
*/
|
|
26
|
-
|
|
27
|
-
export const TwoColumnDisplay = props => {
|
|
28
|
-
const {
|
|
29
|
-
ColumnOne,
|
|
30
|
-
ColumnTwo
|
|
31
|
-
} = props;
|
|
32
|
-
return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
|
|
33
|
-
className: "flex flex-col border-2 absolute top-0 bottom-0 left-0 right-0"
|
|
34
|
-
}, /*#__PURE__*/React.createElement("div", null), /*#__PURE__*/React.createElement("div", {
|
|
35
|
-
className: "flex flex-row h-full overflow-hidden"
|
|
36
|
-
}, /*#__PURE__*/React.createElement(PCMScrollbar, {
|
|
37
|
-
className: "w-1/2",
|
|
38
|
-
style: {}
|
|
39
|
-
}, ColumnOne), /*#__PURE__*/React.createElement(PCMScrollbar, {
|
|
40
|
-
className: "w-1/2",
|
|
41
|
-
style: {}
|
|
42
|
-
}, ColumnTwo))));
|
|
43
|
-
};
|
|
44
|
-
export default TwoColumnDisplay;
|
|
45
|
-
TwoColumnDisplay.defaultProps = {
|
|
46
|
-
ColumnTwo: undefined,
|
|
47
|
-
ColumnTwo: undefined
|
|
48
|
-
};
|
|
49
|
-
TwoColumnDisplay.propTypes = {
|
|
50
|
-
/** Column one component to display */
|
|
51
|
-
ColumnTwo: PropTypes.element,
|
|
52
|
-
|
|
53
|
-
/** Column two component to display */
|
|
54
|
-
ColumnTwo: PropTypes.element
|
|
55
|
-
};
|