frst-components 0.37.0 → 0.38.0

package/dist/esm/src/components/FI/notificationCard/notificationCardStyles.js

@@ -0,0 +1,84 @@
+import styled, { keyframes } from 'styled-components';
+
+const notificationContainer = styled.div `
+  display: flex;
+  justify-content: flex-start;
+  align-items: flex-start;
+  width: 375px;
+  height: auto;
+  padding: 16px;
+  gap: 16px;
+  cursor: pointer;
+`;
+const notificationInfo = styled.div `
+  display: flex;
+  align-items: flex-start;
+  flex-direction: column;
+  justify-content: space-between;
+  height: 100%;
+`;
+const notificationDescription = styled.div `
+  font-family: 'PT Sans';
+  font-size: 16px;
+  font-weight: 400;
+  color: ${({ theme }) => theme.colors.selectItens};
+  a {
+    color: ${({ theme }) => theme.colors.selectItens};
+    text-decoration: none;
+    pointer-events: none;
+  }
+`;
+const notificationDate = styled.div `
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  gap: 8px;
+  margin-top: 8px;
+
+  font-family: 'PT Sans';
+  font-size: 14px;
+  font-weight: 400;
+  color: ${({ theme }) => theme.colors.neutralsGrey5};
+`;
+styled.div `
+  display: none;
+  position: absolute;
+  border: 1px solid black;
+  background-color: #fff;
+  padding: 10px;
+  z-index: 1000;
+`;
+const pulseAnimation = keyframes `
+  0% {
+    transform: scale(1);
+  }
+  50% {
+    transform: scale(1.1);
+  }
+  100% {
+    transform: scale(1);
+  }
+`;
+const TrashIconContainer = styled.div `
+  display: flex;
+  align-items: center;
+  cursor: pointer;
+  padding: 5px;
+  margin-left: auto;
+  margin-top: auto;
+  border-radius: 50%;
+  &:hover {
+    background-color: ${({ isNewNotification }) => (isNewNotification ? '#585858' : '#494949')};
+    & > svg {
+      path {
+        fill: #f7f9fc !important;
+      }
+    }
+  }
+  &:active {
+    background-color: ${({ isNewNotification }) => (isNewNotification ? '#686868' : '#595959')};
+    animation: ${pulseAnimation} 0.3s ease-in-out;
+  }
+`;
+
+export { TrashIconContainer, notificationContainer, notificationDate, notificationDescription, notificationInfo };

package/dist/esm/src/components/FI/notificationPopOver/index.js

