groundfloor-react-ui 1.0.0

package/components/Inputs/DropzoneInput.js

@@ -0,0 +1,335 @@
+import React, { useState, createRef } from "react";
+import styled from 'styled-components';
+import defaultThemeColor from '../constants/defaultThemeColor';
+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";
+
+
+const ParentDiv = styled.div`
+
+    //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}
+`;
+
+
+const FileDiv = styled.div`
+    //Set the styles from the default styles object
+    ${({ theme, defaultStyles }) => {
+        return getDefaultStyles(theme, defaultStyles);
+    }}
+    
+    // custom styles
+    ${({ customFileStyles }) => customFileStyles}
+`;
+
+const InputFile = styled.input`
+    display: none;
+`;
+
+const TextDiv = styled.div`
+    //Set the styles from the default styles object
+    ${({ theme, defaultStyles }) => {
+        return getDefaultStyles(theme, defaultStyles);
+    }}
+    
+    // custom styles
+    ${({ customTextStyles }) => customTextStyles}
+`;
+
+const FileName = styled.span`
+    //Set the styles from the default styles object
+    ${({ theme, type }) => {
+        return getDefaultStyles(theme, type);
+    }}
+    
+    // custom styles
+    ${({ customFileNameStyles }) => customFileNameStyles}
+`;
+
+const CrossDiv = styled.div`
+    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;
+`;
+
+export const DropzoneInput = ({ theme, themeColor, isValid, label, labelStyle, labelInline, required, message, fileArr, setFileArr, deleteFile, customDropzoneStyles, customFileStyles, customTextStyles, customFileNameStyles, backgroundColor, singleFile, messageSize, ...props }) => {
+    const [hover, setHover] = useState(false);
+    const fileInputRef = createRef();
+
+    function onFilesAdded(event) {
+        const { files } = event.target;
+        setHover(false);
+        props.onFilesAdded(fileListToArray(files, singleFile));
+    }
+
+    function onDragOver(event) {
+        stopEvent(event);
+        setHover(true);
+    }
+
+
+    function onDragLeave(event) {
+        stopEvent(event);
+        setHover(false);
+    }
+
+
+    function onDrop(event) {
+        stopEvent(event);
+
+        const { files } = event.dataTransfer;
+        setHover(true);
+        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
+                ))
+            )
+        }
+        setFileArr(result);
+        setHover(false);
+        return result;
+    }
+
+    function deleteItemFromServer(file, i) {
+        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);
+            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={{ display: 'flex' }}>
+                <Label
+                    themeColor={defaultThemeColor}
+                    customStyles={labelStyle}
+                    type={'label-text'}
+                    labelInline={labelInline}
+                    text={label}
+                    style={{
+                        'display': 'flex',
+                        'paddingBottom': `${!labelInline ? '16.64px' : ''}`,
+                    }}
+                    {...props} />
+                {required && <div style={{
+                    marginLeft: '4px',
+                    color: `${themeColor.variant['error']}`
+                }} >*</div>}
+            </div>
+            <ParentDiv
+                theme={defaultStyles}
+                themeColor={defaultThemeColor}
+                defaultStyles={'dropzone-parent'}
+                backgroundColor={backgroundColor}
+                customDropzoneStyles={customDropzoneStyles}
+                onDragLeave={onDragLeave}
+                onDragOver={onDragOver}
+                onDrop={onDrop}
+                onClick={openFileDialog}
+                hover={hover}
+                isValid={isValid}
+                fileArr={fileArr}
+            >
+                <InputFile
+                    ref={fileInputRef}
+                    type="file"
+                    multiple={singleFile == true ? false : true}
+                    onChange={onFilesAdded}
+                    onClick={(e) => e.target.value = null}
+                    {...props}
+                />
+                {isValid ?
+                    <Icon
+                        icon='file-attach'
+                        color={hover ? themeColor.bgColor : backgroundColor}
+                        size={24} />
+                    : null}
+                <TextDiv isValid={isValid} hover={hover} customTextStyles={customTextStyles}
+                    theme={defaultStyles}
+                    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>
+                        </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>
+                        </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
+                        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>
+            })}
+        </div>
+    )
+}
+
+DropzoneInput.propTypes = {
+    /**
+     *	Theme props of the default css style
+     */
+    theme: PropTypes.object,
+    /**
+     *	onFileAdd function
+     */
+    onFilesAdded: PropTypes.func,
+    /**
+     *	is the input file valid
+     */
+    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
+
+
+
+    /**
+     * Plus icon after file name is for file from local and cloud icon is for file from server
+    */
+};
+
+DropzoneInput.defaultProps = {
+    themeColor: defaultThemeColor,
+    theme: defaultStyles,
+    onFilesAdded: () => null,
+    isValid: true,
+    message: '',
+    backgroundColor: `${defaultThemeColor.primary['primary-1']}`,
+    fileArr: [],
+    setFileArr: () => { },
+    customDropzoneStyles: {},
+    customFileStyles: {},
+    customTextStyles: {},
+    customFileNameStyles: {},
+    messageSize: 100
+};
+

