groundfloor-react-ui 1.0.7 → 1.0.10

package/components/Button/PrimaryButton.js

@@ -2,8 +2,8 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import styled, { useTheme } from 'styled-components';
 import defaultThemeColor from '../constants/defaultThemeColor';
-// import { Loader } from '../Loaders';
-import getDefaultStyles, { hexToRGB } from "../constants/utils";
+import { Loader } from '../Loaders';
+import getDefaultStyles, { hexToRGB } from '../constants/utils';
 
 /**
  * Primary UI component for user interaction
@@ -12,61 +12,85 @@ import getDefaultStyles, { hexToRGB } from "../constants/utils";
 const sizes = {
     sm: {
         fontSize: '14px',
-        padding: '5px 15px'
+        padding: '5px 15px',
     },
     md: {
         fontSize: '16px',
-        padding: '5.5px 15px'
+        padding: '5.5px 15px',
     },
     lg: {
         fontSize: '18px',
-        padding: '8px 20px'
+        padding: '8px 20px',
     },
-}
+};
 
-const buttonDisabledBg = ({ theme, variant }) => hexToRGB(theme.variant[variant], 0.6);
+const buttonDisabledBg = ({ theme, variant }) =>
+    hexToRGB(theme.variant[variant], 0.6);
 const fontColor = defaultThemeColor.bgColor;
 
 const StyledButton = styled.button`
-    background: ${({ theme, variant }) => theme.variant[variant]};
+  background: ${({ theme, variant }) => theme.variant[variant]};
+  color: ${fontColor};
+  padding: ${({ size }) => sizes[size].padding};
+  border: 1px solid ${({ theme, variant }) => theme.variant[variant]};
+  border-radius: 5px;
+  font-size: ${({ size }) => sizes[size].fontSize};
+  display: flex;
+  align-items: center;
+  width: ${({ block }) => (block ? '100%' : 'auto')};
+  cursor: pointer;
+  line-height: 18px;
+  &:disabled {
     color: ${fontColor};
-    padding: ${({ size }) => sizes[size].padding};
-    border: 1px solid ${({ theme, variant }) => theme.variant[variant]};
-    border-radius: 5px;
-    font-size: ${({ size }) => sizes[size].fontSize};
-    display: flex;
-    align-items: center;
-    width: ${({ block }) => block ? '100%' : 'auto'};
-    cursor: pointer;
-    line-height: 18px;
-    &:disabled {
-      color: ${fontColor};
-      background: ${buttonDisabledBg};
-        border: 1px solid ${buttonDisabledBg};
-        cursor: not-allowed;
-    }
+    background: ${buttonDisabledBg};
+    border: 1px solid ${buttonDisabledBg};
+    cursor: not-allowed;
+  }
 
-    //Set the styles from the default styles object
-    ${({ theme, defaultStyle }) => {
+  //Set the styles from the default styles object
+  ${({ theme, defaultStyle }) => {
         return getDefaultStyles(theme, defaultStyle);
     }}
-`;
-// console.log(fontColor)
 
-export const PrimaryButton = ({ block, size, style, variant, disabled, isLoading, type, ...props }) => {
+  // custom styles
+  ${({ btnStyle }) => btnStyle}
+`;
 
+export const PrimaryButton = ({
+    btnStyle,
+    block,
+    size,
+    style,
+    variant,
+    disabled,
+    isLoading,
+    type,
+    ...props
+}) => {
     return (
         <StyledButton
             block={block}
             variant={variant}
-            defaultStyle="button"
+            defaultStyle='button'
             type={type}
             style={style}
             size={size}
             disabled={disabled}
+            btnStyle={btnStyle}
             {...props}
         >
-            {/* {isLoading && <div style={{ paddingRight: '10px', marginTop: '6px' }}><Loader customStyles={{ 'background-color': fontColor }} size={16} /></div>} */}
+            {isLoading && (
+                <div
+                    style={{
+                        paddingRight: '10px',
+                        display: 'flex',
+                        justifyContent: 'center',
+                        alignItems: 'center',
+                    }}
+                >
+                    <Loader customStyles={{ 'background-color': fontColor }} size={16} />
+                </div>
+            )}
             {props.children}
         </StyledButton>
     );
