groundfloor-react-ui 1.2.9 → 1.2.10

package/components/ArrowBar/ArrowBar.js

@@ -1,276 +0,0 @@
-import PropTypes from 'prop-types';
-import React, { useEffect, useRef, useState } from 'react';
-import styled, { css, useTheme } from 'styled-components';
-import defaultThemeColor from '../constants/defaultThemeColor';
-
-const StyledArrowBar = styled.div`
-    color: ${({ theme, variant }) => variant ? theme.variant[variant] : 'white'};
-    ${({ scroll }) => {
-        if (scroll) {
-            return css`
-                display: flex;
-                overflow-x: auto;
-            `
-        } else {
-            return css`
-                display: grid;
-                grid-template-columns: ${({ arrowNumber }) => `repeat(${arrowNumber}, 1fr)`};
-            `
-        }
-    }}
-`;
-
-const StyledArrow = styled.div`
-    min-height: 40px;
-    max-height: 40px;
-    background-color: ${({ color }) => color};
-    align-items: center;
-    display: flex;
-    cursor:  ${({ clickable }) => clickable ? 'pointer' : 'default'};
-  
-    ${({ index, dataLength }) => {
-        if (index === 0) {
-            return css`
-                    clip-path: polygon(0 0, calc(100% - 9px) 0, 100% 50%, calc(100% - 9px) 100%, 0 100%);
-                    border-top-left-radius: 20px;
-                    border-bottom-left-radius: 20px;
-                `
-        } else if (index === dataLength - 1) {
-            return css`
-                    clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%, calc(0% + 9px) 50%);
-                    margin-left: -5px;
-                `
-        } else {
-            return css`
-                    clip-path: polygon(0 0, calc(100% - 9px) 0, 100% 50%, calc(100% - 9px) 100%, 0 100%, calc(0% + 9px) 50%);
-                    margin-left: -5px;
-                `
-        }
-    }}
-
-    ${({ scroll }) => {
-        if (scroll) {
-            return css`
-            width:100%;
-            `
-        } else {
-            return css`
-                flex-shrink: 1;
-                min-width: 15px;
-                flex-grow: 1;
-                flex-basis: auto;
-
-                &:hover {
-                    width:  -webkit-fill-available;
-                }
-            `
-        }
-    }}
-`;
-
-const StyledArrowContent = styled.div`
-    padding: 0 15px;
-    display: flex;
-    align-items: center;
-    justify-content: space-around;
-    width: 100%;
-    white-space: nowrap;
-    overflow: hidden;
-    text-overflow: ellipsis;
-   
-    & span{
-        font-size: 22px;
-        font-weight: 400;
-        padding-right: 5px;
-
-        ${({ scroll }) => {
-        if (!scroll) {
-            return css`
-                display: ${({ styleArrowContentSpan }) => styleArrowContentSpan.display};
-                white-space: nowrap;
-                overflow: hidden;
-                text-overflow: ellipsis;
-                `
-        }
-    }}
-    }
-
-    & p{
-        margin: 0;
-        font-weight: 600;
-
-        ${({ scroll }) => {
-        if (scroll) {
-            return css`
-                    font-size: 14px;
-                `
-        } else {
-            return css`
-                    font-size: ${({ styleArrowContentP }) => styleArrowContentP.fontSize};
-                    display: ${({ styleArrowContentP }) => styleArrowContentP.display};
-                    white-space: nowrap;
-                    overflow: hidden;
-                    text-overflow: ellipsis;
-                `
-        }
-    }}
-    }
-
-    ${({ scroll }) => {
-        if (!scroll) {
-            return css`
-            ${StyledArrow}:hover & {
-                ${({ styleArrowContentSpan, styleArrowContentP }) => {
-                    if (styleArrowContentP?.display === 'none' && styleArrowContentSpan?.display === 'none') {
-                        return css`
-                                    span {
-                                        display: block;
-                                    }
-                                    p {
-                                        display: block;
-                                    }
-                                `
-                    } else if (styleArrowContentP?.display === 'none') {
-                        return css`
-                                    p {
-                                        display: block;
-                                    }
-                                `
-                    }
-                }}
-            };
-            `
-        }
-    }}
-`;
-
-export const ArrowBar = ({ variant, data, scroll, onClick, clickable, ...props }) => {
-    const activeTheme = useTheme() || defaultThemeColor;
-
-    const arrowBarRef = useRef(null)
-    const arrowRef = useRef(null)
-
-    const [widthArrow, setWidthArrow] = useState(undefined);
-    const [widthArrowBar, setWidthArrowBar] = useState(undefined);
-
-    let styleArrowContentP = {
-        fontSize: '',
-        display: '',
-    }
-
-    let styleArrowContentSpan = {
-        fontSize: '',
-        display: '',
-    }
-
-    const handleWindowResize = () => {
-        arrowBarRef && setWidthArrowBar(arrowBarRef?.current?.offsetWidth)
-    }
-
-    useEffect(() => {
-        handleWindowResize();
-    }, [data, widthArrowBar])
-
-    //On component mount add event listener 
-    useEffect(() => {
-        if (!scroll) {
-            // Monitor the width of the viewPort to adjust the text of the arrow accordingly
-            window.addEventListener("resize", handleWindowResize);
-            return () => (window.removeEventListener("resize", handleWindowResize))
-        }
-    }, [])
-
-    useEffect(() => {
-        if (!scroll) {
-            setWidthArrow(arrowRef?.current.offsetWidth);
-        }
-    }, [data, widthArrowBar, widthArrow]);
-
-    //Get index of the longest value + label
-    const longest = data.reduce(
-        function (a, b) {
-            return (a.label.length * 9) + (a.value.toString().length * 13) > (b.label.length * 9) + (b.value.toString().length * 13) ? a : b;
-        }
-    );
-
-    // Calculate threshould base on lenght of value and label string
-    // 15px padding left + (13px x ch VALUE) + 5px padding + (9px x ch LABEL) + 15px padding right
-    function setThreshould(longest) {
-        return {
-            step1: 15 + (longest.value.toString().length * 13) + 5 + (longest.label.length * 9) + 15, //reduce font of LABEL
-            step2: 15 + (longest.value.toString().length * 13) + 5 + (longest.label.length * 7) + 15, //hide LABEL
-            step3: 15 + (longest.value.toString().length * 13) + 5 + 15, //hide VALUE
-        }
-    }
-
-    //Each time the component re-render check the width of the Arrow with the longest content and set font dimentions
-    if (!scroll) {
-        const threshould = setThreshould(longest)
-
-        if (widthArrow < threshould.step3) {
-            styleArrowContentSpan.display = "none";
-            styleArrowContentP.display = "none";
-        } else if (widthArrow < threshould.step2) {
-            styleArrowContentP.display = "none";
-        } else if (widthArrow < threshould.step1) {
-            styleArrowContentP.fontSize = "12px";
-        } else {
-            styleArrowContentP.fontSize = "14px";
-        }
-    }
-
-    const ArrowContent = (value, label) => {
-        return (
-            <StyledArrowContent styleArrowContentP={styleArrowContentP} styleArrowContentSpan={styleArrowContentSpan} scroll={scroll}>
-                <span >{value}</span><p>{label}</p>
-            </StyledArrowContent>
-        )
-    };
-
-    return (
-        <StyledArrowBar theme={activeTheme} variant={variant} ref={scroll ? null : arrowBarRef} arrowNumber={data.length} scroll={scroll} >
-            {data.map((singleData, index) => {
-                return (
-                    // Add the ref to the Arrow with the longest text label + value
-                    <StyledArrow id={singleData.id} theme={activeTheme} onClick={clickable ? (e) => onClick(e, singleData) : null} clickable={clickable} scroll={scroll} ref={scroll ? null : singleData.label === longest.label ? arrowRef : null} key={'fa' + index + '-' + singleData.label} index={index} dataLength={data.length} color={singleData.color}>
-                        {ArrowContent(singleData.value, singleData.label)}
-                    </StyledArrow>
-                )
-            })}
-        </StyledArrowBar>
-    )
-}
-
-ArrowBar.propTypes = {
-    /**
-     * Color of the arrows text. primary-1, 2, error, etc.
-     */
-    variant: PropTypes.string,
-
-    /**
-     * Array of data. Each element of the array is an object in this format:
-     * { value: 16, label: "Complete", color: '#34cc73' },
-     */
-    data: PropTypes.array,
-    /**
-     * True the bar will not shrink but will be scrollable
-     * False the bar will shrink and hide its content base on the width
-     */
-    scroll: PropTypes.bool,
-    /**
-     * Click handler
-     */
-    onClick: PropTypes.func,
-    /**
-     * If true the cursor is a pointer and click handler active
-     */
-    clickable: PropTypes.bool,
-}
-
-ArrowBar.defaultProps = {
-    variant: null,
-    data: [],
-    scroll: true,
-    onClick: undefined,
-    clickable: false
-}

