feat(multi-picker): add configuration support for dynamic option generation

Author: mgcrea

ios/components/MultiPicker/MultiPickerProps.swift

@@ -17,6 +17,14 @@ public final class MultiPickerProps: ObservableObject, Decodable {
     let label: String
     let options: [MultiPickerOption]
     let width: CGFloat?
+    let config: MultiPickerComponentConfig?
+
+    var computedOptions: [MultiPickerOption] {
+      if config != nil {
+        return config!.generateOptions()
+      }
+      return options
+    }
   }
 
   struct MultiPickerOption: Identifiable, Decodable, Hashable {
@@ -25,6 +33,29 @@ public final class MultiPickerProps: ObservableObject, Decodable {
     var id: String { value } // Use value as the unique identifier
   }
 
+  struct MultiPickerComponentConfig: Decodable, Hashable {
+    let min: Int
+    let max: Int
+    let step: Int
+    let prefix: String
+    let suffix: String
+
+    // Generate options based on numeric configuration
+    func generateOptions() -> [MultiPickerOption] {
+      var options: [MultiPickerOption] = []
+      var current = min
+
+      while current <= max {
+        let valueString = "\(current)"
+        let labelString = "\(prefix)\(current)\(suffix)"
+        options.append(MultiPickerOption(label: labelString, value: valueString))
+        current += step
+      }
+
+      return options
+    }
+  }
+
   // Coding keys for decoding
   enum CodingKeys: String, CodingKey, CaseIterable {
     case components, selections, label, disabled, style

ios/components/MultiPicker/MultiPickerView.swift

@@ -39,13 +39,13 @@ public struct MultiPickerView: View {
           ForEach(0 ..< props.components.count, id: \.self) { index in
             let component = props.components[index]
             ZStack(alignment: Alignment(horizontal: .trailing, vertical: .center)) {
-              if !component.label.isEmpty && !component.options.isEmpty {
-                  Text(component.label)
-                    .padding(.trailing, 16)
-                    .font(.caption)
+              if !component.label.isEmpty && !component.computedOptions.isEmpty {
+                Text(component.label)
+                  .padding(.trailing, 16)
+                  .font(.caption)
               }
               Picker(component.label, selection: $props.selections[index]) {
-                ForEach(component.options, id: \.value) { option in
+                ForEach(component.computedOptions, id: \.value) { option in
                   Text(option.label).tag(option.value)
                 }
               }

src/components/MultiPicker.tsx

@@ -8,9 +8,26 @@ import { fillArray } from "../utils";
 
 export type NativeMultiPickerOption<T extends string> = { value: T; label: string } | T;
 
+export type NativeMultiPickerComponentConfig = {
+  min: number;
+  max: number;
+  step?: number;
+  prefix?: string;
+  suffix?: string;
+};
+
+const DEFAULT_COMPONENT_CONFIG = {
+  min: 0,
+  max: 100,
+  step: 1,
+  prefix: "",
+  suffix: "",
+} satisfies NativeMultiPickerComponentConfig;
+
 export type NativeMultiPickerComponent<T extends string> = {
   label?: string;
-  options: readonly NativeMultiPickerOption<T>[];
+  options?: readonly NativeMultiPickerOption<T>[];
+  config?: NativeMultiPickerComponentConfig;
   // width?: number; // @TODO
 };
 
@@ -51,12 +68,14 @@ export const MultiPicker = <T extends string>({
   const normalizedComponents = useMemo(
     () =>
       components.map((component) => {
-        const { options, ...rest } = component;
-        const normalizedOptions =
-          options.length > 0 && typeof options[0] === "string"
+        const { options, config, ...rest } = component;
+        const normalizedConfig = config ? { ...DEFAULT_COMPONENT_CONFIG, ...config } : undefined;
+        const normalizedOptions = options
+          ? options.length > 0 && typeof options[0] === "string"
             ? options.map((value) => ({ value, label: value }))
-            : options;
-        return { ...rest, options: normalizedOptions };
+            : options
+          : [];
+        return { ...rest, config: normalizedConfig, options: normalizedOptions };
       }),
     [components],
   );