react-native-segmented-picker - npm Package Compare versions

react-native-segmented-picker

Package Overview

Dependencies

Maintainers

Advanced tools

Install Socket

Detect and block malicious and high-risk dependencies

Install

Comparing version 1.0.2 to 1.1.0

dist/index.d.ts

dist/index.js

dist/index.js.map

dist/src/components/SegmentedPicker/index.d.ts

dist/src/components/SegmentedPicker/SegmentedPicker.d.ts

dist/src/components/SegmentedPicker/SegmentedPickerPropTypes.d.ts

dist/src/components/SegmentedPicker/SegmentedPickerStyles.d.ts

dist/src/config/constants.d.ts

dist/src/config/interfaces.d.ts

dist/src/services/Cache/Cache.d.ts

dist/src/services/Cache/index.d.ts

react-native-segmented-picker-1.1.0.tgz

118

package.json

		{
		"name": "react-native-segmented-picker",
		"version": "1.0.2",
		"version": "1.1.0",
		"description": "A segmentable dropdown picker wheel with no native dependencies.",
		"main": "index.js",
		"author": "Adam McArthur",
		"license": "MIT",
		"private": false,
		"main": "dist/index.js",
		"types": "dist/index.d.ts",
		"scripts": {
		"test": "eslint ./ && jest ./"
		"lint": "eslint ./ && tsc --project ./tsconfig.json --noEmit --skipLibCheck",
		"unit-test": "jest --testPathIgnorePatterns __tests__/",
		"test": "yarn lint && yarn unit-test",
		"build": "rm -rf dist && rollup --config rollup.config.js",
		"build-into-examples": "yarn build && rsync -zrv ./ ./examples/node_modules/react-native-segmented-picker --include 'package.json' --include 'yarn.lock' --include 'dist/**' --exclude '' && cd ./examples/node_modules/react-native-segmented-picker && yarn install --production",
		"e2e-android": "cd examples && yarn install && yarn e2e-android-debug-init && yarn e2e-android-debug --take-screenshots all --record-logs all",
		"e2e-ios": "cd examples && yarn install && cd ios && pod install && cd ../ && yarn e2e-ios-debug-init && yarn e2e-ios-debug --take-screenshots all --record-logs all"
		},
		"jest": {
		"preset": "react-native",
		"transform": {
		"^.+\\.jsx?$": "<rootDir>/node_modules/react-native/jest/preprocessor.js"
		},
		"transformIgnorePatterns": [
		"node_modules/(?!react-native\|!react-navigation\|!static-container)"
		]
		},
		"repository": {
		@@ -22,2 +23,6 @@ "type": "git",
		},
		"homepage": "https://github.com/adammcarth/react-native-segmented-picker#readme",
		"bugs": {
		"url": "https://github.com/adammcarth/react-native-segmented-picker/issues"
		},
		"keywords": [
		@@ -39,28 +44,77 @@ "react-native",
		],
		"bugs": {
		"url": "https://github.com/adammcarth/react-native-segmented-picker/issues"
		"dependencies": {
		"prop-types": ">= 15.0.0",
		"react-native-animatable": "^1.3.0"
		},
		"homepage": "https://github.com/adammcarth/react-native-segmented-picker#readme",
		"author": "Adam McArthur",
		"license": "MIT",
		"private": false,
		"peerDependencies": {
		"react": ">= 16.3.0",
		"react-native": ">= 0.55.0"
		},
		"devDependencies": {
		"babel-eslint": "^10.0.3",
		"eslint": "6.1.0",
		"eslint-config-airbnb": "18.0.1",
		"eslint-plugin-import": "^2.18.2",
		"eslint-plugin-jsx-a11y": "^6.2.3",
		"eslint-plugin-react": "^7.14.3",
		"eslint-plugin-react-hooks": "^1.7.0",
		"@babel/core": "7.6.2",
		"@babel/plugin-proposal-class-properties": "^7.8.3",
		"@babel/plugin-transform-react-jsx": "^7.9.4",
		"@rollup/plugin-babel": "^5.0.0",
		"@types/jest": "24.0.24",
		"@types/react-native": "0.60.25",
		"@types/react-test-renderer": "16.9.1",
		"@typescript-eslint/eslint-plugin": "2.17.0",
		"@typescript-eslint/parser": "2.12.0",
		"babel-jest": "24.9.0",
		"detox": "^16.5.0",
		"detox-getprops": "^0.1.1",
		"eslint": "6.8.0",
		"eslint-config-airbnb-typescript": "6.3.1",
		"eslint-plugin-detox": "^1.0.0",
		"eslint-plugin-import": "2.20.0",
		"eslint-plugin-jest": "23.8.2",
		"eslint-plugin-jsx-a11y": "6.2.3",
		"eslint-plugin-react": "7.18.0",
		"jest": "25.5.4",
		"metro-react-native-babel-preset": "^0.56.0",
		"react": "^16.10.2",
		"react-native": "^0.61.2",
		"react-test-renderer": "^16.10.2"
		"react": "16.9.0",
		"react-native": "0.61.5",
		"react-test-renderer": "16.9.0",
		"rollup": "^2.10.2",
		"rollup-plugin-typescript2": "^0.27.1",
		"typescript": "3.7.3"
		},
		"dependencies": {
		"prop-types": "^15.7.2",
		"react-native-animatable": "^1.3.2",
		"styled-components": "^4.4.0"
		"jest": {
		"preset": "react-native",
		"transform": {
		"^.+\\.jsx?$": "<rootDir>/node_modules/react-native/jest/preprocessor.js"
		},
		"transformIgnorePatterns": [
		"node_modules/(?!react-native\|!react-navigation\|!static-container)"
		],
		"testPathIgnorePatterns": [
		"<rootDir>/node_modules/",
		"<rootDir>/__test__/"
		],
		"setupFiles": [
		"./__mocks__/init.ts"
		]
		},
		"detox": {
		"test-runner": "jest",
		"runner-config": "./__tests__/config.json",
		"artifacts": {
		"rootDir": "./__tests__/.artifacts"
		},
		"configurations": {
		"android.debug": {
		"binaryPath": "examples/android/app/build/outputs/apk/debug/app-debug.apk",
		"build": "cd examples/android && RN_BUNDLE_TYPE=E2E E2E_MODE=debug ./gradlew assembleDebug assembleAndroidTest -DtestBuildType=debug && cd ..",
		"type": "android.attached"
		},
		"ios.sim.debug": {
		"binaryPath": "examples/ios/build/Build/Products/Debug-iphonesimulator/SegmentedPickerDemo.app",
		"build": "cd examples && RN_BUNDLE_TYPE=E2E E2E_MODE=debug xcodebuild -workspace ios/SegmentedPickerDemo.xcworkspace -scheme SegmentedPickerDemo -configuration Debug -sdk iphonesimulator -derivedDataPath ios/build",
		"type": "ios.simulator",
		"device": {
		"type": "iPhone SE (2nd generation)"
		}
		}
		}
		}
		}

README.md

		# React Native Segmented Picker

		[![CircleCI](https://circleci.com/gh/adammcarth/react-native-segmented-picker.svg?style=svg)](https://circleci.com/gh/adammcarth/react-native-segmented-picker)
		[![Syntax, Unit & E2E Tests](https://github.com/adammcarth/react-native-segmented-picker/workflows/Syntax%2C%20Unit%20%26%20E2E%20Tests/badge.svg)](https://github.com/adammcarth/react-native-segmented-picker/actions?query=workflow%3A%22Syntax%2C%20Unit%20%26%20E2E%20Tests%22)
		[![NPM Version](https://img.shields.io/npm/v/react-native-segmented-picker.svg?style=flat-square)](https://www.npmjs.com/package/react-native-segmented-picker)
		@@ -40,3 +40,3 @@ [![MIT Licence](https://img.shields.io/badge/License-MIT-blue.svg)](https://opensource.org/licenses/MIT)
		// Can alternatively be shown with the `visible` prop for redux etc.
		this.segmentedPicker.show();
		this.segmentedPicker.current.show();
		}
		@@ -75,16 +75,16 @@

		\| Prop \| Description \| Default \|
		\|------------------------------\|--------------------------------------------------------------------------------\|-------------\|
		\| `options` \| Data to be populated into the picklists. `{columnId: [{label: '', key: ''}, ...], ...}` \| \|
		\| `visible` \| Not used by default. Set to `true` or `false` to manually handle visibility. \| `null` \|
		\| `defaultSelections` \| Eg: `{columnId: 'label string to auto-select', ...}` \| `{}` \|
		\| `confirmText` \| Text displayed in the top right hand corner. \| `'Done'` \|
		\| `size` \| Fixed percentage of the screen to render the picklist container over. \| `45` \|
		\| `confirmTextColor` \| Color of the `confirmText` button. \| `'#0A84FF'` \|
		\| `toolbarBackground` \| Background color of the top container where the `confirmText` is displayed. \| `'#FAFAF8'` \|
		\| `toolbarBorderColor` \| Bottom border color of the `toolbarContainer`. \| `'#E7E7E7'` \|
		\| `listItemTextColor` \| Color of the text for each item in the picklist. \| `'#282828'` \|
		\| `selectionMarkerBackground` \| Background color of the container which overlays the current selected item. \| `'#F8F8F8'` \|
		\| `selectionMarkerBorderColor` \| Border color (top and bottom) of the selection marker overlay. \| `'#DCDCDC'` \|
		\| `containerBackground` \| Background color of the inner SegmentedPicker container. \| `'#FFFFFF'` \|
		\| Prop \| Description \| Default \|
		\|------------------------------\|-------------------------------------------------------------------------------------------------------\|-------------\|
		\| `options` \| Data to be populated into the picklists. `{columnId: [{label: '', key?: '', testID?: ''}, ...], ...}` \| \|
		\| `visible` \| Not used by default. Set to `true` or `false` to manually handle visibility. \| `null` \|
		\| `defaultSelections` \| Eg: `{columnId: 'label string to auto-select', ...}` \| `{}` \|
		\| `confirmText` \| Text displayed in the top right hand corner. \| `'Done'` \|
		\| `size` \| Fixed percentage of the screen to render the picklist container over. \| `45` \|
		\| `confirmTextColor` \| Color of the `confirmText` button. \| `'#0A84FF'` \|
		\| `toolbarBackground` \| Background color of the top container where the `confirmText` is displayed. \| `'#FAFAF8'` \|
		\| `toolbarBorderColor` \| Bottom border color of the `toolbarContainer`. \| `'#E7E7E7'` \|
		\| `listItemTextColor` \| Color of the text for each item in the picklist. \| `'#282828'` \|
		\| `selectionMarkerBackground` \| Background color of the container which overlays the current selected item. \| `'#F8F8F8'` \|
		\| `selectionMarkerBorderColor` \| Border color (top and bottom) of the selection marker overlay. \| `'#DCDCDC'` \|
		\| `containerBackground` \| Background color of the inner SegmentedPicker container. \| `'#FFFFFF'` \|

		@@ -198,2 +198,18 @@ ### Event Props

		### 2. End-To-End (E2E) Testing

		This library automatically sets `testID` attributes on elements so that you can interact with the picker UI during E2E testing (with tools such as [Detox](https://github.com/wix/Detox)).

		```js
		import { TEST_IDS } from 'react-native-segmented-picker';
		```

		- `TEST_IDS.PICKER`: The entire segmented picker container (useful to check if visible).
		- `TEST_IDS.CONFIRM_BUTTON`: "Done" confirmation button in the top right hand corner.
		- `TEST_IDS.CLOSE_AREA`: Darkened area outside of the picker which hides the component when tapped.
		- ``${`TEST_IDS.COLUMN`}columnId``: ScrollView for a specific picker column.
		- ``${`TEST_IDS.COLUMN`}columnId_optionKeyOrLabel``: Specific picker item button within a column.

		You can see full examples of our own E2E Detox testing suite [here](https://github.com/adammcarth/react-native-segmented-picker/tree/master/__tests__).

		## Contributions
		@@ -206,6 +222,6 @@
		3. Checkout a new branch, eg: `feature/my-thing` or `bugfix/terrible-thing`.
		4. After making any changes, make sure that `yarn run test` still passes.
		5. Ask yourself if there's a new unit test that you could write to capture your changes?
		4. After making any changes, make sure that `yarn test` still passes.
		5. Are there new unit test(s) that you could write to capture your changes?
		6. Submit a pull request to `master` outlining what your change is and how you tested it.

		Made with love in Melbourne by [Adam McArthur](https://github.com/adammcarth).

.babelrc

index.js

index.test.js

src/components/SegmentedPicker/index.js

src/components/SegmentedPicker/SegmentedPicker.js

src/components/SegmentedPicker/SegmentedPicker.test.js

src/components/SegmentedPicker/Styles.js

New alerts

Improved metrics

Worsened metrics

Dependency changes