groundfloor-react-ui 1.0.22 → 1.2.1

package/components/Inputs/DropdownSelect.js

@@ -116,11 +116,13 @@ const Wrapper = styled.div`
 
         .text-main-alt {
             color:${({ theme }) => theme.textColor} !important;
-            margin-right: 2px;
+            margin-right: 0px;
         }
         .text-more-alt{
             font-size:12px;
             color: ${({ theme }) => theme.neutral['neutral-2']};
+            padding-right: 0px;
+            margin-right: 0px;
 
         }
         .css-mohuvp-dummyInput-DummyInput{
@@ -171,6 +173,7 @@ const IconDiv = styled.div`
 `;
 
 export const DropdownSelect = ({
+
   label,
   labelStyle,
   optionArr,
@@ -191,15 +194,37 @@ export const DropdownSelect = ({
   isDisabled,
 
   isLoading,
-
+  id,
+  iconName,
+  iconColor,
+  iconSize,
+  showIndicator,
+  leftIcon,
+  leftIconColor,
+  leftIconSize,
   ...props
 }) => {
 
   const activeTheme = useTheme() || defaultThemeColor
 
   const DropdownIndicator = (p) => {
+
+    const drpdwn = <components.DropdownIndicator {...p}>
+
+
+      <IconDiv>
+        <Icon icon={iconName} color={iconColor} size={iconSize} />
+        {/* <Icon icon='triangle-down' color={'black'} size={8} /> */}
+      </IconDiv>
+
+    </components.DropdownIndicator>
+    return showIndicator === true ? drpdwn : null;
+
+  };
+
+  const ClearIndicator = (p) => {
     return (
-      <components.DropdownIndicator {...p}>
+      <components.ClearIndicator {...p}>
         {isClearable ? (
           <IconDiv
             onClick={() => {
@@ -210,10 +235,22 @@ export const DropdownSelect = ({
             <Icon icon='cross-icon' color={'black'} size={8} />
           </IconDiv>
         ) : null}
-        <IconDiv>
-          <Icon icon='triangle-down' color={'black'} size={8} />
+
+      </components.ClearIndicator>
+    );
+
+  };
+
+  const LeftIcon = (props) => {
+    return (
+      <components.ValueContainer {...props}>
+        {leftIcon === '' ? null : <IconDiv style={{ paddingTop: '10px', paddingRight: '8px', marginLeft: '0', marginTop: '-16px' }}>
+          <Icon icon={leftIcon} color={leftIconColor} size={leftIconSize} />
         </IconDiv>
-      </components.DropdownIndicator>
+        }
+
+        {props.children}
+      </components.ValueContainer>
     );
   };
 
@@ -225,6 +262,8 @@ export const DropdownSelect = ({
       padding: '4px',
       fontSize: '8px',
       lineHeight: '10px',
+      minWidth: '15px',
+      minHeight: '15px'
     };
     const checked = (
       <div
@@ -279,8 +318,7 @@ export const DropdownSelect = ({
       border: !isValid
         ? '1px solid ' + activeTheme.ui['error']
         : '1px solid ' + activeTheme.border,
-      // border: state.isFocused ? '4px solid red' : '4px solid green',
-
+      minWidth: '215px',
       height: `${height}px`,
       minHeight: `${height}px`,
       boxShadow: (state.isSelected || state.isFocused) && 'none',
@@ -296,9 +334,20 @@ export const DropdownSelect = ({
       display: 'flex',
       justifyContent: 'center',
       alignItems: 'center',
+      paddingLeft: '0px',
+    }),
+    clearIndicator: (base) => ({
+      ...base,
+      height: `${height}px`,
+      display: 'flex',
+      justifyContent: 'center',
+      alignItems: 'center',
+      paddingLeft: '0px',
+
     }),
     valueContainer: (base) => ({
       ...base,
+      display: 'flex',
       fontSize: fontSize + 'px',
     }),
     indicatorsContainer: (base) => ({
@@ -316,15 +365,22 @@ export const DropdownSelect = ({
       boxShadow: '0px 6px 20px rgba(56, 66, 100, 0.15)',
       borderRadius: '4.32px',
       fontSize: fontSize + 'px',
+      width: '100%',
+
+
     }),
     singleValue: (base) => ({
       ...base,
       fontSize: fontSize + 'px',
       marginLeft: '0px',
+      width: 'auto'
+
     }),
     multiValue: (base) => ({
       ...base,
       marginLeft: '0px',
+      width: 'auto'
+
     }),
     input: (base) => ({
       ...base,
@@ -337,7 +393,11 @@ export const DropdownSelect = ({
       padding: '10px',
       cursor: 'pointer',
       color: '#081348',
+      width: 'inherit',
+
     }),
+
+
     ...props.styles,
   };
   return (
@@ -372,9 +432,10 @@ export const DropdownSelect = ({
             DropdownIndicator,
             MultiValue,
             Option,
+            // ValueContainer: LeftIcon,
             ValueContainer,
             IndicatorSeparator: () => null,
-            ClearIndicator: () => null,
+            ClearIndicator,
           }}
           className='select-manage-page'
           classNamePrefix='new-select'
@@ -390,6 +451,12 @@ export const DropdownSelect = ({
           closeMenuOnSelect={false}
           isSearchable={true}
           isLoading={isLoading}
+
+          id={id}
+
+          isClearable={isClearable}
+
+
           {...props}
         />
       ) : dropdownType === 'asyncSingleSelect' ? (
@@ -400,8 +467,10 @@ export const DropdownSelect = ({
           styles={stylesComp}
           components={{
             DropdownIndicator,
+            // ValueContainer: LeftIcon,
+            ValueContainer,
             IndicatorSeparator: () => null,
-            ClearIndicator: () => null,
+            ClearIndicator,
           }}
           className='select-manage-page'
           classNamePrefix='new-select'
@@ -410,6 +479,12 @@ export const DropdownSelect = ({
           onChange={setSelectedValue}
           isLoading={isLoading}
           isDisabled={isDisabled}
+
+          id={id}
+
+          isClearable={isClearable}
+
+
           {...props}
         />
       ) : dropdownType === 'asyncMultiSelect' ? (
@@ -417,10 +492,11 @@ export const DropdownSelect = ({
           components={{
             DropdownIndicator,
             MultiValue,
+            // ValueContainer: LeftIcon,
             ValueContainer,
             Option,
             IndicatorSeparator: () => null,
-            ClearIndicator: () => null,
+            ClearIndicator,
           }}
           className='select-manage-page'
           classNamePrefix='new-select'
@@ -437,14 +513,22 @@ export const DropdownSelect = ({
           loadOptions={loadOptions}
           defaultOptions
           onInputChange={onInputChange}
+
+          id={id}
+
+          isClearable={isClearable}
+
+
           {...props}
         />
       ) : (
         <Select
           components={{
             DropdownIndicator,
+            // ValueContainer: LeftIcon,
+            ValueContainer,
             IndicatorSeparator: () => null,
-            ClearIndicator: () => null,
+            ClearIndicator,
           }}
           className='select-manage-page'
           classNamePrefix='new-select'
@@ -459,6 +543,12 @@ export const DropdownSelect = ({
           styles={stylesComp}
           onChange={setSelectedValue}
           isLoading={isLoading}
+
+          id={id}
+
+          isClearable={isClearable}
+
+
           {...props}
         />
       )}
@@ -547,6 +637,35 @@ DropdownSelect.propTypes = {
 *   clearable or not
 */
   isClearable: PropTypes.bool,
+  /**
+*   id of the select
+*/
+  id: PropTypes.string,
+  /**
+*   iconName of the select
+*/
+  iconName: PropTypes.string,
+  /**
+*   iconColor of the select
+*/
+  iconColor: PropTypes.string,
+  /**
+*   iconSize of the select
+*/
+  iconSize: PropTypes.number,
+  /**
+*   leftIcon of the select
+*/
+  leftIcon: PropTypes.string,
+  /**
+*   iconColor of the select
+*/
+  leftIconColor: PropTypes.string,
+  /**
+*   iconSize of the select
+*/
+  leftIconSize: PropTypes.number,
+  showIndicator: PropTypes.bool
 
 };
 
@@ -569,5 +688,13 @@ DropdownSelect.defaultProps = {
   isRequired: false,
   dropdownType: 'singleSelect',
   isDisabled: false,
-  isLoading: false
+  isLoading: false,
+  id: '',
+  iconName: 'triangle-down',
+  iconColor: 'black',
+  iconSize: 8,
+  leftIcon: 'magnifier-icon',
+  leftIconColor: 'black',
+  leftIconSize: 10,
+  showIndicator: true
 };

package/components/Inputs/DropzoneInput.js

@@ -125,6 +125,7 @@ export const DropzoneInput = ({
     singleFile,
     messageSize,
     additionalText,
+    id,
     ...props
 }) => {
     const activeTheme = useTheme() || defaultThemeColor;
@@ -242,6 +243,7 @@ export const DropzoneInput = ({
                 <InputFile
                     ref={fileInputRef}
                     type='file'
+                    id={id}
                     multiple={singleFile == true ? false : true}
                     onChange={onFilesAdded}
                     onClick={(e) => (e.target.value = null)}
@@ -426,6 +428,10 @@ DropzoneInput.propTypes = {
     /**
      * Plus icon after file name is for file from local and cloud icon is for file from server
      */
+    /**
+     * id of the file input 
+     */
+     id: PropTypes.string
 };
 
 DropzoneInput.defaultProps = {
@@ -440,4 +446,5 @@ DropzoneInput.defaultProps = {
     customFileNameStyles: {},
     messageSize: 100,
     additionalText: '',
+    id: ''
 };

package/components/Inputs/NumericInput.js

@@ -96,6 +96,7 @@ export const NumericInput = ({
   iconAfter,
   onChange,
   theme,
+  id,
   ...props
 }) => {
   const handleChange = (e) => {
@@ -118,6 +119,7 @@ export const NumericInput = ({
             value={inputValue}
             onChange={handleChange}
             type='number'
+            id={id}
           />
           <div className='input-icon'>{iconAfter}</div>
         </TextBox>
@@ -147,6 +149,10 @@ NumericInput.propTypes = {
    * custom style of input element
    */
   inputStyle: PropTypes.object,
+   /**
+   * id of the number input
+   */
+    id: PropTypes.string,
 };
 
 NumericInput.defaultProps = {
@@ -155,4 +161,5 @@ NumericInput.defaultProps = {
   labelInline: false,
   inputStyle: {},
   inputValue: null,
+  id:''
 };

package/components/Inputs/PasswordInput.js

@@ -43,7 +43,7 @@ TextWrapper.defaultProps = {
 };
 
 const Input = styled.input`
