feat: first commit 🔥

Author: thebiltheory

.gitignore

@@ -0,0 +1,15 @@
+# Logs
+*.log
+npm-debug.log
+yarn-error.log
+
+# Runtime data
+tmp
+build
+dist
+
+# Dependency directory
+node_modules
+
+# Jest 
+.jest/

.npmignore

@@ -0,0 +1,13 @@
+# Logs
+*.log
+npm-debug.log
+yarn-error.log
+
+# Runtime data
+tmp
+
+# Dependency directory
+node_modules
+
+# Example
+example

README.md

@@ -0,0 +1 @@
+# React Native Number Please

babel.config.js

@@ -0,0 +1,18 @@
+module.exports = {
+  presets: ["module:metro-react-native-babel-preset"],
+  plugins: [
+    [
+      "module-resolver",
+      {
+        root: ["./src"],
+        extensions: [".js", ".ts", ".tsx", ".ios.js", ".android.js"],
+      },
+    ],
+    "@babel/plugin-transform-runtime",
+  ],
+  env: {
+    production: {
+      plugins: ["transform-remove-console"],
+    },
+  },
+};

index.interface.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

index.interface.ts

@@ -0,0 +1,17 @@
+export interface IDigits {
+  id: string;
+  label?: string;
+  min: number;
+  max: number;
+  step?: number;
+}
+
+export interface INumberPleaseProps {
+  digits: IDigits[];
+  values: object[];
+  // format: any;
+  onChange(value: any): any;
+  divider?: any;
+  pickerStyle?: {};
+  itemStyle?: {};
+}

index.js

@@ -0,0 +1,62 @@
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var react_1 = __importDefault(require("react"));
+var react_native_1 = require("react-native");
+var lodash_find_1 = __importDefault(require("lodash.find"));
+var lodash_findindex_1 = __importDefault(require("lodash.findindex"));
+var immer_1 = __importDefault(require("immer"));
+var range_1 = __importDefault(require("./src/utils/range"));
+var PickerFactory = function (_a) {
+    var pickerProps = _a.pickerProps, selectedValue = _a.selectedValue, onChange = _a.onChange, pickerStyle = _a.pickerStyle, itemStyle = _a.itemStyle;
+    var id = pickerProps.id, label = pickerProps.label, min = pickerProps.min, max = pickerProps.max;
+    var numbers = range_1.default(min, max);
+    return (react_1.default.createElement(react_native_1.Picker, { style: __assign({ height: "100%", width: 90 }, pickerStyle), selectedValue: selectedValue, onValueChange: function (value) { return onChange({ id: id, value: value }); }, itemStyle: itemStyle }, numbers.map(function (number, index) { return (react_1.default.createElement(react_native_1.Picker.Item, { key: id + "-" + number + "-" + index, value: number, label: number + " " + label })); })));
+};
+var NumberPlease = function (_a) {
+    var digits = _a.digits, values = _a.values, onChange = _a.onChange, rest = __rest(_a, ["digits", "values", "onChange"]);
+    var onChangeHandle = function (value) {
+        var nextValues = immer_1.default(values, function (draft) {
+            var index = lodash_findindex_1.default(draft, { id: value.id });
+            draft[index] = value;
+        });
+        onChange(nextValues);
+    };
+    return (react_1.default.createElement(react_native_1.View, { style: styles.container }, digits.map(function (picker, index) {
+        var value = lodash_find_1.default(values, { id: picker.id }).value;
+        return (react_1.default.createElement(PickerFactory, __assign({ key: picker.id + "-picker-" + index, pickerProps: picker, selectedValue: value, onChange: onChangeHandle }, rest)));
+    })));
+};
+var styles = react_native_1.StyleSheet.create({
+    container: {
+        flexDirection: "row",
+        width: "100%",
+        justifyContent: "center",
+        alignItems: "center",
+    },
+});
+exports.default = NumberPlease;

index.tsx

