react-native-ui-lib 8.3.3 → 8.3.4-snapshot.7783

package/src/components/maskedInput/new.js

@@ -1,85 +0,0 @@
-import _isFunction from "lodash/isFunction";
-import _identity from "lodash/identity";
-import React, { useCallback, useEffect, useRef, useState, useImperativeHandle, forwardRef } from 'react';
-import { StyleSheet, Keyboard, TextInput } from 'react-native';
-import View from "../view";
-import Text from "../text";
-import TouchableOpacity from "../touchableOpacity";
-/**
- * @description: Mask Input to create custom looking inputs with custom formats
- * @gif: https://camo.githubusercontent.com/61eedb65e968845d5eac713dcd21a69691571fb1/68747470733a2f2f6d656469612e67697068792e636f6d2f6d656469612f4b5a5a7446666f486f454b334b2f67697068792e676966
- * @example: https://github.com/wix/react-native-ui-lib/blob/master/demo/src/screens/componentScreens/MaskedInputScreen.tsx
- */
-function MaskedInput(props, ref) {
-  const {
-    initialValue,
-    formatter = _identity,
-    containerStyle,
-    renderMaskedText,
-    onChangeText,
-    ...others
-  } = props;
-  const [value, setValue] = useState(initialValue);
-  const inputRef = useRef();
-  const keyboardDidHideListener = useRef();
-  useImperativeHandle(ref, () => {
-    return {
-      isFocused: () => inputRef.current?.isFocused(),
-      focus,
-      blur: () => inputRef.current?.blur(),
-      clear: () => {
-        inputRef.current?.clear();
-        setValue('');
-        // NOTE: This fixes an RN issue - when triggering imperative clear method, it doesn't call onChangeText
-        onChangeText?.('');
-      }
-    };
-  });
-  useEffect(() => {
-    if (initialValue !== value) {
-      setValue(initialValue);
-    }
-  }, [initialValue]);
-  useEffect(() => {
-    keyboardDidHideListener.current = Keyboard.addListener('keyboardDidHide', () => {
-      if (inputRef.current?.isFocused()) {
-        inputRef.current?.blur();
-      }
-    });
-    return () => keyboardDidHideListener.current.remove();
-  }, []);
-  const _onChangeText = useCallback(value => {
-    const formattedValue = formatter(value) ?? '';
-    setValue(formattedValue);
-    onChangeText?.(formattedValue);
-  }, [onChangeText, formatter]);
-  const focus = useCallback(() => {
-    inputRef.current?.focus();
-  }, []);
-  const _renderMaskedText = () => {
-    if (_isFunction(renderMaskedText)) {
-      return renderMaskedText(value);
-    }
-    return <Text>{value}</Text>;
-  };
-  return <TouchableOpacity style={containerStyle} activeOpacity={1} onPress={focus}>
-      <TextInput {...others} value={value}
-    // @ts-expect-error
-    ref={inputRef} style={styles.hiddenInput} enableErrors={false} hideUnderline placeholder="" caretHidden multiline={false} onChangeText={_onChangeText} />
-      <View style={styles.maskedInputWrapper}>{_renderMaskedText()}</View>
-    </TouchableOpacity>;
-}
-const styles = StyleSheet.create({
-  hiddenInput: {
-    ...StyleSheet.absoluteFillObject,
-    zIndex: 1,
-    color: 'transparent',
-    backgroundColor: 'transparent',
-    height: undefined
-  },
-  maskedInputWrapper: {
-    zIndex: 0
-  }
-});
-MaskedInput.displayName = 'MaskedInput';
-export default forwardRef(MaskedInput);

package/src/components/maskedInput/old.js

@@ -1,95 +0,0 @@
-import _ from 'lodash';
-import PropTypes from 'prop-types';
-import React from 'react';
-import {StyleSheet, Keyboard} from 'react-native';
-import {ViewPropTypes} from 'deprecated-react-native-prop-types';
-import BaseInput from '../baseInput';
-import TextField from '../textFieldOld';
-import View from '../view';
-import Text from '../text';
-import TouchableOpacity from '../touchableOpacity';
-
-/**
- * @description: Mask Input to create custom looking inputs with custom formats
- * @gif: https://camo.githubusercontent.com/61eedb65e968845d5eac713dcd21a69691571fb1/68747470733a2f2f6d656469612e67697068792e636f6d2f6d656469612f4b5a5a7446666f486f454b334b2f67697068792e676966
- * @example: https://github.com/wix/react-native-ui-lib/blob/master/demo/src/screens/componentScreens/MaskedInputScreen.tsx
- */
-export default class MaskedInput extends BaseInput {
-  static displayName = 'MaskedInput';
-  static propTypes = {
-    ...TextField.propTypes,
-    /**
-     * callback for rendering the custom input out of the value returns from the actual input
-     */
-    renderMaskedText: PropTypes.elementType.isRequired,
-    /**
-     * container style for the masked input container
-     */
-    containerStyle: ViewPropTypes.style
-  };
-
-  componentDidMount() {
-    this.keyboardDidHideListener = Keyboard.addListener('keyboardDidHide', () => {
-      if (_.invoke(this, 'isFocused')) {
-        _.invoke(this, 'blur');
-      }
-    });
-  }
-
-  componentWillUnmount() {
-    this.keyboardDidHideListener.remove();
-  }
-
-  clear() {
-    this.setState({value: ''});
-    this.input.clear();
-  }
-
-  renderMaskedText() {
-    const {renderMaskedText} = this.props;
-    const {value} = this.state;
-
-    if (_.isFunction(renderMaskedText)) {
-      return renderMaskedText(value);
-    }
-    return <Text>{value}</Text>;
-  }
-
-  render() {
-    // eslint-disable-next-line no-unused-vars, @typescript-eslint/no-unused-vars
-    const {containerStyle, style} = this.props;
-
-    return (
-      <TouchableOpacity style={containerStyle} activeOpacity={1} onPress={() => this.input.focus()}>
-        <TextField
-          ref={r => (this.input = r)}
-          containerStyle={styles.hiddenInputContainer}
-          style={styles.hiddenInput}
-          enableErrors={false}
-          hideUnderline
-          placeholder=""
-          {...this.props}
-          caretHidden
-          multiline={false}
-          onChangeText={this.onChangeText}
-        />
-        <View style={styles.maskedInputWrapper}>{this.renderMaskedText()}</View>
-      </TouchableOpacity>
-    );
-  }
-}
-
-const styles = StyleSheet.create({
-  hiddenInputContainer: {
-    ...StyleSheet.absoluteFillObject,
-    zIndex: 1
-  },
-  hiddenInput: {
-    color: 'transparent',
-    backgroundColor: 'transparent',
-    height: undefined
-  },
-  maskedInputWrapper: {
-    zIndex: 0
-  }
-});

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

@@ -1,71 +0,0 @@
-import React from '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(): React.JSX.Element | undefined;
-    renderPrefix(): React.JSX.Element | undefined;
-    renderTitle(): React.JSX.Element | undefined;
-    renderCharCounter(): React.JSX.Element | undefined;
-    renderError(visible: any): React.JSX.Element | undefined;
-    renderExpandableModal(): any;
-    renderExpandableInput(): any;
-    renderTextInput(): React.JSX.Element;
-    renderRightButton(): React.JSX.Element | undefined;
-    renderRightIcon(): React.JSX.Element | undefined;
-    render(): React.JSX.Element;
-    /** Events */
-    onDoneEditingExpandableInput: () => void;
-    onKeyPress: (event: any) => void;
-    onChangeText: (text: any) => void;
-}