groovinads-ui 1.2.48 → 1.2.50

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (8) hide show
  1. package/README.md +30 -25
  2. package/dist/index.es.js +4 -4
  3. package/dist/index.js +1 -1
  4. package/package.json +1 -1
  5. package/src/components/Dropdowns/DropdownSimpleDatePicker.jsx +99 -102
  6. package/src/components/index.js +49 -0
  7. package/src/index.js +7 -21
  8. package/src/stories/DropdownSimpleDatePicker.stories.jsx +9 -8
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "groovinads-ui",
3
3
  "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.",
4
- "version": "1.2.48",
4
+ "version": "1.2.50",
5
5
  "keywords": [
6
6
  "css",
7
7
  "sass",
package/src/components/Dropdowns/DropdownSimpleDatePicker.jsx CHANGED
@@ -12,116 +12,111 @@ import DatePicker from 'react-datepicker';
12
12
 
13
13
 
14
14
  export default function DropdownSimpleDatePicker({
15
- className = '',
16
- show,
17
- setShow,
18
- onToggle,
19
- inputLabel = 'period',
20
- overflow = false,
21
- date,
22
- setDate
15
+ className = '',
16
+ show,
17
+ setShow,
18
+ onToggle,
19
+ inputLabel = 'period',
20
+ overflow = false,
21
+ date,
22
+ setDate,
23
+ handleClear,
23
24
  }) {
24
25
 
25
- const [editingDate, setEditingDate] = useState(date);
26
+ const [internalShow, setInternalShow] = useState(!!show);
26
27
 
27
- const [internalShow, setInternalShow] = useState(!!show);
28
28
 
29
- const { capitalice } = useTextFormatter();
29
+ const internalToggle = () => {
30
+ setInternalShow((prevShow) => !prevShow);
31
+ try {
32
+ onToggle();
33
+ } catch (error) { }
34
+ };
30
35
 
31
- const isMobile = window?.innerWidth < 500;
36
+ const closeDropdown = () => {
37
+ setInternalShow(false);
38
+ try {
39
+ setShow(false);
40
+ } catch (error) { }
41
+ };
32
42
 
43
+ const updateDateFilters = (newDate) => {
44
+ setTimeout(() => {
45
+ setDate(newDate?.toString());
46
+ closeDropdown();
47
+ }, 100);
48
+ };
33
49
 
34
- const internalToggle = () => {
35
- setInternalShow((prevShow) => !prevShow);
36
- try {
37
- onToggle();
38
- } catch (error) { }
39
- };
40
-
41
- const closeDropdown = () => {
42
- setInternalShow(false);
43
- try {
44
- setShow(false);
45
- } catch (error) { }
46
- };
47
-
48
- const updateDateFilters = (date) => {
49
- setEditingDate(date);
50
- setTimeout(() => {
51
- setDate(editingDate?.toString());
52
- closeDropdown();
53
- }, 100);
54
- };
55
-
50
+
56
51
  const clearDate = () => {
57
- setEditingDate(null);
58
- setDate(null);
59
- closeDropdown();
60
-
61
- }
62
-
63
- useEffect(() => {
64
- setInternalShow(!!show);
65
- }, [show]);
66
-
67
- return (
68
- <Dropdown
69
- show={internalShow}
70
- className={className}
71
- >
72
- <Dropdown.Toggle
73
- variant='toggle-filter'
74
- onClick={internalToggle}
75
- className={`btn-input w-100`}
76
- >
77
- <span className='dropdown-label'>{capitalice(inputLabel)}</span>
78
- {editingDate ?
79
- <span>
80
- {editingDate.toString().split('00')[0]}
81
- </span> :
82
- <span></span>
83
- }
84
- <Icon iconName='angle-down' />
85
-
86
- </Dropdown.Toggle>
87
-
88
- <Dropdown.Menu
89
- popperConfig={
90
- overflow
91
- ? {
92
- strategy: 'fixed',
93
- onFirstUpdate: () =>
94
- window.dispatchEvent(new CustomEvent('scroll')),
95
- }
96
- : undefined
97
- }
98
- >
99
- <Dropdown.Item as={'div'}>
100
-
101
- <DatePicker
102
- className='form-control form-search'
103
- selected={editingDate}
104
- onChange={updateDateFilters}
105
- startDate={editingDate}
106
- monthsShown={1}
107
- inline
108
- />
109
-
110
- <div className='px-2 w-100'>
111
- <Button
112
- onClick={clearDate}
113
- icon='calendar-circle-minus'
114
- size='xs'
115
- variant='terciary'
116
- className='w-100'
117
- >
118
- Clear
119
- </Button>
120
- </div>
121
- </Dropdown.Item>
122
- </Dropdown.Menu>
123
- </Dropdown>
124
- )
52
+ if (handleClear) {
53
+ handleClear()
54
+ return
55
+ }
56
+ setDate(null);
57
+ closeDropdown();
58
+ }
59
+
60
+ useEffect(() => {
61
+ setInternalShow(!!show);
62
+ }, [show]);
63
+
64
+ return (
65
+ <Dropdown
66
+ show={internalShow}
67
+ className={className}
68
+ >
69
+ <Dropdown.Toggle
70
+ variant='toggle-filter'
71
+ onClick={internalToggle}
72
+ className={`btn-input w-100`}
73
+ >
74
+ <span className='dropdown-label'>{inputLabel}</span>
75
+ <span>
76
+ {(date || '').toString().split('00')[0]}
77
+ </span>
78
+
79
+ <Icon iconName='angle-down' />
80
+
81
+ </Dropdown.Toggle>
82
+
83
+ <Dropdown.Menu
84
+ popperConfig={
85
+ overflow
86
+ ? {
87
+ strategy: 'fixed',
88
+ onFirstUpdate: () =>
89
+ window.dispatchEvent(new CustomEvent('scroll')),
90
+ }
91
+ : undefined
92
+ }
93
+ >
94
+ <Dropdown.Item as={'div'}>
95
+
96
+ <DatePicker
97
+ className='form-control form-search'
98
+ selected={date || ''}
99
+ onChange={updateDateFilters}
100
+ startDate={date || ''}
101
+ monthsShown={1}
102
+ inline
103
+ />
104
+
105
+ <div className='px-2 w-100'>
106
+ <Button
107
+ onClick={clearDate}
108
+ icon='calendar-circle-minus'
109
+ size='xs'
110
+ variant='terciary'
111
+ className='w-100'
112
+ >
113
+ Clear
114
+ </Button>
115
+ </div>
116
+ </Dropdown.Item>
117
+ </Dropdown.Menu>
118
+ </Dropdown>
119
+ )
125
120
  }
