groundfloor-react-ui 1.0.0 → 1.0.3

package/components/Inputs/DropzoneInput.js

@@ -1,90 +1,132 @@
-import React, { useState, createRef } from "react";
+import React, { useState, createRef } from 'react';
 import styled from 'styled-components';
 import defaultThemeColor from '../constants/defaultThemeColor';
-import PropTypes from "prop-types";
+import PropTypes from 'prop-types';
 import defaultStyles from '../constants/defaultStyle';
-import getDefaultStyles from "../constants/utils";
-import { hexToRGB } from "../constants/utils";
-
-import { Icon } from "../Icon";
-import { Label } from "../Label";
+import getDefaultStyles from '../constants/utils';
+import { hexToRGB } from '../constants/utils';
 
+import { Icon } from '../Icon';
+import { Label } from '../Label';
 
 const ParentDiv = styled.div`
-
-    //Set the styles from the default styles object
-    ${({ theme, defaultStyles }) => {
+  //Set the styles from the default styles object
+  ${({ theme, defaultStyles }) => {
         return getDefaultStyles(theme, defaultStyles);
     }}
-    
-    background-color:${({ hover, isValid, fileArr, backgroundColor }) => !isValid ?
-        'rgba(215, 0, 0, 0.05)' : hover ? backgroundColor :
-            fileArr.length > 0 ? defaultThemeColor.bgColor : hexToRGB(backgroundColor, 0.05)};
-    border: 1px ${({ isValid, fileArr, backgroundColor }) => !isValid ? 'dashed ' +
-        defaultThemeColor.ui['error'] : fileArr.length > 0 ? 'solid ' + backgroundColor : 'dashed ' + backgroundColor};
-    
-    &:hover{
-        cursor: pointer;
-    }
-    transition: all 500ms linear;
 
-    
-    // custom styles
-    ${({ customDropzoneStyles }) => customDropzoneStyles}
-`;
+  background-color:${({ hover, isValid, fileArr, backgroundColor }) =>
+        !isValid
+            ? 'rgba(215, 0, 0, 0.05)'
+            : hover
+                ? backgroundColor
+                : fileArr.length > 0
+                    ? defaultThemeColor.bgColor
+                    : hexToRGB(backgroundColor, 0.05)};
+  border: 1px
+    ${({ isValid, fileArr, backgroundColor }) =>
+        !isValid
+            ? 'dashed ' + defaultThemeColor.ui['error']
+            : fileArr.length > 0
+                ? 'solid ' + backgroundColor
+                : 'dashed ' + backgroundColor};
+
+  &:hover {
+    cursor: pointer;
+  }
+  transition: all 500ms linear;
 
+  // custom styles
+  ${({ customDropzoneStyles }) => customDropzoneStyles}
+`;
 
 const FileDiv = styled.div`
