groundfloor-react-ui 1.2.8 → 1.2.10

package/components/Inputs/Signature.js

@@ -1,369 +0,0 @@
-import PropTypes from 'prop-types';
-import React, { useEffect, useRef, useState } from 'react';
-import SignaturePad from 'react-signature-pad-wrapper';
-import styled, { useTheme } from 'styled-components';
-import defaultStyles from '../constants/defaultStyle';
-import defaultThemeColor from '../constants/defaultThemeColor';
-import getDefaultStyles from '../constants/utils';
-import { Icon } from '../Icon';
-
-const ParentDiv = styled.div`
-  //Set the styles from the default styles object
-  ${({ inBuiltCss, defaultParentDivStyle }) => {
-        return getDefaultStyles(inBuiltCss, defaultParentDivStyle);
-    }}
-
-  border: 1px solid ${({
-        isMyInputFocused,
-        activeColor,
-        defaultColor,
-        theme,
-    }) => {
-        if (isMyInputFocused && activeColor) return activeColor;
-        else if (isMyInputFocused && !activeColor)
-            return theme.primary['primary-1'];
-        else if (!isMyInputFocused && defaultColor) return defaultColor;
-        else if (!isMyInputFocused && !defaultColor)
-            return theme.neutral['neutral-3'];
-    }};
-
-  &:focus-within {
-    border-color: ${({ activeColor, theme }) =>
-        activeColor ? activeColor : theme.primary['primary-1']};
-  }
-`;
-
-const WrapperDiv = styled.div`
-  //Set the styles from the default styles object
-  ${({ inBuiltCss, defaultWrapperDivStyle }) => {
-        return getDefaultStyles(inBuiltCss, defaultWrapperDivStyle);
-    }}
-
-  flex-direction: ${({ signIcon }) => (signIcon ? 'column' : 'initial')};
-  width: ${({ signIcon }) =>
-        signIcon ? 'min-content' : 'calc(100% - 50px) !important'};
-  max-width: ${({ signIcon }) => (signIcon ? '42px' : '490px')};
-  border-right: 1px solid
-    ${({ activeColor, defaultColor, isMyInputFocused, signIcon, theme }) => {
-        if (signIcon && isMyInputFocused && activeColor) return activeColor;
-        else if (signIcon && isMyInputFocused && !activeColor)
-            return theme.primary['primary-1'];
-        else if (signIcon && !isMyInputFocused && defaultColor)
-            return defaultColor;
-        else if (signIcon && !isMyInputFocused && !defaultColor)
-            return theme.neutral['neutral-3'];
-        else if (!signIcon) return 'none';
-    }};
-  border-left: ${({ signIcon }) => (!signIcon ? 'none' : '')};
-  margin-left: ${({ signIcon }) => (!signIcon ? '42px' : '')};
-  position: ${({ signIcon }) => (!signIcon ? '' : 'absolute')};
-`;
-
-const ControllerDiv = styled.div`
-  width: 39px;
-  height: 44px;
-  display: flex;
-  flex-direction: row;
-  justify-content: center;
-  align-items: center;
-  border-bottom: ${({
-    penIcon,
-    isMyInputFocused,
-    activeColor,
-    defaultColor,
-    theme,
-}) =>
-        penIcon
-            ? isMyInputFocused
-                ? `1px solid ` +
-                `${activeColor ? activeColor : theme.primary['primary-1']}`
-                : `1px solid ` +
-                `${defaultColor ? defaultColor : theme.neutral['neutral-3']}`
-            : ''};
-  background-color: rgba(255, 255, 255, 0.05);
-  cursor: pointer;
-`;
-
-const InputText = styled.input`
-  ${({ inBuiltCss, defaultInputStyle }) => {
-        return getDefaultStyles(inBuiltCss, defaultInputStyle);
-    }}
-
-  border-bottom:  ${({ value, defaultColor, theme }) =>
-        value.length > 0
-            ? 'none'
-            : '1px solid ' + defaultColor
-                ? defaultColor
-                : theme.neutral['neutral-3']};
-
-  &::placeholder {
-    font-size: 17px;
-    text-align: center;
-    color: ${({ placeholderColor, theme }) =>
-        placeholderColor ? placeholderColor : theme.neutral['neutral-3']};
-    font-family: 'Averta';
-    font-style: normal;
-    font-weight: normal;
-    line-height: 22px;
-  }
-  &: focus-within {
-    border: none;
-    outline: none;
-
-    ::placeholder {
-      color: transparent;
-    }
-  }
-
-  // custom styles
-  ${({ customInputStyle }) => customInputStyle}
-`;
-
-const SignaturePadDiv = styled.div`
-  position: relative;
-  width: inherit;
-  display: flex;
-  margin: 4px;
-`;
-
-const IconDiv = styled.div`
-  padding-left: 2px;
-  display: flex;
-  justify-content: center;
-  cursor: pointer;
-`;
-
-export const SignatureInput = ({
-    onChange,
-    activeColor,
-    defaultColor,
-    placeholderColor,
-    placeholderText,
-    customInputStyle,
-    pointsArray,
-    setPointsArray,
-    value,
-    setValue,
-    valueForSignatureDrawing,
-    setValueForSignatureDrawing,
-    imageURL,
-    setImageURL,
-    id,
-    ...props
-}) => {
-    const activeTheme = useTheme() || defaultThemeColor;
-    const [selected, setSelected] = useState('default');
-    const [isMyInputFocused, setIsMyInputFocused] = useState(false);
-    const [dirty, setDirty] = useState(false);
-    const pad = useRef(null);
-
-    useEffect(() => {
-        if (dirty) {
-            save();
-            setValueForSignatureDrawing(pad.current);
-        }
-    }, [dirty === true]);
-
-    const onClear = () => {
-        setValue('');
-        setValueForSignatureDrawing(pad.current);
-        if (pad.current) {
-            pad.current.clear();
-        }
-        setIsMyInputFocused(false);
-        setDirty(false);
-    };
-
-    const save = () => {
-        setPointsArray(pad.current.toData());
-        setImageURL(pad.current.toDataURL('image/png'));
-        return [imageURL, pointsArray];
-    };
-
-    return (
-        <ParentDiv
-            inBuiltCss={defaultStyles}
-            defaultParentDivStyle={'signature-parent-div'}
-            isMyInputFocused={isMyInputFocused}
-            selected={selected}
-            activeColor={activeColor}
-            defaultColor={defaultColor}
-            theme={activeTheme}
-        >
-            <WrapperDiv
-                inBuiltCss={defaultStyles}
-                defaultWrapperDivStyle={'signature-wrapper-div'}
-                activeColor={activeColor}
-                defaultColor={defaultColor}
-                selected={selected}
-                isMyInputFocused={isMyInputFocused}
-                signIcon={true}
-                theme={activeTheme}
-            >
-                <ControllerDiv
-                    activeColor={activeColor}
-                    defaultColor={defaultColor}
-                    isMyInputFocused={isMyInputFocused}
-                    theme={activeTheme}
-                    penIcon={true}
-                    onClick={() => {
-                        setSelected('default');
-                        onClear();
-                    }}
-                >
-                    <Icon
-                        icon='pen-icon'
-                        color={
-                            selected === 'default'
-                                ? activeColor
-                                    ? activeColor
-                                    : activeTheme.primary['primary-1']
-                                : activeTheme.black
-                        }
-                    />
-                </ControllerDiv>
-                <ControllerDiv
-                    activeColor={activeColor}
-                    defaultColor={defaultColor}
-                    theme={activeTheme}
-                    isMyInputFocused={isMyInputFocused}
-                    penIcon={false}
-                    onClick={() => {
-                        setSelected('sign');
-                        onClear();
-                    }}
-                >
-                    <Icon
-                        icon='sign-icon'
-                        color={
-                            selected !== 'default'
-                                ? activeColor
-                                    ? activeColor
-                                    : activeTheme.primary['primary-1']
-                                : activeTheme.black
-                        }
-                    />
-                </ControllerDiv>
-            </WrapperDiv>
-            <WrapperDiv
-                inBuiltCss={defaultStyles}
-                defaultWrapperDivStyle={'signature-wrapper-div'}
-                activeColor={activeColor}
-                defaultColor={defaultColor}
-                theme={activeTheme}
-                selected={selected}
-                isMyInputFocused={isMyInputFocused}
-                signIcon={false}
-                onTouchStart={() => { }}
-            >
-                {selected === 'default' ? (
-                    <InputText
-                        inBuiltCss={defaultStyles}
-                        defaultInputStyle={'signature-input-text'}
-                        placeholder={placeholderText}
-                        placeholderColor={placeholderColor}
-                        customInputStyle={customInputStyle}
-                        onBlur={() => setIsMyInputFocused(false)}
-                        onFocus={() => setIsMyInputFocused(true)}
-                        id={id}
-                        value={value}
-                        defaultColor={defaultColor}
-                        theme={activeTheme}
-                        onChange={(e) => setValue(e.target.value)}
-                    />
-                ) : (
-                    <SignaturePadDiv
-                        onMouseEnter={() => setIsMyInputFocused(true)}
-                        onMouseLeave={() => setIsMyInputFocused(false)}
-                        onClick={() => {
-                            setDirty(true);
-                            save();
-                        }}
-                    >
-                        <SignaturePad
-                            ref={pad}
-                            id={id}
-                            redrawOnResize
-                            height={75}
-                            options={{ minWidth: 1, maxWidth: 1, penColor: '#444444' }}
-                        />
-                    </SignaturePadDiv>
-                )}
-                {(value || dirty) && (
-                    <IconDiv selected={selected} onClick={() => onClear()}>
-                        <Icon
-                            icon='cross-icon'
-                            color={
-                                defaultColor ? defaultColor : activeTheme.neutral['neutral-3']
-                            }
-                        />
-                    </IconDiv>
-                )}
-            </WrapperDiv>
-        </ParentDiv>
-    );
-};
-
-SignatureInput.propTypes = {
-    /**
-     *	Active Color for the signature
-     */
-    activeColor: PropTypes.string,
-    /**
-     *	Default Color for the signature
-     */
-    defaultColor: PropTypes.string,
-    /**
-     *	PlaceHolder Color for the signature
-     */
-    placeholderColor: PropTypes.string,
-    /**
-     *	PlaceHolder text
-     */
-    placeholderText: PropTypes.string,
-    /**
-     *	Custom style of the input text
-     */
-    customInputStyle: PropTypes.object,
-    /**
-     *	Array of points for the signature
-     */
-    pointsArray: PropTypes.any,
-    /**
-     *	Function that sets the Array of points for the signature
-     */
-    setPointsArray: PropTypes.func,
-    /**
-     *	Signature Text
-     */
-    value: PropTypes.string,
-    /**
-     *	Signature Text Setter
-     */
-    setValue: PropTypes.func,
-    /**
-     *	Image url of the Signature drawing
-     */
-    imageURL: PropTypes.string,
-    /**
-     *	Function that sets Image url of the Signature drawing
-     */
-    setImageURL: PropTypes.func,
-    /**
-     *	id of the signature input
-     */
-    id: PropTypes.string,
-};
-
-SignatureInput.defaultProps = {
-    customInputStyle: {},
-    placeholderText: 'Type your signature here',
-    pointsArray: null,
-    setPointsArray: () => { },
-    value: '',
-    setValue: () => { },
-    imageURL: '',
-    setImageURL: () => { },
-    setValueForSignatureDrawing: () => { },
-    id: ''
-};