126
121
 
127
122
  DropdownSimpleDatePicker.propTypes = {
@@ -133,4 +128,6 @@ DropdownSimpleDatePicker.propTypes = {
133
128
  overflow: PropTypes.bool,
134
129
  date: PropTypes.string,
135
130
  setDate: PropTypes.func,
131
+ clearDate: PropTypes.func,
132
+ handleClear: PropTypes.func,
136
133
  };
package/src/components/index.js ADDED
@@ -0,0 +1,49 @@
1
+ // Buttons
2
+ import Button from "./Button/Button";
3
+
4
+ // Dropdowns
5
+ import { DropdownComponent, DropdownMultiSelect, DropdownDatePicker, DropdownFilter, DropdownSimpleDatePicker } from './Dropdowns';
6
+
7
+ // Inputs
8
+ import { Checkbox, Input, Radio, Switch, Textarea } from './Inputs';
9
+
10
+ // Labels
11
+ import { Alert, Icon, LoginSource, PillComponent, Spinner, StatusIcon } from './Labels';
12
+
13
+ // Toasts
14
+ import {ToastComponent, ToastProgress} from './Toasts';
15
+
16
+ // Navigation
17
+ import {Navbar, Stepper, Tabnav, Sidebar} from './Navigation';
18
+
19
+ export {
20
+ // Buttons
21
+ Button,
22
+ // Dropdowns
23
+ DropdownComponent,
24
+ DropdownFilter,
25
+ DropdownMultiSelect,
26
+ DropdownSimpleDatePicker,
27
+ DropdownDatePicker,
28
+ // Inputs
29
+ Checkbox,
30
+ Input,
31
+ Radio,
32
+ Switch,
33
+ Textarea,
34
+ // Labels
35
+ Alert,
36
+ Icon,
37
+ LoginSource,
38
+ PillComponent,
39
+ Spinner,
40
+ StatusIcon,
41
+ // Toasts
42
+ ToastComponent,
43
+ ToastProgress,
44
+ // Navigation
45
+ Navbar,
46
+ Stepper,
47
+ Tabnav,
48
+ Sidebar
49
+ }
package/src/index.js CHANGED
@@ -2,34 +2,19 @@
2
2
  import Button from "./components/Button/Button";
3
3
 
4
4
  // Dropdowns
5
- import DropdownComponent from './components/Dropdowns/DropdownComponent';
6
- import DropdownFilter from './components/Dropdowns/DropdownFilter';
7
- import DropdownMultiSelect from './components/Dropdowns/DropdownMultiSelect';
8
- import DropdownDatePicker from './components/Dropdowns/DropdownsDatePicker/DropdownDatePicker';
5
+ import {DropdownComponent, DropdownFilter, DropdownMultiSelect, DropdownDatePicker, DropdownSimpleDatePicker} from './components/Dropdowns';
6
+
9
7
  // Inputs
10
- import Checkbox from './components/Inputs/Checkbox';
11
- import Input from './components/Inputs/Input';
12
- import Radio from './components/Inputs/Radio';
13
- import Switch from './components/Inputs/Switch';
14
- import Textarea from './components/Inputs/Textarea';
8
+ import {Checkbox, Input, Radio, Switch, Textarea} from './components/Inputs';
15
9
 
16
10
  // Labels
17
- import Alert from './components/Labels/Alert';
18
- import Icon from './components/Labels/Icon';
19
- import LoginSource from './components/Labels/LoginSource';
20
- import PillComponent from './components/Labels/PillComponent';
21
- import Spinner from './components/Labels/Spinner';
22
- import StatusIcon from './components/Labels/StatusIcon';
11
+ import {Alert, Icon, LoginSource, PillComponent, Spinner, StatusIcon} from './components/Labels';
23
12
 
24
13
  // Toasts
25
- import ToastComponent from './components/Toasts/ToastComponent';
26
- import ToastProgress from './components/Toasts/ToastProgress';
14
+ import {ToastComponent, ToastProgress} from './components/Toasts';
27
15
 
28
16
  // Navigation
29
- import Navbar from './components/Navigation/Navbar';
30
- import Stepper from './components/Navigation/Stepper';
31
- import Tabnav from './components/Navigation/Tabnav';
32
- import Sidebar from './components/Navigation/Sidebar';
17
+ import {Navbar, Stepper, Tabnav, Sidebar} from './components/Navigation';
33
18
 
34
19
  export {
35
20
  // Buttons
@@ -38,6 +23,7 @@ export {
38
23
  DropdownComponent,
39
24
  DropdownFilter,
40
25
  DropdownMultiSelect,
26
+ DropdownSimpleDatePicker,
41
27
  DropdownDatePicker,
42
28
  // Inputs
43
29
  Checkbox,
package/src/stories/DropdownSimpleDatePicker.stories.jsx CHANGED
@@ -9,20 +9,21 @@ export default {
9
9
  const Template = (args) => {
10
10
  const [show, setShow] = useState(false);
11
11
 
12
- const [dateFrom, setDateFrom] = useState('');
13
- const [dateTo, setDateTo] = useState('');
14
-
12
+ const [date, setDate] = useState('');
13
+
14
+ const clearData = () => {
15
+ console.log('afuera');
16
+ }
15
17
 
16
18
  return (
17
19
  <>
18
20
  <button onClick={() => setShow(!show)}>Toggle</button>
19
- <div className='col-2'>
21
+ <div className='col-2 mt-3'>
20
22
  <DropdownSimpleDatePicker
21
23
  {...args}
22
- dateFrom={dateFrom}
23
- setDateFrom={setDateFrom}
24
- date={dateTo}
25
- setDate={setDateTo}
24
+ date={date}
25
+ setDate={setDate}
26
+ handleClear={clearData}
26
27
  />
27
28
  </div>
28
29
  </>