@widergy/mobile-ui 1.27.0 → 1.27.1

package/CHANGELOG.md

@@ -1,3 +1,10 @@
+## [1.27.1](https://github.com/widergy/mobile-ui/compare/v1.27.0...v1.27.1) (2024-10-07)
+
+
+### Bug Fixes
+
+* fixes on utcheckbox ([#360](https://github.com/widergy/mobile-ui/issues/360)) ([db36603](https://github.com/widergy/mobile-ui/commit/db3660373bbba349c6b798f46bd91687096ffdc8))
+
 # [1.27.0](https://github.com/widergy/mobile-ui/compare/v1.26.5...v1.27.0) (2024-10-07)
 
 

package/lib/components/CheckList/index.js

@@ -141,4 +141,8 @@ class CheckList extends PureComponent {
 
 CheckList.propTypes = propTypes;
 
+/**
+ * @deprecated The CheckList component is deprecated and will be removed in a future release.
+ * Please use the UTCheckList component instead.
+ */
 export default CheckList;

package/lib/components/Checkbox/index.js

@@ -89,4 +89,8 @@ Checkbox.defaultProps = {
 
 Checkbox.propTypes = propTypes;
 
+/**
+ * @deprecated The Checkbox component is deprecated and will be removed in a future release.
+ * Please use the UTCheckBox component instead.
+ */
 export default withTheme(Checkbox);

package/lib/components/UTBaseInputField/components/IconAdornment/utils.js

@@ -1,7 +1,6 @@
-export const getIconColorProps = (changeOnError, changeOnFocus, colorTheme, error, focused, shade) => {
-  return changeOnError && error
+export const getIconColorProps = (changeOnError, changeOnFocus, colorTheme, error, focused, shade) =>
+  changeOnError && error
     ? { colorTheme: 'error', shade: '04' }
     : changeOnFocus && focused
       ? { colorTheme: 'accent', shade: '04' }
       : { colorTheme: colorTheme || 'gray', shade };
-};

package/lib/components/UTCheckBox/constants.js

@@ -5,3 +5,5 @@ export const SPACING = {
   SMALL: 'small',
   LARGE: 'large'
 };
+
+export const BUTTON_VARIANT = 'button';

package/lib/components/UTCheckBox/index.js

@@ -5,23 +5,24 @@ import { useTheme } from '../../theming';
 import UTFieldLabel from '../UTFieldLabel';
 import UTIcon from '../UTIcon';
 
-import { CHECKED_ICON, INDETERMINATE_ICON } from './constants';
+import { BUTTON_VARIANT, CHECKED_ICON, INDETERMINATE_ICON } from './constants';
 import { propTypes, defaultProps } from './proptypes';
 import { retrieveStyle } from './theme';
 import styles from './styles';
 
 const UTCheckBox = ({
-  checked,
+  value,
+  onChange,
   disabled,
   indeterminate,
   isSimple,
-  onPress,
   required,
   reversed,
   spacing,
   style,
   title,
-  variant
+  variant,
+  withMarkdown
 }) => {
   const theme = useTheme();
   const [pressed, setPressed] = useState(false);
@@ -29,7 +30,7 @@ const UTCheckBox = ({
   const { containerStyles, iconContainerStyles, boxStyles, pressableStyles, titleStyles } = useMemo(
     () =>
       retrieveStyle({
-        checked,
+        checked: value,
         disabled,
         indeterminate,
         pressed,
@@ -39,33 +40,36 @@ const UTCheckBox = ({
         theme,
         variant
       }),
-    [checked, disabled, indeterminate, reversed, spacing, style, theme, variant, pressed]
+    [value, disabled, indeterminate, reversed, spacing, style, theme, variant, pressed]
   );
 
   const iconName = useMemo(
-    () => (indeterminate ? INDETERMINATE_ICON : checked ? CHECKED_ICON : ''),
-    [indeterminate, checked]
+    () => (indeterminate ? INDETERMINATE_ICON : value ? CHECKED_ICON : ''),
+    [indeterminate, value]
   );
 
   const handlePressIn = useCallback(() => setPressed(true), []);
   const handlePressOut = useCallback(() => setPressed(false), []);
 
+  const handlePress = useCallback(() => {
+    if (!disabled && onChange) {
+      onChange(!value);
+    }
+  }, [disabled, onChange, value]);
+
+  const shouldHighlightLabel = value && variant === BUTTON_VARIANT;
+
   return (
     <Pressable
       style={pressableStyles}
       disabled={disabled}
-      onPress={onPress}
+      onPress={handlePress}
       onPressIn={handlePressIn}
       onPressOut={handlePressOut}
     >
       <View style={containerStyles}>
         {isSimple ? (
-          <UTIcon
-            name="IconCheck"
-            shade="04"
-            colorTheme="accent"
-            style={checked ? undefined : styles.hidden}
-          />
+          <UTIcon name="IconCheck" shade="04" colorTheme="accent" style={value ? undefined : styles.hidden} />
         ) : (
           <View style={boxStyles}>
             <View style={iconContainerStyles}>
@@ -73,7 +77,12 @@ const UTCheckBox = ({
             </View>
           </View>
         )}
-        <UTFieldLabel colorTheme={checked ? 'accent' : 'dark'} required={required} style={titleStyles}>
+        <UTFieldLabel
+          colorTheme={shouldHighlightLabel ? 'accent' : 'dark'}
+          required={required}
+          style={titleStyles}
+          withMarkdown={withMarkdown}
+        >
           {title}
         </UTFieldLabel>
       </View>

package/lib/components/UTCheckBox/theme.js

@@ -1,6 +1,4 @@
-import { BUTTON_VARIANT } from '../UTCheckList/constants';
-
-import { SPACING } from './constants';
+import { BUTTON_VARIANT, SPACING } from './constants';
 
 const NORMAL_SPACING = 16;
 const SMALL_SPACING = 8;

package/lib/components/UTCheckList/constants.js

@@ -2,5 +2,3 @@ export const SPACING = {
   SMALL: 'small',
   LARGE: 'large'
 };
-
-export const BUTTON_VARIANT = 'button';

package/lib/components/UTCheckList/index.js

@@ -1,6 +1,7 @@
 import React, { useEffect, useCallback, useMemo } from 'react';
 import { View } from 'react-native';
 
+import { BUTTON_VARIANT } from '../UTCheckBox/constants';
 import { formatErrorToValidation } from '../UTValidation/utils';
 import UTCheckBox from '../UTCheckBox';
 import UTFieldLabel from '../UTFieldLabel';
@@ -9,7 +10,7 @@ import UTValidation from '../UTValidation';
 import { keyExtractor, isChecked, convertIfIsString, getPropValueBasedOnVariant } from './utils';
 import styles from './styles';
 import { defaultProps, propTypes } from './proptypes';
-import { BUTTON_VARIANT, SPACING } from './constants';
+import { SPACING } from './constants';
 
 const UTCheckList = ({
   error,
@@ -54,7 +55,7 @@ const UTCheckList = ({
   );
 
   const handleChange = useCallback(
-    receivedValue => () => {
+    receivedValue => {
       if (isSimple) {
         onChange([receivedValue]);
       } else {
@@ -89,10 +90,10 @@ const UTCheckList = ({
       >
         {showSelectAll && !isSimple && (
           <UTCheckBox
-            checked={areAllSelected}
+            value={areAllSelected}
             indeterminate={isIndeterminate}
             title={selectAllLabel}
-            onPress={handleCheckAll}
+            onChange={handleCheckAll}
             reversed={reversedBasedOnVariant}
             spacing={horizontalSpacing}
             style={style.selectAll}
@@ -102,11 +103,11 @@ const UTCheckList = ({
         {options?.map((item, index) => (
           <UTCheckBox
             isSimple={isSimple}
-            checked={isChecked(item, value)}
+            value={isChecked(item, value)}
             disabled={item.disabled}
             key={keyExtractor(item, index)}
             title={item.label}
-            onPress={handleChange(item.value)}
+            onChange={() => handleChange(item.value)}
             reversed={reversedBasedOnVariant}
             spacing={horizontalSpacing}
             style={style.item}

package/lib/components/UTCheckList/styles.js

@@ -11,7 +11,8 @@ export default StyleSheet.create({
   },
   checkboxesContainer: {
     alignSelf: 'flex-start',
-    rowGap: SPACING.LARGE
+    rowGap: SPACING.LARGE,
+    width: '100%'
   },
   container: {
     rowGap: SPACING.LARGE

package/lib/components/UTCheckList/utils.js

@@ -1,11 +1,11 @@
 import { isString } from 'lodash';
 
-import { BUTTON_VARIANT } from './constants';
+import { BUTTON_VARIANT } from '../UTCheckBox/constants';
 
 export const keyExtractor = (_, index) => `CB-${index}`;
 
 export const isChecked = (item, inputValue) =>
-  !!inputValue?.find(elem => elem === item.value) || (item.disabled && item.checked);
+  (inputValue && !!inputValue?.find(elem => elem === item.value)) || (item.disabled && item.checked);
 
 export const convertIfIsString = value =>
   isString(value) ? (value.length === 0 ? [] : JSON.parse(value.replace(/'/g, '"'))) : value;

package/lib/components/UTFieldLabel/index.js

@@ -7,9 +7,9 @@ import UTLabel from '../UTLabel';
 import { REQUIRED_LABEL } from './constants';
 import styles from './styles';
 
-const UTFieldLabel = ({ children, colorTheme, required, style, variant, weight }) => (
+const UTFieldLabel = ({ children, colorTheme, required, style, variant, weight, withMarkdown }) => (
   <View style={[styles.label, style]}>
-    <UTLabel colorTheme={colorTheme} variant={variant}>
+    <UTLabel colorTheme={colorTheme} variant={variant} withMarkdown={withMarkdown}>
       {children}
     </UTLabel>
     {required && (
@@ -24,7 +24,8 @@ UTFieldLabel.propTypes = {
   colorTheme: string,
   required: bool,
   variant: string,
-  weight: string
+  weight: string,
+  withMarkdown: bool
 };
 
 export default UTFieldLabel;

package/package.json

@@ -2,7 +2,7 @@
   "name": "@widergy/mobile-ui",
   "description": "Widergy Mobile Components",
   "author": "widergy",
-  "version": "1.27.0",
+  "version": "1.27.1",
   "repository": "https://github.com/widergy/mobile-ui.git",
   "main": "lib/index.js",
   "files": [