react-core-ts 1.1.0 → 1.1.21

package/src/commontypes.ts

@@ -1,6 +1,12 @@
-type ValueProps = {
+import { FieldErrors, UseFormRegister } from "react-hook-form";
+
+export type ValueProps = {
   [key: string]: string;
 };
+export type TabPops = {
+  id: number | string;
+  label: string;
+};
 export interface AutoSuggestionInputProps {
   id?: string;
   label?: string;
@@ -10,12 +16,16 @@ export interface AutoSuggestionInputProps {
   onChange: (value?: ValueProps | ValueProps[]) => void;
   data?: any[];
   type?:
-    | 'custom_select'
-    | 'auto_complete'
-    | 'custom_search_select'
-    | 'auto_suggestion';
+    | "custom_select"
+    | "auto_complete"
+    | "custom_search_select"
+    | "auto_suggestion";
   placeholder?: string;
-  getData?: (key?: string, nextBlock?: number) => any;
+  getData?: (
+    key?: string,
+    nextBlock?: number,
+    tabValue?: number | string
+  ) => any;
   errors?: any;
   name: string;
   readOnly?: boolean;
@@ -33,6 +43,7 @@ export interface AutoSuggestionInputProps {
   handleAction?: () => void;
   actionLabel?: string;
   notDataMessage?: string;
+  initialDataMessage?: string;
   selectedItems?: any[];
   onFocus?: (e: React.FocusEvent<HTMLInputElement, Element>) => void;
   dopDownRef?: HTMLInputElement;
@@ -42,4 +53,124 @@ export interface AutoSuggestionInputProps {
   isTreeDropdown?: boolean;
   flatArray?: boolean;
   parentField?: string;
+  countOnly?: boolean; // only show selected items count
+  typeOnlyFetch?: boolean; // async only call when typed any value
+  tab?: TabPops[];
+  clearTabSwitch?: boolean;
+}
+export interface IconsProps {
+  name: any;
+  className?: string;
+  onClick?: (e: any) => void;
+  color?: string;
+  type?: string;
+  isWrapper?: boolean;
+  viewBox?: boolean;
+  svgClassName?: string;
+  custDimension?: number;
+  style?: any;
+  hasCustomSize?: boolean;
+  onMouseDown?: (e: any) => void;
+  onMouseUp?: (e: any) => void;
+  onMouseLeave?: (e: any) => void;
+}
+export interface IconProps {
+  stroke?: number;
+  className?: string;
+  color?: string;
+  width?: number;
+  height?: number;
+}
+export interface TextFieldProps {
+  id: string;
+  name: string;
+  label?: string;
+  type?: string;
+  decimal?: boolean;
+  fullwidth?: boolean;
+  step?: number;
+  disabled?: boolean;
+  uppercase?: boolean;
+  readOnly?: boolean;
+  placeholder?: string;
+  required?: boolean;
+  labelTitle?: string;
+  fieldEdit?: boolean;
+  size?: "xs" | "sm" | "md" | "lg" | "xxs";
+  edited?: boolean;
+  onEditComplete?: () => void;
+  value?: string;
+  onEditCancel?: () => void;
+  adorement?: JSX.Element | string | undefined;
+  autoComplete?: boolean;
+  autoFocus?: boolean;
+  register?: any;
+  setFocus?: any;
+  errors?: FieldErrors;
+  isValid?: boolean;
+  isTooltip?: boolean;
+  className?: string;
+  showValidityCheck?: boolean;
+  maxLength?: number;
+  max?: number;
+  min?: number;
+  minLength?: number;
+  keyRegexPattern?: string;
+  onChange?: (e: React.ChangeEvent<HTMLInputElement>) => void;
+  onBlur?: (e: React.ChangeEvent<HTMLInputElement>) => void;
+  adjustFieldLabel?: string;
+  backGround?: any; //added for set background colour according to the form
+  prefixes?: any;
+  onPrefixChange?: (e: any) => void;
+  prefixValue?: any;
+  onStepUp?: () => void;
+  onStepDown?: () => void;
+  width?: number;
+  adorementPosition?: "start" | "end";
+  hideLabel?: boolean;
+  defaultData?: string[];
+  onCreatableChange?: (e: string[]) => void;
+}
+
+export interface TextAreaProps {
+  id: string;
+  name: string;
+  label?: string;
+  rows?: number;
+  fullwidth?: boolean;
+  className?: string;
+  disabled?: boolean;
+  placeholder?: string;
+  required?: boolean;
+  fieldEdit?: boolean;
+  edited?: boolean;
+  value?: string;
+  onEditComplete?: () => void;
+  onEditCancel?: () => void;
+  adorement?: JSX.Element;
+  autoComplete?: boolean;
+  autoFocus?: boolean;
+  hideLabel?: boolean;
+  minLength?: number;
+  maxLength?: number;
+  register?: any;
+  onChange?: (e: React.ChangeEvent<HTMLInputElement>) => void;
+
+  setFocus?: any;
+  errors?: FieldErrors;
+  boxHeight?: string;
+  boxMinHeight?: number | string;
+}
+export interface CheckboxProps {
+  id: string;
+  name: string;
+  label?: string;
+  disabled?: boolean;
+  intermediate?: boolean;
+  labalClass?: string;
+  className?: string;
+  checked?: boolean;
+  register?: UseFormRegister<any>;
+  handleChange?: (e: any) => void;
+  value?: string | number;
 }

package/src/components/DropdownList.tsx

@@ -25,7 +25,7 @@ const DropdownList: React.FC<ValueProps> = ({
   return (
     <div
       key={idx.toString()}
-      className={`qbs-autocomplete-listitem-container  ${
+      className={`qbs-autocomplete-listitem-container ${
         (isMultiple || singleSelect) && 'qbs-autocomplete-checkbox-container'
       } ${isSelected(suggestion, selected) ? 'is-selected' : ''}`}
     >
@@ -53,7 +53,7 @@ const DropdownList: React.FC<ValueProps> = ({
           </label>
         </div>
       )}
-      <li
+      <div
         key={idx}
         className={`qbs-autocomplete-suggestions-item ${
           isSelected(suggestion, selected) ? 'is-selected' : ''
@@ -62,7 +62,7 @@ const DropdownList: React.FC<ValueProps> = ({
         data-testid={suggestion[desc]}
       >
         {suggestion[desc]}
-      </li>
+      </div>
     </div>
   );
 };

package/src/components/InputActions.tsx

@@ -5,6 +5,7 @@ type ValueProps = {
   inputValue: string;
   searchValue: string;
   dropOpen: boolean;
+  countOnly?: boolean;
   handleDropOpen: (e: any) => void;
   handleDropClose: (e: any) => void;
   disabled: boolean;
@@ -22,10 +23,11 @@ const InputActions: React.FC<ValueProps> = ({
   readOnly,
   expandable,
   handleClear,
+  countOnly
 }) => {
   return (
     <div className="qbs-autocomplete-close-icon">
-      {(inputValue || searchValue) && !disabled && !readOnly && !expandable && (
+      {(inputValue || searchValue) && !disabled && !readOnly && !expandable && !countOnly && (
         <button
           onClick={handleClear}
           className="icon-button"

package/src/components/TreeNode.tsx

@@ -12,6 +12,8 @@ const TreeNode: React.FC<any> = ({
   updateNode,
   children,
   descId,
+  isSelected,
+  selected,
 }) => {
   // Toggle the expanded state when clicking on the node
   const handleToggle = (node?: any) => {
@@ -44,15 +46,15 @@ const TreeNode: React.FC<any> = ({
           )}
           <div
             className={`qbs-tree-list-container-sub-container ${
-              node?.checked ? 'checked' : ''
-            }`}
+              isSelected(node, selected) ? 'checked' : ''
+            } ${node?.children?.length > 0 ? '' : ' marginLeft'}`}
           >
             {(isMultiple || singleSelect) && (
               <div className="qbs-autocomplete-checkbox">
                 <input
                   onChange={(e) => handleCheckbox(e, node)} // Pass correct node to the handler
                   type="checkbox"
-                  checked={node.checked}
+                  checked={isSelected(node, selected)}
                   id={`qbs-checkbox-${idx.toString()}`}
                 />
                 <label htmlFor={`qbs-checkbox-${idx.toString()}`}>

package/src/components/customIcons/Attachments.tsx

@@ -0,0 +1,17 @@
+import React from 'react'
+
+import { IconProps } from '../../commontypes'
+
+const Attachment: React.FC<IconProps> = ({ className = '', stroke = 1.5 }) => {
+  return (
+    <path
+      d="M21.1525 10.8995L12.1369 19.9151C10.0866 21.9653 6.7625 21.9653 4.71225 19.9151C2.662 17.8648 2.662 14.5407 4.71225 12.4904L13.7279 3.47483C15.0947 2.108 17.3108 2.108 18.6776 3.47483C20.0444 4.84167 20.0444 7.05775 18.6776 8.42458L10.0156 17.0866C9.33213 17.7701 8.22409 17.7701 7.54068 17.0866C6.85726 16.4032 6.85726 15.2952 7.54068 14.6118L15.1421 7.01037"
+      stroke="currentColor"
+      strokeWidth="2"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+  )
+}
+
+export default Attachment

package/src/components/customIcons/CommentIcon.tsx

@@ -0,0 +1,14 @@
+import React from 'react'
+
+import { IconProps } from '../../commontypes'
+
+const CommentIcon: React.FC<IconProps> = ({ className = '', stroke = 1.5 }) => {
+  return (
+    <path
+      d="M17 0C17.7956 0 18.5587 0.316071 19.1213 0.87868C19.6839 1.44129 20 2.20435 20 3V13C20 13.7956 19.6839 14.5587 19.1213 15.1213C18.5587 15.6839 17.7956 16 17 16H5.333L2 18.5C1.176 19.118 0 18.53 0 17.5V3C0 2.20435 0.316071 1.44129 0.87868 0.87868C1.44129 0.316071 2.20435 0 3 0H17ZM9 9H6C5.73478 9 5.48043 9.10536 5.29289 9.29289C5.10536 9.48043 5 9.73478 5 10C5 10.2652 5.10536 10.5196 5.29289 10.7071C5.48043 10.8946 5.73478 11 6 11H9C9.26522 11 9.51957 10.8946 9.70711 10.7071C9.89464 10.5196 10 10.2652 10 10C10 9.73478 9.89464 9.48043 9.70711 9.29289C9.51957 9.10536 9.26522 9 9 9ZM14 5H6C5.74512 5.00028 5.49997 5.09788 5.31463 5.27285C5.1293 5.44782 5.01777 5.68695 5.00283 5.94139C4.98789 6.19584 5.07067 6.44638 5.23426 6.64183C5.39786 6.83729 5.6299 6.9629 5.883 6.993L6 7H14C14.2549 6.99972 14.5 6.90212 14.6854 6.72715C14.8707 6.55218 14.9822 6.31305 14.9972 6.05861C15.0121 5.80416 14.9293 5.55362 14.7657 5.35817C14.6021 5.16271 14.3701 5.0371 14.117 5.007L14 5Z"
+      fill="currentColor"
+    />
+  )
+}
+
+export default CommentIcon