@@ -0,0 +1,59 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
+import Button from '../../buttons/index.js';
+import { ThemeProvider } from 'styled-components';
+import { FRSTTheme } from '../../../theme/index.js';
+import NotificationCard from '../notificationCard/index.js';
+import { notificationContainerMobile, notificationHeader, LoadingContainer, notificationCardList, emptyState, emptyStateInfo, PopoverCustom, notificationContainer } from './notificationPopOverStyles.js';
+import { BackArrow, MoreDotsVertical } from '../../../shared/icons.js';
+import imgEmptyState from '../../../../public/img/Nonotification.png.js';
+import MenuMore from '../../menu-more/index.js';
+import Loading from '../../DS/loading/index.js';
+
+function NotificationPopOver(props) {
+    props.notificationList
+        ? props.notificationList.filter((notification) => notification.isNewNotification)
+        : [];
+    const emptyStateImage = imgEmptyState;
+    const notificationsLength = props?.notificationList?.length;
+    const markAllAsReadOption = {
+        description: props.textMarkAllAsRead,
+        onClick: props.handleClickMarkRead,
+        color: props.notificationList ? '#FCFCFC' : '#9C9C9C',
+        disabled: !props.notificationList
+    };
+    const deleteAllNotificationsOption = {
+        description: props.textDeleteAll,
+        onClick: props.handleClickDeleteAll,
+        color: props.notificationList ? '#FF6868' : '#9C9C9C',
+        disabled: !props.notificationList
+    };
+    return (jsx(ThemeProvider, { theme: FRSTTheme, children: props.isMobile ? (jsxs("div", { style: { backgroundColor: '#E5E5E5' }, children: [jsx("div", { style: { padding: 16 }, children: jsx(Button, { variant: "link", startIcon: jsx(BackArrow, { fill: "currentColor" }), label: props.textBack, handleClick: () => props.handleClickBack() }) }), jsxs(notificationContainerMobile, { children: [jsxs(notificationHeader, { children: [jsx("span", { style: {
+                                        fontFamily: 'Work Sans',
+                                        fontSize: 20,
+                                        fontWeight: 500,
+                                        color: FRSTTheme['colors'].primary1
+                                    }, children: props.textNotification }), jsx(MenuMore, { options: [markAllAsReadOption, deleteAllNotificationsOption], isHover: false, closeAfterClick: true, isArrowInMenu: false, isPaddingInMenu: false, isDarkMode: true, iconButton: jsx(MoreDotsVertical, { fill: "#F7F9FC" }) })] }), !!props?.isLoading ? (jsx(LoadingContainer, { children: jsx(Loading, { sizeLoading: "large" }) })) : props.notificationList ? (jsx(notificationCardList, { children: props.notificationList.map((item, index) => {
+                                return (jsx("div", { style: { borderBottom: `1px solid ${FRSTTheme['colors'].borderPrimary}` }, children: jsx(NotificationCard, { style: { width: '100%' }, onClickUserInfo: item.onClickUserInfo, textVisitProfile: item.textVisitProfile, notificationAvatar: item.notificationAvatar, notificationDescription: item.notificationDescription, notificationDate: item.notificationDate, notificationHour: item.notificationHour, textNew: item.textNew, isNewNotification: item.isNewNotification, handleClick: item.handleClick, handleClickDelete: item.handleClickDelete }, index) }));
+                            }) })) : (jsx(emptyState, { children: jsxs(emptyStateInfo, { children: [jsx("img", { src: emptyStateImage, alt: "Empty notification list" }), jsx("span", { children: props.textEmptyState })] }) }))] })] })) : (jsx(PopoverCustom, { open: props.isOpen, anchorEl: props.anchor, anchorOrigin: {
+                vertical: 'bottom',
+                horizontal: 'center'
+            }, transformOrigin: {
+                vertical: 'top',
+                horizontal: 'center'
+            }, PaperProps: {
+                style: {
+                    backgroundColor: 'transparent',
+                    boxShadow: 'none',
+                    borderRadius: 0
+                }
+            }, children: jsxs(notificationContainer, { children: [jsxs(notificationHeader, { onMouseOver: () => (props?.setOnAreaPopOver ? props?.setOnAreaPopOver(true) : {}), onMouseOut: () => (props?.setOnAreaPopOver ? props?.setOnAreaPopOver(false) : {}), children: [jsx("span", { style: {
+                                    fontFamily: 'Work Sans',
+                                    fontSize: 20,
+                                    fontWeight: 500,
+                                    color: FRSTTheme['colors'].primary1
+                                }, children: props.textNotification }), jsx(MenuMore, { options: [markAllAsReadOption, deleteAllNotificationsOption], isHover: false, closeAfterClick: true, isArrowInMenu: false, isPaddingInMenu: false, isDarkMode: true, iconButton: jsx(MoreDotsVertical, { fill: "#F7F9FC" }) })] }), !!props?.isLoading ? (jsx(LoadingContainer, { children: jsx(Loading, { sizeLoading: "large" }) })) : props.notificationList ? (jsx(notificationCardList, { notificationsLength: notificationsLength, children: props.notificationList.map((item, index) => {
+                            return (jsx("div", { style: { borderBottom: `1px solid #313131` }, onMouseOver: () => props?.setOnAreaPopOver ? props?.setOnAreaPopOver(true) : {}, onMouseOut: () => props?.setOnAreaPopOver ? props?.setOnAreaPopOver(false) : {}, children: jsx(NotificationCard, { onClickUserInfo: item.onClickUserInfo, textVisitProfile: item.textVisitProfile, notificationAvatar: item.notificationAvatar, notificationDescription: item.notificationDescription, notificationDate: item.notificationDate, notificationHour: item.notificationHour, textNew: item.textNew, isNewNotification: item.isNewNotification, handleClick: item.handleClick, handleClickDelete: item.handleClickDelete }, index) }, index));
+                        }) })) : (jsx(emptyState, { children: jsxs(emptyStateInfo, { children: [jsx("img", { src: emptyStateImage, alt: "Empty notification list" }), jsx("span", { children: props.textEmptyState })] }) }))] }) })) }));
+}
+
+export { NotificationPopOver as default };

