ar-design 0.2.73 → 0.2.75
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/assets/css/components/data-display/table/filter-popup.css +1 -1
- package/dist/assets/css/components/feedback/drawer/content.css +5 -0
- package/dist/assets/css/components/feedback/drawer/header.css +56 -0
- package/dist/assets/css/components/feedback/drawer/styles.css +85 -0
- package/dist/components/data-display/tabs/IProps.d.ts +4 -1
- package/dist/components/feedback/drawer/IProps.d.ts +14 -0
- package/dist/components/feedback/drawer/IProps.js +1 -0
- package/dist/components/feedback/drawer/index.d.ts +5 -0
- package/dist/components/feedback/drawer/index.js +68 -0
- package/dist/index.d.ts +2 -1
- package/dist/index.js +2 -1
- package/package.json +1 -1
|
@@ -0,0 +1,56 @@
|
|
|
1
|
+
.ar-drawer-wrapper > .ar-drawer > .header {
|
|
2
|
+
display: flex;
|
|
3
|
+
flex-direction: row;
|
|
4
|
+
justify-content: space-between;
|
|
5
|
+
align-items: center;
|
|
6
|
+
height: 3.5rem;
|
|
7
|
+
padding: 0 2rem;
|
|
8
|
+
border-bottom: solid 1px var(--gray-200);
|
|
9
|
+
}
|
|
10
|
+
.ar-drawer-wrapper > .ar-drawer > .header > .ar-typography-title {
|
|
11
|
+
width: calc(100% - 2.75rem);
|
|
12
|
+
text-wrap: nowrap;
|
|
13
|
+
text-overflow: ellipsis;
|
|
14
|
+
overflow: hidden;
|
|
15
|
+
}
|
|
16
|
+
|
|
17
|
+
.ar-drawer-wrapper > .ar-drawer > .header > .close {
|
|
18
|
+
display: flex;
|
|
19
|
+
justify-content: center;
|
|
20
|
+
align-items: center;
|
|
21
|
+
background-color: var(--white);
|
|
22
|
+
min-width: 2rem;
|
|
23
|
+
min-height: 2rem;
|
|
24
|
+
border: solid 1px var(--gray-300);
|
|
25
|
+
border-radius: var(--border-radius-sm);
|
|
26
|
+
cursor: pointer;
|
|
27
|
+
user-select: none;
|
|
28
|
+
transition: background 250ms, border 250ms ease-in-out;
|
|
29
|
+
}
|
|
30
|
+
.ar-drawer-wrapper > .ar-drawer > .header > .close::before,
|
|
31
|
+
.ar-drawer-wrapper > .ar-drawer > .header > .close::after {
|
|
32
|
+
position: absolute;
|
|
33
|
+
content: "";
|
|
34
|
+
width: 2px;
|
|
35
|
+
height: 15px;
|
|
36
|
+
background-color: var(--gray-300);
|
|
37
|
+
transform-origin: center;
|
|
38
|
+
transform: rotate(-45deg);
|
|
39
|
+
transition: transform 250ms ease-in-out;
|
|
40
|
+
}
|
|
41
|
+
.ar-drawer-wrapper > .ar-drawer > .header > .close::after {
|
|
42
|
+
transform: rotate(45deg);
|
|
43
|
+
}
|
|
44
|
+
.ar-drawer-wrapper > .ar-drawer > .header > .close:hover {
|
|
45
|
+
background-color: rgba(var(--danger-rgb), 0.1);
|
|
46
|
+
border: solid 1px var(--danger);
|
|
47
|
+
color: rgba(var(--danger-rgb), 0.75);
|
|
48
|
+
}
|
|
49
|
+
.ar-drawer-wrapper > .ar-drawer > .header > .close:hover::before,
|
|
50
|
+
.ar-drawer-wrapper > .ar-drawer > .header > .close:hover::after {
|
|
51
|
+
background-color: var(--danger);
|
|
52
|
+
transform: rotate(45deg);
|
|
53
|
+
}
|
|
54
|
+
.ar-drawer-wrapper > .ar-drawer > .header > .close:hover::after {
|
|
55
|
+
transform: rotate(-45deg);
|
|
56
|
+
}
|
|
@@ -0,0 +1,85 @@
|
|
|
1
|
+
.ar-drawer-wrapper {
|
|
2
|
+
position: fixed;
|
|
3
|
+
inset: 0;
|
|
4
|
+
z-index: 1050;
|
|
5
|
+
}
|
|
6
|
+
.ar-drawer-wrapper > .ar-drawer-bg {
|
|
7
|
+
position: fixed;
|
|
8
|
+
inset: 0;
|
|
9
|
+
background-color: rgba(var(--black-rgb), 0.5);
|
|
10
|
+
}
|
|
11
|
+
|
|
12
|
+
/* #region Open or Close */
|
|
13
|
+
.ar-drawer-wrapper.opened {
|
|
14
|
+
visibility: visible;
|
|
15
|
+
opacity: 1;
|
|
16
|
+
z-index: 100;
|
|
17
|
+
}
|
|
18
|
+
.ar-drawer-wrapper.closed {
|
|
19
|
+
visibility: hidden;
|
|
20
|
+
opacity: 0;
|
|
21
|
+
z-index: 99;
|
|
22
|
+
}
|
|
23
|
+
/* #endregion */
|
|
24
|
+
/* Open or Close */
|
|
25
|
+
|
|
26
|
+
.ar-drawer-wrapper > .ar-drawer {
|
|
27
|
+
position: absolute;
|
|
28
|
+
right: -75%;
|
|
29
|
+
background-color: var(--white);
|
|
30
|
+
width: 75%;
|
|
31
|
+
height: 100%;
|
|
32
|
+
border-top-left-radius: var(--border-radius-sm);
|
|
33
|
+
border-bottom-left-radius: var(--border-radius-sm);
|
|
34
|
+
}
|
|
35
|
+
.ar-drawer-wrapper.opened > .ar-drawer {
|
|
36
|
+
animation: open 1s ease 0s 1 normal forwards;
|
|
37
|
+
}
|
|
38
|
+
|
|
39
|
+
.ar-drawer-wrapper > .ar-drawer > .tabs {
|
|
40
|
+
position: absolute;
|
|
41
|
+
right: 100%;
|
|
42
|
+
top: 100px;
|
|
43
|
+
display: flex;
|
|
44
|
+
flex-direction: column;
|
|
45
|
+
align-items: flex-end;
|
|
46
|
+
gap: 0.5rem;
|
|
47
|
+
user-select: none;
|
|
48
|
+
}
|
|
49
|
+
.ar-drawer-wrapper > .ar-drawer > .tabs > .item {
|
|
50
|
+
position: relative;
|
|
51
|
+
background-color: var(--gray-300);
|
|
52
|
+
width: fit-content;
|
|
53
|
+
padding: 0.5rem 1rem;
|
|
54
|
+
border-top-left-radius: var(--border-radius-sm);
|
|
55
|
+
border-bottom-left-radius: var(--border-radius-sm);
|
|
56
|
+
cursor: pointer;
|
|
57
|
+
}
|
|
58
|
+
.ar-drawer-wrapper > .ar-drawer > .tabs > .item.selection {
|
|
59
|
+
background-color: var(--white);
|
|
60
|
+
border-right: solid 2.5px var(--primary);
|
|
61
|
+
}
|
|
62
|
+
.ar-drawer-wrapper > .ar-drawer > .tabs > .item.selection::before {
|
|
63
|
+
position: absolute;
|
|
64
|
+
top: 50%;
|
|
65
|
+
left: 100%;
|
|
66
|
+
transform: translateY(-50%);
|
|
67
|
+
content: "";
|
|
68
|
+
border: solid 10px transparent;
|
|
69
|
+
border-left-color: var(--primary);
|
|
70
|
+
}
|
|
71
|
+
.ar-drawer-wrapper > .ar-drawer > .tabs > .item > span {
|
|
72
|
+
text-wrap: nowrap;
|
|
73
|
+
}
|
|
74
|
+
|
|
75
|
+
@keyframes open {
|
|
76
|
+
0% {
|
|
77
|
+
right: -75%;
|
|
78
|
+
}
|
|
79
|
+
100% {
|
|
80
|
+
right: 0px;
|
|
81
|
+
}
|
|
82
|
+
}
|
|
83
|
+
|
|
84
|
+
@import url("./header.css");
|
|
85
|
+
@import url("./content.css");
|
|
@@ -1,6 +1,9 @@
|
|
|
1
1
|
import { TabProps } from "../../../libs/types";
|
|
2
2
|
interface IProps {
|
|
3
|
-
|
|
3
|
+
/**
|
|
4
|
+
* İsim benzersiz olmalıdır. Sayfa yenilenmesinde seçimin değişmemesi için kullanılmaktadır.
|
|
5
|
+
*/
|
|
6
|
+
name: string;
|
|
4
7
|
/**
|
|
5
8
|
* Tab'ları temsil eden dizi.
|
|
6
9
|
* Her bir eleman `TabProps` tipinde olmalıdır.
|
|
@@ -0,0 +1,14 @@
|
|
|
1
|
+
import { TabProps } from "../../../libs/types";
|
|
2
|
+
import { IChildren } from "../../../libs/types/IGlobalProps";
|
|
3
|
+
interface IProps extends IChildren {
|
|
4
|
+
title?: string;
|
|
5
|
+
tabs: TabProps[];
|
|
6
|
+
activeTab?: number;
|
|
7
|
+
open: {
|
|
8
|
+
get: boolean;
|
|
9
|
+
set: React.Dispatch<React.SetStateAction<boolean>>;
|
|
10
|
+
};
|
|
11
|
+
onChange?: (currentTab: number) => void;
|
|
12
|
+
onClose?: (closeTab: number) => void;
|
|
13
|
+
}
|
|
14
|
+
export default IProps;
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export {};
|
|
@@ -0,0 +1,68 @@
|
|
|
1
|
+
"use client";
|
|
2
|
+
import React, { useEffect, useRef, useState } from "react";
|
|
3
|
+
import Typography from "../../data-display/typography";
|
|
4
|
+
import ReactDOM from "react-dom";
|
|
5
|
+
import "../../../assets/css/components/feedback/drawer/styles.css";
|
|
6
|
+
const { Title } = Typography;
|
|
7
|
+
const Drawer = ({ title, tabs = [], activeTab, open, onChange }) => {
|
|
8
|
+
// refs
|
|
9
|
+
const _arDrawer = useRef(null);
|
|
10
|
+
const _drawerWrapperClassName = ["ar-drawer-wrapper"];
|
|
11
|
+
const _drawerClassName = ["ar-drawer"];
|
|
12
|
+
if (Object.keys(open).length > 0 && open.get)
|
|
13
|
+
_drawerWrapperClassName.push("opened");
|
|
14
|
+
else
|
|
15
|
+
_drawerWrapperClassName.push("closed");
|
|
16
|
+
// states
|
|
17
|
+
const [currentTab, setCurrentTab] = useState(0);
|
|
18
|
+
// useEffects
|
|
19
|
+
// methods
|
|
20
|
+
const handleKeys = (event) => {
|
|
21
|
+
const key = event.key;
|
|
22
|
+
const isArSelectOptions = document.getElementsByClassName("ar-select-options").length === 0;
|
|
23
|
+
const isArCalendar = document.getElementsByClassName("ar-date-calendar").length === 0;
|
|
24
|
+
const isArPopover = document.getElementsByClassName("ar-popover").length === 0;
|
|
25
|
+
if (key === "Escape" && isArCalendar && isArSelectOptions && isArPopover) {
|
|
26
|
+
event.stopPropagation();
|
|
27
|
+
open.set(false);
|
|
28
|
+
}
|
|
29
|
+
};
|
|
30
|
+
// useEffects
|
|
31
|
+
useEffect(() => {
|
|
32
|
+
if (open.get) {
|
|
33
|
+
document.body.style.overflow = "hidden";
|
|
34
|
+
document.addEventListener("keydown", handleKeys);
|
|
35
|
+
}
|
|
36
|
+
return () => {
|
|
37
|
+
document.body.style.removeProperty("overflow");
|
|
38
|
+
document.removeEventListener("keydown", handleKeys);
|
|
39
|
+
};
|
|
40
|
+
}, [open.get]);
|
|
41
|
+
useEffect(() => setCurrentTab(activeTab ?? 0), [activeTab]);
|
|
42
|
+
return ReactDOM.createPortal(React.createElement("div", { className: _drawerWrapperClassName.map((c) => c).join(" ") },
|
|
43
|
+
React.createElement("div", { className: "ar-drawer-bg", onMouseDown: (event) => {
|
|
44
|
+
event.stopPropagation();
|
|
45
|
+
const target = event.target;
|
|
46
|
+
if (_arDrawer.current && !_arDrawer.current.contains(target))
|
|
47
|
+
open.set(false);
|
|
48
|
+
} }),
|
|
49
|
+
React.createElement("div", { ref: _arDrawer, className: _drawerClassName.map((c) => c).join(" "), role: "dialog" },
|
|
50
|
+
title && (React.createElement("div", { className: "header" },
|
|
51
|
+
React.createElement(Title, { Level: "h3" }, title),
|
|
52
|
+
React.createElement("div", { className: "close", onClick: () => open.set((prev) => !prev) }))),
|
|
53
|
+
React.createElement("div", { className: "tabs" }, tabs.length > 0 &&
|
|
54
|
+
tabs.map((tab, index) => {
|
|
55
|
+
let className = ["item"];
|
|
56
|
+
if (currentTab === index)
|
|
57
|
+
className.push("selection");
|
|
58
|
+
return (React.createElement("div", { key: tab.title ?? index, className: className.map((c) => c).join(" "), onClick: () => {
|
|
59
|
+
setCurrentTab(index);
|
|
60
|
+
onChange && onChange(index);
|
|
61
|
+
const key = `${window.location.pathname}::${name}`;
|
|
62
|
+
sessionStorage.setItem(key, String(index));
|
|
63
|
+
} },
|
|
64
|
+
React.createElement("span", null, tab.title)));
|
|
65
|
+
})),
|
|
66
|
+
React.createElement("div", { className: "content" }, tabs.map((tab, index) => currentTab === index && tab.content)))), document.body);
|
|
67
|
+
};
|
|
68
|
+
export default Drawer;
|
package/dist/index.d.ts
CHANGED
|
@@ -21,6 +21,7 @@ import Table from "./components/data-display/table";
|
|
|
21
21
|
import Tabs from "./components/data-display/tabs";
|
|
22
22
|
import Typography from "./components/data-display/typography";
|
|
23
23
|
import Alert from "./components/feedback/alert";
|
|
24
|
+
import Drawer from "./components/feedback/drawer";
|
|
24
25
|
import Modal from "./components/feedback/modal";
|
|
25
26
|
import Popover from "./components/feedback/popover";
|
|
26
27
|
import Progress from "./components/feedback/progress";
|
|
@@ -30,4 +31,4 @@ import Menu from "./components/navigation/menu";
|
|
|
30
31
|
import Steps from "./components/navigation/steps";
|
|
31
32
|
import Grid from "./components/data-display/grid-system";
|
|
32
33
|
import Layout from "./components/layout";
|
|
33
|
-
export { Button, ButtonAction, ButtonGroup, Checkbox, DatePicker, Input, InputTag, Radio, Select, Switch, TextEditor, Upload, Card, Chip, Divider, DnD, Paper, SyntaxHighlighter, Table, Tabs, Typography, Alert, Modal, Popover, Progress, Tooltip, Breadcrumb, Menu, Steps, Grid, Layout, };
|
|
34
|
+
export { Button, ButtonAction, ButtonGroup, Checkbox, DatePicker, Input, InputTag, Radio, Select, Switch, TextEditor, Upload, Card, Chip, Divider, DnD, Paper, SyntaxHighlighter, Table, Tabs, Typography, Alert, Drawer, Modal, Popover, Progress, Tooltip, Breadcrumb, Menu, Steps, Grid, Layout, };
|
package/dist/index.js
CHANGED
|
@@ -24,6 +24,7 @@ import Tabs from "./components/data-display/tabs";
|
|
|
24
24
|
import Typography from "./components/data-display/typography";
|
|
25
25
|
// Feedback
|
|
26
26
|
import Alert from "./components/feedback/alert";
|
|
27
|
+
import Drawer from "./components/feedback/drawer";
|
|
27
28
|
import Modal from "./components/feedback/modal";
|
|
28
29
|
import Popover from "./components/feedback/popover";
|
|
29
30
|
import Progress from "./components/feedback/progress";
|
|
@@ -41,7 +42,7 @@ Button, ButtonAction, ButtonGroup, Checkbox, DatePicker, Input, InputTag, Radio,
|
|
|
41
42
|
// Data Display
|
|
42
43
|
Card, Chip, Divider, DnD, Paper, SyntaxHighlighter, Table, Tabs, Typography,
|
|
43
44
|
// Feedback
|
|
44
|
-
Alert, Modal, Popover, Progress, Tooltip,
|
|
45
|
+
Alert, Drawer, Modal, Popover, Progress, Tooltip,
|
|
45
46
|
// Navigation
|
|
46
47
|
Breadcrumb, Menu, Steps,
|
|
47
48
|
// Layout
|