react-native-ui-lib 7.38.0-snapshot.6290 → 7.38.0-snapshot.6291

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-native-ui-lib",
-  "version": "7.38.0-snapshot.6290",
+  "version": "7.38.0-snapshot.6291",
   "main": "src/index.js",
   "types": "src/index.d.ts",
   "author": "Ethan Sharabi <ethan.shar@gmail.com>",

package/src/components/button/index.js

@@ -387,7 +387,7 @@ class Button extends PureComponent {
     const borderRadiusStyle = this.getBorderRadiusStyle();
     return <TouchableOpacity row centerV style={[this.styles.container, animateLayout && this.getAnimationDirectionStyle(), containerSizeStyle, this.isLink && this.styles.innerContainerLink, shadowStyle, margins, paddings, {
       backgroundColor
-    }, borderRadiusStyle, outlineStyle, style]} activeOpacity={0.6} activeBackgroundColor={this.getActiveBackgroundColor()} onLayout={this.onLayout} onPress={onPress} disabled={disabled} testID={testID} {...others} ref={forwardedRef} hitSlop={this.getAccessibleHitSlop()}>
+    }, borderRadiusStyle, outlineStyle, style]} activeOpacity={0.6} activeBackgroundColor={this.getActiveBackgroundColor()} onLayout={this.onLayout} onPress={onPress} disabled={disabled} testID={testID} hitSlop={this.getAccessibleHitSlop()} {...others} ref={forwardedRef}>
         {this.props.children}
         {this.props.iconOnRight ? this.renderLabel() : this.renderIcon()}
         {this.props.iconOnRight ? this.renderIcon() : this.renderLabel()}

package/src/components/checkbox/index.d.ts

@@ -117,6 +117,7 @@ declare class Checkbox extends Component<CheckboxProps, CheckboxState> {
     getLabelStyle: () => {
         color: string;
     };
+    getAccessibleHitSlop(size: number): number;
     renderCheckbox(): React.JSX.Element;
     render(): React.JSX.Element;
     validate: () => void;

package/src/components/checkbox/index.js

@@ -144,6 +144,9 @@ class Checkbox extends Component {
       color: this.props.disabled ? Colors.$textDisabled : this.state.showError ? Colors.$textDangerLight : Colors.$textDefault
     };
   };
