frst-components 0.20.19 → 0.20.21

package/dist/index.js

@@ -6332,23 +6332,26 @@ const ContainerGeral$1 = styled__default["default"].div `
   height: 8.5rem;
   align-content: flex-end;
   &:hover .popOver {
-    display: block;
+    display: ${(p) => p.isEdit && 'block'};
   }
   &:hover .hide {
-    visibility: visible;
+    visibility: ${(p) => p.isEdit && 'visible'};
   }
 `;
 const AvatarChannel$2 = styled__default["default"].div `
   width: ${(props) => props.size || '80px'};
   height: ${(props) => props.size || '80px'};
   border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
   position: relative;
-  background: ${(props) => props.image ? `url(${props.image})` : '#6a3f86'};
+  background: ${(props) => (props.image ? `url(${props.image})` : '#6a3f86')};
   background-repeat: no-repeat;
   background-size: cover;
-  background-position: center center;  
+  background-position: center center;
   margin-top: 62px;
-  cursor: pointer;
+  cursor: ${(p) => (p.isEdit ? 'pointer' : 'text')};
   ${(props) => props.variant === 'sideRight' &&
     styled.css `
       margin-left: 8.5rem;
@@ -6364,7 +6367,6 @@ const AvatarChannel$2 = styled__default["default"].div `
     `}
 `;
 const Channel$2 = styled__default["default"].span `
-  position: absolute;
   display: flex;
   align-items: center;
   text-align: center;
@@ -6376,14 +6378,15 @@ const Channel$2 = styled__default["default"].span `
   font-family: 'Work Sans';
   font-weight: 700;
   line-height: 130%;
+  text-transform: uppercase;
 `;
 const AvatarCircle = styled__default["default"].div `
   display: flex;
   width: 100%;
   height: 100%;
-  position: absolute;  
+  position: absolute;
   justify-content: center;
-  align-items: center;  
+  align-items: center;
   visibility: hidden;
 `;
 const AvatarCam = styled__default["default"].div `
@@ -6393,9 +6396,9 @@ const AvatarCam = styled__default["default"].div `
   margin: 0;
   background-color: ${({ theme }) => theme.colors.shadeWhite};
   box-shadow: 0px 18px 40px -15px #d3d3d3;
-  display: flex;  
+  display: flex;
   justify-content: center;
-  align-items: center;  
+  align-items: center;
   z-index: 999;
 `;
 const ContainerPopOver = styled__default["default"].div `
@@ -6563,7 +6566,7 @@ function PopOverLXP({ variant, children }) {
                                 : null }));
 }
 
