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

package/package.json

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

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/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()}