diff --git a/demo/src/index.js b/demo/src/index.js index 2879e7d3bd..32942dbffe 100644 --- a/demo/src/index.js +++ b/demo/src/index.js @@ -139,9 +139,6 @@ module.exports = { get FeatureHighlightScreen() { return require('./screens/componentScreens/FeatureHighlightScreen').default; }, - get WheelPickerDialogScreen() { - return require('./screens/componentScreens/WheelPickerDialogScreen').default; - }, get SliderScreen() { return require('./screens/componentScreens/SliderScreen').default; }, @@ -173,9 +170,6 @@ module.exports = { get SafeAreaSpacerViewScreen() { return require('./screens/nativeComponentScreens/SafeAreaSpacerViewScreen').default; }, - get WheelPickerViewScreen() { - return require('./screens/nativeComponentScreens/WheelPickerViewScreen').default; - }, // Full Screen components get EmptyStateScreen() { return require('./screens/componentScreens/EmptyStateScreen').default; diff --git a/demo/src/screens/MenuStructure.js b/demo/src/screens/MenuStructure.js index 2c4ae9d31b..19b3749a5b 100644 --- a/demo/src/screens/MenuStructure.js +++ b/demo/src/screens/MenuStructure.js @@ -43,7 +43,6 @@ export const navigationData = { screen: 'unicorn.components.SharedTransitionScreen' }, {title: 'Stack Aggregator', tags: 'stack aggregator', screen: 'unicorn.components.StackAggregatorScreen'}, - {title: 'Wheel Picker Dialog', tags: 'wheel picker dialog', screen: 'unicorn.components.WheelPickerDialogScreen'}, {title: 'Marquee', tags: 'sliding text', screen: 'unicorn.components.MarqueeScreen'} ] }, @@ -141,7 +140,6 @@ export const navigationData = { tags: 'native overlay', screen: 'unicorn.nativeComponents.HighlightOverlayViewScreen' }, - {title: 'Wheel Picker', tags: 'wheel picker', screen: 'unicorn.nativeComponents.WheelPickerViewScreen'}, {title: 'SafeArea Spacer', tags: 'native safe area', screen: 'unicorn.nativeComponents.SafeAreaSpacerViewScreen'}, { title: 'KeyboardTracking (iOS)', diff --git a/demo/src/screens/componentScreens/ChipScreen.tsx b/demo/src/screens/componentScreens/ChipScreen.tsx index 3482afb84e..d417c99e5c 100644 --- a/demo/src/screens/componentScreens/ChipScreen.tsx +++ b/demo/src/screens/componentScreens/ChipScreen.tsx @@ -1,7 +1,6 @@ -import _ from 'lodash'; import React, {Component} from 'react'; import {Alert} from 'react-native'; -import {Chip, Colors, Spacings, Text, Typography, View, Incubator, WheelPickerDialog, Image} from 'react-native-ui-lib'; +import {Chip, Colors, Spacings, Text, Typography, View, Image} from 'react-native-ui-lib'; const avatarImage = { uri: 'https://randomuser.me/api/portraits/women/24.jpg' @@ -20,64 +19,9 @@ export default class ChipScreen extends Component { ]; state = { - showDialog: false, selectedValue: this.colors[2].label }; - toggleDialog = (showDialog: boolean) => { - this.setState({showDialog}); - }; - - openDialog = () => { - this.toggleDialog(true); - }; - - closeDialog = () => { - this.toggleDialog(false); - }; - - onSelect = (itemValue: string) => { - const values = _.filter(this.colors, {value: itemValue}); - if (values.length > 0) { - this.setState({selectedValue: values[0].label}); - } - this.closeDialog(); - }; - - renderItem = ({item: color}) => { - return ( - - {color.label} - - ); - }; - - renderContent = () => { - const {selectedValue} = this.state; - - return ( - - ); - }; - - renderPickerDialog = () => { - const {showDialog} = this.state; - - return ( - - {this.renderContent()} - - ); - }; - renderExample = (text: string, chip: JSX.Element) => { return ( @@ -90,7 +34,6 @@ export default class ChipScreen extends Component { render() { return ( - {this.renderPickerDialog()} Chip @@ -120,12 +63,11 @@ export default class ChipScreen extends Component { iconStyle={{width: 24, height: 24}} iconProps={{tintColor: Colors.$iconDefault}} />)} - {this.renderExample('Right icon + onPress + dynamic label', + {this.renderExample('Right icon', )} {this.renderExample('Label + Avatar', )} {this.renderExample('Label + Counter', diff --git a/demo/src/screens/componentScreens/WheelPickerDialogScreen.js b/demo/src/screens/componentScreens/WheelPickerDialogScreen.js deleted file mode 100644 index 2a458e6ace..0000000000 --- a/demo/src/screens/componentScreens/WheelPickerDialogScreen.js +++ /dev/null @@ -1,54 +0,0 @@ -import React, {Component} from 'react'; -import { View, Text, WheelPickerDialog, Colors} from 'react-native-ui-lib'; //eslint-disable-line - - -export default class WheelPickerDialogScreen extends Component { - constructor(props) { - super(props); - this.state = { - selectedValue: 1, - title: 'Set time', - items: [ - { value: 0, label: '0 hr' }, - { value: 1, label: '1 hr' }, - { value: 3, label: '3 hr' }, - { value: 5, label: '5 hr' }, - { value: 10, label: '10 hr' }, - { value: 24, label: '24 hr' }, - { value: 48, label: '48 hr' }, - { value: 72, label: '72 hr' }, - ], - }; - this.onSelect = this.onSelect.bind(this); - } - - onSelect(itemValue) { - this.setState({ selectedValue: itemValue}); - } - onCancel() { - } - render() { - return ( - - - - {`The result value is ${this.state.selectedValue}. Roll the picker and press OK to change it`} - - - ); - } -} - diff --git a/demo/src/screens/componentScreens/index.js b/demo/src/screens/componentScreens/index.js index 3c502c98f5..1741537dff 100644 --- a/demo/src/screens/componentScreens/index.js +++ b/demo/src/screens/componentScreens/index.js @@ -59,7 +59,6 @@ export function registerScreens(registrar) { registrar('unicorn.wrappers.TouchableOpacityScreen', () => require('./TouchableOpacityScreen').default); registrar('unicorn.components.TourScreen', () => require('./TourScreen').default); registrar('unicorn.components.ViewScreen', () => require('./ViewScreen').default); - registrar('unicorn.components.WheelPickerDialogScreen', () => require('./WheelPickerDialogScreen').default); registrar('unicorn.components.WizardScreen', () => require('./WizardScreen').default); // List Components registrar('unicorn.lists.BasicListScreen', () => require('./BasicListScreen').default); diff --git a/demo/src/screens/nativeComponentScreens/WheelPickerViewScreen.js b/demo/src/screens/nativeComponentScreens/WheelPickerViewScreen.js deleted file mode 100644 index 04f86f697e..0000000000 --- a/demo/src/screens/nativeComponentScreens/WheelPickerViewScreen.js +++ /dev/null @@ -1,49 +0,0 @@ -import React, {PureComponent} from 'react'; -import {Text, View, WheelPicker ,Colors} from 'react-native-ui-lib'; //eslint-disable-line - -export default class WheelPickerViewScreen extends PureComponent { - constructor(props) { - super(props); - this.state = { - selectedValue: 'common lisp', - items: [ - { value: 'python', label: 'python'}, - { value: 'javascript', label: 'javascript'}, - { value: 'common lisp', label: 'lisp'}, - { value: 'objective c', label: 'objective c'}, - { value: 'java', label: 'java'}, - ], - }; - this.onValueChange = this.onValueChange.bind(this); - } - - onValueChange(itemValue) { - this.setState({ selectedValue: itemValue}); - } - - render() { - const {selectedValue, items} = this.state; - - return ( - - {'Wheel Picker'} - {`Current Value is: ${selectedValue}`} - - {items.map((item) => { - return ( - - ); - })} - - - ); - } -} - diff --git a/demo/src/screens/nativeComponentScreens/index.js b/demo/src/screens/nativeComponentScreens/index.js index ffea8bc76a..b75646bada 100644 --- a/demo/src/screens/nativeComponentScreens/index.js +++ b/demo/src/screens/nativeComponentScreens/index.js @@ -1,7 +1,6 @@ export function registerScreens(registrar) { registrar('unicorn.nativeComponents.HighlightOverlayViewScreen', () => require('./HighlightOverlayViewScreen').default); registrar('unicorn.nativeComponents.SafeAreaSpacerViewScreen', () => require('./SafeAreaSpacerViewScreen').default); - registrar('unicorn.nativeComponents.WheelPickerViewScreen', () => require('./WheelPickerViewScreen').default); registrar('unicorn.nativeComponents.KeyboardTrackingViewScreen', () => require('./KeyboardTrackingViewScreen').default); registrar('unicorn.nativeComponents.KeyboardAccessoryViewScreen', () => require('./keyboardAccessory/KeyboardAccessoryViewScreen').default); } diff --git a/jest-setup.js b/jest-setup.js index 7c4b368e77..7e1ee53dcf 100644 --- a/jest-setup.js +++ b/jest-setup.js @@ -43,7 +43,6 @@ jest.mock('react-native-gesture-handler', return GestureHandler; }, {virtual: true}); -jest.mock('@react-native-picker/picker', () => ({Picker: {Item: {}}})); jest.mock('react-native', () => { const reactNative = jest.requireActual('react-native'); reactNative.NativeModules.KeyboardTrackingViewTempManager = {}; diff --git a/lib/android/src/main/java/com/wix/reactnativeuilib/UiLibPackageList.java b/lib/android/src/main/java/com/wix/reactnativeuilib/UiLibPackageList.java index b5e495e7c0..a10b929c21 100644 --- a/lib/android/src/main/java/com/wix/reactnativeuilib/UiLibPackageList.java +++ b/lib/android/src/main/java/com/wix/reactnativeuilib/UiLibPackageList.java @@ -6,7 +6,6 @@ import com.wix.reactnativeuilib.highlighterview.HighlighterViewPackage; import com.wix.reactnativeuilib.keyboardinput.KeyboardInputPackage; import com.wix.reactnativeuilib.textinput.TextInputDelKeyHandlerPackage; -import com.wix.reactnativeuilib.wheelpicker.WheelPickerPackage; import java.util.Arrays; import java.util.List; @@ -22,7 +21,6 @@ public UiLibPackageList(Application application) { public List getPackageList() { return Arrays.asList( new HighlighterViewPackage(), - new WheelPickerPackage(), new TextInputDelKeyHandlerPackage(), new KeyboardInputPackage(application) ); diff --git a/lib/android/src/main/java/com/wix/reactnativeuilib/wheelpicker/WheelPicker.java b/lib/android/src/main/java/com/wix/reactnativeuilib/wheelpicker/WheelPicker.java deleted file mode 100644 index 9c02348132..0000000000 --- a/lib/android/src/main/java/com/wix/reactnativeuilib/wheelpicker/WheelPicker.java +++ /dev/null @@ -1,36 +0,0 @@ -package com.wix.reactnativeuilib.wheelpicker; - -import android.content.Context; -import android.view.ContextThemeWrapper; -import android.widget.NumberPicker; - -import com.facebook.react.bridge.Arguments; -import com.facebook.react.bridge.ReactContext; -import com.facebook.react.bridge.WritableMap; -import com.facebook.react.uimanager.events.RCTEventEmitter; -import com.wix.reactnativeuilib.R; - -/** - * Created by eladbo on 01/04/2018. - */ - -public class WheelPicker extends NumberPicker{ - - public WheelPicker(final Context context) { - super(new ContextThemeWrapper(context, R.style.NumberPickerTextColorStyle)); - this.setDescendantFocusability(NumberPicker.FOCUS_BLOCK_DESCENDANTS); - this.setOnValueChangedListener(new OnValueChangeListener() { - @Override - public void onValueChange(NumberPicker picker, int oldVal, int newVal) { - WritableMap event = Arguments.createMap(); - event.putInt("itemIndex", newVal); - ReactContext reactContext = (ReactContext) context; - reactContext.getJSModule(RCTEventEmitter.class).receiveEvent( - getId(), - "topChange", - event); - } - }); - } - -} diff --git a/lib/android/src/main/java/com/wix/reactnativeuilib/wheelpicker/WheelPickerManager.java b/lib/android/src/main/java/com/wix/reactnativeuilib/wheelpicker/WheelPickerManager.java deleted file mode 100644 index 8cef9f176b..0000000000 --- a/lib/android/src/main/java/com/wix/reactnativeuilib/wheelpicker/WheelPickerManager.java +++ /dev/null @@ -1,237 +0,0 @@ -package com.wix.reactnativeuilib.wheelpicker; - -import android.graphics.Color; -import android.graphics.Paint; -import android.graphics.Typeface; -import android.graphics.drawable.ColorDrawable; -import android.util.Log; -import android.view.View; -import android.widget.EditText; -import android.widget.NumberPicker; - -import androidx.annotation.NonNull; - -import com.facebook.react.bridge.ReadableArray; -import com.facebook.react.common.MapBuilder; -import com.facebook.react.uimanager.SimpleViewManager; -import com.facebook.react.uimanager.ThemedReactContext; -import com.facebook.react.uimanager.annotations.ReactProp; -import com.wix.reactnativeuilib.utils.LogForwarder; - -import java.lang.reflect.Field; -import java.util.ArrayList; -import java.util.Map; - -import javax.annotation.Nullable; - -/** - * Created by eladbo on 01/04/2018. - */ - -public class WheelPickerManager extends SimpleViewManager { - @SuppressWarnings("SpellCheckingInspection") - private static final String TAG = "WheelPickerMngr(native)"; - @SuppressWarnings("WeakerAccess") - public static final String REACT_CLASS = "WheelPicker"; - private int initialIndex; - private LogForwarder logForwarder; - - @Override - public String getName() { - return REACT_CLASS; - } - - @Override - public WheelPicker createViewInstance(ThemedReactContext context) { - logForwarder = new LogForwarder(context); - return new WheelPicker(context); //If your CustomView has more constructor parameters pass it from here. - } - - @SuppressWarnings("unused") - @ReactProp(name = "initialIndex") - public void setInitialIndex(@SuppressWarnings("unused") WheelPicker wheelPicker, @Nullable Integer initialIndex) { - this.initialIndex = (initialIndex == null) ? 0 : initialIndex; - } - - @SuppressWarnings("unused") - @ReactProp(name = "data") - public void setData(WheelPicker wheelPicker, @Nullable ReadableArray data) { - wheelPicker.setDisplayedValues(null); - wheelPicker.setWrapSelectorWheel(false); - - if (data != null) { - ArrayList dataList = data.toArrayList(); - final String[] arrayString = (String[]) dataList.toArray(new String[0]); - wheelPicker.setMinValue(0); - wheelPicker.setMaxValue(arrayString.length - 1); - wheelPicker.setDisplayedValues(arrayString); - wheelPicker.setValue(this.initialIndex); - } - } - - @SuppressWarnings("unused") - @ReactProp(name = "color") - public void setColor(WheelPicker wheelPicker, @Nullable String colorAsString) { - if (colorAsString != null) { - int color = getColorFromString(colorAsString); - try { - setDividerColor(wheelPicker, color); - } catch (Exception e) { - String message = "at least one component in the wheel picker did not receive the correct color"; - Log.w(TAG, message, e); - logForwarder.w(TAG, message + e.getMessage()); - } - } - } - - private void setDividerColor(WheelPicker wheelPicker, int color) throws NoSuchFieldException, IllegalAccessException, IllegalArgumentException { - //noinspection JavaReflectionMemberAccess - Field selectionDividerField = NumberPicker.class.getDeclaredField("mSelectionDivider"); - selectionDividerField.setAccessible(true); - ColorDrawable colorDrawable = new ColorDrawable(color); - selectionDividerField.set(wheelPicker, colorDrawable); - } - - @SuppressWarnings("unused") - @ReactProp(name = "fontSize") - public void setFontSize(WheelPicker wheelPicker, @Nullable Integer fontSize) { - if (fontSize != null) { - try { - setTextSize(wheelPicker, fontSize); - } catch (Exception e) { - String message = "at least one component in the wheel picker did not receive the correct font size"; - Log.w(TAG, message, e); - logForwarder.w(TAG, message + e.getMessage()); - } - } - } - - private void setTextSize(WheelPicker wheelPicker, int fontSize) throws NoSuchFieldException, IllegalAccessException, IllegalArgumentException { - setDrawableTextSize(wheelPicker, fontSize); - setEditTextSize(wheelPicker, fontSize); - } - - private void setDrawableTextSize(WheelPicker wheelPicker, int fontSize) throws NoSuchFieldException, IllegalAccessException, IllegalArgumentException { - //noinspection JavaReflectionMemberAccess - Field selectorWheelPaintField = NumberPicker.class.getDeclaredField("mSelectorWheelPaint"); - selectorWheelPaintField.setAccessible(true); - float fontSizeInSp = fontSize * wheelPicker.getResources().getDisplayMetrics().scaledDensity; - ((Paint)selectorWheelPaintField.get(wheelPicker)).setTextSize(fontSizeInSp); - } - - private void setEditTextSize(WheelPicker wheelPicker, int fontSize) { - final int count = wheelPicker.getChildCount(); - for(int i = 0 ; i < count ; ++i){ - View child = wheelPicker.getChildAt(i); - if(child instanceof EditText) { - ((EditText) child).setTextSize(fontSize); - } - } - } - - @SuppressWarnings("unused") - public - @ReactProp(name = "fontFamily") void setFontSize(WheelPicker wheelPicker, @Nullable String fontFamily) { - if (fontFamily != null) { - try { - Typeface typeface = Typeface.create(fontFamily, Typeface.NORMAL); - setDrawableTypeface(wheelPicker, typeface); - setEditTextTypeFace(wheelPicker, typeface); - } catch (Exception e) { - String message = "at least one component in the wheel picker did not receive the correct font family"; - Log.w(TAG, message, e); - logForwarder.w(TAG, message + e.getMessage()); - } - } - } - - private void setDrawableTypeface(WheelPicker wheelPicker, @Nullable Typeface typeface) throws NoSuchFieldException, IllegalAccessException, IllegalArgumentException { - //noinspection JavaReflectionMemberAccess - Field selectorWheelPaintField = NumberPicker.class.getDeclaredField("mSelectorWheelPaint"); - selectorWheelPaintField.setAccessible(true); - ((Paint)selectorWheelPaintField.get(wheelPicker)).setTypeface(typeface); - } - - private void setEditTextTypeFace(WheelPicker wheelPicker, @Nullable Typeface typeface) { - final int count = wheelPicker.getChildCount(); - for(int i = 0 ; i < count ; ++i){ - View child = wheelPicker.getChildAt(i); - if(child instanceof EditText) { - ((EditText) child).getPaint().setTypeface(typeface); - } - } - } - - @SuppressWarnings("unused") - @ReactProp(name = "labelColor") - public void setLabelColor(WheelPicker wheelPicker, @Nullable String colorAsString) { - if (colorAsString != null) { - int color = getColorFromString(colorAsString); - try { - setTextColor(wheelPicker, color); - } catch (Exception e) { - String message = "at least one component in the wheel picker did not receive the correct color"; - Log.w(TAG, message, e); - logForwarder.w(TAG, message + e.getMessage()); - } - } - } - - private void setTextColor(WheelPicker wheelPicker, int color) throws NoSuchFieldException, IllegalAccessException, IllegalArgumentException { - setDrawableColor(wheelPicker, color); - setEditTextColor(wheelPicker, color); - } - - private void setDrawableColor(WheelPicker wheelPicker, int color) throws NoSuchFieldException, IllegalAccessException, IllegalArgumentException { - //noinspection JavaReflectionMemberAccess - Field selectorWheelPaintField = NumberPicker.class.getDeclaredField("mSelectorWheelPaint"); - selectorWheelPaintField.setAccessible(true); - ((Paint)selectorWheelPaintField.get(wheelPicker)).setColor(color); - } - - private void setEditTextColor(WheelPicker wheelPicker, int color) { - final int count = wheelPicker.getChildCount(); - for(int i = 0 ; i < count ; ++i){ - View child = wheelPicker.getChildAt(i); - if(child instanceof EditText) { - ((EditText) child).setTextColor(color); - } - } - } - - @SuppressWarnings("unused") - @ReactProp(name = "itemHeight") - public void setItemHeight(WheelPicker wheelPicker, @Nullable Integer itemHeight) { - if (itemHeight != null) { - try { - //noinspection JavaReflectionMemberAccess - Field selectionDividersDistanceField = NumberPicker.class.getDeclaredField("mSelectionDividersDistance"); - selectionDividersDistanceField.setAccessible(true); - int itemHeightInSp = (int) (itemHeight * wheelPicker.getResources().getDisplayMetrics().scaledDensity); - selectionDividersDistanceField.set(wheelPicker, itemHeightInSp); - } catch (Exception e) { - String message = "item height was not set in the wheel picker"; - Log.w(TAG, message, e); - logForwarder.w(TAG, message + e.getMessage()); - } - } - } - - public Map getExportedCustomBubblingEventTypeConstants() { - return MapBuilder.builder() - .put( - "topChange", - MapBuilder.of( - "phasedRegistrationNames", - MapBuilder.of("bubbled", "onChange"))) - .build(); - } - - private int getColorFromString(@NonNull String colorAsString) { - if (colorAsString.length() == 4) { // #XXX - colorAsString = colorAsString.replaceAll("#([0-9a-fA-F])([0-9a-fA-F])([0-9a-fA-F])", "#$1$1$2$2$3$3"); - } - - return Color.parseColor(colorAsString); - } -} diff --git a/lib/android/src/main/java/com/wix/reactnativeuilib/wheelpicker/WheelPickerPackage.java b/lib/android/src/main/java/com/wix/reactnativeuilib/wheelpicker/WheelPickerPackage.java deleted file mode 100644 index 04b74b881e..0000000000 --- a/lib/android/src/main/java/com/wix/reactnativeuilib/wheelpicker/WheelPickerPackage.java +++ /dev/null @@ -1,44 +0,0 @@ -package com.wix.reactnativeuilib.wheelpicker; - -/** - * Created by eladbo on 01/04/2018. - */ - -import com.facebook.react.ReactPackage; -import com.facebook.react.bridge.JavaScriptModule; -import com.facebook.react.bridge.NativeModule; -import com.facebook.react.bridge.ReactApplicationContext; -import com.facebook.react.uimanager.ViewManager; -import com.wix.reactnativeuilib.wheelpicker.WheelPickerManager; - -import java.util.Arrays; -import java.util.Collections; -import java.util.List; - -import com.facebook.react.ReactPackage; -import com.facebook.react.bridge.JavaScriptModule; -import com.facebook.react.bridge.NativeModule; -import com.facebook.react.bridge.ReactApplicationContext; -import com.facebook.react.uimanager.ViewManager; - -import java.util.Arrays; -import java.util.Collections; -import java.util.List; - -public class WheelPickerPackage implements ReactPackage { - - @Override - public List createNativeModules(ReactApplicationContext reactContext) { - return Collections.emptyList(); - } - - public List> createJSModules() { - return Collections.emptyList(); - } - - @Override - public List createViewManagers(ReactApplicationContext reactContext) { - return Arrays.asList( new WheelPickerManager() ); - } -} - diff --git a/lib/components/WheelPicker/WheelPickerItem.tsx b/lib/components/WheelPicker/WheelPickerItem.tsx deleted file mode 100644 index 2980e60991..0000000000 --- a/lib/components/WheelPicker/WheelPickerItem.tsx +++ /dev/null @@ -1,21 +0,0 @@ -import {Component} from 'react'; - -type WheelPickerItemProps = { - /** - * the picker item value - */ - value: string | number; - /** - * the picker item display label - */ - label: string; -}; - -export default class WheelPickerItem extends Component { - static displayName = 'WheelPicker.Item'; - - render() { - // These items don't get rendered directly. - return null; - } -} diff --git a/lib/components/WheelPicker/index.tsx b/lib/components/WheelPicker/index.tsx deleted file mode 100644 index 6c20a331dc..0000000000 --- a/lib/components/WheelPicker/index.tsx +++ /dev/null @@ -1,141 +0,0 @@ -import _ from 'lodash'; -import React, {Component} from 'react'; -import {DeviceEventEmitter, requireNativeComponent, StyleSheet, View, ViewStyle, TextStyle} from 'react-native'; - -import WheelPickerItem from './WheelPickerItem'; -import {Constants} from '../../../src/commons/new'; -import {LogService} from '../../../src/services'; -import {Typography, Colors} from '../../../src/style'; - -import {PickerPackage, CommunityPickerPackage} from '../../../src/optionalDependencies'; -const Picker = PickerPackage?.Picker || CommunityPickerPackage?.Picker || (() => null); - -const WheelPickerNative = requireNativeComponent('WheelPicker'); - -export type WheelPickerProps = { - /** - * the current selected value of the picker - */ - selectedValue?: string | number; - /** - * callback for when a value change - */ - onValueChange?: (value: string | number, index: number) => void; - /** - * pass custom style - */ - style?: ViewStyle; - /** - * pass custom label style: fontSize, fontFamily, color
- * Note: label's color will override the text color (hex only) - */ - labelStyle?: TextStyle; - /** - * The height of the selected item - */ - itemHeight?: number; - /** - * The color of the wheel picker (hex only) - */ - color?: string; - /** - * pass custom style for the picker item - */ - itemStyle?: ViewStyle; - children?: JSX.Element | JSX.Element[]; -} - -class WheelPicker extends Component { - static displayName = 'WheelPicker'; - - static defaultProps = { - labelStyle: {fontSize: Typography.text70?.fontSize, fontFamily: Typography.text70?.fontFamily}, - color: Colors.$textPrimary - }; - - static Item: typeof WheelPickerItem; - - constructor(props: WheelPickerProps) { - super(props); - this.onValueChange = this.onValueChange.bind(this); //eslint-disable-line - this.getItems(); - DeviceEventEmitter.addListener('log', this.onLogReceived); // TODO: consider moving to a more generic place (base class?) - - LogService.componentDeprecationWarn({oldComponent: 'WheelPicker', newComponent: 'Incubator.WheelPicker'}); - } - - state = { - items: this.getItems() - }; - - onLogReceived = (event: any) => { - // @ts-expect-error - console[event.LogType](event.TAG, event.text); - }; - - onValueChange(event: any) { - const index = event.nativeEvent.itemIndex; - const {onValueChange} = this.props; - if (onValueChange) { - const {items} = this.state; - onValueChange(items[index].value, index); - } - } - - getItems() { - const {children} = this.props; - - const items = _.map(React.Children.toArray(children), child => ({ - //@ts-expect-error - value: child.props.value, - //@ts-expect-error - label: child.props.label - })); - return items; - } - - getInitialIndex() { - const {items} = this.state; - const {selectedValue} = this.props; - return _.findIndex(items, {value: selectedValue}); - } - - extractLabelsFromItems() { - return _.map(this.state.items, 'label'); - } - - render() { - const {style, color, labelStyle, itemHeight} = this.props; - - return ( - - - - ); - } -} - -WheelPicker.Item = WheelPickerItem; - -const styles = StyleSheet.create({ - container: { - overflow: 'hidden' - }, - wheelPicker: { - width: 200, - height: 200 - } -}); - -export default Constants.isAndroid ? WheelPicker : Picker; diff --git a/lib/components/WheelPicker/index.web.tsx b/lib/components/WheelPicker/index.web.tsx deleted file mode 100644 index 5c4fa06311..0000000000 --- a/lib/components/WheelPicker/index.web.tsx +++ /dev/null @@ -1,20 +0,0 @@ - -import React from 'react'; - - - -console.log('WheelPicker not supported on web'); -class WheelPicker extends React.Component { - static displayName = 'WheelPicker'; - - - render() { - - return ( - null - ); - } -} - - -export default WheelPicker; diff --git a/lib/components/index.ts b/lib/components/index.ts index 0b2441e2c9..f137b10823 100644 --- a/lib/components/index.ts +++ b/lib/components/index.ts @@ -1,14 +1,11 @@ import HighlighterOverlayView from './HighlighterOverlayView'; import SafeAreaSpacerView from './SafeArea/SafeAreaSpacerView'; -import WheelPicker, {WheelPickerProps} from './WheelPicker'; import SafeAreaInsetsManager from './SafeArea/SafeAreaInsetsManager'; import Keyboard, {KeyboardTrackingViewProps, KeyboardAccessoryViewProps} from './Keyboard'; export { HighlighterOverlayView, SafeAreaSpacerView, - WheelPicker, - WheelPickerProps, SafeAreaInsetsManager, Keyboard, KeyboardTrackingViewProps, diff --git a/lib/package.json b/lib/package.json index 9c89b9b198..85fdaf30e6 100644 --- a/lib/package.json +++ b/lib/package.json @@ -1,6 +1,6 @@ { "name": "uilib-native", - "version": "3.0.9", + "version": "4.0.0", "homepage": "https://github.com/wix/react-native-ui-lib", "description": "uilib native components (separated from js components)", "main": "components/index.js", diff --git a/package.json b/package.json index 3b46288643..9ef75e3d2c 100644 --- a/package.json +++ b/package.json @@ -71,7 +71,6 @@ "@react-native-community/blur": "4.3.0", "@react-native-community/datetimepicker": "^3.4.6", "@react-native-community/netinfo": "^5.6.2", - "@react-native-picker/picker": "^2.3.0", "@shopify/flash-list": "^1.2.1", "@testing-library/react-hooks": "^7.0.2", "@testing-library/react-native": "^7.2.0", diff --git a/react-native.config.js b/react-native.config.js index 3a17a71d0c..34b3671f62 100644 --- a/react-native.config.js +++ b/react-native.config.js @@ -10,10 +10,8 @@ module.exports = { sourceDir: './lib/android/', packageImportPath: `import com.wix.reactnativeuilib.highlighterview.HighlighterViewPackage; import com.wix.reactnativeuilib.keyboardinput.KeyboardInputPackage; -import com.wix.reactnativeuilib.textinput.TextInputDelKeyHandlerPackage; -import com.wix.reactnativeuilib.wheelpicker.WheelPickerPackage;`, +import com.wix.reactnativeuilib.textinput.TextInputDelKeyHandlerPackage;`, packageInstance: `new HighlighterViewPackage(), - new WheelPickerPackage(), new TextInputDelKeyHandlerPackage(), new KeyboardInputPackage(getApplication())` } diff --git a/src/components/index.js b/src/components/index.js index bd7df46e9e..81e3cfbf23 100644 --- a/src/components/index.js +++ b/src/components/index.js @@ -192,9 +192,6 @@ export default { get Wizard() { return require('./wizard').default; }, - get WheelPickerDialog() { - return require('./wheelPickerDialog').default; - }, get ScrollBar() { return require('./scrollBar').default; } diff --git a/src/components/wheelPickerDialog/index.js b/src/components/wheelPickerDialog/index.js deleted file mode 100644 index d3f5b78334..0000000000 --- a/src/components/wheelPickerDialog/index.js +++ /dev/null @@ -1,161 +0,0 @@ -import PropTypes from 'prop-types'; -import React, {Component} from 'react'; -import {StyleSheet, TouchableOpacity} from 'react-native'; -import {TextPropTypes} from 'deprecated-react-native-prop-types'; -import Colors from '../../style/colors'; -import Typography from '../../style/typography'; -import View from '../view'; -import Text from '../text'; -import {WheelPicker} from '../../nativeComponents'; -import {PickerPackage, CommunityPickerPackage} from '../../../src/optionalDependencies'; - -export default class WheelPickerDialog extends Component { - static displayName = 'IGNORE'; - - static propTypes = { - /** - * Array of items as objects {value, label} - */ - items: PropTypes.array, - /** - * The selected value - */ - selectedValue: PropTypes.oneOfType([PropTypes.string, PropTypes.number]), - /** - * The component's title - */ - title: PropTypes.string, - /** - * Pass props for the WheelPicker (Android only) - */ - wheelPickerProps: PropTypes.shape(WheelPicker.propTypes), - /** - * select label style - */ - selectLabelStyle: TextPropTypes.style, - /** - * cancel label style - */ - cancelLabelStyle: TextPropTypes.style, - /** - * onCancel callback invoked when 'Cancel' button is pressed - */ - onCancel: PropTypes.func, - /** - * onSelect callback invoked when 'Ok' button is pressed - */ - onSelect: PropTypes.func, - /** - * onValueChange callback invoked when the value in the wheel changes - */ - onValueChange: PropTypes.func - } - - constructor(props) { - super(props); - this.state = { - initialSelectedValue: props.selectedValue, - currentValue: false - }; - - if (!PickerPackage) { - if (CommunityPickerPackage) { - // eslint-disable-next-line max-len - console.warn(`RNUILib Picker will soon migrate to use "@react-native-picker/picker" package instead of '@react-native-community/picker'`); - } else { - console.error(`RNUILib Picker requires installing "@react-native-picker/picker" dependency`); - } - } - } - - onValueChange = (value, index) => { - if (this.props.onValueChange) { - this.props.onValueChange(value, index); - } - this.setState({currentValue: value}); - } - - onSelect = () => { - if (this.props.onSelect) { - this.props.onSelect(this.state.currentValue); - } - } - - render() { - const {title, items, onCancel, wheelPickerProps, selectLabelStyle, cancelLabelStyle} = this.props; - return ( - - {title} - - - {items.map((item, idx) => { - return ; - })} - - - - - - {'CANCEL'} - - - - - {'OK'} - - - - - ); - } -} - -const styles = StyleSheet.create({ - container: { - height: 295, - width: 280, - flex: 0, - alignSelf: 'center', - justifyContent: 'center' - }, - title: { - marginTop: 21, - marginLeft: 24, - ...Typography.text60, - color: Colors.black, - alignSelf: 'flex-start' - }, - picker: { - marginTop: 24, - width: 56, - height: 148 - }, - bottomButtonsContainer: { - flexDirection: 'row', - flex: 0, - alignItems: 'center', - marginTop: 32, - marginBottom: 8, - marginLeft: 142 - }, - cancelButton: { - color: Colors.$textPrimary, - width: 75, - height: 36, - textAlign: 'center', - textAlignVertical: 'center' - }, - okButton: { - color: Colors.$textPrimary, - width: 47, - height: 36, - textAlign: 'center', - textAlignVertical: 'center', - marginHorizontal: 8 - } -}); diff --git a/src/index.ts b/src/index.ts index 634fd2982d..76bf14667e 100644 --- a/src/index.ts +++ b/src/index.ts @@ -172,8 +172,6 @@ export { WizardStepConfig, WizardStepsConfig } from './components/wizard'; -// @ts-expect-error -export {default as WheelPickerDialog} from './components/wheelPickerDialog'; /* ===== TestKit ===== */ // export {default as TextTestKit} from './components/text/Text.driver'; @@ -190,7 +188,6 @@ export {default as WheelPickerDialog} from './components/wheelPickerDialog'; // // MaskedInput, // // SharedTransition, // // Toast, -// // WheelPickerDialog, // // BaseComponent, // // PureBaseComponent // } from '../typings'; diff --git a/src/optionalDependencies/PickerPackage.ts b/src/optionalDependencies/PickerPackage.ts deleted file mode 100644 index cf3a313800..0000000000 --- a/src/optionalDependencies/PickerPackage.ts +++ /dev/null @@ -1,10 +0,0 @@ -let PickerPackage: any, CommunityPickerPackage: any; -try { - PickerPackage = require('@react-native-picker/picker'); // New package -} catch (error) { - try { - CommunityPickerPackage = require('@react-native-community/picker'); // Deprecated package - } catch (error) {} -} - -export {PickerPackage, CommunityPickerPackage}; diff --git a/src/optionalDependencies/index.ts b/src/optionalDependencies/index.ts index 108c2d8e56..372225df08 100644 --- a/src/optionalDependencies/index.ts +++ b/src/optionalDependencies/index.ts @@ -3,7 +3,6 @@ export {default as FlashListPackage} from './FlashListPackage'; export {default as BlurViewPackage} from './BlurViewPackage'; export {default as NetInfoPackage} from './NetInfoPackage'; export {default as HapticFeedbackPackage} from './HapticFeedbackPackage'; -export {PickerPackage, CommunityPickerPackage} from './PickerPackage'; export {default as SvgPackage} from './SvgPackage'; export {createShimmerPlaceholder} from './ShimmerPackage'; export {default as LinearGradientPackage} from './LinearGradientPackage'; diff --git a/src/optionalDependencies/index.web.ts b/src/optionalDependencies/index.web.ts index 7bd18d7a5c..b7baa0a781 100644 --- a/src/optionalDependencies/index.web.ts +++ b/src/optionalDependencies/index.web.ts @@ -1,6 +1,5 @@ export {default as NetInfoPackage} from './NetInfoPackage'; export {default as HapticFeedbackPackage} from './HapticFeedbackPackage'; -export {PickerPackage, CommunityPickerPackage} from './PickerPackage'; export {default as SvgPackage} from './SvgPackage'; export {createShimmerPlaceholder} from './ShimmerPackage'; export {default as LinearGradientPackage} from './LinearGradientPackage'; diff --git a/typings/components/WheelPickerDialog.d.ts b/typings/components/WheelPickerDialog.d.ts deleted file mode 100644 index 5138b75274..0000000000 --- a/typings/components/WheelPickerDialog.d.ts +++ /dev/null @@ -1,18 +0,0 @@ - -import {Component} from 'react'; -import {GestureResponderEvent, StyleProp, TextStyle} from 'react-native'; -import {WheelPickerItemValue, WheelPickerOnValueChange, WheelPickerProps} from '../nativeComponents/WheelPicker'; - -export interface WheelPickerDialogProps { - wheelPickerProps?: WheelPickerProps; - selectLabelStyle?: StyleProp; - cancelLabelStyle?: StyleProp; - items?: ReadonlyArray; - selectedValue?: WheelPickerItemValue; - title?: string; - onCancel?: (event: GestureResponderEvent) => void; - onSelect?: (value: WheelPickerItemValue) => void; - onValueChange?: WheelPickerOnValueChange; -} - -export class WheelPickerDialog extends Component {} diff --git a/typings/components/index.d.ts b/typings/components/index.d.ts index 1bbee577d1..cf94fb99fb 100644 --- a/typings/components/index.d.ts +++ b/typings/components/index.d.ts @@ -4,4 +4,3 @@ export * from './Inputs'; export * from './Picker'; export * from './SharedTransition'; export * from './Toast'; -export * from './WheelPickerDialog'; diff --git a/typings/index.d.ts b/typings/index.d.ts index 8551395d30..6966c5feda 100644 --- a/typings/index.d.ts +++ b/typings/index.d.ts @@ -3,7 +3,6 @@ export * from './assets'; export * from './commons'; export * from './components'; export * from './incubator'; -export * from './nativeComponents'; export * from './generatedTypes'; export * from './globalTypes'; export * from './hooks'; diff --git a/typings/nativeComponents/WheelPicker.d.ts b/typings/nativeComponents/WheelPicker.d.ts deleted file mode 100644 index e3ef40340f..0000000000 --- a/typings/nativeComponents/WheelPicker.d.ts +++ /dev/null @@ -1,29 +0,0 @@ - -import {Component} from 'react'; -import {StyleProp, TextStyle, ViewStyle} from 'react-native'; -import {ColorValue} from '../style/colors'; - -export type WheelPickerItemValue = string | number; - -export interface WheelPickerItemProps { - value?: WheelPickerItemValue; - label?: string; -} - -export type WheelPickerOnValueChange = (value: WheelPickerItemValue, index: number) => void; - -export interface WheelPickerProps { - selectedValue?: WheelPickerItemValue; - onValueChange?: WheelPickerOnValueChange; - style?: StyleProp; - labelStyle?: StyleProp; - itemHeight?: number; - color?: ColorValue; - itemStyle?: StyleProp; -} - -export class WheelPicker extends Component {} - -export namespace WheelPicker { - export class Item extends Component {} -} diff --git a/typings/nativeComponents/index.d.ts b/typings/nativeComponents/index.d.ts deleted file mode 100644 index d485e43de7..0000000000 --- a/typings/nativeComponents/index.d.ts +++ /dev/null @@ -1,2 +0,0 @@ - -export * from './WheelPicker'; diff --git a/webDemo/package.json b/webDemo/package.json index 2c063660cb..9c93ffdab5 100644 --- a/webDemo/package.json +++ b/webDemo/package.json @@ -17,8 +17,6 @@ "dependencies": { "@react-native-community/datetimepicker": "^3.4.6", "@react-native-community/netinfo": "^9.3.0", - "@react-native-community/picker": "^1.8.1", - "@react-native-picker/picker": "^2.4.2", "react": "^17.0.2", "react-dom": "^17.0.2", "react-native-gesture-handler": "^1.10.3", diff --git a/webDemo/webpack.config.js b/webDemo/webpack.config.js index fde468fbd4..ca2d8657e0 100644 --- a/webDemo/webpack.config.js +++ b/webDemo/webpack.config.js @@ -17,8 +17,6 @@ const baseProjectSource = [ path.resolve(appDirectory, 'node_modules/react-native-reanimated'), path.resolve(appDirectory, 'node_modules/react-native-svg'), path.resolve(appDirectory, 'node_modules/react-native-svg-transformer'), - path.resolve(appDirectory, 'node_modules/@react-native-picker/picker'), - path.resolve(appDirectory, 'node_modules/@react-native-community/picker'), path.resolve(appDirectory, 'node_modules/@react-native-community/netinfo'), path.resolve(appDirectory, 'node_modules/@react-native-community/datetimepicker'), path.resolve(appDirectory, 'node_modules/react-native-color'),