groovinads-ui 1.2.47 → 1.2.49

package/package.json

@@ -1,7 +1,7 @@
 {
 	"name": "groovinads-ui",
 	"description": "Groovinads UI is a React component library designed exclusively for Groovinads applications. It provides ready-to-use UI elements styled according to Groovinads design guidelines to facilitate rapid development.",
-	"version": "1.2.47",
+	"version": "1.2.49",
 	"keywords": [
 		"css",
 		"sass",

package/src/components/Dropdowns/DropdownSimpleDatePicker.jsx

@@ -0,0 +1,136 @@
+import PropTypes from 'prop-types';
+import React, { useEffect, useState } from 'react'
+
+// HOOKS
+import { useTextFormatter } from '../../hooks';
+
+// COMPONENTS
+import { Dropdown } from 'react-bootstrap'
+import { Icon } from '../Labels';
+import { Button } from '../Button';
+import DatePicker from 'react-datepicker';
+
+
+export default function DropdownSimpleDatePicker({
+	className = '',
+	show,
+	setShow,
+	onToggle,
+	inputLabel = 'period',
+	overflow = false,
+	date,
+	setDate
+}) {
+
+	const [editingDate, setEditingDate] = useState(date);
+
+	const [internalShow, setInternalShow] = useState(!!show);
+
+	const { capitalice } = useTextFormatter();
+
+	const isMobile = window?.innerWidth < 500;
+
+
+	const internalToggle = () => {
+		setInternalShow((prevShow) => !prevShow);
+		try {
+			onToggle();
+		} catch (error) { }
+	};
+
+	const closeDropdown = () => {
+		setInternalShow(false);
+		try {
+			setShow(false);
+		} catch (error) { }
+	};
+
+	const updateDateFilters = (date) => {
+		setEditingDate(date);
+		setTimeout(() => {
+			setDate(editingDate?.toString());
+			closeDropdown();
+		}, 100);
+	};
+
+	const clearDate = () => {
+		setEditingDate(null);
+		setDate(null);
+		closeDropdown();
+
+	}
+
+	useEffect(() => {
+		setInternalShow(!!show);
+	}, [show]);
+
+	return (
+		<Dropdown
+			show={internalShow}
+			className={className}
+		>
+			<Dropdown.Toggle
+				variant='toggle-filter'
+				onClick={internalToggle}
+				className={`btn-input w-100`}
+			>
+				<span className='dropdown-label'>{capitalice(inputLabel)}</span>
+				{editingDate ?
+					<span>
+						{editingDate.toString().split('00')[0]}
+					</span> :
+				<span></span>
+				}
+				<Icon iconName='angle-down' />
+
+			</Dropdown.Toggle>
+
+			<Dropdown.Menu
+				popperConfig={
+					overflow
+						? {
+							strategy: 'fixed',
+							onFirstUpdate: () =>
+								window.dispatchEvent(new CustomEvent('scroll')),
+						}
+						: undefined
+				}
+			>
+				<Dropdown.Item as={'div'}>
+
+					<DatePicker
+						className='form-control form-search'
+						selected={editingDate}
+						onChange={updateDateFilters}
+						startDate={editingDate}
+						monthsShown={1}
+						inline
+					/>
+
+					<div className='px-2 w-100'>
+						<Button
+							onClick={clearDate}
+							icon='calendar-circle-minus'
+							size='xs'
+							variant='terciary'
+							className='w-100'
+						>
+							Clear
+						</Button>
+					</div>
+				</Dropdown.Item>
+			</Dropdown.Menu>
+		</Dropdown>
+	)
+}
+
+DropdownSimpleDatePicker.propTypes = {
+	className: PropTypes.string,
+	show: PropTypes.bool,
+	setShow: PropTypes.func,
+	onToggle: PropTypes.func,
+	inputLabel: PropTypes.string,
+	overflow: PropTypes.bool,
+	date: PropTypes.string,
+	setDate: PropTypes.func,
+};

package/src/components/Dropdowns/index.js

@@ -1,6 +1,7 @@
 import DropdownComponent from './DropdownComponent';
 import DropdownFilter from './DropdownFilter';
 import DropdownMultiSelect from './DropdownMultiSelect';
+import DropdownSimpleDatePicker from './DropdownSimpleDatePicker';
 import { DropdownDatePicker } from './DropdownsDatePicker/index';
 
-export { DropdownComponent, DropdownFilter, DropdownMultiSelect, DropdownDatePicker }
+export { DropdownComponent, DropdownFilter, DropdownMultiSelect, DropdownDatePicker, DropdownSimpleDatePicker }

package/src/components/Inputs/Radio.jsx

@@ -9,9 +9,10 @@ const Radio = ({
 	children,
 	className = '',
 	id,
+	fullWidth = false,
 	name,
 	setStatus,
-	status = false
+	status = false,
 }) => {
 	const { toCamelCase } = useTextFormatter();
 
@@ -26,7 +27,7 @@ const Radio = ({
 
 	return (
 		<div className={`form-group form-check ${className}`}>
-			<label className='radio'>
+			<label className={`radio ${fullWidth ? 'w-100' : ''}`}>
 				<input
 					type='radio'
 					checked={status}
@@ -47,6 +48,7 @@ const Radio = ({
 Radio.propTypes = {
 	className: PropTypes.string,
 	id: PropTypes.string,
+	fullWidth: PropTypes.bool,
 	name: PropTypes.string,
 	setStatus: PropTypes.func,
 	status: PropTypes.bool,

package/src/index.js

@@ -6,6 +6,8 @@ import DropdownComponent from './components/Dropdowns/DropdownComponent';
 import DropdownFilter from './components/Dropdowns/DropdownFilter';
 import DropdownMultiSelect from './components/Dropdowns/DropdownMultiSelect';
 import DropdownDatePicker from './components/Dropdowns/DropdownsDatePicker/DropdownDatePicker';
+import DropdownSimpleDatePicker from './components/Dropdowns/DropdownSimpleDatePicker';
+
 // Inputs
 import Checkbox from './components/Inputs/Checkbox';
 import Input from './components/Inputs/Input';
@@ -38,6 +40,7 @@ export {
     DropdownComponent,
     DropdownFilter,
     DropdownMultiSelect,
+    DropdownSimpleDatePicker,
     DropdownDatePicker,
     // Inputs
     Checkbox,

package/src/stories/DropdownDatePicker.stories.jsx

@@ -20,7 +20,7 @@ const Template = (args) => {
 	useEffect(() => {
 		console.log('dates From:', dateFrom);
 	}, [dateFrom]);
-	
+
 	useEffect(() => {
 		console.log('dates To:', dateTo);
 	}, [ dateTo ]);
@@ -34,7 +34,7 @@ const Template = (args) => {
 					// show={show}
 					// setShow={setShow}
 					// onToggle={handleToggle}
-					variant='filter'
+					//variant='filter'
 					dateFrom={dateFrom}
 					setDateFrom={setDateFrom}
 					dateTo={dateTo}

package/src/stories/DropdownSimpleDatePicker.stories.jsx

@@ -0,0 +1,32 @@
+import React, { useState, useEffect } from 'react';
+import DropdownSimpleDatePicker from '../components/Dropdowns/DropdownSimpleDatePicker';
+
+export default {
+	title: 'Dropdown/DropdownSimpleDatePicker',
+	component: DropdownSimpleDatePicker,
+};
+
+const Template = (args) => {
+	const [show, setShow] = useState(false);
+
+	const [dateFrom, setDateFrom] = useState('');
+	const [dateTo, setDateTo] = useState('');
+	
+
+	return (
+		<>
+			<button onClick={() => setShow(!show)}>Toggle</button>
+			<div className='col-2'>
+				<DropdownSimpleDatePicker
+					{...args}
+					dateFrom={dateFrom}
+					setDateFrom={setDateFrom}
+					date={dateTo}
+					setDate={setDateTo}
+				/>
+			</div>
+		</>
+	);
+};
+
+export const Default = Template.bind({});