@@ -0,0 +1,79 @@
+import React, { FC } from "react";
+import { View, Picker, StyleSheet } from "react-native";
+import find from "lodash.find";
+import findIndex from "lodash.findindex";
+import produce from "immer";
+import range from "./src/utils/range";
+import { INumberPleaseProps } from "./index.interface";
+
+const PickerFactory: FC<any> = ({
+  pickerProps,
+  selectedValue,
+  onChange,
+  pickerStyle,
+  itemStyle,
+}: any) => {
+  const { id, label, min, max } = pickerProps;
+  const numbers = range(min, max);
+
+  return (
+    <Picker
+      style={{ height: "100%", width: 90, ...pickerStyle }}
+      selectedValue={selectedValue}
+      onValueChange={(value: any) => onChange({ id, value })}
+      itemStyle={itemStyle}
+    >
+      {numbers.map((number, index) => (
+        <Picker.Item
+          key={`${id}-${number}-${index}`}
+          value={number}
+          label={`${number} ${label}`}
+        />
+      ))}
+    </Picker>
+  );
+};
+
+const NumberPlease: FC<INumberPleaseProps> = ({
+  digits,
+  values,
+  onChange,
+  ...rest
+}: any) => {
+  const onChangeHandle = (value: any) => {
+    const nextValues = produce(values, (draft: any) => {
+      const index = findIndex(draft, { id: value.id });
+      draft[index] = value;
+    });
+
+    onChange(nextValues);
+  };
+
+  return (
+    <View style={styles.container}>
+      {digits.map((picker: any, index: any) => {
+        const { value }: any = find(values, { id: picker.id });
+        return (
+          <PickerFactory
+            key={`${picker.id}-picker-${index}`}
+            pickerProps={picker}
+            selectedValue={value}
+            onChange={onChangeHandle}
+            {...rest}
+          />
+        );
+      })}
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flexDirection: "row",
+    width: "100%",
+    justifyContent: "center",
+    alignItems: "center",
+  },
+});
+
+export default NumberPlease;

jest.config.js

@@ -0,0 +1,15 @@
+module.exports = {
+  preset: "react-native",
+  moduleFileExtensions: ["ts", "tsx", "js", "jsx", "json"],
+  testRegex: "(/__tests__/.*|(\\.|/)(test|spec))\\.(js|ts)x?$",
+  transform: {
+    "^.+\\.(js|tsx?)$":
+      "<rootDir>/node_modules/react-native/jest/preprocessor.js",
+  },
+  testPathIgnorePatterns: ["\\.snap$", "<rootDir>/node_modules/"],
+  cacheDirectory: ".jest/cache",
+  transformIgnorePatterns: [
+    "node_modules/(?!(react-native|react-navigation|react-navigation-tabs|react-navigation-redux-helpers|react-native-safari-view|react-native-linear-gradient|react-native-blur|react-native-animatable|react-native-wkwebview-reborn|react-native-safe-area-view|react-native-popup-menu|redux-persist)/)",
+  ],
+  setupFiles: ["./__mocks__/react-native.js"],
+};

package.json

