chore: update docs and integrate srivastavaanurag79#32

Thodor12 · Thodor12 · commit 65ec6ab2c1cc · 2023-04-07T22:16:43.000+02:00
diff --git a/README.md b/README.md
@@ -20,8 +20,6 @@ Enjoying react-native-paper-select? [Please leave a short review on Openbase](ht
 
 Check out the new [Documentation](https://anurag-srivastava.gitbook.io/react-native-paper-select).
 
-[Go to Customizable Properties](https://anurag-srivastava.gitbook.io/react-native-paper-select/guides/customizations)
-
 Check out the [Example](https://anurag-srivastava.gitbook.io/react-native-paper-select/example) code or you can check the example source code in [example module](https://github.com/srivastavaanurag79/react-native-paper-select/tree/master/example).
 
 [React Native Paper Select (NPM Link)](https://www.npmjs.com/package/react-native-paper-select)
diff --git a/SUMMARY.md b/SUMMARY.md
@@ -9,8 +9,7 @@
 
 * [Basic Usage](guides/basic-usage.md)
 * [Advanced Usage](guides/advanced-usage.md)
-* [Customizations](guides/customizations.md)
-* [Callback](guides/callback.md)
+* [API](guides/api.md)
 
 ***
 
diff --git a/example.md b/example.md
@@ -6,7 +6,7 @@
 
 <figure><img src="demo1.png" alt=""><figcaption></figcaption></figure>
 
- 
+
 
 <figure><img src="demo4.png" alt=""><figcaption></figcaption></figure>
 
@@ -107,8 +107,8 @@ export default function App() {
         textInputMode="flat"
         searchStyle={{ iconColor: 'red' }}
         searchPlaceholder="Procurar"
-        modalCloseButtonText="fechar"
-        modalDoneButtonText="terminado"
+        dialogCloseButtonText="fechar"
+        dialogDoneButtonText="terminado"
       />
       <PaperButton
         style={styles.button}
diff --git a/example/src/App.tsx b/example/src/App.tsx
@@ -130,16 +130,24 @@ export default function App() {
         errorText={colors.error}
         multiEnable={true}
         textInputMode="flat"
-        searchStyle={{ iconColor: 'red' }}
-        dialogButtonLabelStyle={{
+        dialogCloseButtonStyle={{
           color: 'red',
           backgroundColor: 'yellow',
           padding: 10,
           borderRadius: 5,
         }}
+        dialogDoneButtonStyle={{
+          color: 'blue',
+          backgroundColor: 'green',
+          padding: 10,
+          borderRadius: 5,
+        }}
         searchText="Procurar"
-        modalCloseButtonText="fechar"
-        modalDoneButtonText="terminado"
+        dialogCloseButtonText="fechar"
+        dialogDoneButtonText="terminado"
+        searchbarProps={{
+          iconColor: 'red',
+        }}
       />
       <PaperButton
         style={styles.button}
diff --git a/guides/advanced-usage.md b/guides/advanced-usage.md
@@ -1,44 +1,100 @@
 # Advanced Usage
 
-You can customize, `PaperSelect` as per your requirement. Some of the customization options are:
-
-* `textInputMode` - you have two material options to choose from `flat` and `outlined` . See [`screenshot`](broken-reference).
-* `modalDoneButtonText` - you can change the modal's button text in your language.
-* `theme` - you can change the colour of the placeholder/label using:
-  * ```
-    theme={{colors: {placeholder: 'black'}}}
-    ```
-
-```typescript
-  // theme={{colors: {placeholder: 'black'}}}
-  // changes the label/placeholder color whereas
-  // outlineColor changes the border color
+You can customize, `PaperSelect` as per your requirement. You can view a list of customization options at the [API](api.md) page.
+
+## Translations
+Static texts like the button texts, "Select all", the search placeholder can all be replaced through their respective properties:
+- `label`: The actual label shown on the TextInput
+- `dialogTitle`: The title shown in the dialog, this defaults to the label defined above
+- `selectAllText`: The text shown on the "Select all" checkbox in the dialog, only will have an effect when `multiEnable` is true.
+- `searchText`: The text shown in the searchbar placeholder
+- `dialogCloseButtonText`: The text shown in the close button of the dialog.
+- `dialogDoneButtonText`: The text shown in the done button of the dialog.
+- `errorText`: A piece of text shown below the TextInput when you want to indicate an error has occured with your item selection.
+
+## Overriding the theme
+Like with most react-native-paper components, the theme can be overridden on a per component basis.
+We utilize this method too, however the theme is applied to all sub-components below the container component.
+If you need to set specific styles of certain components, you can find them in any of the `...Style` properties.
+
+The theme can be provided in any possible configuration you can use in regular react-native-paper components, MD2/MD3 - Light/Dark.
+By default it will use the theme as provided by the `PaperProvider`.
+
+```tsx
+  // This component will utilize a custom primary colour
+  <PaperProvider theme={{ colors: { primary: "blue", secondary: "green" }}}>
+    <PaperSelect
+      label="Select Gender"
+      value={gender.value}
+      onSelection={(value: any) => {
+      setGender({
+              ...gender,
+              value: value.text,
+              selectedList: value.selectedList
+          });
+      }}
+      arrayList={[...gender.list]}
+      selectedArrayList={[...gender.selectedList]}
+      multiEnable={false}
+      theme={{
+        colors: {
+          primary: 'black'
+        }
+      }}
+    />
+  </PaperProvider>
+```
+
+```tsx
+  // This component will utilize the default theme as provided by the PaperProvider
+  <PaperProvider theme={{ colors: { primary: "blue", secondary: "green" }}}>
+    <PaperSelect
+      label="Select Gender"
+      value={gender.value}
+      onSelection={(value: any) => {
+      setGender({
+              ...gender,
+              value: value.text,
+              selectedList: value.selectedList
+          });
+      }}
+      arrayList={[...gender.list]}
+      selectedArrayList={[...gender.selectedList]}
+      multiEnable={false}
+    />
+  </PaperProvider>
+```
+
+### Overriding components properties
+Currently we support 2 different properties for overriding additional component properties, these are:
+- `textInputProps`: Passes additional properties to the <TextInput> element where the selected value(s) are shown.
+- `checkboxProps`: Passes additional properties to the <CheckBox> elements used for picking items in the dialog, aswell as the "Select all" option.
+- `searchbarProps`: Passes additional properties to the <Searchbar> element used for searching in the possible items.
+
+```tsx
   <PaperSelect
     label="Select Gender"
     value={gender.value}
     onSelection={(value: any) => {
     setGender({
             ...gender,
             value: value.text,
-            selectedList: value.selectedList,
-            error: '',
+            selectedList: value.selectedList
         });
     }}
     arrayList={[...gender.list]}
     selectedArrayList={[...gender.selectedList]}
-    errorText={gender.error}
     multiEnable={false}
-    outlineColor="black"
-    theme={{
-      colors: {
-        placeholder: 'black'
-      }
+    textInputProps={{
+      underlineColor: "red",
+      left: <IconButton icon="delete" onPress={() => setGender(undefined)} />
+    }}
+    checkboxProps={{
+      checkboxColor: "purple",
+      checkboxUncheckedColor: "gold"
+    }}
+    searchbarProps={{
+      iconColor: "brown"
     }}
   />
 ```
-
-
-
-For more options, see [`Customizations`](customizations.md)
-
-Check out the [`Example`](../example.md#code) code for advance usage.
diff --git a/guides/api.md b/guides/api.md
@@ -46,7 +46,8 @@
 | Name           | Type                                                    | Description                                        | Default value | Required |
 | -------------- | ------------------------------------------------------- | -------------------------------------------------- | ------------- | -------- |
 | textInputProps | [PaperSelectTextInputProps](#PaperSelectTextInputProps) | Additional properties to supply to the text input. | undefined     | :x:      |
-| checkboxProps  | [CheckboxProps](#CheckboxProps)                         | Additional properties to supply to the checkboxes. | undefined     | :x:      |
+| checkboxProps  | [PaperSelectCheckboxProps](#PaperSelectCheckboxProps)   | Additional properties to supply to the checkboxes. | undefined     | :x:      |
+| checkboxProps  | [PaperSelectSearchbarProps](#PaperSelectSearchbarProps) | Additional properties to supply to the searchbar.  | undefined     | :x:      |
 
 ## Types
 
@@ -70,9 +71,17 @@ export interface PaperSelectTextInputProps {
 
 ### PaperSelectTextInputProps
 ```ts
-export interface CheckboxProps {
+export interface PaperSelectCheckboxProps {
   checkboxColor?: string;
   checkboxUncheckedColor?: string;
   checkboxLabelStyle?: TextStyle;
 }
 ```
+
+### PaperSelectSearchbarProps
+```ts
+export interface PaperSelectSearchbarProps {
+  icon?: IconSource;
+  iconColor?: string;
+}
+```
diff --git a/guides/callback.md b/guides/callback.md
diff --git a/src/components/checkBox.tsx b/src/components/checkBox.tsx
@@ -1,9 +1,9 @@
 import React, { memo } from 'react';
 import { View, StyleSheet, Text } from 'react-native';
 import { Checkbox } from 'react-native-paper';
-import type { CheckboxProps } from 'src/interface/checkbox.interface';
+import type { PaperSelectCheckboxProps } from 'src/interface/checkbox.interface';
 
-interface CheckboxPropsFull extends CheckboxProps {
+interface CheckboxPropsFull extends PaperSelectCheckboxProps {
   isChecked: boolean;
   label: string;
 }
diff --git a/src/interface/checkbox.interface.ts b/src/interface/checkbox.interface.ts
@@ -1,6 +1,6 @@
 import type { TextStyle } from 'react-native';
 
-export interface CheckboxProps {
+export interface PaperSelectCheckboxProps {
   checkboxColor?: string;
   checkboxUncheckedColor?: string;
   checkboxLabelStyle?: TextStyle;
diff --git a/src/interface/paperSelect.interface.ts b/src/interface/paperSelect.interface.ts
@@ -2,7 +2,7 @@ import type { MutableRefObject } from 'react';
 import type { ViewStyle, TextStyle } from 'react-native';
 import type { SearchbarProps, TextInputProps } from 'react-native-paper';
 import type { ThemeProp } from 'react-native-paper/lib/typescript/src/types';
-import type { CheckboxProps } from './checkbox.interface';
+import type { PaperSelectCheckboxProps } from './checkbox.interface';
 
 export interface ListItem {
   _id: string;
@@ -26,6 +26,11 @@ export type PaperSelectTextInputProps = Pick<
   | 'right'
 >;
 
+export type PaperSelectSearchbarProps = Pick<
+  SearchbarProps,
+  'icon' | 'iconColor'
+>;
+
 export interface PaperSelectProps {
   // Required props
   label: string;
@@ -47,22 +52,22 @@ export interface PaperSelectProps {
   dialogTitle?: string;
   selectAllText?: string;
   searchText?: string;
-  modalCloseButtonText?: string;
-  modalDoneButtonText?: string;
+  dialogCloseButtonText?: string;
+  dialogDoneButtonText?: string;
   errorText?: string;
 
   // Style props
   containerStyle?: ViewStyle;
   textInputStyle?: TextStyle;
   dialogStyle?: ViewStyle;
   dialogTitleStyle?: TextStyle;
-  searchStyle?: SearchbarProps['style'] & {
-    iconColor?: string;
-  };
-  dialogButtonLabelStyle?: TextStyle;
+  searchStyle?: SearchbarProps['style'];
+  dialogCloseButtonStyle?: TextStyle;
+  dialogDoneButtonStyle?: TextStyle;
   errorStyle?: TextStyle;
 
   // Component props
   textInputProps?: PaperSelectTextInputProps;
-  checkboxProps?: CheckboxProps;
+  checkboxProps?: PaperSelectCheckboxProps;
+  searchbarProps?: PaperSelectSearchbarProps;
 }
diff --git a/src/module/paperSelect.tsx b/src/module/paperSelect.tsx
