@mobile-reality/react-native-select-pro - npm Package Compare versions

Comparing version 2.0.0-alpha.3 to 2.0.0-alpha.4

lib/commonjs/components/option/option.js

		@@ -35,3 +35,3 @@ "use strict";
		return /#__PURE__/_react.default.createElement(_reactNative.Pressable, _extends({
		accessibilityLabel: `Select ${label} option`
		accessibilityLabel: `Select ${label}`
		}, optionButtonProps, {
		@@ -38,0 +38,0 @@ ref: ref,

lib/commonjs/components/options-list/options-list.js

		@@ -56,9 +56,10 @@ "use strict";
		const isDisabledOption = isDisabledResolveOption(isSelected);
		const sectionItem = {
		...item,
		section: sectionObject
		};
		return /#__PURE__/_react.default.createElement(_option.Option, {
		key: value,
		ref: index === 0 ? measuredRef : undefined,
		option: {
		...item,
		section: sectionObject
		},
		option: sectionItem,
		isSelected: isSelected,
		@@ -65,0 +66,0 @@ optionIndex: optionIndex,

lib/module/components/option/option.js

		@@ -26,3 +26,3 @@ function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
		return /#__PURE__/React.createElement(Pressable, _extends({
		accessibilityLabel: `Select ${label} option`
		accessibilityLabel: `Select ${label}`
		}, optionButtonProps, {
		@@ -29,0 +29,0 @@ ref: ref,

lib/module/components/options-list/options-list.js

		@@ -48,9 +48,10 @@ import React, { forwardRef, useCallback } from 'react';
		const isDisabledOption = isDisabledResolveOption(isSelected);
		const sectionItem = {
		...item,
		section: sectionObject
		};
		return /#__PURE__/React.createElement(Option, {
		key: value,
		ref: index === 0 ? measuredRef : undefined,
		option: {
		...item,
		section: sectionObject
		},
		option: sectionItem,
		isSelected: isSelected,
		@@ -57,0 +58,0 @@ optionIndex: optionIndex,

lib/typescript/components/select-provider/select-provider.d.ts

		@@ -1,2 +0,3 @@
		import React, { type ReactNode } from 'react';
		import type { ReactNode } from 'react';
		import React from 'react';
		type Props = {
		@@ -3,0 +4,0 @@ children: ReactNode;

package.json

		{
		"name": "@mobile-reality/react-native-select-pro",
		"version": "2.0.0-alpha.3",
		"version": "2.0.0-alpha.4",
		"description": "React Native dropdown (select) component developed by Mobile Reality",
		@@ -5,0 +5,0 @@ "main": "lib/commonjs/index",

135

README.md

		@@ -15,4 +15,4 @@ <div align="center">
		[![npm total downloads](https://img.shields.io/npm/dt/@mobile-reality/react-native-select-pro?style=for-the-badge)](https://www.npmjs.com/package/@mobile-reality/react-native-select-pro)
		[![npm month downloads](https://img.shields.io/npm/dm/@mobile-reality/react-native-select-pro?style=for-the-badge)](https://www.npmjs.com/package/@mobile-reality/react-native-select-pro)
		[![npm week downloads](https://img.shields.io/npm/dw/@mobile-reality/react-native-select-pro?style=for-the-badge)](https://www.npmjs.com/package/@mobile-reality/react-native-select-pro)
		[![Last master branch commit](https://img.shields.io/github/last-commit/MobileReality/react-native-select-pro/master?style=for-the-badge)](https://github.com/MobileReality/react-native-select-pro/commits/master)
		[![License](https://img.shields.io/github/license/MobileReality/react-native-select-pro?style=for-the-badge)](https://github.com/MobileReality/react-native-select-pro/blob/master/LICENSE.md)
		@@ -23,128 +23,11 @@
		* Customizable
		* Sections / Grouping
		* Multiple
		* Sections
		* Searchable
		* Animations
		* Multi select
		* Android / iOS / Expo support
		* TypeScript support
		* Based on `react-native-portal`

		## Example
		## Getting started

		### Expo Snack
		https://mobilereality.github.io/react-native-select-pro/docs/getting-started

		[Example on Expo](https://snack.expo.dev/@irekrog/smelly-beef-jerky)

		### Video preview

		https://user-images.githubusercontent.com/11172548/178573663-1059862d-20c4-4d44-86e3-8438de630475.mp4

		### Repo

		Clone this repo https://github.com/MobileReality/react-native-select-pro and next:

		```sh
		cd apps/expo
		yarn dev-start
		```

		## Documentation

		https://mobilereality.github.io/react-native-select-pro/

		## Getting Started

		### Installation

		```
		npm install @mobile-reality/react-native-select-pro
		```

		or

		```
		yarn add @mobile-reality/react-native-select-pro
		```

		### Usage

		Firstly, wrap your app code in `SelectProvider`

		```jsx
		import React from 'react';
		import { SelectProvider } from '@mobile-reality/react-native-select-pro';

		const RootComponent = () => {
		return (
		<SelectProvider>
		{/* rest of your app code */}
		</SelectProvider>
		)
		};
		```

		Then you can use `Select` component

		```jsx
		import React from 'react';
		import { View } from 'react-native';
		import { Select } from '@mobile-reality/react-native-select-pro';

		const SomeComponent = () => {
		return (
		<View>
		<Select {/* One required prop: `options` */}
		options={[{ value: 'somevalue', label: 'somelabel' }]}
		/>
		</View>
		)
		};
		```

		Additionally you can pass second available data structure:

		```typescript jsx
		[
		{
		title: 'sometitle',
		data: { value: 'somevalue', label: 'somelabel' },
		},
		];
		```

		If you want to use `Select` component inside:

		* `Modal` from `react-native` / `react-native-modal`
		* `BottomSheet` from `react-native-bottom-sheet`

		you need to wrap code inside `Modal` / `BottomSheet` in `SelectModalProvider`

		```jsx
		import React from 'react';
		import { View, Modal, Text } from 'react-native';
		import { Select, SelectModalProvider } from '@mobile-reality/react-native-select-pro';

		const SomeComponent = () => {
		return (
		<View>
		<Modal> {/* e.g. `Modal` from `react-native` */}
		<SelectModalProvider> {/* `SelectModalProvider` wrapping code inside `Modal` */}
		<Text>Modal</Text>
		<Select
		options={[{ value: 'somevalue', label: 'somelabel' }]}
		/>
		</SelectModalProvider>
		</Modal>
		</View>
		)
		};
		```

		## Thanks

		* Used [react-native-portal](https://github.com/gorhom/react-native-portal), thanks
		to [@gorhom](https://github.com/gorhom) for great library 🎉
		* Built with [@react-native-community/bob](https://github.com/react-native-community/bob) 🚀
		* Docs built with [Docusaurus](https://docusaurus.io/) 🙌

		## Contributing
		@@ -158,4 +41,8 @@

		## Want more from Mobile Reality?
		## Made at Mobile Reality 🔥

		Contact with us https://mobilereality.pl/en
		Open source projects are everywhere. We have used these since the beginning. In [Mobile Reality](https://mobilereality.pl) we would like to share
		and give back to community our work. `react-native-select-pro` is this kind of work and if you see this library useful
		for you please star it 🌟.

		Like our approach and other open source projects? Don't hesitate to contact us at office@mobilereality.pl in terms of any questions.

lib/commonjs/components/option/option.js.map