groundfloor-react-ui 1.2.8 → 1.2.10

package/components/Inputs/TextInput.js

@@ -1,235 +0,0 @@
-import PropTypes from 'prop-types';
-import React from 'react';
-import styled, { css } 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
-  ${({ textBoxStyle }) => textBoxStyle}
-
-  background-color:  ${({ isDisabled, theme }) => isDisabled ? theme.variant['neutral-5'] : theme.bgColor}
-`;
-
-const Input = styled.input`
-  width: 85%;
-  //Set the styles from the default styles object
-  ${({ inBuiltCss, defaultInputStyle }) => {
-		return getDefaultStyles(inBuiltCss, defaultInputStyle);
-	}}
-
-  // custom styles
-    ${({ inputStyle }) => inputStyle}
-
-	.sc-furwcr bxRAoq {
-    color: ${defaultThemeColor.variant['neutral-3']};
-  }
-  background-color:  ${({ isDisabled, theme }) => isDisabled ? theme.variant['neutral-5'] : theme.bgColor}
-`;
-
-const inline = css`
-  display: flex;
-  gap: 7px;
-  align-items: center;
-`;
-
-const Form = styled.div`
-  ${({ labelInline }) => (labelInline ? inline : null)}
-  .err-text {
-    color: ${({ theme }) => theme.variant['error']};
-    margin-top: 5px;
-    font-size: 10px;
-  }
-`;
-
-Form.defaultProps = {
-	theme: defaultThemeColor,
-};
-
-export const TextInput = ({
-	textBoxStyle,
-	labelStyle,
-	inputStyle,
-	errMsg,
-	required,
-	label,
-	labelInline,
-	iconBefore,
-	iconAfter,
-	isValid,
-	type,
-	theme,
-	isDisabled,
-	id,
-	...props
-}) => {
-
-	return (
-		<Form labelInline={labelInline} {...props} theme={theme}>
-			<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: `${theme.variant['error']}`,
-						}}
-					>
-						*
-					</div>
-				)}
-			</div>
-			<TextWrapper
-				required={required}
-				isDisabled={isDisabled}
-				theme={theme}
-				textBoxStyle={textBoxStyle}
-				isValid={isValid}
-				inBuiltCss={defaultStyles}
-				defaultWrapperStyle={'textbox-wrapper'}
-				{...props}
-			>
-				<div className='input-icon'>{iconBefore}</div>
-				<Input
-					inputStyle={inputStyle}
-					type={type}
-					theme={theme}
-					id={id}
-					defaultInputStyle={'input-wrapper'}
-					isDisabled={isDisabled}
-					disabled={isDisabled}
-					{...props}
-				/>
-				<div className='input-icon'>{iconAfter}</div>
-			</TextWrapper>
-			{errMsg.length > 0 && <div className='err-text'>{errMsg}</div>}
-		</Form>
-	);
-};
-
-TextInput.propTypes = {
-	/**
-	 *	Theme props of default in-built css
-	 */
-	inBuiltCss: 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,
-	/**
-	 *	Icon before input value
-	 */
-	iconBefore: PropTypes.any,
-	/**
-	 *	Icon after input value
-	 */
-	iconAfter: PropTypes.any,
-	/**
-	 *	custom style of textbox Wrapper
-	 */
-	textBoxStyle: PropTypes.object,
-	/**
-	 *	custom style of textbox input
-	 */
-	labelStyle: PropTypes.object,
-	/**
-	 *	custom style of textbox label
-	 */
-	inputStyle: PropTypes.object,
-	/**
-	 *	input type i.e:- text, password
-	 */
-	type: PropTypes.string,
-	/**
- *	input field disabled or not
- */
-	isDisabled: PropTypes.bool,
-	/**
- *	receives theme object
- */
-	theme: PropTypes.object,
-	/**
-	 *	id of the text input
-	 */
-	id: PropTypes.string,
-
-};
-
-Input.defaultProps = {
-	theme: defaultThemeColor,
-};
-
-TextWrapper.defaultProps = {
-	theme: defaultThemeColor,
-};
-
-Form.defaultProps = {
-	theme: defaultThemeColor,
-};
-
-TextInput.defaultProps = {
-	theme: defaultThemeColor,
-	inBuiltCss: defaultStyles,
-	label: '',
-	required: false,
-	isValid: true,
-	labelInline: false,
-	errMsg: '',
-	iconBefore: null,
-	iconAfter: null,
-	textBoxStyle: {},
-	labelStyle: {},
-	inputStyle: {},
-	type: 'text',
-	isDisabled: false,
-	id: ''
-};

package/components/Inputs/TimeInput.js

@@ -1,186 +0,0 @@
-import PropTypes from 'prop-types';
-import React from 'react';
-import styled, { css, useTheme } from 'styled-components';
-import defaultThemeColor from '../constants/defaultThemeColor';
-
-const TextBox = styled.div`
-  color: #a9b1b8;
-  font-size: 21px;
-  border: 1px solid
-    ${({ theme, isValid }) =>
-    isValid ? defaultThemeColor.border : theme.variant['error']};
-  border-radius: 4px;
-  padding: 5px;
-  display: inline-block;
-  align-items: center;
-  background-color: ${({ theme }) => theme.bgColor};
-  &:focus-within {
-    border: 1px solid ${({ theme }) => theme.variant['primary-1']};
-    outline: none;
-  }
-`;
-
-const Input = styled.input`
-  border: 0;
-  outline: 0;
-  color: ${({ theme }) => theme.variant['primary-2']};
-  margin: 0 5px;
-  padding: 0;
-  font-size: 21px;
-  width: 24px;
-  text-align:center;
-  background-color: ${({ theme }) => theme.bgColor};
-`;
-
-
-const requiredAsterisk = css`
-  &:after {
-    content: ' *';
-    color: ${({ theme }) => theme.variant['error']};
-  }
-`;
-
-const Label = styled.label`
-  display: block;
-  margin-bottom: ${({ labelInline, errMsg }) =>
-    labelInline && errMsg ? '18px' : '7px'};
-  margin-right: ${({ labelInline }) => (labelInline ? '7px' : '')};
-  color: ${({ theme }) => theme.variant['neutral-2']};
-  ${({ required }) => (required ? requiredAsterisk : null)}
-  padding-bottom: 0px;
-`;
-
-
-
-const inline = css`
-  display: flex;
-  align-items: center;
-`;
-
-const Form = styled.div`
-  ${({ labelInline }) => (labelInline ? inline : null)}
-  .err-text {
-    color: ${({ theme }) => theme.variant['error']};
-    margin-top: 5px;
-    font-size: 10px;
-  }
-
-  > div {
-    flex: 1 0 auto;
-  }
-`;
-
-
-const Button = styled.button`
-  border: none;
-  outline: none;
-  border-radius: 4px;
-  background-color: ${({ theme }) => theme.bgColor};
-  color: #444;
-  padding: 5px 6px;
-  font-size: 18px;
-  cursor: pointer;
-`;
-
-export const TimeInput = ({
-  label,
-  errMsg,
-  hour,
-  minute,
-  period,
-  onChange,
-  id,
-  ...props
-}) => {
-  const activeTheme = useTheme() || defaultThemeColor;
-
-  function hourChange(evt) {
-    const num =
-      evt.currentTarget.value > 12
-        ? 12
-        : parseFloat(evt.currentTarget.value) || 0;
-    onChange({ hour: num, minute, period });
-  }
-
-  function minuteChange(evt) {
-    console.log('minute change', evt.currentTarget.value);
-    const num =
-      evt.currentTarget.value > 59
-        ? 59
-        : parseFloat(evt.currentTarget.value) || 0;
-    onChange({ hour, minute: num, period });
-  }
-
-  function periodChange(evt) {
-    const p = period === 'AM' ? 'PM' : 'AM';
-    onChange({ hour, minute, period: p });
-  }
-
-  return (
-    <Form theme={activeTheme} {...props}>
-      <Label theme={activeTheme} {...props} errMsg={errMsg}>
-        {label}
-      </Label>
-      <div>
-        <TextBox theme={activeTheme} id={id} {...props}>
-          <Input theme={activeTheme} value={hour} onChange={hourChange} />
-          :
-          <Input theme={activeTheme} value={minute} onChange={minuteChange} />
-          <Button theme={activeTheme} onClick={periodChange}>{period}</Button>
-        </TextBox>
-        <div className='err-text'>{errMsg}</div>
-      </div>
-    </Form>
-  );
-};
-
-TimeInput.propTypes = {
-  /**
-   *	Label of Input
-   */
-  label: PropTypes.string,
-  /**
-   *	Hour value
-   */
-  hour: PropTypes.number.isRequired,
-  /**
-   *	Minute value
-   */
-  minute: PropTypes.number.isRequired,
-  /**
-   *	AM or PM ?
-   */
-  period: PropTypes.string.isRequired,
-  /**
-   *	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,
-  /**
-   *	id of the time input
-   */
-  id: PropTypes.string,
-};
-
-TimeInput.defaultProps = {
-  label: '',
-  hour: 0,
-  minute: 0,
-  period: 'AM',
-  required: false,
-  labelInline: false,
-  isValid: true,
-  errMsg: '',
-  id: ''
-};

package/components/Inputs/ToggleSwitch.js

@@ -1,157 +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';
-
-const CheckBoxWrapper = styled.div`
-  ${({ inBuiltCss, defaultCheckBoxWrapperStyle }) => {
-        return getDefaultStyles(inBuiltCss, defaultCheckBoxWrapperStyle);
-    }}
-`;
-const CheckBoxLabel = styled.label`
-  //Set the styles from the default styles object
-  ${({ inBuiltCss, defaultCheckBoxLabelStyle }) => {
-        return getDefaultStyles(inBuiltCss, defaultCheckBoxLabelStyle);
-    }}
-  background-color: ${({ checked, backgroundColor, disabledColor, theme }) => {
-        if (checked && backgroundColor) return backgroundColor;
-        else if (checked && !backgroundColor) return theme.primary['primary-1'];
-        else if (!checked && disabledColor) return disabledColor;
-        else if (!checked && !disabledColor) return theme.neutral['neutral-2'];
-    }};
-  // custom styles
-  ${({ customToggleBoxStyle }) => customToggleBoxStyle}
-  &:before {
-    content: '';
-    display: block;
-    border-radius: 50%;
-    width: 16px;
-    height: 16px;
-    margin-top: 3px;
-    background: ${({ switchColor, theme }) =>
-        switchColor ? switchColor : theme.bgColor};
-    transition: 0.2s;
-    margin-left: ${({ checked }) => (checked ? '4px' : '25px')};
-
-    // custom styles
-    ${({ customSwitchStyle }) => customSwitchStyle}
-  }
-`;
-
-const CheckBox = styled.input.attrs({ type: 'checkbox' })`
-  opacity: 0;
-  z-index: 1;
-  border-radius: 31px;
-  width: 45px;
-  height: 22px;
-  cursor: pointer;
-`;
-
-const OptionText = styled.span`
-  //Set the styles from the default styles object
-  ${({ inBuiltCss, defaultOptionTextStyle }) => {
-        return getDefaultStyles(inBuiltCss, defaultOptionTextStyle);
-    }}
-
-  // custom styles
-    ${({ optionStyle }) => optionStyle}
-`;
-
-export const ToggleSwitch = ({
-    checked,
-    customSwitchStyle,
-    customToggleBoxStyle,
-    backgroundColor,
-    disabledColor,
-    switchColor,
-    onClick,
-    trueLabel,
-    falseLabel,
-    optionStyle,
-    id,
-    ...props
-}) => {
-    const activeTheme = useTheme() || defaultThemeColor;
-
-    return (
-        <CheckBoxWrapper
-            inBuiltCss={defaultStyles}
-            defaultCheckBoxWrapperStyle={'toggle-switch-wrapper'}
-            {...props}
-        >
-            <CheckBox
-                {...props}
-                id='checkbox'
-                inBuiltCss={defaultStyles}
-                defaultCheckBoxStyle={'toggle-switch-checkbox'}
-                onClick={() => {
-                    onClick(!checked);
-                }}
-                isChecked={checked}
-            />
-            <CheckBoxLabel
-                {...props}
-                htmlFor='checkbox'
-                customToggleBoxStyle={customToggleBoxStyle}
-                customSwitchStyle={customSwitchStyle}
-                disabledColor={disabledColor}
-                backgroundColor={backgroundColor}
-                switchColor={switchColor}
-                inBuiltCss={defaultStyles}
-                defaultCheckBoxLabelStyle={'toggle-switch-checkbox-label'}
-                checked={checked}
-                theme={activeTheme}
-            />
-            <OptionText
-                optionStyle={optionStyle}
-                inBuiltCss={defaultStyles}
-                defaultOptionTextStyle={'toggle-switch-option-text'}
-                {...props}
-            >
-                {checked ? trueLabel : falseLabel}
-            </OptionText>
-        </CheckBoxWrapper>
-    );
-};
-
-ToggleSwitch.propTypes = {
-    /**
-     * Custom styles for the toggleBox
-     */
-    customToggleBoxStyle: PropTypes.object,
-    /**
-     * Custom styles for the toggleSwitch
-     */
-    customSwitchStyle: PropTypes.object,
-    /**
-     * Type of color on background of toggleSwitch
-     */
-    backgroundColor: PropTypes.string,
-    /**
-     *	 default Toggle State
-     */
-    checked: PropTypes.bool,
-    /**
-     *	 label when toggle state is checked
-     * */
-    trueLabel: PropTypes.string,
-    /**
-     *	 label when toggle state is not checked
-     * */
-    falseLabel: PropTypes.string,
-    /**
-    *	id of the Toggle switch
-    */
-    id: PropTypes.string,
-};
-
-ToggleSwitch.defaultProps = {
-    checked: false,
-    trueLabel: 'Yes',
-    falseLabel: 'No',
-    customSwitchStyle: {},
-    customToggleBoxStyle: {},
-    id: ''
-};

package/components/Inputs/index.js

@@ -1,15 +0,0 @@
-export * from './CheckBoxInput';
-export * from './ColorInput';
-export * from './DateSelect';
-export * from './DropdownSelect';
-export * from './DropzoneInput';
-export * from './NumericInput';
-export * from './PasswordInput';
-export * from './RadioInput';
-export * from './SearchInput';
-export * from './Signature';
-export * from './TextArea';
-export * from './TextInput';
-export * from './TimeInput';
-export * from './ToggleSwitch';
-

package/components/Label/Label.js

@@ -1,48 +0,0 @@
-import PropTypes from 'prop-types';
-import React from 'react';
-import styled from 'styled-components';
-import defaultStyles from '../constants/defaultStyle';
-import defaultThemeColor from '../constants/defaultThemeColor';
-import getDefaultStyles from '../constants/utils';
-
-const LabelLayout = styled.label`
-    //Set the styles from the default styles object
-    ${({ theme, type }) => {
-        return getDefaultStyles(theme, type);
-    }}
-        
-    // custom styles
-    ${({ customStyles }) => customStyles}
-`;
-
-export const Label = ({ customStyles, text, className, required, ...props }) => {
-    const theme = defaultStyles;
-    return (
-        <LabelLayout required={required} theme={theme} customStyles={customStyles} type={'label'} {...props}>
-            {text}
-            {required && <div style={{
-                marginLeft: '4px',
-                color: `${defaultThemeColor.variant['error']}`
-            }} >*</div>}
-        </LabelLayout>
-    )
-}
-
-
-
-Label.propTypes = {
-    /**
-     *	Custom style object
-     */
-    customStyles: PropTypes.object,
-    /**
-     *	Title Content
-     */
-    text: PropTypes.string,
-}
-
-Label.defaultProps = {
-    text: ''
-}
-
-

package/components/Label/index.js

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