@sebgroup/green-react 1.0.0-beta.21 → 1.0.0-beta.24
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.
- package/index.esm.js +19 -23
- package/index.umd.js +19 -23
- package/lib/dropdown/dropdown.d.ts +4 -14
- package/lib/dropdown/hooks.d.ts +5 -13
- package/lib/form/button/button.d.ts +2 -1
- package/package.json +3 -3
package/index.esm.js
CHANGED
|
@@ -1061,11 +1061,13 @@ function Button({
|
|
|
1061
1061
|
children,
|
|
1062
1062
|
variant,
|
|
1063
1063
|
onClick,
|
|
1064
|
+
disabled,
|
|
1064
1065
|
active = false,
|
|
1065
1066
|
type = 'button'
|
|
1066
1067
|
}) {
|
|
1067
1068
|
const props = {
|
|
1068
|
-
type
|
|
1069
|
+
type,
|
|
1070
|
+
disabled
|
|
1069
1071
|
};
|
|
1070
1072
|
const classNames = [];
|
|
1071
1073
|
if (variant) classNames.push(variant);
|
|
@@ -2675,7 +2677,9 @@ const useDropdown = ({
|
|
|
2675
2677
|
options,
|
|
2676
2678
|
loop,
|
|
2677
2679
|
multiSelect,
|
|
2678
|
-
|
|
2680
|
+
searchable,
|
|
2681
|
+
searchFilter,
|
|
2682
|
+
compareWith,
|
|
2679
2683
|
useValue,
|
|
2680
2684
|
display,
|
|
2681
2685
|
togglerRef,
|
|
@@ -2719,14 +2723,7 @@ const useDropdown = ({
|
|
|
2719
2723
|
className: (_a = o.classes) === null || _a === void 0 ? void 0 : _a.join(' '),
|
|
2720
2724
|
children: o[dropdown.display],
|
|
2721
2725
|
selected: o.selected,
|
|
2722
|
-
onClick: () =>
|
|
2723
|
-
handler === null || handler === void 0 ? void 0 : handler.select(o).then(() => {
|
|
2724
|
-
if (onChange) {
|
|
2725
|
-
const result = options.find(item => item.key === o.key);
|
|
2726
|
-
result && onChange(result);
|
|
2727
|
-
}
|
|
2728
|
-
});
|
|
2729
|
-
}
|
|
2726
|
+
onClick: () => handler === null || handler === void 0 ? void 0 : handler.select(o)
|
|
2730
2727
|
});
|
|
2731
2728
|
});
|
|
2732
2729
|
setListItems(newListItems);
|
|
@@ -2738,14 +2735,7 @@ const useDropdown = ({
|
|
|
2738
2735
|
inputProps: {
|
|
2739
2736
|
defaultChecked: o.selected,
|
|
2740
2737
|
type: 'checkbox',
|
|
2741
|
-
|
|
2742
|
-
handler === null || handler === void 0 ? void 0 : handler.select(o, false).then(() => {
|
|
2743
|
-
if (onChange) {
|
|
2744
|
-
const result = options.find(item => item.key === o.key);
|
|
2745
|
-
result && onChange(result);
|
|
2746
|
-
}
|
|
2747
|
-
});
|
|
2748
|
-
}
|
|
2738
|
+
onClick: () => handler === null || handler === void 0 ? void 0 : handler.select(o, false)
|
|
2749
2739
|
},
|
|
2750
2740
|
spanProps: {
|
|
2751
2741
|
children: o[dropdown.display]
|
|
@@ -2779,7 +2769,7 @@ const useDropdown = ({
|
|
|
2779
2769
|
loop,
|
|
2780
2770
|
multiSelect
|
|
2781
2771
|
}); // eslint-disable-next-line react-hooks/exhaustive-deps
|
|
2782
|
-
}, [id, texts, options, loop, multiSelect,
|
|
2772
|
+
}, [id, texts, options, loop, multiSelect, searchable, searchFilter, compareWith, useValue, display]); // When validator changes
|
|
2783
2773
|
|
|
2784
2774
|
useEffect(() => {
|
|
2785
2775
|
if (!dropdown) return;
|
|
@@ -2794,11 +2784,13 @@ const useDropdown = ({
|
|
|
2794
2784
|
options,
|
|
2795
2785
|
loop,
|
|
2796
2786
|
multiSelect,
|
|
2797
|
-
|
|
2787
|
+
searchable,
|
|
2788
|
+
searchFilter,
|
|
2789
|
+
compareWith,
|
|
2798
2790
|
useValue,
|
|
2799
2791
|
display,
|
|
2800
2792
|
validator
|
|
2801
|
-
}, togglerRef.current, listboxRef.current, listboxRef.current, dd => setDropdown(dd)));
|
|
2793
|
+
}, togglerRef.current, listboxRef.current, listboxRef.current, dd => setDropdown(dd), value => onChange === null || onChange === void 0 ? void 0 : onChange(value)));
|
|
2802
2794
|
}
|
|
2803
2795
|
|
|
2804
2796
|
return () => handler === null || handler === void 0 ? void 0 : handler.destroy(); // eslint-disable-next-line react-hooks/exhaustive-deps
|
|
@@ -2817,7 +2809,9 @@ const Dropdown = ({
|
|
|
2817
2809
|
options,
|
|
2818
2810
|
loop,
|
|
2819
2811
|
multiSelect,
|
|
2820
|
-
|
|
2812
|
+
searchable,
|
|
2813
|
+
searchFilter,
|
|
2814
|
+
compareWith,
|
|
2821
2815
|
useValue,
|
|
2822
2816
|
display,
|
|
2823
2817
|
texts,
|
|
@@ -2839,7 +2833,9 @@ const Dropdown = ({
|
|
|
2839
2833
|
options,
|
|
2840
2834
|
loop,
|
|
2841
2835
|
multiSelect,
|
|
2842
|
-
|
|
2836
|
+
searchable,
|
|
2837
|
+
searchFilter,
|
|
2838
|
+
compareWith,
|
|
2843
2839
|
useValue,
|
|
2844
2840
|
display,
|
|
2845
2841
|
togglerRef,
|
package/index.umd.js
CHANGED
|
@@ -1067,11 +1067,13 @@
|
|
|
1067
1067
|
children,
|
|
1068
1068
|
variant,
|
|
1069
1069
|
onClick,
|
|
1070
|
+
disabled,
|
|
1070
1071
|
active = false,
|
|
1071
1072
|
type = 'button'
|
|
1072
1073
|
}) {
|
|
1073
1074
|
const props = {
|
|
1074
|
-
type
|
|
1075
|
+
type,
|
|
1076
|
+
disabled
|
|
1075
1077
|
};
|
|
1076
1078
|
const classNames = [];
|
|
1077
1079
|
if (variant) classNames.push(variant);
|
|
@@ -2681,7 +2683,9 @@
|
|
|
2681
2683
|
options,
|
|
2682
2684
|
loop,
|
|
2683
2685
|
multiSelect,
|
|
2684
|
-
|
|
2686
|
+
searchable,
|
|
2687
|
+
searchFilter,
|
|
2688
|
+
compareWith,
|
|
2685
2689
|
useValue,
|
|
2686
2690
|
display,
|
|
2687
2691
|
togglerRef,
|
|
@@ -2725,14 +2729,7 @@
|
|
|
2725
2729
|
className: (_a = o.classes) === null || _a === void 0 ? void 0 : _a.join(' '),
|
|
2726
2730
|
children: o[dropdown.display],
|
|
2727
2731
|
selected: o.selected,
|
|
2728
|
-
onClick: () =>
|
|
2729
|
-
handler === null || handler === void 0 ? void 0 : handler.select(o).then(() => {
|
|
2730
|
-
if (onChange) {
|
|
2731
|
-
const result = options.find(item => item.key === o.key);
|
|
2732
|
-
result && onChange(result);
|
|
2733
|
-
}
|
|
2734
|
-
});
|
|
2735
|
-
}
|
|
2732
|
+
onClick: () => handler === null || handler === void 0 ? void 0 : handler.select(o)
|
|
2736
2733
|
});
|
|
2737
2734
|
});
|
|
2738
2735
|
setListItems(newListItems);
|
|
@@ -2744,14 +2741,7 @@
|
|
|
2744
2741
|
inputProps: {
|
|
2745
2742
|
defaultChecked: o.selected,
|
|
2746
2743
|
type: 'checkbox',
|
|
2747
|
-
|
|
2748
|
-
handler === null || handler === void 0 ? void 0 : handler.select(o, false).then(() => {
|
|
2749
|
-
if (onChange) {
|
|
2750
|
-
const result = options.find(item => item.key === o.key);
|
|
2751
|
-
result && onChange(result);
|
|
2752
|
-
}
|
|
2753
|
-
});
|
|
2754
|
-
}
|
|
2744
|
+
onClick: () => handler === null || handler === void 0 ? void 0 : handler.select(o, false)
|
|
2755
2745
|
},
|
|
2756
2746
|
spanProps: {
|
|
2757
2747
|
children: o[dropdown.display]
|
|
@@ -2785,7 +2775,7 @@
|
|
|
2785
2775
|
loop,
|
|
2786
2776
|
multiSelect
|
|
2787
2777
|
}); // eslint-disable-next-line react-hooks/exhaustive-deps
|
|
2788
|
-
}, [id, texts, options, loop, multiSelect,
|
|
2778
|
+
}, [id, texts, options, loop, multiSelect, searchable, searchFilter, compareWith, useValue, display]); // When validator changes
|
|
2789
2779
|
|
|
2790
2780
|
React.useEffect(() => {
|
|
2791
2781
|
if (!dropdown) return;
|
|
@@ -2800,11 +2790,13 @@
|
|
|
2800
2790
|
options,
|
|
2801
2791
|
loop,
|
|
2802
2792
|
multiSelect,
|
|
2803
|
-
|
|
2793
|
+
searchable,
|
|
2794
|
+
searchFilter,
|
|
2795
|
+
compareWith,
|
|
2804
2796
|
useValue,
|
|
2805
2797
|
display,
|
|
2806
2798
|
validator
|
|
2807
|
-
}, togglerRef.current, listboxRef.current, listboxRef.current, dd => setDropdown(dd)));
|
|
2799
|
+
}, togglerRef.current, listboxRef.current, listboxRef.current, dd => setDropdown(dd), value => onChange === null || onChange === void 0 ? void 0 : onChange(value)));
|
|
2808
2800
|
}
|
|
2809
2801
|
|
|
2810
2802
|
return () => handler === null || handler === void 0 ? void 0 : handler.destroy(); // eslint-disable-next-line react-hooks/exhaustive-deps
|
|
@@ -2823,7 +2815,9 @@
|
|
|
2823
2815
|
options,
|
|
2824
2816
|
loop,
|
|
2825
2817
|
multiSelect,
|
|
2826
|
-
|
|
2818
|
+
searchable,
|
|
2819
|
+
searchFilter,
|
|
2820
|
+
compareWith,
|
|
2827
2821
|
useValue,
|
|
2828
2822
|
display,
|
|
2829
2823
|
texts,
|
|
@@ -2845,7 +2839,9 @@
|
|
|
2845
2839
|
options,
|
|
2846
2840
|
loop,
|
|
2847
2841
|
multiSelect,
|
|
2848
|
-
|
|
2842
|
+
searchable,
|
|
2843
|
+
searchFilter,
|
|
2844
|
+
compareWith,
|
|
2849
2845
|
useValue,
|
|
2850
2846
|
display,
|
|
2851
2847
|
togglerRef,
|
|
@@ -1,16 +1,6 @@
|
|
|
1
|
-
import {
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
id?: string;
|
|
5
|
-
texts?: DropdownTexts;
|
|
6
|
-
options: DropdownOption[];
|
|
7
|
-
useValue?: string;
|
|
8
|
-
display?: string;
|
|
9
|
-
selectValue?: string;
|
|
10
|
-
loop?: boolean;
|
|
11
|
-
multiSelect?: boolean;
|
|
12
|
-
onChange?: (o: DropdownOption) => void;
|
|
13
|
-
validator?: IValidator;
|
|
1
|
+
import { DropdownArgs, OnChange } from '@sebgroup/extract';
|
|
2
|
+
export interface DropdownProps extends DropdownArgs {
|
|
3
|
+
onChange?: OnChange;
|
|
14
4
|
}
|
|
15
|
-
export declare const Dropdown: ({ id, options, loop, multiSelect,
|
|
5
|
+
export declare const Dropdown: ({ id, options, loop, multiSelect, searchable, searchFilter, compareWith, useValue, display, texts, onChange, validator, }: DropdownProps) => JSX.Element;
|
|
16
6
|
export default Dropdown;
|
package/lib/dropdown/hooks.d.ts
CHANGED
|
@@ -1,18 +1,10 @@
|
|
|
1
|
-
import { DropdownHandler,
|
|
1
|
+
import { DropdownHandler, OnChange, DropdownArgs } from '@sebgroup/extract';
|
|
2
2
|
import { HTMLAttributes, InputHTMLAttributes, RefObject } from 'react';
|
|
3
|
-
import { IValidator } from
|
|
4
|
-
interface HookArgs {
|
|
5
|
-
id?: string;
|
|
6
|
-
texts?: DropdownTexts;
|
|
7
|
-
options: DropdownOption[];
|
|
8
|
-
multiSelect?: boolean;
|
|
9
|
-
loop?: boolean;
|
|
10
|
-
selectValue?: string;
|
|
11
|
-
useValue?: string;
|
|
12
|
-
display?: string;
|
|
3
|
+
import { IValidator } from '@sebgroup/extract';
|
|
4
|
+
interface HookArgs extends DropdownArgs {
|
|
13
5
|
togglerRef: RefObject<HTMLElement>;
|
|
14
6
|
listboxRef: RefObject<HTMLElement>;
|
|
15
|
-
onChange?:
|
|
7
|
+
onChange?: OnChange;
|
|
16
8
|
validator?: IValidator;
|
|
17
9
|
}
|
|
18
10
|
declare type Props = HTMLAttributes<HTMLElement>;
|
|
@@ -33,5 +25,5 @@ interface HookResult {
|
|
|
33
25
|
listItems: Props[];
|
|
34
26
|
multiSelectProps: MultiSelectProps;
|
|
35
27
|
}
|
|
36
|
-
export declare const useDropdown: ({ id, texts, options, loop, multiSelect,
|
|
28
|
+
export declare const useDropdown: ({ id, texts, options, loop, multiSelect, searchable, searchFilter, compareWith, useValue, display, togglerRef, listboxRef, onChange, validator, }: HookArgs) => HookResult;
|
|
37
29
|
export {};
|
|
@@ -6,6 +6,7 @@ export interface ButtonProps {
|
|
|
6
6
|
variant?: ButtonVariant;
|
|
7
7
|
active?: boolean;
|
|
8
8
|
onClick?: MouseEventHandler<HTMLButtonElement>;
|
|
9
|
+
disabled?: boolean;
|
|
9
10
|
}
|
|
10
|
-
export declare function Button({ children, variant, onClick, active, type, }: ButtonProps): JSX.Element;
|
|
11
|
+
export declare function Button({ children, variant, onClick, disabled, active, type, }: ButtonProps): JSX.Element;
|
|
11
12
|
export default Button;
|
package/package.json
CHANGED
|
@@ -1,13 +1,13 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@sebgroup/green-react",
|
|
3
|
-
"version": "1.0.0-beta.
|
|
3
|
+
"version": "1.0.0-beta.24",
|
|
4
4
|
"peerDependencies": {
|
|
5
5
|
"react": "^17 || ^18",
|
|
6
6
|
"react-dom": "^17 || ^18"
|
|
7
7
|
},
|
|
8
8
|
"dependencies": {
|
|
9
|
-
"@sebgroup/chlorophyll": "^1.0.0-beta.
|
|
10
|
-
"@sebgroup/extract": "^1.0.0-beta.
|
|
9
|
+
"@sebgroup/chlorophyll": "^1.0.0-beta.25",
|
|
10
|
+
"@sebgroup/extract": "^1.0.0-beta.24"
|
|
11
11
|
},
|
|
12
12
|
"description": "React components built on top of @sebgroup/chlorophyll.",
|
|
13
13
|
"repository": {
|