@dhasdk/simple-ui 1.0.7 → 1.0.8

package/src/lib/CheckBox.tsx

@@ -0,0 +1,491 @@
+
+import React, { InputHTMLAttributes, ReactElement, ReactNode, cloneElement, isValidElement, useEffect, useImperativeHandle, useMemo, useRef, useState } from 'react';
+import { twMerge } from 'tailwind-merge';
+import CheckBoxChecked from '../assets/img/check_box.svg';
+import CheckBoxEmpty from '../assets/img/check_box_empty.svg';
+import CheckBoxIndeterminate from '../assets/img/indeterminate_check_box.svg';
+import CheckBoxCheckedFill from '../assets/img/check_box_fill.svg'
+import CheckBoxEmptyFill from '../assets/img/check_box_fill_empty.svg';
+import CheckBoxIndeterminateFill from '../assets/img/indeterminate_check_box_fill.svg';
+import CheckBoxMarker from '../assets/img/marker_check_by_default.svg';
+import CheckBoxMarkerFill from '../assets/img/marker_check_by_default_fill.svg';
+
+export interface CheckBoxGroupProps {
+  children: ReactNode;
+  bridgeParent?: boolean;
+  fill?: boolean;   // pass to CheckBox - fill or std variant
+  icon?: boolean;   // pass to CheckBox -use icons to represent ux variants (vs default browser styles)
+  marker?: boolean; // pass to CheckBox -use x-marker instead of check
+  showBranch?: boolean;
+}
+
+type StatusType = 'checked' | 'unchecked' | 'indeterminate';
+
+type IconType = 'sibling' | 'sibling-child' | 'child' | 'blank';
+
+export interface CheckBoxProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'type'> {
+  ariaLabel?: string;
+  value?: string;
+  fill?: boolean;   // fill or std variant
+  icon?: boolean;   // use icons to represent ux variants (vs default browser styles)
+  marker?: boolean; // use x-marker instead of check
+  level?: number;
+  classNameSvg?: string;
+  classNameInput?: string;
+  iconType?: IconType[];  // iterate each level for every CheckBox, blank, sibling, etc.
+  children?: ReactNode;
+  index?: number;
+  showBranch?: boolean;
+  status?: StatusType;
+  setStatusUpdate?: ( status: StatusType, index: number ) => void;
+}
+//
+/* 
+ * siblingsExist
+ * returns true if a sibling exists later in the list at the same level w/o 
+ * interediary elements in between that exist at a higher level. e.g., if 
+ * a following item not at the currentLevel contains a higher level value,
+ * an automatic false is returned.
+ */
+function siblingExists(checkBoxArray: ReactElement<CheckBoxProps>[], currentIndex: number, bridgeParent: boolean): boolean {
+  
+  // must determine if there is another sibling at the current level w/ index > currentIndex
+  const currentLevel = checkBoxArray[currentIndex].props.level ?? 0;
+
+  if (currentIndex === checkBoxArray.length - 1) {
+    return false;
+  }
+
+  for (let i = currentIndex + 1; i < checkBoxArray.length; i++) {
+    
+    const nextLevel = checkBoxArray[i].props.level;
+    if (nextLevel === undefined) {
+      continue;
+    }
+
+    // can be no sibling if we have reached another element at a lower level
+    if (nextLevel < currentLevel) {
+
+      if (bridgeParent && (nextLevel + 1) === currentLevel) {
+        return true;
+      } else {
+        return false;
+      }
+    }
+    // we have found a direct sibling
+    if (nextLevel === currentLevel) {
+      return true;
+    } 
+  }
+
+  return false;
+}
+
+/*
+ * leveExistsBelow
+ * Return true if the given level item exists later in the list without going to a level lower 
+ * than that given, meaning something higher in the heirarchy before finding the desired level
+ */
+function levelExistsLater(checkBoxArray: ReactElement<CheckBoxProps>[], currentIndex: number, targetLevel: number): boolean {
+  
+  if (currentIndex === checkBoxArray.length - 1) {
+    return false;
+  }
+
+  for (let i = currentIndex + 1; i < checkBoxArray.length; i++) {
+    const newLevel = checkBoxArray[i].props.level || 0;
+    
+    if (newLevel < targetLevel) 
+      return false;
+
+    if (newLevel === targetLevel)
+      return true;
+  }
+
+  return false;
+}
+
+/* 
+ * buildElementIconTypes
+ * Build out the iconType array per element
+ * if level 0 return undefined
+ * on current level, is element a sibling-child or child. 
+ *    if current level === level 1, return this single-element array
+ * cycle through remaining levels, determining icon to represent relationship for current element
+*/
+function buildElementIconTypes(checkBoxArray: ReactElement<CheckBoxProps>[], 
+    currentIndex: number, bridgeParent: boolean): IconType[] | undefined {
+
+  const currentLevel = checkBoxArray[currentIndex].props.level ?? 0;
+  const icons: IconType[] = [];
+
+  // if currentLevel === 0, return 
+  if (currentLevel === 0) {
+    return undefined;
+  }
+
+  if (currentLevel > 0 && currentIndex + 1 < checkBoxArray.length 
+      && checkBoxArray[currentIndex + 1].props.level === currentLevel ) {
+    icons.unshift('sibling-child');
+  } else if (siblingExists(checkBoxArray, currentIndex, bridgeParent)) {
+    icons.unshift('sibling-child');
+  } else {
+    icons.unshift('child');
+  }
+
+  // we've taken care of 1st level - return if we are only at level 1 already
+  if (currentLevel === 1) {
+    return icons;
+  }  
+  
+  if (checkBoxArray.length > currentIndex) {
+    // next level we are looking for, place an icon at each level
+    for (let level = currentLevel - 1; level > 0; level--) {
+      let workingIcon:IconType = 'blank'; // assume blank, re-assign if found differently below
+      if (levelExistsLater(checkBoxArray, currentIndex, level) 
+        || (bridgeParent && levelExistsLater(checkBoxArray, currentIndex, level - 1))) {
+        workingIcon = 'sibling'
+      }
+      icons.unshift(workingIcon);
+    }
+  }
+  
+  return icons;
+}
+
+/* 
+ * function elementIndeterminate
+ * Determines the determinate status of a given element at a given level.
+ * Does this by cycling through children elements, looking for all checked, 
+ * all unchecked, or mix (indeterminate)
+ */
+function elementIndeterminate(checkBoxArray: ReactElement<CheckBoxProps>[], 
+    elements: StatusType[], targetLevel: number, index: number): StatusType {
+
+  const safeLevel = targetLevel + 1;  // one level below target for all children
+
+  // Array of StatusType: type StatusType = 'checked' | 'unchecked' | 'indeterminate';
+  let allChecked = true;
+  let allUnChecked = true;
+
+  // loop through children if exist, checking for checked/unchecked status
+  for (let i = index + 1; i < elements.length; i++) {
+
+    const currentLevel = checkBoxArray[i].props.level ?? 0;
+
+    // if we are no longer under intended parent, break
+    if (currentLevel < safeLevel) {
+      break;
+    }
+
+    if (elements[i] === 'checked') {
+      allUnChecked = false;
+    } else if (elements[i] === 'unchecked') {
+      allChecked = false;
+    } else if (elements[i] === 'indeterminate') {
+      allUnChecked = false;
+      allChecked = false;
+      break;  // we are indeterminate - break
+    }
+  }
+
+  let status:StatusType;
+  if (allChecked) 
+    status = 'checked';
+  else if (allUnChecked)
+    status = 'unchecked';
+  else {
+    status = 'indeterminate';
+  }
+
+  return status;
+}
+
+  // fill?: boolean;   // fill or std variant
+  // icon?: boolean;   // use icons to represent ux variants (vs default browser styles)
+  // marker?: boolean; // use x-marker instead of check
+
+// CheckBoxGroup component - wraps CheckBoxes for the purpose of displaying their relationship icons
+export function CheckBoxGroup({ children, bridgeParent = false, fill = false, 
+    icon = true, marker = false, showBranch = true }: CheckBoxGroupProps) {
+
+  const [updateStatus, setUpdateStatus] = useState<{status: StatusType, index: number}>();
+
+  // memoize / build the raw checkbox array only when “children” changes
+  const checkBoxArray = useMemo(
+    () =>
+      React.Children
+        .toArray(children)
+        .filter(
+          (c): c is ReactElement<CheckBoxProps> =>
+            isValidElement<CheckBoxProps>(c) && c.type === CheckBox
+        ),
+    [children]  // execute when children changes
+  );
+  
+  const [statusArray, setStatusArray] = 
+      useState<StatusType[]>(() => checkBoxArray.map(() => 'unchecked'));
+  
+  // IF UPDATESTATUS IS CHANGED, UPDATE STATUS ARRAY. UPDATING THE STATUSARRAY
+  // WILL PROMPT AN UPDATE TO THE BELOW USEMEMO
+  useEffect(() => {
+    if (!updateStatus) return;
+    const { index, status } = updateStatus;
+
+    const currentLevel = checkBoxArray[index].props.level ?? 0;
+    
+    // make copy of statusArray
+    const statusArrayCopy:StatusType[] = [...statusArray];
+
+    // update new status in array copy to use when forwarded
+    statusArrayCopy[index] = status;
+    
+    // CYCLE DOWN UPDATING TO STATUS VALUE
+    if (status !== 'indeterminate') {
+      for (let i = index + 1; i < statusArrayCopy.length; i++) {
+        const level = checkBoxArray[i].props.level ?? 0  
+        
+        // if we've passed any children of updated checkbox, exit
+        if (level <= currentLevel) {
+          break;
+        }
+        // else update item inside array
+        else {
+          statusArrayCopy[i] = status;
+        }
+      }
+    }
+
+    // CYCLE UP TO CHECK INDETERMINATE STATUS - immediate parent/level
+    for (let targetLevel = currentLevel - 1; targetLevel >= 0; targetLevel--) {
+      
+      // cycle through indexes in reverse, looking for 1st instance of targetLevel
+      // this will be our next parent
+      for (let i = index - 1; i >= 0; i--) {
+
+        // determine if parent should be unchecked, checked, or indeterminate
+        // call helper function for this
+        if (checkBoxArray[i].props.level === targetLevel) {
+          statusArrayCopy[i] = elementIndeterminate(checkBoxArray, statusArrayCopy, targetLevel, i);
+          break;  // continue to next level up / parent
+        }
+      }
+    }
+    
+    // updateStatusArray w/ new information, which updates child components
+    setStatusArray(statusArrayCopy);
+
+    // clear it out if you want, so you don’t re‐run on the same update
+    setUpdateStatus(undefined);
+
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [updateStatus]);
+
+
+  // build the icons, index, and setStatusUpdate function on top of that array
+  const enhanced = useMemo(
+    () =>
+      checkBoxArray.map((child, idx) => {
+        const iconType = buildElementIconTypes(checkBoxArray, idx, bridgeParent);
+        // wrap the state‐setter so it matches (status, index) => void
+        const handleStatusUpdate = (status: StatusType, index: number) => {
+          setUpdateStatus({ status, index });
+        };
+
+        return cloneElement(child, {
+          iconType,
+          index: idx,
+          fill: fill,
+          icon: icon,
+          marker: marker,
+          showBranch: showBranch,
+          status: statusArray[idx],
+          setStatusUpdate: handleStatusUpdate,
+        });
+      }),
+    [checkBoxArray, bridgeParent, fill, icon, marker, showBranch, statusArray]  // execute when one of these change
+  );
+  
+  return <div>{enhanced}</div>;
+}
+
+/*
+ * CheckBox
+ * This is the CheckBox component, it represents an individual CheckBox item
+ * on the page.
+ */
+export const CheckBox = React.forwardRef<HTMLInputElement, CheckBoxProps>(
+  ({ className = '', icon = true, classNameInput = '', ariaLabel='CheckBox Component', 
+    value = 'on', fill=false, level = 0, classNameSvg='', iconType = [], marker = false,
+    index, setStatusUpdate, status, children, showBranch = true, ...props }, ref) => {
+
+  const [localStatus, setLocalStatus] = useState<StatusType>('unchecked');
+  const innerRef = useRef<HTMLInputElement>(null);
+  const [checkIcon, setCheckIcon] = useState<string>(CheckBoxEmpty);
+
+  // forward innerRef.current to outer ref
+  useImperativeHandle(ref, () => innerRef.current as HTMLInputElement);
+
+  // if status is changed, update localStatus
+  useEffect(() => {
+    if (status)
+      setLocalStatus(status);
+  }, [status])
+
+  // if localStatus is changed, update parent
+  useEffect(() => {
+    // guard against calling function when localStatus is set to status
+    if (setStatusUpdate && index !== undefined) {
+      setStatusUpdate(localStatus, index);
+    }
+
+    // set appropriate indeterminate state
+    if (innerRef.current) {
+      innerRef.current.indeterminate = localStatus === 'indeterminate';
+    }
+
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [localStatus]);
+
+ useEffect(() => {
+  if (icon) {
+      if (localStatus === 'checked') {
+        if (fill) {
+          if (marker) {
+            setCheckIcon(CheckBoxMarkerFill);
+          } else {
+            setCheckIcon(CheckBoxCheckedFill);
+          }
+        } else {
+          if (marker) {
+            setCheckIcon(CheckBoxMarker);
+          } else {
+            setCheckIcon(CheckBoxChecked);  
+          }        
+        }
+      } else if (localStatus === 'unchecked') {
+        if (fill) {
+          setCheckIcon(CheckBoxEmptyFill);
+        } else {
+          setCheckIcon(CheckBoxEmpty);
+        }
+        
+      } else if (localStatus === 'indeterminate') {
+        if (fill) {
+          setCheckIcon(CheckBoxIndeterminateFill)
+        } else {
+          setCheckIcon(CheckBoxIndeterminate)
+        }
+      } 
+    }
+ }, [fill, icon, localStatus, marker]);
+
+
+  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    if (e.target.checked) {
+      setLocalStatus('checked'); 
+    } else {
+      setLocalStatus('unchecked');
+    }
+  };
+
+  return (
+    <div className={twMerge('flex items-center', className)}>
+      {iconType.map((type, idx) => (
+        <CheckBoxIcon
+          key={idx}
+          type={showBranch ? type : 'blank'}
+          icon={icon} // changes starting margin to fix alignment w/ svg checkboxes
+          classNameLine={twMerge('h-full border',classNameSvg)}
+        />
+      ))}
+
+      <label className={twMerge("inline-flex items-center gap-1 text-base md:text-lg", className)}>
+        <input
+          ref={innerRef}
+          type="checkbox"
+          value={value}
+          checked={localStatus !== 'indeterminate' && localStatus === 'checked' }
+          aria-label={ariaLabel}
+          className={twMerge('', classNameInput, icon && 'hidden')}
+          onChange={handleChange}
+          {...props}
+        />
+        {icon && <img alt={localStatus} src={checkIcon} className='' />}
+        {children} 
+      </label>
+    </div>
+  );
+  }
+);
+
+CheckBox.displayName = 'CheckBox';
+
+/*
+ * type
+ *    sibling       --> a vertical bar leading to the next sibling when there are children between
+ *    sibling-child --> sibling w/ a branch that leads to a child
+ *    child (only)  --> like sibling-child, but does not include bottom portion of vertical bar that leads to sibling
+*/
+interface CheckBoxIconProps {
+  type?: 'sibling' | 'sibling-child' | 'child' | 'blank';
+  color?: string;
+  styles?: string;
+  className?: string;
+  classNameLine?: string;
+  icon?: boolean;
+}
+// https://mediamodifier.com/svg-editor#
+const CheckBoxIcon = ({ color, styles, type = 'sibling', icon = true,
+    className=twMerge('h-7', icon && 'ms-1'), classNameLine='' }: CheckBoxIconProps) => {
+
+  if (type === 'sibling') { // vertical bar
+    return (
+      <svg version="1.1"
+          className={twMerge('size-4', className)}
+          xmlns="http://www.w3.org/2000/svg">
+
+        <line x1="40%" y1="0%" x2="40%" y2="100%" 
+          className={twMerge('stroke-[#a1a6a8]', classNameLine)} />
+      </svg>
+    );
+  } 
+  else if (type === 'sibling-child') {
+    return (
+      <svg version="1.1"
+          className={twMerge('size-4', className)}
+          xmlns="http://www.w3.org/2000/svg">
+
+        <line x1="40%" y1="0%" x2="40%" y2="100%" 
+          className={twMerge('stroke-[#a1a6a8]', classNameLine)} />
+
+        <line x1="40%" y1="50%" x2="100%" y2="50%" 
+          className={twMerge('stroke-[#a1a6a8]', classNameLine)} />
+
+      </svg>
+    );
+  } 
+  else if (type === 'child') {
+    return (
+      <svg version="1.1"
+          className={twMerge('size-4', className)}
+          xmlns="http://www.w3.org/2000/svg">
+
+        <line x1="40%" y1="0%" x2="40%" y2="52%" 
+          className={twMerge('stroke-[#a1a6a8]', classNameLine)} />
+
+        <line x1="38%" y1="50%" x2="100%" y2="50%" 
+          className={twMerge('stroke-[#a1a6a8]', classNameLine)} />
+
+      </svg>
+    );
+  }
+  else if (type === 'blank') {
+    return (
+      <svg version="1.1"
+          className={twMerge('size-4', className)}
+          xmlns="http://www.w3.org/2000/svg">
+      </svg>
+    );
+  }
+};