From 917df3689e779cf12ef9e948ad3ac94920ec1cbd Mon Sep 17 00:00:00 2001 From: Ethan Sharabi <1780255+ethanshar@users.noreply.github.com> Date: Wed, 15 Feb 2023 11:43:06 +0200 Subject: [PATCH 1/5] Enable text field migration --- src/components/textField/TextFieldMigrator.tsx | 8 +++++--- src/incubator/index.ts | 2 +- src/index.ts | 1 + 3 files changed, 7 insertions(+), 4 deletions(-) diff --git a/src/components/textField/TextFieldMigrator.tsx b/src/components/textField/TextFieldMigrator.tsx index 4f1718a136..faa5ccb7bd 100644 --- a/src/components/textField/TextFieldMigrator.tsx +++ b/src/components/textField/TextFieldMigrator.tsx @@ -2,10 +2,12 @@ import React, {useEffect, forwardRef} from 'react'; import {mapKeys} from 'lodash'; import hoistStatics from 'hoist-non-react-statics'; import OldTextField from './index'; -import NewTextField, {TextFieldStaticMembers} from '../../incubator/TextField'; +import NewTextField, {TextFieldStaticMembers, TextFieldProps} from '../../incubator/TextField'; import {LogService} from '../../services'; -export interface TextFieldMigratorComponent extends React.ForwardRefExoticComponent, TextFieldStaticMembers {} +export interface TextFieldMigratorComponent + extends React.ForwardRefExoticComponent, + TextFieldStaticMembers {} const propsMigrationMap: Dictionary = { /* LABEL */ @@ -55,7 +57,7 @@ function migrateProps(props: any) { return fixedProps; } -const TextFieldMigrator = forwardRef(({migrate = false, customWarning, ...props}: any, ref) => { +const TextFieldMigrator = forwardRef(({migrate = true, customWarning, ...props}: any, ref) => { useEffect(() => { if (!migrate) { LogService.warn(customWarning ?? diff --git a/src/incubator/index.ts b/src/incubator/index.ts index 5da84aa4ed..aca74f1654 100644 --- a/src/incubator/index.ts +++ b/src/incubator/index.ts @@ -2,7 +2,7 @@ export {default as ChipsInput, ChipsInputProps, ChipsInputChangeReason, ChipsInputChipProps} from './ChipsInput'; export {default as ExpandableOverlay} from './expandableOverlay'; // @ts-ignore -export {default as TextField, TextFieldProps, FieldContextType} from './TextField'; +export {default as TextField, TextFieldProps, FieldContextType, TextFieldMethods} from './TextField'; export {default as Toast, ToastProps, ToastPresets} from './toast'; export {default as TouchableOpacity, TouchableOpacityProps} from './TouchableOpacity'; export {default as WheelPicker, WheelPickerProps, WheelPickerItemProps} from './WheelPicker'; diff --git a/src/index.ts b/src/index.ts index 634fd2982d..d26379ac03 100644 --- a/src/index.ts +++ b/src/index.ts @@ -28,6 +28,7 @@ export {BaseComponent, PureBaseComponent} from './commons'; import * as Incubator from './incubator'; export { TextFieldProps, + TextFieldMethods, FieldContextType, ToastProps, ToastPresets, From 0b5dcd9726d29bbcf5124076f7016ba428ea6667 Mon Sep 17 00:00:00 2001 From: Ethan Sharabi <1780255+ethanshar@users.noreply.github.com> Date: Wed, 15 Feb 2023 15:35:23 +0200 Subject: [PATCH 2/5] Ignore/fix TS errors --- src/components/picker/index.tsx | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/src/components/picker/index.tsx b/src/components/picker/index.tsx index a06de5d1b3..edd0d27693 100644 --- a/src/components/picker/index.tsx +++ b/src/components/picker/index.tsx @@ -290,12 +290,14 @@ const Picker = React.forwardRef((props: PickerProps, ref) => { ) : ( { value={label} selection={Constants.isAndroid ? {start: 0} : undefined} /* Note: Disable TextField expandable feature */ - topBarProps={undefined} + // topBarProps={undefined} > {renderPickerInnerInput()} From 93429a52016750785afd7ea3a1621d3f7849e18a Mon Sep 17 00:00:00 2001 From: Ethan Sharabi <1780255+ethanshar@users.noreply.github.com> Date: Wed, 15 Feb 2023 17:36:46 +0200 Subject: [PATCH 3/5] Move incubator TextField example screen to be the official screen --- demo/src/index.js | 9 +- demo/src/screens/MenuStructure.js | 1 - .../TextFieldScreen.tsx} | 9 +- .../TextFieldScreen/BasicTextFieldScreen.js | 120 ------- .../TextFieldScreen/CustomInputsScreen.js | 48 --- .../TextFieldScreen/InputValidationsScreen.js | 102 ------ .../TextFieldScreen/InputsScreen.js | 324 ------------------ .../componentScreens/TextFieldScreen/index.js | 46 --- demo/src/screens/incubatorScreens/index.js | 1 - 9 files changed, 8 insertions(+), 652 deletions(-) rename demo/src/screens/{incubatorScreens/IncubatorTextFieldScreen.tsx => componentScreens/TextFieldScreen.tsx} (97%) delete mode 100644 demo/src/screens/componentScreens/TextFieldScreen/BasicTextFieldScreen.js delete mode 100644 demo/src/screens/componentScreens/TextFieldScreen/CustomInputsScreen.js delete mode 100644 demo/src/screens/componentScreens/TextFieldScreen/InputValidationsScreen.js delete mode 100644 demo/src/screens/componentScreens/TextFieldScreen/InputsScreen.js delete mode 100644 demo/src/screens/componentScreens/TextFieldScreen/index.js diff --git a/demo/src/index.js b/demo/src/index.js index 32942dbffe..5480f34067 100644 --- a/demo/src/index.js +++ b/demo/src/index.js @@ -130,9 +130,9 @@ module.exports = { return require('./screens/componentScreens/TextScreen').default; }, // TODO: fix Expo issues (navigation) before un-commenting - // get TextFieldScreen() { - // return require('./screens/componentScreens/TextFieldScreen').default; - // }, + get TextFieldScreen() { + return require('./screens/componentScreens/TextFieldScreen').default; + }, get TourScreen() { return require('./screens/componentScreens/TourScreen').default; }, @@ -215,9 +215,6 @@ module.exports = { return require('./screens/componentScreens/ProgressBarScreen').default; }, // Incubator - get IncubatorTextFieldScreen() { - return require('./screens/incubatorScreens/IncubatorTextFieldScreen').default; - }, get PanViewScreen() { return require('./screens/incubatorScreens/PanViewScreen').default; }, diff --git a/demo/src/screens/MenuStructure.js b/demo/src/screens/MenuStructure.js index 73d18a3a7d..b9149d17fd 100644 --- a/demo/src/screens/MenuStructure.js +++ b/demo/src/screens/MenuStructure.js @@ -175,7 +175,6 @@ export const navigationData = { {title: 'ChipsInput', tags: 'chips input', screen: 'unicorn.components.ChipsInputScreen'}, {title: 'Native TouchableOpacity', tags: 'touchable native', screen: 'unicorn.incubator.TouchableOpacityScreen'}, {title: 'Dialog (New)', tags: 'dialog modal popup alert', screen: 'unicorn.incubator.IncubatorDialogScreen'}, - {title: 'TextField (New)', tags: 'text field input', screen: 'unicorn.components.IncubatorTextFieldScreen'}, {title: 'Toast (New)', tags: 'toast', screen: 'unicorn.components.IncubatorToastScreen'}, { title: 'ExpandableOverlay', diff --git a/demo/src/screens/incubatorScreens/IncubatorTextFieldScreen.tsx b/demo/src/screens/componentScreens/TextFieldScreen.tsx similarity index 97% rename from demo/src/screens/incubatorScreens/IncubatorTextFieldScreen.tsx rename to demo/src/screens/componentScreens/TextFieldScreen.tsx index 21bdf214ba..44ad81a633 100644 --- a/demo/src/screens/incubatorScreens/IncubatorTextFieldScreen.tsx +++ b/demo/src/screens/componentScreens/TextFieldScreen.tsx @@ -1,8 +1,7 @@ import _ from 'lodash'; import React, {Component} from 'react'; import {TextInput, StyleSheet, ScrollView, ActivityIndicator} from 'react-native'; -import {Assets, Colors, Spacings, Typography, View, Text, Button, Keyboard, Incubator} from 'react-native-ui-lib'; //eslint-disable-line -const {TextField} = Incubator; +import {Assets, Colors, Spacings, Typography, View, Text, Button, Keyboard, TextField, TextFieldMethods} from 'react-native-ui-lib'; //eslint-disable-line const {KeyboardAwareInsetsView} = Keyboard; const priceFormatter = Intl.NumberFormat('en-US'); @@ -10,14 +9,15 @@ const priceFormatter = Intl.NumberFormat('en-US'); export default class TextFieldScreen extends Component { input = React.createRef(); input2 = React.createRef(); - inputWithValidation = React.createRef(); + inputWithValidation = React.createRef(); state = { errorPosition: TextField.validationMessagePositions.TOP, shouldDisable: false, isReadonly: false, value: 'Initial Value', searching: false, - preset: 'withUnderline' + preset: 'withUnderline', + price: '' }; componentDidMount() { @@ -162,6 +162,7 @@ export default class TextFieldScreen extends Component { - - 0 ? charCount : undefined} - showCharacterCounter={charCount > 0} - error={error !== ERROR_STATES.noError ? 'Custom error message' : undefined} - useTopErrors={error === ERROR_STATES.topError} - /> - - - - - - Options - - {renderSliderOption.call(this, 'Typography (modifier)', 'typography', { - min: 30, - max: 100, - step: 10, - initial: 70, - sliderText: 'text' - })} - {renderBooleanOption.call(this, 'Multiline', 'multiline')} - {renderBooleanOption.call(this, 'Disabled', 'disabled')} - {renderBooleanOption.call(this, 'Centered', 'centered')} - {renderBooleanOption.call(this, 'Hide Underline', 'hideUnderline')} - {renderBooleanOption.call(this, 'With Prefix', 'withPrefix')} - {renderBooleanOption.call(this, 'With leadingIcon', 'withLeadingIcon')} - {renderColorOption.call(this, 'Underline Color', 'underlineColor')} - {renderRadioGroup.call(this, 'Guiding Text', 'guidingText', GUIDING_TEXTS)} - {renderColorOption.call(this, 'Title Color', 'titleColor')} - {renderSliderOption.call(this, 'Character Counter', 'charCount', {min: 0, max: 150, step: 3})} - {renderRadioGroup.call(this, 'Errors', 'error', ERROR_STATES)} - - - - ); - } -} diff --git a/demo/src/screens/componentScreens/TextFieldScreen/CustomInputsScreen.js b/demo/src/screens/componentScreens/TextFieldScreen/CustomInputsScreen.js deleted file mode 100644 index 0daa17b54b..0000000000 --- a/demo/src/screens/componentScreens/TextFieldScreen/CustomInputsScreen.js +++ /dev/null @@ -1,48 +0,0 @@ -import React, {Component} from 'react'; -import {StyleSheet, ScrollView} from 'react-native'; -import {View, TextField, Colors, Spacings} from 'react-native-ui-lib'; - -class CustomInputsScreen extends Component { - state = {}; - render() { - return ( - - - - - - - - ); - } -} - -const styles = StyleSheet.create({ - input: { - marginBottom: Spacings.s4 - } -}); - -export default CustomInputsScreen; diff --git a/demo/src/screens/componentScreens/TextFieldScreen/InputValidationsScreen.js b/demo/src/screens/componentScreens/TextFieldScreen/InputValidationsScreen.js deleted file mode 100644 index 2508ece660..0000000000 --- a/demo/src/screens/componentScreens/TextFieldScreen/InputValidationsScreen.js +++ /dev/null @@ -1,102 +0,0 @@ -import React, {Component} from 'react'; -import {StyleSheet, ScrollView} from 'react-native'; -import {View, TextField, Button, Spacings, Keyboard} from 'react-native-ui-lib'; - -const KeyboardAwareInsetsView = Keyboard.KeyboardAwareInsetsView; - -class InputValidationsScreen extends Component { - state = { - useTopErrors: false - }; - - toggleTopErrors = () => { - this.setState({useTopErrors: !this.state.useTopErrors}); - }; - - render() { - const {useTopErrors} = this.state; - return ( - - - - -