groundfloor-react-ui 1.0.0 → 1.0.3

package/components/Inputs/TextInputClicableMS.js

@@ -1,255 +0,0 @@
-import React, { forwardRef } 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, isValid }) => isValid ? border : theme.variant['error']};
-    border-radius: 4px;
-    display: flex;
-    align-items: center;
-    position: relative;
-    z-index: 2;
-    cursor: pointer;
-
-   
-
-    .input-icon svg path {
-        fill: ${({ theme }) => theme.variant['primary-2']};
-    }
-    
-    &:focus-within {
-        border: 1px solid ${({ theme }) => theme.variant['primary-1']};
-        outline: none;
-
-        .input-icon svg path {
-            fill: ${({ theme, iconVariant }) => theme.variant[iconVariant]};
-        }
-    }
-`;
-
-const InputBorder = styled.div`
-    position: absolute;
-    top: calc(100% - 3px);
-    bottom: -2px;
-    left: 0;
-    right: 0;
-    z-index: 0;
-    border: 1px solid ${border};
-    border-top: none;
-    border-bottom: none;
-    visibility: ${({ menuIsOpen }) => menuIsOpen ? 'visible' : 'hidden'}
-`
-
-
-const Input = styled.input`
-    border: 0;
-    outline: 0;
-    color: ${({ theme }) => theme.variant['primary-2']};
-    margin: 0 5px;
-    padding: 8px 0 8px 12px;
-    font-size: 14px;
-    flex-grow: 1;
-    flex-shrink: 0;
-    cursor: ${({ isSearchable, menuIsOpen }) => !isSearchable ? 'pointer' : menuIsOpen ? 'input' : 'pointer'};
-    white-space: nowrap;
-    overflow: hidden;
-    text-overflow: ellipsis;
-
-    ::placeholder {
-        color: ${({ theme, textValue }) => textValue ? theme.variant['primary-2'] : theme.variant['neutral-3']};
-      }
-`;
-
-const requiredAsterisk = css`
-    &:after {
-        content:" *";
-        color: ${({ theme }) => theme.variant['error']};
-    }
-`
-
-const Label = styled.label`
-    display: block;
-    margin-bottom: ${({ labelInline, errMsg }) => (labelInline && errMsg) ? '18px' : '8px'};
-    margin-right: ${({ labelInline }) => labelInline ? '10px' : ''};
-    color: ${({ theme }) => theme.variant['neutral-2']};
-    ${({ required }) => required ? requiredAsterisk : null}
-`;
-
-const inline = css`
-    display: flex;
-    align-items: center;
-`
-
-const Form = styled.div`
-    ${({ labelInline }) => labelInline ? inline : null}
-    z-index: 1;
-    .err-text {
-        color: ${({ theme }) => theme.variant['error']};
-        margin-top: 5px;
-        font-size: 10px;
-    }
-
-    > div {
-        flex: 1 0 auto;
-    }
-`
-
-const StyledP = styled.p`
-margin: 0 0 0 10px;
-color: #6B747F;
-white-space: nowrap;
-cursor: ${({ isSearchable, menuIsOpen }) => !isSearchable ? 'pointer' : menuIsOpen ? 'default' : 'pointer'};
-`
-
-const TextInputClicableMS = forwardRef(({ isSearchable, qtySelected, label, errMsg, iconBefore, iconAfter, onClick, onBlur, iconVariant, readonly, value, placeHolder, onChange, inputText, textValue, autofocusP, menuIsOpen, ...props }, ref) => {
-    const theme = useTheme() || defaultThemeColor;
-
-    return (
-        <Form {...props}>
-            <Label {...props} errMsg={errMsg} >
-                {label}
-            </Label>
-            <div ref={ref.refForm}>
-                <InputBorder menuIsOpen={menuIsOpen}></InputBorder>
-                <TextBox
-                    {...props}
-                    onClick={!isSearchable ? onClick : menuIsOpen ? null : onClick} //if menu is close onClickon input open it. If open cannot close but type in it
-                >
-
-                    <div className="input-icon">
-                        {iconBefore}
-                    </div>
-                    <Input
-                        {...props}
-                        ref={ref.refInput}
-                        readOnly={readonly}
-                        onChange={onChange}
-                        value={value}
-                        placeholder={placeHolder}
-                        textValue={textValue} //for styling
-                        autoFocus={autofocusP}
-                        menuIsOpen={menuIsOpen}
-                        isSearchable={isSearchable}
-                        size='1'
-                    />
-                    {qtySelected > 1 && <StyledP menuIsOpen={menuIsOpen} isSearchable={isSearchable} style={{}}>& {qtySelected - 1} more</StyledP>}
-                    <div className="input-icon" onClick={onClick} style={{ padding: '10px 12px', alignSelf: 'stretch', alignItems: 'center', top: '0px', bottom: '0px', right: '0px', display: 'flex' }}>
-                        {iconAfter}
-                    </div>
-                </TextBox>
-                {!menuIsOpen && <div className='err-text'>{errMsg}</div>}
-            </div>
-        </Form>
-    )
-})
-
-TextBox.defaultProps = {
-    theme: defaultThemeColor,
-}
-
-Form.defaultProps = {
-    theme: defaultThemeColor,
-}
-
-Label.defaultProps = {
-    theme: defaultThemeColor,
-}
-
-Input.defaultProps = {
-    theme: defaultThemeColor,
-}
-
-TextInputClicableMS.propTypes = {
-    /**
-     * Theme props
-     */
-    theme: PropTypes.object,
-    /**
-     * Label of Input
-     */
-    label: PropTypes.string,
-    /**
-     * Is the input required?
-     */
-    required: PropTypes.bool,
-    /**
-     * Should label be inline?
-     */
-    labelInline: PropTypes.bool,
-    /**
-     * Is the input correct?
-     */
-    isValid: PropTypes.bool,
-    /**
-     * Error Message
-     */
-    errMsg: PropTypes.string,
-    /**
-     * Icon before input value
-     */
-    iconBefore: PropTypes.any,
-    /**
-     * Icon after input value
-     */
-    iconAfter: PropTypes.any,
-    /**
-     * Boolean to enable disable pointer style
-     */
-    isSearchable: PropTypes.bool,
-    /**
-     * Value of the item selected when > 1
-     */
-    qtySelected: PropTypes.number,
-    /**
-     * Click handler
-     */
-    onClick: PropTypes.func,
-    /**
-     *	Icon color
-     */
-    iconVariant: PropTypes.string,
-    /**
-     * Make input not editable
-     */
-    readonly: PropTypes.bool,
-    /**
-     * Value of the input
-     */
-    value: PropTypes.string,
-    /**
-     * Placeholder of the input
-     */
-    placeHolder: PropTypes.string,
-    /**
-     * Change handler
-     */
-    onChange: PropTypes.func,
-    /**
-     * Apply different style to the place holder
-     */
-    textValue: PropTypes.string,
-    /**
-     * Autofocus the input
-     */
-    autofocusP: PropTypes.bool,
-    /**
-     * Apply different style
-     */
-    menuIsOpen: PropTypes.bool,
-}
-
-TextInputClicableMS.defaultProps = {
-    theme: defaultThemeColor,
-    label: '',
-    required: false,
-    labelInline: false,
-    isValid: true,
-    errMsg: '',
-    iconBefore: null,
-    iconAfter: null,
-}
-
-export default TextInputClicableMS;

package/components/Modal/Modal.js

@@ -1,116 +0,0 @@
-import React, { useRef, useEffect, useCallback } from 'react';
-import styled from 'styled-components';
-import defaultStyles from '../constants/defaultStyle';
-import getDefaultStyles from '../constants/utils';
-import PropTypes from "prop-types";
-
-
-const Background = styled.div`
-    //Set the styles from the default styles object
-    ${({ theme, type }) => {
-        return getDefaultStyles(theme, type);
-    }}
-    
-    // custom styles
-    ${({ customBackgroundStyle }) => customBackgroundStyle}
-`;
-
-const ModalWrapper = styled.div`
-    
-    //Set the styles from the default styles object
-    ${({ theme, type }) => {
-        return getDefaultStyles(theme, type);
-    }}
-    
-    // custom styles
-    ${({ customWrapperStyle }) => customWrapperStyle}
-`;
-
-const CloseModalButton = styled.div`
-    //Set the styles from the default styles object
-    ${({ theme, type }) => {
-        return getDefaultStyles(theme, type);
-    }}
-    
-    // custom styles
-    ${({ closeModalButtonStyle }) => closeModalButtonStyle}
-`;
-
-export const Modal = ({ showModal, setShowModal, customBackgroundStyle, customWrapperStyle, modalCloseButton, closeModalButtonStyle, children,...props }) => {
-    const modalRef = useRef();
-
-    const closeModal = e => {
-        if (modalRef.current === e.target) {
-            setShowModal(false);
-        }
-    };
-
-    const keyPress = useCallback(
-        e => {
-            if (e.key === 'Escape' && showModal) {
-                setShowModal(false);
-            }
-        },
-        [setShowModal, showModal]
-    );
-
-    useEffect(
-        () => {
-            document.addEventListener('keydown', keyPress);
-            return () => document.removeEventListener('keydown', keyPress);
-        },
-        [keyPress]
-    );
-
-    return (
-        <div>
-            {showModal ? (
-                <Background 
-                    theme={defaultStyles}
-                    type={'modal-background'} 
-                    onClick={closeModal} 
-                    ref={modalRef} 
-                    customBackgroundStyle={customBackgroundStyle} {...props}>
-                    <ModalWrapper 
-                        theme={defaultStyles}
-                        type={'modal-wrapper'} 
-                        showModal={showModal} 
-                        customWrapperStyle={customWrapperStyle} {...props}>
-                            {modalCloseButton && 
-                                <CloseModalButton 
-                                    onClick={() => setShowModal(prev => !prev)}
-                                    theme={defaultStyles}
-                                    type={'modal-close-button'}
-                                    closeModalButtonStyle={closeModalButtonStyle}>
-                                X
-                            </CloseModalButton>}
-                            
-                                {children}
-                    </ModalWrapper>
-                </Background>
-            ) : null}
-        </div>
-    );
-};
-
-Modal.propTypes = {
-    /**
-     *	Show modal
-     */
-    showModal: PropTypes.bool.isRequired,
-    /**
-     *	Show modal function
-     */
-    setShowModal: PropTypes.func.isRequired,
-    /**
-     *	Show modal close button or not
-     */
-    modalCloseButton: PropTypes.bool,
-}
-
-Modal.defaultProps = {
-    showModal: false,
-    setShowModal: ()=>{},
-    modalCloseButton: true,
-}
-