groundfloor-react-ui 1.0.8 → 1.0.11

package/components/Form/FormComponent.js

@@ -8,6 +8,7 @@ import {
   DropdownSelect,
   DropzoneInput,
   NumericInput,
+  PasswordInput,
   RadioInput,
   SearchInput,
   SignatureInput,
@@ -23,6 +24,7 @@ import {
   MultiColumnWrapper,
   MultiColumnDiv,
 } from '../DesignComponent';
+import { Table } from '../Tables';
 
 export const FormComponent = ({ formData, ...props }) => {
   const header = (item) => {
@@ -94,7 +96,15 @@ export const FormComponent = ({ formData, ...props }) => {
   };
 
   const MultiDropdownInput = (item) => {
-    return <DropdownSelect {...item} {...props} />;
+    return <DropdownSelect dropdownType={'multiSelect'} {...item} {...props} />;
+  };
+
+  const AsyncMultiDropdownInput = (item) => {
+    return <DropdownSelect dropdownType={'asyncMultiSelect'} {...item} {...props} />;
+  };
+
+  const AsyncSingleDropdownInput = (item) => {
+    return <DropdownSelect dropdownType={'asyncSingleSelect'} {...item} {...props} />;
   };
 
   const signatureInput = (item) => {
@@ -133,6 +143,14 @@ export const FormComponent = ({ formData, ...props }) => {
     return <SearchInput {...item} {...props} />;
   };
 
+  const tableInput = (item) => {
+    return <Table {...item} {...props} />;
+  };
+
+  const passwordInput = (item) => {
+    return <PasswordInput {...item} {...props} />;
+  };
+
   const handleSubmit = () => {
     console.log('form submit');
   };
@@ -157,6 +175,10 @@ export const FormComponent = ({ formData, ...props }) => {
         return SingleDropdownInput(item);
       case 'multiSelect':
         return MultiDropdownInput(item);
+      case 'asyncSingleSelect':
+        return AsyncSingleDropdownInput(item);
+      case 'asyncMultiSelect':
+        return AsyncMultiDropdownInput(item);
       case 'signature':
         return signatureInput(item);
       case 'fileUpload':
@@ -175,6 +197,10 @@ export const FormComponent = ({ formData, ...props }) => {
         return tinyButton(item);
       case 'search':
         return searchInput(item);
+      case 'table':
+        return tableInput(item);
+      case 'passwordInput':
+        return passwordInput(item);
       default:
         break;
     }
@@ -205,4 +231,4 @@ export const FormComponent = ({ formData, ...props }) => {
       </FormContainer>
     </Fragment>
   );
-};
+};

package/components/Inputs/CheckBoxInput.js

@@ -92,6 +92,7 @@ export const CheckBoxInput = ({
     setOptions,
     inline,
     wrapperStyle,
+    isRequired,
     ...props
 }) => {
     useEffect(() => {
@@ -121,13 +122,27 @@ export const CheckBoxInput = ({
 
     return (
         <div style={returnedTarget} {...props}>
-            <Label
-                themeColor={defaultThemeColor}
-                customStyles={labelStyle}
-                type={'check-label'}
-                text={label}
-                {...props}
-            />
+
+            <div style={{ display: 'flex' }}>
+                <Label
+                    themeColor={defaultThemeColor}
+                    customStyles={labelStyle}
+                    type={'check-label'}
+                    text={label}
+                    {...props}
+                />
+
+                {isRequired && (
+                    <div
+                        style={{
+                            marginLeft: '4px',
+                            color: `${defaultThemeColor.variant['error']}`,
+                        }}
+                    >
+                        *
+                    </div>
+                )}
+            </div>
             <ParentDiv
                 style={{ display: 'flex', flexWrap: 'wrap' }}
                 inline={inline}
@@ -250,6 +265,10 @@ CheckBoxInput.propTypes = {
      *	CheckBox checked value changeHandler
      */
     getCheckedArr: PropTypes.func,
+    /**
+   *	mandatory field or not
+   */
+    isRequired: PropTypes.bool,
 };
 
 CheckBoxInput.defaultProps = {
@@ -265,4 +284,5 @@ CheckBoxInput.defaultProps = {
     checkedTextColor: `${defaultThemeColor.neutral['neutral-1']}`,
     defaultBorderColor: '#D4D7E3',
     checkedCheckBoxColor: `${defaultThemeColor.primary['primary-1']}`,
+    isRequired: true
 };

package/components/Inputs/DropdownSelect.js

@@ -7,6 +7,7 @@ import defaultStyles from '../constants/defaultStyle';
 import getDefaultStyles from '../constants/utils';
 import { Label } from '../Label';
 import { Icon } from '../Icon';
+import AsyncSelect from 'react-select/async';
 
 const Wrapper = styled.div`
 
@@ -23,7 +24,6 @@ const Wrapper = styled.div`
             border-top-left-radius: 0;
             border-top-right-radius: 0;
             width: 100%;
-            border: 0.5px solid ${defaultThemeColor.neutral['neutral-4']};
         }
         
         .new-select__dropdown-indicator{
@@ -53,13 +53,7 @@ const Wrapper = styled.div`
             max-height: 110px;
         }
 
-        .master-dropdown__control,
-        .new-select__control {
-            border:${({ isValid }) =>
-    !isValid
-      ? '0.5px solid ' + defaultThemeColor.ui['error']
-      : '0.5px solid ' + defaultThemeColor.neutral['neutral-4']};
-        }
+       
 
         .master-dropdown__option,
         .new-select__option {
@@ -83,10 +77,7 @@ const Wrapper = styled.div`
        
         .new-select__control:hover,
         .new-select__control--is-focused {
-            border: ${({ isValid }) =>
-    !isValid
-      ? '0.5px solid ' + defaultThemeColor.ui['error']
-      : '0.5px solid ' + defaultThemeColor.primary['primary-1']};
+          
             box-shadow: none;
         }
       
@@ -117,21 +108,15 @@ const Wrapper = styled.div`
         }
 
         .default-select__control--is-focused {
-            border-width: 1px;
             outline: none;
         }
     }
 
-        .multiValue-wrapper{
-            width:100%;
-            display:flex;
-            justify-content: space-between;
-            align-items: center;
-        }
+       
 
         .text-main-alt {
             color: ${defaultThemeColor.textColor} !important;
-            // font-size:14px;
+            margin-right: 2px;
         }
         .text-more-alt{
             font-size:12px;
@@ -192,19 +177,22 @@ export const DropdownSelect = ({
   isDisabled,
   isValid,
   clearSelected,
-  isClearSelected,
+  isClearable,
   isLoading,
   height,
   fontSize,
+  loadOptions,
+  onInputChange,
   ...props
 }) => {
   const DropdownIndicator = (p) => {
     return (
       <components.DropdownIndicator {...p}>
-        {isClearSelected == true ? (
+        {true ? (
           <IconDiv
             onClick={() => {
               clearSelected();
+              p.clearValue();
             }}
           >
             <Icon icon='cross-icon' color={'black'} size={8} />
@@ -258,28 +246,30 @@ export const DropdownSelect = ({
     );
   };
 
-  const MultiValue = ({ getValue, index, ...p }) => {
+  const MultiValue = ({ index, ...p }) => {
     const firstSelected = p?.data?.label || 'Select';
+    return !index && <div className='text-main-alt'>{firstSelected}</div>;
+  };
+
+  const ValueContainer = ({ getValue, children, ...props }) => {
     const len = getValue().length;
     return (
-      !index && (
-        <div className='multiValue-wrapper'>
-          <div className='text-main-alt'>{firstSelected}</div>
-          {len > 1 && (
-            <div className={`text-more-alt`}>&amp; {len - 1} more</div>
-          )}
-        </div>
-      )
+      <components.ValueContainer {...props}>
+        {children}
+        {len > 1 && <div className={`text-more-alt`}>&amp; {len - 1} more</div>}
+      </components.ValueContainer>
     );
   };
 
   const stylesComp = {
-    control: (base) => ({
+    control: (base, state) => ({
       ...base,
-      border: '1px solid #d4d7e3',
+      border: !isValid
+        ? '1px solid ' + defaultThemeColor.ui['error']
+        : '1px solid ' + defaultThemeColor.border,
       height: `${height}px`,
       minHeight: `${height}px`,
-      minWidth: '226px',
+      boxShadow: (state.isSelected || state.isFocused) && 'none',
     }),
     placeholder: (base) => ({
       ...base,
@@ -295,8 +285,6 @@ export const DropdownSelect = ({
     }),
     valueContainer: (base) => ({
       ...base,
-      // height: `${height}px`,
-      // padding: '7px 8px',
       fontSize: fontSize + 'px',
     }),
     indicatorsContainer: (base) => ({
@@ -371,7 +359,7 @@ export const DropdownSelect = ({
             DropdownIndicator,
             MultiValue,
             Option,
-            // LoadingIndicator: () => null,
+            ValueContainer,
             IndicatorSeparator: () => null,
             ClearIndicator: () => null,
           }}
@@ -385,24 +373,67 @@ export const DropdownSelect = ({
           styles={stylesComp}
           isMulti={true}
           isDisabled={isDisabled}
-          isClearable={props.isClearable}
           hideSelectedOptions={false}
           closeMenuOnSelect={false}
-          onMenuClose={props.onMenuClose}
-          isSearchable={false}
+          isSearchable={true}
+          isLoading={isLoading}
+          {...props}
+        />
+      ) : dropdownType === 'asyncSingleSelect' ? (
+        <AsyncSelect
+          loadOptions={loadOptions}
+          defaultOptions
+          onInputChange={onInputChange}
+          styles={stylesComp}
+          components={{
+            DropdownIndicator,
+            IndicatorSeparator: () => null,
+            ClearIndicator: () => null,
+          }}
+          className='select-manage-page'
+          classNamePrefix='new-select'
+          name={'select-dropdown'}
+          placeholder={placeHolder}
+          onChange={setSelectedValue}
           isLoading={isLoading}
+          isDisabled={isDisabled}
+          {...props}
+        />
+      ) : dropdownType === 'asyncMultiSelect' ? (
+        <AsyncSelect
+          components={{
+            DropdownIndicator,
+            MultiValue,
+            ValueContainer,
+            Option,
+            IndicatorSeparator: () => null,
+            ClearIndicator: () => null,
+          }}
+          className='select-manage-page'
+          classNamePrefix='new-select'
+          name={'select-dropdown'}
+          onChange={setSelectedValue}
+          placeholder={placeHolder}
+          styles={stylesComp}
+          isMulti={true}
+          isDisabled={isDisabled}
+          hideSelectedOptions={false}
+          closeMenuOnSelect={false}
+          isSearchable={true}
+          isLoading={isLoading}
+          loadOptions={loadOptions}
+          defaultOptions
+          onInputChange={onInputChange}
           {...props}
         />
       ) : (
         <Select
           components={{
             DropdownIndicator,
-            // LoadingIndicator,
             IndicatorSeparator: () => null,
             ClearIndicator: () => null,
           }}
           className='select-manage-page'
-          // className="new-select"
           classNamePrefix='new-select'
           name={'select-dropdown'}
           options={optionArr}
@@ -459,6 +490,14 @@ DropdownSelect.propTypes = {
    *   This Function will be called if cross button pressed
    */
   clearSelected: PropTypes.func,
+  /**
+   *   callback function to get value
+   */
+  loadOptions: PropTypes.func,
+  /**
+   *   onchange function
+   */
+  onInputChange: PropTypes.func,
 };
 
 DropdownSelect.defaultProps = {
@@ -469,7 +508,10 @@ DropdownSelect.defaultProps = {
   setSelectedValue: undefined,
   placeHolder: 'Select an option',
   isValid: true,
-  isClearSelected: false,
+  isClearable: false,
   height: 31,
   fontSize: 14,
+  loadOptions: () => { },
+  onInputChange: () => { },
+  clearSelected: () => { },
 };

package/components/Inputs/PasswordInput.js

@@ -58,7 +58,7 @@ const Input = styled.input`
 const inline = css`
   display: flex;
   gap: 7px;
-  align-items: center;
+  align-items: start;
 `;
 
 const Form = styled.div`
@@ -76,6 +76,7 @@ Form.defaultProps = {
 
 export const PasswordInput = ({
   themeColor,
+  passwordRules,
   textBoxStyle,
   labelStyle,
   inputStyle,
@@ -84,6 +85,7 @@ export const PasswordInput = ({
   label,
   labelInline,
   isValid,
+  rulesStyle,
   ...props
 }) => {
   const [showEye, setShowEye] = useState(false);
@@ -94,12 +96,11 @@ export const PasswordInput = ({
         <Label
           customStyles={labelStyle}
           type={'label-text'}
-          labelInline={labelInline}
           text={label}
           errMsg={errMsg}
           style={{
             display: 'flex',
-            marginBottom: `${!labelInline ? '7px' : ''}`,
+            marginBottom: `${!labelInline ? '7px' : '0px'}`,
             paddingBottom: '0px',
           }}
           {...props}
@@ -108,6 +109,7 @@ export const PasswordInput = ({
           <div
             style={{
               marginLeft: '4px',
+              marginRight: '5px',
               color: `${themeColor.variant['error']}`,
             }}
           >
@@ -115,25 +117,34 @@ export const PasswordInput = ({
           </div>
         )}
       </div>
-      <TextWrapper
-        required={required}
-        themeColor={defaultThemeColor}
-        textBoxStyle={textBoxStyle}
-        isValid={isValid}
-        theme={defaultStyles}
-        defaultWrapperStyle={'textbox-wrapper'}
-        {...props}
+      <div
+        style={{
+          display: 'flex',
+          justifyContent: 'center',
+          alignItems: 'start',
+        }}
       >
-        <Input
-          inputStyle={inputStyle}
-          type={showEye ? 'text' : 'password'}
-          defaultInputStyle={'input-wrapper'}
+        <TextWrapper
+          required={required}
+          themeColor={defaultThemeColor}
+          textBoxStyle={textBoxStyle}
+          isValid={isValid}
+          theme={defaultStyles}
+          defaultWrapperStyle={'textbox-wrapper'}
           {...props}
-        />
-        <div className='input-icon' onClick={() => setShowEye(!showEye)}>
-          {showEye ? <Icon icon='eye-show' /> : <Icon icon='eye-hide' />}
-        </div>
-      </TextWrapper>
+        >
+          <Input
+            inputStyle={inputStyle}
+            type={showEye ? 'text' : 'password'}
+            defaultInputStyle={'input-wrapper'}
+            {...props}
+          />
+          <div className='input-icon' onClick={() => setShowEye(!showEye)}>
+            {showEye ? <Icon icon='eye-show' /> : <Icon icon='eye-hide' />}
+          </div>
+        </TextWrapper>
+        <div style={{ ...rulesStyle, marginLeft: '5px' }}>{passwordRules}</div>
+      </div>
       {errMsg.length > 0 && <div className='err-text'>{errMsg}</div>}
     </Form>
   );
@@ -177,6 +188,14 @@ PasswordInput.propTypes = {
    *	custom style of textbox label
    */
   inputStyle: PropTypes.object,
+  /**
+   *	rules of password
+   */
+  passwordRules: PropTypes.string,
+  /**
+   *	styles of password rules
+   */
+  rulesStyle: PropTypes.object,
 };
 
 PasswordInput.defaultProps = {
@@ -190,4 +209,6 @@ PasswordInput.defaultProps = {
   textBoxStyle: {},
   labelStyle: {},
   inputStyle: {},
+  passwordRules: '',
+  rulesStyle: {},
 };

package/components/constants/defaultStyle.js

@@ -185,6 +185,8 @@ const defaultStyles = {
         'font-size': '14px',
         color: `${defaultThemeColor.variant['neutral-2']}`,
         display: 'flex',
+        'align-items': 'center',
+        'justify-content': 'center',
         width: 'max-content',
         'background-color': 'transparent',
         'margin-bottom': '0px',