dropdown_react_aqdas - npm Package Compare versions

Comparing version 1.0.1 to 1.0.2

102

index.js

		@@ -1,70 +0,52 @@
		import React, { useState, useEffect } from "react";
		import PropTypes from "prop-types";
		import React from "react";

		const DropDown = ({ data, onSelect, ASC, initialOption }) => {
		const [isOpen, setIsOpen] = useState(false);
		const [selectedOption, setSelectedOption] = useState(
		initialOption \|\|
		(ASC
		? data.sort((a, b) => a.name.localeCompare(b.name))[0].name
		: data[0].name)
		/**
		* @returns custom Dropdown menu
		*/
		function Dropdown_menu({ name, datas, onChange, required }) {
		return React.createElement(
		"div",
		{ className: "input" },
		React.createElement(
		"label",
		{ className: "input__label", htmlFor: name },
		name
		),
		React.createElement(
		"select",
		{
		className: "input__input",
		name: name,
		id: name,
		onChange: onChange,
		required: required,
		},
		// Check if datas is an array and map through it
		datas && datas.length > 0
		? datas.map((data) =>
		React.createElement(
		"option",
		{ key: data.name, value: data.value },
		data.name
		)
		)
		: React.createElement("option", { disabled: true }, "No options available")
		)
		);
		}

		const toggleDropDown = () => setIsOpen(!isOpen);
		export default Dropdown_menu;

		const handleOptionSelect = (option) => {
		setSelectedOption(option);
		onSelect(option);
		setIsOpen(false);
		};

		useEffect(() => {
		if (initialOption) {
		setSelectedOption(initialOption);
		}
		}, [initialOption]);

		const sortedData = ASC
		? [...data].sort((a, b) => a.name.localeCompare(b.name))
		: data;

		return (
		<div className="dropdown">
		<div className="dropdown-header" onClick={toggleDropDown}>
		{selectedOption}
		<span className="dropdown-icon">{isOpen ? "▲" : "▼"}</span>
		</div>
		{isOpen && (
		<div className="dropdown-list">
		{sortedData.map((item, index) => (
		<div
		key={index}
		className="dropdown-item"
		onClick={() => handleOptionSelect(item.name)}
		onMouseOver={(e) =>
		(e.target.style.backgroundColor = "#d3cdcd")
		}
		onMouseOut={(e) =>
		(e.target.style.backgroundColor = "#fff")
		}
		>
		{item.name}
		</div>
		))}
		</div>
		)}
		</div>
		);
		};

		DropDown.propTypes = {
		data: PropTypes.arrayOf(
		Dropdown_menu.propTypes = {
		name: PropTypes.string.isRequired,
		datas: PropTypes.arrayOf(
		PropTypes.shape({
		name: PropTypes.string.isRequired,
		abbreviation: PropTypes.string,
		value: PropTypes.oneOfType([PropTypes.string, PropTypes.number])
		.isRequired,
		})
		).isRequired,
		onSelect: PropTypes.func.isRequired,
		ASC: PropTypes.bool,
		initialOption: PropTypes.string,
		onChange: PropTypes.func.isRequired,
		required: PropTypes.bool,
		};

package.json

		{
		"name": "dropdown_react_aqdas",
		"version": "1.0.1",
		"version": "1.0.2",
		"description": "",
		@@ -5,0 +5,0 @@ "main": "index.js",

dropdown_react_aqdas - npm Package Compare versions

New alerts

Fixed alerts

Worsened metrics