@@ -0,0 +1,74 @@
+{
+  "name": "react-native-number-please",
+  "version": "1.0.2",
+  "description": "React Native number picker",
+  "main": "dist/index.js",
+  "types": "dist/index.d.ts",
+  "files": [
+    "./dist"
+  ],
+  "scripts": {
+    "build": "tsc",
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/thebiltheory/react-native-number-please.git"
+  },
+  "keywords": [
+    "react-native",
+    "number",
+    "picker",
+    "digit",
+    "dropdown"
+  ],
+  "author": "Bil Benhamou <bil@thebiltheory.com>",
+  "license": "MIT",
+  "bugs": {
+    "url": "https://github.com/thebiltheory/react-native-number-please/issues"
+  },
+  "homepage": "https://github.com/thebiltheory/react-native-number-please#readme",
+  "peerDependencies": {
+    "react": "*",
+    "react-native": "*"
+  },
+  "devDependencies": {
+    "@types/jest": "^25.2.1",
+    "@types/lodash.find": "^4.6.6",
+    "@types/lodash.findindex": "^4.6.6",
+    "@types/react": "^16.9.32",
+    "@types/react-native": "^0.62.2",
+    "@types/react-test-renderer": "^16.9.2",
+    "microbundle": "^0.11.0",
+    "prettier": "^2.0.4",
+    "react": "^16.13.1",
+    "react-addons-test-utils": "^15.6.2",
+    "react-native": "^0.62.1",
+    "react-native-typescript-transformer": "^1.2.13",
+    "ts-jest": "^25.3.1",
+    "typescript": "^3.8.3"
+  },
+  "dependencies": {
+    "immer": "^6.0.3",
+    "lodash.find": "^4.6.0",
+    "lodash.findindex": "^4.6.0"
+  },
+  "jest": {
+    "preset": "react-native",
+    "moduleFileExtensions": [
+      "ts",
+      "tsx",
+      "js"
+    ],
+    "transform": {
+      "^.+\\.(js)$": "<rootDir>/node_modules/babel-jest",
+      "\\.(ts|tsx)$": "<rootDir>/node_modules/ts-jest/preprocessor.js"
+    },
+    "testRegex": "(/__tests__/.*|\\.(test|spec))\\.(ts|tsx|js)$",
+    "testPathIgnorePatterns": [
+      "\\.snap$",
+      "<rootDir>/node_modules/"
+    ],
+    "cacheDirectory": ".jest/cache"
+  }
+}

rn-cli.config.js

@@ -0,0 +1,8 @@
+module.exports = {
+  getTransformModulePath() {
+    return require.resolve("react-native-typescript-transformer");
+  },
+  getSourceExts() {
+    return ["ts", "tsx"];
+  },
+};

src/utils/range.js

@@ -0,0 +1,30 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+function range(start, end, step) {
+    if (step === void 0) { step = 1; }
+    // Test that the first 3 arguments are finite numbers.
+    // Using Array.prototype.every() and Number.isFinite().
+    var allNumbers = [start, end, step].every(Number.isFinite);
+    // Throw an error if any of the first 3 arguments is not a finite number.
+    if (!allNumbers) {
+        throw new TypeError("range() expects only finite numbers as arguments.");
+    }
+    // Ensure the step is always a positive number.
+    if (step <= 0) {
+        throw new Error("step must be a number greater than 0.");
+    }
+    // When the start number is greater than the end number,
+    // modify the step for decrementing instead of incrementing.
+    if (start > end) {
+        step = -step;
+    }
+    // Determine the length of the array to be returned.
+    // The length is incremented by 1 after Math.floor().
+    // This ensures that the end number is listed if it falls within the range.
+    var length = Math.floor(Math.abs((end - start) / step)) + 1;
+    // Fill up a new array with the range numbers
+    // using Array.from() with a mapping function.
+    // Finally, return the new array.
+    return Array.from(Array(length), function (x, index) { return start + index * step; });
+}
+exports.default = range;

src/utils/range.ts

@@ -0,0 +1,31 @@
+export default function range(start: number, end: number, step = 1) {
+  // Test that the first 3 arguments are finite numbers.
+  // Using Array.prototype.every() and Number.isFinite().
+  const allNumbers = [start, end, step].every(Number.isFinite);
+
+  // Throw an error if any of the first 3 arguments is not a finite number.
+  if (!allNumbers) {
+    throw new TypeError("range() expects only finite numbers as arguments.");
+  }
+
+  // Ensure the step is always a positive number.
+  if (step <= 0) {
+    throw new Error("step must be a number greater than 0.");
+  }
+
+  // When the start number is greater than the end number,
+  // modify the step for decrementing instead of incrementing.
+  if (start > end) {
+    step = -step;
+  }
+
+  // Determine the length of the array to be returned.
+  // The length is incremented by 1 after Math.floor().
+  // This ensures that the end number is listed if it falls within the range.
+  const length = Math.floor(Math.abs((end - start) / step)) + 1;
+
+  // Fill up a new array with the range numbers
+  // using Array.from() with a mapping function.
+  // Finally, return the new array.
+  return Array.from(Array(length), (x, index) => start + index * step);
+}