this repo has no description
feat: toggleGroup for selecting action
+338
-43
+271
mast-react-vite/package-lock.json
+271
mast-react-vite/package-lock.json
···
11
11
"@radix-ui/react-checkbox": "^1.1.2",
12
12
"@radix-ui/react-icons": "^1.3.0",
13
13
"@radix-ui/react-slot": "^1.1.2",
14
+
"@radix-ui/react-toggle": "^1.1.2",
15
+
"@radix-ui/react-toggle-group": "^1.1.2",
14
16
"@tanstack/react-table": "^8.20.5",
15
17
"@vlcn.io/react": "^3.1.0",
16
18
"@vlcn.io/rx-tbl": "^0.15.0",
···
729
731
}
730
732
}
731
733
},
734
+
"node_modules/@radix-ui/react-collection": {
735
+
"version": "1.1.2",
736
+
"resolved": "https://registry.npmjs.org/@radix-ui/react-collection/-/react-collection-1.1.2.tgz",
737
+
"integrity": "sha512-9z54IEKRxIa9VityapoEYMuByaG42iSy1ZXlY2KcuLSEtq8x4987/N6m15ppoMffgZX72gER2uHe1D9Y6Unlcw==",
738
+
"dependencies": {
739
+
"@radix-ui/react-compose-refs": "1.1.1",
740
+
"@radix-ui/react-context": "1.1.1",
741
+
"@radix-ui/react-primitive": "2.0.2",
742
+
"@radix-ui/react-slot": "1.1.2"
743
+
},
744
+
"peerDependencies": {
745
+
"@types/react": "*",
746
+
"@types/react-dom": "*",
747
+
"react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
748
+
"react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
749
+
},
750
+
"peerDependenciesMeta": {
751
+
"@types/react": {
752
+
"optional": true
753
+
},
754
+
"@types/react-dom": {
755
+
"optional": true
756
+
}
757
+
}
758
+
},
759
+
"node_modules/@radix-ui/react-collection/node_modules/@radix-ui/react-compose-refs": {
760
+
"version": "1.1.1",
761
+
"resolved": "https://registry.npmjs.org/@radix-ui/react-compose-refs/-/react-compose-refs-1.1.1.tgz",
762
+
"integrity": "sha512-Y9VzoRDSJtgFMUCoiZBDVo084VQ5hfpXxVE+NgkdNsjiDBByiImMZKKhxMwCbdHvhlENG6a833CbFkOQvTricw==",
763
+
"peerDependencies": {
764
+
"@types/react": "*",
765
+
"react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
766
+
},
767
+
"peerDependenciesMeta": {
768
+
"@types/react": {
769
+
"optional": true
770
+
}
771
+
}
772
+
},
773
+
"node_modules/@radix-ui/react-collection/node_modules/@radix-ui/react-primitive": {
774
+
"version": "2.0.2",
775
+
"resolved": "https://registry.npmjs.org/@radix-ui/react-primitive/-/react-primitive-2.0.2.tgz",
776
+
"integrity": "sha512-Ec/0d38EIuvDF+GZjcMU/Ze6MxntVJYO/fRlCPhCaVUyPY9WTalHJw54tp9sXeJo3tlShWpy41vQRgLRGOuz+w==",
777
+
"dependencies": {
778
+
"@radix-ui/react-slot": "1.1.2"
779
+
},
780
+
"peerDependencies": {
781
+
"@types/react": "*",
782
+
"@types/react-dom": "*",
783
+
"react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
784
+
"react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
785
+
},
786
+
"peerDependenciesMeta": {
787
+
"@types/react": {
788
+
"optional": true
789
+
},
790
+
"@types/react-dom": {
791
+
"optional": true
792
+
}
793
+
}
794
+
},
732
795
"node_modules/@radix-ui/react-compose-refs": {
733
796
"version": "1.1.0",
734
797
"resolved": "https://registry.npmjs.org/@radix-ui/react-compose-refs/-/react-compose-refs-1.1.0.tgz",
···
757
820
}
758
821
}
759
822
},
823
+
"node_modules/@radix-ui/react-direction": {
824
+
"version": "1.1.0",
825
+
"resolved": "https://registry.npmjs.org/@radix-ui/react-direction/-/react-direction-1.1.0.tgz",
826
+
"integrity": "sha512-BUuBvgThEiAXh2DWu93XsT+a3aWrGqolGlqqw5VU1kG7p/ZH2cuDlM1sRLNnY3QcBS69UIz2mcKhMxDsdewhjg==",
827
+
"peerDependencies": {
828
+
"@types/react": "*",
829
+
"react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
830
+
},
831
+
"peerDependenciesMeta": {
832
+
"@types/react": {
833
+
"optional": true
834
+
}
835
+
}
836
+
},
760
837
"node_modules/@radix-ui/react-icons": {
761
838
"version": "1.3.0",
762
839
"resolved": "https://registry.npmjs.org/@radix-ui/react-icons/-/react-icons-1.3.0.tgz",
763
840
"integrity": "sha512-jQxj/0LKgp+j9BiTXz3O3sgs26RNet2iLWmsPyRz2SIcR4q/4SbazXfnYwbAr+vLYKSfc7qxzyGQA1HLlYiuNw==",
764
841
"peerDependencies": {
765
842
"react": "^16.x || ^17.x || ^18.x"
843
+
}
844
+
},
845
+
"node_modules/@radix-ui/react-id": {
846
+
"version": "1.1.0",
847
+
"resolved": "https://registry.npmjs.org/@radix-ui/react-id/-/react-id-1.1.0.tgz",
848
+
"integrity": "sha512-EJUrI8yYh7WOjNOqpoJaf1jlFIH2LvtgAl+YcFqNCa+4hj64ZXmPkAKOFs/ukjz3byN6bdb/AVUqHkI8/uWWMA==",
849
+
"dependencies": {
850
+
"@radix-ui/react-use-layout-effect": "1.1.0"
851
+
},
852
+
"peerDependencies": {
853
+
"@types/react": "*",
854
+
"react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
855
+
},
856
+
"peerDependenciesMeta": {
857
+
"@types/react": {
858
+
"optional": true
859
+
}
766
860
}
767
861
},
768
862
"node_modules/@radix-ui/react-presence": {
···
827
921
}
828
922
}
829
923
},
924
+
"node_modules/@radix-ui/react-roving-focus": {
925
+
"version": "1.1.2",
926
+
"resolved": "https://registry.npmjs.org/@radix-ui/react-roving-focus/-/react-roving-focus-1.1.2.tgz",
927
+
"integrity": "sha512-zgMQWkNO169GtGqRvYrzb0Zf8NhMHS2DuEB/TiEmVnpr5OqPU3i8lfbxaAmC2J/KYuIQxyoQQ6DxepyXp61/xw==",
928
+
"dependencies": {
929
+
"@radix-ui/primitive": "1.1.1",
930
+
"@radix-ui/react-collection": "1.1.2",
931
+
"@radix-ui/react-compose-refs": "1.1.1",
932
+
"@radix-ui/react-context": "1.1.1",
933
+
"@radix-ui/react-direction": "1.1.0",
934
+
"@radix-ui/react-id": "1.1.0",
935
+
"@radix-ui/react-primitive": "2.0.2",
936
+
"@radix-ui/react-use-callback-ref": "1.1.0",
937
+
"@radix-ui/react-use-controllable-state": "1.1.0"
938
+
},
939
+
"peerDependencies": {
940
+
"@types/react": "*",
941
+
"@types/react-dom": "*",
942
+
"react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
943
+
"react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
944
+
},
945
+
"peerDependenciesMeta": {
946
+
"@types/react": {
947
+
"optional": true
948
+
},
949
+
"@types/react-dom": {
950
+
"optional": true
951
+
}
952
+
}
953
+
},
954
+
"node_modules/@radix-ui/react-roving-focus/node_modules/@radix-ui/primitive": {
955
+
"version": "1.1.1",
956
+
"resolved": "https://registry.npmjs.org/@radix-ui/primitive/-/primitive-1.1.1.tgz",
957
+
"integrity": "sha512-SJ31y+Q/zAyShtXJc8x83i9TYdbAfHZ++tUZnvjJJqFjzsdUnKsxPL6IEtBlxKkU7yzer//GQtZSV4GbldL3YA=="
958
+
},
959
+
"node_modules/@radix-ui/react-roving-focus/node_modules/@radix-ui/react-compose-refs": {
960
+
"version": "1.1.1",
961
+
"resolved": "https://registry.npmjs.org/@radix-ui/react-compose-refs/-/react-compose-refs-1.1.1.tgz",
962
+
"integrity": "sha512-Y9VzoRDSJtgFMUCoiZBDVo084VQ5hfpXxVE+NgkdNsjiDBByiImMZKKhxMwCbdHvhlENG6a833CbFkOQvTricw==",
963
+
"peerDependencies": {
964
+
"@types/react": "*",
965
+
"react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
966
+
},
967
+
"peerDependenciesMeta": {
968
+
"@types/react": {
969
+
"optional": true
970
+
}
971
+
}
972
+
},
973
+
"node_modules/@radix-ui/react-roving-focus/node_modules/@radix-ui/react-primitive": {
974
+
"version": "2.0.2",
975
+
"resolved": "https://registry.npmjs.org/@radix-ui/react-primitive/-/react-primitive-2.0.2.tgz",
976
+
"integrity": "sha512-Ec/0d38EIuvDF+GZjcMU/Ze6MxntVJYO/fRlCPhCaVUyPY9WTalHJw54tp9sXeJo3tlShWpy41vQRgLRGOuz+w==",
977
+
"dependencies": {
978
+
"@radix-ui/react-slot": "1.1.2"
979
+
},
980
+
"peerDependencies": {
981
+
"@types/react": "*",
982
+
"@types/react-dom": "*",
983
+
"react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
984
+
"react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
985
+
},
986
+
"peerDependenciesMeta": {
987
+
"@types/react": {
988
+
"optional": true
989
+
},
990
+
"@types/react-dom": {
991
+
"optional": true
992
+
}
993
+
}
994
+
},
830
995
"node_modules/@radix-ui/react-slot": {
831
996
"version": "1.1.2",
832
997
"resolved": "https://registry.npmjs.org/@radix-ui/react-slot/-/react-slot-1.1.2.tgz",
···
854
1019
},
855
1020
"peerDependenciesMeta": {
856
1021
"@types/react": {
1022
+
"optional": true
1023
+
}
1024
+
}
1025
+
},
1026
+
"node_modules/@radix-ui/react-toggle": {
1027
+
"version": "1.1.2",
1028
+
"resolved": "https://registry.npmjs.org/@radix-ui/react-toggle/-/react-toggle-1.1.2.tgz",
1029
+
"integrity": "sha512-lntKchNWx3aCHuWKiDY+8WudiegQvBpDRAYL8dKLRvKEH8VOpl0XX6SSU/bUBqIRJbcTy4+MW06Wv8vgp10rzQ==",
1030
+
"dependencies": {
1031
+
"@radix-ui/primitive": "1.1.1",
1032
+
"@radix-ui/react-primitive": "2.0.2",
1033
+
"@radix-ui/react-use-controllable-state": "1.1.0"
1034
+
},
1035
+
"peerDependencies": {
1036
+
"@types/react": "*",
1037
+
"@types/react-dom": "*",
1038
+
"react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
1039
+
"react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
1040
+
},
1041
+
"peerDependenciesMeta": {
1042
+
"@types/react": {
1043
+
"optional": true
1044
+
},
1045
+
"@types/react-dom": {
1046
+
"optional": true
1047
+
}
1048
+
}
1049
+
},
1050
+
"node_modules/@radix-ui/react-toggle-group": {
1051
+
"version": "1.1.2",
1052
+
"resolved": "https://registry.npmjs.org/@radix-ui/react-toggle-group/-/react-toggle-group-1.1.2.tgz",
1053
+
"integrity": "sha512-JBm6s6aVG/nwuY5eadhU2zDi/IwYS0sDM5ZWb4nymv/hn3hZdkw+gENn0LP4iY1yCd7+bgJaCwueMYJIU3vk4A==",
1054
+
"dependencies": {
1055
+
"@radix-ui/primitive": "1.1.1",
1056
+
"@radix-ui/react-context": "1.1.1",
1057
+
"@radix-ui/react-direction": "1.1.0",
1058
+
"@radix-ui/react-primitive": "2.0.2",
1059
+
"@radix-ui/react-roving-focus": "1.1.2",
1060
+
"@radix-ui/react-toggle": "1.1.2",
1061
+
"@radix-ui/react-use-controllable-state": "1.1.0"
1062
+
},
1063
+
"peerDependencies": {
1064
+
"@types/react": "*",
1065
+
"@types/react-dom": "*",
1066
+
"react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
1067
+
"react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
1068
+
},
1069
+
"peerDependenciesMeta": {
1070
+
"@types/react": {
1071
+
"optional": true
1072
+
},
1073
+
"@types/react-dom": {
1074
+
"optional": true
1075
+
}
1076
+
}
1077
+
},
1078
+
"node_modules/@radix-ui/react-toggle-group/node_modules/@radix-ui/primitive": {
1079
+
"version": "1.1.1",
1080
+
"resolved": "https://registry.npmjs.org/@radix-ui/primitive/-/primitive-1.1.1.tgz",
1081
+
"integrity": "sha512-SJ31y+Q/zAyShtXJc8x83i9TYdbAfHZ++tUZnvjJJqFjzsdUnKsxPL6IEtBlxKkU7yzer//GQtZSV4GbldL3YA=="
1082
+
},
1083
+
"node_modules/@radix-ui/react-toggle-group/node_modules/@radix-ui/react-primitive": {
1084
+
"version": "2.0.2",
1085
+
"resolved": "https://registry.npmjs.org/@radix-ui/react-primitive/-/react-primitive-2.0.2.tgz",
1086
+
"integrity": "sha512-Ec/0d38EIuvDF+GZjcMU/Ze6MxntVJYO/fRlCPhCaVUyPY9WTalHJw54tp9sXeJo3tlShWpy41vQRgLRGOuz+w==",
1087
+
"dependencies": {
1088
+
"@radix-ui/react-slot": "1.1.2"
1089
+
},
1090
+
"peerDependencies": {
1091
+
"@types/react": "*",
1092
+
"@types/react-dom": "*",
1093
+
"react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
1094
+
"react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
1095
+
},
1096
+
"peerDependenciesMeta": {
1097
+
"@types/react": {
1098
+
"optional": true
1099
+
},
1100
+
"@types/react-dom": {
1101
+
"optional": true
1102
+
}
1103
+
}
1104
+
},
1105
+
"node_modules/@radix-ui/react-toggle/node_modules/@radix-ui/primitive": {
1106
+
"version": "1.1.1",
1107
+
"resolved": "https://registry.npmjs.org/@radix-ui/primitive/-/primitive-1.1.1.tgz",
1108
+
"integrity": "sha512-SJ31y+Q/zAyShtXJc8x83i9TYdbAfHZ++tUZnvjJJqFjzsdUnKsxPL6IEtBlxKkU7yzer//GQtZSV4GbldL3YA=="
1109
+
},
1110
+
"node_modules/@radix-ui/react-toggle/node_modules/@radix-ui/react-primitive": {
1111
+
"version": "2.0.2",
1112
+
"resolved": "https://registry.npmjs.org/@radix-ui/react-primitive/-/react-primitive-2.0.2.tgz",
1113
+
"integrity": "sha512-Ec/0d38EIuvDF+GZjcMU/Ze6MxntVJYO/fRlCPhCaVUyPY9WTalHJw54tp9sXeJo3tlShWpy41vQRgLRGOuz+w==",
1114
+
"dependencies": {
1115
+
"@radix-ui/react-slot": "1.1.2"
1116
+
},
1117
+
"peerDependencies": {
1118
+
"@types/react": "*",
1119
+
"@types/react-dom": "*",
1120
+
"react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
1121
+
"react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
1122
+
},
1123
+
"peerDependenciesMeta": {
1124
+
"@types/react": {
1125
+
"optional": true
1126
+
},
1127
+
"@types/react-dom": {
857
1128
"optional": true
858
1129
}
859
1130
}
+2
mast-react-vite/package.json
+2
mast-react-vite/package.json
···
13
13
"@radix-ui/react-checkbox": "^1.1.2",
14
14
"@radix-ui/react-icons": "^1.3.0",
15
15
"@radix-ui/react-slot": "^1.1.2",
16
+
"@radix-ui/react-toggle": "^1.1.2",
17
+
"@radix-ui/react-toggle-group": "^1.1.2",
16
18
"@tanstack/react-table": "^8.20.5",
17
19
"@vlcn.io/react": "^3.1.0",
18
20
"@vlcn.io/rx-tbl": "^0.15.0",
-2
mast-react-vite/src/App.tsx
-2
mast-react-vite/src/App.tsx
···
137
137
]);
138
138
break;
139
139
}
140
-
console.log("Why won't you clear?!")
141
140
setNewText("");
142
141
setRowSelection({});
143
142
} catch (error) {
···
199
198
<section className="pt-8 container">
200
199
<Input type="text"
201
200
className="bg-background"
202
-
placeholder="..."
203
201
value={newText}
204
202
onKeyUp={parseTodos}
205
203
onActionChange={handleActionChange}
+65
-41
mast-react-vite/src/components/ui/input.tsx
+65
-41
mast-react-vite/src/components/ui/input.tsx
···
2
2
3
3
import { cn } from "@/lib/utils"
4
4
import { Button } from "@/components/ui/button"
5
+
import { ToggleGroup, ToggleGroupItem } from "@/components/ui/toggle-group"
6
+
import { Search, Plus, Pencil, Check } from "lucide-react"
5
7
6
8
// Add onActionChange to InputProps interface
7
9
export interface InputProps
···
13
15
const Input = React.forwardRef<HTMLInputElement, InputProps>(
14
16
({ className, type, onActionChange, onSubmit, value, ...props }, ref) => {
15
17
const [selectedIndex, setSelectedIndex] = React.useState(0)
18
+
const [selectedToggle, setSelectedToggle] = React.useState("add")
16
19
const options = ["add", "filter", "done", "delete"]
17
20
18
21
const handleWheel = (event: React.WheelEvent) => {
···
28
31
}
29
32
}
30
33
34
+
35
+
const handleToggleChange = (value: string) => {
36
+
if (value) {
37
+
setSelectedToggle(value)
38
+
onActionChange?.(value)
39
+
}
40
+
}
41
+
31
42
const handleSubmit = () => {
32
43
if (onSubmit && value) {
33
44
console.log("trigger button")
34
-
onSubmit(options[selectedIndex] + " " + value);
45
+
onSubmit(selectedToggle + " " + value);
35
46
}
36
47
}
37
48
38
49
return (
39
-
<div className="relative items-center" onWheel={handleWheel}>
40
-
<select
41
-
className={cn(
42
-
"absolute top-0 left-0 h-9 rounded-l-md border-r border-input bg-transparent px-2 text-sm cursor-default",
43
-
"shadow-sm transition-all duration-200 text-center appearance-none",
44
-
)}
45
-
value={options[selectedIndex]}
46
-
onChange={(e) => {
47
-
const newIndex = options.indexOf(e.target.value)
48
-
setSelectedIndex(newIndex)
49
-
onActionChange?.(e.target.value)
50
-
}}
51
-
>
52
-
<option value="" disabled selected>
53
-
Actions
54
-
</option>
55
-
{options.map((option) => (
56
-
<option key={option} value={option}>
57
-
{option}
58
-
</option>
59
-
))}
60
-
</select>
61
-
<input
62
-
type={type}
63
-
className={cn(
64
-
"flex-1 h-9 w-full rounded-md border border-input bg-background px-[90px] text-base shadow-sm transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
65
-
className
66
-
)}
67
-
ref={ref}
68
-
value={value}
69
-
{...props}
70
-
/>
71
-
<Button
72
-
type="button"
73
-
onClick={handleSubmit}
74
-
className="absolute right-1 top-1/2 -translate-y-1/2 h-7 z-10"
75
-
variant="secondary"
76
-
>
77
-
Submit
78
-
</Button>
50
+
<div className="flex flex-col group" onWheel={handleWheel}>
51
+
<div className="flex w-full">
52
+
<div className="relative w-auto">
53
+
<ToggleGroup type="single"
54
+
value={selectedToggle}
55
+
onValueChange={handleToggleChange}
56
+
defaultValue="add"
57
+
className={cn(
58
+
"h-11 border rounded-t-md border-b-0 bg-transparent text-sm cursor-default pt-1/2 pl-1 pr-1 pb-1/2",
59
+
"shadow-sm transition-colors duration-0 text-center appearance-none group-focus-within:border-ring",
60
+
"rounded-t-md rounded-b-none",
61
+
"focus:border-ring"
62
+
)}>
63
+
<ToggleGroupItem value="filter" aria-label="filter tasks">
64
+
<Search className="h-4 w-4 rounded-none" />
65
+
</ToggleGroupItem>
66
+
<ToggleGroupItem value="modify" aria-label="Modify selected task(s)">
67
+
<Pencil className="h-4 w-4" />
68
+
</ToggleGroupItem>
69
+
<ToggleGroupItem value="add" aria-label="Add a task">
70
+
<Plus className="h-4 w-4" />
71
+
</ToggleGroupItem>
72
+
<ToggleGroupItem value="done" aria-label="Toggle selected task(s) done">
73
+
<Check className="h-4 w-4" />
74
+
</ToggleGroupItem>
75
+
</ToggleGroup>
76
+
<div className="absolute bottom-0 left-0 right-0 h-[2px] border border-b-0 border-t-0 group-focus-within:border-ring bg-background z-20 translate-y-[1px]"></div>
77
+
</div>
78
+
<div className="flex-1"></div>
79
+
</div>
80
+
<div className="relative w-full">
81
+
<input
82
+
type={type}
83
+
placeholder={selectedToggle}
84
+
className={cn(
85
+
"flex-1 h-9 w-full border rounded-r-md rounded-tl-none rounded-bl-md bg-background px-3 pr-12 text-base",
86
+
"shadow-sm transition-colors placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1",
87
+
"disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
88
+
"group-focus-within:border-ring",
89
+
className
90
+
)}
91
+
ref={ref}
92
+
value={value}
93
+
{...props}
94
+
/>
95
+
<Button
96
+
type="button"
97
+
onClick={handleSubmit}
98
+
className="absolute right-1 bottom-1 h-7 z-10"
99
+
>
100
+
↑
101
+
</Button>
102
+
</div>
79
103
</div>
80
104
)
81
105
}