package/components/Inputs/NumericInput.js

@@ -0,0 +1,155 @@
+import React, { useState } from 'react';
+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-radius: 4px;
+    padding: 5px 12px;
+	display: flex;
+	align-items: center;
+
+	.input-icon svg path {
+		fill: ${({ theme }) => theme.variant['neutral-1']};
+	} 
+    
+    &:focus-within {
+		border: 1px solid ${({ theme }) => theme.variant['primary-1']};
+        outline: none;
+
+		.input-icon svg path {
+			fill: ${({ theme }) => theme.variant['primary-1']};
+		} 
+    }
+`;
+
+TextBox.defaultProps = {
+    theme: defaultThemeColor,
+}
+
+const Input = styled.input`
+	border: 0;
+	outline: 0;
+	color: ${({ theme }) => theme.variant['primary-2']};
+	margin: 0px;
+	padding: 0;
+    font-size: 14px;
+	flex-grow: 1;
+	flex-shrink: 0;
+
+    // custom styles
+    ${({ inputStyle }) => inputStyle}
+`;
+
+Input.defaultProps = {
+    theme: defaultThemeColor,
+}
+
+const requiredAsterisk = css`
+	&:after {
+		content:" *";
+		color: ${({ theme }) => theme.variant['error']};
+	}
+`
+
+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' : ''};
+    color: ${({ theme }) => theme.variant['neutral-2']};
+`;
+
+Label.defaultProps = {
+    theme: defaultThemeColor,
+}
+
+const inline = css`
+	display: flex;
+	align-items: center;
+`
+
+const Form = styled.div`
+	${({ labelInline }) => labelInline ? inline : null}
+
+	> div {
+		flex: 1 0 auto;
+	}
+`
+
+Form.defaultProps = {
+    theme: defaultThemeColor,
+}
+
+export const NumericInput = ({ label, inputValue, inputStyle, iconBefore, iconAfter, onChange, ...props }) => {
+    const handleChange = (e) => {
+        const re = /^[0-9\b.-]+$/;
+        const { value } = e.currentTarget;
+        if (value === '' || re.test(value)) {
+            onChange(value);
+        }
+    }
+
+    return (
+        <Form {...props}>
+            {label.length > 0 && <Label {...props}>{label}</Label>}
+            <div>
+                <TextBox
+                    {...props}
+                >
+                    <div className="input-icon">
+                        {iconBefore}
+                    </div>
+                    <Input {...props}
+                        inputStyle={inputStyle}
+                        value={inputValue}
+                        onChange={handleChange}
+                        type='number'
+                    />
+                    <div className="input-icon">
+                        {iconAfter}
+                    </div>
+                </TextBox>
+            </div>
+        </Form>
+    )
+}
+
+NumericInput.propTypes = {
+    /**
+     *	Theme props
+     */
+    theme: PropTypes.object,
+    /**
+     *	Label of Input
+     */
+    label: PropTypes.string,
+    /**
+     *	Should label be inline?
+     */
+    labelInline: PropTypes.bool,
+    /**
+     *	Value Prop
+     */
+    inputValue: PropTypes.any,
+
+    inputStyle: PropTypes.object,
+
+}
+
+NumericInput.defaultProps = {
+    theme: defaultThemeColor,
+    label: '',
+    labelInline: false,
+    inputStyle: {},
+    inputValue: null,
+}
+

