Merge pull request #9 from Rickecr/develop

Develop
richecr · Mar 24, 2020 · b60e9eb · b60e9eb
2 parents 54bc06c + 85324f7
commit b60e9eb
Show file tree

Hide file tree

Showing 6 changed files with 315 additions and 289 deletions.
diff --git a/.eslintrc.js b/.eslintrc.js
@@ -32,6 +32,7 @@ module.exports = {
     ],
     'import/prefer-default-export': 'off',
     'import/no-unresolved': 'off',
-    'no-use-before-define': 'off'
+    'no-use-before-define': 'off',
+    'react/require-default-props': 'off'
   },
 };
diff --git a/.prettierrc.js b/.prettierrc.js
@@ -1,5 +1,4 @@
 module.exports = {
-  bracketSpacing: false,
   jsxBracketSameLine: true,
   singleQuote: true,
   trailingComma: 'es5',

diff --git a/README.md b/README.md
@@ -20,7 +20,7 @@ $ npm i rn-multiple-select
 import React, { useState, useEffect } from 'react';
 import { StyleSheet, Text, View } from 'react-native';
 
-import SelectMultiple from "rn-multiple-select";
+import SelectMultiple from "./SelectMultiple";
 
 export default function App() {
   const [dados, setDados] = useState([
@@ -65,6 +65,14 @@ export default function App() {
       <SelectMultiple
         options={dados}
         onSelected={onSelectionsChange} 
+        styles={{
+          containerStyle: {
+            backgroundColor: 'transparent',
+            borderColor: 'transparent',
+          },
+          checkedColor: 'green',
+        }}
+        size={24}
       />
     </View>
   );
@@ -85,5 +93,19 @@ const styles = StyleSheet.create({
 
 | Prop                        | Default | type     | Desc                                                                                                               |
 | --------------------------- | ------- | -------- | ------------------------------------------------------------------------------------------------------------------ |
-| options | null | `array` de `objects` | The items |
+| options | null | `array` of `object` | The items |
 | onSelected | null | `funct` | Função a ser chamada após um item ser selecionado, passando os items selecionados e o novo item que foi clicado, seja selecionando ou deselecionando o item. |
+| styles | {} | `object` | Estilização para os checkboxs |
+| iconType | 'font-awesome' | `string` | Tipo do ícone |
+| size | 24 | `number` | Tamanho da caixa de seleção |
+| iconRight | false | `boolean` | Ícone a direita do texto |
+| checkedIcon | 'check-square-o' | `string` ou `React Native Component` | Ícone padrão marcado |
+| uncheckedIcon | 'square-o' | `string` ou `React Native Component` | Ícone padrão desmarcado |
+| checkedTitle | none | `string` | Especifique uma mensagem para um checkbox marcado |
+
+- Props de `styles`:
+    - `containerStyle`: Estilo do container principal do checkbox(background e etc).
+    - `textStyle`: Estilo do texto.
+    - `checkedColor`: Cor padrão para um item selecionado.
+    - `uncheckedColor`: Cor padrão para um item deselecionado.
+    - `fontFamily`: A font-family dos textos.
diff --git a/package.json b/package.json
@@ -1,11 +1,17 @@
 {
   "name": "rn-multiple-select",
-  "version": "0.2.0",
+  "version": "1.0.0",
   "description": "Repository for the multi-selection library code for React Native",
+  "author": "Rick Elton",
+  "license": "MIT",
   "main": "src/SelectMultiple.js",
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1"
   },
+  "homepage": "https://github.com/Rickecr/rn-multiple-select#readme",
+  "bugs": {
+    "url": "https://github.com/Rickecr/rn-multiple-select/issues"
+  },
   "repository": {
     "type": "git",
     "url": "git+https://github.com/Rickecr/rn-multiple-select.git"
@@ -16,13 +22,8 @@
     "multiple",
     "lib"
   ],
-  "author": "Rick Elton",
-  "license": "MIT",
-  "bugs": {
-    "url": "https://github.com/Rickecr/rn-multiple-select/issues"
-  },
-  "homepage": "https://github.com/Rickecr/rn-multiple-select#readme",
-  "dependencies": {
+  "peerDependencies": {
+    "prop-types": "^15.7.2",
     "react-native-elements": "^1.2.7"
   },
   "devDependencies": {

diff --git a/src/SelectMultiple.js b/src/SelectMultiple.js
@@ -1,70 +1,68 @@
-import React, {useEffect, useState} from 'react';
-import {View} from 'react-native';
+import React, { useEffect, useState } from 'react';
+import { View } from 'react-native';
 
-import {CheckBox} from 'react-native-elements';
+import { CheckBox } from 'react-native-elements';
+
+import PropTypes from 'prop-types';
 
 const SelectMultiple = props => {
-  const [optionsSelect, setOptionsSelect] = useState([]);
+  const [optionsToSelect, setOptionsToSelect] = useState([]);
 
   useEffect(() => {
-    preprocessOption();
+    loadOptions();
   }, []);
 
-  function preprocessOption() {
-    const {options} = props;
+  function loadOptions() {
+    const { options } = props;
 
     const aux = [];
     options.forEach(e => {
-      const op = {
+      aux.push({
         label: e.label,
         value: e.value,
         checked: false,
-        nomeCategoria: e.nomeCategoria,
-      };
-      aux.push(op);
+      });
     });
 
-    setOptionsSelect(aux);
+    setOptionsToSelect(aux);
   }
 
-  function onSelected(data, item) {
-    const aux = [];
-    data.forEach(element => {
-      if (element.checked) {
-        aux.push(element);
-      }
-    });
+  function onSelected(item) {
+    const optionsSelected = optionsToSelect.filter(option => option.checked);
+
+    props.onSelected(optionsSelected, item);
+  }
+
+  function clickCheckbox(e) {
+    const options = [...optionsToSelect];
+    const index = options.indexOf(e);
+    options[index].checked = !e.checked;
 
-    props.onSelected(aux, item);
+    setOptionsToSelect(options);
+    onSelected(e);
   }
 
   return (
     <View>
-      {optionsSelect.length > 0 && (
+      {optionsToSelect.length > 0 && (
         <View>
-          {optionsSelect.map(e => (
+          {optionsToSelect.map(e => (
             <CheckBox
-              containerStyle={{
-                backgroundColor: 'transparent',
-                borderColor: 'transparent',
-              }}
+              iconType={props.iconType}
+              size={props.size}
+              iconRight={props.iconRight}
+              checkedIcon={props.checkedIcon}
+              uncheckedIcon={props.uncheckedIcon}
+              checkedTitle={props.checkedTitle}
+              containerStyle={props.styles.containerStyle}
+              textStyle={props.styles.textStyle}
+              checkedColor={props.styles.checkedColor}
+              uncheckedColor={props.styles.uncheckedColor}
+              fontFamily={props.styles.fontFamily}
               key={e.value}
               title={e.label}
               checked={e.checked}
-              onPress={() => {
-                const c = [];
-                optionsSelect.forEach(el => {
-                  if (e !== el) {
-                    c.push(el);
-                  } else {
-                    e.checked = !e.checked;
-                    c.push(e);
-                  }
-                });
-
-                setOptionsSelect(c);
-                onSelected(optionsSelect, e);
-              }}
+              onPress={() => clickCheckbox(e)}
             />
           ))}
         </View>
@@ -73,4 +71,37 @@ const SelectMultiple = props => {
   );
 };
 
+SelectMultiple.defaultProps = {
+  styles: {
+    containerStyle: {
+      backgroundColor: 'transparent',
+      borderColor: 'transparent',
+    },
+  },
+};
+
+SelectMultiple.propTypes = {
+  options: PropTypes.arrayOf(
+    PropTypes.shape({
+      label: PropTypes.string,
+      value: PropTypes.string,
+      nomeCategoria: PropTypes.string,
+    })
+  ).isRequired,
+  onSelected: PropTypes.func.isRequired,
+  styles: PropTypes.shape({
+    containerStyle: PropTypes.object,
+    textStyle: PropTypes.object,
+    checkedColor: PropTypes.string,
+    uncheckedColor: PropTypes.string,
+    fontFamily: PropTypes.string,
+  }),
+  iconType: PropTypes.string,
+  size: PropTypes.number,
+  iconRight: PropTypes.bool,
+  checkedIcon: PropTypes.string,
+  uncheckedIcon: PropTypes.string,
+  checkedTitle: PropTypes.string,
+};
+
 export default SelectMultiple;