groundfloor-react-ui 1.0.17 → 1.0.20

package/components/Pagination/Pagination.js

@@ -1,83 +1,59 @@
-import React from 'react';
 import PropTypes from 'prop-types';
-import styled from 'styled-components';
+import React from 'react';
+import styled, { useTheme } from 'styled-components';
 import defaultThemeColor from '../constants/defaultThemeColor';
 
 const StyledPagination = styled.div`
-    display: flex;
-    align-items: center;
-    color: ${({ theme }) => theme.variant['neutral-2']};
+  display: flex;
+  align-items: center;
+  color: ${({ theme }) => theme.variant['neutral-2']};
 `;
 
-StyledPagination.defaultProps = {
-    theme: defaultThemeColor,
-}
-
 export const Pagination = ({ ...props }) => {
+    const activeTheme = useTheme() || defaultThemeColor;
 
     return (
-        <StyledPagination>
-            {props.children}
-        </ StyledPagination>
+        <StyledPagination theme={activeTheme}>{props.children}</StyledPagination>
     );
 };
 
-Pagination.propTypes = {
-    /**
-     *	Theme props
-     */
-    theme: PropTypes.object,
-}
-
-Pagination.defaultProps = {
-    theme: defaultThemeColor,
-}
-
 const Item = styled.div`
-    font-size: 14px;
-    color: ${({ selected, theme }) => selected ? theme.variant['primary-1'] : null};
-
-    svg {
-        width: 14px;
-        height: 14px;
-        path {
-            fill: ${({ selected, theme }) => selected ? theme.variant['primary-1'] : theme.variant['neutral-2']};
-        } 
+  font-size: 14px;
+  color: ${({ selected, theme }) =>
+        selected ? theme.variant['primary-1'] : null};
+
+  svg {
+    width: 14px;
+    height: 14px;
+    path {
+      fill: ${({ selected, theme }) =>
+        selected ? theme.variant['primary-1'] : theme.variant['neutral-2']};
     }
+  }
 
-    cursor: pointer;
-    &:not(:first-child):not(:last-child) {
-        margin: 0 22px;
-    }
+  cursor: pointer;
+  &:not(:first-child):not(:last-child) {
+    margin: 0 22px;
+  }
 `;
 
-Item.defaultProps = {
-    theme: defaultThemeColor,
-}
-
 Pagination.PageItem = function PageItem({ selected, ...props }) {
+    const activeTheme = useTheme() || defaultThemeColor;
+
     return (
-        <Item selected={selected} {...props}>
+        <Item selected={selected} theme={activeTheme} {...props}>
             {props.children}
         </Item>
-    )
-}
+    );
+};
 
 Pagination.PageItem.propTypes = {
-    /**
-     *	Theme props
-    */
-    theme: PropTypes.object,
     /**
      *	Is Page selected?
-    */
+     */
     selected: PropTypes.bool,
-}
+};
 
 Pagination.PageItem.defaultProps = {
-    theme: defaultThemeColor,
     selected: false,
-}
-
-
-
+};

package/components/ProgressBar/ProgressBar.js

@@ -1,47 +1,68 @@
-import React from "react";
 import PropTypes from 'prop-types';
-import styled from 'styled-components';
+import React from 'react';
+import styled, { useTheme } from 'styled-components';
 import defaultStyles from '../constants/defaultStyle';
 import defaultThemeColor from '../constants/defaultThemeColor';
-import getDefaultStyles from '../constants/utils';
+import { hexToRGB } from '../constants/utils';
 import { Label } from '../Label';
-import { hexToRGB } from "../constants/utils";
 
 const WrapperDiv = styled.div`
-    //Set the styles from the default styles object
-    ${ ({ theme, type }) => {
-            return getDefaultStyles(theme, type);
-    }}
-    background-color: ${({ color }) => color? 
-        hexToRGB(color, 0.5) : 
-            defaultThemeColor.primary['primary-1']};
+  height: 10px;
+  border-radius: 10px;
+  margin-top: 13px;
+  margin-left: 13px;
+  margin-right: 13px;
+  width: inherit;
+  background-color: ${({ color, theme }) =>
+        color ? hexToRGB(color, 0.5) : hexToRGB(theme.primary['primary-1'], 0.5)};
 `;
 
 const Container = styled.div`
-    //Set the styles from the default styles object
-        ${ ({ theme, type }) => {
-        return getDefaultStyles(theme, type);
-    }}
-        
-    // custom styles
-    ${({ progressBarStyle }) => progressBarStyle}
-    width: ${({now }) => now+'%'};
-    background-color: ${({ color }) => color ?color :defaultThemeColor.primary['primary-1']};
+  height: inherit;
+  width: inherit;
+  transition: width 1s ease-in-out;
+  border-radius: inherit;
+  text-align: right;
+
+  // custom styles
+  ${({ progressBarStyle }) => progressBarStyle}
+  width: ${({ now }) => now + '%'};
+  background-color: ${({ color, theme }) =>
+        color ? color : theme.primary['primary-1']};
 `;
 