package/dist/esm/src/components/FI/notificationPopOver/notificationPopOverStyles.js

@@ -0,0 +1,112 @@
+import styled from 'styled-components';
+import { Popover } from '@mui/material';
+
+const PopoverCustom = styled(Popover) `
+  & > div:nth-child(3) {
+    border-radius: 7px !important;
+    box-shadow: 0px 25px 62px -19px rgba(0, 0, 0, 0.37) !important;
+    -webkit-box-shadow: 0px 25px 62px -19px rgba(0, 0, 0, 0.47);
+    -moz-box-shadow: 0px 25px 62px -19px rgba(0, 0, 0, 0.47);
+  }
+  margin-top:24px;
+  box-shadow: 0px 0px 10px 0px #00000033;
+`;
+const LoadingContainer = styled.div `
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 100%;
+  height: 100%;
+`;
+const notificationContainer = styled.div `
+  display: flex;
+  justify-content: flex-start;
+  align-items: flex-start;
+  flex-direction: column;
+  border-radius: 8px;
+  width: 376px;
+  height: 412px;
+  overflow: hidden;
+  background-color: ${({ theme }) => theme.colors.neutralsGrey1};
+
+  border: 1px solid ${({ theme }) => theme.colors.borderSecondary4} !important;
+  /* & > div:nth-child(2) > div:nth-child(3) {
+    display: none !important;
+  } */
+`;
+const notificationContainerMobile = styled.div `
+  display: flex;
+  justify-content: flex-start;
+  align-items: flex-start;
+  flex-direction: column;
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+  border-top: 1px solid ${({ theme }) => theme.colors.borderPrimary};
+  background-color: ${({ theme }) => theme.colors.neutralsGrey1};
+
+  & > div:nth-child(2) {
+    max-height: 80vh !important;
+    overflow-y: scroll !important;
+  }
+`;
+const notificationHeader = styled.div `
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 12px 16px;
+  border-bottom: 1px solid ${({ theme }) => theme.colors.borderPrimary};
+  width: 100%;
+`;
+const notificationCardList = styled.div `
+  height: 100%;
+  min-height: 300px;
+  min-width: 100%;
+  overflow: hidden;
+  overflow-y: ${(props) => props?.notificationsLength > 3 && 'scroll'};
+  width: 100%;
+
+  &::-webkit-scrollbar {
+    width: 7px;
+    height: 90%;
+    display: flex;
+    box-sizing: border-box;
+    margin-right: 5px !important;
+  }
+  &::-webkit-scrollbar-track {
+    background: ${({ theme }) => theme.colors.shadeWhite};
+    height: 30%;
+  }
+  ::-webkit-scrollbar-thumb {
+    background: ${({ theme }) => theme.colors.borderPrimary};
+    height: 30%;
+    border-radius: 5px;
+    margin: 3px;
+  }
+  &::-webkit-scrollbar-thumb:hover {
+    background: ${({ theme }) => theme.colors.borderPrimary};
+    height: 30%;
+  }
+`;
+const emptyState = styled.div `
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 100%;
+  height: 100%;
+`;
+const emptyStateInfo = styled.div `
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  flex-direction: column;
+  gap: 24px;
+
+  text-align: center;
+  font-family: 'PT Sans';
+  font-size: 16px;
+  font-weight: 700;
+  color: ${({ theme }) => theme.colors.neutralsGrey3};
+`;
+
+export { LoadingContainer, PopoverCustom, emptyState, emptyStateInfo, notificationCardList, notificationContainer, notificationContainerMobile, notificationHeader };

package/dist/esm/src/components/FI/postFeed/index.js

