Feat/date time picker ts (#1694)

* Convert DateTimePicker to TS

* Fix TS error

* migrate date time picker screen to tsx

* Fix typings issues

* Remove redundant import

* ignore usages of useCustomTheme for now

Author: ethanshar

demo/src/screens/componentScreens/DateTimePickerScreen.js renamed to demo/src/screens/componentScreens/DateTimePickerScreen.tsx

@@ -3,15 +3,14 @@ import {ScrollView} from 'react-native';
 import {DateTimePicker, Text, TouchableOpacity, Colors} from 'react-native-ui-lib'; // eslint-disable-line
 
 export default class DateTimePickerScreen extends Component {
-
-  getCustomInputValue = value => {
+  getCustomInputValue = (value: string) => {
     if (!value) {
       return 'Default';
     }
-    return value.includes(new Date().getFullYear() + 1) ? 'Next Year' : value;
+    return value.includes((new Date().getFullYear() + 1).toString()) ? 'Next Year' : value;
   };
 
-  renderCustomInput = (props, toggle) => {
+  renderCustomInput = (props: {value: string}, toggle: (shouldToggle: boolean) => void) => {
     const {value} = props;
     return (
       <TouchableOpacity
@@ -23,7 +22,9 @@ export default class DateTimePickerScreen extends Component {
         }}
       >
         <Text>Valid from</Text>
-        <Text absR color={Colors.primary} text80BO>{this.getCustomInputValue(value)}</Text>
+        <Text absR color={Colors.primary} text80BO>
+          {this.getCustomInputValue(value)}
+        </Text>
       </TouchableOpacity>
     );
   };
@@ -33,6 +34,7 @@ export default class DateTimePickerScreen extends Component {
       <ScrollView style={{padding: 14}}>
         <Text text40>Date Time Picker</Text>
         <DateTimePicker
+          // @ts-expect-error
           containerStyle={{marginVertical: 20}}
           title={'Date'}
           placeholder={'Select a date'}

generatedTypes/index.d.ts

@@ -42,6 +42,7 @@ export {default as Chip, ChipProps} from './src/components/chip';
 export {default as ColorPicker, ColorPickerProps} from './src/components/colorPicker';
 export {default as ColorPalette, ColorPaletteProps} from './src/components/colorPicker/ColorPalette';
 export {default as ColorSwatch, ColorSwatchProps} from './src/components/colorPicker/ColorSwatch';
+export {default as DateTimePicker, DateTimePickerProps} from './src/components/dateTimePicker';
 export {default as Drawer, DrawerProps, DrawerItemProps} from './src/components/drawer';
 export {default as ProgressBar, ProgressBarProps} from './src/components/progressBar';
 export {default as FeatureHighlight, FeatureHighlightProps} from './src/components/featureHighlight';
@@ -111,5 +112,4 @@ export {
 /* All components that are missing either manual or auto generated typings */
 export const AnimatedImage;
 export const AnimatedScanner;
-export const DateTimePicker;
 export const TextField;

generatedTypes/src/components/baseInput/Validators.d.ts

@@ -0,0 +1,8 @@
+declare const validators: {
+    required: (value: string) => boolean;
+    email: (value: string) => boolean;
+    url: (value: string) => boolean;
+    number: (value: string) => boolean;
+    price: (value: string) => boolean;
+};
+export default validators;

generatedTypes/src/components/baseInput/index.d.ts

@@ -0,0 +1,29 @@
+import 'react';
+import { BaseComponent } from '../../commons';
+export default class BaseInput extends BaseComponent {
+    static displayName: string;
+    static propTypes: any;
+    static defaultProps: {
+        validateOnBlur: boolean;
+    };
+    constructor(props: any);
+    componentDidMount(): void;
+    /** Events */
+    onFocus: (...args: any[]) => void;
+    onBlur: (...args: any[]) => void;
+    onChange: (event: any) => void;
+    onChangeText: (text: any) => void;
+    /** Actions */
+    getTypography(): any;
+    hasText(): any;
+    isFocused(): any;
+    focus(): void;
+    blur(): void;
+    clear(): void;
+    validate: any;
+    isRequiredField(): boolean;
+    getRequiredPlaceholder(placeholder: any): any;
+    getErrorMessage(): any;
+    getColor(value: string): string;
+    toggleExpandableModal(...args: any[]): any;
+}

generatedTypes/src/components/dateTimePicker/index.d.ts

@@ -0,0 +1,121 @@
+import React, { Component } from 'react';
+import { StyleProp, ViewStyle } from 'react-native';
+import { BaseComponentInjectedProps } from '../../commons/new';
+import { DialogProps } from '../dialog';
+/**
+ * @description: Date and Time Picker Component that wraps RNDateTimePicker for date and time modes.
+ * @example: https://github.com/wix/react-native-ui-lib/blob/master/demo/src/screens/componentScreens/DateTimePickerScreen.js
+ * @important: DateTimePicker uses a native library. You MUST add and link the native library to both iOS and Android projects.
+ * @extends: TextField, react-native-community/datetimepicker
+ * @extendsLink: https://github.com/react-native-community/react-native-datetimepicker#react-native-datetimepicker
+ * @gif: https://github.com/wix/react-native-ui-lib/blob/master/demo/showcase/DateTimePicker/DateTimePicker_iOS.gif?raw=true, https://github.com/wix/react-native-ui-lib/blob/master/demo/showcase/DateTimePicker/DateTimePicker_Android.gif?raw=true
+ */
+export interface DateTimePickerProps {
+    /**
+     * The type of picker to display ('date' or 'time')
+     */
+    mode?: 'date' | 'time';
+    /**
+     * The initial value to set the picker to. Defaults to device's date / time
+     */
+    value?: Date;
+    /**
+     * The onChange callback
+     */
+    onChange?: (date: Date) => void;
+    /**
+     * The minimum date or time value to use
+     */
+    minimumDate?: Date;
+    /**
+     * The maximum date or time value to use
+     */
+    maximumDate?: Date;
+    /**
+     * The date format for the text display
+     */
+    dateFormat?: string;
+    /**
+     * A callback function to format date
+     */
+    dateFormatter?: (date: Date) => string;
+    /**
+     * The time format for the text display
+     */
+    timeFormat?: string;
+    /**
+     * A callback function to format time
+     */
+    timeFormatter?: (date: Date) => string;
+    /**
+     * Allows changing of the locale of the component (iOS only)
+     */
+    locale?: string;
+    /**
+     * Allows changing of the time picker to a 24 hour format (Android only)
+     */
+    is24Hour?: boolean;
+    /**
+     * The interval at which minutes can be selected. Possible values are: 1, 2, 3, 4, 5, 6, 10, 12, 15, 20, 30 (iOS only)
+     */
+    minuteInterval?: number;
+    /**
+     * Allows changing of the timeZone of the date picker. By default it uses the device's time zone (iOS only)
+     */
+    timeZoneOffsetInMinutes?: number;
+    /**
+     * Props to pass the Dialog component
+     */
+    dialogProps?: DialogProps;
+    /**
+     * style to apply to the iOS dialog header
+     */
+    headerStyle?: StyleProp<ViewStyle>;
+    /**
+     * Render custom input
+     */
+    renderInput?: () => React.ReactElement;
+    /**
+     * Override system theme variant (dark or light mode) used by the date picker.
+     */
+    themeVariant?: 'light' | 'dark';
+    /**
+     * The component testID
+     */
+    testID?: string;
+}
+interface DateTimePickerState {
+    showExpandableOverlay: boolean;
+    prevValue?: Date;
+    value?: Date;
+}
+declare type DateTimePickerPropsInternal = DateTimePickerProps & BaseComponentInjectedProps;
+declare class DateTimePicker extends Component<DateTimePickerPropsInternal, DateTimePickerState> {
+    static displayName: string;
+    static defaultProps: {
+        mode: string;
+        enableErrors: boolean;
+        validateOnBlur: boolean;
+    };
+    chosenDate?: Date;
+    constructor(props: DateTimePickerPropsInternal);
+    static getDerivedStateFromProps(nextProps: DateTimePickerProps, prevState: DateTimePickerState): {
+        prevValue: Date | undefined;
+        value: Date | undefined;
+    } | null;
+    handleChange: (event: any, date: Date) => void;
+    toggleExpandableOverlay: (callback?: (() => void) | undefined) => void;
+    onToggleExpandableModal: (value: boolean) => void;
+    onDonePressed: () => void;
+    getStringValue: () => string | undefined;
+    renderExpandableOverlay: () => JSX.Element;
+    renderHeader(): JSX.Element;
+    renderDateTimePicker(): JSX.Element | null | undefined;
+    renderExpandable: () => JSX.Element | null | undefined;
+    render(): JSX.Element;
+}
+export { DateTimePicker };
+declare const _default: React.ComponentClass<DateTimePickerProps & {
+    useCustomTheme?: boolean | undefined;
+}, any>;
+export default _default;

generatedTypes/src/components/dialog/index.d.ts

@@ -28,7 +28,7 @@ export interface DialogProps extends AlignmentModifiers, RNPartialProps {
     /**
      * The dialog height (default: undefined)
      */
-    height?: string | number;
+    height?: string | number | null;
     /**
      * The direction of the allowed pan (default is DOWN).
      * Types: UP, DOWN, LEFT and RIGHT (using PanningProvider.Directions.###).

generatedTypes/src/components/textField/index.d.ts

@@ -0,0 +1,71 @@
+/// <reference types="react" />
+import BaseInput from '../baseInput';
+/**
+ * @description: A wrapper for TextInput component with extra functionality like floating placeholder and validations (This is an uncontrolled component)
+ * @modifiers: Typography
+ * @extends: TextInput
+ * @extendsLink: https://reactnative.dev/docs/textinput
+ * @gif: https://media.giphy.com/media/xULW8su8Cs5Z9Fq4PS/giphy.gif, https://media.giphy.com/media/3ohc1dhDcLS9FvWLJu/giphy.gif, https://media.giphy.com/media/oNUSOxnHdMP5ZnKYsh/giphy.gif
+ * @example: https://github.com/wix/react-native-ui-lib/blob/master/demo/src/screens/componentScreens/TextFieldScreen/BasicTextFieldScreen.js
+ */
+export default class TextField extends BaseInput {
+    static displayName: string;
+    static propTypes: any;
+    static defaultProps: {
+        enableErrors: boolean;
+        validateOnBlur: boolean;
+    };
+    constructor(props: any);
+    UNSAFE_componentWillReceiveProps(nextProps: any): void;
+    componentDidUpdate(_prevProps: any, prevState: any): void;
+    onPlaceholderLayout: (event: any) => void;
+    /** Actions */
+    generatePropsWarnings(props: any): void;
+    generateStyles(): void;
+    getAccessibilityInfo(): {
+        accessibilityLabel: any;
+        accessibilityState: {
+            disabled: boolean;
+        } | undefined;
+    };
+    toggleExpandableModal: (value: any) => void;
+    updateFloatingPlaceholderState: (withoutAnimation: any) => void;
+    getPlaceholderText: (this: any, placeholder: any, helperText: any) => any;
+    getStateColor(colorProp?: {}): any;
+    getCharCount(): any;
+    setCharCountColor(key: any): void;
+    getCharCountColor(): any;
+    getTopPaddings(): 25 | undefined;
+    getTopErrorsPosition(): {
+        top: number;
+    } | undefined;
+    isDisabled(): boolean;
+    isCounterLimit(): boolean;
+    hasText(value: any): boolean;
+    shouldShowHelperText(): any;
+    shouldFloatOnFocus(): any;
+    shouldFloatPlaceholder(text: any): any;
+    shouldFakePlaceholder(): boolean;
+    shouldShowError(): any;
+    getErrorMessage(): any;
+    shouldShowTopError(): any;
+    shouldDisplayRightButton(): any;
+    shouldRenderTitle(): any;
+    onPressRightButton: () => void;
+    /** Renders */
+    renderPlaceholder(): JSX.Element | undefined;
+    renderPrefix(): JSX.Element | undefined;
+    renderTitle(): JSX.Element | undefined;
+    renderCharCounter(): JSX.Element | undefined;
+    renderError(visible: any): JSX.Element | undefined;
+    renderExpandableModal(): any;
+    renderExpandableInput(): any;
+    renderTextInput(): JSX.Element;
+    renderRightButton(): JSX.Element | undefined;
+    renderRightIcon(): JSX.Element | undefined;
+    render(): JSX.Element;
+    /** Events */
+    onDoneEditingExpandableInput: () => void;
+    onKeyPress: (event: any) => void;
+    onChangeText: (text: any) => void;
+}

src/components/baseInput/Validators.js

@@ -0,0 +1,18 @@
+import _ from 'lodash';
+import {EmailValidator} from 'commons-validator-js';
+
+const urlRegEx =
+  /^(?:(?:(?:https?|ftp):)?\/\/)(?:\S+(?::\S*)?@)?(?:(?!(?:10|127)(?:\.\d{1,3}){3})(?!(?:169\.254|192\.168)(?:\.\d{1,3}){2})(?!172\.(?:1[6-9]|2\d|3[0-1])(?:\.\d{1,3}){2})(?:[1-9]\d?|1\d\d|2[01]\d|22[0-3])(?:\.(?:1?\d{1,2}|2[0-4]\d|25[0-5])){2}(?:\.(?:[1-9]\d?|1\d\d|2[0-4]\d|25[0-4]))|(?:(?:[a-z0-9\u00a1-\uffff][a-z0-9\u00a1-\uffff_-]{0,62})?[a-z0-9\u00a1-\uffff]\.)+(?:[a-z\u00a1-\uffff]{2,}\.?))(?::\d{2,5})?(?:[/?#]\S*)?$/i; //eslint-disable-line
+const decimalNumberRegEx = /^-?\d+[.,]?\d+$/;
+const integerRegEx = /^-?\d*$/; // allows empty string
+const priceRegEx = /^[0-9]{1,9}([.][0-9]{1,2})?$/;
+
+const validators = {
+  required: (value: string) => !_.isEmpty(value),
+  email: (value: string) => new EmailValidator().isValid(value),
+  url: (value: string) => urlRegEx.test(value),
+  number: (value: string) => integerRegEx.test(value) || decimalNumberRegEx.test(value),
+  price: (value: string) => priceRegEx.test(value)
+};
+
+export default validators;

src/components/baseInput/Validators.ts

@@ -1,3 +1,4 @@
+// @ts-nocheck
 import _ from 'lodash';
 import PropTypes from 'prop-types';
 import 'react';
@@ -101,11 +102,11 @@ export default class BaseInput extends BaseComponent {
     }
   };
 
-  onChange = (event) => {
+  onChange = event => {
     _.invoke(this.props, 'onChange', event);
   };
 
-  onChangeText = (text) => {
+  onChangeText = text => {
     _.invoke(this.props, 'onChangeText', text);
     this.setState({value: text});
 
@@ -147,8 +148,7 @@ export default class BaseInput extends BaseComponent {
     if (!validate) {
       return;
     }
-    
-    
+
     let isValid = true;
     const inputValidators = _.isArray(validate) ? validate : [validate];
     let failingValidatorIndex;
@@ -205,7 +205,7 @@ export default class BaseInput extends BaseComponent {
 
   getRequiredPlaceholder(placeholder) {
     const {markRequired} = this.getThemeProps();
-    const shouldDisplayPlaceholderAsRequired = (this.isRequiredField() && markRequired && placeholder);
+    const shouldDisplayPlaceholderAsRequired = this.isRequiredField() && markRequired && placeholder;
 
     if (shouldDisplayPlaceholderAsRequired) {
       return `${placeholder} *`;
@@ -220,15 +220,16 @@ export default class BaseInput extends BaseComponent {
     return propsError || stateError;
   }
 
-  getColor(value) {
+  getColor(value: string) {
     if (this.state.focused) {
       return Colors.grey10;
     } else {
       return _.isEmpty(value) ? Colors.grey40 : Colors.grey10;
     }
   }
 
-  toggleExpandableModal(...args) {
+  toggleExpandableModal(...args: any[]) {
+    // @ts-expect-error
     return this.input.toggleExpandableModal(...args);
   }
 }