pcm-shared-components 0.0.180 → 0.0.181
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.
|
@@ -8,51 +8,26 @@ import Tab from '@mui/material/Tab';
|
|
|
8
8
|
import { ThemeProvider } from '@mui/system';
|
|
9
9
|
import { createTheme, useTheme } from '@mui/material/styles';
|
|
10
10
|
import TabPanel from './components/TabPanel';
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
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
|
-
|
|
11
|
+
import { makeStyles } from '@mui/styles';
|
|
12
|
+
const useStyles = makeStyles(() => ({
|
|
13
|
+
root: {
|
|
14
|
+
height: ({
|
|
15
|
+
tabHeight
|
|
16
|
+
}) => tabHeight,
|
|
17
|
+
minHeight: 24
|
|
18
|
+
}
|
|
19
|
+
}));
|
|
43
20
|
export const SimpleTab = props => {
|
|
44
|
-
const [selectedTabIdx, setSelectedTabIdx] = useState(0);
|
|
45
|
-
|
|
46
|
-
const handleSetIndex = value => {
|
|
47
|
-
setSelectedTabIdx(value);
|
|
48
|
-
};
|
|
49
|
-
|
|
50
21
|
const {
|
|
51
22
|
childrenTabs,
|
|
52
23
|
selectedTabIndex,
|
|
53
24
|
setSelectedTabIndex,
|
|
25
|
+
variant,
|
|
54
26
|
theme
|
|
55
|
-
} = props;
|
|
27
|
+
} = props;
|
|
28
|
+
const classes = useStyles({
|
|
29
|
+
tabHeight: variant === 'dense' ? 24 : 48
|
|
30
|
+
}); //Uses the default mui theme if none is passed.
|
|
56
31
|
|
|
57
32
|
const compTheme = theme ? theme : useTheme();
|
|
58
33
|
const defaultTheme = createTheme(compTheme);
|
|
@@ -68,32 +43,6 @@ export const SimpleTab = props => {
|
|
|
68
43
|
};
|
|
69
44
|
};
|
|
70
45
|
|
|
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
46
|
return /*#__PURE__*/React.createElement(ThemeProvider, {
|
|
98
47
|
theme: defaultTheme
|
|
99
48
|
}, /*#__PURE__*/React.createElement("div", {
|
|
@@ -106,6 +55,7 @@ export const SimpleTab = props => {
|
|
|
106
55
|
backgroundColor: 'white'
|
|
107
56
|
}
|
|
108
57
|
}, /*#__PURE__*/React.createElement(Tabs, {
|
|
58
|
+
classes: classes,
|
|
109
59
|
value: selectedTabIndex,
|
|
110
60
|
onChange: handleChange,
|
|
111
61
|
indicatorColor: "primary",
|
|
@@ -114,6 +64,7 @@ export const SimpleTab = props => {
|
|
|
114
64
|
scrollButtons: "auto",
|
|
115
65
|
"aria-label": ""
|
|
116
66
|
}, childrenTabs.map((ct, idx) => /*#__PURE__*/React.createElement(Tab, _extends({
|
|
67
|
+
classes: classes,
|
|
117
68
|
label: ct.tabTitle
|
|
118
69
|
}, a11yProps(idx), {
|
|
119
70
|
key: `simple_tabs_${idx}`
|
|
@@ -123,4 +74,34 @@ export const SimpleTab = props => {
|
|
|
123
74
|
key: `simple_tabs_panels_${idx}`
|
|
124
75
|
}, ct.tabPanel))));
|
|
125
76
|
};
|
|
126
|
-
export default SimpleTab;
|
|
77
|
+
export default SimpleTab;
|
|
78
|
+
SimpleTab.defaultProps = {
|
|
79
|
+
childrenTabs: [],
|
|
80
|
+
selectedTabIndex: 0,
|
|
81
|
+
setSelectedTabIndex: () => {},
|
|
82
|
+
variant: 'normal',
|
|
83
|
+
theme: undefined
|
|
84
|
+
};
|
|
85
|
+
SimpleTab.propTypes = {
|
|
86
|
+
/** An array of object that determines the tab title and tab content.
|
|
87
|
+
*
|
|
88
|
+
* - The childrenTabs are object withing an array
|
|
89
|
+
*
|
|
90
|
+
```
|
|
91
|
+
[{tabTitle:'something',tabPanel:<Object/>}]
|
|
92
|
+
```
|
|
93
|
+
*/
|
|
94
|
+
childrenTabs: PropTypes.array,
|
|
95
|
+
|
|
96
|
+
/** Controls the heigh and spacing of the tab control */
|
|
97
|
+
variant: PropTypes.oneOf(['dense', 'normal']),
|
|
98
|
+
|
|
99
|
+
/** Is the index value of the current selected tab */
|
|
100
|
+
selectedTabIndex: PropTypes.number,
|
|
101
|
+
|
|
102
|
+
/** The setter for selectedTabIndex: receives one parameter and it's the ```value``` of the index*/
|
|
103
|
+
setSelectedTabIndex: PropTypes.func,
|
|
104
|
+
|
|
105
|
+
/** Theme object to use on this component, if none provided then the MUI5 theme provider theme is used*/
|
|
106
|
+
theme: PropTypes.object
|
|
107
|
+
};
|
package/dist/styles/tailwind.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
*,:after,:before{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--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: }::-webkit-backdrop{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--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: }::backdrop{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--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-4{margin-top:.4rem;margin-bottom:.4rem}.mx-2{margin-left:.2rem;margin-right:.2rem}.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}.ml-0{margin-left:0}.mr-0{margin-right:0}.ml-4{margin-left:.4rem}.mt-12{margin-top:1.2rem}.mt-6{margin-top:.6rem}.mb-2{margin-bottom:.2rem}.mr-12{margin-right:1.2rem}.ml-6{margin-left:.6rem}.mb-6{margin-bottom:.6rem}.ml-12{margin-left:1.2rem}.mb-24{margin-bottom:2.4rem}.block{display:block}.flex{display:flex}.inline-flex{display:inline-flex}.
|
|
1
|
+
*,:after,:before{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--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: }::-webkit-backdrop{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--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: }::backdrop{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--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-4{margin-top:.4rem;margin-bottom:.4rem}.mx-2{margin-left:.2rem;margin-right:.2rem}.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}.ml-0{margin-left:0}.mr-0{margin-right:0}.ml-4{margin-left:.4rem}.mt-12{margin-top:1.2rem}.mt-6{margin-top:.6rem}.mb-2{margin-bottom:.2rem}.mr-12{margin-right:1.2rem}.ml-6{margin-left:.6rem}.mb-6{margin-bottom:.6rem}.ml-12{margin-left:1.2rem}.mb-24{margin-bottom:2.4rem}.block{display:block}.flex{display:flex}.inline-flex{display:inline-flex}.hidden{display:none}.h-full{height:100%}.h-screen{height:100vh}.w-full{width:100%}.w-auto{width:auto}.w-1\/2{width:50%}.w-2\/5{width:40%}.grow{flex-grow:1}.cursor-not-allowed{cursor:not-allowed}.cursor-default{cursor:default}.cursor-pointer{cursor:pointer}.list-disc{list-style-type:disc}.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{overscroll-behavior:none}.rounded{border-radius:.4rem}.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))}.bg-yellow-100\/50{background-color:#fff9c480}.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-12{padding-top:1.2rem}.pt-4{padding-top:.4rem}.pl-0{padding-left:0}.pr-0{padding-right:0}.pb-4{padding-bottom:.4rem}.text-center{text-align:center}.font-sans{font-family:Muli,Roboto,-apple-system,BlinkMacSystemFont,Segoe UI,Helvetica Neue,Arial,Noto Sans,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol,Noto Color Emoji}.text-sm{font-size:1.4rem;line-height:2rem}.text-xl{font-size:2rem;line-height:2.8rem}.text-2xl{line-height:3.2rem}.text-24,.text-2xl{font-size:2.4rem}.font-medium{font-weight:500}.text-white{--tw-text-opacity:1;color:rgb(255 255 255/var(--tw-text-opacity))}.text-gray-600{--tw-text-opacity:1;color:rgb(117 117 117/var(--tw-text-opacity))}.text-gray-500{--tw-text-opacity:1;color:rgb(158 158 158/var(--tw-text-opacity))}.no-underline{-webkit-text-decoration-line:none;text-decoration-line:none}.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}.hover\:text-gray-700:hover{--tw-text-opacity:1;color:rgb(97 97 97/var(--tw-text-opacity))}.hover\:underline:hover{-webkit-text-decoration-line:underline;text-decoration-line:underline}.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}@media (min-width:960px){.md\:pt-0{padding-top:0}}
|