@@ -0,0 +1,53 @@
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import Avatar from '../../avatar/index.js';
+import Button from '../../buttons/index.js';
+import { ThemeProvider } from 'styled-components';
+import { FRSTTheme } from '../../../theme/index.js';
+import FeedInteraction from '../feedInteraction/index.js';
+import { Wrapper, postContainer, postHeader, TooltipCard, TooltipText, buttonCheck, TooltipBox, postTitle, postImage, postDescription, postVideo } from './postFeedStyles.js';
+import Markdown from 'markdown-to-jsx';
+import { useState, useEffect } from 'react';
+
+function PostFeed(props) {
+    const FRSTAvatar = 'https://api-deimos-cdn.frstfalconi.cloud/logo_first.png';
+    const [isVisibleComments, setIsVisibleComments] = useState(props.isVisibleComments);
+    const [actionArea, setActionArea] = useState(false);
+    useEffect(() => {
+        setIsVisibleComments(props.isVisibleComments);
+    }, [props.isVisibleComments]);
+    return (jsx(Wrapper, { isCompletePost: props.isCompletePost, children: jsxs(ThemeProvider, { theme: FRSTTheme, children: [jsxs(postContainer, { style: { ...props.style }, children: [jsxs(postHeader, { style: { width: '100%', justifyContent: 'space-between' }, children: [jsx("div", { style: { width: props?.fixPostButton && props?.fixPostButton?.isVisibleButton ? '105px' : '0px' } }), jsxs("div", { style: { display: 'flex', flexDirection: 'row', justifyContent: 'center', alignItems: 'center' }, children: [jsxs("div", { style: { marginRight: 16, paddingTop: '18px' }, children: [" ", jsx(Avatar, { src: FRSTAvatar, size: '40px' }), " "] }), jsx("span", { style: { fontFamily: 'Work Sans', fontWeight: 600, fontSize: 20, color: FRSTTheme['colors'].neutralsGrey1, paddingTop: '18px' }, children: " FRST Falconi " })] }), props?.fixPostButton && props?.fixPostButton?.isVisibleButton ?
+                                    jsxs(TooltipCard, { children: [jsx(TooltipText, { children: jsxs("div", { onClick: () => props?.fixPostButton?.actionClick(), onMouseOver: () => setActionArea(true), onMouseOut: () => setActionArea(false), style: {
+                                                        width: '105px',
+                                                        fontSize: '18px',
+                                                        color: '#0645ad',
+                                                        cursor: 'pointer',
+                                                        justifySelf: 'end',
+                                                        display: 'flex',
+                                                        justifyContent: 'space-between',
+                                                        alignItems: 'center',
+                                                        paddingRight: '22px',
+                                                        marginTop: '-30px'
+                                                    }, children: [jsx(IconPin, { fill: actionArea ? '#0645ad' : '#ff4d0d' }), jsx(buttonCheck, { children: props.fixPostButton?.textFixed })] }) }), jsx(TooltipBox, { children: jsx("p", { children: props.fixPostButton?.textTooltip }) })] })
+                                    : jsx("div", {})] }), jsxs(postTitle, { children: [" ", props.title, " "] }), props.postImage ?
+                            jsx(postImage, { children: jsx("img", { src: props.postImage }) })
+                            : null, jsx(postDescription, { style: { paddingLeft: '24px', paddingRight: '24px', width: '100%' }, children: jsx(Markdown, { children: props.description }) }), props.postVideoId ?
+                            jsxs(postVideo, { children: [props.videoSource == 'youtube' &&
+                                        jsx("iframe", { src: `https://www.youtube.com/embed/${props.postVideoId}`, frameBorder: "0", allow: "autoplay; fullscreen; picture-in-picture", width: props.videoWidth ? props.videoWidth : '100%', height: props.videoHeight ? props.videoHeight : 430 }), props.videoSource == 'vimeo' &&
+                                        jsx("iframe", { src: `https://player.vimeo.com/video/${props.postVideoId}?autoplay=0`, width: props.videoWidth ? props.videoWidth : '100%', height: props.videoHeight ? props.videoHeight : 430, allow: "autoplay; fullscreen" })] })
+                            : null, props.handlePostButtonClick ?
+                            jsx("div", { style: { marginTop: 32, width: '100%', paddingLeft: '24px', paddingRight: '24px' }, children: jsx(Button, { variant: 'expandedPrimary', label: props.textPostButton, handleClick: props.handlePostButtonClick }) })
+                            : null] }), jsx(FeedInteraction, { hideComments: isVisibleComments, isPostReview: true, userAvatar: props.userAvatar, id: props.postId, isLiked: props.isPostLiked, qtdComments: props.qtdComments, qtdLikes: props.qtdLikes, textAvaluation: props.textAvaluation, textAvaluationTitle: props.textAvaluationTitle, textComments: props.textComments, textDeslike: props.textDeslike, textLikes: props.textLikes, 
+                    // commentList={props.commentList}
+                    // userCommentPlaceholder={props.userCommentPlaceholder}
+                    textLoadMoreComments: props.textLoadMoreComments, 
+                    // textSaveCommentBtn={props.textSaveCommentBtn}
+                    ratingPostReview: props.ratingPostReview, handleLikeClick: props.handleLikeClick, handlePostReviewChange: props.handlePostReviewChange, 
+                    // handleSaveCommentBtn={props.handleSaveCommentBtn}
+                    // onCommentChange={props.onCommentChange}
+                    isDisabledAvaluation: props.isDisabledAvaluation, isCommentV2: props?.isCommentV2, childrenCommentV2: props?.childrenCommentV2 })] }) }));
+}
+function IconPin({ fill }) {
+    return jsx(Fragment, { children: jsx("svg", { width: "18", height: "13", viewBox: "0 0 18 13", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: jsx("path", { d: "M17 1L6 12L1 7", stroke: "#0645AD", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }) }) });
+}
+
+export { PostFeed as default };

