react-native-picky - npm Package Compare versions

Comparing version 0.3.3 to 0.4.0

lib/commonjs/PickerColumn.js

+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.PickerColumn = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+const PickerColumn = _ref => {
+  let {
+    children
+  } = _ref;
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, children);
+};
+
+exports.PickerColumn = PickerColumn;
+//# sourceMappingURL=PickerColumn.js.map

lib/commonjs/PickerColumn.js.map

+{"version":3,"names":["PickerColumn","children"],"sources":["PickerColumn.tsx"],"sourcesContent":["import React, { ReactElement } from 'react';\nimport type { PickerItemProps } from './PickerItem';\nimport type { PickerColumnChangeItem } from './types';\n\ntype PickerColumnChild = ReactElement<PickerItemProps>;\n\nexport interface PickerColumnProps {\n  width?: number;\n  selectedValue?: string | number;\n  onChange?: (item: PickerColumnChangeItem) => void;\n  children: PickerColumnChild | PickerColumnChild[];\n}\n\nexport const PickerColumn = ({ children }: PickerColumnProps) => {\n  return <>{children}</>;\n};\n"],"mappings":";;;;;;;AAAA;;;;AAaO,MAAMA,YAAY,GAAG,QAAqC;EAAA,IAApC;IAAEC;EAAF,CAAoC;EAC/D,oBAAO,4DAAGA,QAAH,CAAP;AACD,CAFM"}

lib/module/PickerColumn.js

+import React from 'react';
+export const PickerColumn = _ref => {
+  let {
+    children
+  } = _ref;
+  return /*#__PURE__*/React.createElement(React.Fragment, null, children);
+};
+//# sourceMappingURL=PickerColumn.js.map

lib/module/PickerColumn.js.map

+{"version":3,"names":["React","PickerColumn","children"],"sources":["PickerColumn.tsx"],"sourcesContent":["import React, { ReactElement } from 'react';\nimport type { PickerItemProps } from './PickerItem';\nimport type { PickerColumnChangeItem } from './types';\n\ntype PickerColumnChild = ReactElement<PickerItemProps>;\n\nexport interface PickerColumnProps {\n  width?: number;\n  selectedValue?: string | number;\n  onChange?: (item: PickerColumnChangeItem) => void;\n  children: PickerColumnChild | PickerColumnChild[];\n}\n\nexport const PickerColumn = ({ children }: PickerColumnProps) => {\n  return <>{children}</>;\n};\n"],"mappings":"AAAA,OAAOA,KAAP,MAAoC,OAApC;AAaA,OAAO,MAAMC,YAAY,GAAG,QAAqC;EAAA,IAApC;IAAEC;EAAF,CAAoC;EAC/D,oBAAO,0CAAGA,QAAH,CAAP;AACD,CAFM"}

lib/typescript/PickerColumn.d.ts

+import { ReactElement } from 'react';
+import type { PickerItemProps } from './PickerItem';
+import type { PickerColumnChangeItem } from './types';
+declare type PickerColumnChild = ReactElement<PickerItemProps>;
+export interface PickerColumnProps {
+    width?: number;
+    selectedValue?: string | number;
+    onChange?: (item: PickerColumnChangeItem) => void;
+    children: PickerColumnChild | PickerColumnChild[];
+}
+export declare const PickerColumn: ({ children }: PickerColumnProps) => JSX.Element;
+export {};

src/PickerColumn.tsx

+import React, { ReactElement } from 'react';
+import type { PickerItemProps } from './PickerItem';
+import type { PickerColumnChangeItem } from './types';
+
+type PickerColumnChild = ReactElement<PickerItemProps>;
+
+export interface PickerColumnProps {
+  width?: number;
+  selectedValue?: string | number;
+  onChange?: (item: PickerColumnChangeItem) => void;
+  children: PickerColumnChild | PickerColumnChild[];
+}
+
+export const PickerColumn = ({ children }: PickerColumnProps) => {
+  return <>{children}</>;
+};

android/src/main/j...tivepicky/events/ItemSelectedEvent.java

@@ -13,10 +13,10 @@ package com.reactnativepicky.events;
   private final Object mValue;
-  private final int mGroup;
+  private final int mColumn;
   private final int mIndex;
 
-  public ItemSelectedEvent(int viewTag, Object value, int index, int group) {
+  public ItemSelectedEvent(int viewTag, Object value, int index, int column) {
     super(viewTag);
     mValue = value;
     mIndex = index;
-    mGroup = group;
+    mColumn = column;
   }
@@ -61,3 +61,3 @@
     eventData.putInt("index", mIndex);
-    eventData.putInt("group", mGroup);
+    eventData.putInt("column", mColumn);
 
@@ -64,0 +64,0 @@ return eventData;

android/src/main/java/com/reactnativepicky/Picky.java

@@ -16,3 +16,3 @@ package com.reactnativepicky;
   private int mState;
-  private int mGroup;
+  private int mColumn;
 
@@ -31,3 +31,3 @@ public Picky(ReactContext reactContext) {
           mEventDispatcher.dispatchEvent(
-            new ItemSelectedEvent(getId(), mValueData.get(index), index, mGroup));
+            new ItemSelectedEvent(getId(), mValueData.get(index), index, mColumn));
         }
@@ -52,4 +52,4 @@ }
 
