pcm-shared-components 0.0.60 → 0.0.63

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.
Files changed (6) hide show
  1. package/dist/components/Dialogs/GenericDialogWindow/index.js +6 -3
  2. package/dist/components/Drawing/ImageCanvasDraw/index.js +3 -4
  3. package/dist/components/PcSharedComponentThemeInheritor/index.js +0 -1
  4. package/dist/components/Tools/PCMScrollbar/index.js +32 -0
  5. package/dist/styles/tailwind.css +1 -1
  6. package/package.json +3 -1
package/dist/components/Dialogs/GenericDialogWindow/index.js CHANGED
@@ -3,8 +3,8 @@ import { Button, Dialog, DialogActions, DialogContent, IconButton, Typography, T
3
3
  import ArrowBackIcon from '@mui/icons-material/ArrowBack';
4
4
  import { ThemeProvider } from '@mui/system';
5
5
  import { createTheme, useTheme } from '@mui/material/styles';
6
- import LoadingBackdrop from '../../Loaders/LoadingBackdrop'; // import GridLoading from 'app/main/components/loading/loading';
7
-
6
+ import LoadingBackdrop from '../../Loaders/LoadingBackdrop';
7
+ import PerfectScrollbar from '../../Tools/PCMScrollbar';
8
8
  import PropTypes from 'prop-types';
9
9
  let debounce;
10
10
  export const GenericDialogWindow = props => {
@@ -80,6 +80,9 @@ export const GenericDialogWindow = props => {
80
80
  onClick: onSave
81
81
  }, save_button_label)))), /*#__PURE__*/React.createElement(DialogContent, {
82
82
  className: "pt-4 pl-0 pr-0 "
83
+ }, /*#__PURE__*/React.createElement(PerfectScrollbar, {
84
+ className: "",
85
+ enable: true
83
86
  }, /*#__PURE__*/React.createElement("div", {
84
87
  className: "w-full h-full "
85
88
  }, component ? /*#__PURE__*/React.cloneElement(component, {
@@ -91,7 +94,7 @@ export const GenericDialogWindow = props => {
91
94
  data: data
92
95
  },
93
96
  ref: childRef
94
- }) : /*#__PURE__*/React.createElement(React.Fragment, null))), /*#__PURE__*/React.createElement(DialogActions, {
97
+ }) : /*#__PURE__*/React.createElement(React.Fragment, null)))), /*#__PURE__*/React.createElement(DialogActions, {
95
98
  className: "justify-between pl-16"
96
99
  }, showSaveButton && /*#__PURE__*/React.createElement(Button, {
97
100
  variant: "contained",
package/dist/components/Drawing/ImageCanvasDraw/index.js CHANGED
@@ -1,4 +1,4 @@
1
- import { useState, useRef, useEffect } from 'react';
1
+ import React, { useState, useRef, useEffect } from 'react';
2
2
  import CanvasDraw from "react-canvas-draw";
3
3
  import Controls from './components/Controls';
4
4
  import ChevronLeftIcon from '@mui/icons-material/ChevronLeft';
@@ -23,7 +23,7 @@ import {ImageCanvasDraw} from 'pcm-shared-components';
23
23
  *
24
24
  */
25
25
 
26
- const ImageCanvasDraw = props => {
26
+ export const ImageCanvasDraw = props => {
27
27
  const {
28
28
  onSave,
29
29
  outputFormat,
@@ -117,7 +117,7 @@ const ImageCanvasDraw = props => {
117
117
  return /*#__PURE__*/React.createElement(ThemeProvider, {
118
118
  theme: defaultTheme
119
119
  }, state.width && state.width !== 0 ? /*#__PURE__*/React.createElement("div", {
120
- className: "flex flex-row overflow-hidden"
120
+ className: "flex flex-row overflow-hidden p-6"
121
121
  }, state.drawerOpen ? /*#__PURE__*/React.createElement("div", {
122
122
  className: "flex flex-row",
123
123
  style: {
@@ -154,7 +154,6 @@ const ImageCanvasDraw = props => {
154
154
  imgSrc: state.b64DataUrl
155
155
  }))) : /*#__PURE__*/React.createElement(React.Fragment, null, "loading..."));
156
156
  };
157
-
158
157
  export default ImageCanvasDraw;
159
158
  ImageCanvasDraw.defaultProps = {
160
159
  onSave: undefined,
package/dist/components/PcSharedComponentThemeInheritor/index.js CHANGED
@@ -12,7 +12,6 @@ export const PcSharedComponentThemeInheritor = props => {
12
12
  children = React.ReactNode
13
13
  } = props;
14
14
  const currentTheme = createTheme(theme ? theme : useTheme());
15
- console.log('debug currentTheme', currentTheme);
16
15
  return /*#__PURE__*/React.createElement(ThemeProvider, {
17
16
  theme: theme
18
17
  }, children);
package/dist/components/Tools/PCMScrollbar/index.js ADDED
@@ -0,0 +1,32 @@
1
+ import React from 'react';
2
+ import PerfectScrollbar from 'react-perfect-scrollbar';
3
+ import "react-perfect-scrollbar/dist/css/styles.css";
4
+ import PropTypes from 'prop-types';
5
+ import MobileDetect from 'mobile-detect';
6
+ import clsx from 'clsx';
7
+ const md = new MobileDetect(window.navigator.userAgent);
8
+ const isMobile = md.mobile();
9
+ export const PCMScrollbar = props => {
10
+ const {
11
+ children,
12
+ className,
13
+ enable
14
+ } = props;
15
+ return /*#__PURE__*/React.createElement(PerfectScrollbar, {
16
+ key: props.id,
17
+ className: clsx(className),
18
+ style: enable && !isMobile ? {
19
+ position: 'relative',
20
+ overflow: 'hidden'
21
+ } : {}
22
+ }, children);
23
+ };
24
+ export default PCMScrollbar;
25
+ PCMScrollbar.propTypes = {
26
+ className: PropTypes.any,
27
+ enable: PropTypes.bool
28
+ };
29
+ PCMScrollbar.defaultProps = {
30
+ className: '',
31
+ enable: true
32
+ };
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: }.relative{position:relative}.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}.h-full{height:100%}.w-full{width:100%}.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-hidden{overflow:hidden}.overflow-scroll{overflow:scroll}.rounded-md{border-radius:.6rem}.border{border-width:1px}.border-transparent{border-color:#0000}.bg-green-600{--tw-bg-opacity:1;background-color:rgb(67 160 71/var(--tw-bg-opacity))}.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}
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: }.relative{position:relative}.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%}.w-full{width:100%}.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-hidden{overflow:hidden}.overflow-scroll{overflow:scroll}.rounded-md{border-radius:.6rem}.border{border-width:1px}.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,6 +1,6 @@
1
1
  {
2
2
  "name": "pcm-shared-components",
3
- "version": "0.0.60",
3
+ "version": "0.0.63",
4
4
  "private": false,
5
5
  "main": "dist/index.js",
6
6
  "babel": {
@@ -61,11 +61,13 @@
61
61
  "axios": "^0.26.0",
62
62
  "browser-image-compression": "^1.0.17",
63
63
  "clsx": "^1.1.1",
64
+ "mobile-detect": "^1.4.5",
64
65
  "moment": "^2.29.1",
65
66
  "prismjs": "^1.27.0",
66
67
  "react-canvas-draw": "^1.2.1",
67
68
  "react-color": "^2.19.3",
68
69
  "react-markdown": "^8.0.0",
70
+ "react-perfect-scrollbar": "^1.5.8",
69
71
  "tinycolor2": "^1.4.2"
70
72
  }
71
73
  }