-  width: inherit;
+  width: auto;
   -webkit-text-security:  ${({ showEye }) => showEye ? 'none' : 'disc'}  ;
 
   //Set the styles from the default styles object
@@ -94,6 +94,8 @@ export const PasswordInput = ({
   labelInline,
   isValid,
   rulesStyle,
+  id,
+  showHideIcon,
   ...props
 }) => {
   const [showEye, setShowEye] = useState(false);
@@ -145,17 +147,20 @@ export const PasswordInput = ({
           <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)}>
-            {showEye ? <Icon icon='eye-show' /> : <Icon icon='eye-hide' />}
-          </div>
+          {showEye ? <Icon icon='eye-show' /> : <Icon icon='eye-hide' />}
+        </div>: ''
+          }
         </TextWrapper>
-        <div style={{ ...rulesStyle, marginLeft: '5px' }}>{passwordRules}</div>
+        {passwordRules ? <div style={{ ...rulesStyle, marginLeft: '5px' }}>{passwordRules}</div> : ''}
       </div>
       {errMsg.length > 0 && <div className='err-text'>{errMsg}</div>}
     </Form>
@@ -208,6 +213,14 @@ PasswordInput.propTypes = {
    *	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 = {
@@ -223,4 +236,7 @@ PasswordInput.defaultProps = {
   inputStyle: {},
   passwordRules: '',
   rulesStyle: {},
-};
+  id: '',
+  showHideIcon: true
+};
+

package/components/Inputs/RadioInput.js

@@ -93,6 +93,9 @@ const WrapperDiv = styled.div`
   align-items: center;
   display: flex;
   gap: 10px;
+
+  // custom styles
+  ${({ WrapperDivStyle }) => WrapperDivStyle}
 `;
 
 const ParentDiv = styled.div`
@@ -117,6 +120,7 @@ export const RadioInput = ({
     inline,
     defaultBorderColor,
     defaultOptionColor,
+    WrapperDivStyle,
     ...props
 }) => {
     const activeTheme = useTheme() || defaultThemeColor;
@@ -128,7 +132,9 @@ export const RadioInput = ({
                 {options.map((item, i) => {
                     return (
                         <WrapperDiv
+                        WrapperDivStyle={WrapperDivStyle}
                             key={i + Math.random() * 101}
+                            id={item.id}
                             inline={inline}
                             onClick={() => {
                                 !item?.disabled && onChange(item.value);
@@ -206,15 +212,27 @@ RadioInput.propTypes = {
     inline: PropTypes.bool,
     /**
        *	RadioButton Contents i.e:- 
-         [{ label: "First Radio Button", value: "first", disabled:true, disabledColor: '#ae3232' },
-          { label: "Second Radio Button", value: "second" },
-          { label: "Third Radio Button", value: "third" }]
+         [
+    {
+      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
      */
@@ -269,4 +287,5 @@ RadioInput.defaultProps = {
     radioInnerCircleStyle: {},
     width: '14px',
     height: '14px',
+    WrapperDivStyle: {}
 };

package/components/Inputs/SearchInput.js

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

package/components/Inputs/Signature.js

@@ -148,6 +148,7 @@ export const SignatureInput = ({
     setValueForSignatureDrawing,
     imageURL,
     setImageURL,
+    id,
     ...props
 }) => {
     const activeTheme = useTheme() || defaultThemeColor;
@@ -264,6 +265,7 @@ export const SignatureInput = ({
                         customInputStyle={customInputStyle}
                         onBlur={() => setIsMyInputFocused(false)}
                         onFocus={() => setIsMyInputFocused(true)}
+                        id={id}
                         value={value}
                         defaultColor={defaultColor}
                         theme={activeTheme}
@@ -280,6 +282,7 @@ export const SignatureInput = ({
                     >
                         <SignaturePad
                             ref={pad}
+                            id={id}
                             redrawOnResize
                             height={75}
                             options={{ minWidth: 1, maxWidth: 1, penColor: '#444444' }}
@@ -346,6 +349,10 @@ SignatureInput.propTypes = {
      *	Function that sets Image url of the Signature drawing
      */
     setImageURL: PropTypes.func,
+    /**
+     *	id of the signature input
+     */
+    id: PropTypes.string,
 };
 
 SignatureInput.defaultProps = {
@@ -358,4 +365,5 @@ SignatureInput.defaultProps = {
     imageURL: '',
     setImageURL: () => { },
     setValueForSignatureDrawing: () => { },
+    id: ''
 };

package/components/Inputs/TextArea.js

@@ -82,6 +82,7 @@ export const TextArea = React.forwardRef(
             isValid,
             rows,
             cols,
+            id,
             ...props
         },
         ref
@@ -137,6 +138,7 @@ export const TextArea = React.forwardRef(
                         cols={cols}
                         rows={rows}
                         inBuiltCss={defaultStyles}
+                        id={id}
                         {...props}
                         size='1'
                     />
@@ -189,6 +191,10 @@ TextArea.propTypes = {
      *	custom style of textbox label
      */
     inputStyle: PropTypes.object,
+    /**
+    *	id of the textarea input
+    */
+    id: PropTypes.string,
 };
 
 TextArea.defaultProps = {
@@ -204,4 +210,5 @@ TextArea.defaultProps = {
     inputStyle: {},
     rows: 3,
     // cols: 100
+    id: ''
 };

package/components/Inputs/TextInput.js

@@ -85,6 +85,7 @@ export const TextInput = ({
 	type,
 	theme,
 	isDisabled,
+	id,
 	...props
 }) => {
 
@@ -130,6 +131,7 @@ export const TextInput = ({
 					inputStyle={inputStyle}
 					type={type}
 					theme={theme}
+					id={id}
 					defaultInputStyle={'input-wrapper'}
 					isDisabled={isDisabled}
 					disabled={isDisabled}
@@ -195,7 +197,11 @@ TextInput.propTypes = {
  *	receives theme object
  */
 	theme: PropTypes.object,
-
+	/**
+   *	id of the text input
+   */
+   id: PropTypes.string,
+ 
 };
 
 Input.defaultProps = {
@@ -224,5 +230,6 @@ TextInput.defaultProps = {
 	labelStyle: {},
 	inputStyle: {},
 	type: 'text',
-	isDisabled: false
+	isDisabled: false,
+	id: ''
 };

package/components/Inputs/TimeInput.js

@@ -89,6 +89,7 @@ export const TimeInput = ({
   minute,
   period,
   onChange,
+  id,
   ...props
 }) => {
   const activeTheme = useTheme() || defaultThemeColor;
@@ -121,7 +122,7 @@ export const TimeInput = ({
         {label}
       </Label>
       <div>
-        <TextBox theme={activeTheme} {...props}>
+        <TextBox theme={activeTheme} id={id} {...props}>
           <Input theme={activeTheme} value={hour} onChange={hourChange} />
           :
           <Input theme={activeTheme} value={minute} onChange={minuteChange} />
@@ -166,6 +167,10 @@ TimeInput.propTypes = {
    *	Error Message
    */
   errMsg: PropTypes.string,
+  /**
+   *	id of the time input
+   */
+   id: PropTypes.string,
 };
 
 TimeInput.defaultProps = {
@@ -177,4 +182,5 @@ TimeInput.defaultProps = {
   labelInline: false,
   isValid: true,
   errMsg: '',
+  id: ''
 };

package/components/Inputs/ToggleSwitch.js

@@ -70,6 +70,7 @@ export const ToggleSwitch = ({
     trueLabel,
     falseLabel,
     optionStyle,
+    id,
     ...props
 }) => {
     const activeTheme = useTheme() || defaultThemeColor;
@@ -140,6 +141,10 @@ ToggleSwitch.propTypes = {
      *	 label when toggle state is not checked
      * */
     falseLabel: PropTypes.string,
+    /**
+    *	id of the Toggle switch
+    */
+    id: PropTypes.string,
 };
 
 ToggleSwitch.defaultProps = {
@@ -148,4 +153,5 @@ ToggleSwitch.defaultProps = {
     falseLabel: 'No',
     customSwitchStyle: {},
     customToggleBoxStyle: {},
+    id: ''
 };