-  public void setGroup(int group) {
-    mGroup = group;
+  public void setColumn(int column) {
+    mColumn = column;
   }
@@ -56,0 +56,0 @@

android/src/main/java/com/reactnativepicky/PickyManager.java

@@ -59,6 +59,6 @@ package com.reactnativepicky;
 
-    @ReactProp(name="group")
-    public void setGroup(Picky picker, int group) {
+    @ReactProp(name="column")
+    public void setColumn(Picky picker, int column) {
       if (picker != null) {
-        picker.setGroup(group);
+        picker.setColumn(column);
       }
@@ -65,0 +65,0 @@ }

ios/Picky.h

@@ -18,2 +18,3 @@ //
 @property (nonatomic, copy) NSArray *data;
+@property (nonatomic, copy) NSArray *columnWidths;
 @property (nonatomic, copy) NSArray *selectedIndexes;
@@ -20,0 +21,0 @@

ios/Picky.m

@@ -28,2 +28,3 @@ //
     _loopThreshold = 1;
+    _columnWidths = [NSArray new];
     _selectedIndexes = [NSArray new];
@@ -50,2 +51,9 @@
 
+- (void)setColumnWidths:(NSArray *)columnWidths
+{
+  _columnWidths = [columnWidths copy];
+
+  [self setNeedsLayout];
+}
+
 - (void)setSelectedIndexes:(NSArray *)selectedIndexes
@@ -95,3 +103,3 @@ {
 
-- (void) setFont:(UIFont *)font
+- (void)setFont:(UIFont *)font
 {
@@ -134,3 +142,3 @@ _font = font;
 {
-  return [[_data objectAtIndex: component] count] * _loopThreshold;
+  return [[_data objectAtIndex:component] count] * _loopThreshold;
 }
@@ -147,6 +155,16 @@
 
-- (CGFloat)pickerView:(__unused UIPickerView *)pickerView rowHeightForComponent:(__unused NSInteger) component {
+- (CGFloat)pickerView:(__unused UIPickerView *)pickerView
+rowHeightForComponent:(__unused NSInteger) component {
   return (_font.lineHeight) * _numberOfLines + 20;
 }
 
+- (CGFloat)pickerView:(__unused UIPickerView *)pickerView
+    widthForComponent:(__unused NSInteger)component {
+  if ([_columnWidths count] == 0) {
+    return 0;
+  }
+
+  return [[_columnWidths objectAtIndex:component] floatValue];
+}
+
 - (UIView *)pickerView:(UIPickerView *)pickerView
@@ -203,3 +221,3 @@ viewForRow:(NSInteger)row
     _onChange(@{
-      @"group": @(component),
+      @"column": @(component),
       @"index": @(newRow),
@@ -206,0 +224,0 @@ @"value": RCTNullIfNil([self dataForRow:row inComponent:component][@"value"]),

ios/PickyManager.m

@@ -26,2 +26,4 @@ //
 
+RCT_EXPORT_VIEW_PROPERTY(columnWidths, NSNumberArray)
+
 RCT_EXPORT_VIEW_PROPERTY(selectedIndexes, NSNumberArray)
@@ -28,0 +30,0 @@

lib/commonjs/index.js

@@ -12,6 +12,6 @@ "use strict";
 });
-Object.defineProperty(exports, "PickerGroup", {
+Object.defineProperty(exports, "PickerColumn", {
   enumerable: true,
   get: function () {
-    return _PickerGroup.PickerGroup;
+    return _PickerColumn.PickerColumn;
   }
@@ -28,5 +28,5 @@ });
 
-var _PickerGroup = require("./PickerGroup");
+var _PickerColumn = require("./PickerColumn");
 
 var _PickerItem = require("./PickerItem");
 //# sourceMappingURL=index.js.map

lib/commonjs/index.js.map

@@ -1,1 +0,1 @@
-{"version":3,"names":[],"sources":["index.ts"],"sourcesContent":["export { Picker } from './Picker';\nexport { PickerGroup } from './PickerGroup';\nexport { PickerItem } from './PickerItem';\n\nexport type { PickerProps } from './Picker';\nexport type { PickerGroupProps } from './PickerGroup';\nexport type { PickerItemProps } from './PickerItem';\nexport type { PickerGroupChangeItem } from './types';\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;AAAA;;AACA;;AACA"}
+{"version":3,"names":[],"sources":["index.ts"],"sourcesContent":["export { Picker } from './Picker';\nexport { PickerColumn } from './PickerColumn';\nexport { PickerItem } from './PickerItem';\n\nexport type { PickerProps } from './Picker';\nexport type { PickerColumnProps } from './PickerColumn';\nexport type { PickerItemProps } from './PickerItem';\nexport type { PickerColumnChangeItem } from './types';\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;AAAA;;AACA;;AACA"}

lib/commonjs/NativePicker.js.map

@@ -1,1 +0,1 @@
-{"version":3,"names":["ComponentName","NativePicker","requireNativeComponent"],"sources":["NativePicker.tsx"],"sourcesContent":["import { requireNativeComponent, StyleProp, ViewStyle } from 'react-native';\nimport type {\n  NativeColorType,\n  NativeOnChange,\n  NativePickerDataItem,\n} from './types';\n\nconst ComponentName = 'Picky';\n\ntype NativeIOSData = NativePickerDataItem[];\ntype NativeAndroidData = NativePickerDataItem;\n\ntype NativeCommonProps = {\n  loop?: boolean;\n  data: NativeIOSData | NativeAndroidData;\n  onChange?: NativeOnChange;\n};\n\ntype NativeIOSProps = {\n  style?: StyleProp<ViewStyle>;\n  selectedIndexes?: number[];\n  testID?: string;\n};\n\ntype NativeAndroidProps = {\n  group?: number;\n  curtainColor?: NativeColorType;\n  hasCurtain?: boolean;\n  hasIndicator?: boolean;\n  indicatorSize?: number;\n  indicatorColor?: NativeColorType;\n  itemSpace?: number;\n  textColor?: NativeColorType;\n  textSize?: number;\n  selectedIndex?: number;\n};\n\nexport type NativePickerProps = NativeCommonProps &\n  (NativeIOSProps | NativeAndroidProps);\n\nexport const NativePicker =\n  requireNativeComponent<NativePickerProps>(ComponentName);\n"],"mappings":";;;;;;;AAAA;;AAOA,MAAMA,aAAa,GAAG,OAAtB;AAiCO,MAAMC,YAAY,GACvB,IAAAC,mCAAA,EAA0CF,aAA1C,CADK"}
+{"version":3,"names":["ComponentName","NativePicker","requireNativeComponent"],"sources":["NativePicker.tsx"],"sourcesContent":["import { requireNativeComponent, StyleProp, ViewStyle } from 'react-native';\nimport type {\n  NativeColorType,\n  NativeOnChange,\n  NativePickerDataItem,\n} from './types';\n\nconst ComponentName = 'Picky';\n\ntype NativeIOSData = NativePickerDataItem[];\ntype NativeAndroidData = NativePickerDataItem;\n\ntype NativeCommonProps = {\n  loop?: boolean;\n  data: NativeIOSData | NativeAndroidData;\n  onChange?: NativeOnChange;\n};\n\ntype NativeIOSProps = {\n  numberOfLines?: number;\n  columnWidths: number[];\n  style?: StyleProp<ViewStyle>;\n  selectedIndexes?: number[];\n  testID?: string;\n};\n\ntype NativeAndroidProps = {\n  column?: number;\n  curtainColor?: NativeColorType;\n  hasCurtain?: boolean;\n  hasIndicator?: boolean;\n  indicatorSize?: number;\n  indicatorColor?: NativeColorType;\n  itemSpace?: number;\n  textColor?: NativeColorType;\n  textSize?: number;\n  selectedIndex?: number;\n};\n\nexport type NativePickerProps = NativeCommonProps &\n  (NativeIOSProps | NativeAndroidProps);\n\nexport const NativePicker =\n  requireNativeComponent<NativePickerProps>(ComponentName);\n"],"mappings":";;;;;;;AAAA;;AAOA,MAAMA,aAAa,GAAG,OAAtB;AAmCO,MAAMC,YAAY,GACvB,IAAAC,mCAAA,EAA0CF,aAA1C,CADK"}

lib/commonjs/Picker.js

@@ -29,2 +29,3 @@ "use strict";
     loop,
+    numberOfLines = 1,
     onChange,
@@ -36,7 +37,13 @@ style,
   const {
+    width: windowWidth
+  } = (0, _reactNative.useWindowDimensions)();
+  const [viewWidth, setViewWidth] = (0, _react.useState)(windowWidth);
+  const {
     data,
+    columnWidths,
     selectedIndexes
-  } = useGroupedNativePicker({
+  } = useNativePickerColumns({
     children,
-    textColor
+    textColor,
+    viewWidth
   });
@@ -52,18 +59,32 @@ const handleOnChange = (0, _react.useCallback)(_ref2 => {
 
-    _react.Children.forEach(children, (groupChild, index) => {
-      if (index === nativeEvent.group && groupChild.props.onChange) {
-        groupChild.props.onChange(nativeEvent);
+    _react.Children.forEach(children, (columnChild, index) => {
+      if (index === nativeEvent.column && columnChild.props.onChange) {
+        columnChild.props.onChange(nativeEvent);
       }
     });
   }, [onChange, children]);
+  const handleOnLayout = (0, _react.useCallback)(_ref3 => {
+    let {
+      nativeEvent: {
+        layout: {
+          width
+        }
+      }
+    } = _ref3;
+    return setViewWidth(width);
+  }, []);
 
   if (_reactNative.Platform.OS === 'ios') {
-    return /*#__PURE__*/_react.default.createElement(_NativePicker.NativePicker, {
+    return /*#__PURE__*/_react.default.createElement(_reactNative.View, {
+      onLayout: handleOnLayout
+    }, /*#__PURE__*/_react.default.createElement(_NativePicker.NativePicker, {
       selectedIndexes: selectedIndexes,
       onChange: handleOnChange,
+      numberOfLines: numberOfLines,
       data: data,
+      columnWidths: columnWidths,
       loop: loop,
       style: [styles.picker, style],
       testID: testID
-    });
+    }));
   }
@@ -73,8 +94,11 @@
     return /*#__PURE__*/_react.default.createElement(_reactNative.View, {
+      onLayout: handleOnLayout,
       style: styles.androidContainer
     }, data.map((componentData, index) => /*#__PURE__*/_react.default.createElement(_reactNative.View, {
       key: `picky-component-${index}`,
-      style: [styles.androidPickyContainer, style]
+      style: [{
+        width: columnWidths[index] + LABEL_INSET_SPACE
+      }, style]
     }, /*#__PURE__*/_react.default.createElement(_NativePicker.NativePicker, {
-      group: index,
+      column: index,
       data: componentData,
@@ -102,22 +126,25 @@ loop: loop,
 
-const useGroupedNativePicker = _ref3 => {
+const useNativePickerColumns = _ref4 => {
   let {
+    viewWidth,
     children,
     textColor
-  } = _ref3;
+  } = _ref4;
   return (0, _react.useMemo)(() => {
+    let columnWidths = [];
     const selectedIndexes = [];
     const data = [];
+    let availableSpace = viewWidth;
 
-    _react.Children.forEach(children, (groupChild, groupChildIndex) => {
-      const groupItems = [];
+    _react.Children.forEach(children, (columnChild, columnChildIndex) => {
+      const columnItems = [];
 
-      _react.Children.forEach(groupChild.props.children, (itemChild, itemChildIndex) => {
+      _react.Children.forEach(columnChild.props.children, (itemChild, itemChildIndex) => {
         var _itemChild$props$colo;
 
-        if (groupChild.props.selectedValue && itemChild.props.value === groupChild.props.selectedValue && selectedIndexes.length <= groupChildIndex) {
+        if (columnChild.props.selectedValue && itemChild.props.value === columnChild.props.selectedValue && selectedIndexes.length <= columnChildIndex) {
           selectedIndexes.push(itemChildIndex);
         }
 
-        groupItems.push({
+        columnItems.push({
           label: itemChild.props.label,
@@ -130,23 +157,39 @@ value: itemChild.props.value,
 
-      if (selectedIndexes.length <= groupChildIndex) {
+      if (selectedIndexes.length <= columnChildIndex) {
         selectedIndexes.push(0);
       }
 
-      data.push(groupItems);
-    });
+      if (typeof columnChild.props.width === 'number') {
+        const w = Math.max(columnChild.props.width - LABEL_INSET_SPACE, 0);
+        availableSpace -= columnChild.props.width;
+        columnWidths.push(w);
+      } else {
+        columnWidths.push(-1);
+      }
 
+      data.push(columnItems);
+    }); // Automatically set width for remaining columns to the available space
+
+
+    const columnsWithoutWidth = columnWidths.filter(w => w < 0);
+
+    if (columnsWithoutWidth.length) {
+      columnWidths = columnWidths.map(w => w < 0 ? Math.max(availableSpace / columnsWithoutWidth.length - LABEL_INSET_SPACE, 0) : w);
+    }
+
     return {
       data,
+      columnWidths,
       selectedIndexes
     };
-  }, [children, textColor]);
+  }, [children, textColor, viewWidth]);
 };
 
+const LABEL_INSET_SPACE = 20;
+
 const styles = _reactNative.StyleSheet.create({
   androidContainer: {
-    flexDirection: 'row'
+    flexDirection: 'row',
+    width: '100%'
   },
-  androidPickyContainer: {
-    flex: 1
-  },
   picker: {
@@ -153,0 +196,0 @@ height: 216

lib/commonjs/Picker.js.map

@@ -1,1 +0,1 @@
-{"version":3,"names":["Picker","curtainColor","hasCurtain","hasIndicator","indicatorColor","indicatorSize","itemSpace","textColor","textSize","loop","onChange","style","children","testID","data","selectedIndexes","useGroupedNativePicker","handleOnChange","useCallback","nativeEvent","Children","forEach","groupChild","index","group","props","Platform","OS","styles","picker","androidContainer","map","componentData","androidPickyContainer","processColor","useMemo","groupChildIndex","groupItems","itemChild","itemChildIndex","selectedValue","value","length","push","label","color","StyleSheet","create","flexDirection","flex","height"],"sources":["Picker.tsx"],"sourcesContent":["import React, { Children, ReactElement, useCallback, useMemo } from 'react';\nimport {\n  StyleSheet,\n  Platform,\n  processColor,\n  View,\n  StyleProp,\n  ViewStyle,\n} from 'react-native';\nimport { NativePicker } from './NativePicker';\nimport type { PickerGroupProps } from './PickerGroup';\nimport type {\n  NativeItem,\n  NativeOnChange,\n  NativePickerDataItem,\n  PickerGroupChangeItem,\n} from './types';\n\ntype PickerChild = ReactElement<PickerGroupProps>;\n\nexport interface PickerProps {\n  loop?: boolean;\n  children: PickerChild | PickerChild[];\n  hasCurtain?: boolean;\n  curtainColor?: string;\n  hasIndicator?: boolean;\n  indicatorColor?: string;\n  indicatorSize?: number;\n  itemSpace?: number;\n  textColor?: string;\n  textSize?: number;\n  style?: StyleProp<ViewStyle>;\n  onChange?: (item: PickerGroupChangeItem) => void;\n  testID?: string;\n}\n\nexport const Picker = ({\n  curtainColor = 'hsla(0, 0%, 0%, 0.1)',\n  hasCurtain = true,\n  hasIndicator = true,\n  indicatorColor = 'hsla(0, 0%, 0%, 0.1)',\n  indicatorSize = 1,\n  itemSpace = 12,\n  textColor = '#000000',\n  textSize = 20,\n  loop,\n  onChange,\n  style,\n  children,\n  testID,\n}: PickerProps) => {\n  const { data, selectedIndexes } = useGroupedNativePicker({\n    children,\n    textColor,\n  });\n\n  const handleOnChange: NativeOnChange = useCallback(\n    ({ nativeEvent }) => {\n      if (onChange) {\n        onChange(nativeEvent);\n      }\n\n      Children.forEach(children, (groupChild, index) => {\n        if (index === nativeEvent.group && groupChild.props.onChange) {\n          groupChild.props.onChange(nativeEvent);\n        }\n      });\n    },\n    [onChange, children]\n  );\n\n  if (Platform.OS === 'ios') {\n    return (\n      <NativePicker\n        selectedIndexes={selectedIndexes}\n        onChange={handleOnChange}\n        data={data}\n        loop={loop}\n        style={[styles.picker, style]}\n        testID={testID}\n      />\n    );\n  }\n\n  if (Platform.OS === 'android') {\n    return (\n      <View style={styles.androidContainer}>\n        {data.map((componentData, index) => (\n          <View\n            key={`picky-component-${index}`}\n            style={[styles.androidPickyContainer, style]}\n          >\n            <NativePicker\n              group={index}\n              data={componentData}\n              loop={loop}\n              onChange={handleOnChange}\n              curtainColor={processColor(curtainColor)}\n              hasCurtain={hasCurtain}\n              hasIndicator={hasIndicator}\n              indicatorColor={processColor(indicatorColor)}\n              indicatorSize={indicatorSize}\n              itemSpace={itemSpace}\n              textColor={processColor(textColor)}\n              textSize={textSize}\n              selectedIndex={selectedIndexes[index]}\n              style={styles.picker}\n              testID={testID}\n            />\n          </View>\n        ))}\n      </View>\n    );\n  }\n\n  return null;\n};\n\nconst useGroupedNativePicker = ({\n  children,\n  textColor,\n}: Required<Pick<PickerProps, 'children' | 'textColor'>>) =>\n  useMemo(() => {\n    const selectedIndexes: number[] = [];\n    const data: NativePickerDataItem[] = [];\n\n    Children.forEach(children, (groupChild, groupChildIndex) => {\n      const groupItems: NativeItem[] = [];\n\n      Children.forEach(\n        groupChild.props.children,\n        (itemChild, itemChildIndex) => {\n          if (\n            groupChild.props.selectedValue &&\n            itemChild.props.value === groupChild.props.selectedValue &&\n            selectedIndexes.length <= groupChildIndex\n          ) {\n            selectedIndexes.push(itemChildIndex);\n          }\n\n          groupItems.push({\n            label: itemChild.props.label,\n            value: itemChild.props.value,\n            textColor: processColor(itemChild.props.color ?? textColor),\n            testID: itemChild.props.testID,\n          });\n        }\n      );\n\n      if (selectedIndexes.length <= groupChildIndex) {\n        selectedIndexes.push(0);\n      }\n\n      data.push(groupItems);\n    });\n\n    return { data, selectedIndexes };\n  }, [children, textColor]);\n\nconst styles = StyleSheet.create({\n  androidContainer: {\n    flexDirection: 'row',\n  },\n  androidPickyContainer: {\n    flex: 1,\n  },\n  picker: {\n    height: 216,\n  },\n});\n"],"mappings":"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"}
+{"version":3,"names":["Picker","curtainColor","hasCurtain","hasIndicator","indicatorColor","indicatorSize","itemSpace","textColor","textSize","loop","numberOfLines","onChange","style","children","testID","width","windowWidth","useWindowDimensions","viewWidth","setViewWidth","useState","data","columnWidths","selectedIndexes","useNativePickerColumns","handleOnChange","useCallback","nativeEvent","Children","forEach","columnChild","index","column","props","handleOnLayout","layout","Platform","OS","styles","picker","androidContainer","map","componentData","LABEL_INSET_SPACE","processColor","useMemo","availableSpace","columnChildIndex","columnItems","itemChild","itemChildIndex","selectedValue","value","length","push","label","color","w","Math","max","columnsWithoutWidth","filter","StyleSheet","create","flexDirection","height"],"sources":["Picker.tsx"],"sourcesContent":["import React, {\n  Children,\n  ReactElement,\n  useCallback,\n  useMemo,\n  useState,\n} from 'react';\nimport {\n  StyleSheet,\n  Platform,\n  processColor,\n  View,\n  StyleProp,\n  ViewStyle,\n  useWindowDimensions,\n  LayoutChangeEvent,\n} from 'react-native';\nimport { NativePicker } from './NativePicker';\nimport type { PickerColumnProps } from './PickerColumn';\nimport type {\n  NativeItem,\n  NativeOnChange,\n  NativePickerDataItem,\n  PickerColumnChangeItem,\n} from './types';\n\ntype PickerChild = ReactElement<PickerColumnProps>;\n\nexport interface PickerProps {\n  loop?: boolean;\n  children: PickerChild | PickerChild[];\n  hasCurtain?: boolean;\n  curtainColor?: string;\n  hasIndicator?: boolean;\n  indicatorColor?: string;\n  indicatorSize?: number;\n  itemSpace?: number;\n  textColor?: string;\n  textSize?: number;\n  numberOfLines?: number;\n  style?: StyleProp<ViewStyle>;\n  onChange?: (item: PickerColumnChangeItem) => void;\n  testID?: string;\n}\n\nexport const Picker = ({\n  curtainColor = 'hsla(0, 0%, 0%, 0.1)',\n  hasCurtain = true,\n  hasIndicator = true,\n  indicatorColor = 'hsla(0, 0%, 0%, 0.1)',\n  indicatorSize = 1,\n  itemSpace = 12,\n  textColor = '#000000',\n  textSize = 20,\n  loop,\n  numberOfLines = 1,\n  onChange,\n  style,\n  children,\n  testID,\n}: PickerProps) => {\n  const { width: windowWidth } = useWindowDimensions();\n  const [viewWidth, setViewWidth] = useState(windowWidth);\n  const { data, columnWidths, selectedIndexes } = useNativePickerColumns({\n    children,\n    textColor,\n    viewWidth,\n  });\n\n  const handleOnChange: NativeOnChange = useCallback(\n    ({ nativeEvent }) => {\n      if (onChange) {\n        onChange(nativeEvent);\n      }\n\n      Children.forEach(children, (columnChild, index) => {\n        if (index === nativeEvent.column && columnChild.props.onChange) {\n          columnChild.props.onChange(nativeEvent);\n        }\n      });\n    },\n    [onChange, children]\n  );\n\n  const handleOnLayout = useCallback(\n    ({\n      nativeEvent: {\n        layout: { width },\n      },\n    }: LayoutChangeEvent) => setViewWidth(width),\n    []\n  );\n\n  if (Platform.OS === 'ios') {\n    return (\n      <View onLayout={handleOnLayout}>\n        <NativePicker\n          selectedIndexes={selectedIndexes}\n          onChange={handleOnChange}\n          numberOfLines={numberOfLines}\n          data={data}\n          columnWidths={columnWidths}\n          loop={loop}\n          style={[styles.picker, style]}\n          testID={testID}\n        />\n      </View>\n    );\n  }\n\n  if (Platform.OS === 'android') {\n    return (\n      <View onLayout={handleOnLayout} style={styles.androidContainer}>\n        {data.map((componentData, index) => (\n          <View\n            key={`picky-component-${index}`}\n            style={[\n              {\n                width: columnWidths[index] + LABEL_INSET_SPACE,\n              },\n              style,\n            ]}\n          >\n            <NativePicker\n              column={index}\n              data={componentData}\n              loop={loop}\n              onChange={handleOnChange}\n              curtainColor={processColor(curtainColor)}\n              hasCurtain={hasCurtain}\n              hasIndicator={hasIndicator}\n              indicatorColor={processColor(indicatorColor)}\n              indicatorSize={indicatorSize}\n              itemSpace={itemSpace}\n              textColor={processColor(textColor)}\n              textSize={textSize}\n              selectedIndex={selectedIndexes[index]}\n              style={styles.picker}\n              testID={testID}\n            />\n          </View>\n        ))}\n      </View>\n    );\n  }\n\n  return null;\n};\n\nconst useNativePickerColumns = ({\n  viewWidth,\n  children,\n  textColor,\n}: Required<Pick<PickerProps, 'children' | 'textColor'>> & {\n  viewWidth: number;\n}) =>\n  useMemo(() => {\n    let columnWidths: number[] = [];\n    const selectedIndexes: number[] = [];\n    const data: NativePickerDataItem[] = [];\n\n    let availableSpace = viewWidth;\n\n    Children.forEach(children, (columnChild, columnChildIndex) => {\n      const columnItems: NativeItem[] = [];\n\n      Children.forEach(\n        columnChild.props.children,\n        (itemChild, itemChildIndex) => {\n          if (\n            columnChild.props.selectedValue &&\n            itemChild.props.value === columnChild.props.selectedValue &&\n            selectedIndexes.length <= columnChildIndex\n          ) {\n            selectedIndexes.push(itemChildIndex);\n          }\n\n          columnItems.push({\n            label: itemChild.props.label,\n            value: itemChild.props.value,\n            textColor: processColor(itemChild.props.color ?? textColor),\n            testID: itemChild.props.testID,\n          });\n        }\n      );\n\n      if (selectedIndexes.length <= columnChildIndex) {\n        selectedIndexes.push(0);\n      }\n\n      if (typeof columnChild.props.width === 'number') {\n        const w = Math.max(columnChild.props.width - LABEL_INSET_SPACE, 0);\n\n        availableSpace -= columnChild.props.width;\n\n        columnWidths.push(w);\n      } else {\n        columnWidths.push(-1);\n      }\n\n      data.push(columnItems);\n    });\n\n    // Automatically set width for remaining columns to the available space\n    const columnsWithoutWidth = columnWidths.filter((w) => w < 0);\n    if (columnsWithoutWidth.length) {\n      columnWidths = columnWidths.map((w) =>\n        w < 0\n          ? Math.max(\n              availableSpace / columnsWithoutWidth.length - LABEL_INSET_SPACE,\n              0\n            )\n          : w\n      );\n    }\n\n    return { data, columnWidths, selectedIndexes };\n  }, [children, textColor, viewWidth]);\n\nconst LABEL_INSET_SPACE = 20;\n\nconst styles = StyleSheet.create({\n  androidContainer: {\n    flexDirection: 'row',\n    width: '100%',\n  },\n  picker: {\n    height: 216,\n  },\n});\n"],"mappings":"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"}

lib/commonjs/types.js.map

@@ -1,1 +0,1 @@
-{"version":3,"names":[],"sources":["types.ts"],"sourcesContent":["import type { NativeSyntheticEvent, processColor } from 'react-native';\n\nexport type NativeColorType = ReturnType<typeof processColor>;\n\nexport type NativeItem = {\n  label: string;\n  value: string | number;\n  testID?: string;\n  textColor: NativeColorType;\n};\n\nexport type NativePickerDataItem = NativeItem[];\n\nexport type PickerGroupChangeItem = {\n  value: string | number;\n  index: number;\n  group: number;\n};\n\nexport type NativePickerChangeEvent = {\n  group: number;\n  index: number;\n  value: string | number;\n};\n\nexport type NativeOnChange = (\n  event: NativeSyntheticEvent<NativePickerChangeEvent>\n) => void;\n"],"mappings":""}
+{"version":3,"names":[],"sources":["types.ts"],"sourcesContent":["import type { NativeSyntheticEvent, processColor } from 'react-native';\n\nexport type NativeColorType = ReturnType<typeof processColor>;\n\nexport type NativeItem = {\n  label: string;\n  value: string | number;\n  testID?: string;\n  textColor: NativeColorType;\n};\n\nexport type NativePickerDataItem = NativeItem[];\n\nexport type PickerColumnChangeItem = {\n  value: string | number;\n  index: number;\n  column: number;\n};\n\nexport type NativePickerChangeEvent = {\n  column: number;\n  index: number;\n  value: string | number;\n};\n\nexport type NativeOnChange = (\n  event: NativeSyntheticEvent<NativePickerChangeEvent>\n) => void;\n"],"mappings":""}

lib/module/index.js

 export { Picker } from './Picker';
-export { PickerGroup } from './PickerGroup';
+export { PickerColumn } from './PickerColumn';
 export { PickerItem } from './PickerItem';
 //# sourceMappingURL=index.js.map

lib/module/index.js.map

@@ -1,1 +0,1 @@
-{"version":3,"names":["Picker","PickerGroup","PickerItem"],"sources":["index.ts"],"sourcesContent":["export { Picker } from './Picker';\nexport { PickerGroup } from './PickerGroup';\nexport { PickerItem } from './PickerItem';\n\nexport type { PickerProps } from './Picker';\nexport type { PickerGroupProps } from './PickerGroup';\nexport type { PickerItemProps } from './PickerItem';\nexport type { PickerGroupChangeItem } from './types';\n"],"mappings":"AAAA,SAASA,MAAT,QAAuB,UAAvB;AACA,SAASC,WAAT,QAA4B,eAA5B;AACA,SAASC,UAAT,QAA2B,cAA3B"}
+{"version":3,"names":["Picker","PickerColumn","PickerItem"],"sources":["index.ts"],"sourcesContent":["export { Picker } from './Picker';\nexport { PickerColumn } from './PickerColumn';\nexport { PickerItem } from './PickerItem';\n\nexport type { PickerProps } from './Picker';\nexport type { PickerColumnProps } from './PickerColumn';\nexport type { PickerItemProps } from './PickerItem';\nexport type { PickerColumnChangeItem } from './types';\n"],"mappings":"AAAA,SAASA,MAAT,QAAuB,UAAvB;AACA,SAASC,YAAT,QAA6B,gBAA7B;AACA,SAASC,UAAT,QAA2B,cAA3B"}

lib/module/NativePicker.js.map

@@ -1,1 +0,1 @@
-{"version":3,"names":["requireNativeComponent","ComponentName","NativePicker"],"sources":["NativePicker.tsx"],"sourcesContent":["import { requireNativeComponent, StyleProp, ViewStyle } from 'react-native';\nimport type {\n  NativeColorType,\n  NativeOnChange,\n  NativePickerDataItem,\n} from './types';\n\nconst ComponentName = 'Picky';\n\ntype NativeIOSData = NativePickerDataItem[];\ntype NativeAndroidData = NativePickerDataItem;\n\ntype NativeCommonProps = {\n  loop?: boolean;\n  data: NativeIOSData | NativeAndroidData;\n  onChange?: NativeOnChange;\n};\n\ntype NativeIOSProps = {\n  style?: StyleProp<ViewStyle>;\n  selectedIndexes?: number[];\n  testID?: string;\n};\n\ntype NativeAndroidProps = {\n  group?: number;\n  curtainColor?: NativeColorType;\n  hasCurtain?: boolean;\n  hasIndicator?: boolean;\n  indicatorSize?: number;\n  indicatorColor?: NativeColorType;\n  itemSpace?: number;\n  textColor?: NativeColorType;\n  textSize?: number;\n  selectedIndex?: number;\n};\n\nexport type NativePickerProps = NativeCommonProps &\n  (NativeIOSProps | NativeAndroidProps);\n\nexport const NativePicker =\n  requireNativeComponent<NativePickerProps>(ComponentName);\n"],"mappings":"AAAA,SAASA,sBAAT,QAA6D,cAA7D;AAOA,MAAMC,aAAa,GAAG,OAAtB;AAiCA,OAAO,MAAMC,YAAY,GACvBF,sBAAsB,CAAoBC,aAApB,CADjB"}
+{"version":3,"names":["requireNativeComponent","ComponentName","NativePicker"],"sources":["NativePicker.tsx"],"sourcesContent":["import { requireNativeComponent, StyleProp, ViewStyle } from 'react-native';\nimport type {\n  NativeColorType,\n  NativeOnChange,\n  NativePickerDataItem,\n} from './types';\n\nconst ComponentName = 'Picky';\n\ntype NativeIOSData = NativePickerDataItem[];\ntype NativeAndroidData = NativePickerDataItem;\n\ntype NativeCommonProps = {\n  loop?: boolean;\n  data: NativeIOSData | NativeAndroidData;\n  onChange?: NativeOnChange;\n};\n\ntype NativeIOSProps = {\n  numberOfLines?: number;\n  columnWidths: number[];\n  style?: StyleProp<ViewStyle>;\n  selectedIndexes?: number[];\n  testID?: string;\n};\n\ntype NativeAndroidProps = {\n  column?: number;\n  curtainColor?: NativeColorType;\n  hasCurtain?: boolean;\n  hasIndicator?: boolean;\n  indicatorSize?: number;\n  indicatorColor?: NativeColorType;\n  itemSpace?: number;\n  textColor?: NativeColorType;\n  textSize?: number;\n  selectedIndex?: number;\n};\n\nexport type NativePickerProps = NativeCommonProps &\n  (NativeIOSProps | NativeAndroidProps);\n\nexport const NativePicker =\n  requireNativeComponent<NativePickerProps>(ComponentName);\n"],"mappings":"AAAA,SAASA,sBAAT,QAA6D,cAA7D;AAOA,MAAMC,aAAa,GAAG,OAAtB;AAmCA,OAAO,MAAMC,YAAY,GACvBF,sBAAsB,CAAoBC,aAApB,CADjB"}

lib/module/Picker.js

@@ -1,3 +0,3 @@
-import React, { Children, useCallback, useMemo } from 'react';
-import { StyleSheet, Platform, processColor, View } from 'react-native';
+import React, { Children, useCallback, useMemo, useState } from 'react';
+import { StyleSheet, Platform, processColor, View, useWindowDimensions } from 'react-native';
 import { NativePicker } from './NativePicker';
@@ -15,2 +15,3 @@ export const Picker = _ref => {
     loop,
+    numberOfLines = 1,
     onChange,
@@ -22,7 +23,13 @@ style,
   const {
+    width: windowWidth
+  } = useWindowDimensions();
+  const [viewWidth, setViewWidth] = useState(windowWidth);
+  const {
     data,
+    columnWidths,
     selectedIndexes
-  } = useGroupedNativePicker({
+  } = useNativePickerColumns({
     children,
-    textColor
+    textColor,
+    viewWidth
   });
@@ -38,18 +45,32 @@ const handleOnChange = useCallback(_ref2 => {
 
-    Children.forEach(children, (groupChild, index) => {
-      if (index === nativeEvent.group && groupChild.props.onChange) {
-        groupChild.props.onChange(nativeEvent);
+    Children.forEach(children, (columnChild, index) => {
+      if (index === nativeEvent.column && columnChild.props.onChange) {
+        columnChild.props.onChange(nativeEvent);
       }
     });
   }, [onChange, children]);
+  const handleOnLayout = useCallback(_ref3 => {
+    let {
+      nativeEvent: {
+        layout: {
+          width
+        }
+      }
+    } = _ref3;
+    return setViewWidth(width);
+  }, []);
 
   if (Platform.OS === 'ios') {
-    return /*#__PURE__*/React.createElement(NativePicker, {
+    return /*#__PURE__*/React.createElement(View, {
+      onLayout: handleOnLayout
+    }, /*#__PURE__*/React.createElement(NativePicker, {
       selectedIndexes: selectedIndexes,
       onChange: handleOnChange,
+      numberOfLines: numberOfLines,
       data: data,
+      columnWidths: columnWidths,
       loop: loop,
       style: [styles.picker, style],
       testID: testID
-    });
+    }));
   }
@@ -59,8 +80,11 @@
     return /*#__PURE__*/React.createElement(View, {
+      onLayout: handleOnLayout,
       style: styles.androidContainer
     }, data.map((componentData, index) => /*#__PURE__*/React.createElement(View, {
       key: `picky-component-${index}`,
-      style: [styles.androidPickyContainer, style]
+      style: [{
+        width: columnWidths[index] + LABEL_INSET_SPACE
+      }, style]
     }, /*#__PURE__*/React.createElement(NativePicker, {
-      group: index,
+      column: index,
       data: componentData,
@@ -86,20 +110,23 @@ loop: loop,
 
-const useGroupedNativePicker = _ref3 => {
+const useNativePickerColumns = _ref4 => {
   let {
+    viewWidth,
     children,
     textColor
-  } = _ref3;
+  } = _ref4;
   return useMemo(() => {
+    let columnWidths = [];
     const selectedIndexes = [];
     const data = [];
-    Children.forEach(children, (groupChild, groupChildIndex) => {
-      const groupItems = [];
-      Children.forEach(groupChild.props.children, (itemChild, itemChildIndex) => {
+    let availableSpace = viewWidth;
+    Children.forEach(children, (columnChild, columnChildIndex) => {
+      const columnItems = [];
+      Children.forEach(columnChild.props.children, (itemChild, itemChildIndex) => {
         var _itemChild$props$colo;
 
-        if (groupChild.props.selectedValue && itemChild.props.value === groupChild.props.selectedValue && selectedIndexes.length <= groupChildIndex) {
+        if (columnChild.props.selectedValue && itemChild.props.value === columnChild.props.selectedValue && selectedIndexes.length <= columnChildIndex) {
           selectedIndexes.push(itemChildIndex);
         }
 
-        groupItems.push({
+        columnItems.push({
           label: itemChild.props.label,
@@ -112,22 +139,37 @@ value: itemChild.props.value,
 
-      if (selectedIndexes.length <= groupChildIndex) {
+      if (selectedIndexes.length <= columnChildIndex) {
         selectedIndexes.push(0);
       }
 
-      data.push(groupItems);
-    });
+      if (typeof columnChild.props.width === 'number') {
+        const w = Math.max(columnChild.props.width - LABEL_INSET_SPACE, 0);
+        availableSpace -= columnChild.props.width;
+        columnWidths.push(w);
+      } else {
+        columnWidths.push(-1);
+      }
+
+      data.push(columnItems);
+    }); // Automatically set width for remaining columns to the available space
+
+    const columnsWithoutWidth = columnWidths.filter(w => w < 0);
+
+    if (columnsWithoutWidth.length) {
+      columnWidths = columnWidths.map(w => w < 0 ? Math.max(availableSpace / columnsWithoutWidth.length - LABEL_INSET_SPACE, 0) : w);
+    }
+
     return {
       data,
+      columnWidths,
       selectedIndexes
     };
-  }, [children, textColor]);
+  }, [children, textColor, viewWidth]);
 };
 
+const LABEL_INSET_SPACE = 20;
 const styles = StyleSheet.create({
   androidContainer: {
-    flexDirection: 'row'
+    flexDirection: 'row',
+    width: '100%'
   },
-  androidPickyContainer: {
-    flex: 1
-  },
   picker: {
@@ -134,0 +176,0 @@ height: 216

lib/module/Picker.js.map

@@ -1,1 +0,1 @@
-{"version":3,"names":["React","Children","useCallback","useMemo","StyleSheet","Platform","processColor","View","NativePicker","Picker","curtainColor","hasCurtain","hasIndicator","indicatorColor","indicatorSize","itemSpace","textColor","textSize","loop","onChange","style","children","testID","data","selectedIndexes","useGroupedNativePicker","handleOnChange","nativeEvent","forEach","groupChild","index","group","props","OS","styles","picker","androidContainer","map","componentData","androidPickyContainer","groupChildIndex","groupItems","itemChild","itemChildIndex","selectedValue","value","length","push","label","color","create","flexDirection","flex","height"],"sources":["Picker.tsx"],"sourcesContent":["import React, { Children, ReactElement, useCallback, useMemo } from 'react';\nimport {\n  StyleSheet,\n  Platform,\n  processColor,\n  View,\n  StyleProp,\n  ViewStyle,\n} from 'react-native';\nimport { NativePicker } from './NativePicker';\nimport type { PickerGroupProps } from './PickerGroup';\nimport type {\n  NativeItem,\n  NativeOnChange,\n  NativePickerDataItem,\n  PickerGroupChangeItem,\n} from './types';\n\ntype PickerChild = ReactElement<PickerGroupProps>;\n\nexport interface PickerProps {\n  loop?: boolean;\n  children: PickerChild | PickerChild[];\n  hasCurtain?: boolean;\n  curtainColor?: string;\n  hasIndicator?: boolean;\n  indicatorColor?: string;\n  indicatorSize?: number;\n  itemSpace?: number;\n  textColor?: string;\n  textSize?: number;\n  style?: StyleProp<ViewStyle>;\n  onChange?: (item: PickerGroupChangeItem) => void;\n  testID?: string;\n}\n\nexport const Picker = ({\n  curtainColor = 'hsla(0, 0%, 0%, 0.1)',\n  hasCurtain = true,\n  hasIndicator = true,\n  indicatorColor = 'hsla(0, 0%, 0%, 0.1)',\n  indicatorSize = 1,\n  itemSpace = 12,\n  textColor = '#000000',\n  textSize = 20,\n  loop,\n  onChange,\n  style,\n  children,\n  testID,\n}: PickerProps) => {\n  const { data, selectedIndexes } = useGroupedNativePicker({\n    children,\n    textColor,\n  });\n\n  const handleOnChange: NativeOnChange = useCallback(\n    ({ nativeEvent }) => {\n      if (onChange) {\n        onChange(nativeEvent);\n      }\n\n      Children.forEach(children, (groupChild, index) => {\n        if (index === nativeEvent.group && groupChild.props.onChange) {\n          groupChild.props.onChange(nativeEvent);\n        }\n      });\n    },\n    [onChange, children]\n  );\n\n  if (Platform.OS === 'ios') {\n    return (\n      <NativePicker\n        selectedIndexes={selectedIndexes}\n        onChange={handleOnChange}\n        data={data}\n        loop={loop}\n        style={[styles.picker, style]}\n        testID={testID}\n      />\n    );\n  }\n\n  if (Platform.OS === 'android') {\n    return (\n      <View style={styles.androidContainer}>\n        {data.map((componentData, index) => (\n          <View\n            key={`picky-component-${index}`}\n            style={[styles.androidPickyContainer, style]}\n          >\n            <NativePicker\n              group={index}\n              data={componentData}\n              loop={loop}\n              onChange={handleOnChange}\n              curtainColor={processColor(curtainColor)}\n              hasCurtain={hasCurtain}\n              hasIndicator={hasIndicator}\n              indicatorColor={processColor(indicatorColor)}\n              indicatorSize={indicatorSize}\n              itemSpace={itemSpace}\n              textColor={processColor(textColor)}\n              textSize={textSize}\n              selectedIndex={selectedIndexes[index]}\n              style={styles.picker}\n              testID={testID}\n            />\n          </View>\n        ))}\n      </View>\n    );\n  }\n\n  return null;\n};\n\nconst useGroupedNativePicker = ({\n  children,\n  textColor,\n}: Required<Pick<PickerProps, 'children' | 'textColor'>>) =>\n  useMemo(() => {\n    const selectedIndexes: number[] = [];\n    const data: NativePickerDataItem[] = [];\n\n    Children.forEach(children, (groupChild, groupChildIndex) => {\n      const groupItems: NativeItem[] = [];\n\n      Children.forEach(\n        groupChild.props.children,\n        (itemChild, itemChildIndex) => {\n          if (\n            groupChild.props.selectedValue &&\n            itemChild.props.value === groupChild.props.selectedValue &&\n            selectedIndexes.length <= groupChildIndex\n          ) {\n            selectedIndexes.push(itemChildIndex);\n          }\n\n          groupItems.push({\n            label: itemChild.props.label,\n            value: itemChild.props.value,\n            textColor: processColor(itemChild.props.color ?? textColor),\n            testID: itemChild.props.testID,\n          });\n        }\n      );\n\n      if (selectedIndexes.length <= groupChildIndex) {\n        selectedIndexes.push(0);\n      }\n\n      data.push(groupItems);\n    });\n\n    return { data, selectedIndexes };\n  }, [children, textColor]);\n\nconst styles = StyleSheet.create({\n  androidContainer: {\n    flexDirection: 'row',\n  },\n  androidPickyContainer: {\n    flex: 1,\n  },\n  picker: {\n    height: 216,\n  },\n});\n"],"mappings":"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"}
+{"version":3,"names":["React","Children","useCallback","useMemo","useState","StyleSheet","Platform","processColor","View","useWindowDimensions","NativePicker","Picker","curtainColor","hasCurtain","hasIndicator","indicatorColor","indicatorSize","itemSpace","textColor","textSize","loop","numberOfLines","onChange","style","children","testID","width","windowWidth","viewWidth","setViewWidth","data","columnWidths","selectedIndexes","useNativePickerColumns","handleOnChange","nativeEvent","forEach","columnChild","index","column","props","handleOnLayout","layout","OS","styles","picker","androidContainer","map","componentData","LABEL_INSET_SPACE","availableSpace","columnChildIndex","columnItems","itemChild","itemChildIndex","selectedValue","value","length","push","label","color","w","Math","max","columnsWithoutWidth","filter","create","flexDirection","height"],"sources":["Picker.tsx"],"sourcesContent":["import React, {\n  Children,\n  ReactElement,\n  useCallback,\n  useMemo,\n  useState,\n} from 'react';\nimport {\n  StyleSheet,\n  Platform,\n  processColor,\n  View,\n  StyleProp,\n  ViewStyle,\n  useWindowDimensions,\n  LayoutChangeEvent,\n} from 'react-native';\nimport { NativePicker } from './NativePicker';\nimport type { PickerColumnProps } from './PickerColumn';\nimport type {\n  NativeItem,\n  NativeOnChange,\n  NativePickerDataItem,\n  PickerColumnChangeItem,\n} from './types';\n\ntype PickerChild = ReactElement<PickerColumnProps>;\n\nexport interface PickerProps {\n  loop?: boolean;\n  children: PickerChild | PickerChild[];\n  hasCurtain?: boolean;\n  curtainColor?: string;\n  hasIndicator?: boolean;\n  indicatorColor?: string;\n  indicatorSize?: number;\n  itemSpace?: number;\n  textColor?: string;\n  textSize?: number;\n  numberOfLines?: number;\n  style?: StyleProp<ViewStyle>;\n  onChange?: (item: PickerColumnChangeItem) => void;\n  testID?: string;\n}\n\nexport const Picker = ({\n  curtainColor = 'hsla(0, 0%, 0%, 0.1)',\n  hasCurtain = true,\n  hasIndicator = true,\n  indicatorColor = 'hsla(0, 0%, 0%, 0.1)',\n  indicatorSize = 1,\n  itemSpace = 12,\n  textColor = '#000000',\n  textSize = 20,\n  loop,\n  numberOfLines = 1,\n  onChange,\n  style,\n  children,\n  testID,\n}: PickerProps) => {\n  const { width: windowWidth } = useWindowDimensions();\n  const [viewWidth, setViewWidth] = useState(windowWidth);\n  const { data, columnWidths, selectedIndexes } = useNativePickerColumns({\n    children,\n    textColor,\n    viewWidth,\n  });\n\n  const handleOnChange: NativeOnChange = useCallback(\n    ({ nativeEvent }) => {\n      if (onChange) {\n        onChange(nativeEvent);\n      }\n\n      Children.forEach(children, (columnChild, index) => {\n        if (index === nativeEvent.column && columnChild.props.onChange) {\n          columnChild.props.onChange(nativeEvent);\n        }\n      });\n    },\n    [onChange, children]\n  );\n\n  const handleOnLayout = useCallback(\n    ({\n      nativeEvent: {\n        layout: { width },\n      },\n    }: LayoutChangeEvent) => setViewWidth(width),\n    []\n  );\n\n  if (Platform.OS === 'ios') {\n    return (\n      <View onLayout={handleOnLayout}>\n        <NativePicker\n          selectedIndexes={selectedIndexes}\n          onChange={handleOnChange}\n          numberOfLines={numberOfLines}\n          data={data}\n          columnWidths={columnWidths}\n          loop={loop}\n          style={[styles.picker, style]}\n          testID={testID}\n        />\n      </View>\n    );\n  }\n\n  if (Platform.OS === 'android') {\n    return (\n      <View onLayout={handleOnLayout} style={styles.androidContainer}>\n        {data.map((componentData, index) => (\n          <View\n            key={`picky-component-${index}`}\n            style={[\n              {\n                width: columnWidths[index] + LABEL_INSET_SPACE,\n              },\n              style,\n            ]}\n          >\n            <NativePicker\n              column={index}\n              data={componentData}\n              loop={loop}\n              onChange={handleOnChange}\n              curtainColor={processColor(curtainColor)}\n              hasCurtain={hasCurtain}\n              hasIndicator={hasIndicator}\n              indicatorColor={processColor(indicatorColor)}\n              indicatorSize={indicatorSize}\n              itemSpace={itemSpace}\n              textColor={processColor(textColor)}\n              textSize={textSize}\n              selectedIndex={selectedIndexes[index]}\n              style={styles.picker}\n              testID={testID}\n            />\n          </View>\n        ))}\n      </View>\n    );\n  }\n\n  return null;\n};\n\nconst useNativePickerColumns = ({\n  viewWidth,\n  children,\n  textColor,\n}: Required<Pick<PickerProps, 'children' | 'textColor'>> & {\n  viewWidth: number;\n}) =>\n  useMemo(() => {\n    let columnWidths: number[] = [];\n    const selectedIndexes: number[] = [];\n    const data: NativePickerDataItem[] = [];\n\n    let availableSpace = viewWidth;\n\n    Children.forEach(children, (columnChild, columnChildIndex) => {\n      const columnItems: NativeItem[] = [];\n\n      Children.forEach(\n        columnChild.props.children,\n        (itemChild, itemChildIndex) => {\n          if (\n            columnChild.props.selectedValue &&\n            itemChild.props.value === columnChild.props.selectedValue &&\n            selectedIndexes.length <= columnChildIndex\n          ) {\n            selectedIndexes.push(itemChildIndex);\n          }\n\n          columnItems.push({\n            label: itemChild.props.label,\n            value: itemChild.props.value,\n            textColor: processColor(itemChild.props.color ?? textColor),\n            testID: itemChild.props.testID,\n          });\n        }\n      );\n\n      if (selectedIndexes.length <= columnChildIndex) {\n        selectedIndexes.push(0);\n      }\n\n      if (typeof columnChild.props.width === 'number') {\n        const w = Math.max(columnChild.props.width - LABEL_INSET_SPACE, 0);\n\n        availableSpace -= columnChild.props.width;\n\n        columnWidths.push(w);\n      } else {\n        columnWidths.push(-1);\n      }\n\n      data.push(columnItems);\n    });\n\n    // Automatically set width for remaining columns to the available space\n    const columnsWithoutWidth = columnWidths.filter((w) => w < 0);\n    if (columnsWithoutWidth.length) {\n      columnWidths = columnWidths.map((w) =>\n        w < 0\n          ? Math.max(\n              availableSpace / columnsWithoutWidth.length - LABEL_INSET_SPACE,\n              0\n            )\n          : w\n      );\n    }\n\n    return { data, columnWidths, selectedIndexes };\n  }, [children, textColor, viewWidth]);\n\nconst LABEL_INSET_SPACE = 20;\n\nconst styles = StyleSheet.create({\n  androidContainer: {\n    flexDirection: 'row',\n    width: '100%',\n  },\n  picker: {\n    height: 216,\n  },\n});\n"],"mappings":"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"}

lib/module/types.js.map

@@ -1,1 +0,1 @@
-{"version":3,"names":[],"sources":["types.ts"],"sourcesContent":["import type { NativeSyntheticEvent, processColor } from 'react-native';\n\nexport type NativeColorType = ReturnType<typeof processColor>;\n\nexport type NativeItem = {\n  label: string;\n  value: string | number;\n  testID?: string;\n  textColor: NativeColorType;\n};\n\nexport type NativePickerDataItem = NativeItem[];\n\nexport type PickerGroupChangeItem = {\n  value: string | number;\n  index: number;\n  group: number;\n};\n\nexport type NativePickerChangeEvent = {\n  group: number;\n  index: number;\n  value: string | number;\n};\n\nexport type NativeOnChange = (\n  event: NativeSyntheticEvent<NativePickerChangeEvent>\n) => void;\n"],"mappings":""}
+{"version":3,"names":[],"sources":["types.ts"],"sourcesContent":["import type { NativeSyntheticEvent, processColor } from 'react-native';\n\nexport type NativeColorType = ReturnType<typeof processColor>;\n\nexport type NativeItem = {\n  label: string;\n  value: string | number;\n  testID?: string;\n  textColor: NativeColorType;\n};\n\nexport type NativePickerDataItem = NativeItem[];\n\nexport type PickerColumnChangeItem = {\n  value: string | number;\n  index: number;\n  column: number;\n};\n\nexport type NativePickerChangeEvent = {\n  column: number;\n  index: number;\n  value: string | number;\n};\n\nexport type NativeOnChange = (\n  event: NativeSyntheticEvent<NativePickerChangeEvent>\n) => void;\n"],"mappings":""}

lib/typescript/index.d.ts

 export { Picker } from './Picker';
-export { PickerGroup } from './PickerGroup';
+export { PickerColumn } from './PickerColumn';
 export { PickerItem } from './PickerItem';
 export type { PickerProps } from './Picker';
-export type { PickerGroupProps } from './PickerGroup';
+export type { PickerColumnProps } from './PickerColumn';
 export type { PickerItemProps } from './PickerItem';
-export type { PickerGroupChangeItem } from './types';
+export type { PickerColumnChangeItem } from './types';

lib/typescript/NativePicker.d.ts

@@ -11,2 +11,4 @@ import { StyleProp, ViewStyle } from 'react-native';
 declare type NativeIOSProps = {
+    numberOfLines?: number;
+    columnWidths: number[];
     style?: StyleProp<ViewStyle>;
@@ -17,3 +19,3 @@ selectedIndexes?: number[];
 declare type NativeAndroidProps = {
-    group?: number;
+    column?: number;
     curtainColor?: NativeColorType;
@@ -20,0 +22,0 @@ hasCurtain?: boolean;

lib/typescript/Picker.d.ts

 import { ReactElement } from 'react';
 import { StyleProp, ViewStyle } from 'react-native';
-import type { PickerGroupProps } from './PickerGroup';
-import type { PickerGroupChangeItem } from './types';
-declare type PickerChild = ReactElement<PickerGroupProps>;
+import type { PickerColumnProps } from './PickerColumn';
+import type { PickerColumnChangeItem } from './types';
+declare type PickerChild = ReactElement<PickerColumnProps>;
 export interface PickerProps {
@@ -17,7 +17,8 @@ loop?: boolean;
     textSize?: number;
+    numberOfLines?: number;
     style?: StyleProp<ViewStyle>;
-    onChange?: (item: PickerGroupChangeItem) => void;
+    onChange?: (item: PickerColumnChangeItem) => void;
     testID?: string;
 }
-export declare const Picker: ({ curtainColor, hasCurtain, hasIndicator, indicatorColor, indicatorSize, itemSpace, textColor, textSize, loop, onChange, style, children, testID, }: PickerProps) => JSX.Element | null;
+export declare const Picker: ({ curtainColor, hasCurtain, hasIndicator, indicatorColor, indicatorSize, itemSpace, textColor, textSize, loop, numberOfLines, onChange, style, children, testID, }: PickerProps) => JSX.Element | null;
 export {};

lib/typescript/types.d.ts

@@ -10,9 +10,9 @@ import type { NativeSyntheticEvent, processColor } from 'react-native';
 export declare type NativePickerDataItem = NativeItem[];
-export declare type PickerGroupChangeItem = {
+export declare type PickerColumnChangeItem = {
     value: string | number;
     index: number;
-    group: number;
+    column: number;
 };
 export declare type NativePickerChangeEvent = {
-    group: number;
+    column: number;
     index: number;
@@ -19,0 +19,0 @@ value: string | number;

package.json

 {
   "name": "react-native-picky",
-  "version": "0.3.3",
+  "version": "0.4.0",
   "description": "An awesome native wheel picker component for react-native",
@@ -5,0 +5,0 @@ "main": "lib/commonjs/index",

README.md

@@ -31,7 +31,7 @@ # ⛏️ react-native-picky
 ```tsx
-import { Picker, PickerGroup, PickerItem } from 'react-native-picky';
+import { Picker, PickerColumn, PickerItem } from 'react-native-picky';
 
 export const Demo = () => (
   <Picker>
-    <PickerGroup>
+    <PickerColumn>
       <PickerItem label="Monday" value="Monday" />
@@ -42,3 +42,3 @@ <PickerItem label="Tuesday" value="Tuesday" />
       <PickerItem label="Friday" value="Friday" />
-    </PickerGroup>
+    </PickerColumn>
   </Picker>
@@ -57,2 +57,3 @@ );
 | onChange       | function | A callback function when a value is changed in any column | iOS, Android |                      |
+| numberOfLines  | number   | The number of lines for each row in a column              | iOS          | 1                    |
 | hasCurtain     | boolean  | Enable the curtain to highlight the selected value        | Android      | true                 |
@@ -67,8 +68,9 @@ | curtainColor   | string   | Color of the curtain                                      | Android      | hsla(0, 0%, 0%, 0.1) |
 
-### `<PickerGroup />`
+### `<PickerColumn />`
 
-| Property      | Type             | Description                                               | Platform     | Default |
-| ------------- | ---------------- | --------------------------------------------------------- | ------------ | ------- |
-| selectedValue | string \| number | The selected value                                        | iOS, Android |         |
-| onChange      | function         | A callback function if the value is changed in this group | iOS, Android |         |
+| Property      | Type             | Description                                                | Platform     | Default                      |
+| ------------- | ---------------- | ---------------------------------------------------------- | ------------ | ---------------------------- |
+| selectedValue | string \| number | The selected value                                         | iOS, Android |                              |
+| onChange      | function         | A callback function if the value is changed in this column | iOS, Android |                              |
+| width         | number           | The width of this column                                   | iOS, Android | Takes up the available space |
 
@@ -75,0 +77,0 @@ ### `<PickerItem />`

src/index.ts

 export { Picker } from './Picker';
-export { PickerGroup } from './PickerGroup';
+export { PickerColumn } from './PickerColumn';
 export { PickerItem } from './PickerItem';
 
 export type { PickerProps } from './Picker';
-export type { PickerGroupProps } from './PickerGroup';
+export type { PickerColumnProps } from './PickerColumn';
 export type { PickerItemProps } from './PickerItem';
-export type { PickerGroupChangeItem } from './types';
+export type { PickerColumnChangeItem } from './types';

src/NativePicker.tsx

@@ -20,2 +20,4 @@ import { requireNativeComponent, StyleProp, ViewStyle } from 'react-native';
 type NativeIOSProps = {
+  numberOfLines?: number;
+  columnWidths: number[];
   style?: StyleProp<ViewStyle>;
@@ -27,3 +29,3 @@ selectedIndexes?: number[];
 type NativeAndroidProps = {
-  group?: number;
+  column?: number;
   curtainColor?: NativeColorType;
@@ -30,0 +32,0 @@ hasCurtain?: boolean;

src/Picker.tsx

@@ -1,2 +0,8 @@
-import React, { Children, ReactElement, useCallback, useMemo } from 'react';
+import React, {
+  Children,
+  ReactElement,
+  useCallback,
+  useMemo,
+  useState,
+} from 'react';
 import {
@@ -9,5 +15,7 @@ StyleSheet,
   ViewStyle,
+  useWindowDimensions,
+  LayoutChangeEvent,
 } from 'react-native';
 import { NativePicker } from './NativePicker';
-import type { PickerGroupProps } from './PickerGroup';
+import type { PickerColumnProps } from './PickerColumn';
 import type {
@@ -17,6 +25,6 @@ NativeItem,
   NativePickerDataItem,
-  PickerGroupChangeItem,
+  PickerColumnChangeItem,
 } from './types';
 
-type PickerChild = ReactElement<PickerGroupProps>;
+type PickerChild = ReactElement<PickerColumnProps>;
 
@@ -34,4 +42,5 @@ export interface PickerProps {
   textSize?: number;
+  numberOfLines?: number;
   style?: StyleProp<ViewStyle>;
-  onChange?: (item: PickerGroupChangeItem) => void;
+  onChange?: (item: PickerColumnChangeItem) => void;
   testID?: string;
@@ -50,2 +59,3 @@ }
   loop,
+  numberOfLines = 1,
   onChange,
@@ -56,5 +66,8 @@ style,
 }: PickerProps) => {
-  const { data, selectedIndexes } = useGroupedNativePicker({
+  const { width: windowWidth } = useWindowDimensions();
+  const [viewWidth, setViewWidth] = useState(windowWidth);
+  const { data, columnWidths, selectedIndexes } = useNativePickerColumns({
     children,
     textColor,
+    viewWidth,
   });
@@ -68,5 +81,5 @@
 
-      Children.forEach(children, (groupChild, index) => {
-        if (index === nativeEvent.group && groupChild.props.onChange) {
-          groupChild.props.onChange(nativeEvent);
+      Children.forEach(children, (columnChild, index) => {
+        if (index === nativeEvent.column && columnChild.props.onChange) {
+          columnChild.props.onChange(nativeEvent);
         }
@@ -78,12 +91,25 @@ });
 
+  const handleOnLayout = useCallback(
+    ({
+      nativeEvent: {
+        layout: { width },
+      },
+    }: LayoutChangeEvent) => setViewWidth(width),
+    []
+  );
+
   if (Platform.OS === 'ios') {
     return (
-      <NativePicker
-        selectedIndexes={selectedIndexes}
-        onChange={handleOnChange}
-        data={data}
-        loop={loop}
-        style={[styles.picker, style]}
-        testID={testID}
-      />
+      <View onLayout={handleOnLayout}>
+        <NativePicker
+          selectedIndexes={selectedIndexes}
+          onChange={handleOnChange}
+          numberOfLines={numberOfLines}
+          data={data}
+          columnWidths={columnWidths}
+          loop={loop}
+          style={[styles.picker, style]}
+          testID={testID}
+        />
+      </View>
     );
@@ -94,10 +120,15 @@ }
     return (
-      <View style={styles.androidContainer}>
+      <View onLayout={handleOnLayout} style={styles.androidContainer}>
         {data.map((componentData, index) => (
           <View
             key={`picky-component-${index}`}
-            style={[styles.androidPickyContainer, style]}
+            style={[
+              {
+                width: columnWidths[index] + LABEL_INSET_SPACE,
+              },
+              style,
+            ]}
           >
             <NativePicker
-              group={index}
+              column={index}
               data={componentData}
@@ -127,20 +158,26 @@ loop={loop}
 
-const useGroupedNativePicker = ({
+const useNativePickerColumns = ({
+  viewWidth,
   children,
   textColor,
-}: Required<Pick<PickerProps, 'children' | 'textColor'>>) =>
+}: Required<Pick<PickerProps, 'children' | 'textColor'>> & {
+  viewWidth: number;
+}) =>
   useMemo(() => {
+    let columnWidths: number[] = [];
     const selectedIndexes: number[] = [];
     const data: NativePickerDataItem[] = [];
 
-    Children.forEach(children, (groupChild, groupChildIndex) => {
-      const groupItems: NativeItem[] = [];
+    let availableSpace = viewWidth;
 
+    Children.forEach(children, (columnChild, columnChildIndex) => {
+      const columnItems: NativeItem[] = [];
+
       Children.forEach(
-        groupChild.props.children,
+        columnChild.props.children,
         (itemChild, itemChildIndex) => {
           if (
-            groupChild.props.selectedValue &&
-            itemChild.props.value === groupChild.props.selectedValue &&
-            selectedIndexes.length <= groupChildIndex
+            columnChild.props.selectedValue &&
+            itemChild.props.value === columnChild.props.selectedValue &&
+            selectedIndexes.length <= columnChildIndex
           ) {
@@ -150,3 +187,3 @@ selectedIndexes.push(itemChildIndex);
 
-          groupItems.push({
+          columnItems.push({
             label: itemChild.props.label,
@@ -160,19 +197,42 @@ value: itemChild.props.value,
 
-      if (selectedIndexes.length <= groupChildIndex) {
+      if (selectedIndexes.length <= columnChildIndex) {
         selectedIndexes.push(0);
       }
 
-      data.push(groupItems);
+      if (typeof columnChild.props.width === 'number') {
+        const w = Math.max(columnChild.props.width - LABEL_INSET_SPACE, 0);
+
+        availableSpace -= columnChild.props.width;
+
+        columnWidths.push(w);
+      } else {
+        columnWidths.push(-1);
+      }
+
+      data.push(columnItems);
     });
 
-    return { data, selectedIndexes };
-  }, [children, textColor]);
+    // Automatically set width for remaining columns to the available space
+    const columnsWithoutWidth = columnWidths.filter((w) => w < 0);
+    if (columnsWithoutWidth.length) {
+      columnWidths = columnWidths.map((w) =>
+        w < 0
+          ? Math.max(
+              availableSpace / columnsWithoutWidth.length - LABEL_INSET_SPACE,
+              0
+            )
+          : w
+      );
+    }
 
+    return { data, columnWidths, selectedIndexes };
+  }, [children, textColor, viewWidth]);
+
+const LABEL_INSET_SPACE = 20;
+
 const styles = StyleSheet.create({
   androidContainer: {
     flexDirection: 'row',
+    width: '100%',
   },
-  androidPickyContainer: {
-    flex: 1,
-  },
   picker: {
@@ -179,0 +239,0 @@ height: 216,

src/types.ts

@@ -14,10 +14,10 @@ import type { NativeSyntheticEvent, processColor } from 'react-native';
 
-export type PickerGroupChangeItem = {
+export type PickerColumnChangeItem = {
   value: string | number;
   index: number;
-  group: number;
+  column: number;
 };
 
 export type NativePickerChangeEvent = {
-  group: number;
+  column: number;
   index: number;
@@ -24,0 +24,0 @@ value: string | number;

lib/commonjs/PickerGroup.js

-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.PickerGroup = void 0;
-
-var _react = _interopRequireDefault(require("react"));
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-const PickerGroup = _ref => {
-  let {
-    children
-  } = _ref;
-  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, children);
-};
-
-exports.PickerGroup = PickerGroup;
-//# sourceMappingURL=PickerGroup.js.map

lib/commonjs/PickerGroup.js.map

-{"version":3,"names":["PickerGroup","children"],"sources":["PickerGroup.tsx"],"sourcesContent":["import React, { ReactElement } from 'react';\nimport type { PickerItemProps } from './PickerItem';\nimport type { PickerGroupChangeItem } from './types';\n\ntype PickerGroupChild = ReactElement<PickerItemProps>;\n\nexport interface PickerGroupProps {\n  selectedValue?: string | number;\n  onChange?: (item: PickerGroupChangeItem) => void;\n  children: PickerGroupChild | PickerGroupChild[];\n}\n\nexport const PickerGroup = ({ children }: PickerGroupProps) => {\n  return <>{children}</>;\n};\n"],"mappings":";;;;;;;AAAA;;;;AAYO,MAAMA,WAAW,GAAG,QAAoC;EAAA,IAAnC;IAAEC;EAAF,CAAmC;EAC7D,oBAAO,4DAAGA,QAAH,CAAP;AACD,CAFM"}

lib/module/PickerGroup.js

-import React from 'react';
-export const PickerGroup = _ref => {
-  let {
-    children
-  } = _ref;
-  return /*#__PURE__*/React.createElement(React.Fragment, null, children);
-};
-//# sourceMappingURL=PickerGroup.js.map

lib/module/PickerGroup.js.map

-{"version":3,"names":["React","PickerGroup","children"],"sources":["PickerGroup.tsx"],"sourcesContent":["import React, { ReactElement } from 'react';\nimport type { PickerItemProps } from './PickerItem';\nimport type { PickerGroupChangeItem } from './types';\n\ntype PickerGroupChild = ReactElement<PickerItemProps>;\n\nexport interface PickerGroupProps {\n  selectedValue?: string | number;\n  onChange?: (item: PickerGroupChangeItem) => void;\n  children: PickerGroupChild | PickerGroupChild[];\n}\n\nexport const PickerGroup = ({ children }: PickerGroupProps) => {\n  return <>{children}</>;\n};\n"],"mappings":"AAAA,OAAOA,KAAP,MAAoC,OAApC;AAYA,OAAO,MAAMC,WAAW,GAAG,QAAoC;EAAA,IAAnC;IAAEC;EAAF,CAAmC;EAC7D,oBAAO,0CAAGA,QAAH,CAAP;AACD,CAFM"}

lib/typescript/PickerGroup.d.ts

-import { ReactElement } from 'react';
-import type { PickerItemProps } from './PickerItem';
-import type { PickerGroupChangeItem } from './types';
-declare type PickerGroupChild = ReactElement<PickerItemProps>;
-export interface PickerGroupProps {
-    selectedValue?: string | number;
-    onChange?: (item: PickerGroupChangeItem) => void;
-    children: PickerGroupChild | PickerGroupChild[];
-}
-export declare const PickerGroup: ({ children }: PickerGroupProps) => JSX.Element;
-export {};

src/PickerGroup.tsx

-import React, { ReactElement } from 'react';
-import type { PickerItemProps } from './PickerItem';
-import type { PickerGroupChangeItem } from './types';
-
-type PickerGroupChild = ReactElement<PickerItemProps>;
-
-export interface PickerGroupProps {
-  selectedValue?: string | number;
-  onChange?: (item: PickerGroupChangeItem) => void;
-  children: PickerGroupChild | PickerGroupChild[];
-}
-
-export const PickerGroup = ({ children }: PickerGroupProps) => {
-  return <>{children}</>;
-};

No alert changes

Improved metrics

Total package byte prevSize

97781

13.43%

Lines of code

1079

14.42%

Number of lines in readme file

89

2.3%

No dependency changes