math-main-components 0.0.217 → 0.0.220
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.
|
@@ -2,9 +2,10 @@
|
|
|
2
2
|
import type { StoryObj } from '@storybook/react';
|
|
3
3
|
declare const meta: {
|
|
4
4
|
title: string;
|
|
5
|
-
component: <Type extends string>({ options, unit, onChangeDropdown, onChangeInput, ...props }: {
|
|
5
|
+
component: <Type extends string>({ options, unit, defaultValue, onChangeDropdown, onChangeInput, ...props }: {
|
|
6
6
|
options: import("./").NumberDropdownOption<Type>[];
|
|
7
|
-
|
|
7
|
+
defaultValue: Type;
|
|
8
|
+
onChangeDropdown?: ((oldValue: Type, newValue: Type) => void) | undefined;
|
|
8
9
|
onChangeInput?: ((value: number) => void) | undefined;
|
|
9
10
|
unit?: string | undefined;
|
|
10
11
|
} & import("react").InputHTMLAttributes<HTMLInputElement>) => import("react").JSX.Element;
|
|
@@ -3,9 +3,10 @@ export type NumberDropdownOption<Type> = {
|
|
|
3
3
|
value: Type;
|
|
4
4
|
label: string;
|
|
5
5
|
};
|
|
6
|
-
export declare const NumberDropdown: <Type extends string>({ options, unit, onChangeDropdown, onChangeInput, ...props }: {
|
|
6
|
+
export declare const NumberDropdown: <Type extends string>({ options, unit, defaultValue, onChangeDropdown, onChangeInput, ...props }: {
|
|
7
7
|
options: NumberDropdownOption<Type>[];
|
|
8
|
-
|
|
8
|
+
defaultValue: Type;
|
|
9
|
+
onChangeDropdown?: ((oldValue: Type, newValue: Type) => void) | undefined;
|
|
9
10
|
onChangeInput?: ((value: number) => void) | undefined;
|
|
10
11
|
unit?: string | undefined;
|
|
11
12
|
} & React.InputHTMLAttributes<HTMLInputElement>) => React.JSX.Element;
|
package/dist/index.cjs.js
CHANGED
|
@@ -9793,20 +9793,24 @@ function InputText({ id, title, name, placeholder = "", defaultValue = "", autoF
|
|
|
9793
9793
|
React__default["default"].createElement("span", { className: styles$g.label_text }, title)))));
|
|
9794
9794
|
}
|
|
9795
9795
|
|
|
9796
|
-
var css_248z$f = ".styles-module_container__kkDKN {\n display: flex;\n align-items: center;\n gap: 10px;\n font-family: \"Playfair\", serif;\n border-radius: 18px;\n transition: 0.2s ease-in-out;\n padding-left: 4px;\n background: var(--background-1);\n padding: 6px;\n border: 1px solid var(--border-1);\n margin-bottom: 20px;\n font-family: var(--font-1);\n}\n\n.styles-module_select_container__nqgUF {\n border: 1px solid var(--border-1);\n padding: 0px 20px;\n gap: 10px;\n display: flex;\n align-items: center;\n border-radius: 12px;\n cursor: pointer;\n background: var(--background-1);\n transition: 0.2s ease-in-out;\n height: 55px;\n}\n.styles-module_select_container__nqgUF:hover {\n border-color: var(--primary-2);\n}\n.styles-module_select_container__nqgUF:focus-within {\n border: var(--focus-border);\n box-shadow: var(--focus-shadow);\n background: var(--background-2);\n}\n.styles-module_select_container__nqgUF
|
|
9797
|
-
var styles$f = {"container":"styles-module_container__kkDKN","select_container":"styles-module_select_container__nqgUF","input":"styles-module_input__pUgcS","input_container":"styles-module_input_container__oRJ75","unit_label":"styles-module_unit_label__bLQWy"};
|
|
9796
|
+
var css_248z$f = ".styles-module_container__kkDKN {\n display: flex;\n align-items: center;\n gap: 10px;\n font-family: \"Playfair\", serif;\n border-radius: 18px;\n transition: 0.2s ease-in-out;\n padding-left: 4px;\n background: var(--background-1);\n padding: 6px;\n border: 1px solid var(--border-1);\n margin-bottom: 20px;\n font-family: var(--font-1);\n}\n\n.styles-module_select_container__nqgUF {\n border: 1px solid var(--border-1);\n padding: 0px 20px;\n gap: 10px;\n display: flex;\n align-items: center;\n border-radius: 12px;\n cursor: pointer;\n background: var(--background-1);\n transition: 0.2s ease-in-out;\n height: 55px;\n}\n.styles-module_select_container__nqgUF:hover {\n border-color: var(--primary-2);\n}\n.styles-module_select_container__nqgUF:focus-within {\n border: var(--focus-border);\n box-shadow: var(--focus-shadow);\n background: var(--background-2);\n}\n.styles-module_select_container__nqgUF .styles-module_select__27FqK {\n border: none;\n outline: none;\n background: none;\n cursor: pointer;\n font-size: 16px;\n min-width: 64px;\n height: 100%;\n font-family: var(--font-1);\n -webkit-appearance: none;\n -moz-appearance: none;\n appearance: none;\n}\n\n.styles-module_input__pUgcS::-webkit-outer-spin-button,\n.styles-module_input__pUgcS::-webkit-inner-spin-button {\n -webkit-appearance: none;\n margin: 0;\n}\n\n.styles-module_input_container__oRJ75 {\n padding: 0px 20px;\n font-size: 16px;\n border-radius: 12px;\n border: 1px solid transparent;\n transition: 0.2s ease;\n flex: 1;\n display: flex;\n flex-direction: row;\n align-items: center;\n gap: 6px;\n background: var(--background-1);\n border-color: var(--border-1);\n height: 55px;\n}\n.styles-module_input_container__oRJ75:hover {\n border-color: var(--primary-2);\n}\n.styles-module_input_container__oRJ75 .styles-module_unit_label__bLQWy {\n font-size: 16px;\n text-align: right;\n}\n.styles-module_input_container__oRJ75:focus-within {\n border: var(--focus-border);\n box-shadow: var(--focus-shadow);\n background: var(--background-2);\n}\n.styles-module_input_container__oRJ75 .styles-module_input__pUgcS {\n width: 0px;\n min-width: 64px;\n outline: none;\n border: none;\n -moz-appearance: textfield;\n appearance: textfield;\n font-size: 16px;\n text-align: right;\n background: transparent;\n font-family: var(--font-1);\n}\n.styles-module_input_container__oRJ75 .styles-module_input__pUgcS[type=number] {\n cursor: pointer;\n flex: 1;\n}\n.styles-module_input_container__oRJ75 .styles-module_input__pUgcS[type=range] {\n width: 100%;\n}\n.styles-module_input_container__oRJ75 .styles-module_input__pUgcS[type=number]:disabled {\n background: transparent;\n color: var(--foreground-3);\n}";
|
|
9797
|
+
var styles$f = {"container":"styles-module_container__kkDKN","select_container":"styles-module_select_container__nqgUF","select":"styles-module_select__27FqK","input":"styles-module_input__pUgcS","input_container":"styles-module_input_container__oRJ75","unit_label":"styles-module_unit_label__bLQWy"};
|
|
9798
9798
|
styleInject(css_248z$f);
|
|
9799
9799
|
|
|
9800
|
-
const NumberDropdown = ({ options = [], unit = "", onChangeDropdown = () => { }, onChangeInput = () => { }, ...props }) => {
|
|
9800
|
+
const NumberDropdown = ({ options = [], unit = "", defaultValue, onChangeDropdown = () => { }, onChangeInput = () => { }, ...props }) => {
|
|
9801
|
+
const [selected, setSelected] = React.useState(defaultValue);
|
|
9802
|
+
React.useEffect(() => setSelected(defaultValue), [defaultValue]);
|
|
9801
9803
|
const onDropdownChange = (event) => {
|
|
9802
|
-
onChangeDropdown(event.target.value);
|
|
9804
|
+
onChangeDropdown(selected, event.target.value);
|
|
9805
|
+
setSelected(event.target.value);
|
|
9803
9806
|
};
|
|
9804
9807
|
const onInputChange = (event) => {
|
|
9805
9808
|
onChangeInput(Number(event.target.value));
|
|
9806
9809
|
};
|
|
9807
9810
|
return (React__default["default"].createElement("div", { className: styles$f.container },
|
|
9808
9811
|
React__default["default"].createElement("div", { className: styles$f.select_container },
|
|
9809
|
-
React__default["default"].createElement(
|
|
9812
|
+
React__default["default"].createElement(SvgIcon, { iconName: "expand_more" }),
|
|
9813
|
+
React__default["default"].createElement("select", { className: styles$f.select, onChange: onDropdownChange, value: selected },
|
|
9810
9814
|
React__default["default"].createElement("option", { value: "none" }, "Ausw\u00E4hlen"),
|
|
9811
9815
|
options.map((option, index) => (React__default["default"].createElement("option", { key: index, value: option.value }, option.label))))),
|
|
9812
9816
|
React__default["default"].createElement("div", { className: styles$f.input_container },
|
package/dist/index.esm.js
CHANGED
|
@@ -9767,20 +9767,24 @@ function InputText({ id, title, name, placeholder = "", defaultValue = "", autoF
|
|
|
9767
9767
|
React__default.createElement("span", { className: styles$g.label_text }, title)))));
|
|
9768
9768
|
}
|
|
9769
9769
|
|
|
9770
|
-
var css_248z$f = ".styles-module_container__kkDKN {\n display: flex;\n align-items: center;\n gap: 10px;\n font-family: \"Playfair\", serif;\n border-radius: 18px;\n transition: 0.2s ease-in-out;\n padding-left: 4px;\n background: var(--background-1);\n padding: 6px;\n border: 1px solid var(--border-1);\n margin-bottom: 20px;\n font-family: var(--font-1);\n}\n\n.styles-module_select_container__nqgUF {\n border: 1px solid var(--border-1);\n padding: 0px 20px;\n gap: 10px;\n display: flex;\n align-items: center;\n border-radius: 12px;\n cursor: pointer;\n background: var(--background-1);\n transition: 0.2s ease-in-out;\n height: 55px;\n}\n.styles-module_select_container__nqgUF:hover {\n border-color: var(--primary-2);\n}\n.styles-module_select_container__nqgUF:focus-within {\n border: var(--focus-border);\n box-shadow: var(--focus-shadow);\n background: var(--background-2);\n}\n.styles-module_select_container__nqgUF
|
|
9771
|
-
var styles$f = {"container":"styles-module_container__kkDKN","select_container":"styles-module_select_container__nqgUF","input":"styles-module_input__pUgcS","input_container":"styles-module_input_container__oRJ75","unit_label":"styles-module_unit_label__bLQWy"};
|
|
9770
|
+
var css_248z$f = ".styles-module_container__kkDKN {\n display: flex;\n align-items: center;\n gap: 10px;\n font-family: \"Playfair\", serif;\n border-radius: 18px;\n transition: 0.2s ease-in-out;\n padding-left: 4px;\n background: var(--background-1);\n padding: 6px;\n border: 1px solid var(--border-1);\n margin-bottom: 20px;\n font-family: var(--font-1);\n}\n\n.styles-module_select_container__nqgUF {\n border: 1px solid var(--border-1);\n padding: 0px 20px;\n gap: 10px;\n display: flex;\n align-items: center;\n border-radius: 12px;\n cursor: pointer;\n background: var(--background-1);\n transition: 0.2s ease-in-out;\n height: 55px;\n}\n.styles-module_select_container__nqgUF:hover {\n border-color: var(--primary-2);\n}\n.styles-module_select_container__nqgUF:focus-within {\n border: var(--focus-border);\n box-shadow: var(--focus-shadow);\n background: var(--background-2);\n}\n.styles-module_select_container__nqgUF .styles-module_select__27FqK {\n border: none;\n outline: none;\n background: none;\n cursor: pointer;\n font-size: 16px;\n min-width: 64px;\n height: 100%;\n font-family: var(--font-1);\n -webkit-appearance: none;\n -moz-appearance: none;\n appearance: none;\n}\n\n.styles-module_input__pUgcS::-webkit-outer-spin-button,\n.styles-module_input__pUgcS::-webkit-inner-spin-button {\n -webkit-appearance: none;\n margin: 0;\n}\n\n.styles-module_input_container__oRJ75 {\n padding: 0px 20px;\n font-size: 16px;\n border-radius: 12px;\n border: 1px solid transparent;\n transition: 0.2s ease;\n flex: 1;\n display: flex;\n flex-direction: row;\n align-items: center;\n gap: 6px;\n background: var(--background-1);\n border-color: var(--border-1);\n height: 55px;\n}\n.styles-module_input_container__oRJ75:hover {\n border-color: var(--primary-2);\n}\n.styles-module_input_container__oRJ75 .styles-module_unit_label__bLQWy {\n font-size: 16px;\n text-align: right;\n}\n.styles-module_input_container__oRJ75:focus-within {\n border: var(--focus-border);\n box-shadow: var(--focus-shadow);\n background: var(--background-2);\n}\n.styles-module_input_container__oRJ75 .styles-module_input__pUgcS {\n width: 0px;\n min-width: 64px;\n outline: none;\n border: none;\n -moz-appearance: textfield;\n appearance: textfield;\n font-size: 16px;\n text-align: right;\n background: transparent;\n font-family: var(--font-1);\n}\n.styles-module_input_container__oRJ75 .styles-module_input__pUgcS[type=number] {\n cursor: pointer;\n flex: 1;\n}\n.styles-module_input_container__oRJ75 .styles-module_input__pUgcS[type=range] {\n width: 100%;\n}\n.styles-module_input_container__oRJ75 .styles-module_input__pUgcS[type=number]:disabled {\n background: transparent;\n color: var(--foreground-3);\n}";
|
|
9771
|
+
var styles$f = {"container":"styles-module_container__kkDKN","select_container":"styles-module_select_container__nqgUF","select":"styles-module_select__27FqK","input":"styles-module_input__pUgcS","input_container":"styles-module_input_container__oRJ75","unit_label":"styles-module_unit_label__bLQWy"};
|
|
9772
9772
|
styleInject(css_248z$f);
|
|
9773
9773
|
|
|
9774
|
-
const NumberDropdown = ({ options = [], unit = "", onChangeDropdown = () => { }, onChangeInput = () => { }, ...props }) => {
|
|
9774
|
+
const NumberDropdown = ({ options = [], unit = "", defaultValue, onChangeDropdown = () => { }, onChangeInput = () => { }, ...props }) => {
|
|
9775
|
+
const [selected, setSelected] = useState(defaultValue);
|
|
9776
|
+
useEffect(() => setSelected(defaultValue), [defaultValue]);
|
|
9775
9777
|
const onDropdownChange = (event) => {
|
|
9776
|
-
onChangeDropdown(event.target.value);
|
|
9778
|
+
onChangeDropdown(selected, event.target.value);
|
|
9779
|
+
setSelected(event.target.value);
|
|
9777
9780
|
};
|
|
9778
9781
|
const onInputChange = (event) => {
|
|
9779
9782
|
onChangeInput(Number(event.target.value));
|
|
9780
9783
|
};
|
|
9781
9784
|
return (React__default.createElement("div", { className: styles$f.container },
|
|
9782
9785
|
React__default.createElement("div", { className: styles$f.select_container },
|
|
9783
|
-
React__default.createElement(
|
|
9786
|
+
React__default.createElement(SvgIcon, { iconName: "expand_more" }),
|
|
9787
|
+
React__default.createElement("select", { className: styles$f.select, onChange: onDropdownChange, value: selected },
|
|
9784
9788
|
React__default.createElement("option", { value: "none" }, "Ausw\u00E4hlen"),
|
|
9785
9789
|
options.map((option, index) => (React__default.createElement("option", { key: index, value: option.value }, option.label))))),
|
|
9786
9790
|
React__default.createElement("div", { className: styles$f.input_container },
|