-export const ProgressBar = ({ labelStyle,progressBarStyle,label,now,color,...props}) => {
+export const ProgressBar = ({
+    labelStyle,
+    progressBarStyle,
+    label,
+    now,
+    color,
+    ...props
+}) => {
+    const activeTheme = useTheme() || defaultThemeColor;
+
     return (
         <div>
             <Label
-                theme={defaultStyles}
+                inBuiltCss={defaultStyles}
                 customStyles={labelStyle}
                 type={'progressbarLabel'}
                 text={label}
-                {...props} />
-            <WrapperDiv progressBarStyle={progressBarStyle} theme={defaultStyles} 
-                type={'progressWrapper'} color={color} {...props}>
-                <Container progressBarStyle={progressBarStyle} now={now} theme={defaultStyles} 
-                    type={'containerWrapper'} color={color} {...props}/>
+                {...props}
+            />
+            <WrapperDiv
+                progressBarStyle={progressBarStyle}
+                theme={activeTheme}
+                color={color}
+                {...props}
+            >
+                <Container
+                    progressBarStyle={progressBarStyle}
+                    now={now}
+                    theme={activeTheme}
+                    color={color}
+                    {...props}
+                />
             </WrapperDiv>
         </div>
     );
@@ -49,19 +70,19 @@ export const ProgressBar = ({ labelStyle,progressBarStyle,label,now,color,...pro
 
 ProgressBar.propTypes = {
     /**
-     *	Custom style of the lable of the progressbar
+     *	Custom style of the label of the progressBar
      */
     labelStyle: PropTypes.object,
     /**
-     *	Custom style of the progressbar
+     *	Custom style of the progressBar
      */
     progressBarStyle: PropTypes.object,
-    
+
     /**
-     *	Custom color(HEX format) of the progressbar
+     *	Custom color(HEX format) of the progressBar
      */
     color: PropTypes.string,
-    
+
     /**
      *	label props
      */
@@ -73,12 +94,8 @@ ProgressBar.propTypes = {
 };
 
 ProgressBar.defaultProps = {
-    labelStyle:{},
+    labelStyle: {},
     progressBarStyle: {},
-    label:'',
-    now:0,
-    color: "#2E56F4"
-};
-
-
-
+    label: '',
+    now: 0,
+};

package/components/Rating/Rating.js

@@ -1,8 +1,7 @@
-import React, { useEffect, useState } from 'react';
 import PropTypes from 'prop-types';
-import styled, { css } from 'styled-components';
-import defaultStyles from '../constants/defaultStyle';
-import getDefaultStyles from '../constants/utils';
+import React, { useEffect, useState } from 'react';
+import styled, { css, useTheme } from 'styled-components';
+import defaultThemeColor from '../constants/defaultThemeColor';
 
 const StyledContainer = styled.div`
     box-sizing: border-box;
@@ -112,7 +111,6 @@ function getPercentage(value, maxRange) {
 }
 
 export const Rating = ({
-    theme,
     type,
     customStylesContainer,
     customStylesStar,
@@ -127,6 +125,7 @@ export const Rating = ({
     toggleSet,
     identifier,
     ...props }) => {
+    const activeTheme = useTheme() || defaultThemeColor;
 
     const [starArr, setStarArr] = useState(undefined);
     const [starVal, setStarVal] = useState(undefined);
@@ -182,18 +181,15 @@ export const Rating = ({
         </>
 
     return (
-        <StyledContainer theme={theme} customStyles={customStylesContainer} type={type} size={size} {...props} className={'container'} >
+        <StyledContainer customStyles={customStylesContainer} type={type} size={size} {...props} className={'container'} >
             {toggleStar ? stars :
-                <StyledPercentage theme={theme} type={type} customStyles={customStylesPercentage}>{percentage}%</StyledPercentage>}
+                <StyledPercentage type={type} customStyles={customStylesPercentage}>{percentage}%</StyledPercentage>}
         </StyledContainer>
     )
 }
 
 Rating.propTypes = {
-    /**
-     *	Theme props
-     */
-    theme: PropTypes.object,
+
     /**
      *	Custom style object for container
      */
@@ -249,7 +245,6 @@ Rating.propTypes = {
 }
 
 Rating.defaultProps = {
-    theme: defaultStyles,
     customStylesContainer: null,
     customStylesStar: null,
     customStylesPercentage: null,
@@ -260,5 +255,4 @@ Rating.defaultProps = {
     toggleStar: true,
     toggleSet: false,
     color: '#F7B001'
-}
-
+}

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',
-};
-
+};