groundfloor-react-ui 1.0.18 → 1.0.21

package/components/Sidebar/Navbar.js

@@ -1,126 +1,127 @@
-import React, { useEffect, useState } from "react";
-import ReactDom from 'react-dom'
-import PropTypes from 'prop-types';
-import styled, { css } from 'styled-components';
-import defaultStyles from '../constants/defaultStyle';
-import { AvatarSB, AvatarSBfooter } from '../Avatar'
-import { AccordionSB, AccordionSBfooter } from '../Accordion'
-import { Icon } from '../Icon'
-
+import React, { useState } from 'react';
+import styled, { useTheme } from 'styled-components';
+import { AccordionSB, AccordionSBfooter } from '../Accordion';
+import { AvatarSB, AvatarSBfooter } from '../Avatar';
+import defaultThemeColor from '../constants/defaultThemeColor';
 
 const StyledHeader = styled.div`
-min-height: 51px;
-display: flex;
-background-color: #193096;
-align-items: center;
-padding-left: 24.5px;
+  min-height: 51px;
+  display: flex;
+  background-color: ${({ theme }) => theme.primary['primary-1']};
+  align-items: center;
+  padding-left: 24.5px;
 
-&::hover{
-    &>.chevron-navbar{
-        background-color: white;
-        color: blue;
-        cursor: pointer;
+  &::hover {
+    & > .chevron-navbar {
+      background-color: ${({ theme }) => theme.bgColor};
+      color: ${({ theme }) => theme.primary['primary-1']};
+      cursor: pointer;
     }
-}
-`
+  }
+
+  ${({ headerStyles }) => headerStyles}
+`;
 
 const StyledBody = styled.div`
-display: flex;
-background-color: transparent;
-flex-direction: column;
-align-items: center;
-width: 100%;
-`
+  display: flex;
+  background-color: transparent;
+  flex-direction: column;
+  align-items: center;
+  width: 100%;
+`;
 
 const ListElement = styled.div`
-display: flex;
-align-items: center;
-cursor: pointer;
+  display: flex;
+  align-items: center;
+  cursor: pointer;
 
-&:hover{
-    p{
-        text-decoration: underline
+  &:hover {
+    p {
+      ${({ listElementStyle }) => listElementStyle}
     }
-}
+  }
 
-span{
+  span {
     width: 7px;
     height: 7px;
     border-radius: 50%;
-    background-color: white;
+    background-color: ${({ theme }) => theme.bgColor};
     margin-right: 31px;
-}
+  }
 
-p{
+  p {
     margin: 8.25px 0;
-}
-`
+  }
+`;
 
 const StyledFooter = styled.div`