@@ -102,14 +126,18 @@ PrimaryButton.propTypes = {
      */
     theme: PropTypes.object,
     /**
-    * Type of the btn i.e: button or submit etc.
-    */
+     * Type of the btn i.e: button or submit etc.
+     */
     type: PropTypes.string,
+    /**
+     * custome style of button
+     */
+    btnStyle: PropTypes.object,
 };
 
 StyledButton.defaultProps = {
     theme: defaultThemeColor,
-}
+};
 
 PrimaryButton.defaultProps = {
     theme: defaultThemeColor,
@@ -119,4 +147,5 @@ PrimaryButton.defaultProps = {
     disabled: false,
     size: 'md',
     onClick: undefined,
-};
+    btnStyle: {},
+};

package/components/Button/SecondaryButton.js

@@ -3,6 +3,7 @@ import PropTypes from 'prop-types';
 import styled, { useTheme } from 'styled-components';
 import defaultThemeColor from '../constants/defaultThemeColor';
 import getDefaultStyles from '../constants/utils';
+import { Loader } from '../Loaders';
 
 /**
  * Secondary UI component for user interaction
@@ -10,60 +11,87 @@ import getDefaultStyles from '../constants/utils';
 
 const sizes = {
     sm: {
-        fontSize: '14px',
-        padding: '5px 15px'
+        fontSize: '14',
+        padding: '5px 15px',
     },
     md: {
-        fontSize: '16px',
-        padding: '5.5px 15px'
+        fontSize: '16',
+        padding: '5.5px 15px',
     },
     lg: {
-        fontSize: '18px',
-        padding: '8px 20px'
+        fontSize: '18',
+        padding: '8px 20px',
     },
-}
+};
 
 const buttonDisabledBg = '#BBC4CF';
+const fontColor = defaultThemeColor.primary['primary-1'];
 
 const StyledButton = styled.button`
-    color: ${({ theme, variant }) => theme.variant[variant]};
-    background: ${({ theme }) => theme.bgColor};
-    padding: ${({ size }) => sizes[size].padding};
-    border: 1px solid ${({ theme, variant }) => theme.variant[variant]};
-    font-size: ${({ size }) => sizes[size].fontSize};
-    border-radius: 5px;
-    display: flex;
-    align-items: center;
-    width: ${({ block }) => block ? '100%' : 'auto'};
-    cursor: pointer;
-    line-height: 18px;
-    &:disabled {
-        color: #929EAC;
-        border: 1px solid ${buttonDisabledBg};
-        cursor: not-allowed;
-    }
+  color: ${({ theme, variant }) => theme.variant[variant]};
+  background: ${({ theme }) => theme.bgColor};
+  padding: ${({ size }) => sizes[size].padding};
+  border: 1px solid ${({ theme, variant }) => theme.variant[variant]};
+  font-size: ${({ size }) => sizes[size].fontSize};
+  border-radius: 5px;
+  display: flex;
+  align-items: center;
+  width: ${({ block }) => (block ? '100%' : 'auto')};
+  cursor: pointer;
+  line-height: 18px;
+  &:disabled {
+    color: #929eac;
+    border: 1px solid ${buttonDisabledBg};
+    cursor: not-allowed;
+  }
 
-    //Set the styles from the default styles object
-    ${({ theme, defaultStyle }) => {
+  //Set the styles from the default styles object
+  ${({ theme, defaultStyle }) => {
         return getDefaultStyles(theme, defaultStyle);
     }}
+  // custom styles
+    ${({ btnStyle }) => btnStyle}
 `;
 
-export const SecondaryButton = ({ block, size, style, variant, disabled, type, ...props }) => {
+export const SecondaryButton = ({
+    btnStyle,
+    isLoading,
+    block,
+    size,
+    style,
+    variant,
+    disabled,
+    type,
+    ...props
+}) => {
     const theme = useTheme() || defaultThemeColor;
 
     return (
         <StyledButton
             block={block}
             variant={variant}
-            defaultStyle="button"
+            defaultStyle='button'
             style={style}
             size={size}
             disabled={disabled}
             type={type}
+            btnStyle={btnStyle}
+            isLoading={isLoading}
             {...props}
         >
-            {props.children}
+            {isLoading && (
+                <div
+                    style={{
+                        paddingRight: '10px',
+                        display: 'flex',
+                        justifyContent: 'center',
+                        alignItems: 'center',
+                    }}
+                >
+                    <Loader customStyles={{ 'background-color': fontColor }} size={16} />
+                </div>
+            )}
+            {props.children}{' '}
         </StyledButton>
     );
 };
@@ -94,14 +122,18 @@ SecondaryButton.propTypes = {
      */
     theme: PropTypes.object,
     /**
-    * Type of the btn i.e: button or submit etc.
-    */
+     * Type of the btn i.e: button or submit etc.
+     */
     type: PropTypes.string,