package/components/ArrowBar/index.js

@@ -1,2 +0,0 @@
-export * from './ArrowBar';
-

package/components/Avatar/Avatar.js

@@ -1,171 +0,0 @@
-import PropTypes from 'prop-types';
-import React, { useState } from "react";
-import styled, { useTheme } from 'styled-components';
-import defaultStyles from '../constants/defaultStyle';
-import defaultThemeColor from "../constants/defaultThemeColor";
-import { Image } from '../Images';
-
-/**
- * Primary UI component for user interaction
- */
-const StyledContainer = styled.span`
-${({ inBuiltCss, type, customStyles }) => {
-        if (inBuiltCss) {
-            let tempObj = {};
-            if (inBuiltCss[type]) {
-                for (const property in inBuiltCss['common']) {
-                    tempObj[property] = inBuiltCss['common'][property]
-                }
-                for (const property in inBuiltCss[type]) {
-                    tempObj[property] = inBuiltCss[type][property]
-                    delete inBuiltCss.common[property]
-                }
-            }
-            return { ...tempObj, ...customStyles };
-        }
-    }}
-`;
-
-const StyledCircle = styled.div`
-
-    background-color:${({ theme }) => theme.primary['primary-1']};
-    color: ${({ theme }) => theme.bgColor};
-    ${({ inBuiltCss, type, size, customStyles }) => {
-        if (inBuiltCss) {
-            let tempObj = {};
-            if (inBuiltCss[type]) {
-                for (const property in inBuiltCss['common']) {
-                    tempObj[property] = inBuiltCss['common'][property]
-                }
-                for (const property in inBuiltCss[type]) {
-                    tempObj[property] = inBuiltCss[type][property]
-                    delete inBuiltCss.common[property]
-                }
-                for (const property in inBuiltCss[`${type}${size}`]) {
-                    tempObj[property] = inBuiltCss[`${type}${size}`][property]
-                    delete inBuiltCss.common[property]
-                }
-            }
-            return { ...tempObj, ...customStyles };
-        }
-    }}
-`;
-
-const StyledName = styled.span`
-
-color:${({ theme }) => theme.textColor};
-
-${({ inBuiltCss, type, size, customStyles }) => {
-        if (inBuiltCss) {
-            let tempObj = {};
-            if (inBuiltCss[type]) {
-                for (const property in inBuiltCss['common']) {
-                    tempObj[property] = inBuiltCss['common'][property]
-                }
-                for (const property in inBuiltCss[type]) {
-                    delete inBuiltCss.common[property]
-                    tempObj[property] = inBuiltCss[type][property]
-                }
-                for (const property in inBuiltCss[`${type}${size}`]) {
-                    tempObj[property] = inBuiltCss[`${type}${size}`][property]
-                    delete inBuiltCss.common[property]
-                }
-            }
-            return { ...tempObj, ...customStyles };
-        }
-    }}
-`;
-
-export const Avatar = ({
-    customStylesContainer,
-    customStylesImage,
-    customStylesCircle,
-    customStylesName,
-    size,
-    toggleName,
-    user,
-    border,
-    ...props
-}) => {
-
-    const [avatarStatus, setAvatarStatus] = useState("loading");
-
-    const handleImageStatus = (imageStatus) => {
-        setAvatarStatus(imageStatus);
-    }
-    const activeTheme = useTheme() || defaultThemeColor
-
-
-
-    return (
-        <StyledContainer inBuiltCss={defaultStyles} border={border} theme={activeTheme} customStyles={customStylesContainer} type={'avatarContainer'} {...props}>
-            {user?.url && <Image
-                {...props}
-                customStyles={customStylesImage}
-                type={'imageAvatar'}
-                size={size}
-                alt="user-picture"
-                src={user.url}
-                handleImageStatus={handleImageStatus}
-                style={{ visibility: avatarStatus !== "loaded" ? 'hidden' : 'visible' }}
-            />}
-
-            <StyledCircle {...props}
-                theme={activeTheme}
-                inBuiltCss={defaultStyles}
-                type={'avatarCircle'}
-                customStyles={customStylesCircle} size={size}
-                style={{ visibility: avatarStatus !== "loaded" ? 'visible' : 'hidden' }}
-            >
-                {
-                    user?.userName && user?.userName.split(" ").length >= 2 ? user?.userName.split(" ")[0].charAt(0).toUpperCase() + user?.userName.split(" ")[1].charAt(0).toUpperCase()
-                        : user?.userName && user?.userName.split(" ").length === 1 && user?.userName.split(" ")[0].charAt(0).toUpperCase()
-                }
-            </StyledCircle>
-            {toggleName && <StyledName inBuiltCss={defaultStyles} {...props} theme={activeTheme} type={'avatarName'} customStyles={customStylesName} size={size}>{user.userName} </StyledName>}
-        </StyledContainer>
-    );
-};
-
-Avatar.propTypes = {
-    /**
-     * Custom style for circle
-     */
-    customStylesCircle: PropTypes.object,
-    /**
-     * Custom style for name
-     */
-    customStylesName: PropTypes.object,
-    /**
-     * Optional Custom color of the circle
-     */
-    customStylesContainer: PropTypes.object,
-    /**
-     * Optional Custom color of the border circle (if missing no border displayed)
-     */
-    customStylesImage: PropTypes.object,
-    /**
-     * Toggle name visibility
-     */
-    toggleName: PropTypes.bool,
-    /**
-     * How large should the Avatar be?
-     */
-    size: PropTypes.oneOf(['SM', 'MD', 'LG']),
-    /**
-     * Object with user information. To display the user's picture need a key "url". To display the name need a key "userName"
-     */
-    user: PropTypes.object,
-
-};
-
-Avatar.defaultProps = {
-    block: false,
-    size: 'MD',
-    toggleName: false,
-    user: null,
-    customStylesContainer: null,
-    customStylesImage: null,
-    customStylesCircle: null,
-    customStylesName: null,
-};

