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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-native-ui-lib",
-  "version": "7.38.0-snapshot.6288",
+  "version": "7.38.0-snapshot.6290",
   "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} hitSlop={this.getAccessibleHitSlop()} {...others} ref={forwardedRef}>
+    }, borderRadiusStyle, outlineStyle, style]} activeOpacity={0.6} activeBackgroundColor={this.getActiveBackgroundColor()} onLayout={this.onLayout} onPress={onPress} disabled={disabled} testID={testID} {...others} ref={forwardedRef} hitSlop={this.getAccessibleHitSlop()}>
         {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,7 +117,6 @@ 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,9 +144,6 @@ 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,
@@ -159,7 +156,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} hitSlop={this.getAccessibleHitSlop(this.props.size || DEFAULT_SIZE)}>
+      <TouchableOpacity {...this.getAccessibilityProps()} activeOpacity={1} testID={testID} {...others} style={[this.getBorderStyle(), style, !label && containerStyle]} onPress={this.onPress}>
         {<Animated.View style={[this.styles.container, {
           opacity: this.animationStyle.opacity
         }, {

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

@@ -1,6 +1,21 @@
 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
@@ -21,15 +36,21 @@ 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,6 +8,9 @@ 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
@@ -27,7 +30,8 @@ const ColorPickerDialog = props => {
     accessibilityLabels,
     doneButtonColor,
     previewInputStyle,
-    migrate
+    migrate,
+    colorPickerHeaderProps
   } = props;
   const [keyboardHeight, setKeyboardHeight] = useState(KEYBOARD_HEIGHT);
   const [color, setColor] = useState(Colors.getHSL(initialColor));
@@ -111,7 +115,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} />
+      <ColorPickerDialogHeader accessibilityLabels={accessibilityLabels} valid={valid} onDonePressed={onDonePressed} testID={testID} doneButtonColor={doneButtonColor} onDismiss={onDismiss} colorPickerHeaderProps={colorPickerHeaderProps} />
       <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'> & {
+type HeaderProps = Pick<ColorPickerDialogProps, 'doneButtonColor' | 'accessibilityLabels' | 'testID' | 'colorPickerHeaderProps'> & {
     valid: boolean;
     onDismiss: () => void;
     onDonePressed: () => void;

package/src/components/colorPicker/ColorPickerDialogHeader.js

@@ -13,13 +13,19 @@ const ColorPickerDialogHeader = props => {
     testID,
     doneButtonColor,
     valid,
-    onDonePressed
+    onDonePressed,
+    colorPickerHeaderProps
   } = 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`} />
-      <Button color={doneButtonColor} disabled={!valid} link iconSource={Assets.icons.check} onPress={onDonePressed} accessibilityLabel={_get(accessibilityLabels, 'doneButton')} testID={`${testID}.dialog.done`} />
+    }} 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} />
     </View>;
 };
 export default ColorPickerDialogHeader;

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

@@ -1,6 +1,7 @@
 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;
@@ -42,6 +43,10 @@ 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,6 +124,7 @@ class ColorSwatch extends PureComponent {
       onPress,
       unavailable,
       size = DEFAULT_SIZE,
+      selectedIconSource,
       ...others
     } = this.props;
     const {
@@ -144,7 +145,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={Assets.icons.check} style={{
+      }]} /> : <Animated.Image source={selectedIconSource || Assets.icons.check} style={{
         tintColor,
         opacity: isSelected,
         transform: [{

package/src/components/radioButton/index.js

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

package/src/incubator/slider/Thumb.js

@@ -7,20 +7,13 @@ 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 = DEFAULT_THUMB_HIT_SLOP,
+    hitSlop,
     onSeekStart,
     onSeekEnd,
     start,