+    /**
+     * custome style of button
+     */
+    btnStyle: PropTypes.object,
 };
 
 StyledButton.defaultProps = {
     theme: defaultThemeColor,
-}
+};
 
 SecondaryButton.defaultProps = {
     theme: defaultThemeColor,
@@ -110,4 +142,5 @@ SecondaryButton.defaultProps = {
     disabled: false,
     size: 'md',
     onClick: undefined,
+    btnStyle: {},
 };

package/components/Form/FormComponent.js

@@ -8,6 +8,7 @@ import {
   DropdownSelect,
   DropzoneInput,
   NumericInput,
+  PasswordInput,
   RadioInput,
   SearchInput,
   SignatureInput,
@@ -23,6 +24,7 @@ import {
   MultiColumnWrapper,
   MultiColumnDiv,
 } from '../DesignComponent';
+import { Table } from '../Tables';
 
 export const FormComponent = ({ formData, ...props }) => {
   const header = (item) => {
@@ -94,7 +96,15 @@ export const FormComponent = ({ formData, ...props }) => {
   };
 
   const MultiDropdownInput = (item) => {
-    return <DropdownSelect {...item} {...props} />;
+    return <DropdownSelect dropdownType={'multiSelect'} {...item} {...props} />;
+  };
+
+  const AsyncMultiDropdownInput = (item) => {
+    return <DropdownSelect dropdownType={'asyncMultiSelect'} {...item} {...props} />;
+  };
+
+  const AsyncSingleDropdownInput = (item) => {
+    return <DropdownSelect dropdownType={'asyncSingleSelect'} {...item} {...props} />;
   };
 
   const signatureInput = (item) => {
@@ -133,6 +143,14 @@ export const FormComponent = ({ formData, ...props }) => {
     return <SearchInput {...item} {...props} />;
   };
 
+  const tableInput = (item) => {
+    return <Table {...item} {...props} />;
+  };
+
+  const passwordInput = (item) => {
+    return <PasswordInput {...item} {...props} />;
+  };
+
   const handleSubmit = () => {
     console.log('form submit');
   };
@@ -157,6 +175,10 @@ export const FormComponent = ({ formData, ...props }) => {
         return SingleDropdownInput(item);
       case 'multiSelect':
         return MultiDropdownInput(item);
+      case 'asyncSingleSelect':
+        return AsyncSingleDropdownInput(item);
+      case 'asyncMultiSelect':
+        return AsyncMultiDropdownInput(item);
       case 'signature':
         return signatureInput(item);
       case 'fileUpload':
@@ -175,6 +197,10 @@ export const FormComponent = ({ formData, ...props }) => {
         return tinyButton(item);
       case 'search':
         return searchInput(item);
+      case 'table':
+        return tableInput(item);
+      case 'passwordInput':
+        return passwordInput(item);
       default:
         break;
     }
@@ -205,4 +231,4 @@ export const FormComponent = ({ formData, ...props }) => {
       </FormContainer>
     </Fragment>
   );
-};
+};