package/components/Inputs/TextArea.js

@@ -1,214 +0,0 @@
-import PropTypes from 'prop-types';
-import React from 'react';
-import styled, { css, useTheme } from 'styled-components';
-import defaultStyles from '../constants/defaultStyle';
-import defaultThemeColor from '../constants/defaultThemeColor';
-import getDefaultStyles from '../constants/utils';
-import { Label } from '../Label';
-
-const TextWrapper = styled.div`
-  //Set the styles from the default styles object
-  ${({ inBuiltCss, defaultWrapperStyle }) => {
-        return getDefaultStyles(inBuiltCss, defaultWrapperStyle);
-    }}
-
-  border: ${({ isValid, theme }) =>
-        !isValid
-            ? '1px solid ' + theme.variant['error']
-            : '1px solid ' + theme.border};
-
-  .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']};
-    }
-  }
-
-  // custom styles
-  ${({ textAreaStyle }) => textAreaStyle}
-`;
-
-const Input = styled.textarea`
-  //Set the styles from the default styles object
-  ${({ inBuiltCss, defaultInputStyle }) => {
-        return getDefaultStyles(inBuiltCss, defaultInputStyle);
-    }}
-  margin: 0;
-  overflow: auto;
-  resize: vertical // custom styles
-    ${({ inputStyle }) => inputStyle};
-`;
-
-const inline = css`
-  display: flex;
-  gap: 7px;
-  align-items: center;
-`;
-
-const Form = styled.div`
-  ${({ labelInline }) => (labelInline ? inline : null)}
-  ${({ customStylesForm }) => {
-        if (customStylesForm) {
-            return { ...customStylesForm };
-        }
-    }}  
-    position: relative;
-  .err-text {
-    color: ${({ theme }) => theme.variant['error']};
-    margin-top: 5px;
-    font-size: 10px;
-  }
-`;
-
-export const TextArea = React.forwardRef(
-    (
-        {
-            customStylesForm,
-            textAreaStyle,
-            labelStyle,
-            inputStyle,
-            errMsg,
-            required,
-            label,
-            labelInline,
-            iconBefore,
-            iconAfter,
-            isValid,
-            rows,
-            cols,
-            id,
-            ...props
-        },
-        ref
-    ) => {
-        const activeTheme = useTheme() || defaultThemeColor;
-
-        return (
-            <Form
-                labelInline={labelInline}
-                customStylesForm={customStylesForm}
-                theme={activeTheme}
-                {...props}
-            >
-                <div style={{ display: 'flex' }}>
-                    <Label
-                        customStyles={labelStyle}
-                        type={'label-text'}
-                        labelInline={labelInline}
-                        text={label}
-                        errMsg={errMsg}
-                        style={{
-                            display: 'flex',
-                            marginBottom: `${!labelInline ? '7px' : ''}`,
-                            paddingBottom: '0px',
-                        }}
-                        {...props}
-                    />
-                    {required && (
-                        <div
-                            style={{
-                                marginLeft: '4px',
-                                color: `${activeTheme.variant['error']}`,
-                            }}
-                        >
-                            *
-                        </div>
-                    )}
-                </div>
-                <TextWrapper
-                    theme={activeTheme}
-                    required={required}
-                    textAreaStyle={textAreaStyle}
-                    isValid={isValid}
-                    inBuiltCss={defaultStyles}
-                    defaultWrapperStyle={'textbox-wrapper'}
-                    {...props}
-                >
-                    <div className='input-icon'>{iconBefore}</div>
-                    <Input
-                        ref={ref}
-                        inputStyle={inputStyle}
-                        defaultInputStyle={'textarea-wrapper'}
-                        cols={cols}
-                        rows={rows}
-                        inBuiltCss={defaultStyles}
-                        id={id}
-                        {...props}
-                        size='1'
-                    />
-                    <div className='input-icon'>{iconAfter}</div>
-                </TextWrapper>
-                <div className='err-text'>{errMsg}</div>
-            </Form>
-        );
-    }
-);
-
-TextArea.propTypes = {
-    /**
-     *	row number of the text area
-     */
-    rows: PropTypes.number,
-    /**
-     *	Label of Input
-     */
-    label: PropTypes.string,
-    /**
-     *	Is the input required?
-     */
-    required: PropTypes.bool,
-    /**
-     *	Should label be inline with textbox?
-     */
-    labelInline: PropTypes.bool,
-    /**
-     *	Error Message
-     */
-    errMsg: PropTypes.string,
-    /**
-     *	Icon before input value
-     */
-    iconBefore: PropTypes.any,
-    /**
-     *	Icon after input value
-     */
-    iconAfter: PropTypes.any,
-    /**
-     *	custom style of textbox Wrapper
-     */
-    textAreaStyle: PropTypes.object,
-    /**
-     *	custom style of textbox input
-     */
-    labelStyle: PropTypes.object,
-    /**
-     *	custom style of textbox label
-     */
-    inputStyle: PropTypes.object,
-    /**
-    *	id of the textarea input
-    */
-    id: PropTypes.string,
-};
-
-TextArea.defaultProps = {
-    label: '',
-    required: false,
-    isValid: true,
-    labelInline: false,
-    errMsg: '',
-    iconBefore: null,
-    iconAfter: null,
-    textAreaStyle: {},
-    labelStyle: {},
-    inputStyle: {},
-    rows: 3,
-    // cols: 100
-    id: ''
-};