ocr-p14-dropdown-npm - npm Package Compare versions

Comparing version 1.2.0 to 2.0.0

dist/Dropdown.js

@@ -37,3 +37,4 @@ "use strict";
     onChange = _ref.onChange,
-    onReset = _ref.onReset;
+    _ref$onReset = _ref.onReset,
+    onReset = _ref$onReset === void 0 ? false : _ref$onReset;
   Dropdown.propTypes = {
@@ -96,2 +97,10 @@ dropdownData: _propTypes["default"].arrayOf(_propTypes["default"].oneOfType([_propTypes["default"].string, _propTypes["default"].number])).isRequired
   }, [dropdownSelection]);
+  (0, _react.useEffect)(function () {
+    if (onReset) {
+      setDropdownIsOpen(false);
+      setDropdownSelection(dropdownData[0]);
+      setFilteredDropdownData(_toConsumableArray(dropdownData));
+      setDropdownZIndex(0);
+    }
+  }, [onReset]);
   var handleOutsideClick = function handleOutsideClick(event) {
@@ -112,9 +121,2 @@ if (dropdownRef.current && !dropdownRef.current.contains(event.target)) {
   }, [dropdownIsOpen]);
-  (0, _react.useEffect)(function () {
-    console.log("onReset in dropdown");
-    if (onReset) {
-      setDropdownIsOpen(false);
-      setDropdownSelection(dropdownData[0]);
-    }
-  }, [onReset]);
   return /*#__PURE__*/_react["default"].createElement(DropdownWrapper, {
@@ -121,0 +123,0 @@ zIndex: dropdownZIndex,

package.json

 {
   "name": "ocr-p14-dropdown-npm",
-  "version": "1.2.0",
+  "version": "2.0.0",
   "repository": {
@@ -5,0 +5,0 @@ "type": "git",

README.md

 # OCR-P14-DROPDOWN-NPM
 
 The OCR-P14-DROPDOWN-NPM component is a React Dropdown component wich is a custom dropdown list that allows users to select items from a list of choices. It is fully styled using styled-components and supports search functionality to filter displayed items.
+The component handle z-index so you can have multiple dropdowns and opening one will cover the other one.
 
@@ -29,55 +30,83 @@ ## Requirements
 
+### Basic Example
+
 ```
 import React, { useState } from "react";
-import Dropdown from "your-path-to-dropdown-component";
+import Dropdown from "ocr-p14-dropdown-npm";
 
-const YourComponent = () => {
-  const [selectedItem, setSelectedItem] = useState("");
+export default const YourComponent = () => {
+    const [selectedItem, setSelectedItem] = useState("");
 
-  const handleChange = (selected) => {
-    setSelectedItem(selected);
-  };
+    const arrOfStrOrNum = ["Option 1", "Option 2", "Option 3", "Option 4"]; // arr of data to pass
 
-  const handleReset = () => {
-    setSelectedItem("");
-  };
+    return (
+        <div>
+            <h1>Example of using the Dropdown component</h1>
+            <Dropdown
+                dropdownData={arrOfStrOrNum}
+                onChange={(selection) => setSelectedItem(selection)}
+            />
+        </div>
+    );
+};
+```
 
-  const dropdownData = ["Option 1", "Option 2", "Option 3", "Option 4"];
+### Example with reset dropdown selection
 
-  return (
-    <div>
-      <h1>Example of using the Dropdown component</h1>
-      <Dropdown
-        dropdownData={dropdownData}
-        onChange={handleChange}
-        onReset={handleReset}
-      />
-      <p>Selected Item: {selectedItem}</p>
-    </div>
-  );
-};
+If for example, the user submit a form and you want to reset the dropdown component to its original state, you can add a state and pass the onReset props to true.
 
-export default YourComponent;
 ```
+import React, { useState, useEffect } from "react";
+import Dropdown from "ocr-p14-dropdown-npm";
 
-Props
+export default const YourComponent = () => {
+    const [selectedItem, setSelectedItem] = useState("");
+    const [onResetState, setOnResetState] = useState(false);
+
+    useEffect(() => {
+        setOnResetState(false);
+    }, [onResetState])
+
+    const arrOfStrOrNum = ["Option 1", "Option 2", "Option 3", "Option 4"];
+
+    return (
+        <div>
+            <h1>Example of using the Dropdown component</h1>
+            <Dropdown
+                dropdownData={arrOfStrOrNum}
+                onChange={(selection) => setSelectedItem(selection)}
+                onReset={onResetState}
+            />
+            <button onClick={() => setOnResetState(true)}>Reset dropdown selection</button>
+        </div>
+    );
+};
+```
+
+### Props
+
 The Dropdown component takes the following props:
 
-dropdownData (array, required): An array of options to display in the dropdown menu. Each element can be a string or a number.
+- dropdownData (array, required): An array of options to display in the dropdown menu. Each element can be a string or a number.
 
-onChange (function, required): A callback function called when the user selects an item in the dropdown. The function receives the text of the selected item as a parameter.
+- onChange (function, required): A callback function called when the user selects an item in the dropdown. The function receives the text of the selected item as a parameter.
 
-onReset (function, optional): A callback function called when you want to reset the dropdown selection. Use this function if you need to reset the user's selection to a default value.
+- onReset (variable/state, optional): A boolean wich when is "true" will reset the user's selection to a default value (the first of the array of data passed).
 
-Styling
+### Styling
+
 The React Dropdown component is fully styled using styled-components. You can customize the styles by adjusting the CSS properties of the styled components inside the component.
 
-Limitations
+### Limitations
+
 The component is not optimized for very large lists of options, as it will render all the elements in the list. For large amounts of data, we recommend using a virtualization library to optimize performance.
-Notes
-Make sure to handle changes to the parent component's state using the onChange and onReset callback functions.
 
-The component does not have any default styling, so make sure to add your own styles to match your application's theme.
+### Notes
 
-License
+Make sure to handle changes to the parent component's state using the onChange.
+
+The component has some default styling, feel free to add your own styles to match your application's theme.
+
+## License
+
 This project is licensed under the MIT License. You are free to use, modify, and distribute it under the terms of the MIT License.

src/Dropdown.jsx

@@ -73,3 +73,3 @@ import React, { useState, useEffect, useRef } from "react";
 
-const Dropdown = ({ dropdownData, onChange, onReset }) => {
+const Dropdown = ({ dropdownData, onChange, onReset = false }) => {
   Dropdown.propTypes = {
@@ -130,3 +130,2 @@ dropdownData: PropTypes.arrayOf(
     if (onReset) {
-      console.log("useEffect onreset called");
       setDropdownIsOpen(false);
@@ -157,10 +156,2 @@ setDropdownSelection(dropdownData[0]);
 
-  useEffect(() => {
-    console.log("onReset in dropdown");
-    if (onReset) {
-      setDropdownIsOpen(false);
-      setDropdownSelection(dropdownData[0]);
-    }
-  }, [onReset]);
-
   return (
@@ -167,0 +158,0 @@ <DropdownWrapper

No alert changes

Improved metrics

Total package byte prevSize

20280

4.67%

Number of lines in readme file

112

34.94%

Worsened metrics

Lines of code

337

-1.75%

No dependency changes