groundfloor-react-ui 1.2.9 → 1.2.11

package/components/Inputs/PasswordInput.js

@@ -1,267 +0,0 @@
-import PropTypes from 'prop-types';
-import React, { useState } from 'react';
-import styled, { css } 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 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']};
-  }
-  .input-icon {
-    cursor: pointer;
-  }
-
-  &:focus-within {
-    border: 1px solid ${({ theme }) => theme.variant['primary-1']};
-    outline: none;
-
-    .input-icon svg path {
-      fill: ${({ theme }) => theme.variant['primary-1']};
-    }
-  }
-
-  // custom styles
-  ${({ textBoxStyle }) => textBoxStyle}
-`;
-
-TextWrapper.defaultProps = {
-  theme: defaultThemeColor,
-};
-
-const Input = styled.input`
-  width: 85%;
-  -webkit-text-security:  ${({ showEye }) => (showEye ? 'none' : 'disc')};
-
-  //Set the styles from the default styles object
-  ${({ inBuiltCss, defaultInputStyle }) => {
-    return getDefaultStyles(inBuiltCss, defaultInputStyle);
-  }}
-
-  // custom styles
-    ${({ inputStyle }) => inputStyle}
-
-	.sc-furwcr bxRAoq {
-    color: ${({ theme }) => theme.variant['neutral-3']};
-  }
-`;
-Input.defaultProps = {
-  theme: defaultThemeColor,
-};
-const inline = css`
-  display: flex;
-  gap: 7px;
-  align-items: start;
-`;
-
-const Form = styled.div`
-  ${({ labelInline }) => (labelInline ? inline : null)}
-  .err-text {
-    color: ${({ errMsgColor }) => errMsgColor};
-    margin-top: 5px;
-    font-size: 10px;
-  }
-`;
-
-Form.defaultProps = {
-  theme: defaultThemeColor,
-};
-
-export const PasswordInput = ({
-  theme,
-  passwordRules,
-  textBoxStyle,
-  labelStyle,
-  inputStyle,
-  errMsg,
-  required,
-  label,
-  labelInline,
-  isValid,
-  rulesStyle,
-  id,
-  showHideIcon,
-  errMsgColor,
-  ...props
-}) => {
-  const [showEye, setShowEye] = useState(false);
-
-  return (
-    <Form
-      onPaste={(e) => {
-        e.preventDefault();
-        return false;
-      }}
-      onCopy={(e) => {
-        e.preventDefault();
-        return false;
-      }}
-      labelInline={labelInline}
-      inBuiltCss={defaultStyles}
-      errMsgColor={errMsgColor}
-      {...props}
-    >
-      <div style={{ display: 'flex' }}>
-        <Label
-          customStyles={labelStyle}
-          type={'label-text'}
-          text={label}
-          errMsg={errMsg}
-          style={{
-            display: 'flex',
-            marginBottom: `${!labelInline ? '7px' : '0px'}`,
-            paddingBottom: '0px',
-          }}
-          {...props}
-        />
-        {required && (
-          <div
-            style={{
-              marginLeft: '4px',
-              marginRight: '5px',
-              color: `${theme.variant['error']}`,
-            }}
-          >
-            *
-          </div>
-        )}
-      </div>
-      <div
-        style={{
-          display: 'flex',
-          justifyContent: 'start',
-          alignItems: 'start',
-        }}
-      >
-        <div style={{ width: '100%' }}>
-          <TextWrapper
-            required={required}
-            theme={theme}
-            textBoxStyle={textBoxStyle}
-            isValid={isValid}
-            defaultWrapperStyle={'textbox-wrapper'}
-            inBuiltCss={defaultStyles}
-            {...props}
-          >
-            <Input
-              inputStyle={inputStyle}
-              type={'text'}
-              id={id}
-              showEye={showEye}
-              theme={theme}
-              defaultInputStyle={'input-wrapper'}
-              inBuiltCss={defaultStyles}
-              {...props}
-            />
-            {showHideIcon === true ? (
-              <div
-                className='input-icon'
-                onClick={() => setShowEye(!showEye)}
-                style={{ position: 'absolute', right: '7px' }}
-              >
-                {showEye ? <Icon icon='eye-show' /> : <Icon icon='eye-hide' />}
-              </div>
-            ) : (
-              ''
-            )}
-          </TextWrapper>
-          {errMsg.length > 0 && <div className='err-text'>{errMsg}</div>}
-        </div>
-        {passwordRules ? (
-          <div style={{ ...rulesStyle, marginLeft: '5px' }}>
-            {passwordRules}
-          </div>
-        ) : (
-          ''
-        )}
-      </div>
-    </Form>
-  );
-};
-
-PasswordInput.propTypes = {
-  /**
-   *	Theme props of default in-built css
-   */
-  inBuiltCss: PropTypes.object,
-  /**
-   *	Color props of default theme
-   */
-  theme: PropTypes.object,
-  /**
-   *	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,
-
-  /**
-   *	custom style of textbox Wrapper
-   */
-  textBoxStyle: PropTypes.object,
-  /**
-   *	custom style of textbox input
-   */
-  labelStyle: PropTypes.object,
-  /**
-   *	custom style of textbox label
-   */
-  inputStyle: PropTypes.object,
-  /**
-   *	rules of password
-   */
-  passwordRules: PropTypes.string,
-  /**
-   *	styles of password rules
-   */
-  rulesStyle: PropTypes.object,
-  /**
-   *	id of the password input
-   */
-  id: PropTypes.string,
-  /**
-   *	hide icon shows or not
-   */
-  showHideIcon: PropTypes.bool,
-};
-
-PasswordInput.defaultProps = {
-  theme: defaultThemeColor,
-  inBuiltCss: defaultStyles,
-  label: '',
-  required: false,
-  isValid: true,
-  labelInline: false,
-  errMsg: '',
-  textBoxStyle: {},
-  labelStyle: {},
-  inputStyle: {},
-  passwordRules: '',
-  rulesStyle: {},
-  id: '',
-  showHideIcon: true,
-  errMsgColor: defaultThemeColor.variant['error'],
-};

package/components/Inputs/RadioInput.js

@@ -1,292 +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 RadioOuterCircle = styled.div`
-  box-sizing: initial;
-
-  //Set the styles from the default styles object
-  ${({ inBuiltCss, defaultRadioOuterCircleStyle }) => {
-        return getDefaultStyles(inBuiltCss, defaultRadioOuterCircleStyle);
-    }}
-
-  border: 2px solid ${({
-        value,
-        selected,
-        selectedCircleColor,
-        defaultBorderColor,
-        theme,
-    }) => {
-        if (value !== selected && defaultBorderColor) return defaultBorderColor;
-        else if (value !== selected && !defaultBorderColor) return theme.border;
-        else if (value === selected && selectedCircleColor)
-            return selectedCircleColor;
-        else if (value === selected && !selectedCircleColor)
-            return theme.primary['primary-1'];
-    }};
-
-  // custom styles
-  ${({ radioOuterCircleStyle }) => radioOuterCircleStyle}
-`;
-
-RadioOuterCircle.defaultProps = {
-    theme: defaultThemeColor,
-};
-
-const RadioInnerCircle = styled.div`
-  box-sizing: initial;
-
-  //Set the styles from the default styles object
-  ${({ inBuiltCss, defaultRadioInnerCircleStyle }) => {
-        return getDefaultStyles(inBuiltCss, defaultRadioInnerCircleStyle);
-    }}
-
-  width: ${({ value, selected, width }) => (value === selected ? width : 0)};
-  height: ${({ value, selected, height }) => (value === selected ? height : 0)};
-  background-color: ${({ value, selected, selectedCircleColor, theme }) => {
-        if (value === selected && selectedCircleColor) return selectedCircleColor;
-        else if (value === selected && !selectedCircleColor)
-            return theme.primary['primary-1'];
-        else if (value !== selected) return 'transparent';
-    }};
-
-  // custom styles
-  ${({ radioInnerCircleStyle }) => radioInnerCircleStyle}
-`;
-RadioInnerCircle.defaultProps = {
-    theme: defaultThemeColor,
-};
-
-const OptionText = styled.div`
-  //Set the styles from the default styles object
-  ${({ inBuiltCss, defaultOptionStyle }) => {
-        return getDefaultStyles(inBuiltCss, defaultOptionStyle);
-    }}
-  margin-right: ${({ inline }) => (!inline ? '30px' : '')};
-  color: ${({
-        selected,
-        selectedOptionTextColor,
-        defaultOptionColor,
-        theme,
-    }) => {
-        if (selected && selectedOptionTextColor) return selectedOptionTextColor;
-        else if (selected && !selectedOptionTextColor)
-            return theme.neutral['neutral-1'];
-        else if (!selected && defaultOptionColor) return defaultOptionColor;
-        else if (!selected && !defaultOptionColor)
-            return theme.neutral['neutral-2'];
-    }};
-
-  // custom styles
-  ${({ optionStyle }) => optionStyle}
-`;
-OptionText.defaultProps = {
-    theme: defaultThemeColor,
-};
-
-const WrapperDiv = styled.div`
-  margin-bottom: ${({ inline }) => (!inline ? '14px' : '')};
-  cursor: pointer;
-  align-items: center;
-  display: flex;
-  gap: 10px;
-
-  // custom styles
-  ${({ WrapperDivStyle }) => WrapperDivStyle}
-`;
-
-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,
-    WrapperDivStyle,
-    ...props
-}) => {
-    const activeTheme = useTheme() || defaultThemeColor;
-
-    return (
-        <div>
-            <Label customStyles={labelStyle} type={'radio-label'} text={label} />
-            <ParentDiv inline={inline}>
-                {options.map((item, i) => {
-                    return (
-                        <WrapperDiv
-                            WrapperDivStyle={WrapperDivStyle}
-                            key={i + Math.random() * 101}
-                            id={item.id}
-                            inline={inline}
-                            onClick={() => {
-                                !item?.disabled && onChange(item.value);
-                            }}
-                        >
-                            <RadioOuterCircle
-                                theme={activeTheme}
-                                inBuiltCss={defaultStyles}
-                                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
-                                    inBuiltCss={defaultStyles}
-                                    theme={activeTheme}
-                                    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,
-                                }}
-                                inBuiltCss={defaultStyles}
-                                defaultOptionStyle={'option-text'}
-                                selectedOptionTextColor={selectedOptionTextColor}
-                                theme={activeTheme}
-                                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',
-        id: '1'
-      },
-      { label: 'Second Radio Button', value: 'second', id: '2' },
-      { label: 'Third Radio Button', value: 'third', id: '3' },
-    ]
-       */
-    options: PropTypes.array,
-    /**
-     *	RadioButton style object
-     */
-    optionStyle: PropTypes.object,
-    /**
-     *	RadioButton wraperdiv style object
-     */
-    WrapperDivStyle: 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: {},
-    width: '14px',
-    height: '14px',
-    WrapperDivStyle: {}
-};

package/components/Inputs/SearchInput.js

@@ -1,19 +0,0 @@
-import React from 'react';
-import { Icon } from '../Icon';
-import { TextInput } from './TextInput';
-
-export const SearchInput = ({ label, placeholder, handleSearch, searchInput, customStylesForm, customStyleObject, textBoxStyle, id, ...props }) => {
-
-    return <TextInput
-        iconAfter={<Icon icon='magnifier-icon' />}
-        label={label}
-        textBoxStyle={textBoxStyle}
-        placeholder={placeholder}
-        ref={searchInput}
-        onChange={handleSearch}
-        id={id}
-        {...props}
-    />
-}
-
-