allaw-ui 0.0.50 → 0.0.52
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/dist/components/atoms/filters/SingleFilter.d.ts +5 -2
- package/dist/components/atoms/filters/SingleFilter.js +18 -20
- package/dist/components/atoms/progressBars/ProgressBar.js +3 -2
- package/dist/components/atoms/typography/TinyInfo.css +3 -0
- package/dist/components/atoms/typography/TinyInfo.d.ts +1 -1
- package/dist/components/atoms/typography/TinyInfo.js +1 -0
- package/package.json +1 -1
|
@@ -1,14 +1,17 @@
|
|
|
1
1
|
import "./SingleFilter.css";
|
|
2
2
|
import React from "react";
|
|
3
3
|
export type SingleFilterProps = {
|
|
4
|
-
|
|
4
|
+
defaultSelectedValue?: string;
|
|
5
5
|
filterData: {
|
|
6
6
|
value: string;
|
|
7
7
|
name: string;
|
|
8
8
|
}[];
|
|
9
9
|
setFilter: (selectedValue: string) => void;
|
|
10
10
|
children?: React.ReactNode;
|
|
11
|
+
required?: boolean;
|
|
12
|
+
showNumIndic?: boolean;
|
|
11
13
|
showBackdrop?: boolean;
|
|
14
|
+
isStatusTag?: boolean;
|
|
12
15
|
};
|
|
13
|
-
declare const SingleFilter: ({
|
|
16
|
+
declare const SingleFilter: ({ showNumIndic, required, defaultSelectedValue, filterData, setFilter, showBackdrop, children, ...props }: SingleFilterProps) => React.JSX.Element;
|
|
14
17
|
export default SingleFilter;
|
|
@@ -25,48 +25,46 @@ import { FilterButtonPrimary, PrimaryButton } from "../buttons";
|
|
|
25
25
|
import { TinyInfo } from "../typography";
|
|
26
26
|
import React, { useState } from "react";
|
|
27
27
|
var SingleFilter = function (_a) {
|
|
28
|
-
var
|
|
29
|
-
var
|
|
30
|
-
var
|
|
31
|
-
|
|
28
|
+
var _b = _a.showNumIndic, showNumIndic = _b === void 0 ? false : _b, _c = _a.required, required = _c === void 0 ? true : _c, defaultSelectedValue = _a.defaultSelectedValue, filterData = _a.filterData, setFilter = _a.setFilter, _d = _a.showBackdrop, showBackdrop = _d === void 0 ? false : _d, children = _a.children, props = __rest(_a, ["showNumIndic", "required", "defaultSelectedValue", "filterData", "setFilter", "showBackdrop", "children"]);
|
|
29
|
+
var _e = useState(false), isOpen = _e[0], setIsOpen = _e[1];
|
|
30
|
+
var _f = useState(defaultSelectedValue || ""), selectedValue = _f[0], setSelectedValue = _f[1];
|
|
31
|
+
var handleClose = function () {
|
|
32
|
+
setFilter(selectedValue);
|
|
32
33
|
setIsOpen(false);
|
|
33
34
|
};
|
|
35
|
+
var handleButtonTap = function () {
|
|
36
|
+
isOpen ? handleClose() : setIsOpen(true);
|
|
37
|
+
};
|
|
34
38
|
var Item = function (_a) {
|
|
35
39
|
var name = _a.name, value = _a.value;
|
|
36
|
-
return (React.createElement("button", { className: "item", onClick: function () {
|
|
40
|
+
return (React.createElement("button", { className: "item", onClick: function () { setFilter(value); setSelectedValue(value); handleClose(); } },
|
|
37
41
|
React.createElement("div", { className: "round" },
|
|
38
|
-
React.createElement("div", { className:
|
|
42
|
+
React.createElement("div", { className: selectedValue === value ? "selected" : "notSelected" })),
|
|
39
43
|
React.createElement("span", null, name)));
|
|
40
44
|
};
|
|
41
|
-
var _d = useState(selectedFilter), tempValue = _d[0], setTempValue = _d[1];
|
|
42
45
|
var SmallItem = function (_a) {
|
|
43
46
|
var name = _a.name, value = _a.value;
|
|
44
|
-
return (React.createElement("button", { className: "smallItem", onClick: function () {
|
|
47
|
+
return (React.createElement("button", { className: "smallItem", onClick: function () { setFilter(value); setSelectedValue(value); } },
|
|
45
48
|
React.createElement("div", { className: "round" },
|
|
46
|
-
React.createElement("div", { className:
|
|
49
|
+
React.createElement("div", { className: selectedValue === value ? "selected" : "notSelected" })),
|
|
47
50
|
React.createElement("span", null, name)));
|
|
48
51
|
};
|
|
49
|
-
var confirmClose = function () {
|
|
50
|
-
tempValue && tempValue != selectedFilter && setFilter(tempValue);
|
|
51
|
-
setTempValue("");
|
|
52
|
-
setIsOpen(false);
|
|
53
|
-
};
|
|
54
52
|
return (React.createElement(React.Fragment, null,
|
|
55
53
|
React.createElement("div", __assign({ className: "baseFilter" }, props),
|
|
56
|
-
React.createElement(FilterButtonPrimary, { onClick:
|
|
57
|
-
|
|
58
|
-
} },
|
|
54
|
+
React.createElement(FilterButtonPrimary, { onClick: handleButtonTap },
|
|
55
|
+
children,
|
|
56
|
+
React.createElement("p", { style: { color: "#25BEEB", fontWeight: "600" } }, showNumIndic && "(".concat(selectedValue.length, ")"))),
|
|
59
57
|
isOpen && (React.createElement("div", { className: "options" }, filterData && filterData.length > 0 &&
|
|
60
58
|
filterData.map(function (item, idx) { return (React.createElement(Item, { name: item.name, value: item.value, key: idx })); }))),
|
|
61
59
|
React.createElement("div", { className: "optionsSmall", style: { bottom: isOpen ? "0" : "-100%" } },
|
|
62
60
|
React.createElement("div", { className: "row" },
|
|
63
61
|
React.createElement("div", { style: { minWidth: "20px" } }),
|
|
64
62
|
React.createElement(TinyInfo, { text: children, variant: "bold14", color: "noir" }),
|
|
65
|
-
React.createElement("button", { className: "closeButton", onClick:
|
|
63
|
+
React.createElement("button", { className: "closeButton", onClick: handleClose },
|
|
66
64
|
React.createElement("i", { className: "allaw-icon-close" }))),
|
|
67
65
|
React.createElement("div", { className: "choices" }, filterData && filterData.length > 0 &&
|
|
68
66
|
filterData.map(function (item, idx) { return (React.createElement(SmallItem, { name: item.name, value: item.value, key: idx })); })),
|
|
69
|
-
React.createElement(PrimaryButton, { label: "Voir les r\u00E9sultats", onClick:
|
|
70
|
-
isOpen && (React.createElement("div", { className: "backdrop", onClick:
|
|
67
|
+
React.createElement(PrimaryButton, { label: "Voir les r\u00E9sultats", onClick: handleClose }))),
|
|
68
|
+
isOpen && (React.createElement("div", { className: "backdrop", onClick: handleClose }))));
|
|
71
69
|
};
|
|
72
70
|
export default SingleFilter;
|
|
@@ -7,8 +7,9 @@ var ProgressBar = function (_a) {
|
|
|
7
7
|
var constrainedCurrentStep = Math.max(1, Math.min(currentStep, steps));
|
|
8
8
|
var progressWidth = ((constrainedCurrentStep - 1) / (steps - 1)) * 100;
|
|
9
9
|
return (React.createElement("div", { className: "progress-bar-container" },
|
|
10
|
-
|
|
11
|
-
React.createElement("
|
|
10
|
+
startIcon && currentStep > 1 && (React.createElement("div", { className: "progress-bar-icon-container" },
|
|
11
|
+
React.createElement("button", { className: "progress-bar-chevron", onClick: onStartIconClick },
|
|
12
|
+
React.createElement("i", { className: "allaw-icon-chevron-left" })))),
|
|
12
13
|
React.createElement("div", { className: "progress-bar-background ".concat(showProgressBar ? "" : "hidden-content") },
|
|
13
14
|
React.createElement("div", { className: "progress-bar-fill", style: { width: "".concat(progressWidth, "%") } })),
|
|
14
15
|
endIcon && (React.createElement("button", { className: "progress-bar-close", onClick: onEndIconClick },
|
|
@@ -2,7 +2,7 @@ import React from "react";
|
|
|
2
2
|
import "./TinyInfo.css";
|
|
3
3
|
export interface TinyInfoProps {
|
|
4
4
|
variant: "bold14" | "medium14" | "semiBold12" | "medium12";
|
|
5
|
-
color?: "bleu-allaw" | "mid-grey" | "dark-grey" | "noir" | "pure-white" | "actions-error";
|
|
5
|
+
color?: "bleu-allaw" | "mid-grey" | "dark-grey" | "noir" | "pure-white" | "actions-error" | "actions-valid";
|
|
6
6
|
text: string;
|
|
7
7
|
href?: string;
|
|
8
8
|
className?: string;
|