package/components/Inputs/RadioInput.js

@@ -0,0 +1,205 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import styled from 'styled-components';
+import defaultThemeColor from '../constants/defaultThemeColor';
+import defaultStyles from '../constants/defaultStyle';
+import getDefaultStyles from '../constants/utils';
+import { Label } from '../Label';
+
+
+const RadioOuterCircle = styled.div`
+
+    //Set the styles from the default styles object
+    ${({ theme, defaultRadioOuterCircleStyle }) => {
+        return getDefaultStyles(theme, defaultRadioOuterCircleStyle);
+    }}
+    
+    border: 2px solid ${({ value, selected, selectedCircleColor, defaultBorderColor }) => value !== selected ? defaultBorderColor : selectedCircleColor};
+    
+    // custom styles
+    ${({ radioOuterCircleStyle }) => radioOuterCircleStyle}
+`;
+
+
+const RadioInnerCircle = styled.div`
+
+    //Set the styles from the default styles object
+    ${({ theme, defaultRadioInnerCircleStyle }) => {
+        return getDefaultStyles(theme, defaultRadioInnerCircleStyle);
+    }}
+    
+    width: ${({ value, selected, width }) => value === selected ? width : 0};
+    height: ${({ value, selected, height }) => value === selected ? height : 0};
+    background-color: ${({ value, selected, selectedCircleColor }) => value === selected ? selectedCircleColor : 'transparent'};
+    
+    // custom styles
+    ${({ radioInnerCircleStyle }) => radioInnerCircleStyle}
+`;
+
+const OptionText = styled.div`
+    //Set the styles from the default styles object
+    ${({ theme, defaultOptionStyle }) => {
+        return getDefaultStyles(theme, defaultOptionStyle);
+    }}
+    margin-right: ${({ inline }) => !inline ? '30px' : ''};
+    color: ${({ selected, selectedOptionTextColor, defaultOptionColor }) => selected ?
+        selectedOptionTextColor : defaultOptionColor};
+        
+    // custom styles
+    ${({ optionStyle }) => optionStyle}
+`;
+
+const WrapperDiv = styled.div`
+    margin-bottom: ${({ inline }) => !inline ? '14px' : ''};
+    cursor: pointer;
+    align-items: center;
+    display: flex;
+    gap: 10px;
+`
+
+const ParentDiv = styled.div`
+    display: ${({ inline }) => !inline ? "inline-block" : "flex"};
+    width: max-content;
+    margin: 0;
+`
+
+export const RadioInput = ({ radioOuterCircleStyle, radioInnerCircleStyle, labelStyle, label, optionStyle, options, selectedCircleColor, selectedOptionTextColor, onChange, selected, width, height, inline, defaultBorderColor, defaultOptionColor, ...props }) => {
+    return (
+        <div>
+            <Label
+                themeColor={defaultThemeColor}
+                customStyles={labelStyle}
+                type={'radio-label'}
+                text={label}
+            />
+            <ParentDiv inline={inline} >
+                {options.map((item, i) => {
+                    return <WrapperDiv
+                        key={i + Math.random() * 101}
+                        inline={inline}
+                        onClick={() => { !item?.disabled && onChange(item.value) }}>
+                        <RadioOuterCircle
+                            theme={defaultStyles}
+                            themeColor={defaultThemeColor}
+                            defaultBorderColor={defaultBorderColor}
+                            selectedCircleColor={selectedCircleColor}
+                            radioOuterCircleStyle={{ ...radioOuterCircleStyle, cursor: item?.disabled ? 'not-allowed ' : ' pointer', borderColor: item?.disabled && item?.disabledColor }}
+                            defaultRadioOuterCircleStyle={'radio-outer-circle'}
+                            value={item.value}
+                            selected={!item?.disabled && selected}
+                        >
+
+                            <RadioInnerCircle
+                                theme={defaultStyles}
+                                width={width}
+                                height={height}
+                                selectedCircleColor={selectedCircleColor}
+                                radioInnerCircleStyle={{ ...radioInnerCircleStyle, cursor: item?.disabled ? 'not-allowed ' : ' pointer', backgroundColor: item?.disabled ? 'transparent' :  item?.value === selected ?radioInnerCircleStyle?.backgroundColor : 'transparent' }}
+                                defaultRadioInnerCircleStyle={'radio-inner-circle'}
+                                value={item.value}
+                                selected={selected}
+                            />
+                        </RadioOuterCircle>
+                        <OptionText
+                            defaultOptionColor={defaultOptionColor}
+                            optionStyle={{ ...optionStyle, cursor: item?.disabled ? 'not-allowed ' : ' pointer', color: item?.disabled && item?.disabledColor }}
+                            theme={defaultStyles}
+                            defaultOptionStyle={'option-text'}
+                            selectedOptionTextColor={selectedOptionTextColor}
+                            // selected={item.value === selected}
+                            selected={!item?.disabled && item.value === selected}
+
+                        >
+                            {item.label}
+                        </OptionText>
+                    </WrapperDiv>
+                })}
+            </ParentDiv>
+        </div>
+    )
+}
+
+RadioInput.propTypes = {
+    /**
+     *	Label of RadioButtons
+     */
+    label: PropTypes.string,
+    /**
+     *	Label Style of RadioButtons
+     */
+    labelStyle: PropTypes.object,
+    /**
+     *	Should RadioButtones be inline?
+     */
+    inline: PropTypes.bool,
+    /**
+     *	RadioButton Contents i.e:- 
+       [{ label: "First Radio Button", value: "first", disabled:true, disabledColor: '#ae3232' },
+        { label: "Second Radio Button", value: "second" },
+        { label: "Third Radio Button", value: "third" }]
+     */
+    options: PropTypes.array,
+    /**
+     *	RadioButton style object
+     */
+    optionStyle: PropTypes.object,
+    /**
+     *	RadioButton checked value
+     */
+    selected: PropTypes.string,
+    /**
+     *	RadioButton function
+     */
+    onChange: PropTypes.func,
+    /**
+     *	Default option color when not selected
+     */
+    defaultOptionColor: PropTypes.string,
+    /**
+     *	Default border color when not selectecd
+     */
+    defaultBorderColor: PropTypes.string,
+    /**
+     *	RadioButton outside design
+     */
+    radioOuterCircleStyle: PropTypes.object,
+    /**
+     *	RadioButton inner design
+     */
+    radioInnerCircleStyle: PropTypes.object,
+    /**
+     *	RadioButton selected circle width
+     */
+    width: PropTypes.string,
+    /**
+     *	RadioButton selected circle height
+     */
+    height: PropTypes.string,
+    /**
+     *	RadioButton selected circle color
+     */
+    selectedCircleColor: PropTypes.string,
+    /**
+     *	RadioButton selected option
+     */
+    selectedOptionTextColor: PropTypes.string,
+}
+
+RadioInput.defaultProps = {
+    label: '',
+    labelStyle: {},
+    inline: false,
+    options: [],
+    optionStyle: {},
+    selected: 'one',
+    onChange: () => { },
+    radioOuterCircleStyle: {},
+    radioInnerCircleStyle: {},
+    defaultOptionColor: `${defaultThemeColor.neutral['neutral-2']}`,
+    defaultBorderColor: '#D4D7E3',
+    width: '14px',
+    height: '14px',
+    selectedCircleColor: `${defaultThemeColor.primary['primary-1']}`,
+    selectedOptionTextColor: `${defaultThemeColor.neutral['neutral-1']}`,
+}
+