groundfloor-react-ui 1.2.9 → 1.2.10

package/components/Images/Image.js

@@ -1,107 +0,0 @@
-import PropTypes from 'prop-types';
-import React, { useEffect, useRef, useState } from "react";
-import styled from 'styled-components';
-import defaultStyles from '../constants/defaultStyle';
-
-const ImageLayout = styled.img`
-    //Set the styles from the default styles object
-    ${({ inBuiltCss, type, size, customStyles }) => {
-        if (inBuiltCss) {
-            let tempObj = {};
-            if (inBuiltCss[type]) {
-                for (const property in inBuiltCss['common']) {
-                    tempObj[property] = inBuiltCss['common'][property]
-                }
-                for (const property in inBuiltCss[type]) {
-                    tempObj[property] = inBuiltCss[type][property]
-                    delete inBuiltCss.common[property]
-                }
-                for (const property in inBuiltCss[`${type}${size}`]) {
-                    tempObj[property] = inBuiltCss[`${type}${size}`][property]
-                    delete inBuiltCss.common[property]
-                }
-            }
-            return { ...tempObj, ...customStyles };
-        }
-    }}
-`;
-
-export const Image = ({ customStyles, type, size, alt, src, handleImageStatus, ...props }) => {
-
-    const [imageStatus, setImageStatus] = useState("loading");
-
-    const imgEl = useRef(null);
-
-    const onImageLoaded = () => {
-        setImageStatus("loaded")
-        handleImageStatus && handleImageStatus("loaded")
-    };
-    const onImageError = () => {
-        setImageStatus("failed")
-        handleImageStatus && handleImageStatus("failed")
-    };
-
-    useEffect(() => {
-        const imgElCurrent = imgEl.current;
-
-        if (imgElCurrent) {
-            imgElCurrent.addEventListener("load", onImageLoaded);
-            imgElCurrent.addEventListener("error", onImageError);
-
-            return () => {
-                imgElCurrent.removeEventListener("load", onImageLoaded);
-                imgElCurrent.removeEventListener("error", onImageError);
-            };
-        }
-    }, [imageStatus]);
-
-    return (
-        <ImageLayout
-            {...props}
-            inBuiltCss={defaultStyles}
-            customStyles={customStyles}
-            type={type}
-            alt={alt}
-            src={src}
-            ref={imgEl}
-            size={size}
-        />
-    )
-}
-
-Image.propTypes = {
-
-    /**
-     *	Custom style object
-     */
-    customStyles: PropTypes.object,
-    /**
-     *	Type of the component which define the default style
-     */
-    type: PropTypes.string,
-    /**
-     * How large should the Avatar be?
-     * Only apply if type='imageAvatar'
-     */
-    size: PropTypes.oneOf(['SM', 'MD', 'LG']),
-    /**
-     *	Alternative text for the image
-     */
-    alt: PropTypes.string,
-    /**
-     *	URL for the image
-     */
-    src: PropTypes.string,
-    /**
-     * Function that is triggered when the status of the image changes and pass as a parameter the image status itself
-     */
-    handleImageStatus: PropTypes.func
-}
-
-Image.defaultProps = {
-    customStyles: null,
-    type: 'image',
-    alt: 'image alternative',
-    src: null,
-    handleImageStatus: null
-}

package/components/Images/index.js

@@ -1,2 +0,0 @@
-export * from './Image';
-

package/components/Inputs/CheckBoxInput.js

