groundfloor-react-ui 1.2.9 → 1.2.11

package/components/Inputs/DropzoneInput.js

@@ -1,450 +0,0 @@
-import PropTypes from 'prop-types';
-import React, { createRef, useState } from 'react';
-import styled, { useTheme } from 'styled-components';
-import defaultStyles from '../constants/defaultStyle';
-import defaultThemeColor from '../constants/defaultThemeColor';
-import getDefaultStyles, { hexToRGB } from '../constants/utils';
-
-import { Icon } from '../Icon';
-import { Label } from '../Label';
-
-const ParentDiv = styled.div`
-  //Set the styles from the default styles object
-  ${({ inBuiltCss, defaultStyles }) => {
-        return getDefaultStyles(inBuiltCss, defaultStyles);
-    }}
-
-  background-color:${({ hover, isValid, fileArr, backgroundColor, theme }) => {
-        if (!isValid) return 'rgba(215, 0, 0, 0.05)';
-        else if (isValid && hover && backgroundColor) return backgroundColor;
-        else if (isValid && hover && !backgroundColor)
-            return theme.primary['primary-1'];
-        else if (isValid && !hover && fileArr.length > 0) return theme.bgColor;
-        else if (isValid && !hover && fileArr.length == 0)
-            return hexToRGB(theme.primary['primary-1'], 0.05);
-    }}
-        
-        };
-  border: 1px
-    ${({ isValid, fileArr, backgroundColor, theme }) =>
-        !isValid
-            ? 'dashed ' + theme.ui['error']
-            : fileArr.length > 0
-                ? `solid ` +
-                `${backgroundColor ? backgroundColor : theme.primary['primary-1']}`
-                : `dashed ` +
-                `${backgroundColor ? backgroundColor : theme.primary['primary-1']}`};
-
-  &:hover {
-    cursor: pointer;
-  }
-  transition: all 500ms linear;
-
-  // custom styles
-  ${({ customDropzoneStyles }) => customDropzoneStyles}
-`;
-
-const FileDiv = styled.div`
-  //Set the styles from the default styles object
-  ${({ inBuiltCss, defaultStyles }) => {
-        return getDefaultStyles(inBuiltCss, defaultStyles);
-    }}
-
-  // custom styles
-    ${({ customFileStyles }) => customFileStyles}
-`;
-
-const InputFile = styled.input`
-  display: none;
-`;
-
-const TextDiv = styled.div`
-  //Set the styles from the default styles object
-  ${({ inBuiltCss, defaultStyles }) => {
-        return getDefaultStyles(inBuiltCss, defaultStyles);
-    }}
-
-  // custom styles
-    ${({ customTextStyles }) => customTextStyles}
-`;
-
-const FileName = styled.span`
-  //Set the styles from the default styles object
-  ${({ inBuiltCss, type }) => {
-        return getDefaultStyles(inBuiltCss, 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;
-`;
-
-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 = ({
-    isValid,
-    label,
-    labelStyle,
-    labelInline,
-    required,
-    message,
-    fileArr,
-    setFileArr,
-    deleteFile,
-    customDropzoneStyles,
-    customFileStyles,
-    customTextStyles,
-    customFileNameStyles,
-    backgroundColor,
-    singleFile,
-    messageSize,
-    additionalText,
-    id,
-    ...props
-}) => {
-    const activeTheme = useTheme() || defaultThemeColor;
-
-    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);
-        } else {
-            deleteItemFromServer(file, i);
-        }
-    }
-
-    function openFileDialog() {
-        fileInputRef.current.click();
-    }
-
-    return (
-        <div>
-            <div style={{ display: 'flex', width: 'inherit' }}>
-                <Label
-                    customStyles={labelStyle}
-                    type={'label-text'}
-                    labelInline={labelInline}
-                    text={label}
-                    style={{
-                        display: 'flex',
-                        marginBottom: `${!labelInline ? '7px' : ''}`,
-                        paddingBottom: '0px',
-                    }}
-                    {...props}
-                />
-                {required && (
-                    <div
-                        style={{
-                            marginLeft: '4px',
-                            color: `${activeTheme.variant['error']}`,
-                        }}
-                    >
-                        *
-                    </div>
-                )}
-            </div>
-            <ParentDiv
-                theme={activeTheme}
-                inBuiltCss={defaultStyles}
-                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'
-                    id={id}
-                    multiple={singleFile == true ? false : true}
-                    onChange={onFilesAdded}
-                    onClick={(e) => (e.target.value = null)}
-                    {...props}
-                />
-                {isValid ? (
-                    <Icon
-                        icon='file-upload'
-                        color={
-                            hover ? activeTheme.bgColor : activeTheme.primary['primary-1']
-                        }
-                        size={24}
-                    />
-                ) : null}
-                <TextDiv
-                    isValid={isValid}
-                    hover={hover}
-                    customTextStyles={customTextStyles}
-                    inBuiltCss={defaultStyles}
-                    defaultStyles={'dropzone-text-div'}
-                >
-                    {isValid ? (
-                        <div>
-                            <span
-                                style={{
-                                    color: hover
-                                        ? activeTheme.bgColor
-                                        : activeTheme.primary['primary-1'],
-                                }}
-                            >
-                                Choose a file{' '}
-                            </span>
-                            <span
-                                style={{
-                                    color: hover
-                                        ? activeTheme.bgColor
-                                        : activeTheme.neutral['neutral-2'],
-                                }}
-                            >
-                                or{' '}
-                            </span>
-                            <span
-                                style={{
-                                    color: hover ? activeTheme.bgColor : activeTheme.textColor,
-                                }}
-                            >
-                                drag {singleFile ? 'it' : 'them'} here
-                            </span>
-                        </div>
-                    ) : (
-                        <div>
-                            <span style={{ color: activeTheme.variant['error'] }}>
-                                Try again!!{' '}
-                            </span>
-                            <span
-                                style={{
-                                    color: activeTheme.textColor,
-                                }}
-                            >
-                                {message.length > messageSize
-                                    ? message.slice(0, messageSize)
-                                    : message}
-                            </span>
-                        </div>
-                    )}
-                </TextDiv>
-            </ParentDiv>
-            {additionalText.length > 0 && (
-                <AdditionalText>{additionalText}</AdditionalText>
-            )}{' '}
-            {fileArr?.map((item, i) => {
-                return (
-                    <FileDiv
-                        inBuiltCss={defaultStyles}
-                        defaultStyles={'dropzone-file-div'}
-                        key={`${item}-${i}`}
-                        customFileStyles={customFileStyles}
-                    >
-                        <IconDiv>
-                            <Icon icon='file-icon' color={activeTheme.primary['primary-1']} />
-                        </IconDiv>
-
-                        {!(item instanceof File) ? (
-                            <a
-                                style={{
-                                    color: activeTheme.variant['primary-1'],
-                                    marginLeft: '5px',
-                                }}
-                                href={item?.path}
-                                target='_blank'
-                                rel='noreferrer'
-                            >
-                                {' '}
-                                {item.name}
-                            </a>
-                        ) : (
-                            <FileName
-                                inBuiltCss={defaultStyles}
-                                type={'dropzone-file-name'}
-                                customFileNameStyles={customFileNameStyles}
-                            >
-                                {item.name}
-                            </FileName>
-                        )}
-
-                        <OtherInfoDiv>{item?.otherInfo}</OtherInfoDiv>
-
-                        <CrossDiv
-                            key={(Math.random() * 101) | 0}
-                            onClick={() => fileRemoveFromArary(item, i)}
-                        >
-                            <div style={{ marginRight: '7px' }}>
-                                <Icon
-                                    icon={`${!(item instanceof File) && 'cloud-icon'}`}
-                                    color={activeTheme.primary['primary-1']}
-                                />
-                            </div>
-
-                            <Icon
-                                icon='cross-icon'
-                                color={activeTheme.neutral['neutral-2']}
-                                size={13}
-                            />
-                        </CrossDiv>
-                    </FileDiv>
-                );
-            })}
-        </div>
-    );
-};
-
-DropzoneInput.propTypes = {
-    /**
-     *	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,
-    /**
-     * 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
-     */
-    /**
-     * id of the file input 
-     */
-    id: PropTypes.string
-};
-
-DropzoneInput.defaultProps = {
-    onFilesAdded: () => null,
-    isValid: true,
-    message: '',
-    fileArr: [],
-    setFileArr: () => { },
-    customDropzoneStyles: {},
-    customFileStyles: {},
-    customTextStyles: {},
-    customFileNameStyles: {},
-    messageSize: 100,
-    additionalText: '',
-    id: ''
-};

