@yourdash/uikit 1.0.1 → 1.0.3
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/components/box/box.module.scss +1 -1
- package/components/box/box.tsx +3 -3
- package/components/button/button.module.scss +3 -3
- package/components/button/button.tsx +2 -1
- package/components/buttonLink/buttonLink.module.scss +5 -1
- package/components/buttonLink/buttonLink.tsx +13 -12
- package/components/buttonWithIcon/buttonWithIcon.module.scss +56 -0
- package/components/buttonWithIcon/buttonWithIcon.tsx +36 -0
- package/components/card/card.module.scss +6 -6
- package/components/card/card.tsx +23 -20
- package/components/container/container.module.scss +20 -0
- package/components/container/container.tsx +22 -0
- package/components/contextMenu/contextMenu.tsx +1 -1
- package/components/contextMenu/contextMenuRoot.module.scss +1 -1
- package/components/contextMenu/contextMenuRoot.tsx +83 -83
- package/components/flex/flex.module.scss +31 -19
- package/components/flex/flex.tsx +23 -2
- package/components/heading/heading.module.scss +1 -1
- package/components/heading/heading.tsx +1 -1
- package/components/icon/icon.tsx +1 -1
- package/components/iconButton/iconButton.module.scss +1 -1
- package/components/iconButton/iconButton.tsx +3 -3
- package/components/image/image.module.scss +72 -1
- package/components/image/image.tsx +65 -10
- package/components/link/link.module.scss +1 -1
- package/components/link/link.tsx +1 -1
- package/components/progressBar/progressBar.module.scss +25 -0
- package/components/progressBar/progressBar.tsx +21 -0
- package/components/redirect/redirect.tsx +1 -1
- package/components/separator/separator.module.scss +9 -4
- package/components/separator/separator.tsx +3 -3
- package/components/spinner/spinner.module.scss +1 -6
- package/components/spinner/spinner.tsx +1 -1
- package/components/subtext/subtext.module.scss +1 -1
- package/components/subtext/subtext.tsx +1 -1
- package/components/tag/tag.module.scss +13 -0
- package/components/tag/tag.tsx +21 -0
- package/components/text/text.module.scss +1 -1
- package/components/text/text.tsx +1 -1
- package/components/textButton/textButton.module.scss +1 -1
- package/components/textButton/textButton.tsx +1 -1
- package/components/textInput/textInput.module.scss +1 -1
- package/components/textInput/textInput.tsx +40 -10
- package/components/toast/toast.module.scss +71 -31
- package/components/toast/toast.ts +12 -0
- package/components/toast/toastAction.ts +12 -0
- package/components/toast/toastContext.ts +5 -3
- package/components/toast/toasts.tsx +99 -0
- package/core/decrementLevel.tsx +13 -13
- package/core/incrementLevel.tsx +1 -1
- package/core/level.tsx +1 -1
- package/core/remToPx.ts +8 -0
- package/core/root.tsx +26 -32
- package/core/toast.ts +18 -17
- package/imports.d.ts +81 -0
- package/package.json +9 -40
- package/theme/defaultTheme.module.scss +16 -4
- package/theme/themeValues.scss +8 -5
- package/tsconfig.json +19 -9
- package/utilityComponent/hasBeenShown/hasBeenShown.tsx +47 -0
- package/utilityComponent/onInView/onInView.tsx +83 -0
- package/views/carousel/carousel.module.scss +77 -0
- package/views/carousel/carousel.tsx +138 -0
- package/views/header/header.module.scss +16 -0
- package/views/header/header.tsx +28 -0
- package/views/infiniteScroll/infiniteScroll.module.scss +26 -0
- package/views/infiniteScroll/infiniteScroll.tsx +90 -0
- package/views/navBar/components/navImage/navImage.module.scss +7 -0
- package/views/navBar/components/navImage/navImage.tsx +15 -0
- package/views/navBar/components/navTitle/navTitle.tsx +13 -0
- package/views/navBar/navBar.module.scss +22 -0
- package/views/navBar/navBar.tsx +37 -0
- package/views/onBoarding/onBoarding.module.scss +84 -0
- package/views/onBoarding/onBoarding.tsx +138 -0
- package/views/panAndZoom/panAndZoom.tsx +121 -114
- package/views/sidebar/Sidebar.module.scss +49 -0
- package/views/sidebar/Sidebar.tsx +30 -0
- package/views/sidebar/SidebarContainer.module.scss +22 -0
- package/views/sidebar/SidebarContainer.tsx +38 -0
- package/views/sidebar/SidebarContext.tsx +15 -0
- package/views/sidebar/SidebarToggleButton.tsx +25 -0
- package/components/toast/toast.tsx +0 -65
package/components/icon/icon.tsx
CHANGED
@@ -3,9 +3,9 @@
|
|
3
3
|
* YourDash is licensed under the MIT License. (https://ewsgit.mit-license.org)
|
4
4
|
*/
|
5
5
|
|
6
|
-
import clippy from "@yourdash/shared/web/helpers/clippy.
|
7
|
-
import Icon from "../icon/icon.
|
8
|
-
import { UKIcon } from "../icon/iconDictionary.
|
6
|
+
import clippy from "@yourdash/shared/web/helpers/clippy.ts";
|
7
|
+
import Icon from "../icon/icon.tsx";
|
8
|
+
import { UKIcon } from "../icon/iconDictionary.ts";
|
9
9
|
import styles from "./iconButton.module.scss";
|
10
10
|
import { FC } from "react";
|
11
11
|
|
@@ -3,8 +3,79 @@
|
|
3
3
|
* YourDash is licensed under the MIT License. (https://ewsgit.mit-license.org)
|
4
4
|
*/
|
5
5
|
|
6
|
-
@
|
6
|
+
@use "@yourdash/uikit/theme/themeValues" as *;
|
7
|
+
|
8
|
+
.componentContainer {
|
9
|
+
position: relative;
|
10
|
+
}
|
7
11
|
|
8
12
|
.component {
|
9
13
|
border-radius: var(#{$theme}#{$radius});
|
14
|
+
opacity: 0;
|
15
|
+
max-width: 100%;
|
16
|
+
max-height: 100%;
|
17
|
+
min-width: 2rem;
|
18
|
+
min-height: 2rem;
|
19
|
+
-webkit-user-select: none;
|
20
|
+
-moz-user-select: none;
|
21
|
+
-ms-user-select: none;
|
22
|
+
user-select: none;
|
23
|
+
pointer-events: none;
|
24
|
+
|
25
|
+
&.noRounding {
|
26
|
+
border-radius: 0;
|
27
|
+
}
|
28
|
+
}
|
29
|
+
|
30
|
+
.loaded {
|
31
|
+
transition: opacity 750ms linear;
|
32
|
+
opacity: 1;
|
33
|
+
}
|
34
|
+
|
35
|
+
.loading {
|
36
|
+
@keyframes loading {
|
37
|
+
from {
|
38
|
+
background-position: calc(var(--background-size) * -1) calc(var(--background-size) * -1);
|
39
|
+
}
|
40
|
+
|
41
|
+
to {
|
42
|
+
background-position: var(--background-size) var(--background-size);
|
43
|
+
}
|
44
|
+
}
|
45
|
+
|
46
|
+
& {
|
47
|
+
background: linear-gradient(to bottom right, transparent 12.5%, #bbbbbb, #ffffff 25%, transparent 12.5%, transparent 12.5%, #bbbbbb, #ffffff 25%, transparent 12.5%);
|
48
|
+
background-repeat: no-repeat;
|
49
|
+
background-size: calc(var(--background-size) * 4) calc(var(--background-size) * 4);
|
50
|
+
animation: loading 1.25s infinite forwards cubic-bezier(0.25, 0.5, 0.5, 0.25);
|
51
|
+
box-shadow: inset 0 0 0.5rem #0003;
|
52
|
+
}
|
53
|
+
}
|
54
|
+
|
55
|
+
.serverError {
|
56
|
+
--size: 4rem;
|
57
|
+
|
58
|
+
@keyframes fail {
|
59
|
+
0% {
|
60
|
+
background-size: var(--background-size) var(--background-size);
|
61
|
+
}
|
62
|
+
|
63
|
+
50% {
|
64
|
+
background-size: calc(var(--background-size) * 4) calc(var(--background-size) * 4);
|
65
|
+
}
|
66
|
+
|
67
|
+
100% {
|
68
|
+
background-size: var(--background-size) var(--background-size);
|
69
|
+
}
|
70
|
+
}
|
71
|
+
|
72
|
+
& {
|
73
|
+
background: radial-gradient(transparent, #ff0000);
|
74
|
+
background-repeat: no-repeat;
|
75
|
+
background-size: var(--background-size) var(--background-size);
|
76
|
+
background-position: center center;
|
77
|
+
animation: fail 1s infinite forwards cubic-bezier(0.4, 0, 0.2, 1);
|
78
|
+
box-shadow: 0 0 1rem #fff;
|
79
|
+
border-radius: 0;
|
80
|
+
}
|
10
81
|
}
|
@@ -3,25 +3,80 @@
|
|
3
3
|
* YourDash is licensed under the MIT License. (https://ewsgit.mit-license.org)
|
4
4
|
*/
|
5
5
|
|
6
|
-
import
|
6
|
+
import Icon from "../icon/icon.tsx";
|
7
|
+
import { UKIcon } from "../icon/iconDictionary.ts";
|
7
8
|
import styles from "./image.module.scss";
|
8
|
-
import { FC } from "react";
|
9
|
+
import { FC, useEffect, useRef, useState } from "react";
|
10
|
+
import clippy from "@yourdash/shared/web/helpers/clippy.ts";
|
9
11
|
|
10
12
|
const Image: FC<{
|
11
13
|
src: string;
|
12
14
|
accessibleLabel: string;
|
15
|
+
containerClassName?: string;
|
13
16
|
className?: string;
|
14
|
-
authenticatedImage?: boolean;
|
15
17
|
disableLazyLoading?: boolean;
|
18
|
+
noRounding?: boolean;
|
19
|
+
width?: number;
|
20
|
+
height?: number;
|
16
21
|
}> = (props) => {
|
22
|
+
const ref = useRef<HTMLDivElement>(null);
|
23
|
+
const [src, setSrc] = useState<string>(props.src);
|
24
|
+
const [loaded, setLoaded] = useState<boolean>(false);
|
25
|
+
const [hasFailed, setHasFailed] = useState<boolean>(false);
|
26
|
+
const [backgroundSize, setBackgroundSize] = useState<number>(0);
|
27
|
+
|
28
|
+
useEffect(() => {
|
29
|
+
const rc = ref.current;
|
30
|
+
|
31
|
+
if (!rc) {
|
32
|
+
return;
|
33
|
+
}
|
34
|
+
|
35
|
+
setTimeout(() => {
|
36
|
+
const bounds = rc.getBoundingClientRect();
|
37
|
+
|
38
|
+
setBackgroundSize(bounds.height > bounds.width ? bounds.height : bounds.width);
|
39
|
+
}, 0);
|
40
|
+
}, [src]);
|
41
|
+
|
42
|
+
useEffect(() => {
|
43
|
+
setHasFailed(false);
|
44
|
+
setLoaded(false);
|
45
|
+
}, [src]);
|
46
|
+
|
47
|
+
useEffect(() => {
|
48
|
+
if (props.src !== src) {
|
49
|
+
setSrc(props.src);
|
50
|
+
}
|
51
|
+
}, [props.src]);
|
52
|
+
|
17
53
|
return (
|
18
|
-
<
|
19
|
-
|
20
|
-
|
21
|
-
|
22
|
-
|
23
|
-
|
24
|
-
|
54
|
+
<div
|
55
|
+
ref={ref}
|
56
|
+
className={clippy(styles.componentContainer, props.containerClassName, !loaded && styles.loading, hasFailed && styles.serverError)}
|
57
|
+
style={{
|
58
|
+
// @ts-ignore
|
59
|
+
"--background-size": backgroundSize + "px",
|
60
|
+
}}
|
61
|
+
>
|
62
|
+
{!hasFailed ? (
|
63
|
+
<img
|
64
|
+
className={clippy(styles.component, props.className, loaded && styles.loaded, props.noRounding && styles.noRounding)}
|
65
|
+
draggable={false}
|
66
|
+
width={props.width}
|
67
|
+
height={props.height}
|
68
|
+
onError={() => setHasFailed(true)}
|
69
|
+
loading={props.disableLazyLoading ? "eager" : "lazy"}
|
70
|
+
alt={props.accessibleLabel}
|
71
|
+
onLoad={(e) => {
|
72
|
+
setLoaded(e.currentTarget.complete);
|
73
|
+
}}
|
74
|
+
src={src}
|
75
|
+
/>
|
76
|
+
) : (
|
77
|
+
<Icon icon={UKIcon.ServerError} />
|
78
|
+
)}
|
79
|
+
</div>
|
25
80
|
);
|
26
81
|
};
|
27
82
|
|
package/components/link/link.tsx
CHANGED
@@ -3,7 +3,7 @@
|
|
3
3
|
* YourDash is licensed under the MIT License. (https://ewsgit.mit-license.org)
|
4
4
|
*/
|
5
5
|
|
6
|
-
import clippy from "@yourdash/shared/web/helpers/clippy.
|
6
|
+
import clippy from "@yourdash/shared/web/helpers/clippy.ts";
|
7
7
|
import styles from "./link.module.scss";
|
8
8
|
import { FC } from "react";
|
9
9
|
|
@@ -0,0 +1,25 @@
|
|
1
|
+
/*!
|
2
|
+
* Copyright ©2024 Ewsgit<https://github.com/ewsgit> and YourDash<https://github.com/yourdash> contributors.
|
3
|
+
* YourDash is licensed under the MIT License. (https://ewsgit.mit-license.org)
|
4
|
+
*/
|
5
|
+
|
6
|
+
@use "@yourdash/uikit/theme/themeValues" as *;
|
7
|
+
|
8
|
+
.component {
|
9
|
+
padding: var(#{$theme+$padding});
|
10
|
+
border: var(#{$theme+$border});
|
11
|
+
border-radius: var(#{$theme+$radius});
|
12
|
+
background-color: var(#{$theme+$background});
|
13
|
+
user-select: none;
|
14
|
+
width: 100%;
|
15
|
+
display: flex;
|
16
|
+
align-items: center;
|
17
|
+
justify-content: flex-start;
|
18
|
+
}
|
19
|
+
|
20
|
+
.bar {
|
21
|
+
background: var(#{$theme+$accent});
|
22
|
+
width: var(--ukcomp-progress);
|
23
|
+
height: 1rem;
|
24
|
+
transition: var(#{$theme+$transition});
|
25
|
+
}
|
@@ -0,0 +1,21 @@
|
|
1
|
+
/*
|
2
|
+
* Copyright ©2024 Ewsgit<https://github.com/ewsgit> and YourDash<https://github.com/yourdash> contributors.
|
3
|
+
* YourDash is licensed under the MIT License. (https://ewsgit.mit-license.org)
|
4
|
+
*/
|
5
|
+
|
6
|
+
import clippy from "@yourdash/shared/web/helpers/clippy.ts";
|
7
|
+
import styles from "./progressBar.module.scss";
|
8
|
+
import { FC } from "react";
|
9
|
+
|
10
|
+
// TODO: rewrite this component to use the HTML progress bar
|
11
|
+
const ProgressBar: FC<{ maxValue?: number; value: number; className?: string }> = ({ maxValue, value, className }) => {
|
12
|
+
return (
|
13
|
+
<progress
|
14
|
+
max={maxValue}
|
15
|
+
value={value}
|
16
|
+
className={className}
|
17
|
+
/>
|
18
|
+
);
|
19
|
+
};
|
20
|
+
|
21
|
+
export default ProgressBar;
|
@@ -3,8 +3,8 @@
|
|
3
3
|
* YourDash is licensed under the MIT License. (https://ewsgit.mit-license.org)
|
4
4
|
*/
|
5
5
|
|
6
|
-
import { useNavigate } from "@solidjs/router";
|
7
6
|
import { FC } from "react";
|
7
|
+
import { useNavigate } from "react-router";
|
8
8
|
|
9
9
|
const Redirect: FC<{ to: string | null }> = (props) => {
|
10
10
|
const navigate = useNavigate();
|
@@ -3,11 +3,10 @@
|
|
3
3
|
* YourDash is licensed under the MIT License. (https://ewsgit.mit-license.org)
|
4
4
|
*/
|
5
5
|
|
6
|
-
@
|
6
|
+
@use "@yourdash/uikit/theme/themeValues" as *;
|
7
7
|
|
8
8
|
.component {
|
9
9
|
display: flex;
|
10
|
-
|
11
10
|
border: var(#{$theme}#{$border});
|
12
11
|
border-bottom: none;
|
13
12
|
border-radius: var(#{$theme}#{$radius});
|
@@ -16,13 +15,19 @@
|
|
16
15
|
.row {
|
17
16
|
width: 0;
|
18
17
|
height: calc(100% - calc(var(#{$theme}#{$gap})) * 2);
|
19
|
-
|
20
18
|
margin: var(#{$theme}#{$gap});
|
19
|
+
|
20
|
+
&.disableMargin {
|
21
|
+
height: 100%;
|
22
|
+
}
|
21
23
|
}
|
22
24
|
|
23
25
|
.column {
|
24
26
|
width: calc(100% - calc(var(#{$theme}#{$gap})) * 2);
|
25
27
|
height: 0;
|
26
|
-
|
27
28
|
margin: var(#{$theme}#{$gap});
|
29
|
+
|
30
|
+
&.disableMargin {
|
31
|
+
width: 100%;
|
32
|
+
}
|
28
33
|
}
|
@@ -3,12 +3,12 @@
|
|
3
3
|
* YourDash is licensed under the MIT License. (https://ewsgit.mit-license.org)
|
4
4
|
*/
|
5
5
|
|
6
|
-
import clippy from "@yourdash/shared/web/helpers/clippy.
|
6
|
+
import clippy from "@yourdash/shared/web/helpers/clippy.ts";
|
7
7
|
import styles from "./separator.module.scss";
|
8
8
|
import { FC } from "react";
|
9
9
|
|
10
|
-
const Separator: FC<{ direction: "column" | "row" }> = (props) => {
|
11
|
-
return <div className={clippy(styles.component, styles[props.direction])} />;
|
10
|
+
const Separator: FC<{ direction: "column" | "row"; disableMargin?: boolean }> = (props) => {
|
11
|
+
return <div className={clippy(styles.component, styles[props.direction], props.disableMargin && styles.disableMargin)} />;
|
12
12
|
};
|
13
13
|
|
14
14
|
export default Separator;
|
@@ -1,9 +1,4 @@
|
|
1
|
-
|
2
|
-
* Copyright ©2024 Ewsgit<https://github.com/ewsgit> and YourDash<https://github.com/yourdash> contributors.
|
3
|
-
* YourDash is licensed under the MIT License. (https://ewsgit.mit-license.org)
|
4
|
-
*/
|
5
|
-
|
6
|
-
@import "@yourdash/uikit/theme/themeValues";
|
1
|
+
@use "@yourdash/uikit/theme/themeValues" as *;
|
7
2
|
|
8
3
|
.component {
|
9
4
|
padding: var(#{$theme+$padding});
|
@@ -3,7 +3,7 @@
|
|
3
3
|
* YourDash is licensed under the MIT License. (https://ewsgit.mit-license.org)
|
4
4
|
*/
|
5
5
|
|
6
|
-
import clippy from "@yourdash/shared/web/helpers/clippy.
|
6
|
+
import clippy from "@yourdash/shared/web/helpers/clippy.ts";
|
7
7
|
import styles from "./spinner.module.scss";
|
8
8
|
import { FC } from "react";
|
9
9
|
|
@@ -3,7 +3,7 @@
|
|
3
3
|
* YourDash is licensed under the MIT License. (https://ewsgit.mit-license.org)
|
4
4
|
*/
|
5
5
|
|
6
|
-
import clippy from "@yourdash/shared/web/helpers/clippy.
|
6
|
+
import clippy from "@yourdash/shared/web/helpers/clippy.ts";
|
7
7
|
import styles from "./subtext.module.scss";
|
8
8
|
import { FC } from "react";
|
9
9
|
|
@@ -0,0 +1,13 @@
|
|
1
|
+
/*!
|
2
|
+
* Copyright ©2024 Ewsgit<https://github.com/ewsgit> and YourDash<https://github.com/yourdash> contributors.
|
3
|
+
* YourDash is licensed under the MIT License. (https://ewsgit.mit-license.org)
|
4
|
+
*/
|
5
|
+
|
6
|
+
@use "@yourdash/uikit/theme/themeValues" as *;
|
7
|
+
|
8
|
+
.component {
|
9
|
+
display: inline-block;
|
10
|
+
font-weight: var(#{$theme+$font+$weight});
|
11
|
+
font-size: var(#{$theme+$font+$size});
|
12
|
+
font-family: var(#{$theme+$font+$family});
|
13
|
+
}
|
@@ -0,0 +1,21 @@
|
|
1
|
+
/*
|
2
|
+
* Copyright ©2024 Ewsgit<https://github.com/ewsgit> and YourDash<https://github.com/yourdash> contributors.
|
3
|
+
* YourDash is licensed under the MIT License. (https://ewsgit.mit-license.org)
|
4
|
+
*/
|
5
|
+
|
6
|
+
import clippy from "@yourdash/shared/web/helpers/clippy.ts";
|
7
|
+
import styles from "./text.module.scss";
|
8
|
+
import { FC } from "react";
|
9
|
+
|
10
|
+
const Tag: FC<{ text: string; color: string; className?: string }> = (props) => {
|
11
|
+
return (
|
12
|
+
<div
|
13
|
+
className={clippy(styles.component, props.className)}
|
14
|
+
style={{ backgroundColor: props.color }}
|
15
|
+
>
|
16
|
+
{props.text}
|
17
|
+
</div>
|
18
|
+
);
|
19
|
+
};
|
20
|
+
|
21
|
+
export default Tag;
|
package/components/text/text.tsx
CHANGED
@@ -3,7 +3,7 @@
|
|
3
3
|
* YourDash is licensed under the MIT License. (https://ewsgit.mit-license.org)
|
4
4
|
*/
|
5
5
|
|
6
|
-
import clippy from "@yourdash/shared/web/helpers/clippy.
|
6
|
+
import clippy from "@yourdash/shared/web/helpers/clippy.ts";
|
7
7
|
import styles from "./text.module.scss";
|
8
8
|
import { FC } from "react";
|
9
9
|
|
@@ -3,7 +3,7 @@
|
|
3
3
|
* YourDash is licensed under the MIT License. (https://ewsgit.mit-license.org)
|
4
4
|
*/
|
5
5
|
|
6
|
-
import clippy from "@yourdash/shared/web/helpers/clippy.
|
6
|
+
import clippy from "@yourdash/shared/web/helpers/clippy.ts";
|
7
7
|
import styles from "./textButton.module.scss";
|
8
8
|
import { FC } from "react";
|
9
9
|
|
@@ -1,26 +1,53 @@
|
|
1
1
|
/*
|
2
|
-
* Copyright ©2024 Ewsgit<https://
|
3
|
-
* YourDash is licensed under the MIT License. (https://ewsgit.
|
2
|
+
* Copyright ©2024 Ewsgit<https://ewsgit.uk> and YourDash<https://yourdash.ewsgit.uk> contributors.
|
3
|
+
* YourDash is licensed under the MIT License. (https://mit.ewsgit.uk)
|
4
4
|
*/
|
5
5
|
|
6
|
-
import clippy from "@yourdash/shared/web/helpers/clippy.
|
7
|
-
import Icon from "../icon/icon.
|
8
|
-
import { UKIcon } from "../icon/iconDictionary.
|
6
|
+
import clippy from "@yourdash/shared/web/helpers/clippy.ts";
|
7
|
+
import Icon from "../icon/icon.tsx";
|
8
|
+
import { UKIcon } from "../icon/iconDictionary.ts";
|
9
9
|
import styles from "./textInput.module.scss";
|
10
|
-
import {
|
10
|
+
import React, { useEffect, useRef, useState } from "react";
|
11
11
|
|
12
12
|
// TODO: maybe remove onEnter for onSubmit
|
13
13
|
|
14
|
-
const
|
14
|
+
const TextInputComponent: React.ForwardRefExoticComponent<{
|
15
15
|
onChange?: (value: string) => void;
|
16
16
|
onSubmit?: (value: string) => void;
|
17
17
|
placeholder: string;
|
18
18
|
icon?: UKIcon;
|
19
19
|
onEnter?: (value: string) => void;
|
20
20
|
defaultValue?: string;
|
21
|
+
value?: string;
|
21
22
|
accessibleName: string;
|
22
23
|
className?: string;
|
23
|
-
|
24
|
+
type?: string;
|
25
|
+
}> = (props, fwrdRef) => {
|
26
|
+
const ref = useRef<HTMLInputElement>(null);
|
27
|
+
|
28
|
+
React.useImperativeHandle(fwrdRef, () => ref.current);
|
29
|
+
|
30
|
+
const [value, setValue] = useState(props.defaultValue || "");
|
31
|
+
|
32
|
+
useEffect(() => {
|
33
|
+
if (props.value) setValue(props.value);
|
34
|
+
}, [props.value]);
|
35
|
+
|
36
|
+
useEffect(() => {
|
37
|
+
if (!ref.current) return;
|
38
|
+
|
39
|
+
ref.current.value = value;
|
40
|
+
}, [value]);
|
41
|
+
|
42
|
+
useEffect(() => {
|
43
|
+
setTimeout(() => {
|
44
|
+
if (ref.current?.value !== props.defaultValue) {
|
45
|
+
ref.current?.onkeyup?.({ currentTarget: ref.current } as unknown as KeyboardEvent);
|
46
|
+
ref.current?.onchange?.({ currentTarget: ref.current } as unknown as Event);
|
47
|
+
}
|
48
|
+
}, 500);
|
49
|
+
}, []);
|
50
|
+
|
24
51
|
return (
|
25
52
|
<div className={clippy(styles.component, props.className)}>
|
26
53
|
{props.icon && (
|
@@ -30,12 +57,13 @@ const TextInput: FC<{
|
|
30
57
|
/>
|
31
58
|
)}
|
32
59
|
<input
|
60
|
+
ref={ref}
|
61
|
+
type={props.type || "text"}
|
33
62
|
aria-label={props.accessibleName}
|
34
|
-
defaultValue={props.defaultValue}
|
35
63
|
className={clippy(styles.input, !props.icon && styles.noIcon)}
|
36
64
|
placeholder={props.placeholder}
|
37
|
-
type="text"
|
38
65
|
onKeyUp={(e) => {
|
66
|
+
setValue(e.currentTarget.value);
|
39
67
|
props.onChange?.(e.currentTarget.value);
|
40
68
|
}}
|
41
69
|
onChange={(e) => props.onSubmit?.(e.currentTarget.value)}
|
@@ -51,4 +79,6 @@ const TextInput: FC<{
|
|
51
79
|
);
|
52
80
|
};
|
53
81
|
|
82
|
+
const TextInput = React.forwardRef(TextInputComponent);
|
83
|
+
|
54
84
|
export default TextInput;
|
@@ -1,31 +1,71 @@
|
|
1
|
-
/*!
|
2
|
-
* Copyright ©2024 Ewsgit<https://
|
3
|
-
* YourDash is licensed under the MIT License. (https://ewsgit.
|
4
|
-
*/
|
5
|
-
|
6
|
-
.container {
|
7
|
-
position: fixed;
|
8
|
-
|
9
|
-
right:
|
10
|
-
z-index: 10000;
|
11
|
-
|
12
|
-
|
13
|
-
|
14
|
-
|
15
|
-
|
16
|
-
|
17
|
-
|
18
|
-
|
19
|
-
|
20
|
-
|
21
|
-
.
|
22
|
-
|
23
|
-
|
24
|
-
|
25
|
-
|
26
|
-
|
27
|
-
|
28
|
-
|
29
|
-
|
30
|
-
|
31
|
-
|
1
|
+
/*!
|
2
|
+
* Copyright ©2024 Ewsgit<https://ewsgit.uk> and YourDash<https://yourdash.ewsgit.uk> contributors.
|
3
|
+
* YourDash is licensed under the MIT License. (https://mit.ewsgit.uk)
|
4
|
+
*/
|
5
|
+
|
6
|
+
.container {
|
7
|
+
position: fixed;
|
8
|
+
top: 0;
|
9
|
+
right: 0;
|
10
|
+
z-index: 10000;
|
11
|
+
text-align: start;
|
12
|
+
opacity: 0.75;
|
13
|
+
overflow: hidden;
|
14
|
+
pointer-events: none;
|
15
|
+
gap: 0.25rem;
|
16
|
+
display: flex;
|
17
|
+
flex-direction: column;
|
18
|
+
}
|
19
|
+
|
20
|
+
.component {
|
21
|
+
border-radius: 0.5rem;
|
22
|
+
display: flex;
|
23
|
+
flex-direction: column;
|
24
|
+
gap: 1rem;
|
25
|
+
pointer-events: none;
|
26
|
+
backdrop-filter: blur(1rem);
|
27
|
+
max-width: 32rem;
|
28
|
+
margin-right: 0.5rem;
|
29
|
+
|
30
|
+
&:first-child {
|
31
|
+
margin-top: 0.5rem;
|
32
|
+
}
|
33
|
+
}
|
34
|
+
|
35
|
+
.cardContent {
|
36
|
+
gap: 0;
|
37
|
+
padding: 0.25rem;
|
38
|
+
padding-left: 0.5rem;
|
39
|
+
padding-right: 0.5rem;
|
40
|
+
margin-right: -0.5rem;
|
41
|
+
}
|
42
|
+
|
43
|
+
.success {
|
44
|
+
border-right: 0.5rem solid #2ea967;
|
45
|
+
}
|
46
|
+
|
47
|
+
.error {
|
48
|
+
border-right: 0.5rem solid #ff4500;
|
49
|
+
}
|
50
|
+
|
51
|
+
.warning {
|
52
|
+
border-right: 0.5rem solid #daa520;
|
53
|
+
}
|
54
|
+
|
55
|
+
.info {
|
56
|
+
border-right: 0.5rem solid #00b8ff;
|
57
|
+
}
|
58
|
+
|
59
|
+
.heading {
|
60
|
+
text-align: left;
|
61
|
+
line-height: 1;
|
62
|
+
padding-top: 0.25rem;
|
63
|
+
}
|
64
|
+
|
65
|
+
.body {
|
66
|
+
|
67
|
+
}
|
68
|
+
|
69
|
+
.pointerEvents {
|
70
|
+
pointer-events: all;
|
71
|
+
}
|
@@ -0,0 +1,12 @@
|
|
1
|
+
/*
|
2
|
+
* Copyright ©2024 Ewsgit<https://ewsgit.uk> and YourDash<https://yourdash.ewsgit.uk> contributors.
|
3
|
+
* YourDash is licensed under the MIT License. (https://mit.ewsgit.uk)
|
4
|
+
*/
|
5
|
+
|
6
|
+
import type IToastAction from "./toastAction.ts";
|
7
|
+
|
8
|
+
export default interface Toast {
|
9
|
+
type: "success" | "error" | "warning" | "info" | "debug";
|
10
|
+
content: { title: string; body: string; actions?: IToastAction[] };
|
11
|
+
persist?: boolean;
|
12
|
+
}
|