+  getAccessibleHitSlop(size) {
+    return Math.max(0, (48 - size) / 2);
+  }
   renderCheckbox() {
     const {
       selectedIcon,
@@ -156,7 +159,7 @@ class Checkbox extends Component {
     } = this.props;
     return (
       //@ts-ignore
-      <TouchableOpacity {...this.getAccessibilityProps()} activeOpacity={1} testID={testID} {...others} style={[this.getBorderStyle(), style, !label && containerStyle]} onPress={this.onPress}>
+      <TouchableOpacity {...this.getAccessibilityProps()} activeOpacity={1} testID={testID} {...others} style={[this.getBorderStyle(), style, !label && containerStyle]} onPress={this.onPress} hitSlop={this.getAccessibleHitSlop(this.props.size || DEFAULT_SIZE)}>
         {<Animated.View style={[this.styles.container, {
           opacity: this.animationStyle.opacity
         }, {

package/src/components/colorPicker/ColorPickerDialog.d.ts

@@ -1,21 +1,6 @@
 import React from 'react';
 import { StyleProp, ViewStyle } from 'react-native';
 import { DialogProps } from '../../incubator/dialog';
-import { ButtonProps } from '../button';
-type ColorPickerHeaderButtonProps = {
-    /**
-     * Ok (v) button color
-     */
-    doneButtonColor?: string;
-    /**
-     * Done button props
-     */
-    doneButtonProps?: Pick<ButtonProps, 'iconSource' | 'iconStyle'>;
-    /**
-     * Dismiss button props
-     */
-    dismissButtonProps?: Pick<ButtonProps, 'iconSource' | 'iconStyle'>;
-};
 export interface ColorPickerDialogProps extends DialogProps {
     /**
      * The initial color to pass the picker dialog
@@ -36,21 +21,15 @@ export interface ColorPickerDialogProps extends DialogProps {
     /**
      * Accessibility labels as an object of strings, ex. {addButton: 'add custom color using hex code', dismissButton: 'dismiss', doneButton: 'done', input: 'custom hex color code'}
      */
+    /**
+     * Ok (v) button color
+     */
+    doneButtonColor?: string;
     accessibilityLabels?: {
         dismissButton?: string;
         doneButton?: string;
         input?: string;
     };
-    /**
-     * @deprecated
-     * Ok (v) button color
-     * Pass doneButtonColor via colorPickerHeaderProps
-     */
-    doneButtonColor?: string;
-    /**
-     * Color Picker header button props, done and dismiss button customize props
-     */
-    colorPickerHeaderProps?: ColorPickerHeaderButtonProps;
     /**
      * Whether to use the new Slider implementation using Reanimated
      */

package/src/components/colorPicker/ColorPickerDialog.js

@@ -8,9 +8,6 @@ import { getColorValue, getValidColorString, getTextColor, BORDER_RADIUS } from
 import ColorPickerDialogHeader from "./ColorPickerDialogHeader";
 import ColorPickerPreview from "./ColorPickerPreview";
 import ColorPickerDialogSliders from "./ColorPickerDialogSliders";
-
-// TODO: deprecate doneButtonColor prop
-
 const KEYBOARD_HEIGHT = 216;
 const MODAL_PROPS = {
   supportedOrientations: ['portrait', 'landscape', 'landscape-left', 'landscape-right'] // iOS only
@@ -30,8 +27,7 @@ const ColorPickerDialog = props => {
     accessibilityLabels,
     doneButtonColor,
     previewInputStyle,
-    migrate,
-    colorPickerHeaderProps
+    migrate
   } = props;
   const [keyboardHeight, setKeyboardHeight] = useState(KEYBOARD_HEIGHT);
   const [color, setColor] = useState(Colors.getHSL(initialColor));
@@ -115,7 +111,7 @@ const ColorPickerDialog = props => {
   }, []);
   return <Dialog visible={visible} //TODO: pass all Dialog props instead
   width="100%" bottom centerH onDismiss={onDismiss} containerStyle={styles.dialog} testID={`${testID}.dialog`} modalProps={MODAL_PROPS} {...dialogProps}>
-      <ColorPickerDialogHeader accessibilityLabels={accessibilityLabels} valid={valid} onDonePressed={onDonePressed} testID={testID} doneButtonColor={doneButtonColor} onDismiss={onDismiss} colorPickerHeaderProps={colorPickerHeaderProps} />
+      <ColorPickerDialogHeader accessibilityLabels={accessibilityLabels} valid={valid} onDonePressed={onDonePressed} testID={testID} doneButtonColor={doneButtonColor} onDismiss={onDismiss} />
       <ColorPickerPreview color={color} text={text} valid={valid} accessibilityLabels={accessibilityLabels} previewInputStyle={previewInputStyle} testID={testID} onFocus={onFocus} onChangeText={onChangeText} />
       <ColorPickerDialogSliders keyboardHeight={keyboardHeight} color={color} onSliderValueChange={updateColor} migrate={migrate} />
     </Dialog>;

package/src/components/colorPicker/ColorPickerDialogHeader.d.ts

@@ -1,6 +1,6 @@
 import React from 'react';
 import { ColorPickerDialogProps } from './ColorPickerDialog';
-type HeaderProps = Pick<ColorPickerDialogProps, 'doneButtonColor' | 'accessibilityLabels' | 'testID' | 'colorPickerHeaderProps'> & {
+type HeaderProps = Pick<ColorPickerDialogProps, 'doneButtonColor' | 'accessibilityLabels' | 'testID'> & {
     valid: boolean;
     onDismiss: () => void;
     onDonePressed: () => void;

package/src/components/colorPicker/ColorPickerDialogHeader.js

@@ -13,19 +13,13 @@ const ColorPickerDialogHeader = props => {
     testID,
     doneButtonColor,
     valid,
-    onDonePressed,
-    colorPickerHeaderProps
+    onDonePressed
   } = props;
-  const {
-    doneButtonProps,
-    dismissButtonProps,
-    doneButtonColor: doneButtonHeaderColorProp
-  } = colorPickerHeaderProps || {};
   return <View row spread bg-$backgroundDefault paddingH-20 style={styles.header}>
       <Button link iconSource={Assets.icons.x} iconStyle={{
       tintColor: Colors.$iconDefault
-    }} onPress={onDismiss} accessibilityLabel={_get(accessibilityLabels, 'dismissButton')} testID={`${testID}.dialog.cancel`} {...dismissButtonProps} />
-      <Button color={doneButtonColor || doneButtonHeaderColorProp} disabled={!valid} link iconSource={Assets.icons.check} onPress={onDonePressed} accessibilityLabel={_get(accessibilityLabels, 'doneButton')} testID={`${testID}.dialog.done`} {...doneButtonProps} />
+    }} onPress={onDismiss} accessibilityLabel={_get(accessibilityLabels, 'dismissButton')} testID={`${testID}.dialog.cancel`} />
+      <Button color={doneButtonColor} disabled={!valid} link iconSource={Assets.icons.check} onPress={onDonePressed} accessibilityLabel={_get(accessibilityLabels, 'doneButton')} testID={`${testID}.dialog.done`} />
     </View>;
 };
 export default ColorPickerDialogHeader;

package/src/components/colorSwatch/index.d.ts

@@ -1,7 +1,6 @@
 import React from 'react';
 import { StyleProp, ViewStyle } from 'react-native';
 import { ColorsModifiers } from '../../commons/new';
-import { ImageProps } from '../image';
 export interface ColorInfo {
     index?: number;
     tintColor?: string;
@@ -43,10 +42,6 @@ interface Props {
      * Color swatch size
      */
     size?: number;
-    /**
-     * Icon image source
-     */
-    selectedIconSource?: ImageProps['source'];
 }
 export type ColorSwatchProps = Props & ColorsModifiers;
 export declare const SWATCH_MARGIN = 12;

package/src/components/colorSwatch/index.js

@@ -124,7 +124,6 @@ class ColorSwatch extends PureComponent {
       onPress,
       unavailable,
       size = DEFAULT_SIZE,
-      selectedIconSource,
       ...others
     } = this.props;
     const {
@@ -145,7 +144,7 @@ class ColorSwatch extends PureComponent {
         {Colors.isTransparent(this.color) && <Image source={transparentImage} style={this.styles.transparentImage} resizeMode={'cover'} />}
         {unavailable ? <View style={[this.styles.unavailable, {
         backgroundColor: tintColor
-      }]} /> : <Animated.Image source={selectedIconSource || Assets.icons.check} style={{
+      }]} /> : <Animated.Image source={Assets.icons.check} style={{
         tintColor,
         opacity: isSelected,
         transform: [{

package/src/components/hint/hooks/useHintLayout.js

@@ -1,29 +1,13 @@
 import _isEqual from "lodash/isEqual";
-import { useState, useCallback, useRef, useEffect } from 'react';
-import { SafeAreaInsetsManager } from 'uilib-native';
-import { Constants } from "../../../commons/new";
+import { useState, useCallback, useRef } from 'react';
 export default function useHintLayout({
   onBackgroundPress,
   targetFrame
 }) {
   const [targetLayoutState, setTargetLayout] = useState(targetFrame);
-  const [targetLayoutInWindowState, setTargetLayoutInWindow] = useState();
+  const [targetLayoutInWindowState, setTargetLayoutInWindow] = useState(targetFrame);
   const [hintMessageWidth, setHintMessageWidth] = useState();
   const targetRef = useRef(null);
-  useEffect(() => {
-    if (targetFrame) {
-      if (!onBackgroundPress) {
-        setTargetLayoutInWindow(targetFrame);
-      } else {
-        SafeAreaInsetsManager.getSafeAreaInsets().then(insets => {
-          setTargetLayoutInWindow({
-            ...targetFrame,
-            y: targetFrame.y + (insets?.top ?? 0) + Constants.getSafeAreaInsets().top
-          });
-        });
-      }
-    }
-  }, []);
   const onTargetLayout = useCallback(({
     nativeEvent: {
       layout

package/src/components/radioButton/index.js

@@ -179,6 +179,13 @@ class RadioButton extends PureComponent {
       }]} />
       </View>;
   }
+  getAccessibleHitSlop(size) {
+    const verticalPadding = Math.max(0, (48 - size) / 2);
+    return {
+      top: verticalPadding,
+      bottom: verticalPadding
+    };
+  }
   render() {
     const {
       onPress,
@@ -190,7 +197,7 @@ class RadioButton extends PureComponent {
     const Container = onPress || onValueChange ? TouchableOpacity : View;
     return (
       // @ts-ignore
-      <Container row centerV activeOpacity={1} {...others} style={containerStyle} onPress={this.onPress} {...this.getAccessibilityProps()}>
+      <Container row centerV activeOpacity={1} {...others} style={containerStyle} onPress={this.onPress} {...this.getAccessibilityProps()} hitSlop={this.getAccessibleHitSlop(this.props.size || DEFAULT_SIZE)}>
         {!contentOnLeft && this.renderButton()}
         {this.props.iconOnRight ? this.renderLabel() : this.renderIcon()}
         {this.props.iconOnRight ? this.renderIcon() : this.renderLabel()}