package/dist/esm/src/components/FI/postFeed/postFeedStyles.js

@@ -0,0 +1,181 @@
+import styled from 'styled-components';
+
+const Wrapper = styled.div `
+  opacity: ${({ isCompletePost }) => isCompletePost ? '0' : '1'};
+  transition: opacity 0.5s ease-in-out;
+`;
+const postContainer = styled.div `
+    display: flex;
+    justify-content: flex-start;
+    align-items: center;
+    flex-direction: column;
+
+    border: 1px solid ${({ theme }) => theme.colors.borderPrimary};
+    border-top-left-radius: 8px;
+    border-top-right-radius: 8px;
+    background-color: ${({ theme }) => theme.colors.shadeWhite};
+    padding-top: 24px;
+    padding-bottom: 24px;
+    
+    &>img{
+        max-width: 100%;
+        max-height: 100%;
+    }
+
+`;
+const postHeader = styled.div `
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    flex-direction: row;
+`;
+const postTitle = styled.span `
+    font-family: 'Work Sans';
+    font-weight: 600;
+    font-size: 24px;
+    text-align: center;
+    color: ${({ theme }) => theme.colors.primary1};
+    margin-top: 32px;
+    padding-left: 22px;
+    padding-right: 22px;
+`;
+const postDescription = styled.span `
+    font-family: 'PT Sans';
+    font-weight: 400;
+    font-size: 16px;
+    text-align: left;
+    color: ${({ theme }) => theme.colors.neutralsGrey1};
+    margin-top: 32px;
+    width: 100% !important;
+`;
+const postImage = styled.div `
+    display: flex;
+    justify-content: center;
+    align-items: center;
+
+    margin-top: 32px;
+    width: 100%;
+    object-fit: cover;
+
+    & img{
+        max-width: 100%;
+        width: 100%;
+        max-height: 100%;
+    }
+`;
+const postVideo = styled.div `
+    display: flex;
+    justify-content: center;
+    align-items: center;
+
+    margin-top: 32px;
+    width: 100%;
+`;
+const buttonCheck = styled.span `
+    font-family: 'PT Sans';
+    font-style: normal;
+    font-weight: 700;
+    font-size: 16px;
+    line-height: 110%;
+    /* identical to box height, or 18px */
+
+    display: flex;
+    align-items: center;
+
+    /* link/onfocus */
+
+    color: #0645AD;
+`;
+const TooltipText = styled.div `
+  color: #757575;
+  text-align: center;
+  line-height: 44px;
+  border-radius: 3px;
+  cursor: pointer;
+`;
+const TooltipBox = styled.div `
+  position: absolute;
+  top: calc(100% + 10px);
+  left: -10px;
+  visibility: hidden;
+  
+  font-family: 'PT Sans';
+  font-style: normal;
+  font-weight: 400;
+  font-size: 15px;
+  line-height: 18px;
+  color: #757575;
+
+  background-color: #FFF;
+  width: 150px;
+  padding: 5px 5px;
+  border-radius: 4px;
+  border: 1px solid #BDBDBD;
+  -webkit-box-shadow: 10px 35px 40px -8px rgba(0,0,0,0.31);
+  -moz-box-shadow: 10px 35px 40px -8px rgba(0,0,0,0.31);
+  box-shadow: 10px 35px 40px -8px rgba(0,0,0,0.31);
+
+  &:after {
+    content: "";
+    width: 0;
+    height: 0;
+    left: 40px;
+    top: -7px;
+    position: absolute;
+
+    border: 7px solid #fff;
+    transform: rotate(135deg);
+    transition: border 0.3s ease-in-out;
+  }
+
+  &:before {
+    content: "";
+    width: 0;
+    height: 0;
+    left: 40px;
+    top: -8px;
+    position: absolute;
+
+    border: 7px solid #BDBDBD;
+    transform: rotate(135deg);
+  }
+  
+`;
+const TooltipCard = styled.div `
+  position: relative;
+  & ${TooltipText}:hover + ${TooltipBox} {
+    visibility: visible;
+    color: #757575;
+    background-color: #FFFFFF;
+    width: 230px;
+    padding: 8px 8px;
+
+
+    &:after {
+        content: "";
+        width: 0;
+        height: 0;
+        left: 40px;
+        top: -7px;
+        position: absolute;
+    
+        border-color: transparent transparent #FFF #FFF;
+        transform: rotate(135deg);
+      }
+    
+      &:before {
+        content: "";
+        width: 0;
+        height: 0;
+        left: 40px;
+        top: -8px;
+        position: absolute;
+    
+        border-color: transparent transparent #BDBDBD #BDBDBD;
+        transform: rotate(135deg);
+      }
+    
+  }
+`;
+
+export { TooltipBox, TooltipCard, TooltipText, Wrapper, buttonCheck, postContainer, postDescription, postHeader, postImage, postTitle, postVideo };