-display: flex;
-background-color: transparent;
-flex-direction: column;
-align-items: center;
-width: 100%;
-margin-top: auto;
-`
+  display: flex;
+  background-color: transparent;
+  flex-direction: column;
+  align-items: center;
+  width: 100%;
+  margin-top: auto;
+`;
 
 const ListElementFooter = styled.div`
-display: flex;
-align-items: center;
-cursor: pointer;
+  display: flex;
+  align-items: center;
+  cursor: pointer;
 
-&:hover{
-    p{
-        text-decoration: underline
+  &:hover {
+    p {
+      ${({ listElementStyle }) => listElementStyle}
     }
-}
+  }
 
-span{
+  span {
     width: 7px;
     height: 7px;
     border-radius: 50%;
-    background-color: white;
+    background-color: ${({ theme }) => theme.bgColor};
     margin-right: 31px;
-}
+  }
 
-p{
+  p {
     margin: 8.25px 0;
-}
-`
+  }
+`;
 
 export const Navbar = ({
-    theme,
     headerContent,
     bodyContent,
     footerContent,
     selectedApp,
     setApp,
     toggleSideBarOpen,
+    headerStyles,
+    selectedStyle,
+    notSelectedStyle,
+    customStylesNameHover,
+    listElementStyle,
     ...props
 }) => {
+    const activeTheme = useTheme() || defaultThemeColor;
 
     const [accordionOpen, setAccordionOpen] = useState(null);
     const [accordionFooterOpen, setAccordionFooterOpen] = useState(null);
 
     function handleClick(index) {
-        setAccordionFooterOpen(null)
-        setAccordionOpen(index)
+        setAccordionFooterOpen(null);
+        setAccordionOpen(index);
     }
 
     function handleClickFooter(index) {
-        setAccordionOpen(null)
-        setAccordionFooterOpen(index)
+        setAccordionOpen(null);
+        setAccordionFooterOpen(index);
     }
 
     return (
         <div
-            onMouseLeave={
-                () => {
-                    setAccordionOpen(null)
-                    setAccordionFooterOpen(null)
-                }
-            }
+            onMouseLeave={() => {
+                setAccordionOpen(null);
+                setAccordionFooterOpen(null);
+            }}
             style={{
                 display: 'flex',
                 flexDirection: 'column',
@@ -128,84 +129,105 @@ export const Navbar = ({
             }}
             className={'NavbarDiv'}
         >
-            <StyledHeader>
+            <StyledHeader theme={activeTheme} headerStyles={headerStyles}>
                 {headerContent}
             </StyledHeader>
             <StyledBody>
                 {bodyContent?.map((app, i) => {
-                    return (<AccordionSB
-                        key={app.id}
-                        index={i}
-                        handleClick={(index) => { handleClick(index) }}
-                        isAccordionOpen={i === accordionOpen}
-                        isSelected={app.userName === selectedApp.lev1}
-                        customStylesAccordionContainer={{
-                            padding: '0',
-                            'box-shadow': 'none',
-                            'border-radius': '0px',
-                            'background-color': 'transparent',
-                        }}
-                        customStylesAccordionTogggle={{
-                            padding: '0',
-                            'box-shadow': 'none',
-                            'border-radius': '0px',
-                            'background-color': 'transparent',
-                            'padding-left': '16px',
-                            'padding-top': '7.5px',
-                            'padding-bottom': '7.5px',
-                            cursor: 'pointer',
-                        }}
-                        customStylesAccordionContent={{
-                            transition: 'height ease 0.2s', //transform ease 95ms',
-                            overflow: 'hidden',
-                            padding: '0',
-                            'background-color': 'transparent',
-                            color: 'white',
-                            position: 'relative',
-                            'box-shadow': 'none',
-                        }}
-                        contentToggle={
-                            <AvatarSB
-                                toggleName={toggleSideBarOpen}//isOpen} //true}
-                                customStylesName={{
-                                    'white-space': 'nowrap',
-                                    'overflow': 'hidden',
-                                    'text-overflow': 'ellipsis',
-                                    'color': 'white',
-                                    'font-weight': app.userName === selectedApp.lev1 ? '600' : '400',
-                                }}
-                                customStylesNameHover={{
-                                    'text-decoration': 'underline',
-                                }}
-                                size={'LG'}
-                                user={app}
-                                isSelected={app.userName === selectedApp.lev1}
-                            />
-                        }
-                        content={
-                            <div style={{ margin: '0', padding: '0', paddingLeft: '32px', marginBottom: '18.25px' }}>
-                                {app.subdirectory?.map((sub, i) => {
-                                    return (
-                                        <ListElement
-                                            key={app.id + sub}
-                                            onClick={() => {
-                                                console.log("Click: ", app.fullName, sub)
-                                                setApp({ lev1: `${app.userName}`, lev2: `${sub}` })
-                                            }}>
-                                            <span style={{ visibility: selectedApp.lev2 === sub ? 'visible' : 'hidden' }}></span>
-                                            <p style={{ marginTop: i === 0 && '0px' }}>{sub}</p>
-                                        </ListElement>
-                                    )
-                                })}
-                            </div>
-                        }
-                    />)
+                    return (
+                        <AccordionSB
+                            key={app.id}
+                            index={i}
+                            handleClick={(index) => {
+                                handleClick(index);
+                            }}
+                            isAccordionOpen={i === accordionOpen}
+                            isSelected={app.userName === selectedApp.lev1}
+                            customStylesAccordionContainer={{
+                                padding: '0',
+                                'box-shadow': 'none',
+                                'border-radius': '0px',
+                                'background-color': 'transparent',
+                            }}
+                            customStylesAccordionTogggle={{
+                                padding: '0',
+                                'box-shadow': 'none',
+                                'border-radius': '0px',
+                                'background-color': 'transparent',
+                                'padding-left': '16px',
+                                'padding-top': '7.5px',
+                                'padding-bottom': '7.5px',
+                                cursor: 'pointer',
+                            }}
+                            customStylesAccordionContent={{
+                                transition: 'height ease 0.2s', //transform ease 95ms',
+                                overflow: 'hidden',
+                                padding: '0',
+                                'background-color': 'transparent',
+                                color: 'white',
+                                position: 'relative',
+                                'box-shadow': 'none',
+                            }}
+                            contentToggle={
+                                <AvatarSB
+                                    selectedStyle={selectedStyle}
+                                    notSelectedStyle={notSelectedStyle}
+                                    toggleName={toggleSideBarOpen} //isOpen} //true}
+                                    customStylesName={{
+                                        'white-space': 'nowrap',
+                                        overflow: 'hidden',
+                                        'text-overflow': 'ellipsis',
+                                        color: 'white',
+                                        'font-weight':
+                                            app.userName === selectedApp.lev1 ? '600' : '400',
+                                    }}
+                                    customStylesNameHover={customStylesNameHover}
+                                    size={'LG'}
+                                    user={app}
+                                    isSelected={app.userName === selectedApp.lev1}
+                                />
+                            }
+                            content={
+                                <div
+                                    style={{
+                                        margin: '0',
+                                        padding: '0',
+                                        paddingLeft: '32px',
+                                        marginBottom: '18.25px',
+                                    }}
+                                >
+                                    {app.subdirectory?.map((sub, i) => {
+                                        return (
+                                            <ListElement
+                                                listElementStyle={listElementStyle}
+                                                key={app.id + sub}
+                                                onClick={() => {
+                                                    console.log('Click: ', app.fullName, sub);
+                                                    setApp({ lev1: `${app.userName}`, lev2: `${sub}` });
+                                                }}
+                                            >
+                                                <span
+                                                    style={{
+                                                        visibility:
+                                                            selectedApp.lev2 === sub ? 'visible' : 'hidden',
+                                                    }}
+                                                ></span>
+                                                <p style={{ marginTop: i === 0 && '0px' }}>{sub}</p>
+                                            </ListElement>
+                                        );
+                                    })}
+                                </div>
+                            }
+                        />
+                    );
                 })}
             </StyledBody>
             <StyledFooter>
                 <AccordionSBfooter
                     index={0}
-                    handleClick={(index) => { handleClickFooter(index) }}
+                    handleClick={(index) => {
+                        handleClickFooter(index);
+                    }}
                     isAccordionOpen={0 === accordionFooterOpen}
                     customStylesAccordionContainer={{
                         padding: '0',
@@ -234,36 +256,41 @@ export const Navbar = ({
                     }}
                     contentToggle={
                         <AvatarSB
-                            toggleName={toggleSideBarOpen}//isOpen}//} //true}
+                            selectedStyle={selectedStyle}
+                            notSelectedStyle={notSelectedStyle}
+                            toggleName={toggleSideBarOpen} //isOpen}//} //true}
                             customStylesName={{
                                 'white-space': 'nowrap',
-                                'overflow': 'hidden',
+                                overflow: 'hidden',
                                 'text-overflow': 'ellipsis',
-                                'color': 'white',
+                                color: 'white',
                                 'font-weight': '400',
                             }}
-                            customStylesNameHover={{
-                                'text-decoration': 'underline',
-                            }}
+                            customStylesNameHover={customStylesNameHover}
                             size={'LG'}
-                            user={
-                                {
-                                    fullName: 'My Account',
-                                    userName: 'My Account',
-                                    url: "https://picsum.photos/30"
-                                }
-                            }
+                            user={{
+                                fullName: 'My Account',
+                                userName: 'My Account',
+                                url: 'https://picsum.photos/30',
+                            }}
                         />
                     }
                     content={
-                        <div style={{ margin: '0', padding: '0', paddingLeft: '32px', marginBottom: '18.25px' }}>
+                        <div
+                            style={{
+                                margin: '0',
+                                padding: '0',
+                                paddingLeft: '32px',
+                                marginBottom: '18.25px',
+                            }}
+                        >
                             <ListElementFooter
-                                onClick={() => {
-                                }}>
+                                listElementStyle={listElementStyle}
+                                onClick={() => { }}
+                            >
                                 <p>Change Password</p>
                             </ListElementFooter>
-                            <ListElementFooter
-                                onClick={() => { }}>
+                            <ListElementFooter onClick={() => { }}>
                                 <p>Sign Out</p>
                             </ListElementFooter>
                         </div>
@@ -298,24 +325,24 @@ export const Navbar = ({
                     }}
                     contentToggle={
                         <AvatarSBfooter
-                            toggleName={toggleSideBarOpen}//isOpen} //true}
+                            selectedStyle={selectedStyle}
+                            notSelectedStyle={notSelectedStyle}
+                            toggleName={toggleSideBarOpen} //isOpen} //true}
                             customStylesName={{
                                 'white-space': 'nowrap',
-                                'overflow': 'hidden',
+                                overflow: 'hidden',
                                 'text-overflow': 'ellipsis',
-                                'color': 'white',
+                                color: 'white',
                                 'font-weight': '400',
                             }}
                             customStylesNameHover={{
                                 'text-decoration': 'underline',
                             }}
                             size={'LG'}
-                            user={
-                                {
-                                    fullName: 'Users',
-                                    userName: 'Users',
-                                }
-                            }
+                            user={{
+                                fullName: 'Users',
+                                userName: 'Users',
+                            }}
                             value={'+' + footerContent.length}
                         />
                     }
@@ -323,6 +350,5 @@ export const Navbar = ({
                 />
             </StyledFooter>
         </div>
-    )
-}
-
+    );
+};

package/components/Tables/Table.js

@@ -1,16 +1,24 @@
-import React from 'react';
 import PropTypes from 'prop-types';
-import DataTable from "react-data-table-component";
+import React from 'react';
+import DataTable from 'react-data-table-component';
+import styled, { useTheme } from 'styled-components';
 import defaultStyles from '../constants/defaultStyle';
+import defaultThemeColor from '../constants/defaultThemeColor';
 import { Icon } from '../Icon';
 
 /**
  * Primary UI component for user interaction
  */
 
+const WrapperDiv = styled.div`
+  .form-check-input {
+    accent-color: ${({ theme }) => theme.primary['primary-1']};
+  }
+`;
+
 export const Table = ({
-    theme,
     customStyles,
+    inBuiltCss,
     type = 'table',
     sortIcon,
     data,
@@ -24,26 +32,40 @@ export const Table = ({
     conditionalRowStyles,
     fixedHeader,
     fixedHeaderScrollHeight,
-    ...props }) => {
-
-    let tableStyle = {}
-
-    if (theme) {
-        if (theme[type]) {
-
-            tableStyle = theme[type];
+    checkboxColor,
+    ...props
+}) => {
+    let tableStyle = {};
+
+    if (inBuiltCss) {
+        if (inBuiltCss[type]) {
+            tableStyle = inBuiltCss[type];
         }
     }
 
-
     if (customStyles) {
         for (const property in customStyles) {
-            tableStyle[property] = customStyles[property]
+            tableStyle[property] = customStyles[property];
         }
     }
 
-    return (
+    const activeTheme = useTheme() || defaultThemeColor;
+
+    const Checkbox = React.forwardRef(({ onClick, ...rest }, ref) => {
+        return (
+            <WrapperDiv theme={activeTheme}>
+                <input
+                    type='checkbox'
+                    className='form-check-input'
+                    ref={ref}
+                    onClick={onClick}
+                    {...rest}
+                />
+            </WrapperDiv>
+        );
+    });
 
+    return (
         <DataTable
             responsive={responsive}
             data={data}
@@ -57,25 +79,22 @@ export const Table = ({
             progressComponent={progressComponent ? progressComponent : undefined}
             sortServer={sortServer}
             onSort={(columnInfo, direction, event) => {
-                handleOnSort(columnInfo, direction, event)
+                handleOnSort(columnInfo, direction, event);
             }}
             conditionalRowStyles={conditionalRowStyles}
             fixedHeader={fixedHeader}
             fixedHeaderScrollHeight={fixedHeaderScrollHeight}
+            selectableRowsComponent={Checkbox}
             {...props}
         />
-
-
-
-
     );
 };
 
 Table.propTypes = {
     /**
-     * Theme object
+     * inBuiltCss object
      */
-    theme: PropTypes.object,
+    inBuiltCss: PropTypes.object,
     /**
      * Optional component to override the default sorting icon (must be downward)
      */
@@ -121,7 +140,7 @@ Table.propTypes = {
      */
     fixedHeader: PropTypes.bool,
     /**
-     * Optional to set height of the table 
+     * Optional to set height of the table
      */
     fixedHeaderScrollHeight: PropTypes.string,
     /**
@@ -133,24 +152,27 @@ Table.propTypes = {
 };
 
 Table.defaultProps = {
-    theme: defaultStyles,
-    sortIcon: <Icon
-        icon={'arrow-down'}
-        size={11}
-        color={'#333333'}
-        style={{
-            transform: 'scaleX(0.7) scaleY(0.7) translate(5px, -3px)',
-        }}
-    />,
+    inBuiltCss: defaultStyles,
+    sortIcon: (
+        <Icon
+            icon={'arrow-down'}
+            size={11}
+            color={'#333333'}
+            style={{
+                transform: 'scaleX(0.7) scaleY(0.7) translate(5px, -3px)',
+            }}
+        />
+    ),
     data: [],
     tableColumns: [],
     progressPending: false,
     defaultSortFieldId: null,
-    handleOnSort: (columnInfo, direction, event) => { console.log(columnInfo, direction, event) },
+    handleOnSort: (columnInfo, direction, event) => {
+        console.log(columnInfo, direction, event);
+    },
     sortServer: null,
     progressComponent: undefined,
     responsive: true,
     fixedHeader: true,
     fixedHeaderScrollHeight: '100vh',
-};
-
+};