-    //Set the styles from the default styles object
-    ${({ theme, defaultStyles }) => {
+  //Set the styles from the default styles object
+  ${({ theme, defaultStyles }) => {
         return getDefaultStyles(theme, defaultStyles);
     }}
-    
-    // custom styles
+
+  // custom styles
     ${({ customFileStyles }) => customFileStyles}
 `;
 
 const InputFile = styled.input`
-    display: none;
+  display: none;
 `;
 
 const TextDiv = styled.div`
-    //Set the styles from the default styles object
-    ${({ theme, defaultStyles }) => {
+  //Set the styles from the default styles object
+  ${({ theme, defaultStyles }) => {
         return getDefaultStyles(theme, defaultStyles);
     }}
-    
-    // custom styles
+
+  // custom styles
     ${({ customTextStyles }) => customTextStyles}
 `;
 
 const FileName = styled.span`
-    //Set the styles from the default styles object
-    ${({ theme, type }) => {
+  //Set the styles from the default styles object
+  ${({ theme, type }) => {
         return getDefaultStyles(theme, type);
     }}
-    
-    // custom styles
+
+  // custom styles
     ${({ customFileNameStyles }) => customFileNameStyles}
 `;
 
 const CrossDiv = styled.div`
-    cursor: pointer;
-    padding-left: 1px;
-    margin-left: auto;
-    margin-right: 10px;
-    display: flex;
-    justify-content: center;
+  cursor: pointer;
+  padding-left: 1px;
+  margin-left: auto;
+  margin-right: 10px;
+  display: flex;
+  justify-content: center;
 `;
 
 const IconDiv = styled.div`
-    margin-left: 11px;
-    padding-left: 2px;
-    display: flex;
-    justify-content: center;
+  margin-left: 11px;
+  padding-left: 2px;
+  display: flex;
+  justify-content: center;
 `;
 
-export const DropzoneInput = ({ theme, themeColor, isValid, label, labelStyle, labelInline, required, message, fileArr, setFileArr, deleteFile, customDropzoneStyles, customFileStyles, customTextStyles, customFileNameStyles, backgroundColor, singleFile, messageSize, ...props }) => {
+const OtherInfoDiv = styled.div`
+  color: #494949;
+  margin-left: 11px;
+  padding-left: 2px;
+`
+
+const AdditionalText = styled.p`
+color: #494949;
+display: flex;
+justify-content: center;
+align-items: center;
+margin:20px 0px;
+font-size: 14px;
+`
+
+export const DropzoneInput = ({
+    theme,
+    themeColor,
+    isValid,
+    label,
+    labelStyle,
+    labelInline,
+    required,
+    message,
+    fileArr,
+    setFileArr,
+    deleteFile,
+    customDropzoneStyles,
+    customFileStyles,
+    customTextStyles,
+    customFileNameStyles,
+    backgroundColor,
+    singleFile,
+    messageSize,
+    additionalText,
+    ...props
+}) => {
     const [hover, setHover] = useState(false);
     const fileInputRef = createRef();
 
@@ -99,13 +141,11 @@ export const DropzoneInput = ({ theme, themeColor, isValid, label, labelStyle, l
         setHover(true);
     }
 
-
     function onDragLeave(event) {
         stopEvent(event);
         setHover(false);
     }
 
-
     function onDrop(event) {
         stopEvent(event);
 
@@ -114,24 +154,24 @@ export const DropzoneInput = ({ theme, themeColor, isValid, label, labelStyle, l
         props.onFilesAdded(fileListToArray(files, singleFile));
     }
 
-
     function stopEvent(event) {
         event.preventDefault();
         event.stopPropagation();
     }
 
-
     function fileListToArray(list, singleFile) {
         let result = singleFile == true ? [] : [...fileArr];
         for (let i = 0; i < list.length; i++) {
             result.push(list.item(i));
         }
         if (!singleFile) {
-            result = result.filter((value, index, self) =>
-                index === self.findIndex((t) => (
-                    t.place === value.place && t.name === value.name
-                ))
-            )
+            result = result.filter(
+                (value, index, self) =>
+                    index ===
+                    self.findIndex(
+                        (t) => t.place === value.place && t.name === value.name
+                    )
+            );
         }
         setFileArr(result);
         setHover(false);
@@ -139,36 +179,29 @@ export const DropzoneInput = ({ theme, themeColor, isValid, label, labelStyle, l
     }
 
     function deleteItemFromServer(file, i) {
-        const updateFiles = fileArr.filter(item => item.name !== file.name);
+        const updateFiles = fileArr.filter((item) => item.name !== file.name);
         setFileArr(updateFiles);
         deleteFile(file);
     }
 
     function fileRemoveFromArary(file, i) {
         if (file instanceof File) {
-            const updateFiles = fileArr.filter(item => item.name !== file.name);
+            const updateFiles = fileArr.filter((item) => item.name !== file.name);
             setFileArr(updateFiles);
-            // console.log(updateFiles,fileArr);
         } else {
             deleteItemFromServer(file, i);
         }
     }
 
-
     function openFileDialog() {
         fileInputRef.current.click();
     }
     return (
-        <div style={{
-            // display: 'flex',
-            // flexDirection: 'column',
-            // alignItems: 'center',
-            /* align-content: stretch; */
-            // width: '532px',
-            // boxSizing: 'border-box',
-            // maxHeight: 'calc(70vh - 129px)',
-            paddingBottom: '5px',
-        }}>
+        <div
+            style={{
+                paddingBottom: '5px',
+            }}
+        >
             <div style={{ display: 'flex' }}>
                 <Label
                     themeColor={defaultThemeColor}
@@ -177,14 +210,21 @@ export const DropzoneInput = ({ theme, themeColor, isValid, label, labelStyle, l
                     labelInline={labelInline}
                     text={label}
                     style={{
-                        'display': 'flex',
-                        'paddingBottom': `${!labelInline ? '16.64px' : ''}`,
+                        display: 'flex',
+                        paddingBottom: `${!labelInline ? '7px' : ''}`,
                     }}
-                    {...props} />
-                {required && <div style={{
-                    marginLeft: '4px',
-                    color: `${themeColor.variant['error']}`
-                }} >*</div>}
+                    {...props}
+                />
+                {required && (
+                    <div
+                        style={{
+                            marginLeft: '4px',
+                            color: `${themeColor.variant['error']}`,
+                        }}
+                    >
+                        *
+                    </div>
+                )}
             </div>
             <ParentDiv
                 theme={defaultStyles}
@@ -202,63 +242,109 @@ export const DropzoneInput = ({ theme, themeColor, isValid, label, labelStyle, l
             >
                 <InputFile
                     ref={fileInputRef}
-                    type="file"
+                    type='file'
                     multiple={singleFile == true ? false : true}
                     onChange={onFilesAdded}
-                    onClick={(e) => e.target.value = null}
+                    onClick={(e) => (e.target.value = null)}
                     {...props}
                 />
-                {isValid ?
+                {isValid ? (
                     <Icon
-                        icon='file-attach'
+                        icon='file-upload'
                         color={hover ? themeColor.bgColor : backgroundColor}
-                        size={24} />
-                    : null}
-                <TextDiv isValid={isValid} hover={hover} customTextStyles={customTextStyles}
+                        size={24}
+                    />
+                ) : null}
+                <TextDiv
+                    isValid={isValid}
+                    hover={hover}
+                    customTextStyles={customTextStyles}
                     theme={defaultStyles}
-                    defaultStyles={'dropzone-text-div'}>
-                    {isValid ?
+                    defaultStyles={'dropzone-text-div'}
+                >
+                    {isValid ? (
                         <div>
-                            <span style={{ color: hover ? themeColor.bgColor : backgroundColor }}>Choose a file  </span>
-                            <span style={{ color: hover ? themeColor.bgColor : themeColor.neutral['neutral-2'] }}>or  </span>
-                            <span style={{ color: hover ? themeColor.bgColor : themeColor.textColor }}>drag {singleFile ? 'it' : 'them'} here</span>
+                            <span
+                                style={{ color: hover ? themeColor.bgColor : backgroundColor }}
+                            >
+                                Choose a file{' '}
+                            </span>
+                            <span
+                                style={{
+                                    color: hover
+                                        ? themeColor.bgColor
+                                        : themeColor.neutral['neutral-2'],
+                                }}
+                            >
+                                or{' '}
+                            </span>
+                            <span
+                                style={{
+                                    color: hover ? themeColor.bgColor : themeColor.textColor,
+                                }}
+                            >
+                                drag {singleFile ? 'it' : 'them'} here
+                            </span>
                         </div>
-                        :
+                    ) : (
                         <div>
-                            <span style={{ color: themeColor.variant['error'] }}>Try again!! </span>
-                            <span style={{
-                                color: theme.textColor,
-                            }}>{message.length > messageSize ? message.slice(0, messageSize) : message}</span>
+                            <span style={{ color: themeColor.variant['error'] }}>
+                                Try again!!{' '}
+                            </span>
+                            <span
+                                style={{
+                                    color: theme.textColor,
+                                }}
+                            >
+                                {message.length > messageSize
+                                    ? message.slice(0, messageSize)
+                                    : message}
+                            </span>
                         </div>
-                    }
+                    )}
                 </TextDiv>
             </ParentDiv>
-            {fileArr?.map((item, i) => {
-                // console.log("item", item)
-                return <FileDiv
-                    theme={defaultStyles}
-                    defaultStyles={'dropzone-file-div'}
-                    key={`${item}-${i}`}
-                    customFileStyles={customFileStyles}>
-                    <IconDiv><Icon icon='pdf-icon' /></IconDiv>
-                    <FileName
+            {additionalText.length > 0 && <AdditionalText>{additionalText}</AdditionalText>
+            }      {fileArr?.map((item, i) => {
+                return (
+                    <FileDiv
                         theme={defaultStyles}
-                        type={'dropzone-file-name'}
-                        customFileNameStyles={customFileNameStyles}
-                    >{item.name}</FileName>
-                    <IconDiv><Icon
-                        icon={`${item instanceof File ? 'plus-outlined' : 'cloud-icon'}`}
-                    />
-                    </IconDiv>
-                    <CrossDiv key={Math.random() * 101 | 0}
-                        onClick={() => fileRemoveFromArary(item, i)}>
-                        <Icon icon='cross-icon' color={themeColor.neutral['neutral-2']} />
-                    </CrossDiv>
-                </FileDiv>
+                        defaultStyles={'dropzone-file-div'}
+                        key={`${item}-${i}`}
+                        customFileStyles={customFileStyles}
+                    >
+                        <IconDiv>
+                            <Icon icon='pdf-icon' />
+                        </IconDiv>
+                        <FileName
+                            theme={defaultStyles}
+                            type={'dropzone-file-name'}
+                            customFileNameStyles={customFileNameStyles}
+                        >
+                            {item.name}
+                        </FileName>
+
+
+                        <IconDiv>
+                            <Icon icon={`${!(item instanceof File) && 'cloud-icon'}`} />
+                        </IconDiv>
+                        <OtherInfoDiv>{item?.otherInfo}</OtherInfoDiv>
+                        <CrossDiv
+                            key={(Math.random() * 101) | 0}
+                            onClick={() => fileRemoveFromArary(item, i)}
+                        >
+                            <Icon
+                                icon='cross-icon'
+                                color={themeColor.neutral['neutral-2']}
+                                size={13}
+                            />
+                        </CrossDiv>
+                    </FileDiv>
+                );
             })}
         </div>
-    )
-}
+    );
+};
 
 DropzoneInput.propTypes = {
     /**
@@ -275,46 +361,48 @@ DropzoneInput.propTypes = {
     isValid: PropTypes.bool,
     /**
      * invalid error messages (limit 100 characters)
-    */
+     */
     message: PropTypes.string,
     /**
      * files that are added
-    */
+     */
     fileArr: PropTypes.array,
     /**
      * files setter
-    */
+     */
     setFileArr: PropTypes.func,
     /**
      * custom style of the dropzoneInput box
-    */
+     */
     customDropzoneStyles: PropTypes.object,
     /**
      * custom style of the uploaded files
-    */
+     */
     customFileStyles: PropTypes.object,
     /**
      * custom style of the text
-    */
+     */
     customTextStyles: PropTypes.object,
     /**
      * custom style of the file name that are added on the preview
-    */
+     */
     customFileNameStyles: PropTypes.object,
     /**
      * background color (in HEX format) of the dropzoneInput box
-    */
+     */
     backgroundColor: PropTypes.string,
     /**
-      * sting length of the message
-    */
-    messageSize: PropTypes.number
-
-
+     * sting length of the message
+     */
+    messageSize: PropTypes.number,
+    /**
+       * Additional text between dropzone and files
+       */
+    additionalText: PropTypes.string,
 
     /**
      * Plus icon after file name is for file from local and cloud icon is for file from server
-    */
+     */
 };
 
 DropzoneInput.defaultProps = {
@@ -330,6 +418,6 @@ DropzoneInput.defaultProps = {
     customFileStyles: {},
     customTextStyles: {},
     customFileNameStyles: {},
-    messageSize: 100
-};
-
+    messageSize: 100,
+    additionalText: ''
+};

package/components/Inputs/NumericInput.js

@@ -3,15 +3,13 @@ import PropTypes from 'prop-types';
 import styled, { css, useTheme } from 'styled-components';
 import defaultThemeColor from '../constants/defaultThemeColor';
 
-const border = `#D4D7E3`;
-
 const TextBox = styled.div`
-    border: 1px solid ${({ theme }) => theme ? border : theme.variant['primary-1']};
+    border: 1px solid ${({ theme }) => theme ? defaultThemeColor.border : theme.variant['primary-1']};
     border-radius: 4px;
-    padding: 5px 12px;
+    padding: 6.5px 12px;
 	display: flex;
 	align-items: center;
-
+    background-color: ${({ theme }) => theme.bgColor};
 	.input-icon svg path {
 		fill: ${({ theme }) => theme.variant['neutral-1']};
 	} 
@@ -58,13 +56,12 @@ const requiredAsterisk = css`
 const Label = styled.label`
     display: flex;
     margin-right: 10px;
-    color: #929EAC;
     align-content: center;
     align-items: center;
     justify-content: center;
 	display: block;
-	margin-bottom: ${({ labelInline, }) => (labelInline) ? '0' : '16px'};
-	margin-right: ${({ labelInline }) => labelInline ? '10px' : ''};
+	margin-bottom: ${({ labelInline, }) => (labelInline) ? '0' : '7px'};
+	margin-right: ${({ labelInline }) => labelInline ? '7px' : ''};
     color: ${({ theme }) => theme.variant['neutral-2']};
 `;
 
@@ -88,7 +85,6 @@ const Form = styled.div`
 Form.defaultProps = {
     theme: defaultThemeColor,
 }
-
 export const NumericInput = ({ label, inputValue, inputStyle, iconBefore, iconAfter, onChange, ...props }) => {
     const handleChange = (e) => {
         const re = /^[0-9\b.-]+$/;
@@ -151,5 +147,4 @@ NumericInput.defaultProps = {
     labelInline: false,
     inputStyle: {},
     inputValue: null,
-}
-
+}