package/dist/esm/src/components/FI/searchBox/SearchBoxStyles.js

@@ -0,0 +1,23 @@
+import styled from 'styled-components';
+
+const Container = styled.div `
+    width: 100%;
+    min-height: 127px;
+    background-color: ${({ theme }) => theme.colors.shadeWhite};
+    border: 1px solid ${({ theme }) => theme.colors.neutralsGrey5};
+    border-radius: 8px;
+`;
+const Typography = styled.div `
+    font-family: Work Sans;
+    font-size: 20px;
+    font-weight: 500;
+    line-height: 23px;
+    color: ${({ theme }) => theme.colors.primary1};
+    margin-top: 16px;
+    margin-left: 16px;
+`;
+const ContainerSearch = styled.div `
+    margin: 24px 16px 16px 16px;
+`;
+
+export { Container, ContainerSearch, Typography };

package/dist/esm/src/components/FI/searchBox/index.js

@@ -0,0 +1,11 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { ThemeProvider } from 'styled-components';
+import { FRSTTheme } from '../../../theme/index.js';
+import { Container, Typography, ContainerSearch } from './SearchBoxStyles.js';
+import SearchField from '../../search-field/index.js';
+
+function SearchBox(props) {
+    return (jsx(ThemeProvider, { theme: FRSTTheme, children: jsxs(Container, { style: { ...props.style }, children: [jsx(Typography, { children: props.textTitle ? props.textTitle : props.textTitle }), jsx(ContainerSearch, { children: jsx(SearchField, { hasSearchIcon: true, textButton: props.textButton ? props.textButton : '', placeholder: props.textPlaceholder ? props.textPlaceholder : '', handleClickButton: props.handleClickSearchButton, onChange: props.onChange }) })] }) }));
+}
+
+export { SearchBox as default };

package/dist/esm/src/components/FI/sessionFilters/index.js