@@ -1,341 +0,0 @@
-import PropTypes from 'prop-types';
-import React, { useEffect } from 'react';
-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';
-import { Label } from '../Label';
-
-const CheckBoxOuter = styled.div`
-  box-sizing: initial;
-
-  //Set the styles from the default styles object
-  ${({ inBuiltCss, defaultCheckBoxOuterStyle }) => {
-        return getDefaultStyles(inBuiltCss, defaultCheckBoxOuterStyle);
-    }}
-
-  border: 2px solid ${({
-        checkedCheckBoxColor,
-        defaultBorderColor,
-        checked,
-        theme,
-    }) => {
-        if (checked && checkedCheckBoxColor) return checkedCheckBoxColor;
-        else if (checked && !checkedCheckBoxColor)
-            return theme.primary['primary-1'];
-        else if (!checked && defaultBorderColor) return defaultBorderColor;
-        else if (!checked && !defaultBorderColor) return theme.border;
-    }}    
-};
-
-  // custom styles
-  ${({ checkBoxOuterStyle }) => checkBoxOuterStyle}
-`;
-
-CheckBoxOuter.defaultProps = {
-    theme: defaultThemeColor,
-};
-
-const CheckBoxInner = styled.div`
-  box-sizing: initial;
-
-  //Set the styles from the default styles object
-  ${({ inBuiltCss, defaultCheckBoxInnerStyle }) => {
-        return getDefaultStyles(inBuiltCss, defaultCheckBoxInnerStyle);
-    }}
-
-  // background-image: url(${({ signCheck }) => signCheck});
-    background-color: ${({ checked, checkedCheckBoxColor, theme }) => {
-        if (checked && checkedCheckBoxColor) return checkedCheckBoxColor;
-        else if (checked && !checkedCheckBoxColor)
-            return theme.primary['primary-1'];
-        else if (!checked) return theme.bgColor;
-    }};
-  border: 2px solid
-    ${({ checkedCheckBoxColor, defaultBorderColor, checked, theme }) => {
-        if (checked && checkedCheckBoxColor) return checkedCheckBoxColor;
-        else if (checked && !checkedCheckBoxColor)
-            return theme.primary['primary-1'];
-        else if (!checked && defaultBorderColor) return defaultBorderColor;
-        else if (!checked && !defaultBorderColor) return theme.border;
-    }};
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  // custom styles
-  ${({ checkBoxInnerStyle }) => checkBoxInnerStyle}
-`;
-CheckBoxInner.defaultProps = {
-    theme: defaultThemeColor,
-};
-
-const OptionText = styled.span`
-    word-break: break-all;
-
-  //Set the styles from the default styles object
-  ${({ inBuiltCss, type }) => {
-        return getDefaultStyles(inBuiltCss, type);
-    }}
-
-  color: ${({ theme, checked, defaultTextColor, checkedTextColor }) => {
-        if (checked && checkedTextColor) return checkedTextColor;
-        else if (checked && !checkedTextColor) return theme.neutral['neutral-1'];
-        else if (!checked && defaultTextColor) return defaultTextColor;
-        else if (!checked && !defaultTextColor) return theme.neutral['neutral-2'];
-    }};
-
-  margin-right: ${({ inline }) => (inline ? '30px' : '10px')};
-
-  // custom styles
-  ${({ optionTextStyle }) => optionTextStyle}
-`;
-OptionText.defaultProps = {
-    theme: defaultThemeColor,
-};
-
-const WrapperDiv = styled.label`
-  width: fit-content;
-  margin-bottom: ${({ inline }) => (!inline ? '18px !important' : '')};
-  cursor: pointer;
-  display: flex;
-  gap: 10px;
-  align-items: start;
-
-  // custom styles
-  ${({ wrapperStyles }) => wrapperStyles}
-`;
-
-const ParentDiv = styled.div`
-  flex-direction: ${({ inline }) => (inline ? 'row' : 'column')};
-  width: ${({ inline }) => (!inline ? 'auto' : 'initial')};
-`;
-
-export const CheckBoxInput = ({
-    getCheckedArr,
-    checkBoxOuterStyle,
-    checkBoxInnerStyle,
-    optionTextStyle,
-    defaultBorderColor,
-    defaultTextColor,
-    checkedTextColor,
-    checkedCheckBoxColor,
-    labelStyle,
-    label,
-    options,
-    setOptions,
-    wrapperStyles,
-    inline,
-    wrapperStyle,
-    isRequired,
-    ...props
-}) => {
-    const activeTheme = useTheme() || defaultThemeColor;
-
-    useEffect(() => {
-        filterCheckedOptions(options);
-    }, []);
-
-    const checkBox = (item, i) => {
-        let newOptions = [...options];
-        newOptions[i].checked = !item.checked;
-        setOptions(newOptions);
-        filterCheckedOptions(newOptions);
-    };
-
-    const filterCheckedOptions = (newOptions) => {
-        let filteredOptions = newOptions.filter(
-            (option) => option.checked !== false
-        );
-        getCheckedArr(filteredOptions);
-    };
-
-    const defaultStyleForWrapper = {
-        display: 'flex',
-        flexDirection: 'column',
-        flexWrap: 'wrap',
-    };
-    const returnedTarget = Object.assign(defaultStyleForWrapper, wrapperStyle);
-
-    return (
-        <div style={returnedTarget} {...props}>
-            <div style={{ display: 'flex' }}>
-                <Label
-                    customStyles={labelStyle}
-                    type={'check-label'}
-                    text={label}
-                    {...props}
-                />
-
-                {isRequired && (
-                    <div
-                        style={{
-                            marginLeft: '4px',
-                            color: `${activeTheme.variant['error']}`,
-                        }}
-                    >
-                        *
-                    </div>
-                )}
-            </div>
-            <ParentDiv
-                style={{ display: 'flex', flexWrap: 'wrap' }}
-                inline={inline}
-                {...props}
-            >
-                {options?.map((item, i) => {
-                    return (
-                        <WrapperDiv
-                            inline={inline}
-                            id={item.id}
-                            key={`${item.name}-${i}`}
-                            onClick={() => {
-                                checkBox(item, i);
-                            }}
-                            wrapperStyles={wrapperStyles}
-                            {...props}
-                        >
-                            {item.checked ? (
-                                <CheckBoxInner
-                                    theme={activeTheme}
-                                    inBuiltCss={defaultStyles}
-                                    defaultCheckBoxInnerStyle={'checkBox-inner'}
-                                    checkBoxInnerStyle={{
-                                        ...checkBoxInnerStyle,
-                                        cursor: item?.disabled ? 'not-allowed ' : ' pointer',
-                                        borderColor: item?.disabled && item?.disabledColor,
-                                    }}
-                                    defaultBorderColor={defaultBorderColor}
-                                    checkedCheckBoxColor={checkedCheckBoxColor}
-                                    checked={!item?.disabled && item.checked}
-                                    {...props}
-                                >
-                                    <Icon icon='check-icon' size={18} color='white' />
-                                </CheckBoxInner>
-                            ) : (
-                                <CheckBoxOuter
-                                    inBuiltCss={defaultStyles}
-                                    defaultCheckBoxOuterStyle={'checkBox-outer'}
-                                    checkBoxOuterStyle={{
-                                        ...checkBoxOuterStyle,
-                                        cursor: item?.disabled ? 'not-allowed ' : ' pointer',
-                                        borderColor: item?.disabledColor,
-                                    }}
-                                    defaultBorderColor={defaultBorderColor}
-                                    theme={activeTheme}
-                                    {...props}
-                                />
-                            )}
-                            <OptionText
-                                theme={activeTheme}
-                                inline={inline}
-                                optionTextStyle={{
-                                    ...optionTextStyle,
-                                    cursor: item?.disabled ? 'not-allowed ' : ' pointer',
-                                    color: item?.disabledColor,
-                                }}
-                                checked={item.checked}
-                                defaultTextColor={defaultTextColor}
-                                checkedTextColor={checkedTextColor}
-                            >
-                                {item.label}
-                            </OptionText>
-                        </WrapperDiv>
-                    );
-                })}
-            </ParentDiv>
-        </div>
-    );
-};
-
-CheckBoxInput.propTypes = {
-    /**
-     *	Style Custom for whole Checkbox Block
-     */
-    wrapperStyle: PropTypes.object,
-    /**
-     *	Label of CheckBox
-     */
-    label: PropTypes.string,
-    /**
-     *	Label style of CheckBox
-     */
-    labelStyle: PropTypes.object,
-    /**
-     *	Outer CheckBox style
-     */
-    checkBoxOuterStyle: PropTypes.object,
-    /**
-     *	Checked CheckBox style
-     */
-    checkBoxInnerStyle: PropTypes.object,
-    /**
-     *	Text Style
-     */
-    optionTextStyle: PropTypes.object,
-    /**
-     *	Default option text color when not selected
-     */
-    defaultTextColor: PropTypes.string,
-    /**
-     *	checked option text color when selected
-     */
-    checkedTextColor: PropTypes.string,
-    /**
-     *	Default border color of checkboxes when not selected
-     */
-    defaultBorderColor: PropTypes.string,
-    /**
-     *	Checked border color of checkboxes when selected
-     */
-    checkedCheckBoxColor: PropTypes.string,
-    /**
-     *	Should checkboxes be inline?
-     */
-    inline: PropTypes.bool,
-    /**
-     *	Array that will be rendered for checkbox options
-     ex: [
-      {
-        label: 'Lorem ipsum dolor sit amet',
-        value: 'Option One',
-        disabled: false,
-        id: '1'
-        // disabledColor: '#B25068',
-      },
-      { label: 'Option Two', value: 'Option Two', checked: true, id: '2' },
-    ]
-     */
-    options: PropTypes.array,
-    /**
-     *	CheckBox value changeHandler
-     */
-    setOptions: PropTypes.func,
-    /**
-     *	CheckBox checked value changeHandler
-     */
-    getCheckedArr: PropTypes.func,
-    /**
-     *	mandatory field or not
-     */
-    isRequired: PropTypes.bool,
-    /**
-     *	Wrapper styles
-     */
-    wrapperStyles: PropTypes.object,
-
-
-};
-
-CheckBoxInput.defaultProps = {
-    label: '',
-    inline: false,
-    options: [],
-    setOptions: () => { },
-    getCheckedArr: () => { },
-    labelStyle: {},
-    checkBoxOuterStyle: {},
-    checkBoxInnerStyle: {},
-    isRequired: true,
-    wrapperStyles: {},
-};

