sliftutils 0.80.0 → 0.82.0
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.d.ts
CHANGED
|
@@ -172,6 +172,28 @@ declare module "sliftutils/render-utils/Anchor" {
|
|
|
172
172
|
|
|
173
173
|
}
|
|
174
174
|
|
|
175
|
+
declare module "sliftutils/render-utils/ButtonSelector" {
|
|
176
|
+
import preact from "preact";
|
|
177
|
+
export declare class ButtonSelector<T> extends preact.Component<{
|
|
178
|
+
title?: string;
|
|
179
|
+
value: T;
|
|
180
|
+
options: {
|
|
181
|
+
value: T;
|
|
182
|
+
title: preact.ComponentChild;
|
|
183
|
+
isDefault?: boolean;
|
|
184
|
+
hotkeys?: string[];
|
|
185
|
+
}[];
|
|
186
|
+
onChange: (value: T) => void;
|
|
187
|
+
noPadding?: boolean;
|
|
188
|
+
noDefault?: boolean;
|
|
189
|
+
noUI?: boolean;
|
|
190
|
+
classWrapper?: string;
|
|
191
|
+
}> {
|
|
192
|
+
render(): preact.JSX.Element;
|
|
193
|
+
}
|
|
194
|
+
|
|
195
|
+
}
|
|
196
|
+
|
|
175
197
|
declare module "sliftutils/render-utils/DropdownCustom" {
|
|
176
198
|
import preact from "preact";
|
|
177
199
|
import { LengthOrPercentage } from "typesafecss/cssTypes";
|
package/package.json
CHANGED
|
@@ -0,0 +1,18 @@
|
|
|
1
|
+
import preact from "preact";
|
|
2
|
+
export declare class ButtonSelector<T> extends preact.Component<{
|
|
3
|
+
title?: string;
|
|
4
|
+
value: T;
|
|
5
|
+
options: {
|
|
6
|
+
value: T;
|
|
7
|
+
title: preact.ComponentChild;
|
|
8
|
+
isDefault?: boolean;
|
|
9
|
+
hotkeys?: string[];
|
|
10
|
+
}[];
|
|
11
|
+
onChange: (value: T) => void;
|
|
12
|
+
noPadding?: boolean;
|
|
13
|
+
noDefault?: boolean;
|
|
14
|
+
noUI?: boolean;
|
|
15
|
+
classWrapper?: string;
|
|
16
|
+
}> {
|
|
17
|
+
render(): preact.JSX.Element;
|
|
18
|
+
}
|
|
@@ -0,0 +1,61 @@
|
|
|
1
|
+
import preact from "preact";
|
|
2
|
+
import { observer } from "./observer";
|
|
3
|
+
import { css } from "typesafecss";
|
|
4
|
+
|
|
5
|
+
@observer
|
|
6
|
+
export class ButtonSelector<T> extends preact.Component<{
|
|
7
|
+
title?: string;
|
|
8
|
+
value: T;
|
|
9
|
+
options: { value: T; title: preact.ComponentChild; isDefault?: boolean; hotkeys?: string[] }[];
|
|
10
|
+
onChange: (value: T) => void;
|
|
11
|
+
noPadding?: boolean;
|
|
12
|
+
noDefault?: boolean;
|
|
13
|
+
noUI?: boolean;
|
|
14
|
+
|
|
15
|
+
classWrapper?: string;
|
|
16
|
+
}> {
|
|
17
|
+
render() {
|
|
18
|
+
const { options, onChange, title } = this.props;
|
|
19
|
+
const selectedValue = this.props.value;
|
|
20
|
+
let selectedOption = (
|
|
21
|
+
options.find(o => o.value === selectedValue)
|
|
22
|
+
|| (!this.props.noDefault ? (options.find(o => o.isDefault) || options[0]) : undefined)
|
|
23
|
+
)?.value;
|
|
24
|
+
return (
|
|
25
|
+
<div className={css.hbox(2).wrap + this.props.classWrapper}>
|
|
26
|
+
{title && <div
|
|
27
|
+
className={
|
|
28
|
+
css.fontWeight("bold")
|
|
29
|
+
.hsl(0, 0, 25)
|
|
30
|
+
.border("1px solid hsl(0, 0%, 5%)").pad(4, 6)
|
|
31
|
+
.color("white")
|
|
32
|
+
}
|
|
33
|
+
title={String(selectedValue)}
|
|
34
|
+
>
|
|
35
|
+
{title}
|
|
36
|
+
</div>}
|
|
37
|
+
{options.map(({ value, title, hotkeys }) =>
|
|
38
|
+
<button
|
|
39
|
+
style={{
|
|
40
|
+
background: (
|
|
41
|
+
this.props.noUI && "transparent"
|
|
42
|
+
|| selectedOption === value && "hsl(110, 75%, 40%)"
|
|
43
|
+
|| this.props.noPadding && "hsl(0, 0%, 40%)"
|
|
44
|
+
|| ""
|
|
45
|
+
),
|
|
46
|
+
border: this.props.noUI ? "none" : undefined,
|
|
47
|
+
}}
|
|
48
|
+
onClick={() => onChange(value)}
|
|
49
|
+
className={
|
|
50
|
+
css.button.flex
|
|
51
|
+
+ ((this.props.noPadding || this.props.noUI) && css.pad(0))
|
|
52
|
+
}
|
|
53
|
+
title={String(value)}
|
|
54
|
+
>
|
|
55
|
+
{title}
|
|
56
|
+
</button>
|
|
57
|
+
)}
|
|
58
|
+
</div>
|
|
59
|
+
);
|
|
60
|
+
}
|
|
61
|
+
}
|
|
@@ -297,7 +297,7 @@ export class InputLabelURL extends preact.Component<InputLabelProps & {
|
|
|
297
297
|
this.props.persisted.value;
|
|
298
298
|
let props = { ...this.props };
|
|
299
299
|
if (props.type === "number" || props.number) {
|
|
300
|
-
return <InputLabel {...props} value={Number(props.persisted.value) || 0} onChange={e => { props.persisted.value = e.currentTarget.value; props.onChange?.(e); }} />;
|
|
300
|
+
return <InputLabel {...props} value={Number(props.persisted.value) || 0} onChange={e => { props.persisted.value = +e.currentTarget.value; props.onChange?.(e); }} />;
|
|
301
301
|
} else if (props.type === "checkbox" || this.props.checkbox) {
|
|
302
302
|
return <InputLabel
|
|
303
303
|
{...props}
|