react-native-ui-lib 7.38.0-snapshot.6285 → 7.38.0-snapshot.6288

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-native-ui-lib",
-  "version": "7.38.0-snapshot.6285",
+  "version": "7.38.0-snapshot.6288",
   "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/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()}

package/src/incubator/slider/Thumb.js

@@ -7,13 +7,20 @@ import View from "../../components/view";
 import { Constants } from "../../commons/new";
 const SHADOW_RADIUS = 4;
 const THUMB_SIZE = 24;
+const THUMB_ACCESSIBLE_HITSLOP = Math.max(0, 48 - THUMB_SIZE) / 2;
+const DEFAULT_THUMB_HIT_SLOP = {
+  top: THUMB_ACCESSIBLE_HITSLOP,
+  bottom: THUMB_ACCESSIBLE_HITSLOP,
+  left: THUMB_ACCESSIBLE_HITSLOP,
+  right: THUMB_ACCESSIBLE_HITSLOP
+};
 const Thumb = props => {
   const {
     disabled,
     disableActiveStyling,
     activeStyle,
     defaultStyle,
-    hitSlop,
+    hitSlop = DEFAULT_THUMB_HIT_SLOP,
     onSeekStart,
     onSeekEnd,
     start,