package/components/Avatar/AvatarSB.js

@@ -1,255 +0,0 @@
-import PropTypes from 'prop-types';
-import React, { useState } from 'react';
-import styled, { css, useTheme } from 'styled-components';
-import defaultStyles from '../constants/defaultStyle';
-import defaultThemeColor from '../constants/defaultThemeColor';
-import { Image } from '../Images';
-
-/**
- * Primary UI component for user interaction
- */
-const StyledContainer = styled.span`
-  ${({ inBuiltCss, type, customStyles }) => {
-        if (inBuiltCss) {
-            let tempObj = {};
-            if (inBuiltCss[type]) {
-                for (const property in inBuiltCss['common']) {
-                    tempObj[property] = inBuiltCss['common'][property];
-                }
-                for (const property in inBuiltCss[type]) {
-                    tempObj[property] = inBuiltCss[type][property];
-                    delete inBuiltCss.common[property];
-                }
-            }
-            return { ...tempObj, ...customStyles };
-        }
-    }}
-  width: auto;
-`;
-
-const StyledCircle = styled.div`
-  background-color: ${({ theme }) => theme.primary['primary-1']};
-  color: ${({ theme }) => theme.bgColor} !important;
-  ${({ inBuiltCss, type, size, customStyles }) => {
-        if (inBuiltCss) {
-            let tempObj = {};
-            if (inBuiltCss[type]) {
-                for (const property in inBuiltCss['common']) {
-                    tempObj[property] = inBuiltCss['common'][property];
-                }
-                for (const property in inBuiltCss[type]) {
-                    tempObj[property] = inBuiltCss[type][property];
-                    delete inBuiltCss.common[property];
-                }
-                for (const property in inBuiltCss[`${type}${size}`]) {
-                    tempObj[property] = inBuiltCss[`${type}${size}`][property];
-                    delete inBuiltCss.common[property];
-                }
-            }
-            return { ...tempObj, ...customStyles };
-        }
-    }}
-  ${({ isSelected, selectedStyle, notSelectedStyle }) => {
-        if (isSelected) {
-            return css`
-        min-width: 42px;
-        min-height: 42px;
-        ${selectedStyle}
-      `;
-        } else {
-            return css`
-        ${notSelectedStyle}
-      `;
-        }
-    }}
-    font-weight: 600;
-`;
-
-//Create the style for the Avatar
-
-//   let customStylesCircle = {}
-//   let customStylesContainer = {}
-//   customStylesCircle.border = app.userName === selectedApp.lev1 ? `2px solid rgba(255, 255, 255, 0.3)` : `2px solid #2240CB`
-//   customStylesCircle.backgroundColor = app.userName === selectedApp.lev1 ? '#1D36AD' : '#2240CB'
-//   customStylesCircle.width = app.userName === selectedApp.lev1 ? '42px' : '38px'
-//   customStylesCircle.height = app.userName === selectedApp.lev1 ? '42px' : '38px'
-//   customStylesCircle.fontWeight = '600'
-//   customStylesContainer.width = 'auto'
-//   console.log("customStylesCircle" + i + ": ", customStylesCircle)
-
-const StyledName = styled.span`
-  color: ${({ theme }) => theme.textColor};
-  background-color: transparent !important;
-
-  ${({ inBuiltCss, type, size, customStyles }) => {
-        if (inBuiltCss) {
-            let tempObj = {};
-            if (inBuiltCss[type]) {
-                for (const property in inBuiltCss['common']) {
-                    tempObj[property] = inBuiltCss['common'][property];
-                }
-                for (const property in inBuiltCss[type]) {
-                    delete inBuiltCss.common[property];
-                    tempObj[property] = inBuiltCss[type][property];
-                }
-                for (const property in inBuiltCss[`${type}${size}`]) {
-                    tempObj[property] = inBuiltCss[`${type}${size}`][property];
-                    delete inBuiltCss.common[property];
-                }
-            }
-            return { ...tempObj, ...customStyles };
-        }
-    }}
-
-  &:hover {
-    ${({ inBuiltCss, type, size, customStylesHover }) => {
-        if (inBuiltCss) {
-            let tempObj = {};
-            // if (inBuiltCss[type]) {
-            //     for (const property in inBuiltCss['common']) {
-            //         tempObj[property] = inBuiltCss['common'][property]
-            //     }
-            //     for (const property in inBuiltCss[type]) {
-            //         delete inBuiltCss.common[property]
-            //         tempObj[property] = inBuiltCss[type][property]
-            //     }
-            //     for (const property in inBuiltCss[`${type}${size}`]) {
-            //         tempObj[property] = inBuiltCss[`${type}${size}`][property]
-            //         delete inBuiltCss.common[property]
-            //     }
-            // }
-            return { ...tempObj, ...customStylesHover };
-        }
-    }}
-  }
-`;
-
-export const AvatarSB = ({
-    customStylesContainer,
-    customStylesImage,
-    customStylesCircle,
-    customStylesName,
-    customStylesNameHover,
-    size,
-    toggleName,
-    user,
-    border,
-    isSelected,
-    selectedStyle,
-    notSelectedStyle,
-    ...props
-}) => {
-    const activeTheme = useTheme() || defaultThemeColor;
-
-    const [avatarStatus, setAvatarStatus] = useState('loading');
-
-    const handleImageStatus = (imageStatus) => {
-        setAvatarStatus(imageStatus);
-    };
-    return (
-        <StyledContainer
-            border={border}
-            inBuiltCss={defaultStyles}
-            customStyles={customStylesContainer}
-            type={'avatarContainer'}
-            {...props}
-        >
-            {user?.url && (
-                <Image
-                    {...props}
-                    inBuiltCss={defaultStyles}
-                    customStyles={customStylesImage}
-                    type={'imageAvatar'}
-                    size={size}
-                    alt='user-picture'
-                    src={user.url}
-                    handleImageStatus={handleImageStatus}
-                    style={{
-                        visibility: avatarStatus !== 'loaded' ? 'hidden' : 'visible',
-                    }}
-                />
-            )}
-
-            <StyledCircle
-                {...props}
-                theme={activeTheme}
-                selectedStyle={selectedStyle}
-                notSelectedStyle={notSelectedStyle}
-                inBuiltCss={defaultStyles}
-                type={'avatarCircle'}
-                customStyles={customStylesCircle}
-                size={size}
-                style={{ visibility: avatarStatus !== 'loaded' ? 'visible' : 'hidden' }}
-                isSelected={isSelected}
-            >
-                {user?.userName && user?.userName.split(' ').length >= 2
-                    ? user?.userName.split(' ')[0].charAt(0).toUpperCase() +
-                    user?.userName.split(' ')[1].charAt(0).toUpperCase()
-                    : user?.userName &&
-                    user?.userName.split(' ').length === 1 &&
-                    user?.userName.split(' ')[0].charAt(0).toUpperCase()}
-            </StyledCircle>
-            {toggleName && (
-                <StyledName
-                    theme={activeTheme}
-                    {...props}
-                    inBuiltCss={defaultStyles}
-                    type={'avatarName'}
-                    customStyles={customStylesName}
-                    customStylesHover={customStylesNameHover}
-                    size={size}
-                >
-                    {user.userName}{' '}
-                </StyledName>
-            )}
-        </StyledContainer>
-    );
-};
-
-AvatarSB.propTypes = {
-    /**
-     * Custom style for circle
-     */
-    customStylesCircle: PropTypes.object,
-    /**
-     * Custom style for name
-     */
-    customStylesName: PropTypes.object,
-    /**
-     * Optional Custom color of the circle
-     */
-    customStylesContainer: PropTypes.object,
-    /**
-     * Optional Custom color of the border circle (if missing no border displayed)
-     */
-    customStylesImage: PropTypes.object,
-    /**
-     * Toggle name visibility
-     */
-    toggleName: PropTypes.bool,
-    /**
-     * How large should the Avatar be?
-     */
-    size: PropTypes.oneOf(['SM', 'MD', 'LG']),
-    /**
-     * Object with user information. To display the user's picture need a key "url". To display the name need a key "userName"
-     */
-    user: PropTypes.object,
-    customStylesNameHover: PropTypes.object,
-
-    // border,
-    // isSelected,
-    // selectedStyle,
-    // notSelectedStyle,
-};
-
-AvatarSB.defaultProps = {
-    block: false,
-    size: 'MD',
-    toggleName: false,
-    user: null,
-    customStylesContainer: null,
-    customStylesImage: null,
-    customStylesCircle: null,
-    customStylesName: null,
-};