package/components/Inputs/NumericInput.js

@@ -1,177 +0,0 @@
-import PropTypes from 'prop-types';
-import React from 'react';
-import styled, { css } from 'styled-components';
-import defaultThemeColor from '../constants/defaultThemeColor';
-
-const TextBox = styled.div`
-  border: 1px solid
-    ${({ theme }) =>
-    theme.border};
-  border-radius: 4px;
-  padding: 6.5px 12px;
-  display: flex;
-  align-items: center;
-  background-color: ${({ theme }) => theme.bgColor};
-  .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`
-  width: 85%;
-  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;
-  align-content: center;
-  align-items: center;
-  justify-content: center;
-  display: block;
-  margin-bottom: ${({ labelInline }) => (labelInline ? '0' : '7px')};
-  margin-right: ${({ labelInline }) => (labelInline ? '7px' : '')};
-  padding-bottom: 0px;
-  color: ${({ theme }) => theme.variant['neutral-2']};
-
-  ${({ labelStyle }) => labelStyle}
-`;
-
-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,
-  theme,
-  id,
-  labelStyle,
-  ...props
-}) => {
-  const handleChange = (e) => {
-    const re = /^[0-9\b.-]+$/;
-    const { value } = e.currentTarget;
-    if (value === '' || re.test(value)) {
-      onChange(value);
-    }
-  };
-
-  console.log(labelStyle);
-
-  return (
-    <Form {...props}>
-      {label.length > 0 && <Label labelStyle={labelStyle}
-      >{label}</Label>}
-      <div>
-        <TextBox {...props}>
-          <div className='input-icon'>{iconBefore}</div>
-          <Input
-            {...props}
-            inputStyle={inputStyle}
-            value={inputValue}
-            onChange={handleChange}
-            type='number'
-            id={id}
-          />
-          <div className='input-icon' style={{ position: 'absolute', right: '7px' }}>{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,
-  /**
-   * custom style of input element
-   */
-  inputStyle: PropTypes.object,
-  /**
-   * id of the number input
-   */
-  id: PropTypes.string,
-  /**
-   * custom style of label element
-   */
-  labelStyle: PropTypes.object,
-};
-
-NumericInput.defaultProps = {
-  theme: defaultThemeColor,
-  label: '',
-  labelInline: false,
-  inputStyle: {},
-  inputValue: null,
-  id: '',
-  labelStyle: {},
-};