package/components/Inputs/ColorInput.js

@@ -1,145 +0,0 @@
-import PropTypes from 'prop-types';
-import React from 'react';
-import styled, { useTheme } from 'styled-components';
-import defaultStyles from '../constants/defaultStyle';
-import defaultThemeColor from '../constants/defaultThemeColor';
-import getDefaultStyles from '../constants/utils';
-import { Label } from '../Label';
-
-const ColorWrapper = styled.div`
-border: 1px solid ${({ theme }) => theme.variant['neutral-4']};
-background-color: ${({ theme }) => theme.bgColor};
-
-&:focus-within {
-  border: 1px solid ${({ theme }) => theme.primary['primary-1']};
-}
-
-${({ inBuiltCss, defaultColorWrapperStyle }) => {
-    return getDefaultStyles(inBuiltCss, defaultColorWrapperStyle);
-  }}
-// custom styles
-${({ customColorWrapperStyle }) => customColorWrapperStyle}
-
-`
-
-const InputColor = styled.input`
-
-border: 0.5px solid ${({ theme }) => theme.variant['neutral-4']};
-box-shadow: 0px 5px 37px rgba(56, 66, 100, 0.0880136);
--webkit-appearance: none;
-padding: 0;
-
-&::-webkit-color-swatch-wrapper {
-  padding: 0;
-  border-radius: 4px;
-  
-}
-&::-webkit-color-swatch {
-  border: none;
-  border-radius: 4px;
-  
-}
-
-${({ inBuiltCss, defaultInputColorStyle }) => {
-    return getDefaultStyles(inBuiltCss, defaultInputColorStyle);
-  }}
-// custom styles
-${({ customInputColorStyle }) => customInputColorStyle}
-`;
-
-
-export const ColorInput = ({
-  label,
-  labelStyle,
-  value,
-  setValue,
-  customInputColorStyle,
-  customColorWrapperStyle,
-  id,
-  ...props
-}) => {
-  const activeTheme = useTheme() || defaultThemeColor;
-  return (
-
-    <ColorWrapper customColorWrapperStyle={customColorWrapperStyle}
-      defaultColorWrapperStyle={'ColorWrapper'}
-      theme={activeTheme}
-      inBuiltCss={defaultStyles}
-      {...props}>
-
-      <InputColor
-        id={id}
-        customInputColorStyle={customInputColorStyle}
-        defaultInputColorStyle={'input-color'}
-        inBuiltCss={defaultStyles}
-        theme={activeTheme}
-        {...props}
-        type="color"
-        value={value}
-
-        onChange={
-          (e) => {
-            setValue(e.target.value)
-          }}
-      />
-      <Label
-        themeColor={defaultThemeColor}
-        customStyles={labelStyle}
-        type={'label-text'}
-        text={label}
-        style={{
-          display: 'flex',
-          paddingBottom: '0px',
-          paddingLeft: '10px'
-        }}
-        {...props}
-      />
-
-    </ColorWrapper>
-
-  );
-};
-
-ColorInput.propTypes = {
-  /**
-   *	Label of ColorInput
-   */
-  label: PropTypes.string,
-  /**
-   *	Label style of ColorInput
-   */
-  labelStyle: PropTypes.object,
-
-  /**
-   *	color value of input
-   */
-  value: PropTypes.string,
-  /**
-   *	value setter function
-   */
-  setValue: PropTypes.func,
-  /**
-   *	custom style of color-input box
-   */
-  customInputColorStyle: PropTypes.object,
-  /**
-   *	custom style of the wrapper around the color-input
-   */
-  customColorWrapperStyle: PropTypes.object,
-  /**
-  *	id of the colorInput
-  */
-  id: PropTypes.string
-
-}
-
-ColorInput.defaultProps = {
-  label: '',
-  labelStyle: {},
-  customInputColorStyle: {},
-  customColorWrapperStyle: {},
-  value: '#FFFFFF',
-  setValue: () => { },
-  id: ''
-};
-