@koine/react 1.0.28 → 1.0.31
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/Forms/Toggle/Toggle-tailwind.d.ts +0 -0
- package/Forms/Toggle/Toggle-tailwind.js +99 -0
- package/Forms/Toggle/useToggle-tailwind.d.ts +0 -0
- package/Forms/Toggle/useToggle-tailwind.js +202 -0
- package/node/Forms/Toggle/Toggle-tailwind.js +99 -0
- package/node/Forms/Toggle/useToggle-tailwind.js +202 -0
- package/package.json +2 -2
|
File without changes
|
|
@@ -0,0 +1,99 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
// /**
|
|
3
|
+
// * @file
|
|
4
|
+
// *
|
|
5
|
+
// * About accessibility:
|
|
6
|
+
// * - minimum target size of 44px https://www.w3.org/TR/WCAG21/#target-size
|
|
7
|
+
// *
|
|
8
|
+
// * @see tests on tailwind playground:
|
|
9
|
+
// * - https://play.tailwindcss.com/RVldIcmZa5
|
|
10
|
+
// */
|
|
11
|
+
// import { type FormControlState } from "../FormControl";
|
|
12
|
+
// import { FormControlStatefulElement } from "../FormControlStatefulElement";
|
|
13
|
+
// export type ToggleProps = React.ComponentProps<"span">;
|
|
14
|
+
// export const Toggle = ({ className = "", ...props }: ToggleProps) => {
|
|
15
|
+
// return (
|
|
16
|
+
// <span
|
|
17
|
+
// className={`relative my-0 -mx-1 inline-flex h-8 w-8 items-center justify-center p-1 ${className}`}
|
|
18
|
+
// {...props}
|
|
19
|
+
// />
|
|
20
|
+
// );
|
|
21
|
+
// };
|
|
22
|
+
// export type ToggleLabelProps = React.ComponentProps<"span">;
|
|
23
|
+
// export const ToggleLabel = ({ className = "", ...props }: ToggleLabelProps) => {
|
|
24
|
+
// return (
|
|
25
|
+
// <span
|
|
26
|
+
// className={`text-grey-200 ml-3 select-none ${className}`}
|
|
27
|
+
// {...props}
|
|
28
|
+
// />
|
|
29
|
+
// );
|
|
30
|
+
// };
|
|
31
|
+
// export type ToggleLabelSubProps = React.ComponentProps<"small">;
|
|
32
|
+
// export const ToggleLabelSub = ({
|
|
33
|
+
// className = "",
|
|
34
|
+
// ...props
|
|
35
|
+
// }: ToggleLabelSubProps) => {
|
|
36
|
+
// return (
|
|
37
|
+
// <span
|
|
38
|
+
// className={`text-xs opacity-70 ${className}`}
|
|
39
|
+
// {...props}
|
|
40
|
+
// />
|
|
41
|
+
// );
|
|
42
|
+
// };
|
|
43
|
+
// export type ToggleIndicatorProps = FormControlState & {
|
|
44
|
+
// className?: string;
|
|
45
|
+
// };
|
|
46
|
+
// export const ToggleIndicator = ({
|
|
47
|
+
// className,
|
|
48
|
+
// ...props
|
|
49
|
+
// }: ToggleIndicatorProps) => {
|
|
50
|
+
// return (
|
|
51
|
+
// <FormControlStatefulElement
|
|
52
|
+
// as="span"
|
|
53
|
+
// className={`relative flex h-[24px] w-[24px] rounded-md border border-solid ${className}`}
|
|
54
|
+
// {...props}
|
|
55
|
+
// />
|
|
56
|
+
// );
|
|
57
|
+
// };
|
|
58
|
+
// export type ToggleIndicatorFgProps = React.ComponentProps<"svg">;
|
|
59
|
+
// export const ToggleIndicatorFg = ({
|
|
60
|
+
// className = "",
|
|
61
|
+
// ...props
|
|
62
|
+
// }: ToggleIndicatorFgProps) => {
|
|
63
|
+
// return (
|
|
64
|
+
// <svg
|
|
65
|
+
// className={`on-toggle-checked:scale-100 absolute left-0 h-full w-full scale-0 transition-transform ${className}`}
|
|
66
|
+
// {...props}
|
|
67
|
+
// />
|
|
68
|
+
// );
|
|
69
|
+
// };
|
|
70
|
+
// export type ToggleIndicatorSquaredProps = ToggleIndicatorProps;
|
|
71
|
+
// export const ToggleIndicatorSquared = (props: ToggleIndicatorSquaredProps) => {
|
|
72
|
+
// return (
|
|
73
|
+
// <ToggleIndicator {...props}>
|
|
74
|
+
// <ToggleIndicatorFg viewBox="0 0 24 24">
|
|
75
|
+
// <path d="M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z" />
|
|
76
|
+
// </ToggleIndicatorFg>
|
|
77
|
+
// </ToggleIndicator>
|
|
78
|
+
// );
|
|
79
|
+
// };
|
|
80
|
+
// export type ToggleIndicatorRoundedProps = ToggleIndicatorProps & {
|
|
81
|
+
// /** @default 6 */
|
|
82
|
+
// r?: number;
|
|
83
|
+
// };
|
|
84
|
+
// export const ToggleIndicatorRounded = ({
|
|
85
|
+
// r = 6,
|
|
86
|
+
// ...props
|
|
87
|
+
// }: ToggleIndicatorRoundedProps) => {
|
|
88
|
+
// return (
|
|
89
|
+
// <ToggleIndicator {...props}>
|
|
90
|
+
// <ToggleIndicatorFg viewBox="0 0 24 24">
|
|
91
|
+
// <circle
|
|
92
|
+
// r={r}
|
|
93
|
+
// cx="12"
|
|
94
|
+
// cy="12"
|
|
95
|
+
// />
|
|
96
|
+
// </ToggleIndicatorFg>
|
|
97
|
+
// </ToggleIndicator>
|
|
98
|
+
// );
|
|
99
|
+
// };
|
|
File without changes
|
|
@@ -0,0 +1,202 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
// import React, { useCallback, useId, useMemo } from "react";
|
|
3
|
+
// import type { Option } from "@koine/react";
|
|
4
|
+
// import type { FormControlElementProps } from "../FormControl";
|
|
5
|
+
// export type UseToggleProps = FormControlElementProps<React.FC> & {
|
|
6
|
+
// // defaultChecked?: boolean;
|
|
7
|
+
// value?: boolean;
|
|
8
|
+
// valueTrue?: string;
|
|
9
|
+
// valueFalse?: string;
|
|
10
|
+
// options?: Option[];
|
|
11
|
+
// };
|
|
12
|
+
// /**
|
|
13
|
+
// * This hook is meant to power Checkboxes, Switches and checkbox-like Radios
|
|
14
|
+
// * components, it works in fact in two modes:
|
|
15
|
+
// *
|
|
16
|
+
// * 1: behaviour as standard checkbox
|
|
17
|
+
// * yup validation would simply look like:
|
|
18
|
+
// *
|
|
19
|
+
// * ```ts
|
|
20
|
+
// * privacy: boolean().required(),
|
|
21
|
+
// * ```
|
|
22
|
+
// *
|
|
23
|
+
// * 1b: to make the checkbox required (either with `true` or `false`):
|
|
24
|
+
// * ```
|
|
25
|
+
// * privacy: boolean().oneOf([true]).required()
|
|
26
|
+
// * ```
|
|
27
|
+
// *
|
|
28
|
+
// * 2: beahviour as two radio for checkbox with custom true/false values as
|
|
29
|
+
// * strings yup validation would look like:
|
|
30
|
+
// *
|
|
31
|
+
// * ```ts
|
|
32
|
+
// * newsletter: string().oneOf(["yes", "no"]).required(),
|
|
33
|
+
// * // add `.nullable()` if you do not provide a string `defaultValue`
|
|
34
|
+
// *
|
|
35
|
+
// * // to do not make it required and avoid triggering an error when the input is
|
|
36
|
+
// * // untouched you need to set the default value of the input in the form
|
|
37
|
+
// * // initialization's `defaultValues` as such:
|
|
38
|
+
// *
|
|
39
|
+
// * useForm({ defaultValues: { newsletter: "no" }})
|
|
40
|
+
// * ```
|
|
41
|
+
// *
|
|
42
|
+
// * To enable this mode either pass the props `valueTrue` and `valueFalse` or
|
|
43
|
+
// * an array of options with the shape of `Option`
|
|
44
|
+
// */
|
|
45
|
+
// export function useToggle(
|
|
46
|
+
// props: UseToggleProps,
|
|
47
|
+
// ref: React.ForwardedRef<HTMLInputElement>
|
|
48
|
+
// ) {
|
|
49
|
+
// const {
|
|
50
|
+
// actions,
|
|
51
|
+
// form: { watch, register },
|
|
52
|
+
// name,
|
|
53
|
+
// state,
|
|
54
|
+
// strings: { label },
|
|
55
|
+
// options,
|
|
56
|
+
// value: propValue,
|
|
57
|
+
// ...restProps
|
|
58
|
+
// } = props;
|
|
59
|
+
// let {
|
|
60
|
+
// valueTrue,
|
|
61
|
+
// valueFalse,
|
|
62
|
+
// // defaultChecked,
|
|
63
|
+
// // defaultValue,
|
|
64
|
+
// // eslint-disable-next-line prefer-const
|
|
65
|
+
// // ...remainingInputProps
|
|
66
|
+
// } = restProps;
|
|
67
|
+
// // use options data convention to pass on the true/false values
|
|
68
|
+
// if (options) {
|
|
69
|
+
// valueTrue = options
|
|
70
|
+
// .filter((opt) => opt.value === "true")[0]
|
|
71
|
+
// .label.toString();
|
|
72
|
+
// valueFalse = options
|
|
73
|
+
// .filter((opt) => opt.value === "false")[0]
|
|
74
|
+
// .label.toString();
|
|
75
|
+
// }
|
|
76
|
+
// const id = useId();
|
|
77
|
+
// const idTrue = `${id}-true`;
|
|
78
|
+
// const idFalse = `${id}-false`;
|
|
79
|
+
// const isRadio = !!(valueTrue && valueFalse);
|
|
80
|
+
// // // manage default values for both toggle modes
|
|
81
|
+
// // defaultChecked = isUndefined(defaultChecked) ? false : defaultChecked;
|
|
82
|
+
// // // TODO: maybe throw an error if the defaultValue that arrives here is not
|
|
83
|
+
// // // a valid value
|
|
84
|
+
// // defaultValue =
|
|
85
|
+
// // defaultValue === valueTrue || defaultValue === valueFalse
|
|
86
|
+
// // ? defaultValue
|
|
87
|
+
// // : valueFalse;
|
|
88
|
+
// // get the value either from the uncontrolled watched input or from the given
|
|
89
|
+
// // prop to control the component
|
|
90
|
+
// let value = watch(name);
|
|
91
|
+
// if (propValue) {
|
|
92
|
+
// value = propValue;
|
|
93
|
+
// }
|
|
94
|
+
// /**
|
|
95
|
+
// * Accessibility.
|
|
96
|
+
// *
|
|
97
|
+
// * Fake the spacebar keyboard behaviour on the radio mode of the checkbox.
|
|
98
|
+
// * Without this *only* the arrow keys would change the checkbox state
|
|
99
|
+
// */
|
|
100
|
+
// const handleKeyDown: React.KeyboardEventHandler<HTMLInputElement> =
|
|
101
|
+
// useCallback(
|
|
102
|
+
// (event) => {
|
|
103
|
+
// if (event.key === " ") {
|
|
104
|
+
// event.preventDefault();
|
|
105
|
+
// event.stopPropagation();
|
|
106
|
+
// const firstInput = event.target as HTMLInputElement;
|
|
107
|
+
// const next = firstInput.nextElementSibling as HTMLInputElement;
|
|
108
|
+
// const prev = firstInput.previousElementSibling as HTMLInputElement;
|
|
109
|
+
// const secondInput = next?.tagName === "INPUT" ? next : prev;
|
|
110
|
+
// let target = firstInput;
|
|
111
|
+
// if (firstInput.checked) {
|
|
112
|
+
// target = secondInput;
|
|
113
|
+
// } else {
|
|
114
|
+
// if (!secondInput.checked) {
|
|
115
|
+
// target =
|
|
116
|
+
// firstInput.value === valueTrue ? firstInput : secondInput;
|
|
117
|
+
// }
|
|
118
|
+
// }
|
|
119
|
+
// if (target) target.click();
|
|
120
|
+
// }
|
|
121
|
+
// },
|
|
122
|
+
// [valueTrue]
|
|
123
|
+
// );
|
|
124
|
+
// // collect all the return values that are dependent on the current value
|
|
125
|
+
// // of the input
|
|
126
|
+
// const valueDependentProps = useMemo(
|
|
127
|
+
// () => ({
|
|
128
|
+
// rootProps: {
|
|
129
|
+
// htmlFor: isRadio
|
|
130
|
+
// ? !value || value === valueFalse
|
|
131
|
+
// ? idTrue
|
|
132
|
+
// : idFalse
|
|
133
|
+
// : id,
|
|
134
|
+
// },
|
|
135
|
+
// label: label ? label : value,
|
|
136
|
+
// value,
|
|
137
|
+
// }),
|
|
138
|
+
// [value, valueFalse, isRadio, id, idTrue, idFalse, label]
|
|
139
|
+
// );
|
|
140
|
+
// const Inputs = useMemo(
|
|
141
|
+
// () =>
|
|
142
|
+
// isRadio ? (
|
|
143
|
+
// <>
|
|
144
|
+
// <input
|
|
145
|
+
// className="peer sr-only"
|
|
146
|
+
// id={idFalse}
|
|
147
|
+
// {...register(name, {
|
|
148
|
+
// onBlur: () => actions.setFocused(false),
|
|
149
|
+
// })}
|
|
150
|
+
// onFocus={() => actions.setFocused(true)}
|
|
151
|
+
// // {...remainingInputProps}
|
|
152
|
+
// onKeyDown={handleKeyDown}
|
|
153
|
+
// type="radio"
|
|
154
|
+
// value={valueFalse}
|
|
155
|
+
// // defaultChecked={defaultValue === valueFalse}
|
|
156
|
+
// />
|
|
157
|
+
// <input
|
|
158
|
+
// className="peer sr-only"
|
|
159
|
+
// id={idTrue}
|
|
160
|
+
// {...register(name, {
|
|
161
|
+
// onBlur: () => actions.setFocused(false),
|
|
162
|
+
// })}
|
|
163
|
+
// onFocus={() => actions.setFocused(true)}
|
|
164
|
+
// // {...remainingInputProps}
|
|
165
|
+
// onKeyDown={handleKeyDown}
|
|
166
|
+
// type="radio"
|
|
167
|
+
// value={valueTrue}
|
|
168
|
+
// // defaultChecked={defaultValue === valueTrue}
|
|
169
|
+
// />
|
|
170
|
+
// </>
|
|
171
|
+
// ) : (
|
|
172
|
+
// <input
|
|
173
|
+
// className="peer sr-only"
|
|
174
|
+
// id={id}
|
|
175
|
+
// type="checkbox"
|
|
176
|
+
// {...register(name, { onBlur: () => actions.setFocused(false) })}
|
|
177
|
+
// onFocus={() => actions.setFocused(true)}
|
|
178
|
+
// // {...remainingInputProps}
|
|
179
|
+
// // defaultChecked={defaultChecked}
|
|
180
|
+
// />
|
|
181
|
+
// ),
|
|
182
|
+
// [
|
|
183
|
+
// name,
|
|
184
|
+
// actions,
|
|
185
|
+
// // remainingInputProps,
|
|
186
|
+
// handleKeyDown,
|
|
187
|
+
// isRadio,
|
|
188
|
+
// idFalse,
|
|
189
|
+
// idTrue,
|
|
190
|
+
// valueFalse,
|
|
191
|
+
// valueTrue,
|
|
192
|
+
// id,
|
|
193
|
+
// // defaultChecked,
|
|
194
|
+
// // defaultValue,
|
|
195
|
+
// ]
|
|
196
|
+
// );
|
|
197
|
+
// // console.log("useToggle: render", value);
|
|
198
|
+
// return {
|
|
199
|
+
// ...valueDependentProps,
|
|
200
|
+
// Inputs,
|
|
201
|
+
// };
|
|
202
|
+
// }
|
|
@@ -0,0 +1,99 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
// /**
|
|
3
|
+
// * @file
|
|
4
|
+
// *
|
|
5
|
+
// * About accessibility:
|
|
6
|
+
// * - minimum target size of 44px https://www.w3.org/TR/WCAG21/#target-size
|
|
7
|
+
// *
|
|
8
|
+
// * @see tests on tailwind playground:
|
|
9
|
+
// * - https://play.tailwindcss.com/RVldIcmZa5
|
|
10
|
+
// */
|
|
11
|
+
// import { type FormControlState } from "../FormControl";
|
|
12
|
+
// import { FormControlStatefulElement } from "../FormControlStatefulElement";
|
|
13
|
+
// export type ToggleProps = React.ComponentProps<"span">;
|
|
14
|
+
// export const Toggle = ({ className = "", ...props }: ToggleProps) => {
|
|
15
|
+
// return (
|
|
16
|
+
// <span
|
|
17
|
+
// className={`relative my-0 -mx-1 inline-flex h-8 w-8 items-center justify-center p-1 ${className}`}
|
|
18
|
+
// {...props}
|
|
19
|
+
// />
|
|
20
|
+
// );
|
|
21
|
+
// };
|
|
22
|
+
// export type ToggleLabelProps = React.ComponentProps<"span">;
|
|
23
|
+
// export const ToggleLabel = ({ className = "", ...props }: ToggleLabelProps) => {
|
|
24
|
+
// return (
|
|
25
|
+
// <span
|
|
26
|
+
// className={`text-grey-200 ml-3 select-none ${className}`}
|
|
27
|
+
// {...props}
|
|
28
|
+
// />
|
|
29
|
+
// );
|
|
30
|
+
// };
|
|
31
|
+
// export type ToggleLabelSubProps = React.ComponentProps<"small">;
|
|
32
|
+
// export const ToggleLabelSub = ({
|
|
33
|
+
// className = "",
|
|
34
|
+
// ...props
|
|
35
|
+
// }: ToggleLabelSubProps) => {
|
|
36
|
+
// return (
|
|
37
|
+
// <span
|
|
38
|
+
// className={`text-xs opacity-70 ${className}`}
|
|
39
|
+
// {...props}
|
|
40
|
+
// />
|
|
41
|
+
// );
|
|
42
|
+
// };
|
|
43
|
+
// export type ToggleIndicatorProps = FormControlState & {
|
|
44
|
+
// className?: string;
|
|
45
|
+
// };
|
|
46
|
+
// export const ToggleIndicator = ({
|
|
47
|
+
// className,
|
|
48
|
+
// ...props
|
|
49
|
+
// }: ToggleIndicatorProps) => {
|
|
50
|
+
// return (
|
|
51
|
+
// <FormControlStatefulElement
|
|
52
|
+
// as="span"
|
|
53
|
+
// className={`relative flex h-[24px] w-[24px] rounded-md border border-solid ${className}`}
|
|
54
|
+
// {...props}
|
|
55
|
+
// />
|
|
56
|
+
// );
|
|
57
|
+
// };
|
|
58
|
+
// export type ToggleIndicatorFgProps = React.ComponentProps<"svg">;
|
|
59
|
+
// export const ToggleIndicatorFg = ({
|
|
60
|
+
// className = "",
|
|
61
|
+
// ...props
|
|
62
|
+
// }: ToggleIndicatorFgProps) => {
|
|
63
|
+
// return (
|
|
64
|
+
// <svg
|
|
65
|
+
// className={`on-toggle-checked:scale-100 absolute left-0 h-full w-full scale-0 transition-transform ${className}`}
|
|
66
|
+
// {...props}
|
|
67
|
+
// />
|
|
68
|
+
// );
|
|
69
|
+
// };
|
|
70
|
+
// export type ToggleIndicatorSquaredProps = ToggleIndicatorProps;
|
|
71
|
+
// export const ToggleIndicatorSquared = (props: ToggleIndicatorSquaredProps) => {
|
|
72
|
+
// return (
|
|
73
|
+
// <ToggleIndicator {...props}>
|
|
74
|
+
// <ToggleIndicatorFg viewBox="0 0 24 24">
|
|
75
|
+
// <path d="M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z" />
|
|
76
|
+
// </ToggleIndicatorFg>
|
|
77
|
+
// </ToggleIndicator>
|
|
78
|
+
// );
|
|
79
|
+
// };
|
|
80
|
+
// export type ToggleIndicatorRoundedProps = ToggleIndicatorProps & {
|
|
81
|
+
// /** @default 6 */
|
|
82
|
+
// r?: number;
|
|
83
|
+
// };
|
|
84
|
+
// export const ToggleIndicatorRounded = ({
|
|
85
|
+
// r = 6,
|
|
86
|
+
// ...props
|
|
87
|
+
// }: ToggleIndicatorRoundedProps) => {
|
|
88
|
+
// return (
|
|
89
|
+
// <ToggleIndicator {...props}>
|
|
90
|
+
// <ToggleIndicatorFg viewBox="0 0 24 24">
|
|
91
|
+
// <circle
|
|
92
|
+
// r={r}
|
|
93
|
+
// cx="12"
|
|
94
|
+
// cy="12"
|
|
95
|
+
// />
|
|
96
|
+
// </ToggleIndicatorFg>
|
|
97
|
+
// </ToggleIndicator>
|
|
98
|
+
// );
|
|
99
|
+
// };
|
|
@@ -0,0 +1,202 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
// import React, { useCallback, useId, useMemo } from "react";
|
|
3
|
+
// import type { Option } from "@koine/react";
|
|
4
|
+
// import type { FormControlElementProps } from "../FormControl";
|
|
5
|
+
// export type UseToggleProps = FormControlElementProps<React.FC> & {
|
|
6
|
+
// // defaultChecked?: boolean;
|
|
7
|
+
// value?: boolean;
|
|
8
|
+
// valueTrue?: string;
|
|
9
|
+
// valueFalse?: string;
|
|
10
|
+
// options?: Option[];
|
|
11
|
+
// };
|
|
12
|
+
// /**
|
|
13
|
+
// * This hook is meant to power Checkboxes, Switches and checkbox-like Radios
|
|
14
|
+
// * components, it works in fact in two modes:
|
|
15
|
+
// *
|
|
16
|
+
// * 1: behaviour as standard checkbox
|
|
17
|
+
// * yup validation would simply look like:
|
|
18
|
+
// *
|
|
19
|
+
// * ```ts
|
|
20
|
+
// * privacy: boolean().required(),
|
|
21
|
+
// * ```
|
|
22
|
+
// *
|
|
23
|
+
// * 1b: to make the checkbox required (either with `true` or `false`):
|
|
24
|
+
// * ```
|
|
25
|
+
// * privacy: boolean().oneOf([true]).required()
|
|
26
|
+
// * ```
|
|
27
|
+
// *
|
|
28
|
+
// * 2: beahviour as two radio for checkbox with custom true/false values as
|
|
29
|
+
// * strings yup validation would look like:
|
|
30
|
+
// *
|
|
31
|
+
// * ```ts
|
|
32
|
+
// * newsletter: string().oneOf(["yes", "no"]).required(),
|
|
33
|
+
// * // add `.nullable()` if you do not provide a string `defaultValue`
|
|
34
|
+
// *
|
|
35
|
+
// * // to do not make it required and avoid triggering an error when the input is
|
|
36
|
+
// * // untouched you need to set the default value of the input in the form
|
|
37
|
+
// * // initialization's `defaultValues` as such:
|
|
38
|
+
// *
|
|
39
|
+
// * useForm({ defaultValues: { newsletter: "no" }})
|
|
40
|
+
// * ```
|
|
41
|
+
// *
|
|
42
|
+
// * To enable this mode either pass the props `valueTrue` and `valueFalse` or
|
|
43
|
+
// * an array of options with the shape of `Option`
|
|
44
|
+
// */
|
|
45
|
+
// export function useToggle(
|
|
46
|
+
// props: UseToggleProps,
|
|
47
|
+
// ref: React.ForwardedRef<HTMLInputElement>
|
|
48
|
+
// ) {
|
|
49
|
+
// const {
|
|
50
|
+
// actions,
|
|
51
|
+
// form: { watch, register },
|
|
52
|
+
// name,
|
|
53
|
+
// state,
|
|
54
|
+
// strings: { label },
|
|
55
|
+
// options,
|
|
56
|
+
// value: propValue,
|
|
57
|
+
// ...restProps
|
|
58
|
+
// } = props;
|
|
59
|
+
// let {
|
|
60
|
+
// valueTrue,
|
|
61
|
+
// valueFalse,
|
|
62
|
+
// // defaultChecked,
|
|
63
|
+
// // defaultValue,
|
|
64
|
+
// // eslint-disable-next-line prefer-const
|
|
65
|
+
// // ...remainingInputProps
|
|
66
|
+
// } = restProps;
|
|
67
|
+
// // use options data convention to pass on the true/false values
|
|
68
|
+
// if (options) {
|
|
69
|
+
// valueTrue = options
|
|
70
|
+
// .filter((opt) => opt.value === "true")[0]
|
|
71
|
+
// .label.toString();
|
|
72
|
+
// valueFalse = options
|
|
73
|
+
// .filter((opt) => opt.value === "false")[0]
|
|
74
|
+
// .label.toString();
|
|
75
|
+
// }
|
|
76
|
+
// const id = useId();
|
|
77
|
+
// const idTrue = `${id}-true`;
|
|
78
|
+
// const idFalse = `${id}-false`;
|
|
79
|
+
// const isRadio = !!(valueTrue && valueFalse);
|
|
80
|
+
// // // manage default values for both toggle modes
|
|
81
|
+
// // defaultChecked = isUndefined(defaultChecked) ? false : defaultChecked;
|
|
82
|
+
// // // TODO: maybe throw an error if the defaultValue that arrives here is not
|
|
83
|
+
// // // a valid value
|
|
84
|
+
// // defaultValue =
|
|
85
|
+
// // defaultValue === valueTrue || defaultValue === valueFalse
|
|
86
|
+
// // ? defaultValue
|
|
87
|
+
// // : valueFalse;
|
|
88
|
+
// // get the value either from the uncontrolled watched input or from the given
|
|
89
|
+
// // prop to control the component
|
|
90
|
+
// let value = watch(name);
|
|
91
|
+
// if (propValue) {
|
|
92
|
+
// value = propValue;
|
|
93
|
+
// }
|
|
94
|
+
// /**
|
|
95
|
+
// * Accessibility.
|
|
96
|
+
// *
|
|
97
|
+
// * Fake the spacebar keyboard behaviour on the radio mode of the checkbox.
|
|
98
|
+
// * Without this *only* the arrow keys would change the checkbox state
|
|
99
|
+
// */
|
|
100
|
+
// const handleKeyDown: React.KeyboardEventHandler<HTMLInputElement> =
|
|
101
|
+
// useCallback(
|
|
102
|
+
// (event) => {
|
|
103
|
+
// if (event.key === " ") {
|
|
104
|
+
// event.preventDefault();
|
|
105
|
+
// event.stopPropagation();
|
|
106
|
+
// const firstInput = event.target as HTMLInputElement;
|
|
107
|
+
// const next = firstInput.nextElementSibling as HTMLInputElement;
|
|
108
|
+
// const prev = firstInput.previousElementSibling as HTMLInputElement;
|
|
109
|
+
// const secondInput = next?.tagName === "INPUT" ? next : prev;
|
|
110
|
+
// let target = firstInput;
|
|
111
|
+
// if (firstInput.checked) {
|
|
112
|
+
// target = secondInput;
|
|
113
|
+
// } else {
|
|
114
|
+
// if (!secondInput.checked) {
|
|
115
|
+
// target =
|
|
116
|
+
// firstInput.value === valueTrue ? firstInput : secondInput;
|
|
117
|
+
// }
|
|
118
|
+
// }
|
|
119
|
+
// if (target) target.click();
|
|
120
|
+
// }
|
|
121
|
+
// },
|
|
122
|
+
// [valueTrue]
|
|
123
|
+
// );
|
|
124
|
+
// // collect all the return values that are dependent on the current value
|
|
125
|
+
// // of the input
|
|
126
|
+
// const valueDependentProps = useMemo(
|
|
127
|
+
// () => ({
|
|
128
|
+
// rootProps: {
|
|
129
|
+
// htmlFor: isRadio
|
|
130
|
+
// ? !value || value === valueFalse
|
|
131
|
+
// ? idTrue
|
|
132
|
+
// : idFalse
|
|
133
|
+
// : id,
|
|
134
|
+
// },
|
|
135
|
+
// label: label ? label : value,
|
|
136
|
+
// value,
|
|
137
|
+
// }),
|
|
138
|
+
// [value, valueFalse, isRadio, id, idTrue, idFalse, label]
|
|
139
|
+
// );
|
|
140
|
+
// const Inputs = useMemo(
|
|
141
|
+
// () =>
|
|
142
|
+
// isRadio ? (
|
|
143
|
+
// <>
|
|
144
|
+
// <input
|
|
145
|
+
// className="peer sr-only"
|
|
146
|
+
// id={idFalse}
|
|
147
|
+
// {...register(name, {
|
|
148
|
+
// onBlur: () => actions.setFocused(false),
|
|
149
|
+
// })}
|
|
150
|
+
// onFocus={() => actions.setFocused(true)}
|
|
151
|
+
// // {...remainingInputProps}
|
|
152
|
+
// onKeyDown={handleKeyDown}
|
|
153
|
+
// type="radio"
|
|
154
|
+
// value={valueFalse}
|
|
155
|
+
// // defaultChecked={defaultValue === valueFalse}
|
|
156
|
+
// />
|
|
157
|
+
// <input
|
|
158
|
+
// className="peer sr-only"
|
|
159
|
+
// id={idTrue}
|
|
160
|
+
// {...register(name, {
|
|
161
|
+
// onBlur: () => actions.setFocused(false),
|
|
162
|
+
// })}
|
|
163
|
+
// onFocus={() => actions.setFocused(true)}
|
|
164
|
+
// // {...remainingInputProps}
|
|
165
|
+
// onKeyDown={handleKeyDown}
|
|
166
|
+
// type="radio"
|
|
167
|
+
// value={valueTrue}
|
|
168
|
+
// // defaultChecked={defaultValue === valueTrue}
|
|
169
|
+
// />
|
|
170
|
+
// </>
|
|
171
|
+
// ) : (
|
|
172
|
+
// <input
|
|
173
|
+
// className="peer sr-only"
|
|
174
|
+
// id={id}
|
|
175
|
+
// type="checkbox"
|
|
176
|
+
// {...register(name, { onBlur: () => actions.setFocused(false) })}
|
|
177
|
+
// onFocus={() => actions.setFocused(true)}
|
|
178
|
+
// // {...remainingInputProps}
|
|
179
|
+
// // defaultChecked={defaultChecked}
|
|
180
|
+
// />
|
|
181
|
+
// ),
|
|
182
|
+
// [
|
|
183
|
+
// name,
|
|
184
|
+
// actions,
|
|
185
|
+
// // remainingInputProps,
|
|
186
|
+
// handleKeyDown,
|
|
187
|
+
// isRadio,
|
|
188
|
+
// idFalse,
|
|
189
|
+
// idTrue,
|
|
190
|
+
// valueFalse,
|
|
191
|
+
// valueTrue,
|
|
192
|
+
// id,
|
|
193
|
+
// // defaultChecked,
|
|
194
|
+
// // defaultValue,
|
|
195
|
+
// ]
|
|
196
|
+
// );
|
|
197
|
+
// // console.log("useToggle: render", value);
|
|
198
|
+
// return {
|
|
199
|
+
// ...valueDependentProps,
|
|
200
|
+
// Inputs,
|
|
201
|
+
// };
|
|
202
|
+
// }
|
package/package.json
CHANGED
|
@@ -9,7 +9,7 @@
|
|
|
9
9
|
"framer-motion": "^6.3.10",
|
|
10
10
|
"react": "^16.8 || ^17 || ^18",
|
|
11
11
|
"@mui/base": "^5.0.0-alpha.83",
|
|
12
|
-
"@koine/utils": "1.0.
|
|
12
|
+
"@koine/utils": "1.0.31",
|
|
13
13
|
"react-icons": "^4.4.0",
|
|
14
14
|
"date-fns": "^2.28.0",
|
|
15
15
|
"react-swipeable": "^7.0.0",
|
|
@@ -21,7 +21,7 @@
|
|
|
21
21
|
"react-popper": "^2.3.0",
|
|
22
22
|
"tslib": "^2.4.0"
|
|
23
23
|
},
|
|
24
|
-
"version": "1.0.
|
|
24
|
+
"version": "1.0.31",
|
|
25
25
|
"module": "./index.js",
|
|
26
26
|
"types": "./index.d.ts"
|
|
27
27
|
}
|