@@ -0,0 +1,72 @@
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import { ThemeProvider } from 'styled-components';
+import { FRSTTheme } from '../../../theme/index.js';
+import { ContainerFilter, ButtonList, SelectedItens, LabelSelect, ButtonSessionFilters } from './sessionFiltersStyle.js';
+import { Trash, Handshake, Mission, Lamp } from '../../../shared/icons.js';
+import { useState, useEffect } from 'react';
+import { Select, MenuItem, Checkbox, ListItemText } from '@mui/material';
+
+const MenuProps = {
+    PaperProps: {
+        style: {
+            overflow: 'auto',
+            maxHeight: 255,
+            borderRadius: 8,
+        },
+    },
+};
+function SessionFilters(props) {
+    const [selectedFilter, setSelectedFilter] = useState(props.selectedFilter);
+    const [selectFilterContent, setSelectFilterContent] = useState([]);
+    const [isVisibleSelect, setIsVisibleSelect] = useState(false);
+    const [isVisiblePlaceholderSelect, setIsVisiblePlaceholderSelect] = useState(true);
+    useEffect(() => {
+        setSelectedFilter(props.selectedFilter);
+    }, [props.selectedFilter]);
+    useEffect(() => {
+        setIsVisiblePlaceholderSelect(props.isVisiblePlaceholderSelect);
+    }, [props.isVisiblePlaceholderSelect]);
+    useEffect(() => {
+        setIsVisibleSelect(props.isVisibleSelect);
+    }, [props.isVisibleSelect]);
+    const selectItem = (item) => {
+        let index = selectFilterContent.indexOf(item.title);
+        let newArray = [].concat(selectFilterContent);
+        if (selectFilterContent.includes(item.title)) {
+            newArray.splice(index, 1);
+            setSelectFilterContent(currentValue => newArray);
+        }
+        else {
+            newArray.push(item.title);
+            setSelectFilterContent(currentValue => newArray);
+        }
+    };
+    function FilterButton(props) {
+        return (jsx(Fragment, { children: props.variant === 'myBusiness' ?
+                jsxs(ButtonSessionFilters, { active: selectedFilter === props.id, onClick: props.handleClick, children: [jsx(Handshake, {}), props.label] })
+                : props.variant === 'mission' ?
+                    jsxs(ButtonSessionFilters, { active: selectedFilter === props.id, onClick: props.handleClick, children: [jsx(Mission, {}), props.label] })
+                    : props.variant === 'trail' ?
+                        jsxs(ButtonSessionFilters, { active: selectedFilter === props.id, onClick: props.handleClick, children: [jsx(Lamp, {}), props.label] })
+                        : null }));
+    }
+    return (jsx(ThemeProvider, { theme: FRSTTheme, children: jsxs(ContainerFilter, { style: { ...props.style }, children: [props.labelFilters, jsx(ButtonList, { children: props.filterList.map((item, index) => {
+                        return (jsx("div", { style: { marginRight: 24 }, children: FilterButton({ variant: item.variant, label: item.label, id: item.id, handleClick: item.handleClick }) }, index));
+                    }) }), props.selectedFilterContentList ?
+                    jsxs(Fragment, { children: [isVisibleSelect && jsx(Fragment, { children: props.labelSelectItens }), jsxs(SelectedItens, { children: [isVisibleSelect ?
+                                        jsxs(Fragment, { children: [isVisiblePlaceholderSelect && jsx(LabelSelect, { isVisible: true, children: props.textLabelSelect }), jsx(Select, { multiple: true, labelId: 'selectedFilterInfoLabel', id: 'selectedFilterInfo', value: selectFilterContent, 
+                                                    // renderValue={(selected) =>`${selected.length} ${selected.length > 1 ? props.textMultipleSelected : props.textSingleSelected}`}
+                                                    renderValue: () => props.textSelectedItems, style: { height: 48, width: 384 }, MenuProps: MenuProps, onChange: props.handleSelectedFilterData(selectFilterContent), children: props.selectedFilterContentList.map((item) => (jsxs(MenuItem, { onClick: () => selectItem(item), defaultValue: item.title, style: { borderBottom: `1px solid ${FRSTTheme['colors'].neutralsGrey7}` }, children: [jsx(Checkbox, { checked: selectFilterContent.indexOf(item.title) > -1, sx: {
+                                                                    color: FRSTTheme['colors'].neutralsGrey5,
+                                                                    '&.Mui-checked': {
+                                                                        color: FRSTTheme['colors'].primary1,
+                                                                    },
+                                                                } }), jsx(ListItemText, { style: { color: FRSTTheme['colors'].neutralsGrey1, fontSize: 16, fontWeight: 400 }, primary: item.title })] }, item.id))) })] })
+                                        :
+                                            jsx("div", {}), jsxs("div", { style: { color: FRSTTheme['colors'].linkOnfocus, marginRight: 24, cursor: 'pointer', display: 'flex', justifyContent: 'flex-end' }, 
+                                        // onClick={props.handleDeleteFilter}
+                                        onClick: () => setSelectFilterContent(currentValue => []), children: [jsx(Trash, { fill: FRSTTheme['colors'].linkOnfocus }), "\u00A0", props.textDeleteFilter] })] })] })
+                    : null] }) }));
+}
+
+export { SessionFilters as default };