-function AvatarChannel$1({ size, channel, className, disabled, color, handleValueAvatar, variantPopOver, sourceImage }) {
+function AvatarChannel$1({ size, channel, className, disabled, color, handleValueAvatar, variantPopOver, sourceImage, isEdit = false }) {
     const onChange = () => {
         document.getElementById('fileSelector').click();
     };
@@ -6576,9 +6579,13 @@ function AvatarChannel$1({ size, channel, className, disabled, color, handleValu
         handleValueAvatar(file);
         return file;
     };
+    const nameChannel = channel
+        .split(' ')
+        .filter((name, i) => i == 0 || i == channel.split(' ').length - 1)
+        .map((name, i) => name[0])
+        .join('');
     const [image, setImage] = React.useState(sourceImage);
-    return (jsxRuntime.jsx(styled.ThemeProvider, { theme: FRSTTheme, children: jsxRuntime.jsx(ContainerGeral$1, { className: "geral", variant: variantPopOver, children: jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(ContainerPopOver, { className: "popOver", variant: variantPopOver, children: jsxRuntime.jsx(PopOverLXP, { children: 'Alterar avatar', variant: variantPopOver, element: undefined }) }), jsxRuntime.jsx("div", { style: { display: 'none' }, children: jsxRuntime.jsx("input", { type: "file", id: "fileSelector", accept: ".jpg, .jpeg, .png", onChange: (e) => handleFileSelected(e.target.files[0]) }) }), jsxRuntime.jsxs(AvatarChannel$2, { size: size, onClick: onChange, className: className, disabled: disabled, variant: variantPopOver, color: color ? color : '#6a3f86', image: image, children: [!image &&
-                                jsxRuntime.jsx(Channel$2, { children: channel }), jsxRuntime.jsx(AvatarCircle, { className: "hide", children: jsxRuntime.jsx(AvatarCam, { children: jsxRuntime.jsx(Cam, {}) }) })] })] }) }) }));
+    return (jsxRuntime.jsx(styled.ThemeProvider, { theme: FRSTTheme, children: jsxRuntime.jsx(ContainerGeral$1, { className: "geral", isEdit: isEdit, variant: variantPopOver, children: jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(ContainerPopOver, { className: "popOver", variant: variantPopOver, children: jsxRuntime.jsx(PopOverLXP, { children: 'Alterar avatar', variant: variantPopOver, element: undefined }) }), jsxRuntime.jsx("div", { style: { display: 'none' }, children: isEdit && (jsxRuntime.jsx("input", { type: "file", id: "fileSelector", accept: ".jpg, .jpeg, .png", onChange: (e) => handleFileSelected(e.target.files[0]) })) }), jsxRuntime.jsxs(AvatarChannel$2, { size: size, onClick: onChange, className: className, disabled: disabled, variant: variantPopOver, color: color ? color : '#6a3f86', image: image, isEdit: isEdit, children: [!image && jsxRuntime.jsx(Channel$2, { size: size, children: nameChannel }), isEdit && (jsxRuntime.jsx(AvatarCircle, { className: "hide", children: jsxRuntime.jsx(AvatarCam, { children: jsxRuntime.jsx(Cam, {}) }) }))] })] }) }) }));
 }
 
 const ContainerGeral = styled__default["default"].div `
@@ -6818,6 +6825,7 @@ function BannerLxp(props) {
     const [titleText, setTitleText] = React.useState('');
     const [colorTitle, setColorTitle] = React.useState('');
     const [backgroundColor, setBackgroundColor] = React.useState('');
+    // const [oldBgColor, setOldBgColor] = useState("");
     const [backgroundImage, setBackgroundImage] = React.useState('');
     const [fixImage, setFixImage] = React.useState(false);
     const [selectedFile, setSelectedFile] = React.useState({});
@@ -6832,12 +6840,13 @@ function BannerLxp(props) {
         props.onSaveInfo([titleText, disableText, colorTitle, backgroundColor, fixImage]);
     };
     const onCancell = () => {
-        setBackgroundColor(props.bgColor ?? '');
-        setBackgroundImage(props.bgSrc ?? '');
-        setTitleText(props.title ?? '');
+        props.bgColor && setBackgroundColor(props.bgColor ?? '');
+        props.bgSrc && setBackgroundImage(props.bgSrc ?? '');
+        props.title && setTitleText(props.title ?? '');
         setColorTitle(props.titleColor ?? '');
-        setDisableText(props.isDisabledTitle ?? false);
+        setDisableText(props.isDisabledTitle);
         setOpenConfig(false);
+        props?.onCancell && props?.onCancell();
     };
     const handleOpenTitleColorPicker = (event) => {
         setDisplayTitleColorPicker(!displayTitleColorPicker);
@@ -6862,21 +6871,32 @@ function BannerLxp(props) {
             setSelectedFile(e.target.result);
         };
         reader.readAsDataURL(file);
-        props.handleChangeBanner(file);
-        setBackgroundImage(props.bgSrc);
-        setColorTitle(props?.titleColor);
         setBackgroundColor('');
+        props.handleChangeBanner(file);
         return file;
     };
     React.useEffect(() => {
-        setTitleText(props?.title);
-        setDisableText(props?.isDisabledTitle);
-        // setBackgroundImage(props?.bgSrc);
-    }, []);
+        props?.isDisabledTitle && setDisableText(props?.isDisabledTitle);
+        props?.bgColor && setBackgroundColor(props?.bgColor);
+        // props?.bgColor && setOldBgColor(props?.bgColor);
+        props?.bgSrc && setBackgroundImage(props?.bgSrc);
+        props.isDisabledTitle && setDisableText(props.isDisabledTitle);
+    }, [props]);
     React.useEffect(() => {
         if (props?.bgSrc)
             setBackgroundImage(props?.bgSrc);
     }, [props?.bgSrc]);
+    React.useMemo(() => {
+        if (props?.title) {
+            setTitleText(props?.title);
+        }
+        if (props?.titleColor) {
+            setColorTitle(props?.titleColor);
+        }
+        if (props.isDisabledTitle) {
+            setDisableText(props.isDisabledTitle);
+        }
+    }, [props?.title, props?.titleColor, props.isDisabledTitle]);
     return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [props?.isLoading ? (jsxRuntime.jsx(LoadingBanner, {})) : (jsxRuntime.jsxs(BannerContainer, { backgroundBanner: props?.bgColor || `url(${props?.bgSrc})`, style: {
                     ...props.style,
                     objectFit: 'fill'

package/dist/src/components/IJ/learningCycleCard/components/menu/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../../src/components/IJ/learningCycleCard/components/menu/index.tsx"],"names":[],"mappings":";AAUA,MAAM,CAAC,OAAO,UAAU,QAAQ,CAAC,EAAE,EAAE,EAAE,WAAW,EAAE;;;CAAA,eAiFnD"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../src/components/IJ/learningCycleCard/components/menu/index.tsx"],"names":[],"mappings":";AAUA,MAAM,CAAC,OAAO,UAAU,QAAQ,CAAC,EAAE,EAAE,EAAE,WAAW,EAAE;;;CAAA,eAiFnD"}

package/dist/src/components/IJ/learningCycleCard/components/menu/menuStyle.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"menuStyle.d.ts","sourceRoot":"","sources":["../../../../../../../src/components/IJ/learningCycleCard/components/menu/menuStyle.ts"],"names":[],"mappings":"AAGA,eAAO,MAAM,YAAY,oEAuBxB,CAAA"}
+{"version":3,"file":"menuStyle.d.ts","sourceRoot":"","sources":["../../../../../../src/components/IJ/learningCycleCard/components/menu/menuStyle.ts"],"names":[],"mappings":"AAGA,eAAO,MAAM,YAAY,oEAuBxB,CAAA"}

package/dist/src/components/LXP/avatarChannel/avatarChannelStyles.d.ts

@@ -3,15 +3,17 @@ interface AvatarI {
     src?: any;
     disabled?: boolean;
     color?: string;
-    image: any;
+    image?: any;
     variant?: string;
+    isEdit?: boolean;
 }
 interface PropsPopOver {
     variant: string;
+    isEdit?: boolean;
 }
 export declare const ContainerGeral: import("styled-components").StyledComponent<"div", any, PropsPopOver, never>;
 export declare const AvatarChannel: import("styled-components").StyledComponent<"div", any, AvatarI, never>;
-export declare const Channel: import("styled-components").StyledComponent<"span", any, {}, never>;
+export declare const Channel: import("styled-components").StyledComponent<"span", any, AvatarI, never>;
 export declare const AvatarCircle: import("styled-components").StyledComponent<"div", any, {}, never>;
 export declare const AvatarCam: import("styled-components").StyledComponent<"div", any, {}, never>;
 export declare const ContainerPopOver: import("styled-components").StyledComponent<"div", any, PropsPopOver, never>;

package/dist/src/components/LXP/avatarChannel/avatarChannelStyles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"avatarChannelStyles.d.ts","sourceRoot":"","sources":["../../../../../src/components/LXP/avatarChannel/avatarChannelStyles.ts"],"names":[],"mappings":"AAEA,UAAU,OAAO;IACf,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,GAAG,CAAC,EAAE,GAAG,CAAA;IACT,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,KAAK,EAAE,GAAG,CAAA;IACV,OAAO,CAAC,EAAE,MAAM,CAAA;CACjB;AAED,UAAU,YAAY;IACpB,OAAO,EAAE,MAAM,CAAA;CAChB;AAED,eAAO,MAAM,cAAc,8EAU1B,CAAA;AACD,eAAO,MAAM,aAAa,yEA0BzB,CAAA;AAED,eAAO,MAAM,OAAO,qEAanB,CAAA;AACD,eAAO,MAAM,YAAY,oEAQxB,CAAA;AACD,eAAO,MAAM,SAAS,oEAWrB,CAAA;AACD,eAAO,MAAM,gBAAgB,8EA2B5B,CAAA;AAED,eAAO,MAAM,sBAAsB,oEAElC,CAAA"}
+{"version":3,"file":"avatarChannelStyles.d.ts","sourceRoot":"","sources":["../../../../../src/components/LXP/avatarChannel/avatarChannelStyles.ts"],"names":[],"mappings":"AAEA,UAAU,OAAO;IACf,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,GAAG,CAAC,EAAE,GAAG,CAAA;IACT,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,KAAK,CAAC,EAAE,GAAG,CAAA;IACX,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB,MAAM,CAAC,EAAE,OAAO,CAAA;CACjB;AAED,UAAU,YAAY;IACpB,OAAO,EAAE,MAAM,CAAA;IACf,MAAM,CAAC,EAAE,OAAO,CAAA;CACjB;AAED,eAAO,MAAM,cAAc,8EAU1B,CAAA;AACD,eAAO,MAAM,aAAa,yEA6BzB,CAAA;AAED,eAAO,MAAM,OAAO,0EAanB,CAAA;AACD,eAAO,MAAM,YAAY,oEAQxB,CAAA;AACD,eAAO,MAAM,SAAS,oEAWrB,CAAA;AACD,eAAO,MAAM,gBAAgB,8EA2B5B,CAAA;AAED,eAAO,MAAM,sBAAsB,oEAElC,CAAA"}

package/dist/src/components/LXP/avatarChannel/index.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="react" />
 import '../../../shared/global.css';
 import { IAvatar } from './avatarChannel';
-export default function AvatarChannel({ size, channel, className, disabled, color, handleValueAvatar, variantPopOver, sourceImage }: IAvatar): JSX.Element;
+export default function AvatarChannel({ size, channel, className, disabled, color, handleValueAvatar, variantPopOver, sourceImage, isEdit }: IAvatar): JSX.Element;
 //# sourceMappingURL=index.d.ts.map

package/dist/src/components/LXP/avatarChannel/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/LXP/avatarChannel/index.tsx"],"names":[],"mappings":";AAAA,OAAO,4BAA4B,CAAA;AAInC,OAAO,EAAE,OAAO,EAAE,MAAM,iBAAiB,CAAA;AAKzC,MAAM,CAAC,OAAO,UAAU,aAAa,CAAC,EACpC,IAAI,EACJ,OAAO,EACP,SAAS,EACT,QAAQ,EACR,KAAK,EACL,iBAAiB,EACjB,cAAc,EACd,WAAW,EACZ,EAAE,OAAO,eAwDT"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/LXP/avatarChannel/index.tsx"],"names":[],"mappings":";AAAA,OAAO,4BAA4B,CAAA;AAInC,OAAO,EAAE,OAAO,EAAE,MAAM,iBAAiB,CAAA;AAKzC,MAAM,CAAC,OAAO,UAAU,aAAa,CAAC,EACpC,IAAI,EACJ,OAAO,EACP,SAAS,EACT,QAAQ,EACR,KAAK,EACL,iBAAiB,EACjB,cAAc,EACd,WAAW,EACX,MAAc,EACf,EAAE,OAAO,eAgET"}

package/dist/src/components/LXP/bannerLxp/index.d.ts

@@ -22,6 +22,7 @@ interface BannerLxpParams {
      * @prop {object} onSaveInfo: função de callback que retorna todos as informações do banner no final das alterações. (nesta ordem[Title, isTitledisabled, colorTitle, backgroundColor, fixImage])
      */
     onSaveInfo?: ([]: Iterable<any>) => void;
+    onCancell?: () => void;
 }
 export default function BannerLxp(props: BannerLxpParams): JSX.Element;
 export {};

package/dist/src/components/LXP/bannerLxp/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/LXP/bannerLxp/index.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAsC,MAAM,OAAO,CAAA;AAK1D,UAAU,eAAe;IACvB,KAAK,EAAE,MAAM,CAAA;IACb,UAAU,CAAC,EAAE,MAAM,CAAA;IACnB,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB,eAAe,CAAC,EAAE,OAAO,CAAA;IACzB,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAA;IAC3B,iBAAiB,CAAC,EAAE,OAAO,CAAA;IAC3B,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB,iBAAiB,CAAC,EAAE,MAAM,CAAA;IAC1B;;OAEG;IAEH;;;;OAIG;IACH,kBAAkB,CAAC,EAAE,CAAC,IAAI,KAAA,KAAK,IAAI,CAAA;IACnC;;OAEG;IACH,UAAU,CAAC,EAAE,CAAC,EAAE,eAAA,KAAK,IAAI,CAAA;CAC1B;AAED,MAAM,CAAC,OAAO,UAAU,SAAS,CAAC,KAAK,EAAE,eAAe,eA4OvD"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/LXP/bannerLxp/index.tsx"],"names":[],"mappings":"AAIA,OAAO,KAA+C,MAAM,OAAO,CAAA;AAInE,UAAU,eAAe;IACvB,KAAK,EAAE,MAAM,CAAA;IACb,UAAU,CAAC,EAAE,MAAM,CAAA;IACnB,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB,eAAe,CAAC,EAAE,OAAO,CAAA;IACzB,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAA;IAC3B,iBAAiB,CAAC,EAAE,OAAO,CAAA;IAC3B,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB,iBAAiB,CAAC,EAAE,MAAM,CAAA;IAC1B;;OAEG;IAEH;;;;OAIG;IACH,kBAAkB,CAAC,EAAE,CAAC,IAAI,KAAA,KAAK,IAAI,CAAA;IACnC;;OAEG;IACH,UAAU,CAAC,EAAE,CAAC,EAAE,eAAA,KAAK,IAAI,CAAA;IACzB,SAAS,CAAC,EAAE,MAAM,IAAI,CAAA;CACvB;AAED,MAAM,CAAC,OAAO,UAAU,SAAS,CAAC,KAAK,EAAE,eAAe,eA2PvD"}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "frst-components",
   "homepage": "http://FRST-Falconi.github.io/storybook.frstfalconi.com",
-  "version": "0.20.19",
+  "version": "0.20.21",
   "private": false,
   "main": "./dist/index.js",
   "types": "./dist/index.d.ts",